/* style.css */

/*------------------------------------------------------------------
[Table of Contents]

1.  Global Styles & Resets
2.  CSS Variables
3.  Utility Classes
4.  Typography
5.  Layout Components
    5.1. Header
    5.2. Footer
6.  Button Styling (Global)
7.  Form Styling
8.  Card Styling
9.  Section-Specific Styling
    9.1. Hero Section
    9.2. About Us Preview Section
    9.3. Workshops Section
    9.4. Instructors Section
    9.5. Awards Section
    9.6. Careers Section
    9.7. External Resources Section
    9.8. Contact Section
10. Component Styling
    10.1. Modals
    10.2. Statistic Widgets
    10.3. Switches
    10.4. Curved Grid Elements
11. Page-Specific Adjustments
    11.1. Success Page
    11.2. Privacy & Terms Pages
12. Animations & Transitions
13. Responsiveness (Media Queries)
-------------------------------------------------------------------*/

/* 1. 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-family-body);
    line-height: 1.7;
    color: var(--text-color-dark);
    background-color: var(--neutral-lighter);
    overflow-x: hidden; /* Prevent horizontal scroll */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--accent-color-1);
}

/* 2. CSS Variables
-------------------------------------------------------------------*/
:root {
    /* Analogous Color Scheme - Corporate Blue/Teal Base */
    --primary-color: #0A678A; /* Deep Cerulean Blue */
    --primary-color-darker: #074B63;
    --secondary-color: #0A8A82; /* Greener Teal */
    --accent-color-1: #07536D; /* Darker shade of primary for depth/hover */
    --accent-color-2: #3B9ABF; /* Lighter, brighter blue for highlights */
    --accent-color-3: #E8F1F5; /* Very light blue for subtle backgrounds */

    /* Neutral Colors */
    --neutral-darkest: #1a1a1a;
    --neutral-dark: #333333;
    --neutral-medium: #5f6368; /* Google's secondary text color */
    --neutral-light: #f0f2f5; /* Light gray for backgrounds */
    --neutral-lighter: #ffffff;

    /* Text Colors */
    --text-color-dark: var(--neutral-dark);
    --text-color-light: var(--neutral-lighter);
    --text-color-medium: var(--neutral-medium);
    --text-color-headings: var(--neutral-darkest);
    --text-color-hero: var(--neutral-lighter); /* Strictly white for hero */

    /* Gradients */
    --gradient-primary-secondary: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    --gradient-overlay-dark: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6));
    --gradient-overlay-primary: linear-gradient(rgba(10, 103, 138, 0.7), rgba(10, 138, 130, 0.8));

    /* Fonts */
    --font-family-headings: 'Roboto', 'Arial', sans-serif;
    --font-family-body: 'Lato', 'Arial', sans-serif;

    /* Spacing */
    --spacing-xs: 0.25rem;  /* 4px */
    --spacing-sm: 0.5rem;   /* 8px */
    --spacing-md: 1rem;     /* 16px */
    --spacing-lg: 1.5rem;   /* 24px */
    --spacing-xl: 2rem;     /* 32px */
    --spacing-xxl: 3rem;    /* 48px */

    /* Borders */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
    --border-light: 1px solid #dee2e6;

    /* Shadows */
    --box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.07);
    --box-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --box-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);

    /* Transitions */
    --transition-speed-fast: 0.2s;
    --transition-speed-normal: 0.3s;

    /* Header Height */
    --header-height: 70px;
}

/* 3. Utility Classes
-------------------------------------------------------------------*/
.container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

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

.text-center {
    text-align: center;
}

.img-responsive {
    max-width: 100%;
    height: auto;
}

.curved-corners {
    border-radius: var(--border-radius-md);
}

/* For ScrollReveal.js */
.animate-on-scroll {
    /*opacity: 0;*/
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    transition-delay: var(--delay, 0s); /* Custom delay per element */
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.columns {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    margin-top: -0.75rem;
}

.column {
    display: block;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    padding: 0.75rem;
}

.column.is-two-thirds {
    flex: none;
    width: 66.6666%;
}


/* 4. Typography
-------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-headings);
    color: var(--text-color-headings);
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Subtle shadow for headings */
}
.section-title, .page-title {
     text-shadow: none; /* Remove default text shadow if a specific one is applied, or ensure it fits */
}


