/* style.css */

/* -------------------------------------------------------------------
   1. CSS Variables (Root)
------------------------------------------------------------------- */
:root {
    /* Color Palette (Tetradic - Example) */
    --color-primary: #0D2C54;        /* Deep Navy Blue */
    --color-secondary: #F5A623;      /* Vibrant Orange/Yellow */
    --color-tertiary: #05A8AA;       /* Teal/Bright Cyan */
    --color-quaternary: #A31621;     /* Deep Red/Burgundy */

    --color-primary-darker: #081B33;
    --color-secondary-darker: #D08C1E;

    /* Text Colors */
    --color-text-light: #FFFFFF;
    --color-text-light-accent: #E8E8E8; /* Slightly off-white for less emphasis */
    --color-text-dark: #333333;
    --color-text-headings: #222222; /* Darker for main headings */
    --color-text-subtle: #555555;

    /* Background Colors */
    --color-background-body: #F4F4F4; /* Light grayish for body */
    --color-background-light: #FFFFFF;
    --color-background-dark: var(--color-primary-darker); /* For footer or dark sections */
    --color-background-alternate: #E9ECEF; /* Slightly different light gray */
    
    /* Border & Shadow Colors */
    --color-border: #CED4DA;
    --color-shadow-dark: rgba(0, 0, 0, 0.15);
    --color-shadow-light: rgba(255, 255, 255, 0.5); /* For inset highlights */
    --color-shadow-volumetric-main: rgba(0, 0, 0, 0.2);
    --color-shadow-volumetric-highlight: rgba(255, 255, 255, 0.08);


    /* Fonts */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Merriweather', serif;

    /* Spacing */
    --spacing-xs: 0.5rem;  /* 8px */
    --spacing-sm: 1rem;    /* 16px */
    --spacing-md: 1.5rem;  /* 24px */
    --spacing-lg: 2.5rem;  /* 40px */
    --spacing-xl: 4rem;    /* 64px */

    /* Borders & Radius */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px; /* For larger volumetric elements */

    /* Transitions */
    --transition-fast: 0.2s ease-out;
    --transition-medium: 0.3s ease-in-out;

    /* Volumetric Shadows */
    --shadow-volumetric: 
        3px 3px 8px var(--color-shadow-volumetric-main),  /* Main shadow */
        -2px -2px 6px var(--color-shadow-volumetric-highlight); /* Top-left highlight */
    --shadow-volumetric-inset:
        inset 2px 2px 5px var(--color-shadow-volumetric-main),
        inset -2px -2px 5px var(--color-shadow-volumetric-highlight);
    --shadow-volumetric-pressed:
        1px 1px 3px var(--color-shadow-volumetric-main), /* Softer outer */
        inset 2px 2px 5px var(--color-shadow-volumetric-main); /* Stronger inset */
}

/* -------------------------------------------------------------------
   2. Global Styles & Resets
------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
}

body {
    font-family: var(--font-body);
    color: var(--color-text-dark);
    background-color: var(--color-background-body);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text-headings);
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
    font-weight: 700;
}

h1 { font-size: 2.8rem; font-weight: 900; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.3rem; }

p {
    margin-bottom: var(--spacing-sm);
}

a {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-secondary-darker);
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    list-style-position: inside;
    margin-bottom: var(--spacing-sm);
}

/* -------------------------------------------------------------------
   3. Layout & Container
------------------------------------------------------------------- */
.container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
}

.section-container {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}

/* -------------------------------------------------------------------
   4. Header & Navigation
------------------------------------------------------------------- */
.site-header {
    background-color: rgba(13, 44, 84, 0.9); /* Primary color with slight transparency */
    backdrop-filter: blur(8px);
    padding: var(--spacing-sm) 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--color-text-light);
    text-decoration: none;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.logo:hover {
    color: var(--color-secondary);
    text-decoration: none;
}

.main-navigation .nav-list {
    list-style: none;
    display: flex;
    gap: var(--spacing-md);
    margin: 0; padding: 0;
}

