/* Table of Contents
1.  CSS Variables
2.  Global Styles & Resets
3.  Layout & Container
4.  Utility Classes
5.  Neumorphic System
    5.1. Base Elements (Convex/Concave)
    5.2. Buttons
    5.3. Forms
6.  Header & Navigation
7.  Hero Section
8.  General Section Styling
9.  Specific Sections
    9.1. Statistics Section (Progress Bars)
    9.2. Methodology Section
    9.3. Case Studies Section (Cards, Slider)
    9.4. Awards Section
    9.5. Gallery Section
    9.6. Events Section
    9.7. Blog Section
    9.8. External Resources Section
    9.9. Contact Home Section
10. Footer
11. Page-Specific Styles (Success, Privacy, Terms)
12. Animations & Transitions (Base for AOS)
13. Responsive Design
*/

/* 1. CSS Variables */
:root {
    /* Color Palette - Pastel Theme */
    --color-bg: #F4F1F8; /* Very light lavender-gray, main page background */
    --color-surface: #FFFFFF; /* Pure white for cards, slightly elevated feel */
    --color-surface-alt: #EAE6F0; /* Slightly darker than bg, for concave elements or subtle contrast */

    --color-text-dark: #2C233A;   /* Dark, slightly desaturated purple for main text */
    --color-text-medium: #594A6F; /* Medium purple-gray for subtitles */
    --color-text-light: #807199;  /* Lighter purple-gray for less important text */

    --color-primary: #8A6FBF; /* Muted Lavender - primary actions, links */
    --color-primary-dark: #6B559A;
    --color-primary-light: #A98FE0;

    --color-accent: #E6A1BE;  /* Soft Rose Pink - secondary accents */
    --color-accent-dark: #C782A3;
    --color-accent-light: #F0B8D0;

    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-success: #5cb85c; /* For success messages/elements */
    --color-danger: #d9534f;  /* For error messages/elements */

    /* Fonts */
    --font-heading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    /* Spacing & Sizing */
    --spacing-unit: 8px;
    --header-height: 80px;
    --footer-height: auto; /* Dynamic based on content */

    /* Borders & Shadows (Neumorphism) */
    --border-radius-soft: 12px; /* Softer corners for neumorphism */
    --border-radius-medium: 20px; /* For larger elements, biomorphic touch */
    --border-radius-round: 50%;

    --neumorphic-distance: 5px;
    --neumorphic-blur: 10px;
    --neumorphic-intensity-light: 0.7;
    --neumorphic-intensity-dark: 0.07;

    /* Shadows for elements on --color-bg */
    --shadow-light-on-bg: rgba(255, 255, 255, var(--neumorphic-intensity-light));
    --shadow-dark-on-bg: rgba(0, 0, 0, var(--neumorphic-intensity-dark));

    /* Shadows for elements using --color-surface (like cards) */
    /* These might be slightly different if surface is different from bg */
    --shadow-light-on-surface: rgba(255, 255, 255, var(--neumorphic-intensity-light));
    --shadow-dark-on-surface: rgba(0, 0, 0, var(--neumorphic-intensity-dark));


    /* Base shadows for convex and concave effects */
    --neumorphic-shadow-convex:
        calc(var(--neumorphic-distance) * 1) calc(var(--neumorphic-distance) * 1) var(--neumorphic-blur) var(--shadow-dark-on-bg),
        calc(var(--neumorphic-distance) * -1) calc(var(--neumorphic-distance) * -1) var(--neumorphic-blur) var(--shadow-light-on-bg);

    --neumorphic-shadow-concave:
        inset calc(var(--neumorphic-distance) * 1) calc(var(--neumorphic-distance) * 1) var(--neumorphic-blur) var(--shadow-dark-on-bg),
        inset calc(var(--neumorphic-distance) * -1) calc(var(--neumorphic-distance) * -1) var(--neumorphic-blur) var(--shadow-light-on-bg);

    /* Transitions */
    --transition-fast: all 0.15s ease-in-out;
    --transition-smooth: all 0.3s ease-in-out;
    --transition-long: all 0.5s ease-in-out;
}

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

