:root {
    --bg-dark: #212121; /* Very dark grey */
    --bg-medium: #2C2C2C; /* Dark grey, base for elements */
    --bg-light: #3A3A3A; /* Lighter grey for raised elements */
    --text-light: #F5F5F5; /* Very light grey, main text color */
    --text-medium: #CCCCCC; /* Medium grey, secondary text/descriptions */
    --text-dark: #111111; /* Very dark, for contrast if needed */
    --accent-color: #00CED1; /* Dark Cyan, primary accent */
    --accent-hover: #00B2B5; /* Slightly darker accent for hover */
    --shadow-dark: rgba(0, 0, 0, 0.5);
    --shadow-light: rgba(255, 255, 255, 0.1);
    --border-color: rgba(255, 255, 255, 0.05); /* Subtle border */
    --spacing-unit: 20px; /* Base spacing unit */

    /* Font variables */
    --font-heading: 'Raleway', sans-serif;
    --font-body: 'Open Sans', sans-serif;
}

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

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--text-light);
    background-color: var(--bg-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll */
    min-height: 100vh; /* Ensure body covers viewport height */
}

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

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

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-light); /* Titles generally light on dark bg */
    line-height: 1.2;
    margin-bottom: var(--spacing-unit);
    text-align: center; /* Centered titles */
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }

p {
    margin-bottom: var(--spacing-unit);
    color: var(--text-medium); /* Body text medium light */
}

/* Layout & Containers */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-unit);
}

.section {
    padding: calc(var(--spacing-unit) * 3) 0;
    position: relative; /* Needed for parallax effects if implemented */
}

.section-title {
    margin-bottom: calc(var(--spacing-unit) / 2);
    color: var(--text-light); /* Ensure high contrast on dark background */
}

.section-description {
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 2);
    font-size: 1.1rem;
    color: var(--text-medium);
}

/* Grid Layout Helper */
.grid {
    display: grid;
    gap: var(--spacing-unit);
    /* Default grid: 1 column, becomes multi-column on larger screens */
    grid-template-columns: 1fr;
}

/* Specific Grid classes */
/* is-two-thirds layout: 1/3 and 2/3 columns */
/* On small screens, they stack */
.grid.is-two-thirds {
     grid-template-columns: 1fr; /* Stacked on small screens */
}

@media (min-width: 768px) {
    .grid.is-two-thirds {
        grid-template-columns: 1fr 2fr; /* Two-thirds layout on wider screens */
    }
    .grid.is-two-thirds > *:first-child {
         grid-column: 1;
    }
    .grid.is-two-thirds > *:not(:first-child) {
         grid-column: 2;
    }
     /* Allow cards to flow naturally within a grid of 3 columns */
    .cards-container.grid.is-two-thirds {
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid for cards */
    }
    .contact-details-form-container.grid.is-two-thirds {
         grid-template-columns: 1fr 1fr; /* Example layout for contact page */
         gap: calc(var(--spacing-unit) * 2);
    }
     .contact-details-form-container.grid.is-two-thirds > .contact-details {
         grid-column: 1;
    }
     .contact-details-form-container.grid.is-two-thirds > .contact-form-container {
         grid-column: 2;
    }
}

/* Centering Helper */
.centered-button {
    text-align: center;
    margin-top: calc(var(--spacing-unit) * 2);
}

/* Neumorphic & Block Styles */
.neumorphic-card,
.neumorphic-block {
    background-color: var(--bg-medium);
    border-radius: calc(var(--spacing-unit) / 2);
    padding: calc(var(--spacing-unit) * 1.5);
    box-shadow: 8px 8px 15px var(--shadow-dark),
               -8px -8px 15px var(--shadow-light);
    margin-bottom: var(--spacing-unit); /* Spacing between blocks/cards */
    border: 1px solid var(--border-color);
    text-align: center; /* Center content container */
}

/* Text within neumorphic blocks */
.neumorphic-card p,
.neumorphic-block p {
    text-align: left; /* Align text left inside centered blocks */
    color: var(--text-medium);
}

.neumorphic-card h3,
.neumorphic-block h3 {
    text-align: center;
    color: var(--text-light);
    margin-bottom: var(--spacing-unit);
}

/* UI Components - Cards */
.cards-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */
     gap: var(--spacing-unit);
     margin-top: calc(var(--spacing-unit) * 2);
}

.card {
    background-color: var(--bg-medium);
    border-radius: calc(var(--spacing-unit) / 2);
    box-shadow: 8px 8px 15px var(--shadow-dark),
               -8px -8-px 15px var(--shadow-light);
    overflow: hidden;
    display: flex; /* Use flexbox for column layout */
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Micro-animation */
    height: 100%; /* Ensure cards in a row have equal height if content varies */
}