.main-navigation .nav-list li a {
    color: var(--color-text-light-accent);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    padding: var(--spacing-xs) 0;
    position: relative;
    transition: color var(--transition-fast);
}

.main-navigation .nav-list li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-secondary);
    transition: width var(--transition-medium);
}

.main-navigation .nav-list li a:hover,
.main-navigation .nav-list li a.active {
    color: var(--color-text-light);
}

.main-navigation .nav-list li a:hover::after,
.main-navigation .nav-list li a.active::after {
    width: 100%;
}

.menu-toggle {
    display: none; /* Hidden by default, shown on mobile */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.hamburger {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-text-light);
    position: relative;
    transition: background-color 0s 0.3s; /* Delay disappearance of middle bar */
}
.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    width: 25px;
    height: 3px;
    background-color: var(--color-text-light);
    transition: transform 0.3s ease-in-out, top 0.3s ease-in-out 0.3s;
}
.hamburger::before { top: -8px; }
.hamburger::after { top: 8px; }

/* Active state for burger menu */
.menu-toggle.active .hamburger { background-color: transparent; }
.menu-toggle.active .hamburger::before { top: 0; transform: rotate(45deg); transition: top 0.3s ease-in-out, transform 0.3s ease-in-out 0.3s; }
.menu-toggle.active .hamburger::after { top: 0; transform: rotate(-45deg); transition: top 0.3s ease-in-out, transform 0.3s ease-in-out 0.3s; }


/* -------------------------------------------------------------------
   5. Buttons & Interactive Elements (Global)
------------------------------------------------------------------- */
.cta-button, button, input[type="submit"], input[type="button"] {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 2px solid transparent;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 1rem;
    border-radius: var(--border-radius-md);
    transition: all var(--transition-fast);
    text-decoration: none;
}

.volumetric-button {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    border-color: var(--color-secondary-darker);
    box-shadow: 
        2px 2px 5px rgba(0,0,0,0.2), /* Main shadow */
        inset 1px 1px 2px rgba(255,255,255,0.4), /* Inner top highlight */
        inset -1px -1px 2px rgba(0,0,0,0.1); /* Inner bottom shadow */
}

.volumetric-button:hover {
    background-color: var(--color-secondary-darker);
    color: var(--color-primary-darker);
    transform: translateY(-2px);
    box-shadow: 
        4px 4px 8px rgba(0,0,0,0.25),
        inset 1px 1px 1px rgba(255,255,255,0.3),
        inset -1px -1px 1px rgba(0,0,0,0.05);
    text-decoration: none;
}

.volumetric-button:active {
    transform: translateY(1px);
    box-shadow: 
        1px 1px 3px rgba(0,0,0,0.2),
        inset 2px 2px 4px rgba(0,0,0,0.2), /* More pronounced inset */
        inset -1px -1px 1px rgba(255,255,255,0.1);
}

.cta-button-small {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.9rem;
}

.link-details {
    color: var(--color-tertiary);
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    padding: 3px 0;
    position: relative;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.link-details:hover {
    color: var(--color-primary);
    border-bottom-color: var(--color-secondary);
    text-decoration: none;
}

/* -------------------------------------------------------------------
   6. Form Elements
------------------------------------------------------------------- */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-dark); /* Default for light backgrounds */
}

.contact-form label { /* For forms on dark/image backgrounds */
    color: var(--color-text-light-accent);
}

.volumetric-input,
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea, select {
    width: 100%;
    padding: var(--spacing-sm);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text-dark);
    background-color: var(--color-background-light);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-volumetric-inset);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.volumetric-input:focus,
input[type="text"]:focus, input[type="email"]:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.3), var(--shadow-volumetric-inset); /* Highlight focus */
}

textarea.volumetric-input {
    min-height: 120px;
    resize: vertical;
}

.volumetric-form {
    background-color: rgba(13, 44, 84, 0.3); /* Slightly transparent primary */
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-volumetric);
    backdrop-filter: blur(5px); /* Subtle glassmorphism if bg allows */
}