h1 { font-size: 2.8rem; margin-bottom: var(--spacing-lg); } /* ~44.8px */
h2 { font-size: 2.2rem; margin-bottom: var(--spacing-lg); } /* ~35.2px */
h3 { font-size: 1.6rem; margin-bottom: var(--spacing-md); } /* ~25.6px */
h4 { font-size: 1.25rem; margin-bottom: var(--spacing-sm); } /* ~20px */

.section-title {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    color: var(--neutral-darkest); /* Ensure high contrast for section titles */
    position: relative;
    padding-bottom: var(--spacing-sm);
}

.section-title::after { /* Optional: subtle underline accent */
    content: '';
    display: block;
    width: 70px;
    height: 3px;
    background-color: var(--primary-color);
    margin: var(--spacing-sm) auto 0;
    border-radius: 2px;
}

.page-title { /* For titles on dedicated pages */
    color: var(--text-color-hero); /* White for hero-like page headers */
    text-align: center;
}

.section-intro {
    font-size: 1.1rem;
    color: var(--text-color-medium);
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--spacing-xl) auto;
    line-height: 1.8;
}

p {
    margin-bottom: var(--spacing-md);
    color: var(--text-color-dark);
    line-height: 1.7;
}

.legal-text p, .legal-text ul li {
    font-size: 0.95rem;
    color: var(--text-color-medium);
}
.legal-text h2 {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    font-size: 1.8rem;
}
.legal-text h3 {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
    font-size: 1.4rem;
}


/* 5. Layout Components
-------------------------------------------------------------------*/

/* 5.1. Header */
.site-header {
    background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white */
    backdrop-filter: blur(8px); /* Glassmorphism effect */
    -webkit-backdrop-filter: blur(8px);
    border-bottom: var(--border-light);
    padding: var(--spacing-sm) 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: var(--header-height);
    box-shadow: var(--box-shadow-sm);
}

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

.logo {
    font-family: var(--font-family-headings);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    transition: color var(--transition-speed-fast) ease;
}
.logo:hover {
    color: var(--accent-color-1);
}

.main-nav ul {
    display: flex;
    align-items: center;
}

.main-nav li {
    margin-left: var(--spacing-lg);
}

.main-nav a {
    font-family: var(--font-family-body);
    font-weight: 700;
    color: var(--neutral-dark);
    padding: var(--spacing-sm) var(--spacing-xs);
    position: relative;
    transition: color var(--transition-speed-fast) ease;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--primary-color);
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width var(--transition-speed-normal) ease;
}

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

.nav-toggle { /* Burger Menu */
    display: none; /* Hidden by default, shown in media queries */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001; /* Above nav items when menu is open */
}

.hamburger {
    display: block;
    width: 25px;
    height: 2px;
    background-color: var(--neutral-dark);
    position: relative;
    transition: background-color 0s 0.3s; /* Delay hiding central bar */
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--neutral-dark);
    transition: transform 0.3s ease, top 0.3s ease;
}

.hamburger::before {
    top: -8px;
}

.hamburger::after {
    top: 8px;
}

/* Burger Menu Open State (JS will add .nav-open to body or header) */
.nav-open .hamburger {
    background-color: transparent; /* Hide central bar */
}

.nav-open .hamburger::before {
    top: 0;
    transform: rotate(45deg);
}

.nav-open .hamburger::after {
    top: 0;
    transform: rotate(-45deg);
}


/* 5.2. Footer */
.site-footer {
    background-color: var(--neutral-darkest);
    color: var(--neutral-light);
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-md); /* Less padding at the very bottom */
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.footer-column h4 {
    font-family: var(--font-family-headings);
    color: var(--neutral-lighter);
    margin-bottom: var(--spacing-md);
    font-size: 1.1rem;
    position: relative;
    padding-bottom: var(--spacing-sm);
}
.footer-column h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--primary-color);
}


.footer-column p {
    color: var(--neutral-medium); /* Lighter than body text for footer on dark bg */
    font-size: 0.9rem;
    line-height: 1.6;
}