html {
    font-size: 16px; /* Base font size */
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    line-height: 1.65;
    background-color: var(--color-bg);
    color: var(--color-text-dark);
    overflow-x: hidden; /* Prevent horizontal scroll */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text-dark);
    line-height: 1.2;
    margin-bottom: calc(var(--spacing-unit) * 2);
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.05); /* Subtle text shadow for headers */
}

h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); } /* Responsive H1 */
h2 { font-size: clamp(2rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }

p {
    margin-bottom: calc(var(--spacing-unit) * 2);
    color: var(--color-text-medium);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition-smooth);
}

a:hover, a:focus {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

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

ul, ol {
    list-style: none;
    padding-left: 0;
}

/* 3. Layout & Container */
.main-container {
    width: 100%;
    overflow-x: hidden; /* Ensure no horizontal scroll from main container */
}

.container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(var(--spacing-unit) * 2);
    padding-right: calc(var(--spacing-unit) * 2);
}

/* 4. Utility Classes */
.text-center { text-align: center; }
.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.bg-pastel-light { background-color: var(--color-surface-alt); } /* For alternating section backgrounds */
.bg-pastel-dark { background-color: var(--color-bg); /* Or a slightly darker variant if needed */} /* Footer specific */

/* 5. Neumorphic System */

/* 5.1. Base Elements (Convex/Concave) */
.neumorphic-element { /* Convex / Extruded */
    background-color: var(--color-bg); /* Or var(--color-surface) if on a different bg */
    border-radius: var(--border-radius-medium);
    box-shadow: var(--neumorphic-shadow-convex);
    transition: var(--transition-smooth);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
}
.neumorphic-element:hover {
    transform: translateY(-2px);
    box-shadow:
        calc(var(--neumorphic-distance) * 1.5) calc(var(--neumorphic-distance) * 1.5) calc(var(--neumorphic-blur) * 1.5) var(--shadow-dark-on-bg),
        calc(var(--neumorphic-distance) * -1.5) calc(var(--neumorphic-distance) * -1.5) calc(var(--neumorphic-blur) * 1.5) var(--shadow-light-on-bg);
}

.neumorphic-element-concave { /* Concave / Pressed */
    background-color: var(--color-bg); /* Or var(--color-surface-alt) */
    border-radius: var(--border-radius-medium);
    box-shadow: var(--neumorphic-shadow-concave);
    transition: var(--transition-smooth);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
}

/* 5.2. Buttons */
.btn, 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: none;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3.5);
    font-size: 1rem;
    line-height: 1.5;
    border-radius: var(--border-radius-soft); /* Softer for buttons */
    transition: var(--transition-smooth);
    background-color: var(--color-bg); /* Base for neumorphic buttons */
    color: var(--color-primary);
    box-shadow: var(--neumorphic-shadow-convex);
    text-decoration: none; /* Remove underline from <a> styled as button */
}

.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover,
.btn:focus, button:focus, input[type="submit"]:focus, input[type="button"]:focus {
    transform: translateY(-1px) scale(1.02);
    box-shadow:
        calc(var(--neumorphic-distance) * 1.2) calc(var(--neumorphic-distance) * 1.2) calc(var(--neumorphic-blur) * 1.2) var(--shadow-dark-on-bg),
        calc(var(--neumorphic-distance) * -1.2) calc(var(--neumorphic-distance) * -1.2) calc(var(--neumorphic-blur) * 1.2) var(--shadow-light-on-bg);
    outline: none;
}

.btn:active, button:active, input[type="submit"]:active, input[type="button"]:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: var(--neumorphic-shadow-concave);
    color: var(--color-primary-dark);
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    box-shadow:
        3px 3px 6px var(--color-primary-dark),
        -3px -3px 6px var(--color-primary-light);
}
.btn-primary:hover {
    background-color: var(--color-primary-dark);
    box-shadow:
        4px 4px 8px var(--color-primary-dark),
        -4px -4px 8px var(--color-primary-light);
}
.btn-primary:active {
    background-color: var(--color-primary-dark);
    box-shadow: inset 3px 3px 6px var(--color-primary-dark),
                inset -3px -3px 6px var(--color-primary-light);
}