/* -------------------------------------------------------------------
   7. General Section Styling
------------------------------------------------------------------- */
.content-section {
    position: relative; /* For parallax or overlays */
}

.section-title {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-headings);
    position: relative;
    padding-bottom: var(--spacing-sm);
}
.section-title::after { /* Underline accent */
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: var(--color-secondary);
}

.section-intro {
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacing-lg);
    font-size: 1.1rem;
    color: var(--color-text-subtle);
}

.alternate-bg {
    background-color: var(--color-background-alternate);
}

/* Parallax and Background Image Handling */
.parallax-background {
    background-attachment: fixed; /* Simple parallax, JS can enhance */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.parallax-background .section-container > * { /* Content on parallax should be above overlay */
    position: relative;
    z-index: 2;
}

.hero-overlay, .overlay-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55));
    z-index: 1;
}
.parallax-background .section-title,
.parallax-background .section-intro {
    color: var(--color-text-light); /* Text on dark overlay */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.parallax-background .section-title::after {
    background-color: var(--color-secondary); /* Ensure accent is visible */
}


/* -------------------------------------------------------------------
   8. Specific Section Styles
------------------------------------------------------------------- */

/* Hero Section */
.hero-section {
    min-height: 85vh; /* Responsive height */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    color: var(--color-text-light); /* Explicitly white text */
    padding: var(--spacing-xl) 0;
}
.hero-content {
    position: relative; /* Above overlay */
    z-index: 2;
    max-width: 800px;
}
.hero-title {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-light);
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.hero-subtitle {
    font-size: 1.3rem;
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-light-accent);
    line-height: 1.8;
}

/* Mission & Vision Sections */
.mission-content, .vision-content, .careers-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}
.section-image {
    border-radius: var(--border-radius-md);
    width: 100%;
    height: auto;
    max-height: 400px; /* Constrain image height */
    object-fit: cover;
}
.volumetric-image {
    box-shadow: var(--shadow-volumetric);
    border: 3px solid var(--color-background-light); /* Retro frame */
}

/* Our Process (Timeline) */
.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}
.timeline::after { /* Central line */
    content: '';
    position: absolute;
    width: 4px;
    background-color: var(--color-secondary);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
    z-index: 0;
    border-radius: 2px;
}
.timeline-item {
    padding: var(--spacing-sm) var(--spacing-lg);
    position: relative;
    background-color: inherit;
    width: 50%;
    margin-bottom: var(--spacing-md);
}
.timeline-item:nth-child(odd) { left: 0; padding-left:0; }
.timeline-item:nth-child(even) { left: 50%; padding-right:0;}

.timeline-item::after { /* Connector to central line (circle dot) */
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    right: -10px;
    background-color: var(--color-background-light);
    border: 4px solid var(--color-secondary);
    top: 25px;
    border-radius: 50%;
    z-index: 1;
}
.timeline-item:nth-child(even)::after { left: -10px; }

.timeline-icon {
    position: absolute;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border-radius: 50%;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    z-index: 2; /* Above the ::after dot */
    top: 15px; /* Align with ::after dot */
}
.timeline-item:nth-child(odd) .timeline-icon { right: -20px; /* Position icon on the line */ }
.timeline-item:nth-child(even) .timeline-icon { left: -20px; /* Position icon on the line */ }

.timeline-content {
    padding: var(--spacing-md);
    background-color: var(--color-background-light);
    position: relative;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-volumetric);
}
.timeline-content h3 {
    margin-top: 0;
    color: var(--color-primary);
}