.card:hover {
     transform: translateY(-5px); /* Lift effect */
     box-shadow: 10px 10px 20px var(--shadow-dark),
                 -10px -10px 20px var(--shadow-light);
}

.card-image {
    width: 100%;
    height: 200px; /* Fixed height for images */
    overflow: hidden;
    position: relative;
    background-color: var(--bg-light); /* Fallback background */
     display: flex; /* Use flexbox to potentially center image if it doesn't cover */
     justify-content: center;
     align-items: center;
}

.card-image img {
    display: block; /* Remove extra space below image */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container while maintaining aspect ratio */
    object-position: center; /* Center the image within the container */
    transition: transform 0.5s ease; /* Micro-animation */
}

.card:hover .card-image img {
    transform: scale(1.05); /* Slight zoom on hover */
}

.card-content {
    padding: var(--spacing-unit);
    text-align: center; /* Center text content within the card */
    flex-grow: 1; /* Allow content to take available space */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribute space */
    width: 100%; /* Ensure content block takes full width */
}

.card-title {
    margin-top: 0;
    margin-bottom: calc(var(--spacing-unit) / 2);
    font-size: 1.3rem;
    color: var(--text-light);
}

.card-subtitle {
     font-size: 0.9rem;
     color: var(--text-medium);
     margin-bottom: var(--spacing-unit);
}

.card-text {
    font-size: 0.95rem;
    color: var(--text-medium);
    text-align: left; /* Align text content left */
     margin-bottom: var(--spacing-unit);
}

.card-date {
     font-size: 0.8rem;
     color: var(--text-medium);
     margin-bottom: var(--spacing-unit);
     text-align: center; /* Center date */
}

/* Read More Link */
.btn-text {
     display: inline-block;
     margin-top: auto; /* Push to the bottom if using flex-grow */
     color: var(--accent-color);
     font-weight: bold;
     transition: color 0.3s ease, transform 0.3s ease;
}

.btn-text:hover {
     color: var(--accent-hover);
     transform: translateX(5px); /* Slight slide animation */
     text-decoration: underline;
}

/* UI Components - Buttons & Form Elements (Global) */
.btn,
button,
input[type="submit"] {
    display: inline-block;
    padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.5);
    border-radius: calc(var(--spacing-unit) / 2);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    border: none;
    outline: none;
    transition: all 0.3s ease; /* Micro-animation */
    text-align: center;
}

.btn-primary {
    background-color: var(--accent-color);
    color: var(--bg-dark); /* Dark text on accent */
    box-shadow: 4px 4px 8px var(--shadow-dark),
               -4px -4px 8px var(--shadow-light);
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    box-shadow: 6px 6px 12px var(--shadow-dark),
               -6px -6px 12px var(--shadow-light);
}

.btn-primary:active {
    box-shadow: inset 4px 4px 8px var(--shadow-dark),
                inset -4px -4px 8px var(--shadow-light);
    transform: translateY(1px); /* Press effect */
}

.btn-secondary {
    background-color: var(--bg-light);
    color: var(--text-light);
    box-shadow: 4px 4px 8px var(--shadow-dark),
               -4px -4px 8px var(--shadow-light);
}

.btn-secondary:hover {
    background-color: var(--bg-medium);
    box-shadow: 6px 6px 12px var(--shadow-dark),
               -6px -6px 12px var(--shadow-light);
}

.btn-secondary:active {
     box-shadow: inset 4px 4px 8px var(--shadow-dark),
                inset -4px -4px 8px var(--shadow-light);
    transform: translateY(1px); /* Press effect */
}

/* Form Styles */
.form-group {
    margin-bottom: var(--spacing-unit);
    text-align: left; /* Align labels left */
}

.form-group label {
    display: block;
    margin-bottom: calc(var(--spacing-unit) / 4);
    font-size: 0.9rem;
    color: var(--text-medium);
}

.neumorphic-input,
.neumorphic-textarea {
    width: 100%;
    padding: calc(var(--spacing-unit) * 0.75) var(--spacing-unit);
    border-radius: calc(var(--spacing-unit) / 2);
    border: none;
    background-color: var(--bg-dark); /* Slightly darker background for inputs */
    color: var(--text-light);
    box-shadow: inset 2px 2px 5px var(--shadow-dark),
                inset -2px -2px 5px var(--shadow-light);
    outline: none;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: box-shadow 0.3s ease;
}