.btn-secondary {
    background-color: var(--color-accent);
    color: var(--color-white);
     box-shadow:
        3px 3px 6px var(--color-accent-dark),
        -3px -3px 6px var(--color-accent-light);
}
.btn-secondary:hover {
    background-color: var(--color-accent-dark);
     box-shadow:
        4px 4px 8px var(--color-accent-dark),
        -4px -4px 8px var(--color-accent-light);
}
.btn-secondary:active {
    background-color: var(--color-accent-dark);
    box-shadow: inset 3px 3px 6px var(--color-accent-dark),
                inset -3px -3px 6px var(--color-accent-light);
}

.btn-link {
    background: none;
    box-shadow: none;
    color: var(--color-primary);
    padding: calc(var(--spacing-unit)) 0; /* Minimal padding */
    font-weight: 700;
    text-decoration: none;
}
.btn-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
    background: none;
    box-shadow: none;
    transform: none;
}
.btn-link .arrow {
    margin-left: calc(var(--spacing-unit) / 2);
    transition: transform 0.2s ease-out;
}
.btn-link:hover .arrow {
    transform: translateX(3px);
}

/* 5.3. Forms */
.neumorphic-form .form-group {
    margin-bottom: calc(var(--spacing-unit) * 2.5);
}

.neumorphic-form .form-label {
    display: block;
    margin-bottom: var(--spacing-unit);
    font-weight: 700;
    color: var(--color-text-medium);
}

.form-input, .form-textarea {
    display: block;
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    font-size: 1rem;
    font-family: var(--font-body);
    line-height: 1.5;
    color: var(--color-text-dark);
    background-color: var(--color-bg); /* Base for concave inputs */
    background-clip: padding-box;
    border: 1px solid transparent; /* For consistency, but shadow is key */
    appearance: none; /* Remove default styling */
    border-radius: var(--border-radius-soft);
    box-shadow: var(--neumorphic-shadow-concave);
    transition: var(--transition-smooth);
}

.form-input::placeholder, .form-textarea::placeholder {
    color: var(--color-text-light);
    opacity: 1;
}

.form-input:focus, .form-textarea:focus {
    outline: none;
    background-color: var(--color-white); /* Slightly change bg on focus */
    box-shadow:
        0 0 0 0.2rem rgba(var(--color-primary-rgb, 138, 111, 191), 0.25), /* Using RGB for primary color */
        var(--neumorphic-shadow-concave); /* Keep inner shadow */
    border-color: var(--color-primary-light);
}
/* Fallback for --color-primary-rgb if not defined, use hex */
:root { --color-primary-rgb: 138, 111, 191; /* Corresponds to #8A6FBF */ }

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

.form-submit-button {
    width: auto;
    min-width: 180px;
    margin-top: var(--spacing-unit);
}

/* 6. Header & Navigation */
.site-header {
    background-color: rgba(244, 241, 248, 0.85); /* Slightly transparent bg */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: var(--spacing-unit) 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    height: var(--header-height);
}

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

.logo {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}
.logo:hover {
    color: var(--color-primary-dark);
}

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

.main-nav .nav-list li {
    margin-left: calc(var(--spacing-unit) * 3);
}

.main-nav .nav-link {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--color-text-medium);
    padding: calc(var(--spacing-unit)) calc(var(--spacing-unit) * 1.5);
    border-radius: var(--border-radius-soft);
    text-decoration: none;
    transition: var(--transition-fast);
    position: relative;
}

.main-nav .nav-link:hover,
.main-nav .nav-link.active { /* Add .active class with JS for current page */
    color: var(--color-primary);
    background-color: rgba(138, 111, 191, 0.1); /* Light primary bg */
}
.main-nav .nav-link::after { /* Underline effect */
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width 0.3s ease-out;
}
.main-nav .nav-link:hover::after,
.main-nav .nav-link.active::after {
    width: 70%;
}


.nav-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-unit);
    z-index: 1001; /* Above nav list on mobile */
}

.hamburger {
    display: block;
    position: relative;
    width: 25px;
    height: 3px;
    background-color: var(--color-text-dark);
    border-radius: 3px;
    transition: var(--transition-smooth);
}
.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    width: 25px;
    height: 3px;
    background-color: var(--color-text-dark);
    border-radius: 3px;
    transition: var(--transition-smooth);
}
.hamburger::before { top: -8px; }
.hamburger::after { bottom: -8px; }