/* Statistics Section */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    text-align: center;
}
.stat-card {
    background-color: rgba(255,255,255,0.1); /* Semi-transparent for on-image stats */
    backdrop-filter: blur(5px);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    color: var(--color-text-light);
    box-shadow: var(--shadow-volumetric);
    border: 1px solid rgba(255,255,255,0.2);
}
.stat-number {
    font-size: 3rem;
    font-weight: 900;
    color: var(--color-secondary);
    margin-bottom: var(--spacing-xs);
}
.stat-label {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-light-accent);
}
.stat-card p {
    font-size: 0.9rem;
    color: var(--color-text-light-accent);
    line-height: 1.5;
}


/* Webinars, Pricing, External Resources (Card-based) */
.webinars-grid, .pricing-grid, .resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.card {
    background-color: var(--color-background-light);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-volumetric);
    overflow: hidden; /* Ensure content stays within rounded corners */
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 6px 6px 15px var(--color-shadow-volumetric-main), -3px -3px 8px var(--color-shadow-volumetric-highlight);
}

.card .card-image { /* Image container */
    width: 100%;
    height: 220px; /* Fixed height for consistency */
    overflow: hidden;
    background-color: var(--color-border); /* Placeholder bg */
}
.card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crop image to fit */
    transition: transform 0.4s ease;
}
.card:hover .card-image img {
    transform: scale(1.05); /* Subtle zoom on hover */
}

.card .card-content {
    padding: var(--spacing-md);
    flex-grow: 1; /* Allows content to fill space, useful for button alignment */
    display: flex;
    flex-direction: column;
    text-align: left; /* Default text alignment */
}
.card .card-content h3 {
    margin-top: 0;
    color: var(--color-primary);
    font-size: 1.4rem;
}
.card .card-content p {
    font-size: 0.95rem;
    margin-bottom: var(--spacing-sm);
    flex-grow: 1; /* Pushes button to bottom if card heights vary due to content */
}
.card .card-content .cta-button-small {
    margin-top: auto; /* Pushes button to the bottom */
    align-self: flex-start; /* Aligns button to the left if text-align is left */
}
.webinar-date {
    font-size: 0.85rem;
    color: var(--color-text-subtle);
    font-style: italic;
    margin-bottom: var(--spacing-xs);
}

/* Pricing Card Specifics */
.pricing-card {
    text-align: center; /* Center content in pricing cards */
}
.pricing-card .card-image { /* For icons */
    height: 120px;
    width: 120px;
    margin: var(--spacing-md) auto var(--spacing-sm) auto;
    border-radius: 50%; /* Circular icons */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-background-alternate);
}
.pricing-card .card-image img {
    width: 60%; /* Icon smaller than its container */
    height: 60%;
    object-fit: contain;
}
.pricing-card .card-content h3 {
    font-size: 1.5rem;
}
.price-tag {
    font-size: 2rem;
    font-weight: 900;
    color: var(--color-secondary);
    margin: var(--spacing-xs) 0 var(--spacing-md) 0;
}
.pricing-card ul {
    list-style: none;
    padding: 0;
    margin-bottom: var(--spacing-md);
    text-align: left; /* List items often look better left-aligned */
    margin-left: auto;
    margin-right: auto;
    max-width: 250px; /* Constrain list width */
}
.pricing-card ul li {
    margin-bottom: var(--spacing-xs);
    padding-left: var(--spacing-md);
    position: relative;
    font-size: 0.95rem;
}
.pricing-card ul li::before {
    content: '✓'; /* Checkmark */
    color: var(--color-tertiary);
    position: absolute;
    left: 0;
    font-weight: bold;
}
.pricing-card .cta-button-small {
    align-self: center; /* Center button in pricing card */
}

/* Resource Card */
.resource-card .card-content h3 {
    font-size: 1.2rem;
}
.resource-card .card-content h3 a {
    color: var(--color-primary);
}
.resource-card .card-content h3 a:hover {
    color: var(--color-secondary);
}