.neumorphic-input:focus,
.neumorphic-textarea:focus {
    box-shadow: inset 2px 2px 5px var(--shadow-dark),
                inset -2px -2px 5px var(--shadow-light),
                0 0 5px var(--accent-color); /* Accent glow on focus */
}

.neumorphic-textarea {
    resize: vertical; /* Allow vertical resize */
}

/* Specific Section Styles */

/* Header */
.site-header {
    background-color: var(--bg-dark);
    padding: var(--spacing-unit) 0;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000; /* Ensure header is on top */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Subtle shadow below header */
    border-bottom: 1px solid var(--border-color);
}

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

.site-logo a {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-light);
    transition: color 0.3s ease;
}

.site-logo a:hover {
    color: var(--accent-color);
}

.site-nav .nav-list {
    list-style: none;
    display: flex;
    gap: var(--spacing-unit);
}

.site-nav a {
    color: var(--text-light);
    font-weight: 600;
    transition: color 0.3s ease;
}

.site-nav a:hover {
    color: var(--accent-color);
}

/* Burger Menu (Mobile) */
.burger-menu-toggle {
    display: none; /* Hide on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    position: relative;
    z-index: 1001; /* Above nav list when active */
    color: var(--text-light);
}

.burger-menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-light);
    margin: 5px 0;
    transition: all 0.3s ease;
}

@media (max-width: 767px) {
    .site-nav .nav-list {
        display: none; /* Hide nav list by default on mobile */
        flex-direction: column;
        position: absolute;
        top: 100%; /* Position below header */
        left: 0;
        width: 100%;
        background-color: var(--bg-dark);
        padding: var(--spacing-unit);
        border-top: 1px solid var(--border-color);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
    }

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

     .site-nav .nav-list li {
        width: 100%;
        text-align: center;
        margin-bottom: var(--spacing-unit);
     }

    .site-nav .nav-list li:last-child {
        margin-bottom: 0;
    }

     .site-nav a {
        display: block; /* Make links full width */
        padding: 10px 0;
     }

    .burger-menu-toggle {
        display: block; /* Show toggle on mobile */
    }

    .burger-menu-toggle.active span:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }
    .burger-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    .burger-menu-toggle.active span:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }
}

/* Hero Section */
.hero-section {
    padding: calc(var(--spacing-unit) * 8) 0; /* More padding for hero */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh; /* Ensure minimum height for visual impact */
}

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

.hero-section .container {
    position: relative;
    z-index: 2;
    color: var(--text-light); /* Ensure text is bright on dark overlay */
}

.hero-title {
    font-size: 3rem;
    margin-bottom: calc(var(--spacing-unit) / 2);
    color: #FFFFFF !important; /* Ensure white text as per requirement */
}

.hero-subtitle {
    font-size: 1.3rem;
    margin-bottom: calc(var(--spacing-unit) * 2);
    color: #E0E0E0 !important; /* Ensure subtitle is visible, slightly off-white */
}


/* External Resources Section */
.resources-list {
    display: grid;
    gap: var(--spacing-unit);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
     margin-top: calc(var(--spacing-unit) * 2);
}

.resource-item {
     background-color: var(--bg-medium);
     border-radius: calc(var(--spacing-unit) / 2);
     padding: var(--spacing-unit);
     box-shadow: 4px 4px 8px var(--shadow-dark),
                -4px -4px 8px var(--shadow-light);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     border: 1px solid var(--border-color);
     text-align: left; /* Align text left for list items */
}

.resource-item:hover {
     transform: translateY(-3px);
     box-shadow: 6px 6px 12px var(--shadow-dark),
                -6px -6px 12px var(--shadow-light);
}

.resource-item h3.resource-title {
    margin-bottom: calc(var(--spacing-unit) / 2);
     font-size: 1.2rem;
     text-align: left;
}
.resource-item h3.resource-title a {
     color: var(--accent-color);
     font-weight: bold;
     transition: color 0.3s ease;
}

.resource-item h3.resource-title a:hover {
     color: var(--accent-hover);
     text-decoration: underline;
}

.resource-item p.resource-description {
    font-size: 0.9rem;
    color: var(--text-medium);
    text-align: left;
    margin-bottom: 0;
}


/* Contact Section (Form & Details) */
.contact-details-form-container {
     margin-top: calc(var(--spacing-unit) * 2);
}

.contact-details h3,
.contact-form-container h3 {
    text-align: center;
    margin-bottom: var(--spacing-unit);
    color: var(--text-light);
}

.contact-details ul {
    list-style: none;
    padding: 0;
    margin-bottom: var(--spacing-unit);
     text-align: left;
}