/* Hamburger animation for open state (add .nav-open to header/nav) */
.nav-open .hamburger { background-color: transparent; }
.nav-open .hamburger::before { transform: translateY(8px) rotate(45deg); }
.nav-open .hamburger::after { transform: translateY(-8px) rotate(-45deg); }

/* 7. Hero Section */
.hero-section {
    padding-top: var(--header-height); /* Account for fixed header */
    min-height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: var(--color-white); /* IMPORTANT: Hero text must be white */
    /* Parallax effect - can be simple or enhanced by JS */
    /* background-attachment: fixed; */ /* Simple CSS parallax, can cause issues on mobile */
}

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

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: calc(var(--spacing-unit) * 4) 0; /* Padding within the hero content area */
}

.hero-title {
    font-size: clamp(2.8rem, 6vw, 4.5rem);
    color: var(--color-white);
    margin-bottom: calc(var(--spacing-unit) * 3);
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}

.hero-subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    color: rgba(255,255,255,0.9);
    margin-bottom: calc(var(--spacing-unit) * 4);
    line-height: 1.7;
}

.hero-section .btn-primary { /* Ensure hero button stands out */
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 5);
    font-size: 1.1rem;
    background-color: var(--color-accent); /* Use accent for hero CTA */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.hero-section .btn-primary:hover {
    background-color: var(--color-accent-dark);
    transform: translateY(-3px) scale(1.03);
}

/* 8. General Section Styling */
.section-padding {
    padding-top: calc(var(--spacing-unit) * 8);
    padding-bottom: calc(var(--spacing-unit) * 8);
}

.section-title {
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 5);
    color: var(--color-text-dark);
    position: relative;
    padding-bottom: var(--spacing-unit);
}
.section-title::after { /* Decorative underline */
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background-color: var(--color-primary);
    margin: var(--spacing-unit) auto 0;
    border-radius: 2px;
}

.section-intro {
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(var(--spacing-unit) * 4);
    color: var(--color-text-medium);
    font-size: 1.1rem;
}
.section-paragraph {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    color: var(--color-text-medium);
    line-height: 1.7;
    text-align: justify; /* Or left, depending on preference */
}
.section-paragraph:last-of-type {
    margin-bottom: 0;
}

/* Card base styles - used by Case Studies, Blog, etc. */
.card {
    background-color: var(--color-surface);
    border-radius: var(--border-radius-medium);
    overflow: hidden; /* Ensure content respects border-radius */
    transition: var(--transition-smooth);
    display: flex; /* STRICTLY: Card uses flex */
    flex-direction: column; /* STRICTLY: Card uses flex column */
    align-items: center; /* STRICTLY: Center items horizontally */
    text-align: center; /* Center inline content like text */
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* Softer shadow than full neumorphic for cards */
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.card-image { /* Wrapper for image */
    width: 100%;
    height: 200px; /* STRICTLY: Fixed height for image container */
    overflow: hidden;
    background-color: var(--color-bg); /* Placeholder bg */
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* STRICTLY: Cover for images */
    transition: transform 0.4s ease-out;
}
.card:hover .card-image img {
    transform: scale(1.05);
}

.card-content {
    padding: calc(var(--spacing-unit) * 2.5);
    width: 100%; /* Ensure padding applies correctly */
}
.card-title {
    font-size: 1.4rem;
    margin-bottom: var(--spacing-unit);
    color: var(--color-text-dark);
}
.card-description, .card-excerpt {
    color: var(--color-text-medium);
    font-size: 0.95rem;
    margin-bottom: calc(var(--spacing-unit) * 2);
}


/* 9. Specific Sections */

/* 9.1. Statistics Section (Progress Bars) */
.statistics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}
.stat-item {
    padding: calc(var(--spacing-unit) * 3);
}
.stat-title {
    font-size: 1.25rem;
    color: var(--color-primary);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}