/* Events Calendar Section */
.events-list .event-item {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--color-background-light);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-volumetric);
    border-left: 5px solid var(--color-tertiary);
}
.event-date-box {
    flex-shrink: 0;
    width: 80px;
    text-align: center;
    background-color: var(--color-secondary);
    color: var(--color-primary);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-heading);
}
.event-date-box .month {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
}
.event-date-box .day {
    display: block;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
}
.event-details h3 {
    margin-top: 0;
    font-size: 1.4rem;
    color: var(--color-primary);
}
.event-details p {
    margin-bottom: var(--spacing-xs);
    font-size: 0.95rem;
}
.event-details .event-time, .event-details .event-location {
    font-size: 0.9rem;
    color: var(--color-text-subtle);
    font-style: italic;
}

/* Careers Section */
.careers-content {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
}
.careers-content .cta-button {
    margin-top: var(--spacing-sm);
    justify-self: start;
}

/* Contact Section */
.contact-form {
    max-width: 700px;
    margin: 0 auto var(--spacing-lg) auto;
}
.contact-details {
    text-align: center;
    color: var(--color-text-light-accent);
}
.contact-details h3 {
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
}
.contact-details p {
    margin-bottom: var(--spacing-xs);
}
.contact-details a {
    color: var(--color-secondary);
}
.contact-details a:hover {
    color: var(--color-text-light);
}


/* -------------------------------------------------------------------
   9. Footer
------------------------------------------------------------------- */
.site-footer {
    background-color: var(--color-background-dark);
    color: var(--color-text-light-accent);
    padding: var(--spacing-xl) 0 var(--spacing-md) 0;
    font-size: 0.9rem;
}
.footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}
.footer-widget h4 {
    font-family: var(--font-heading);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
    font-size: 1.2rem;
    position: relative;
    padding-bottom: var(--spacing-xs);
}
.footer-widget h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: var(--color-secondary);
}
.footer-nav-list, .social-media-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-nav-list li, .social-media-links li {
    margin-bottom: var(--spacing-xs);
}
.footer-nav-list li a, .social-media-links li a {
    color: var(--color-text-light-accent);
    text-decoration: none;
}
.footer-nav-list li a:hover, .social-media-links li a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}
.footer-bottom {
    text-align: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* -------------------------------------------------------------------
   10. Modals
------------------------------------------------------------------- */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6); /* Dim background */
    backdrop-filter: blur(3px);
}
.modal.active {
    display: flex; /* Use flex to center */
    align-items: center;
    justify-content: center;
}
.modal-content {
    background-color: var(--color-background-light);
    margin: auto;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    width: 90%;
    max-width: 500px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3), var(--shadow-volumetric);
    position: relative; /* For close button */
    animation: modalOpen 0.4s ease-out;
}
@keyframes modalOpen {
    from { opacity: 0; transform: translateY(-30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.close-button, .close-modal-button {
    color: var(--color-text-subtle);
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-md);
    font-size: 1.8rem;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}
.close-button:hover, .close-button:focus {
    color: var(--color-primary);
    text-decoration: none;
}
.modal-content h2 {
    margin-top: 0;
    color: var(--color-primary);
    text-align: center;
}
.modal-form input[type="text"], .modal-form input[type="email"] {
    margin-bottom: var(--spacing-sm);
}

/* -------------------------------------------------------------------
   11. Utility & Helper Classes
------------------------------------------------------------------- */
.animate__animated { /* Animate.css integration with delay */
    animation-duration: 0.8s;
}
.gsap-reveal { /* For GSAP controlled animations */
    opacity: 0;
    transform: translateY(30px);
}

.volumetric-element {
    /* Base for cards, timeline content etc. */
    background-color: var(--color-background-light);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-volumetric);
}


/* -------------------------------------------------------------------
   12. Specific Page Styles (Success, Privacy, Terms)
------------------------------------------------------------------- */
.success-page-container, .error-page-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 160px); /* Adjust if header/footer height changes */
    text-align: center;
    padding: var(--spacing-lg);
    margin-top: 80px; /* Account for fixed header */
}
.success-page-container h1, .error-page-container h1 {
    color: var(--color-primary);
    font-size: 2.5rem;
    margin-bottom: var(--spacing-sm);
}
.success-page-container p, .error-page-container p {
    font-size: 1.2rem;
    margin-bottom: var(--spacing-lg);
}
.success-icon, .error-icon {
    font-size: 5rem;
    margin-bottom: var(--spacing-md);
}
.success-icon { color: var(--color-tertiary); }
.error-icon { color: var(--color-quaternary); }

