/* TABLE OF CONTENTS
--------------------------------------------------
1.  VARIABLES
2.  RESET & BASE STYLES
3.  TYPOGRAPHY
4.  LAYOUT & GRID
5.  GLOBAL COMPONENTS
    5.1 Buttons
    5.2 Cards
    5.3 Forms
6.  HEADER & NAVIGATION
7.  HERO SECTION
8.  INNOVATION SECTION
    8.1 Progress Indicators
9.  WORKSHOPS/EXPERIENCES SECTION
10. INSTRUCTORS/GUIDES SECTION
11. TEAM SECTION
12. CLIENTELE/PARTNERS SECTION
13. TESTIMONIALS SECTION
14. EXTERNAL RESOURCES SECTION
15. CONTACT SECTION
16. MODAL STYLES
17. FOOTER
18. OTHER PAGES (SUCCESS, PRIVACY, TERMS)
19. COOKIE CONSENT
20. UTILITY CLASSES
21. ANIMATIONS & TRANSITIONS
22. RESPONSIVE STYLES
-------------------------------------------------- */

/* 1. VARIABLES
-------------------------------------------------- */
:root {
    /* Neumorphism Base Colors */
    --bg-color: #EBF0F5; /* Light, slightly cool gray */
    --bg-color-alt: #F5F7FA; /* Even lighter for some elements or backgrounds */
    --shadow-light-strong: rgba(255, 255, 255, 1);
    --shadow-dark-strong: rgba(163, 177, 198, 0.8);
    --shadow-light-soft: rgba(255, 255, 255, 0.7);
    --shadow-dark-soft: rgba(180, 190, 200, 0.5);

    /* Tetradic Color Scheme */
    --primary-color: #4A90E2;   /* Bright Blue (e.g., call to actions) */
    --primary-color-dark: #3A7BC8;
    --secondary-color: #50C878; /* Emerald Green (e.g., nature, success) */
    --secondary-color-dark: #40B068;
    --accent-color-1: #F39C12;  /* Orange (e.g., highlights, warmth) */
    --accent-color-1-dark: #D48A0F;
    --accent-color-2: #8E44AD;  /* Purple (e.g., cultural, unique features) */
    --accent-color-2-dark: #7E3AAD;

    /* Text Colors */
    --text-color: #333745;       /* Dark gray for body text */
    --heading-color: #2c3e50;    /* Slightly darker/bluer for headings */
    --text-color-light: #FFFFFF;
    --link-color: var(--primary-color);
    --link-hover-color: var(--primary-color-dark);

    /* Borders & UI Elements */
    --border-color: #DDE2E7;
    --border-radius-sm: 8px;
    --border-radius-md: 15px;
    --border-radius-lg: 25px;

    /* Fonts */
    --font-family-headings: 'Oswald', sans-serif;
    --font-family-body: 'Nunito', sans-serif;

    /* Transitions */
    --transition-speed-fast: 0.2s;
    --transition-speed-normal: 0.3s;
    --transition-speed-slow: 0.5s;
    --transition-timing: ease-in-out;

    /* Neumorphic Shadows */
    --neumorphic-shadow-outset: 6px 6px 12px var(--shadow-dark-soft), -6px -6px 12px var(--shadow-light-soft);
    --neumorphic-shadow-inset: inset 4px 4px 8px var(--shadow-dark-soft), inset -4px -4px 8px var(--shadow-light-soft);
    --neumorphic-shadow-outset-strong: 8px 8px 16px var(--shadow-dark-strong), -8px -8px 16px var(--shadow-light-strong);

    /* Spacing */
    --spacing-xs: 0.5rem; /* 8px */
    --spacing-sm: 1rem;   /* 16px */
    --spacing-md: 1.5rem; /* 24px */
    --spacing-lg: 2rem;   /* 32px */
    --spacing-xl: 3rem;   /* 48px */
    --section-padding: var(--spacing-xl) 0;
}