.progress-indicator-container {
    width: 100%;
    background-color: var(--color-surface-alt);
    border-radius: var(--border-radius-soft);
    margin-bottom: var(--spacing-unit);
    height: 25px; /* Fixed height for progress bar */
    overflow: hidden; /* Ensure inner bar respects radius */
    box-shadow: var(--neumorphic-shadow-concave); /* Make container appear pressed in */
}
.progress-bar {
    height: 100%;
    background-color: var(--color-accent);
    border-radius: var(--border-radius-soft); /* Match container */
    text-align: right;
    padding-right: var(--spacing-unit);
    line-height: 25px; /* Center text vertically */
    color: var(--color-white);
    font-weight: bold;
    font-size: 0.9rem;
    transition: width 1s ease-out; /* Animation for width change */
    box-shadow: var(--neumorphic-shadow-convex); /* Make bar appear raised */
}
.progress-bar span {
    display: inline-block;
    padding: 0 var(--spacing-unit);
}
.stat-description {
    font-size: 0.9rem;
    color: var(--color-text-light);
}

/* 9.2. Methodology Section */
.methodology-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: calc(var(--spacing-unit) * 3);
    margin-top: calc(var(--spacing-unit) * 4);
    margin-bottom: calc(var(--spacing-unit) * 4);
}
.methodology-step {
    padding: calc(var(--spacing-unit) * 3);
    text-align: center; /* Center content within step */
}
.step-icon-placeholder {
    width: 60px;
    height: 60px;
    background-color: var(--color-primary-light);
    border-radius: var(--border-radius-round);
    margin: 0 auto calc(var(--spacing-unit) * 2);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Add actual icon or SVG here via HTML or CSS background */
    box-shadow: var(--neumorphic-shadow-convex);
}
.step-title {
    font-size: 1.3rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-unit);
}
.step-description {
    font-size: 0.95rem;
    color: var(--color-text-medium);
}

/* 9.3. Case Studies Section (Cards, Slider) */
.case-studies-slider {
    position: relative; /* For prev/next buttons */
    margin-bottom: calc(var(--spacing-unit) * 4);
}
.slider-wrapper { /* This would be the scrollable/transformed container */
    display: flex;
    gap: calc(var(--spacing-unit) * 3);
    overflow-x: auto; /* Basic horizontal scroll for now, JS for advanced */
    padding-bottom: var(--spacing-unit); /* For scrollbar visibility */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.slider-wrapper::-webkit-scrollbar { display: none; } /* Chrome, Safari, Opera */

.case-study-card {
    min-width: 300px; /* Ensure cards have a minimum width in slider */
    flex: 0 0 auto; /* Prevent shrinking/growing in flex container */
}
.case-study-tag {
    display: inline-block;
    background-color: var(--color-accent-light);
    color: var(--color-accent-dark);
    padding: calc(var(--spacing-unit) / 2) var(--spacing-unit);
    border-radius: var(--border-radius-soft);
    font-size: 0.8rem;
    font-weight: bold;
    margin-top: var(--spacing-unit);
}
.slider-controls {
    text-align: center;
    margin-top: calc(var(--spacing-unit) * 3);
}
.slider-prev, .slider-next {
    margin: 0 var(--spacing-unit);
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
}


/* 9.4. Awards Section */
.awards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}
.award-item {
    padding: calc(var(--spacing-unit) * 3);
    text-align: center;
}
.award-icon-placeholder {
    width: 70px;
    height: 70px;
    background-color: var(--color-accent-light);
    border-radius: var(--border-radius-medium); /* Biomorphic touch */
    margin: 0 auto calc(var(--spacing-unit) * 2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--neumorphic-shadow-convex);
}
.award-title {
    font-size: 1.35rem;
    color: var(--color-text-dark);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}
.award-source {
    font-style: italic;
    color: var(--color-primary);
    margin-bottom: var(--spacing-unit);
    font-size: 0.9rem;
}
.award-description {
    font-size: 0.95rem;
    color: var(--color-text-medium);
}

/* 9.5. Gallery Section */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 4);
}
.gallery-item {
    border-radius: var(--border-radius-medium);
    overflow: hidden;
    position: relative;
    padding: 0; /* Neumorphic element padding reset */
}
.gallery-item img {
    width: 100%;
    height: 250px; /* Fixed height for gallery images */
    object-fit: cover;
    transition: transform 0.4s ease-out, filter 0.4s ease-out;
}
.gallery-item:hover img {
    transform: scale(1.05);
    filter: brightness(1.1);
}
.image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: var(--color-white);
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5);
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 0; /* Override default p margin */
    transition: opacity 0.3s ease-out;
}
.gallery-item:hover .image-caption {
    opacity: 0.9;
}