.footer-column ul li {
    margin-bottom: var(--spacing-sm);
}

.footer-column ul a {
    color: var(--neutral-medium);
    font-size: 0.9rem;
    transition: color var(--transition-speed-fast) ease, padding-left var(--transition-speed-fast) ease;
}

.footer-column ul a:hover {
    color: var(--neutral-lighter);
    padding-left: var(--spacing-xs);
}

.social-links li {
    display: inline-block; /* For horizontal layout if needed, or keep block for vertical */
    /* margin-right: var(--spacing-md); Remove if block and stacked */
}
.social-links a { /* Text links for social media */
    color: var(--neutral-medium);
    font-weight: bold;
    font-size: 0.95rem;
}
.social-links a:hover {
    color: var(--accent-color-2);
}


.footer-bottom {
    text-align: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--neutral-dark); /* Subtle separator */
    font-size: 0.85rem;
    color: var(--neutral-medium);
}

/* 6. Button Styling (Global)
-------------------------------------------------------------------*/
.button, button, input[type="submit"], input[type="button"] {
    display: inline-block;
    font-family: var(--font-family-headings);
    font-weight: 700;
    font-size: 1rem;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    transition: background-color var(--transition-speed-normal) ease,
                color var(--transition-speed-normal) ease,
                transform var(--transition-speed-fast) ease,
                box-shadow var(--transition-speed-normal) ease;
    box-shadow: var(--box-shadow-sm);
}

.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-md);
}
.button:active, button:active, input[type="submit"]:active, input[type="button"]:active {
    transform: translateY(0px);
    box-shadow: var(--box-shadow-sm);
}


.primary-button {
    background-color: var(--primary-color);
    color: var(--text-color-light);
}
.primary-button:hover {
    background-color: var(--accent-color-1);
    color: var(--text-color-light);
}

.secondary-button {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}
.secondary-button:hover {
    background-color: var(--primary-color);
    color: var(--text-color-light);
}

.tertiary-button {
    background-color: var(--neutral-light);
    color: var(--primary-color);
    box-shadow: none;
}
.tertiary-button:hover {
    background-color: var(--accent-color-3);
    color: var(--accent-color-1);
    box-shadow: none;
}

/* 'Read More' link styling */
.read-more-link {
    display: inline-block;
    font-weight: bold;
    color: var(--primary-color);
    margin-top: var(--spacing-sm);
    position: relative;
    padding-right: var(--spacing-md); /* Space for arrow */
}

.read-more-link::after {
    content: '→'; /* Or an SVG icon */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: right var(--transition-speed-fast) ease;
}

.read-more-link:hover {
    color: var(--accent-color-1);
}
.read-more-link:hover::after {
    right: -5px;
}

/* 7. Form Styling
-------------------------------------------------------------------*/
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-group label {
    display: block;
    font-family: var(--font-family-body);
    font-weight: 700;
    color: var(--neutral-dark);
    margin-bottom: var(--spacing-sm);
    font-size: 0.9rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
textarea,
select {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid #ccc; /* Lighter border */
    border-radius: var(--border-radius-sm);
    font-family: var(--font-family-body);
    font-size: 1rem;
    color: var(--text-color-dark);
    background-color: var(--neutral-lighter);
    transition: border-color var(--transition-speed-normal) ease, box-shadow var(--transition-speed-normal) ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(10, 103, 138, 0.15); /* Primary color focus ring */
}

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

::placeholder {
    color: #999; /* Lighter placeholder text */
    opacity: 1;
}

/* 8. Card Styling
-------------------------------------------------------------------*/
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
}

.card {
    background-color: var(--neutral-lighter);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-md);
    overflow: hidden;
    transition: transform var(--transition-speed-normal) ease, box-shadow var(--transition-speed-normal) ease;
    display: flex;
    flex-direction: column;
    /* align-items: center; /* Center content, especially image */
    /* text-align: center; /* Center text content if design requires */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-lg);
}

.card-image { /* Container for the image */
    width: 100%;
    /* height: 200px; /* Fixed height for consistent card image sizes */
    overflow: hidden;
    display: flex; /* For centering image if it's smaller than container */
    justify-content: center;
    align-items: center;
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area, cropping if necessary */
    transition: transform var(--transition-speed-normal) ease;
}
.card:hover .card-image img {
    transform: scale(1.05);
}