/* 2. RESET & BASE STYLES
-------------------------------------------------- */
*,
*::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);
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--link-color);
    transition: color var(--transition-speed-fast) var(--transition-timing);
}

a:hover {
    color: var(--link-hover-color);
}

.main-container {
    width: 100%;
    overflow: hidden; /* Prevents horizontal scroll from animations */
}

/* 3. TYPOGRAPHY
-------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-headings);
    color: var(--heading-color);
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Subtle 3D effect for headings */
}

h1 { font-size: 2.8rem; } /* ~44.8px */
h2 { font-size: 2.2rem; } /* ~35.2px */
h3 { font-size: 1.8rem; } /* ~28.8px */
h4 { font-size: 1.5rem; } /* ~24px */

p {
    margin-bottom: var(--spacing-sm);
    font-size: 1rem; /* ~16px */
}

.section-title {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    font-size: 2.5rem;
    color: var(--heading-color);
    position: relative;
    padding-bottom: var(--spacing-sm);
}

.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background-color: var(--primary-color);
    margin: var(--spacing-xs) auto 0;
    border-radius: 2px;
}

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

blockquote {
    font-style: italic;
    color: #555;
    padding: var(--spacing-sm) var(--spacing-md);
    margin: var(--spacing-md) 0;
    border-left: 5px solid var(--secondary-color);
    background-color: var(--bg-color-alt);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
    box-shadow: var(--neumorphic-shadow-inset);
}
cite {
    display: block;
    text-align: right;
    margin-top: var(--spacing-xs);
    font-weight: bold;
    color: var(--accent-color-1);
}

/* 4. LAYOUT & GRID
-------------------------------------------------- */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.section-padding {
    padding: var(--section-padding);
}

.grid-container {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* 5. GLOBAL COMPONENTS
-------------------------------------------------- */

/* 5.1 Buttons */
.btn, button, input[type="submit"], input[type="button"] {
    display: inline-block;
    font-family: var(--font-family-headings);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all var(--transition-speed-normal) var(--transition-timing);
    box-shadow: var(--neumorphic-shadow-outset);
    background-color: var(--bg-color); /* Neumorphic buttons are often same as BG */
    color: var(--primary-color);
    font-size: 0.9rem;
    text-align: center;
}

.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    box-shadow: var(--neumorphic-shadow-inset);
    color: var(--primary-color-dark);
    transform: translateY(1px); /* Subtle press effect */
}

.btn:active, button:active, input[type="submit"]:active, input[type="button"]:active {
    box-shadow: var(--neumorphic-shadow-inset);
    transform: translateY(2px);
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--text-color-light);
    box-shadow: 4px 4px 8px var(--shadow-dark-soft), -4px -4px 8px var(--shadow-light-soft),
                inset 2px 2px 4px rgba(255,255,255,0.3), inset -2px -2px 4px rgba(0,0,0,0.1);
}
.btn-primary:hover {
    background-color: var(--primary-color-dark);
    color: var(--text-color-light);
    box-shadow: var(--neumorphic-shadow-inset);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--text-color-light);
     box-shadow: 4px 4px 8px var(--shadow-dark-soft), -4px -4px 8px var(--shadow-light-soft),
                inset 2px 2px 4px rgba(255,255,255,0.3), inset -2px -2px 4px rgba(0,0,0,0.1);
}
.btn-secondary:hover {
    background-color: var(--secondary-color-dark);
    color: var(--text-color-light);
    box-shadow: var(--neumorphic-shadow-inset);
}

.btn-hero {
    font-size: 1.1rem;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-lg);
}

/* 5.2 Cards */
.card {
    background-color: var(--bg-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--neumorphic-shadow-outset);
    padding: var(--spacing-md);
    transition: transform var(--transition-speed-normal) var(--transition-timing), box-shadow var(--transition-speed-normal) var(--transition-timing);
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center text inside card */
    overflow: hidden; /* Ensure content stays within rounded corners */
}