.contact-details ul li {
    margin-bottom: calc(var(--spacing-unit) / 2);
    font-size: 1rem;
    color: var(--text-medium);
    text-align: left;
}

.contact-details ul li strong {
    color: var(--text-light);
}

.contact-details .card-image {
     height: 250px; /* Adjust height for contact image */
}

.contact-details p {
     text-align: left;
}

.contact-note {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-medium);
    margin-top: var(--spacing-unit);
}


/* Footer */
.site-footer {
    background-color: var(--bg-medium); /* Slightly lighter dark than body */
    padding: calc(var(--spacing-unit) * 2) 0;
    color: var(--text-medium);
     border-top: 1px solid var(--border-color);
}

.site-footer .footer-content {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    justify-content: space-between;
    gap: var(--spacing-unit);
}

.footer-brand,
.footer-nav,
.footer-social {
    flex-basis: 250px; /* Minimum width before wrapping */
    flex-grow: 1; /* Allow items to grow */
     text-align: center; /* Center content in footer blocks */
}

.footer-brand h3,
.footer-nav h4,
.footer-social h4 {
     color: var(--text-light);
     margin-bottom: var(--spacing-unit);
     text-align: center;
}

.footer-brand p {
    font-size: 0.9rem;
    color: var(--text-medium);
    text-align: center;
}

.footer-nav ul,
.footer-social ul {
    list-style: none;
    padding: 0;
}

.footer-nav li,
.footer-social li {
    margin-bottom: calc(var(--spacing-unit) / 2);
}

.footer-nav a,
.footer-social a {
    color: var(--text-medium);
    transition: color 0.3s ease;
}

.footer-nav a:hover,
.footer-social a:hover {
    color: var(--text-light);
     text-decoration: underline;
}

/* Social icons are text links, no special icon styling needed beyond text link styles */


/* Specific Page Adjustments */

/* Privacy and Terms pages need padding to avoid header overlap */
#privacy-policy.section,
#terms-conditions.section {
    padding-top: calc(var(--spacing-unit) * 2 + 80px); /* Add extra padding for fixed header (adjust 80px if header height changes) */
}


/* Success Page Styles */
#success-message.section {
    min-height: calc(100vh - 80px - 100px); /* Adjust based on approximate header (80px) and footer (100px) height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: calc(var(--spacing-unit) * 2 + 80px); /* Ensure clearance from header */
}

.success-block {
    max-width: 600px; /* Limit width for the success message block */
    margin: auto; /* Center the block */
}

.success-block .card-image {
     height: 150px; /* Smaller image for success icon */
     margin-bottom: var(--spacing-unit);
}

.success-block .card-image img {
    max-width: 150px; /* Ensure icon doesn't stretch too much */
    width: auto; /* Allow auto width */
}

.success-links {
    list-style: none;
    padding: 0;
    margin-top: var(--spacing-unit);
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.success-links li {
    margin-bottom: calc(var(--spacing-unit) / 2);
}

.success-links a {
    color: var(--accent-color);
    font-weight: bold;
}

.success-links a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}


/* Barba.js Base Styles */
/* This style is applied to new containers before they enter */
[data-barba="container"] {
    opacity: 0; /* Initial state for transition */
    transition: opacity 500ms ease-in-out; /* CSS transition as a fallback/base */
}

/* You will need JavaScript in script.js to manage Barba transitions
   and animate opacity or other properties using Anime.js */


/* Cookie Consent Popup Styles (as per inline HTML requirements) */
/* The styles for #cookieConsent are mostly inline in the HTML as requested.
   Adding minimal additional styles here for consistency if needed, but the
   inline styles should take precedence as per the prompt.
   The main styles for position, background, color, z-index, display
   are already set inline in the HTML structure. */
#cookieConsent {
    font-family: var(--font-body); /* Use site's font */
    font-size: 0.9rem; /* Slightly smaller text */
    padding: 10px 15px;
}
#cookieConsent p {
    color: var(--text-light); /* Ensure text is readable */
    margin: 0;
    padding-right: 15px;
    font-size: 0.9rem;
}
#cookieConsent button {
    /* Styles from inline HTML: background-color: #4CAF50; color: white; border: none; padding: 10px 20px; cursor: pointer; border-radius: 5px; font-size: 1rem; transition: background-color 0.3s ease; */
    min-width: 100px; /* Ensure button is clickable */
    font-family: var(--font-body); /* Use site's font */
}

#cookieConsent > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 600px) {
     #cookieConsent > div {
         flex-direction: column;
         gap: 10px;
         text-align: center;
     }
     #cookieConsent p {
         padding-right: 0;
         text-align: center;
     }
}