.legal-page-content {
    padding-top: 120px; /* Approx header height + some_margin */
    padding-bottom: var(--spacing-xl);
}
.legal-page-content .container {
    max-width: 850px; /* Good width for readable text */
    background-color: var(--color-background-light);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-volumetric);
}
.legal-page-content h1 {
    margin-bottom: var(--spacing-lg);
    text-align: center;
}
.legal-page-content h2 {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: var(--spacing-xs);
}
.legal-page-content p, .legal-page-content ul, .legal-page-content ol {
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
}
.legal-page-content ul, .legal-page-content ol {
    padding-left: var(--spacing-md);
}


/* -------------------------------------------------------------------
   13. Responsive Design (Media Queries)
------------------------------------------------------------------- */
@media (max-width: 992px) {
    h1 { font-size: 2.4rem; }
    .hero-title { font-size: 3rem; }
    h2 { font-size: 1.9rem; }
    .section-title { margin-bottom: var(--spacing-md); }
    .timeline::after { left: 30px; }
    .timeline-item { width: 100%; padding-left: 70px; padding-right: 20px; margin-bottom: var(--spacing-lg); }
    .timeline-item:nth-child(odd), .timeline-item:nth-child(even) { left: 0; }
    .timeline-item::after { left: 20px; } /* Adjust dot position */
    .timeline-item .timeline-icon { left: 10px; } /* Adjust icon position */
}

@media (max-width: 768px) {
    .header-container { flex-wrap: wrap; }
    .main-navigation { width: 100%; }
    .menu-toggle { display: block; margin-left: auto; } /* Show burger */
    .nav-list {
        display: none; /* Hidden by default */
        flex-direction: column;
        width: 100%;
        background-color: rgba(13, 44, 84, 0.98); /* Solid for mobile dropdown */
        position: absolute;
        top: 100%; /* Position below header */
        left: 0;
        padding: var(--spacing-sm) 0;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    }
    .nav-list.active { display: flex; } /* Show when active */
    .nav-list li { width: 100%; text-align: center; }
    .nav-list li a { 
        display: block; 
        padding: var(--spacing-sm); 
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .nav-list li:last-child a { border-bottom: none; }
    .nav-list li a::after { display: none; } /* Remove underline effect on mobile dropdown */

    h1 { font-size: 2rem; }
    .hero-title { font-size: 2.5rem; }
    .hero-subtitle { font-size: 1.1rem; }
    h2 { font-size: 1.7rem; }

    .mission-content, .vision-content, .careers-content {
        grid-template-columns: 1fr; /* Stack image and text */
    }
    .section-image { margin-bottom: var(--spacing-md); }
    .footer-widgets { grid-template-columns: 1fr; text-align: center; }
    .footer-widget h4::after { left: 50%; transform: translateX(-50%); }

    .timeline::after { display: none; } /* Simplify timeline for mobile */
    .timeline-item, .timeline-item:nth-child(odd), .timeline-item:nth-child(even) {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: var(--spacing-md);
    }
    .timeline-item::after, .timeline-item .timeline-icon { display: none; } /* Hide dots and icons for simpler mobile */
    .timeline-content { box-shadow: var(--shadow-volumetric); /* Ensure shadow is visible */ }
}

@media (max-width: 480px) {
    .hero-title { font-size: 2rem; }
    .stats-grid { grid-template-columns: 1fr; }
    .event-item { flex-direction: column; align-items: center; text-align: center; }
    .event-date-box { margin-bottom: var(--spacing-sm); width: auto; padding: var(--spacing-xs) var(--spacing-sm); }
    .event-date-box .day { font-size: 1.5rem; }
}