.card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 10px 10px 20px var(--shadow-dark-strong), -10px -10px 20px var(--shadow-light-strong);
}

.card .card-image {
    width: 100%;
    margin-bottom: var(--spacing-sm);
    border-radius: var(--border-radius-sm); /* Rounded corners for image container */
    overflow: hidden; /* Clip image to container's border-radius */
    display: flex; /* For centering image if it's smaller than container */
    justify-content: center;
    align-items: center;
}

.card .card-image img {
    width: 100%;
    height: 200px; /* Fixed height for card images */
    object-fit: cover; /* Crop and center image */
    display: block; /* Remove extra space below image */
    border-radius: var(--border-radius-sm); /* Match container if needed, or rely on overflow:hidden */
    margin: 0 auto; /* Ensure centering if somehow flex fails or for standalone */
}

.card .card-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content within card-content */
    flex-grow: 1; /* Allow content to take up available space */
}

.card .card-content h3 {
    margin-top: 0;
    margin-bottom: var(--spacing-xs);
    color: var(--accent-color-2);
    font-size: 1.4rem;
}

.card .card-content p {
    font-size: 0.95rem;
    margin-bottom: var(--spacing-sm);
    flex-grow: 1; /* Make paragraphs take space, useful for equal height cards */
}

/* 5.3 Forms */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 700;
    color: var(--heading-color);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%;
    padding: var(--spacing-sm);
    border: none; /* Neumorphism usually avoids harsh borders */
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-color);
    box-shadow: var(--neumorphic-shadow-inset);
    color: var(--text-color);
    font-family: var(--font-family-body);
    font-size: 1rem;
    transition: box-shadow var(--transition-speed-normal) var(--transition-timing);
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group textarea:focus {
    outline: none;
    box-shadow: var(--neumorphic-shadow-inset), 0 0 0 2px var(--primary-color-dark); /* Highlight on focus */
}

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

.contact-form-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

@media (min-width: 768px) {
    .contact-form-container {
        grid-template-columns: 2fr 1fr; /* Form takes more space */
    }
}

.contact-details {
    padding: var(--spacing-md);
    background-color: var(--bg-color-alt);
    border-radius: var(--border-radius-md);
    box-shadow: var(--neumorphic-shadow-outset);
}
.contact-details h3 {
    color: var(--accent-color-1);
    margin-bottom: var(--spacing-sm);
}

/* 6. HEADER & NAVIGATION
-------------------------------------------------- */
.site-header {
    background-color: var(--bg-color);
    padding: var(--spacing-sm) 0;
    box-shadow: 0 2px 10px var(--shadow-dark-soft);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}

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

.logo {
    font-family: var(--font-family-headings);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    text-shadow: 1px 1px 1px var(--shadow-dark-soft);
}

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

.main-navigation .nav-list li {
    margin-left: var(--spacing-md);
}

.main-navigation .nav-list a {
    font-family: var(--font-family-headings);
    font-weight: 400;
    color: var(--heading-color);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-speed-normal) var(--transition-timing);
    position: relative;
}

.main-navigation .nav-list a:hover,
.main-navigation .nav-list a.active-link { /* Assuming JS adds active-link class */
    color: var(--primary-color);
    background-color: var(--bg-color-alt); /* Subtle neumorphic press */
    box-shadow: var(--neumorphic-shadow-inset);
}

.menu-toggle {
    display: none; /* Hidden on desktop */
    font-size: 1.8rem;
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    padding: var(--spacing-xs);
    box-shadow: none; /* Override global button style */
}
.menu-toggle:hover {
    box-shadow: none;
    color: var(--primary-color-dark);
}