.card-content {
    padding: var(--spacing-lg);
    flex-grow: 1; /* Allows content to take remaining space if card height varies */
    display: flex;
    flex-direction: column;
    text-align: left; /* Default, override with .text-center if needed */
}
.card.text-center .card-content {
    text-align: center;
    align-items: center;
}


.card-title {
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

.card-content p {
    font-size: 0.95rem;
    color: var(--text-color-medium);
    flex-grow: 1; /* Pushes button to bottom if card heights are same */
    margin-bottom: var(--spacing-md);
}

.card-content .button {
    margin-top: auto; /* Pushes button to the bottom of the card content */
    align-self: flex-start; /* Default, override if button needs to be centered */
}
.card.text-center .card-content .button {
    align-self: center;
}

/* Specific card types */
.instructor-card .card-image {
    height: 250px; /* Adjust as needed for portraits */
    border-bottom: 3px solid var(--primary-color);
}
.instructor-card .card-image img {
    border-radius: 0; /* If image itself has radius, or top part of card */
}

.instructor-card .card-content {
    text-align: center;
}
.instructor-role {
    font-size: 0.9rem;
    color: var(--secondary-color);
    font-weight: bold;
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* 9. Section-Specific Styling
-------------------------------------------------------------------*/

/* 9.1. Hero Section */
.hero-section {
    position: relative;
    min-height: 85vh; /* Shorter than 100vh to show there's content below */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: var(--text-color-hero); /* STRICTLY WHITE for hero text */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-overlay-dark); /* Dark overlay for text readability */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: var(--spacing-xl);
}

.hero-title {
    font-size: 3.5rem; /* Larger for hero */
    font-weight: 700;
    color: var(--text-color-hero); /* Ensure white */
    margin-bottom: var(--spacing-md);
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5); /* Stronger shadow for hero */
}

.hero-subtitle {
    font-size: 1.3rem;
    color: var(--text-color-hero); /* Ensure white */
    margin-bottom: var(--spacing-xl);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
    opacity: 0.9;
}
.hero-section .button.primary-button {
    font-size: 1.1rem;
    padding: var(--spacing-lg) var(--spacing-xl);
    background-color: var(--accent-color-2); /* Brighter button for hero */
    color: var(--text-color-light);
}
.hero-section .button.primary-button:hover {
    background-color: var(--primary-color);
}


/* 9.2. About Us Preview Section */
.about-us-preview .statistic-widget {
    margin-top: var(--spacing-lg);
}


/* 9.3. Workshops Section */
.workshops-section {
    background-color: var(--accent-color-3); /* Light background */
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.workshops-section .section-overlay { /* If a background image is used */
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(248, 250, 252, 0.85); /* Light overlay if bg image present */
    z-index: 1;
}
.workshops-section .container {
    position: relative;
    z-index: 2;
}
.workshops-section .section-title, .workshops-section .section-intro {
    color: var(--neutral-darkest); /* Ensure text is dark on light bg/overlay */
}

/* 9.4. Instructors Section */
/* Uses .instructor-card styles */

/* 9.5. Awards Section */
.awards-section {
    background-color: var(--primary-color-darker);
    color: var(--text-color-light);
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.awards-section .section-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--gradient-overlay-primary); /* Themed overlay */
    z-index: 1;
}
.awards-section .container {
    position: relative;
    z-index: 2;
}
.awards-section .section-title,
.awards-section .section-intro,
.awards-section .award-title,
.awards-section p {
    color: var(--text-color-light);
}
.awards-section .section-title::after {
    background-color: var(--accent-color-2); /* Lighter accent on dark bg */
}


.awards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xxl);
    text-align: center;
}

.award-item {
    padding: var(--spacing-lg);
    /* background-color: rgba(255,255,255,0.05); Optional: subtle bg for items */
    border-radius: var(--border-radius-sm);
}

.award-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--spacing-md) auto;
    filter: brightness(0) invert(1) opacity(0.8); /* Make icons white-ish if they are dark */
}