/* 9.6. Events Section */
.events-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}
.event-item {
    display: flex;
    gap: calc(var(--spacing-unit) * 2.5);
    padding: calc(var(--spacing-unit) * 2.5);
    align-items: flex-start; /* Align date badge and details to top */
}
.event-date-badge {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--border-radius-soft);
    padding: var(--spacing-unit);
    text-align: center;
    min-width: 70px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.event-date-badge .month {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: bold;
    opacity: 0.8;
}
.event-date-badge .day {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
}
.event-details {
    flex-grow: 1;
}
.event-title {
    font-size: 1.3rem;
    color: var(--color-text-dark);
    margin-bottom: calc(var(--spacing-unit) / 2);
}
.event-time-location {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-unit);
}
.event-description {
    font-size: 0.95rem;
    color: var(--color-text-medium);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}
.event-item .btn-secondary { /* Or use .neumorphic-button */
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
    font-size: 0.9rem;
}

/* 9.7. Blog Section */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}
.blog-post-card {
    /* Uses .card base styles */
}
.post-date {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-bottom: calc(var(--spacing-unit) / 2);
}

/* 9.8. External Resources Section */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}
.resource-item {
    /* Uses .neumorphic-element styles by default */
    padding: calc(var(--spacing-unit) * 2.5);
    display: flex;
    flex-direction: column; /* Align content vertically */
}
.resource-title {
    font-size: 1.25rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-unit);
}
.resource-description {
    font-size: 0.95rem;
    color: var(--color-text-medium);
    flex-grow: 1; /* Push link to bottom if heights vary */
    margin-bottom: calc(var(--spacing-unit) * 2);
}
.resource-item .btn-link {
    margin-top: auto; /* Align to bottom */
    align-self: flex-start; /* Align left */
}

/* 9.9. Contact Home Section */
.contact-home-section {
    /* Standard section padding */
}
.neumorphic-form {
    max-width: 700px;
    margin: 0 auto; /* Center form */
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
    background-color: var(--color-bg);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--neumorphic-shadow-convex); /* Form itself is raised */
}
.contact-home-section .section-paragraph {
    margin-top: calc(var(--spacing-unit) * 3);
    text-align: center;
    font-size: 0.9rem;
}

/* 10. Footer */
.site-footer {
    background-color: var(--color-surface-alt); /* Slightly different bg for footer */
    padding: calc(var(--spacing-unit) * 5) 0;
    color: var(--color-text-medium);
    font-size: 0.9rem;
}
.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: calc(var(--spacing-unit) * 4);
    align-items: flex-start;
}
.footer-heading {
    font-size: 1.1rem;
    color: var(--color-text-dark);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    font-weight: 700;
}
.site-footer ul {
    list-style: none;
    padding: 0;
}
.site-footer ul li {
    margin-bottom: var(--spacing-unit);
}
.site-footer ul li a {
    color: var(--color-text-medium);
    text-decoration: none;
}
.site-footer ul li a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}
.footer-social ul li a {
    /* Text links are default */
    font-weight: 500;
}
.footer-copyright {
    grid-column: 1 / -1; /* Span full width */
    text-align: center;
    margin-top: calc(var(--spacing-unit) * 3);
    padding-top: calc(var(--spacing-unit) * 2);
    border-top: 1px solid rgba(var(--color-primary-rgb), 0.1);
}
.footer-copyright p {
    margin-bottom: calc(var(--spacing-unit) / 2);
    font-size: 0.85rem;
}

/* 11. Page-Specific Styles */
/* success.html */
.success-page-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--spacing-unit) * 2);
    background-color: var(--color-bg);
}
.success-content {
    background-color: var(--color-surface);
    padding: calc(var(--spacing-unit) * 5) calc(var(--spacing-unit) * 4);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--neumorphic-shadow-convex);
    max-width: 500px;
}
.success-content h1 {
    color: var(--color-success);
    font-size: 2.5rem;
    margin-bottom: var(--spacing-unit);
}
.success-content p {
    color: var(--color-text-medium);
    font-size: 1.1rem;
    margin-bottom: calc(var(--spacing-unit) * 3);
}
.success-content .btn {
    margin-top: var(--spacing-unit);
}