/* 7. HERO SECTION
-------------------------------------------------- */
.hero-section {
    position: relative;
    height: 90vh; /* Adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--text-color-light); /* White text as requested */
}

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

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-title {
    font-size: 3.5rem;
    margin-bottom: var(--spacing-sm);
    color: var(--text-color-light);
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}

.hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-lg);
    color: var(--text-color-light);
    text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* 8. INNOVATION SECTION
-------------------------------------------------- */
.innovation-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.highlight-item h3 {
    color: var(--accent-color-1);
    margin-bottom: var(--spacing-xs);
}

/* 8.1 Progress Indicators */
.progress-indicator-container {
    margin-top: var(--spacing-sm);
    text-align: left;
}
.progress-indicator-container label {
    font-size: 0.9rem;
    font-weight: normal;
    color: var(--text-color);
    margin-bottom: var(--spacing-xs);
}
progress {
    width: 100%;
    height: 12px;
    border-radius: var(--border-radius-sm);
    overflow: hidden; /* For Safari/iOS to respect border-radius */
    background-color: var(--bg-color); /* Track background */
    box-shadow: var(--neumorphic-shadow-inset);
    margin-bottom: var(--spacing-xs);
}

progress::-webkit-progress-bar {
    background-color: var(--bg-color);
    border-radius: var(--border-radius-sm);
}

progress::-webkit-progress-value {
    background-color: var(--secondary-color);
    border-radius: var(--border-radius-sm);
    transition: width var(--transition-speed-slow) var(--transition-timing);
}

progress::-moz-progress-bar { /* Firefox */
    background-color: var(--secondary-color);
    border-radius: var(--border-radius-sm);
    transition: width var(--transition-speed-slow) var(--transition-timing);
}
.progress-indicator-container span {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--secondary-color);
}

/* 9. WORKSHOPS/EXPERIENCES SECTION
-------------------------------------------------- */
.experience-card .card-image img {
    height: 250px; /* Specific height for experience cards */
}
.experience-card h3 {
    color: var(--primary-color);
}

/* 10. INSTRUCTORS/GUIDES SECTION
-------------------------------------------------- */
.instructor-card .card-image img,
.team-member-card .card-image img {
    height: 250px; /* Fixed height for profile images */
    width: 250px;
    border-radius: 50%; /* Circular profile images */
    object-fit: cover;
    margin-bottom: var(--spacing-sm);
    box-shadow: var(--neumorphic-shadow-outset);
}
.instructor-card h3, .team-member-card h3 {
    color: var(--accent-color-2);
    margin-bottom: 0;
}
.instructor-role, .team-role {
    font-size: 0.9rem;
    color: var(--secondary-color);
    font-weight: bold;
    margin-bottom: var(--spacing-xs);
}

/* 11. TEAM SECTION (uses .team-member-card from above)
-------------------------------------------------- */

/* 12. CLIENTELE/PARTNERS SECTION
-------------------------------------------------- */
.partners-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}
.partner-logo {
    padding: var(--spacing-sm);
    background-color: var(--bg-color-alt);
    min-width: 180px; /* Ensure logos are not too squished */
}
.partner-logo img {
    max-height: 80px; /* Control logo height */
    width: auto;
    margin: 0 auto var(--spacing-xs) auto;
    filter: grayscale(50%); /* Subtle effect, remove if full color preferred */
    transition: filter var(--transition-speed-normal) var(--transition-timing);
}
.partner-logo:hover img {
    filter: grayscale(0%);
}
.partner-logo p {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--text-color);
    margin-bottom: 0;
}

/* 13. TESTIMONIALS SECTION
-------------------------------------------------- */
.testimonial-card {
    background-color: var(--bg-color-alt); /* Slightly different background */
    padding: var(--spacing-lg);
}
.testimonial-card .card-image.testimonial-author-image img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: var(--spacing-sm);
    box-shadow: var(--neumorphic-shadow-outset);
}
.testimonial-card blockquote p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: var(--spacing-sm);
}
.testimonial-card cite {
    font-weight: bold;
    color: var(--primary-color);
}