.award-title {
    font-size: 1.2rem;
    margin-bottom: var(--spacing-sm);
}
.award-item p {
    font-size: 0.9rem;
    opacity: 0.85;
}

.stats-highlight {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    text-align: center;
    margin-top: var(--spacing-xl);
}
.stats-highlight .stat-item {
    flex: 1;
    min-width: 180px;
}
.stats-highlight h4 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-color-2); /* Highlighted stat number */
    margin-bottom: var(--spacing-xs);
}
.stats-highlight p {
    font-size: 0.95rem;
    opacity: 0.9;
}

/* 9.6. Careers Section */
.careers-section {
    background-color: var(--neutral-light);
}
.careers-section img {
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-lg);
}

/* 9.7. External Resources Section */
.external-resources-section {
    background-color: var(--accent-color-3); /* Light teal or blue tint */
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.external-resources-section .section-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(232, 241, 245, 0.9); /* Corresponds to accent-color-3 with opacity */
    z-index: 1;
}
.external-resources-section .container {
    position: relative;
    z-index: 2;
}
.external-resources-section .section-title, .external-resources-section .section-intro {
    color: var(--neutral-darkest);
}


.resources-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-lg);
}
.resource-item {
    background-color: var(--neutral-lighter);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--box-shadow-sm);
    transition: var(--transition-speed-normal) ease;
}
.resource-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--box-shadow-md);
}
.resource-item h4 a {
    font-family: var(--font-family-headings);
    color: var(--primary-color);
    font-size: 1.15rem;
    margin-bottom: var(--spacing-sm);
    display: block; /* Make entire title clickable */
}
.resource-item h4 a:hover {
    text-decoration: underline;
    color: var(--accent-color-1);
}
.resource-item p {
    font-size: 0.9rem;
    color: var(--text-color-medium);
    margin-bottom: 0;
}

/* 9.8. Contact Section */
.contact-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
    background-color: var(--neutral-lighter); /* Card-like background for the whole contact area */
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-lg);
}

.contact-form-container {
    flex: 2; /* Takes more space */
    min-width: 300px;
}
.form-title { /* Title for the form part */
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: var(--spacing-lg);
}

.contact-info-container {
    flex: 1;
    min-width: 280px;
    background-color: var(--accent-color-3); /* Slightly different bg for info */
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
}
.contact-info-container h3 {
    font-size: 1.4rem;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}
.contact-info-container h4 {
    font-size: 1.1rem;
    color: var(--neutral-darkest);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}
.contact-info-container p {
    font-size: 0.95rem;
    color: var(--text-color-medium);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: flex-start; /* Align icon and text better */
}
.contact-info-container p strong {
    color: var(--text-color-dark);
}
.contact-info-container a {
    color: var(--secondary-color);
    font-weight: bold;
}
.contact-info-container a:hover {
    color: var(--accent-color-1);
    text-decoration: underline;
}
.contact-icon {
    width: 20px;
    height: 20px;
    margin-right: var(--spacing-sm);
    margin-top: 2px; /* Slight adjustment for alignment */
    filter: opacity(0.7);
}
.map-placeholder img {
    width: 100%;
    border-radius: var(--border-radius-sm);
    margin-top: var(--spacing-md);
    border: 1px solid #ddd;
}
.map-placeholder iframe {
    border-radius: var(--border-radius-sm);
    margin-top: var(--spacing-md);
}
.map-caption {
    font-size: 0.85rem;
    color: var(--text-color-medium);
    text-align: center;
    margin-top: var(--spacing-xs);
}


/* 10. Component Styling
-------------------------------------------------------------------*/

/* 10.1. 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); /* Darker overlay */
    backdrop-filter: blur(5px); /* Subtle glassmorphism */
    -webkit-backdrop-filter: blur(5px);
}

.modal-content {
    background-color: var(--neutral-lighter);
    margin: 10vh auto; /* Centered with margin from top */
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-md);
    width: 90%;
    max-width: 600px;
    box-shadow: var(--box-shadow-lg);
    position: relative;
    animation: fadeInModal 0.4s ease-out;
}

