/* style/terms-conditions.css */

/* Custom Properties based on the provided color scheme */
:root {
    --color-background: #08160F;
    --color-card-bg: #11271B;
    --color-text-main: #F2FFF6;
    --color-text-secondary: #A7D9B8;
    --color-button-gradient: linear-gradient(180deg, #2AD16F 0%, #13994A 100%);
    --color-border: #2E7A4E;
    --color-glow: #57E38D;
    --color-gold: #F2C14E;
    --color-divider: #1E3A2A;
    --color-deep-green: #0A4B2C;
    --color-primary: #11A84E; /* Main brand color */
    --color-secondary: #22C768; /* Auxiliary brand color */
}

/* Base styles for the page content, ensuring contrast with body background */
.page-terms-conditions {
    background-color: var(--color-background); /* Dark background from custom properties */
    color: var(--color-text-main); /* Light text for dark background */
    font-family: Arial, sans-serif;
    line-height: 1.6;
    padding-bottom: 60px; /* Add some padding at the bottom for spacing */
}

/* Text color for specific elements to maintain contrast */
.page-terms-conditions__link {
    color: var(--color-secondary); /* Use auxiliary color for links */
    text-decoration: underline;
}
.page-terms-conditions__link:hover {
    color: var(--color-glow); /* Lighter color on hover */
}

.page-terms-conditions__hero-section {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 60px 20px;
    padding-top: 10px; /* Small top padding, body handles header offset */
    min-height: 500px;
    box-sizing: border-box;
}

.page-terms-conditions__hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    filter: brightness(0.4); /* Darken image for text readability, not changing color */
}

.page-terms-conditions__hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    color: var(--color-text-main);
}