/* 14. EXTERNAL RESOURCES SECTION
-------------------------------------------------- */
.resources-list {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: 1fr; /* Default single column */
}
.resource-item {
    background-color: var(--bg-color-alt);
    text-align: left; /* Override global card text-align if needed */
}
.resource-item h3 {
    margin-bottom: var(--spacing-xs);
}
.resource-item h3 a {
    color: var(--accent-color-1);
    font-size: 1.3rem;
}
.resource-item h3 a:hover {
    color: var(--accent-color-1-dark);
    text-decoration: underline;
}
.resource-item p {
    font-size: 0.95rem;
    margin-bottom: 0;
}
@media (min-width: 768px) {
    .resources-list {
        grid-template-columns: repeat(2, 1fr); /* Two columns on medium screens */
    }
}

/* 15. CONTACT SECTION (styles mostly covered by global form styles)
-------------------------------------------------- */

/* 16. MODAL STYLES
-------------------------------------------------- */
.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); /* Dimmed background */
    backdrop-filter: blur(5px); /* Glassmorphism effect */
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm);
}

.modal-content {
    background-color: var(--bg-color);
    margin: auto;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--neumorphic-shadow-outset-strong);
    width: 90%;
    max-width: 700px;
    position: relative;
    animation: modalOpen var(--transition-speed-slow) var(--transition-timing);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-content .card-image img {
    height: 300px; /* Specific height for modal images */
    border-radius: var(--border-radius-md); /* Match modal content border radius */
}

.modal-content h2 {
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

.close-modal-btn {
    color: var(--text-color);
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-lg);
    font-size: 2rem;
    font-weight: bold;
    transition: color var(--transition-speed-fast) var(--transition-timing);
}

.close-modal-btn:hover,
.close-modal-btn:focus {
    color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
}

@keyframes modalOpen {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* 17. FOOTER
-------------------------------------------------- */
.site-footer {
    background-color: var(--heading-color); /* Darker footer */
    color: var(--bg-color); /* Light text on dark background */
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
}

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

.site-footer h4 {
    color: var(--secondary-color); /* Accent color for footer headings */
    margin-bottom: var(--spacing-sm);
    font-size: 1.2rem;
}

.site-footer ul li {
    margin-bottom: var(--spacing-xs);
}

.site-footer ul li a {
    color: var(--bg-color);
    transition: color var(--transition-speed-fast) var(--transition-timing);
}

.site-footer ul li a:hover {
    color: var(--accent-color-1);
    text-decoration: underline;
}
.footer-social ul li a {
    display: inline-block; /* Make links behave like blocks for padding */
    padding: 5px 0;
}

.footer-contact-info p {
    margin-bottom: var(--spacing-xs);
    font-size: 0.9rem;
}

.copyright {
    text-align: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.9rem;
}

/* 18. OTHER PAGES (SUCCESS, PRIVACY, TERMS)
-------------------------------------------------- */
.page-success,
.page-privacy,
.page-terms {
    padding-top: 100px; /* Avoid header overlap */
    padding-bottom: var(--spacing-xl);
}

.page-success .container,
.page-privacy .container,
.page-terms .container {
    max-width: 800px; /* Limit width for text-heavy pages */
    background-color: var(--bg-color-alt);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--neumorphic-shadow-outset);
}
.page-success .container {
    text-align: center;
}
.page-success h1 {
    color: var(--secondary-color);
}

.success-page-container { /* For success.html specifically */
    min-height: calc(100vh - 160px); /* Adjust based on header/footer height if they are present on success.html */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-lg);
}
.success-page-container .card {
    max-width: 500px;
}
.success-page-container h1 {
    color: var(--secondary-color);
    font-size: 2.5rem;
}
.success-page-container p {
    font-size: 1.2rem;
    margin-bottom: var(--spacing-lg);
}