@keyframes fadeInModal {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-content h2 {
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: var(--spacing-lg);
}
.modal-content img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-md);
}
.modal-content p {
    margin-bottom: var(--spacing-sm);
    font-size: 1rem;
}
.modal-content p strong {
    color: var(--text-color-dark);
}

.close-button {
    color: var(--neutral-medium);
    float: right;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
    transition: color var(--transition-speed-fast) ease;
}

.close-button:hover,
.close-button:focus {
    color: var(--neutral-darkest);
    text-decoration: none;
    cursor: pointer;
}
.modal .button.primary-button { /* Ensure modal buttons also follow global styles */
    margin-top: var(--spacing-lg);
}


/* 10.2. Statistic Widgets */
.statistic-widget {
    background-color: var(--accent-color-3);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-sm);
}
.statistic-item {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}
.statistic-item:last-child {
    margin-bottom: 0;
}
.statistic-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.1;
}
.statistic-label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-color-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 10.3. Switches (Toggle) */
.switch-label {
    display: inline-flex; /* Changed from flex to inline-flex for better flow */
    align-items: center;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-color-medium);
    user-select: none; /* Prevent text selection */
}

.switch-input {
    height: 0;
    width: 0;
    visibility: hidden;
    position: absolute; /* Take out of flow */
}

.switch-slider {
    display: inline-block; /* Changed from block to inline-block */
    width: 44px; /* Slightly wider */
    height: 24px; /* Slightly taller */
    background-color: #ccc;
    border-radius: 24px; /* Fully rounded */
    position: relative;
    transition: background-color var(--transition-speed-normal) ease;
    margin-right: var(--spacing-sm); /* Space between slider and text */
}

.switch-slider::before {
    content: "";
    position: absolute;
    top: 3px; /* Adjusted for new height */
    left: 3px; /* Adjusted for new width */
    width: 18px; /* Circle size */
    height: 18px; /* Circle size */
    background-color: white;
    border-radius: 50%;
    transition: transform var(--transition-speed-normal) ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.switch-input:checked + .switch-slider {
    background-color: var(--primary-color);
}

.switch-input:checked + .switch-slider::before {
    transform: translateX(20px); /* Adjusted for new width */
}

/* Focus styles for accessibility */
.switch-input:focus + .switch-slider {
    box-shadow: 0 0 0 3px rgba(10, 103, 138, 0.25); /* Primary color focus ring */
}


/* 10.4. Curved Grid Elements (Placeholder) */
/* These are very theme-dependent. Example for a subtle curve */
.curved-grid-element {
    height: 80px; /* Adjust as needed */
    width: 100%;
    overflow: hidden;
    position: relative; /* Or absolute depending on placement */
}
.curved-grid-element::before {
    content: '';
    display: block;
    width: 150%; /* Wider than container to make curve appear smooth */
    height: 150px; /* Taller than element */
    position: absolute;
    left: -25%; /* Center the oversized element */
    background-color: var(--neutral-lighter); /* Or section's background */
}
.bottom-curve::before {
    bottom: -75px; /* Push half of its height down */
    border-radius: 50% 50% 0 0 / 100% 100% 0 0; /* Top curve */
}
.top-curve-alt::before { /* Assuming it's at the top of a section */
    top: -75px;
    border-radius: 0 0 50% 50% / 0 0 100% 100%; /* Bottom curve */
    background-color: var(--accent-color-3); /* Example color */
}
.bottom-curve-alt::before {
    bottom: -75px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    background-color: var(--neutral-light); /* Example color */
}


/* 11. Page-Specific Adjustments
-------------------------------------------------------------------*/

/* 11.1. Success Page */
body[data-barba-namespace="success"] main {
    min-height: calc(100vh - var(--header-height) - 180px); /* 180px approx footer height, adjust if needed */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--header-height); /* Account for fixed header */
}
body[data-barba-namespace="success"] .page-content {
    width: 100%;
    max-width: 600px; /* Limit width of success message */
}
body[data-barba-namespace="success"] .page-content h1 {
    color: var(--primary-color);
}