/* privacy.html, terms.html */
.page-content-wrapper { /* Used on privacy.html, terms.html */
    padding-top: calc(var(--header-height) + var(--spacing-unit) * 4); /* Header height + extra space */
    padding-bottom: calc(var(--spacing-unit) * 8);
}
.page-content-wrapper .container h1 {
    margin-bottom: calc(var(--spacing-unit) * 4);
    text-align: center;
}
.page-content-wrapper .container h2 {
    margin-top: calc(var(--spacing-unit) * 4);
    margin-bottom: var(--spacing-unit);
    color: var(--color-primary);
}
.page-content-wrapper .container p,
.page-content-wrapper .container ul,
.page-content-wrapper .container ol {
    margin-bottom: calc(var(--spacing-unit) * 2);
    line-height: 1.7;
}
.page-content-wrapper .container ul,
.page-content-wrapper .container ol {
    padding-left: calc(var(--spacing-unit) * 3);
    list-style: disc;
}
.page-content-wrapper .container ol {
    list-style: decimal;
}


/* 12. Animations & Transitions (Base for AOS) */
/* AOS library will handle its own animations. These are base transitions. */
[data-aos] {
    transition-property: transform, opacity; /* Common properties AOS animates */
}
/* Example of a subtle "hand-drawn" like hover for specific elements if desired */
/* .hand-drawn-hover:hover {
    transform: rotate(-1deg) scale(1.01);
} */

/* 13. Responsive Design */
@media (max-width: 992px) {
    .section-title { font-size: clamp(1.8rem, 3.5vw, 2.25rem); }
    .section-intro { font-size: 1rem; }
}

@media (max-width: 768px) {
    .nav-toggle {
        display: block; /* Show hamburger */
    }
    .main-nav .nav-list {
        position: fixed;
        top: var(--header-height); /* Start below header */
        left: 0;
        width: 100%;
        height: calc(100vh - var(--header-height)); /* Full height minus header */
        background-color: rgba(244, 241, 248, 0.98); /* Solid background for mobile menu */
        backdrop-filter: blur(5px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: calc(var(--spacing-unit) * 4) 0;
        transform: translateX(100%); /* Hidden off-screen */
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        overflow-y: auto;
    }
    .nav-open .main-nav .nav-list {
        transform: translateX(0%); /* Slide in */
    }
    .main-nav .nav-list li {
        margin: calc(var(--spacing-unit) * 2) 0;
    }
    .main-nav .nav-link {
        font-size: 1.3rem;
        padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
    }

    .hero-title { font-size: clamp(2.2rem, 8vw, 3rem); }
    .hero-subtitle { font-size: clamp(1rem, 3vw, 1.2rem); }

    .statistics-grid,
    .methodology-steps,
    .awards-grid,
    .gallery-grid,
    .blog-grid,
    .resources-grid,
    .footer-container {
        grid-template-columns: 1fr; /* Stack columns */
    }

    .event-item {
        flex-direction: column;
        align-items: center; /* Center content in column */
        text-align: center;
    }
    .event-date-badge {
        margin-bottom: var(--spacing-unit);
    }
    .event-details {
        width: 100%;
    }
    .footer-container > div {
        text-align: center; /* Center footer column content */
    }
    .footer-container ul {
        padding-left: 0;
    }
}

@media (max-width: 480px) {
    :root {
        --spacing-unit: 6px; /* Slightly reduce spacing unit on small screens */
    }
    .container { width: 95%; }
    .section-padding {
        padding-top: calc(var(--spacing-unit) * 6);
        padding-bottom: calc(var(--spacing-unit) * 6);
    }
    .hero-title { font-size: clamp(2rem, 10vw, 2.5rem); }
    .btn, button, input[type="submit"], input[type="button"] {
        padding: calc(var(--spacing-unit) * 1.2) calc(var(--spacing-unit) * 2.5);
        font-size: 0.9rem;
    }
    .card-title { font-size: 1.2rem; }
}