/* 19. COOKIE CONSENT (Basic styles for HTML provided one)
-------------------------------------------------- */
/* Styles for #cookieConsentPopup are inline in HTML, but can be moved here */
/* Example if moved:
#cookieConsentPopup {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0,0,0,0.85);
    color: #fff;
    padding: 20px;
    text-align: center;
    z-index: 9999;
    box-sizing: border-box;
}
#cookieConsentPopup p {
    margin: 0 0 15px 0;
    font-size: 1em;
}
#cookieConsentPopup button {
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    margin: 0 5px;
}
#acceptCookieConsent { background-color: #4A90E2; }
#closeCookieConsent { background-color: #777; }
*/

/* 20. UTILITY CLASSES
-------------------------------------------------- */
.text-center { text-align: center; }
.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-accent-1 { color: var(--accent-color-1); }
.text-accent-2 { color: var(--accent-color-2); }
.text-light { color: var(--text-color-light); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

/* 21. ANIMATIONS & TRANSITIONS
-------------------------------------------------- */
/* Base transitions are defined on elements like buttons, links, cards */
/* Morphing-style animations would typically involve SVG or more complex JS-driven GSAP/MotionOne setup.
   CSS can contribute with smooth property changes. */

/* Example: subtle background morph on hover for a section */
.section-morph-bg:hover {
    /* background: radial-gradient(circle, var(--bg-color-alt) 0%, var(--bg-color) 100%); */
    /* Needs a more defined effect for "morphing" */
}

/* 22. RESPONSIVE STYLES
-------------------------------------------------- */
@media (max-width: 992px) {
    .hero-title { font-size: 2.8rem; }
    .hero-subtitle { font-size: 1.3rem; }
    .section-title { font-size: 2rem; }
}

@media (max-width: 768px) {
    .container { width: 95%; }
    h1 { font-size: 2.5rem; }
    h2 { font-size: 1.8rem; }
    .section-title { font-size: 1.8rem; }

    .main-navigation .menu-toggle {
        display: block; /* Show burger menu */
    }

    .main-navigation .nav-list {
        display: none; /* Hide nav list by default */
        position: absolute;
        top: 100%; /* Position below header */
        left: 0;
        width: 100%;
        background-color: var(--bg-color);
        flex-direction: column;
        align-items: stretch;
        padding: var(--spacing-sm) 0;
        box-shadow: 0 5px 10px var(--shadow-dark-soft);
        border-top: 1px solid var(--border-color);
    }

    .main-navigation .nav-list.active {
        display: flex; /* Show when active */
    }

    .main-navigation .nav-list li {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }

    .main-navigation .nav-list a {
        display: block;
        padding: var(--spacing-sm);
        border-bottom: 1px solid var(--border-color);
    }
    .main-navigation .nav-list li:last-child a {
        border-bottom: none;
    }

    .hero-section { height: 70vh; }
    .hero-title { font-size: 2.2rem; }
    .hero-subtitle { font-size: 1.1rem; }

    .grid-container {
        grid-template-columns: 1fr; /* Stack cards on smaller screens */
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-content > div {
        margin-bottom: var(--spacing-md);
    }
     .site-footer ul {
        padding-left: 0; /* Remove default padding for centered text */
    }
}

@media (max-width: 576px) {
    :root { /* Adjust spacing for very small screens */
        --spacing-sm: 0.8rem;
        --spacing-md: 1.2rem;
        --spacing-lg: 1.5rem;
    }
    .hero-title { font-size: 1.8rem; }
    .hero-subtitle { font-size: 1rem; }
    .btn-hero { padding: var(--spacing-sm) var(--spacing-md); font-size: 1rem; }

    .modal-content {
        padding: var(--spacing-md);
        width: 95%;
    }
    .close-modal-btn {
        font-size: 1.5rem;
        top: var(--spacing-sm);
        right: var(--spacing-md);
    }
}