/* 11.2. Privacy & Terms Pages */
body[data-barba-namespace="privacy"] .page-content,
body[data-barba-namespace="terms"] .page-content {
    padding-top: calc(var(--header-height) + var(--spacing-xl)); /* Ensure content is below fixed header */
}
body[data-barba-namespace="privacy"] .page-hero,
body[data-barba-namespace="terms"] .page-hero {
    min-height: 40vh; /* Shorter hero for these pages */
    padding-top: var(--header-height); /* Account for fixed header */
}
body[data-barba-namespace="privacy"] .legal-text,
body[data-barba-namespace="terms"] .legal-text {
    max-width: 800px; /* Readable line length for legal text */
    margin-left: auto;
    margin-right: auto;
}


/* Background image defaults (already partially covered in hero) */
[style*="background-image"] {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.page-hero { /* Generic style for hero sections on inner pages */
    min-height: 45vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    color: var(--text-color-hero);
    padding-top: var(--header-height); /* Account for fixed header */
}
.page-hero .hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--gradient-overlay-dark);
    z-index: 1;
}
.page-hero .container {
    position: relative; z-index: 2;
}
.page-hero .page-title {
    font-size: 2.5rem;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}


/* 12. Animations & Transitions
-------------------------------------------------------------------*/
/* Basic link hover underline */
a.subtle-underline {
    position: relative;
}
a.subtle-underline::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    display: block;
    margin-top: 2px;
    right: 0;
    background: var(--primary-color);
    transition: width .3s ease;
    -webkit-transition: width .3s ease;
}
a.subtle-underline:hover::after {
    width: 100%;
    left: 0;
    background: var(--primary-color);
}

/* Parallax for background images (simple CSS version) */
.parallax-background {
    background-attachment: fixed;
    /* Note: background-attachment: fixed can have issues on mobile and performance impacts.
       Use with caution or implement a JS solution for more robust parallax. */
}

/* 13. Responsiveness (Media Queries)
-------------------------------------------------------------------*/
@media (max-width: 992px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    .hero-title { font-size: 2.8rem; }
    .hero-subtitle { font-size: 1.15rem; }

    .column.is-two-thirds {
        width: 100%;
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: 60px;
    }
    html {
        font-size: 15px;
    }
    .section-padding {
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
    }

    .main-nav {
        position: fixed;
        top: 0;
        left: -100%; /* Hidden off-screen */
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background-color: var(--neutral-lighter);
        box-shadow: var(--box-shadow-lg);
        padding-top: calc(var(--header-height) + var(--spacing-lg));
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
        transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1); /* Smooth slide */
        z-index: 999; /* Below header but above content */
    }
    .nav-open .main-nav {
        left: 0; /* Slide in */
    }

    .main-nav ul {
        flex-direction: column;
        align-items: flex-start;
    }
    .main-nav li {
        margin-left: 0;
        width: 100%;
    }
    .main-nav a {
        display: block;
        padding: var(--spacing-md) 0;
        font-size: 1.1rem;
        border-bottom: 1px solid var(--neutral-light);
    }
    .main-nav a::after { display: none; } /* Remove underline for mobile nav items */
    .main-nav li:last-child a { border-bottom: none; }


    .nav-toggle {
        display: block;
    }

    .card-grid {
        grid-template-columns: 1fr; /* Stack cards */
    }

    .contact-wrapper {
        flex-direction: column;
    }
    .hero-title { font-size: 2.2rem; }
    .hero-subtitle { font-size: 1rem; }

    .footer-grid {
        grid-template-columns: 1fr; /* Stack footer columns */
        text-align: center;
    }
    .footer-column h4::after {
        margin-left: auto;
        margin-right: auto;
    }
     .columns {
        margin-left: 0;
        margin-right: 0;
    }
    .column {
        width: 100% !important; /* Force columns to stack */
        padding-left: 0;
        padding-right: 0;
    }
    .statistic-widget {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    .statistic-item {
        margin-bottom: 0;
    }

}

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
    .container {
        width: 95%;
    }
    .hero-title { font-size: 1.8rem; }
    .hero-subtitle { font-size: 0.9rem; }
    .button, button, input[type="submit"], input[type="button"] {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.9rem;
    }
    .modal-content {
        margin: 5vh auto;
        padding: var(--spacing-lg);
    }
}