/* ==========================================================================
   Better World Application - Main Stylesheet
   Version: 1.0.0
   ========================================================================== */

/* --- 1. Root Variables & Basic Setup --- */
:root {
    --color-primary: #007bff;        /* A vibrant, trustworthy blue */
    --color-primary-dark: #0056b3;
    --color-secondary: #f0f8ff;      /* A very light, airy blue for backgrounds */
    --color-dark: #212529;           /* Main text color */
    --color-muted: #6c757d;          /* Lighter text for subtitles, etc. */
    --color-light: #ffffff;
    --color-border: #dee2e6;
    --color-success: #28a745;
    --color-danger: #dc3545;

    --font-primary: 'Poppins', sans-serif;
    --header-height: 70px;
    --container-width: 1200px;
    --container-padding: 1rem;
    --border-radius: 8px;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.1);
    --transition-speed: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-dark);
    background-color: var(--color-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: var(--header-height); /* Prevent content from hiding under fixed header */
}

body.menu-open {
    overflow: hidden; /* Prevent scrolling when mobile menu is open */
}

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

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

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

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Accessibility helper class */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* --- 2. Header & Navigation --- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: var(--color-light);
    box-shadow: var(--shadow-sm);
    z-index: 1000;
    transition: background-color var(--transition-speed);
}

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

.site-brand a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.site-logo {
    height: 40px;
}

.site-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-blue);
}

/* Main Navigation (Desktop) */
.main-nav {
    display: flex;
    align-items: center;
}

.nav-list {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 2rem;
}

.nav-list a {
    color: var(--color-dark);
    font-weight: 500;
    padding: 0.5rem 0;
    text-decoration: none;
    position: relative;
    transition: color var(--transition-speed);
}

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

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

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

.dropdown-toggle .fa-angle-down {
    margin-left: 0.3rem;
    font-size: 0.8em;
    transition: transform var(--transition-speed);
}

/* Dropdown Menu */
.nav-item-dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background-color: var(--color-light);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    padding: 0.5rem 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--transition-speed), transform var(--transition-speed), visibility 0s var(--transition-speed);
    z-index: 1001;
}

.nav-item-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.nav-item-dropdown:hover .dropdown-toggle .fa-angle-down {
    transform: rotate(180deg);
}

.dropdown-menu a {
    display: block;
    padding: 0.75rem 1.5rem;
    font-weight: 400;
}
.dropdown-menu a::after { display: none; } /* No underline on dropdown items */

/* Header Actions: Search & Buttons */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-search form {
    position: relative;
}

.header-search input {
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 8px 35px 8px 15px;
    font-family: var(--font-primary);
    width: 200px;
    transition: width var(--transition-speed), border-color var(--transition-speed);
}

.header-search input:focus {
    outline: none;
    border-color: var(--color-primary);
    width: 250px;
}

.header-search button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-muted);
    font-size: 1rem;
    padding: 5px;
}

.button {
    padding: 0.6rem 1.2rem;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all var(--transition-speed);
}

.button-primary {
    background-color: var(--color-primary);
    color: var(--color-light);
}
.button-primary:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-light);
}

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

/* --- 3. Mobile Navigation --- */
.mobile-menu-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-dark);
    cursor: pointer;
    z-index: 1002;
}
.mobile-menu-toggle .icon-close { display: none; }

.mobile-menu-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 998;
}
.mobile-menu-backdrop.is-visible { display: block; }


/* Responsive Breakpoint */
@media (max-width: 1024px) {
    .main-nav, .header-search, .header-actions .button {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;
    }

    body.menu-open .mobile-menu-toggle .icon-open { display: none; }
    body.menu-open .mobile-menu-toggle .icon-close { display: block; }

    /* Show mobile nav when .is-open is added by JS */
    .main-nav.is-open {
        display: block;
        position: fixed;
        top: var(--header-height);
        right: 0;
        width: 80%;
        max-width: 320px;
        height: calc(100vh - var(--header-height));
        background-color: var(--color-light);
        padding: 2rem;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        transform: translateX(0);
        overflow-y: auto;
        z-index: 999;
    }

    .nav-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    
    .nav-list > li {
        width: 100%;
    }

    .nav-list a {
        display: block;
        width: 100%;
        padding: 1rem 0;
        font-size: 1.1rem;
        border-bottom: 1px solid var(--color-border);
    }
    .nav-list a::after { display: none; }
    .nav-list li:last-child a { border-bottom: none; }
    
    /* Mobile Dropdown Styling */
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background-color: var(--color-secondary);
        border-radius: 0;
        padding-left: 1.5rem; /* Indent sub-menu items */
        display: none; /* Hidden by default, toggled by JS */
    }
    
    .nav-item-dropdown.is-active .dropdown-menu {
        display: block;
    }

    .nav-item-dropdown.is-active > .dropdown-toggle .fa-angle-down {
        transform: rotate(180deg);
    }
    
    .header-actions.is-open {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--color-border);
    }
}
/* ==========================================================================
   4. Page Sections & Reusable Components
   ========================================================================== */

.site-main > section {
    padding: 4rem 0;
}

.section-title {
    font-size: 2.25rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    padding-bottom: 1rem;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: var(--color-primary);
    border-radius: 2px;
}

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

/* Add a larger button variant */
.button-large {
    padding: 0.8rem 1.8rem;
    font-size: 1.1rem;
}

/* ==========================================================================
   5. Page Specific: Home Page
   ========================================================================== */

/* --- Hero Section --- */
.hero-section {
    background-color: var(--color-light);
    text-align: center;
    padding: 5rem var(--container-padding);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-title {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.hero-title span {
    color: var(--color-primary);
}

.hero-subtitle {
    font-size: 1.1rem;
    color: var(--color-muted);
    max-width: 750px;
    margin: 0 auto 2.5rem auto;
}

.hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap; /* Allows buttons to stack on very small screens */
}


/* --- How It Works Section --- */
.journey-grid {
    display: grid;
    gap: 1.5rem;
    /* Mobile: Single column by default (grid's default behavior) */
}

.journey-card {
    background-color: var(--color-light);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);

    /* For reveal animation */
    opacity: 0;
    transform: translateY(20px);
}

.journey-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.journey-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
}

.card-icon {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-light);
    height: 70px;
    width: 70px;
    line-height: 70px;
    border-radius: 50%;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    transition: transform var(--transition-speed);
}

.journey-card:hover .card-icon {
    transform: scale(1.1) rotate(5deg);
}

.card-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.card-description {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-muted);
}


/* --- Responsive Adjustments --- */
@media (min-width: 576px) {
    .journey-grid {
        /* 2 columns on small-ish screens */
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .site-main > section {
        padding: 6rem 0;
    }
    .hero-title {
        font-size: 3.5rem;
    }
    .hero-subtitle {
        font-size: 1.25rem;
    }
}

@media (min-width: 992px) {
    .journey-grid {
        /* 4 columns on larger screens */
        grid-template-columns: repeat(4, 1fr);
    }
}
/* ==========================================================================
   6. Site Footer
   ========================================================================== */
.site-footer {
    background-color:var(--color-blue);
    color: #044789; /* A lighter gray for readability on dark background */
    padding: 4rem 0 2rem 0;
    font-size: 0.9rem;
    line-height: 1.7;
}

.site-footer a {
    color: #044789;
    text-decoration: none;
    transition: color var(--transition-speed);
}

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

.footer-top {
    display: grid;
    /* Create a responsive grid that wraps nicely */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2.5rem;
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid #343a40;
}

.footer-col h4 {
    color: var(--color-light);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col li {
    margin-bottom: 0.75rem;
}

.footer-brand .footer-logo img {
    max-width: 150px;
    margin-bottom: 1rem;
}

.footer-tagline {
    font-style: italic;
    color: var(--color-light);
    margin-bottom: 1.5rem;
}

.footer-social {
    display: flex;
    gap: 1rem;
}

.footer-social a {
    font-size: 1.2rem;
    transition: transform var(--transition-speed), color var(--transition-speed);
}

.footer-social a:hover {
    transform: translateY(-3px);
    color: var(--color-primary);
}

.footer-bottom {
    text-align: center;
    font-size: 0.85rem;
}

.footer-bottom p {
    margin: 0.25rem 0;
}

.copyright {
    color: var(--color-light);
}
/* ==========================================================================
   7. SDG (Sustainable Development Goals) Components
   ========================================================================== */

/* --- Component 1: SDG Tag ---
 * A small, colored "pill" style tag for showing an SDG.
 * Usage: <span class="sdg-tag sdg-1"><i class="fas fa-..."></i> No Poverty</span>
*/
.sdg-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.3em 0.8em;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-light);
    white-space: nowrap;
}

.sdg-tag .fa,
.sdg-tag .fas {
    font-size: 0.9em;
}

/* --- Component 2: SDG Card Grid ---
 * A responsive grid of cards, perfect for an overview page.
 * Usage: <div class="sdg-card-grid"> ... <div class="sdg-card sdg-1-card"> ... </div></div>
*/
.sdg-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.sdg-card {
    background: var(--color-light);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    display: flex;
    flex-direction: column;
}

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

.sdg-card-header {
    padding: 1rem 1.5rem;
    color: var(--color-light);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sdg-card-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.sdg-card-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.sdg-card-body {
    padding: 1.5rem;
    flex-grow: 1;
}

/* --- SDG Color Classes --- */
/* These classes apply the official background color for each SDG */

/* Tags */
.sdg-tag.sdg-1 { background-color: #E5243B; }
.sdg-tag.sdg-2 { background-color: #DDA63A; }
.sdg-tag.sdg-3 { background-color: #4C9F38; }
.sdg-tag.sdg-4 { background-color: #C5192D; }
.sdg-tag.sdg-5 { background-color: #FF3A21; }
.sdg-tag.sdg-6 { background-color: #26BDE2; }
.sdg-tag.sdg-7 { background-color: #FCC30B; }
.sdg-tag.sdg-8 { background-color: #A21942; }
.sdg-tag.sdg-9 { background-color: #FD6925; }
.sdg-tag.sdg-10 { background-color: #DD1367; }
.sdg-tag.sdg-11 { background-color: #FD9D24; }
.sdg-tag.sdg-12 { background-color: #BF8B2E; }
.sdg-tag.sdg-13 { background-color: #3F7E44; }
.sdg-tag.sdg-14 { background-color: #0A97D9; }
.sdg-tag.sdg-15 { background-color: #56C02B; }
.sdg-tag.sdg-16 { background-color: #00689D; }
.sdg-tag.sdg-17 { background-color: #19486A; }

/* Cards (Header Background) */
.sdg-1-card .sdg-card-header { background-color: #E5243B; }
.sdg-2-card .sdg-card-header { background-color: #DDA63A; }
.sdg-3-card .sdg-card-header { background-color: #4C9F38; }
.sdg-4-card .sdg-card-header { background-color: #C5192D; }
.sdg-5-card .sdg-card-header { background-color: #FF3A21; }
.sdg-6-card .sdg-card-header { background-color: #26BDE2; }
.sdg-7-card .sdg-card-header { background-color: #FCC30B; }
.sdg-8-card .sdg-card-header { background-color: #A21942; }
.sdg-9-card .sdg-card-header { background-color: #FD6925; }
.sdg-10-card .sdg-card-header { background-color: #DD1367; }
.sdg-11-card .sdg-card-header { background-color: #FD9D24; }
.sdg-12-card .sdg-card-header { background-color: #BF8B2E; }
.sdg-13-card .sdg-card-header { background-color: #3F7E44; }
.sdg-14-card .sdg-card-header { background-color: #0A97D9; }
.sdg-15-card .sdg-card-header { background-color: #56C02B; }
.sdg-16-card .sdg-card-header { background-color: #00689D; }
.sdg-17-card .sdg-card-header { background-color: #19486A; }

/* ==========================================================================
   8. Forms & Form Components
   ========================================================================== */

.bw-form {
    background-color: var(--color-light);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    margin-top: 2rem;
}

.form-section {
    background-color: var(--color-secondary);
    padding: 4rem 0;
}

.form-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 1rem auto;
    color: var(--color-muted);
}

.form-group {
    margin-bottom: 1.5rem;
}

.bw-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.bw-form input[type="text"],
.bw-form input[type="url"],
.bw-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-family: var(--font-primary);
    font-size: 1rem;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.bw-form input[type="text"]:focus,
.bw-form input[type="url"]:focus,
.bw-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

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

.bw-form small, .char-count {
    display: block;
    margin-top: 0.5rem;
    color: var(--color-muted);
    font-size: 0.85rem;
}

.char-count { text-align: right; }

.form-actions {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.alert {
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    border: 1px solid transparent;
}
.alert-success { background-color: #d4edda; border-color: #c3e6cb; color: #155724; }
.alert-error { background-color: #f8d7da; border-color: #f5c6cb; color: #721c24; }
.alert ul { margin-top: 0.5rem; padding-left: 20px; }

/* SDG Checkbox Grid */
.sdg-checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.sdg-checkbox-item input[type="checkbox"] {
    display: none; /* Hide the actual checkbox */
}
.sdg-checkbox-item .sdg-tag {
    cursor: pointer;
    opacity: 0.6;
    transition: all var(--transition-speed);
    border: 2px solid transparent;
}
.sdg-checkbox-item input[type="checkbox"]:checked + .sdg-tag {
    opacity: 1;
    box-shadow: 0 0 0 2px var(--color-light), 0 0 0 4px currentColor;
}

/* File Uploader */
.file-input-hidden { display: none; }
.file-drop-zone {
    border: 2px dashed var(--color-border);
    border-radius: var(--border-radius);
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}
.file-drop-zone:hover {
    border-color: var(--color-primary);
    background-color: var(--color-secondary);
}
.file-drop-zone.is-dragover {
    border-color: var(--color-success);
    background-color: #e9f7ec;
}
.drop-zone-prompt .fas {
    font-size: 3rem;
    color: var(--color-muted);
    margin-bottom: 1rem;
}

.file-preview-list {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}
.file-preview-item {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    background-color: var(--color-secondary);
}
.preview-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}
.preview-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 120px;
    background-color: #e9ecef;
    font-size: 3rem;
    color: var(--color-muted);
}
.file-info {
    padding: 0.5rem;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.remove-file-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(0,0,0,0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    font-size: 0.9rem;
}

/* ==========================================================================
   9. Page Specific: About Page
   ========================================================================== */

/* --- Page Hero --- */
.page-hero {
    background-color: var(--color-primary);
    color: var(--color-light);
    padding: 4rem 0;
    text-align: center;
}
.page-hero-title {
    font-size: 2.8rem;
    font-weight: 700;
}
.page-hero-subtitle {
    font-size: 1.1rem;
    max-width: 800px;
    margin: 1rem auto 0 auto;
    opacity: 0.9;
}
.page-hero a {
    color: var(--color-light);
    font-weight: 600;
    text-decoration: underline;
}

/* --- About Story Section --- */
.about-story-section { padding: 5rem 0; }

.story-grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 3rem;
}
@media (min-width: 992px) {
    .story-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.section-title-left {
    text-align: left;
    font-size: 2rem;
    margin-bottom: 1.5rem;
}
.section-title-left::after {
    left: 0;
    transform: none;
}
.story-image-wrapper .story-image {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
}

/* --- Icon List (used in story section) --- */
.icon-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}
.icon-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 1.05rem;
}
.icon-list .fas {
    color: var(--color-primary);
    font-size: 1.2rem;
    margin-top: 0.2rem;
}


/* --- Mission & Vision Section --- */
.mission-vision-section { padding: 5rem 0; }
.mission-vision-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) {
    .mission-vision-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.mission-vision-card {
    background-color: var(--color-light);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    text-align: center;
    border: 1px solid var(--color-border);
}
.mission-vision-card .card-icon {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}
.mission-vision-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* --- Team Section (REVISED for perfect alignment) --- */
.team-section { padding: 5rem 0; }

.section-intro {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 3rem auto;
    color: var(--color-muted);
}

.team-grid {
    display: grid;
    /* On smaller screens, it will wrap automatically */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}

/* On large screens, we force a 4-column layout */
@media (min-width: 1200px) {
    .team-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.team-member-card {
    background: var(--color-light);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    /* Use Flexbox to ensure all cards have the same height */
    display: flex;
    flex-direction: column;
}

.team-member-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
}

.team-member-card .card-image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center top;
}

.team-member-card .card-content {
    padding: 1.5rem;
    text-align: center;
    /* This makes the content area grow to fill available space, pushing the social links to the bottom */
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
}

.member-name {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.member-role {
    color: var(--color-primary);
    font-weight: 500;
    margin-bottom: 1rem;
}

.member-bio {
    font-size: 0.9rem;
    color: var(--color-muted);
    margin-bottom: 1.5rem;
    /* This makes the bio take up the available space, pushing social links down */
    flex-grow: 1; 
}

.member-social {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.member-social a {
    font-size: 1.2rem;
    color: var(--color-muted);
}

.member-social a:hover {
    color: var(--color-primary);
}
/* ==========================================================================
   10. Page Specific: Awards Page
   ========================================================================== */

/* --- Reusable Info Grid & Cards (for process & types sections) --- */
.awards-process-section,
.award-types-section,
.featured-winners-section {
    padding: 5rem 0;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.info-card {
    background-color: var(--color-light);
    padding: 2.5rem 2rem;
    border-radius: var(--border-radius);
    text-align: center;
    border: 1px solid var(--color-border);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.section-bg .info-card { /* Ensure cards on colored bg are white */
    background-color: var(--color-light);
}
.info-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.info-card .icon {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    display: inline-block;
}

.info-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.info-card p {
    color: var(--color-muted);
    font-size: 0.95rem;
}

/* --- Featured Winners & Project Cards --- */
.project-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

.project-card {
    background-color: var(--color-light);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.project-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
}

.project-card .card-thumbnail {
    display: block;
    position: relative;
    overflow: hidden;
}

.project-card .card-thumbnail img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.project-card:hover .card-thumbnail img {
    transform: scale(1.05);
}

.project-card .card-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.project-card .sdg-tags-list {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
}
.project-card .sdg-tags-list .sdg-tag {
    padding: 0.2em 0.5em;
    font-size: 0.8rem;
}

.project-card .card-title {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}
.project-card .card-title a {
    color: var(--color-dark);
    text-decoration: none;
}
.project-card .card-title a:hover {
    color: var(--color-primary);
}

.project-card .card-meta {
    font-size: 0.9rem;
    color: var(--color-muted);
    margin-bottom: 1rem;
    flex-grow: 1; /* Pushes the award tag to the bottom */
}

.award-tag {
    display: inline-block;
    align-self: flex-start;
    background-color: #fff3cd;
    color: #856404;
    padding: 0.4rem 0.8rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 0.85rem;
}
.award-tag .fa-award {
    margin-right: 0.5rem;
}

.section-actions {
    text-align: center;
    margin-top: 3rem;
}
/* ==========================================================================
   11. Page Specific: Challenge Template
   ========================================================================== */

/* --- Challenge Hero --- */
.challenge-hero {
    position: relative;
    padding: 6rem 0;
    text-align: center;
    color: var(--color-light);
    background-size: cover;
    background-position: center;
}
/* Dark overlay for text readability */
.challenge-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
}
.challenge-hero .container {
    position: relative;
    z-index: 2;
}
.challenge-hero .hero-title {
    font-size: 3rem;
}
.challenge-hero .hero-subtitle {
    font-size: 1.25rem;
    opacity: 0.9;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Challenge Meta Bar --- */
.challenge-meta-bar {
    background-color: var(--color-secondary);
    border-bottom: 1px solid var(--color-border);
}
.challenge-meta-bar .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem var(--container-padding);
}
.meta-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.meta-item .fas {
    font-size: 1.5rem;
    color: var(--color-primary);
}
.meta-item strong {
    display: block;
    font-size: 0.85rem;
    color: var(--color-muted);
}
.meta-item span {
    font-weight: 500;
}
.meta-item .sdg-tags-list { display: flex; gap: 0.3rem; margin-top: 0.2rem; }

/* --- Main Content Layout --- */
.challenge-main-content {
    padding: 4rem 0;
}
.challenge-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}
@media (min-width: 992px) {
    .challenge-layout {
        grid-template-columns: 2.5fr 1fr; /* Main content is wider */
    }
}
.content-body h3 {
    font-size: 1.75rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-border);
}
.content-body h3:first-child {
    margin-top: 0;
}
.requirements-list {
    list-style: none;
    padding-left: 0;
}
.requirements-list li {
    padding: 0.75rem 0 0.75rem 2rem;
    position: relative;
    border-bottom: 1px solid #f0f0f0;
}
.requirements-list li:before {
    content: '\f00c'; /* Font Awesome checkmark */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--color-success);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.cta-card {
    background-color: var(--color-secondary);
    padding: 2rem;
    border-radius: var(--border-radius);
    text-align: center;
    position: sticky;
    top: 100px; /* Aligns with header height + a bit of space */
}
.cta-card h4 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
}
.cta-card .button {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
}

/* --- Submitted Projects Section --- */
.submitted-projects-section {
    padding: 5rem 0;
}
.project-stats {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
    color: var(--color-muted);
}
.project-stats .fas {
    margin-right: 0.4rem;
}

/* --- Error Section --- */
.error-section {
    padding: 5rem 0;
    text-align: center;
}
.error-section .fas {
    font-size: 3rem;
    color: var(--color-danger);
    margin-bottom: 1.5rem;
}
/* ==========================================================================
   12. Page Specific: Challenges Listing
   ========================================================================== */

.challenges-listing-section {
    padding: 5rem 0;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}
.section-header .section-title {
    margin-bottom: 1rem;
}
.section-header .section-intro {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    color: var(--color-muted);
}

.challenge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 2rem;
}

.challenge-card {
    background: var(--color-light);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.challenge-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
}

.challenge-card .card-thumbnail {
    display: block;
    position: relative;
}
.challenge-card .card-thumbnail img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.challenge-card:hover .card-thumbnail img {
    transform: scale(1.05);
}

.status-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    color: var(--color-light);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.status-badge.status-active {
    background-color: var(--color-success);
}
.status-badge.status-upcoming {
    background-color: var(--color-primary);
}

.challenge-card .card-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.challenge-card .sdg-tags-list {
    margin-bottom: 1rem;
    display: flex;
    gap: 0.4rem;
}
.challenge-card .sdg-tags-list .sdg-tag {
    padding: 0.2em 0.5em; /* Make icons in cards a bit smaller */
    font-size: 0.8rem;
}
.challenge-card .sdg-tags-list .sdg-tag i {
    color: white !important; /* Ensure icon is white on colored background */
}

.challenge-card .card-title {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}
.challenge-card .card-title a {
    color: var(--color-dark);
    text-decoration: none;
}
.challenge-card .card-title a:hover {
    color: var(--color-primary);
}

.challenge-card .card-subtitle {
    color: var(--color-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    flex-grow: 1; /* Pushes the button to the bottom */
    margin-bottom: 1.5rem;
}

.challenge-card .card-actions {
    margin-top: auto; /* Aligns button to the bottom */
}
/* ==========================================================================
   13. Page Specific: Contact Page
   ========================================================================== */

.contact-section {
    padding: 5rem 0;
    background-color: var(--color-secondary);
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    background-color: var(--color-light);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
}

@media (min-width: 992px) {
    .contact-layout {
        grid-template-columns: 2fr 1fr; /* Form is wider */
        padding: 3rem;
    }
}

.contact-form-wrapper h3 {
    font-size: 1.75rem;
    margin-bottom: 2rem;
}

.contact-details-card {
    background-color: var(--color-secondary);
    padding: 2rem;
    border-radius: var(--border-radius);
    height: 100%; /* Make card fill grid cell height */
}
.contact-details-card h4 {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.contact-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.contact-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.contact-info-list .fas {
    font-size: 1.25rem;
    color: var(--color-primary);
    margin-top: 0.2rem;
    width: 20px;
    text-align: center;
}
.contact-info-list strong {
    display: block;
    font-weight: 600;
    margin-bottom: 0.2rem;
}
.contact-info-list a {
    color: var(--color-primary);
    text-decoration: none;
}
.contact-info-list a:hover {
    text-decoration: underline;
}

.contact-social {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}
.contact-social a {
    font-size: 1.5rem;
    color: var(--color-muted);
}
.contact-social a:hover {
    color: var(--color-primary);
}
/* ==========================================================================
   14. Page Specific: Course Template
   ========================================================================== */

/* Hide default main for this two-column layout */
body:has(.course-page-layout) .site-main {
    padding: 0;
}
body:has(.course-page-layout) .site-footer {
    display: none; /* Can be enabled if desired */
}

.course-page-layout {
    display: grid;
    grid-template-columns: 1fr;
    min-height: calc(100vh - var(--header-height));
}
@media (min-width: 1024px) {
    .course-page-layout {
        grid-template-columns: 1fr 380px; /* Main content and a fixed-width sidebar */
    }
}

/* --- Main Content Area --- */
.course-main-content {
    padding: 2rem;
    background-color: var(--color-light);
}
@media (min-width: 768px) {
    .course-main-content {
        padding: 3rem 4rem;
    }
}

.course-header {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
}
.content-type-badge {
    display: inline-block;
    background-color: var(--color-secondary);
    color: var(--color-primary);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.course-title {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}
.course-subtitle {
    font-size: 1.1rem;
    color: var(--color-muted);
}

.course-body h3 {
    font-size: 1.75rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}
.course-body p {
    margin-bottom: 1.25rem;
    line-height: 1.7;
}

/* --- Sidebar Area --- */
.course-sidebar {
    background-color: var(--color-secondary);
    border-left: 1px solid var(--color-border);
}
.sidebar-card {
    position: sticky;
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    display: flex;
    flex-direction: column;
}
.sidebar-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    flex-shrink: 0;
}
.sidebar-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.sidebar-content h4 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.status-badge {
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-dark);
}
.status-badge.status-not_started { background-color: #e9ecef; }
.status-badge.status-in_progress { background-color: #fff3cd; color: #856404; }
.status-badge.status-completed { background-color: #d4edda; color: #155724; }

.progress-bar-container {
    background-color: #e9ecef;
    border-radius: 20px;
    height: 12px;
    overflow: hidden;
    margin-top: 0.5rem;
}
.progress-bar {
    background-color: var(--color-success);
    height: 100%;
    border-radius: 20px;
}
.progress-text {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin-top: 0.25rem;
    display: block;
}

.sidebar-actions {
    margin: 1.5rem 0;
}
.sidebar-actions .button {
    width: 100%;
    text-align: center;
    justify-content: center; /* For flex icon alignment */
}
.sidebar-actions i {
    margin-right: 0.5rem;
}

.sidebar-meta {
    margin-top: auto; /* Pushes meta to the bottom */
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}
.sidebar-meta strong {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}
.sidebar-meta .sdg-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
/* ==========================================================================
   15. Page Specific: For Partners
   ========================================================================== */

/* --- Partner Benefits Section --- */
.partner-benefits-section {
    padding: 5rem 0;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.benefit-card {
    background-color: var(--color-light);
    padding: 2.5rem 2rem;
    text-align: center;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed), border-color var(--transition-speed);
}
.benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

.benefit-icon {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
}

.benefit-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.benefit-card p {
    color: var(--color-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* --- Partnership Options Section --- */
.partnership-options-section {
    padding: 5rem 0;
}
.options-layout {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 3rem;
}
@media (min-width: 992px) {
    .options-layout {
        grid-template-columns: 1fr 1fr;
    }
}

.options-content .icon-list .fas {
    color: var(--color-primary);
}

.options-image-wrapper img {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
}

/* --- Final CTA Section --- */
.cta-section {
    background-color: var(--color-dark);
    color: var(--color-light);
    padding: 4rem 0;
    text-align: center;
}
.cta-section h3 {
    font-size: 2rem;
    font-weight: 600;
}
.cta-section p {
    margin-bottom: 2rem;
    opacity: 0.9;
}
/* ==========================================================================
   16. Page Specific: How It Works
   ========================================================================== */

/* --- Vertical Timeline Section --- */
.how-it-works-timeline-section {
    padding: 5rem 0;
}

.timeline-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}
/* The central timeline bar */
.timeline-container::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: var(--color-border);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}
/* The circles on the timeline */
.timeline-icon {
    position: absolute;
    width: 60px;
    height: 60px;
    right: -30px;
    background-color: var(--color-primary);
    color: var(--color-light);
    border: 4px solid var(--color-secondary);
    top: 25px;
    border-radius: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.timeline-step {
    position: absolute;
    top: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-muted);
    background-color: var(--color-secondary);
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
}

/* Position the container to the left */
.timeline-item:nth-child(odd) {
    left: 0;
}
.timeline-item:nth-child(odd) .timeline-step { right: -80px; }

/* Position the container to the right */
.timeline-item:nth-child(even) {
    left: 50%;
}
.timeline-item:nth-child(even) .timeline-icon {
    left: -30px;
}
.timeline-item:nth-child(even) .timeline-step { left: -80px; }

/* The content box */
.timeline-content {
    padding: 20px 30px;
    background-color: var(--color-light);
    border: 1px solid var(--color-border);
    position: relative;
    border-radius: var(--border-radius);
}
.timeline-content h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.timeline-content p { color: var(--color-muted); }

/* Responsive: Place all items on the right side on smaller screens */
@media screen and (max-width: 900px) {
    .timeline-container::after { left: 31px; }
    .timeline-item { width: 100%; padding-left: 70px; padding-right: 25px; }
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) { left: 0; }
    .timeline-icon,
    .timeline-item:nth-child(even) .timeline-icon { left: 1px; }
    .timeline-step,
    .timeline-item:nth-child(odd) .timeline-step,
    .timeline-item:nth-child(even) .timeline-step {
        right: auto;
        left: 70px;
    }
}

/* --- Why It Works Section --- */
.why-it-works-section { padding: 5rem 0; }
.key-points-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
    text-align: left;
}
.key-point {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--color-light);
    padding: 1.25rem;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--color-primary);
}
.key-point .fas { color: var(--color-success); font-size: 1.2rem; }

/* ==========================================================================
   17. Page Specific: Impact Stories (Projects Listing)
   ========================================================================== */
.projects-listing-section {
    padding: 5rem 0;
}

/* Reusing .project-card-grid from awards page */
/* Refinements for this specific card style */
.project-card .card-summary {
    font-size: 0.95rem;
    color: var(--color-muted);
    line-height: 1.6;
    margin-top: 1rem;
    flex-grow: 1; /* Pushes footer to the bottom */
}
.project-card .card-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.button-text {
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}
.button-text:hover {
    text-decoration: underline;
}
.button-text .fas {
    margin-left: 0.3rem;
    transition: transform var(--transition-speed);
}
.button-text:hover .fas {
    transform: translateX(4px);
}


/* --- Pagination Controls --- */
.pagination {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
}
.pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0.5rem;
}
.pagination li a {
    display: block;
    padding: 0.75rem 1rem;
    min-width: 44px;
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background-color: var(--color-light);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    transition: background-color var(--transition-speed), color var(--transition-speed);
}
.pagination li a:hover {
    background-color: var(--color-secondary);
    border-color: var(--color-primary);
}
.pagination li a.active {
    background-color: var(--color-primary);
    color: var(--color-light);
    border-color: var(--color-primary);
    cursor: default;
}

/* ==========================================================================
   18. Page Specific: Learn Page
   ========================================================================== */

.learn-listing-section {
    padding: 5rem 0;
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

.course-card {
    background-color: var(--color-light);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.course-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
}

.course-card .card-thumbnail {
    display: block;
    position: relative;
}
.course-card .card-thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.course-card:hover .card-thumbnail img {
    transform: scale(1.05);
}

.content-type-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    color: var(--color-primary);
    background-color: var(--color-light);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.course-card .card-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.course-card .card-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}
.course-card .card-title a {
    color: var(--color-dark);
    text-decoration: none;
}
.course-card .card-title a:hover {
    color: var(--color-primary);
}

.course-card .card-subtitle {
    color: var(--color-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    flex-grow: 1; /* Pushes the button to the bottom */
    margin-bottom: 1.5rem;
}

.course-card .card-actions {
    margin-top: auto; /* Aligns button to the bottom */
}

/* ==========================================================================
   19. Page Specific: Authentication Forms (Login/Register)
   ========================================================================== */
.auth-section {
    background-color: var(--color-secondary);
    min-height: calc(100vh - var(--header-height) - 158px); /* Adjust 158px based on your footer height */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
}

.auth-form-container {
    max-width: 480px;
    width: 100%;
    background-color: var(--color-light);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
    .auth-form-container {
        padding: 3rem;
    }
}

.auth-form-container .form-header {
    text-align: center;
    margin-bottom: 2rem;
}
.auth-form-container .form-header h2 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}
.auth-form-container .form-header p {
    color: var(--color-muted);
}

.auth-form-container .bw-form .button {
    width: 100%;
    justify-content: center; /* Center icon and text */
}

.auth-form-container .bw-form .label-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.auth-form-container .bw-form .label-group label {
    margin-bottom: 0;
}
.auth-form-container .form-link {
    font-size: 0.9rem;
    font-weight: 500;
}

.auth-form-container .form-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: var(--color-muted);
}

/* ==========================================================================
   20. Page Specific: Legal Pages (Privacy/Terms)
   ========================================================================== */

.legal-page-section {
    padding: 4rem 0;
}

.legal-content-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--color-light);
    padding: 2.5rem 3rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
}

.last-updated {
    font-style: italic;
    color: var(--color-muted);
    text-align: right;
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.legal-toc {
    background-color: var(--color-secondary);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    margin-bottom: 2.5rem;
}
.legal-toc h4 {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
}
.legal-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    column-count: 1;
}
@media (min-width: 768px) {
    .legal-toc ul {
        column-count: 2;
    }
}
.legal-toc ul li {
    margin-bottom: 0.5rem;
}
.legal-toc ul a {
    text-decoration: none;
    font-weight: 500;
}
.legal-toc ul a:hover {
    text-decoration: underline;
}

.legal-content-wrapper h3 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-top: 1rem; /* Creates space for anchor link scroll */
    border-top: 1px solid var(--color-border);
}
.legal-content-wrapper h3:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.legal-content-wrapper p,
.legal-content-wrapper li {
    line-height: 1.7;
    color: #495057; /* Slightly softer than pure black */
}

.legal-content-wrapper p {
    margin-bottom: 1.25rem;
}

.legal-content-wrapper ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
}
/* ==========================================================================
   21. Page Specific: Dashboard & Profile
   ========================================================================== */

.dashboard-section {
    padding: 3rem 0;
    background-color: var(--color-secondary);
}

.dashboard-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 992px) {
    .dashboard-layout {
        grid-template-columns: 280px 1fr; /* Sidebar and main content */
    }
}

/* --- Dashboard Sidebar --- */
.dashboard-sidebar {
    background-color: var(--color-light);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    height: fit-content; /* Make it fit its content */
}
.dashboard-sidebar h4 {
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--color-muted);
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}
.dashboard-sidebar ul { list-style: none; }
.dashboard-sidebar li a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    text-decoration: none;
    color: var(--color-dark);
    font-weight: 500;
    border-radius: var(--border-radius);
    transition: background-color var(--transition-speed), color var(--transition-speed);
}
.dashboard-sidebar li a .fas {
    width: 20px;
    text-align: center;
    color: var(--color-muted);
    transition: color var(--transition-speed);
}
.dashboard-sidebar li a:hover {
    background-color: var(--color-secondary);
}
.dashboard-sidebar li a.active {
    background-color: var(--color-primary);
    color: var(--color-light);
}
.dashboard-sidebar li a.active .fas {
    color: var(--color-light);
}

/* --- Main Content Area --- */
.dashboard-main-content .profile-card {
    background-color: var(--color-light);
    border-radius: var(--border-radius);
    padding: 2rem;
    margin-bottom: 2rem;
}
.dashboard-main-content .profile-card h3 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}
.dashboard-main-content .form-actions {
    text-align: left;
    border-top: none;
    padding-top: 0;
}

/* Avatar Upload specific styles */
.avatar-group {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.avatar-upload-wrapper {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.profile-avatar-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-border);
}
/* ==========================================================================
   22. Page Specific: Project Details
   ========================================================================== */
.project-details-hero {
    background-color: var(--color-dark);
    color: var(--color-light);
    padding: 4rem 0;
}
.project-details-hero .project-title { font-size: 2.8rem; margin-bottom: 1rem; }
.project-details-hero .project-summary { font-size: 1.2rem; max-width: 800px; opacity: 0.9; }
.project-meta { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.submitter-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

.project-page-layout { padding: 4rem 0; }
.project-layout-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 992px) { .project-layout-grid { grid-template-columns: 2.5fr 1fr; } }

.project-body h3 { font-size: 1.75rem; margin-bottom: 1.5rem; }
.project-body p { line-height: 1.8; margin-bottom: 1.25rem; }

.project-media-gallery { margin-top: 3rem; }
.project-media-gallery h3 { font-size: 1.75rem; margin-bottom: 1.5rem; }
.project-media-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.project-media-gallery img { width: 100%; border-radius: var(--border-radius); }

.project-comments-section { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--color-border); }
.project-comments-section h3 { font-size: 1.75rem; margin-bottom: 1.5rem; }
.comment-form-wrapper textarea { width: 100%; min-height: 100px; }
.comment-form-wrapper .form-group { margin-bottom: 1rem; }
.comment-form-wrapper button { float: right; }

.comments-list { margin-top: 2rem; }
.comment-item { display: flex; gap: 1.5rem; margin-bottom: 2rem; }
.comment-avatar { width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0; }
.comment-author { font-weight: 600; margin-bottom: 0.25rem; }
.comment-date { font-size: 0.8rem; color: var(--color-muted); margin-left: 0.5rem; }
.comment-text { margin: 0; }

.project-sidebar .sidebar-card { background-color: var(--color-secondary); padding: 1.5rem; border-radius: var(--border-radius); margin-bottom: 1.5rem; }
.project-sidebar .sidebar-card h4 { margin: 0 0 1rem 0; font-size: 1.1rem; }
.project-sidebar { position: sticky; top: 100px; }

.project-stats-sidebar { display: flex; flex-direction: column; gap: 0.75rem; }
.project-stats-sidebar span { display: flex; align-items: center; gap: 0.75rem; }
.project-stats-sidebar .fas { color: var(--color-muted); }

.sidebar-actions { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.sidebar-actions .button { width: 100%; justify-content: center; }
.sidebar-actions .button.is-liked { background-color: var(--color-success); border-color: var(--color-success); color: white; }

.sdg-tags-list .sdg-tag { margin: 0.2rem; }

/* ==========================================================================
   23. Component: Checkbox Group
   ========================================================================== */
.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.checkbox-group input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 0.3em;
    width: 1.1em;
    height: 1.1em;
}

.checkbox-group label {
    font-weight: 400; /* Lighter weight for checkbox labels */
    font-size: 0.95rem;
    color: var(--color-muted);
}

.checkbox-group label a {
    font-weight: 500;
    text-decoration: underline;
}
/* ==========================================================================
   24. Page Specific: SDG Template
   ========================================================================== */
body {
    /* Define the variable with a fallback color */
    --sdg-color: var(--color-primary); 
}
.sdg-hero {
    background-color: var(--sdg-color);
    color: var(--color-light);
    padding: 4rem 0;
    text-align: center;
}
.sdg-icon-large {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    display: inline-block;
    line-height: 1;
}
.sdg-title {
    font-size: 2.8rem;
    font-weight: 700;
}
.sdg-subtitle {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 1rem auto 0 auto;
    opacity: 0.9;
}

.sdg-main-content {
    padding: 5rem 0;
}
.sdg-layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}
@media (min-width: 992px) {
    .sdg-layout-grid {
        grid-template-columns: 2fr 1fr;
    }
}
.sdg-content-body h3 {
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
}
.sdg-content-body p {
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.sdg-sidebar .sidebar-card {
    background-color: var(--color-secondary);
    padding: 2rem;
    border-radius: var(--border-radius);
    position: sticky;
    top: 100px;
}
.sdg-sidebar .sidebar-card h4 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
}
.sdg-sidebar .sidebar-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 2rem;
}
.sdg-sidebar .sidebar-list li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.75rem;
}
.sdg-sidebar .sidebar-list li::before {
    content: '\f14a'; /* Font Awesome check-square */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--sdg-color);
    position: absolute;
    left: 0;
}
.sdg-sidebar .button {
    width: 100%;
    justify-content: center;
}
/* ==========================================================================
   25. Page Specific: SDGs Overview
   ========================================================================== */
.sdg-overview-section {
    padding: 5rem 0;
}

.sdg-grid {
    display: grid;
    /* Create a responsive grid of squares */
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

.sdg-card {
    /* Use the CSS variable passed from the inline style */
    background-color: var(--sdg-card-color); 
    color: var(--color-light);
    aspect-ratio: 1 / 1; /* Makes the card a perfect square */
    border-radius: var(--border-radius);
    padding: 1rem;
    text-decoration: none;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-speed);
}
.sdg-card:hover {
    transform: scale(1.05);
    z-index: 10;
}
.sdg-card::before { /* Faint background icon for texture */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    transform: translate(-50%, -50%) rotate(15deg);
    background-image: var(--bg-icon); /* Will be set by icon class below */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.1;
    z-index: 0;
}

.sdg-card-icon {
    font-size: 2.5rem;
    position: relative;
    z-index: 1;
}

.sdg-card-number {
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    opacity: 0.5;
    z-index: 1;
}

.sdg-card-title {
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}

.sdg-focus-section { padding: 5rem 0; }
.focus-layout {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 3rem;
}
@media (min-width: 992px) {
    .focus-layout { grid-template-columns: 1fr 1fr; }
}
.focus-image-wrapper img {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
}
/* ==========================================================================
   26. Page Specific: Search Results
   ========================================================================== */
.search-listing-section {
    padding: 4rem 0;
}
.search-result-group {
    margin-bottom: 4rem;
}
.search-result-group .section-title-left {
    font-size: 1.75rem;
}
.result-count {
    color: var(--color-muted);
    font-weight: 400;
}

.search-result-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.search-result-list li {
    margin-bottom: 1.5rem;
}

.search-result-item {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background-color: var(--color-light);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--color-dark);
    border: 1px solid var(--color-border);
    transition: box-shadow var(--transition-speed), transform var(--transition-speed);
}
.search-result-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-sm);
}

.result-thumbnail {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
}
.result-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius);
}
@media (max-width: 576px) {
    .result-thumbnail {
        width: 80px;
        height: 80px;
    }
}

.result-title {
    font-size: 1.25rem;
    margin: 0 0 0.5rem 0;
}
.search-result-item:hover .result-title {
    color: var(--color-primary);
}

.result-summary {
    color: var(--color-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 1rem 0;
}
.result-date {
    font-size: 0.85rem;
    color: var(--color-muted);
}
/* ==========================================================================
   27. Page Specific: Train Page
   ========================================================================== */

.training-listing-section {
    padding: 5rem 0;
}

.training-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.training-card {
    background-color: var(--color-light);
    border-radius: var(--border-radius);
    padding: 2.5rem 2rem;
    text-align: center;
    border: 1px solid var(--color-border);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    display: flex;
    flex-direction: column;
}
.training-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
}

.training-card .card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background-color: var(--color-primary);
    color: var(--color-light);
    border-radius: 50%;
    font-size: 2.5rem;
    margin: 0 auto 1.5rem auto;
}

.training-card .card-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.training-card h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.training-card p {
    color: var(--color-muted);
    line-height: 1.6;
    flex-grow: 1; /* This pushes the button to the bottom */
    margin-bottom: 2rem;
}

.training-card .card-actions {
    margin-top: auto; /* Aligns button to the bottom */
}
/* ==========================================================================
   Better World Application - Main Stylesheet
   Version: 1.1.0
   ========================================================================== */

/* --- 1. Root Variables & Basic Setup --- */
:root {
    --color-primary: #007bff;
    --color-primary-dark: #0056b3;
    --color-secondary: #f8f9fa; /* Slightly off-white for better contrast */
    --color-dark: #212529;
    --color-muted: #6c757d;
    --color-light: #ffffff;
    --color-border: #dee2e6;
    --color-success: #28a745;
    --color-danger: #dc3545;

    --font-primary: 'Poppins', sans-serif;
    --header-height: 70px;
    --container-width: 1200px;
    --container-padding: 1rem;
    --border-radius: 8px;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.1);
    --transition-speed: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-dark);
    background-color: var(--color-light);
    padding-top: var(--header-height);
}

body.menu-open {
    overflow: hidden;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-speed);
}
a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

img { max-width: 100%; height: auto; display: block; }
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--container-padding); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }


/* ==========================================================================
   2. Header & Navigation (REVISED)
   ========================================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: var(--color-light);
    box-shadow: var(--shadow-sm);
    z-index: 1000;
}
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.site-brand a { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.site-logo { height: 40px; }
.site-title { font-size: 1.25rem; font-weight: 600; color: var(--color-blue); }

/* --- Desktop Navigation --- */
.main-nav { display: flex; align-items: center; }
.nav-list { display: flex; list-style: none; gap: 2rem; align-items: center; }
.nav-list a { color: var(--color-dark); font-weight: 500; text-decoration: none; position: relative; transition: color var(--transition-speed); }
.nav-list > li > a { padding: 0.5rem 0; }
.nav-list > li > a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background-color: var(--color-primary); transition: width var(--transition-speed); }
.nav-list > li > a:hover, .nav-list > li > a.active { color: var(--color-primary); }
.nav-list > li > a:hover::after, .nav-list > li > a.active::after { width: 100%; }

/* Desktop Dropdowns */
.nav-item-dropdown { position: relative; }
.dropdown-toggle .fa-angle-down { margin-left: 0.3rem; font-size: 0.8em; transition: transform var(--transition-speed); }
.dropdown-menu { position: absolute; top: 100%; left: -1rem; min-width: 220px; background-color: var(--color-light); border-radius: var(--border-radius); box-shadow: var(--shadow-md); padding: 0.5rem 0; list-style: none; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--transition-speed), transform var(--transition-speed), visibility 0s var(--transition-speed); z-index: 1001; }
.nav-item-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.nav-item-dropdown:hover .dropdown-toggle .fa-angle-down { transform: rotate(180deg); }
.dropdown-menu a { display: block; padding: 0.75rem 1.5rem; font-weight: 400; }
.dropdown-menu a::after { display: none; }

/* Header Actions: Search & Buttons */
.header-actions { display: flex; align-items: center; gap: 1rem; }
.header-search form { position: relative; }
.header-search input { border: 1px solid var(--color-border); border-radius: 20px; padding: 8px 35px 8px 15px; font-family: var(--font-primary); width: 200px; transition: width var(--transition-speed), border-color var(--transition-speed); }
.header-search input:focus { outline: none; border-color: var(--color-primary); width: 250px; }
.header-search button { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--color-muted); font-size: 1rem; padding: 5px; }

.button { padding: 0.6rem 1.2rem; border: 1px solid transparent; border-radius: var(--border-radius); font-weight: 500; cursor: pointer; text-decoration: none !important; white-space: nowrap; transition: all var(--transition-speed); }
.button-primary { background-color: var(--color-primary); color: var(--color-light); }
.button-primary:hover { background-color: var(--color-primary-dark); color: var(--color-light); }
.button-secondary { background-color: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.button-secondary:hover { background-color: var(--color-primary); color: var(--color-light); }

/* ==========================================================================
   3. Mobile Navigation (REVISED)
   ========================================================================== */
.mobile-menu-toggle { display: none; background: none; border: none; font-size: 1.5rem; color: var(--color-dark); cursor: pointer; z-index: 1002; }
.mobile-menu-toggle .icon-close { display: none; }

.mobile-menu-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 998; opacity: 0; visibility: hidden; transition: opacity var(--transition-speed), visibility 0s var(--transition-speed); }
.mobile-menu-backdrop.is-visible { opacity: 1; visibility: visible; transition-delay: 0s; }

@media (max-width: 1024px) {
    .main-nav { position: fixed; top: var(--header-height); right: 0; width: 80%; max-width: 320px; height: calc(100vh - var(--header-height)); background-color: var(--color-light); padding: 2rem; box-shadow: -5px 0 15px rgba(0,0,0,0.1); overflow-y: auto; z-index: 999; transform: translateX(100%); transition: transform var(--transition-speed); }
    .main-nav.is-open { transform: translateX(0); }
    .header-search, .header-actions .button { display: none; }
    .mobile-menu-toggle { display: block; }

    body.menu-open .mobile-menu-toggle .icon-open { display: none; }
    body.menu-open .mobile-menu-toggle .icon-close { display: block; }

    .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav-list li { width: 100%; }
    .nav-list a { display: block; width: 100%; padding: 1rem 0; font-size: 1.1rem; border-bottom: 1px solid var(--color-border); }
    .nav-list > li > a::after { display: none; }
    .nav-list > li:last-child a { border-bottom: none; }

    /* Mobile Dropdown (Accordion Style) */
    .dropdown-menu { position: static; visibility: visible; opacity: 1; transform: none; box-shadow: none; background-color: var(--color-secondary); border-radius: 0; padding: 0; margin: 0 0 0 1rem; border-left: 3px solid var(--color-primary); max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; }
    .nav-item-dropdown.is-active > .dropdown-menu { max-height: 500px; /* Large enough to fit content */ }
    .dropdown-menu li a { padding: 0.75rem 1rem; font-size: 1rem; border-bottom: 1px solid var(--color-border); }
    .dropdown-menu li:last-child a { border-bottom: none; }
    .nav-item-dropdown.is-active > a .fa-angle-down { transform: rotate(180deg); }

    /* Style Login/Register as buttons inside mobile menu */
    .nav-list li:nth-last-child(-n+2) { margin-top: 1.5rem; }
    .nav-list li:nth-last-child(-n+2) a { text-align: center; border-radius: var(--border-radius); border: 1px solid; }
    .nav-list li:nth-last-child(2) a { /* Login button */ background-color: var(--color-secondary); border-color: var(--color-primary); color: var(--color-primary); }
    .nav-list li:nth-last-child(1) a { /* Register button */ background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-light); }
}

/* --- The rest of your CSS file remains below --- */
/* ==========================================================================
   4. Page Sections & Reusable Components
   ========================================================================== */
.site-main > section { padding: 4rem 0; }
.section-title { font-size: 2.25rem; font-weight: 600; text-align: center; margin-bottom: 3rem; position: relative; padding-bottom: 1rem; }
.section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background-color: var(--color-primary); border-radius: 2px; }
.section-bg { background-color: var(--color-secondary); }
.button-large { padding: 0.8rem 1.8rem; font-size: 1.1rem; }
/* ... (and so on for every other style block you have) ... */

/* ==========================================================================
   Better World Application - Main Stylesheet
   Version: 1.2.0
   ========================================================================== */

/* --- 1. Root Variables & Basic Setup --- */
:root {
    --color-primary: #007bff;        /* A vibrant, trustworthy blue */
    --color-primary-dark: #0056b3;
    --color-secondary: #f8f9fa;      /* Slightly off-white for better contrast */
    --color-dark: #212529;           /* Main text color */
    --color-muted: #6c757d;          /* Lighter text for subtitles, etc. */
    --color-light: #ffffff;
    --color-border: #dee2e6;
    --color-success: #28a745;
    --color-danger: #dc3545;

    --font-primary: 'Poppins', sans-serif;
    --header-height: 70px;
    --container-width: 1200px;
    --container-padding: 1rem;
    --border-radius: 8px;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.1);
    --transition-speed: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-primary); font-size: 16px; line-height: 1.6; color: var(--color-dark); background-color: var(--color-light); padding-top: var(--header-height); }
body.menu-open { overflow: hidden; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-speed); }
a:hover { color: var(--color-primary-dark); text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--container-padding); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   2. Header & Navigation (FINAL)
   ========================================================================== */
.site-header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); background-color: var(--color-light); box-shadow: var(--shadow-sm); z-index: 1000; }
.header-content { display: flex; justify-content: space-between; align-items: center; height: 100%; }
.site-brand a { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.site-logo { height: 40px; }
.site-title { font-size: 1.25rem; font-weight: 600; color: var(--color-blue); }

/* --- Desktop Navigation --- */
.main-nav { display: flex; align-items: center; }
.nav-list { display: flex; list-style: none; gap: 1.5rem; align-items: center; }
.nav-list a { color: var(--color-dark); font-weight: 500; text-decoration: none; position: relative; transition: color var(--transition-speed); }
.nav-list > li > a:not(.button) { padding: 0.5rem 0.2rem; }
.nav-list > li > a:not(.button)::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background-color: var(--color-primary); transition: width var(--transition-speed); }
.nav-list > li > a:not(.button):hover, .nav-list > li > a:not(.button).active { color: var(--color-primary); }
.nav-list > li > a:not(.button):hover::after, .nav-list > li > a:not(.button).active::after { width: 100%; }

.nav-item-dropdown { position: relative; }
.dropdown-toggle .fa-angle-down { margin-left: 0.3rem; font-size: 0.8em; transition: transform var(--transition-speed); }
.dropdown-menu { position: absolute; top: 100%; left: -1rem; min-width: 220px; background-color: var(--color-light); border-radius: var(--border-radius); box-shadow: var(--shadow-md); padding: 0.5rem 0; list-style: none; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--transition-speed), transform var(--transition-speed), visibility 0s var(--transition-speed); z-index: 1001; }
.nav-item-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.nav-item-dropdown:hover .dropdown-toggle .fa-angle-down { transform: rotate(180deg); }
.dropdown-menu a { display: block; padding: 0.75rem 1.5rem; font-weight: 400; }
.dropdown-menu a::after { display: none; }
.nav-button-item { margin-left: 0.5rem; }

/* Header Actions */
.header-actions { display: flex; align-items: center; gap: 1rem; }
.header-search form { position: relative; }
.header-search input { border: 1px solid var(--color-border); border-radius: 20px; padding: 8px 35px 8px 15px; font-family: var(--font-primary); width: 180px; transition: width var(--transition-speed), border-color var(--transition-speed); }
.header-search input:focus { outline: none; border-color: var(--color-primary); width: 220px; }
.header-search button { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--color-muted); font-size: 1rem; padding: 5px; }

.button { padding: 0.5rem 1rem; border: 1px solid transparent; border-radius: var(--border-radius); font-weight: 500; cursor: pointer; text-decoration: none !important; white-space: nowrap; transition: all var(--transition-speed); display: inline-flex; align-items: center; gap: 0.5rem; }
.button-primary { background-color: var(--color-primary); color: var(--color-light); }
.button-primary:hover { background-color: var(--color-primary-dark); color: var(--color-light); }
.button-secondary { background-color: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.button-secondary:hover { background-color: var(--color-primary); color: var(--color-light); }
.button-large { padding: 0.8rem 1.8rem; font-size: 1.1rem; }

/* ==========================================================================
   3. Mobile Navigation (FINAL)
   ========================================================================== */
.mobile-menu-toggle { display: none; background: none; border: none; font-size: 1.5rem; color: var(--color-dark); cursor: pointer; z-index: 1002; }
.mobile-menu-toggle .icon-close { display: none; }
.mobile-menu-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 998; opacity: 0; visibility: hidden; transition: opacity var(--transition-speed), visibility 0s var(--transition-speed); }
.mobile-menu-backdrop.is-visible { opacity: 1; visibility: visible; transition-delay: 0s; }

@media (max-width: 1024px) {
    .main-nav { position: fixed; top: 0; right: 0; width: 85%; max-width: 340px; height: 100vh; background-color: var(--color-light); padding: 2rem; box-shadow: -5px 0 15px rgba(0,0,0,0.1); overflow-y: auto; z-index: 999; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); }
    .main-nav.is-open { transform: translateX(0); }
    .nav-button-item { display: none; }
    .header-content { gap: 1rem; }
    .site-brand { flex-grow: 1; }
    .mobile-menu-toggle { display: block; }
    body.menu-open .mobile-menu-toggle .icon-open { display: none; }
    body.menu-open .mobile-menu-toggle .icon-close { display: block; }

    .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav-list li { width: 100%; }
    .nav-list > li > a { padding: 1rem 0; font-size: 1.1rem; border-bottom: 1px solid var(--color-border); }
    
    /* Mobile Dropdown (Accordion Style) */
    .dropdown-menu { position: static; visibility: visible; opacity: 1; transform: none; box-shadow: none; background-color: var(--color-secondary); border-radius: 0; padding: 0; margin: 0 0 0 1rem; border-left: 3px solid var(--color-primary); max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; }
    .nav-item-dropdown.is-active > .dropdown-menu { max-height: 500px; /* Large enough to fit content */ }
    .dropdown-menu li a { padding: 0.75rem 1rem; font-size: 1rem; border-bottom: 1px solid var(--color-border); }
    .dropdown-menu li:last-child a { border-bottom: none; }
    .nav-item-dropdown.is-active > a .fa-angle-down { transform: rotate(180deg); }

    /* Mobile Menu Buttons (now inside the nav list) */
    .nav-list li.nav-button-item { display: block; margin-top: 1.5rem; }
    .nav-list li.nav-button-item a { text-align: center; border: 1px solid; justify-content: center; }
}


/* --- [ALL OTHER CSS SECTIONS FROM 4 to 27 GO HERE] --- */
/* Your existing styles for .site-main, .section-title, .hero-section, etc.
   will all work perfectly with this header. You don't need to change them.
   Just ensure this complete file replaces your old one.
*//* ==========================================================================
   Better World Application - Main Stylesheet
   Version: 1.2.0 (FINAL & COMPLETE)
   ========================================================================== */

/* --- 1. Root Variables & Basic Setup --- */
:root {
    --color-primary: #007bff;
    --color-primary-dark: #0056b3;
    --color-secondary: #f8f9fa;
    --color-dark: #212529;
    --color-muted: #6c757d;
    --color-light: #ffffff;
    --color-border: #dee2e6;
    --color-success: #28a745;
    --color-danger: #dc3545;
    --font-primary: 'Poppins', sans-serif;
    --header-height: 70px;
    --container-width: 1200px;
    --container-padding: 1rem;
    --border-radius: 8px;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.1);
    --transition-speed: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-primary); font-size: 16px; line-height: 1.6; color: var(--color-dark); background-color: var(--color-light); padding-top: var(--header-height); }
body.menu-open { overflow: hidden; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-speed); }
a:hover { color: var(--color-primary-dark); text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--container-padding); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   2. Header & Navigation (FINAL)
   ========================================================================== */
.site-header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); background-color: var(--color-light); box-shadow: var(--shadow-sm); z-index: 1000; }
.header-content { display: flex; justify-content: space-between; align-items: center; height: 100%; }
.site-brand a { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.site-logo { height: 40px; }
.site-title { font-size: 2.0rem; font-weight: 600; color: var(--color-blue); }
.main-nav { display: flex; align-items: center; }
.nav-list { display: flex; list-style: none; gap: 1.5rem; align-items: center; }
.nav-list a { color: var(--color-dark); font-weight: 500; text-decoration: none; position: relative; transition: color var(--transition-speed); }
.nav-list > li > a:not(.button) { padding: 0.5rem 0.2rem; }
.nav-list > li > a:not(.button)::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background-color: var(--color-primary); transition: width var(--transition-speed); }
.nav-list > li > a:not(.button):hover, .nav-list > li > a:not(.button).active { color: var(--color-primary); }
.nav-list > li > a:not(.button):hover::after, .nav-list > li > a:not(.button).active::after { width: 100%; }
.nav-item-dropdown { position: relative; }
.dropdown-toggle .fa-angle-down { margin-left: 0.3rem; font-size: 0.8em; transition: transform var(--transition-speed); }
.dropdown-menu { position: absolute; top: 100%; left: -1rem; min-width: 220px; background-color: var(--color-light); border-radius: var(--border-radius); box-shadow: var(--shadow-md); padding: 0.5rem 0; list-style: none; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--transition-speed), transform var(--transition-speed), visibility 0s var(--transition-speed); z-index: 1001; }
.nav-item-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.nav-item-dropdown:hover .dropdown-toggle .fa-angle-down { transform: rotate(180deg); }
.dropdown-menu a { display: block; padding: 0.75rem 1.5rem; font-weight: 400; }
.dropdown-menu a::after { display: none; }
.nav-button-item { margin-left: 0.5rem; }
.header-actions { display: flex; align-items: center; gap: 1rem; }
.header-search form { position: relative; }
.header-search input { border: 1px solid var(--color-border); border-radius: 20px; padding: 8px 35px 8px 15px; font-family: var(--font-primary); width: 180px; transition: width var(--transition-speed), border-color var(--transition-speed); }
.header-search input:focus { outline: none; border-color: var(--color-primary); width: 220px; }
.header-search button { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--color-muted); font-size: 1rem; padding: 5px; }

/* ==========================================================================
   3. Mobile Navigation (FINAL)
   ========================================================================== */
.mobile-menu-toggle { display: none; background: none; border: none; font-size: 1.5rem; color: var(--color-dark); cursor: pointer; z-index: 1002; }
.mobile-menu-toggle .icon-close { display: none; }
.mobile-menu-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 998; opacity: 0; visibility: hidden; transition: opacity var(--transition-speed), visibility 0s var(--transition-speed); }
.mobile-menu-backdrop.is-visible { opacity: 1; visibility: visible; transition-delay: 0s; }

@media (max-width: 1024px) {
    .main-nav { position: fixed; top: 0; right: 0; width: 85%; max-width: 340px; height: 100vh; background-color: var(--color-light); padding: 2rem; box-shadow: -5px 0 15px rgba(0,0,0,0.1); overflow-y: auto; z-index: 999; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); }
    .main-nav.is-open { transform: translateX(0); }
    .nav-button-item { display: none; }
    .header-content { gap: 1rem; }
    .site-brand { flex-grow: 1; }
    .mobile-menu-toggle { display: block; }
    body.menu-open .mobile-menu-toggle .icon-open { display: none; }
    body.menu-open .mobile-menu-toggle .icon-close { display: block; }
    .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav-list li { width: 100%; }
    .nav-list > li > a { padding: 1rem 0; font-size: 1.1rem; border-bottom: 1px solid var(--color-border); }
    .dropdown-menu { position: static; visibility: visible; opacity: 1; transform: none; box-shadow: none; background-color: #f0f8ff; border-radius: 0; padding: 0; margin: 0 0 0 1rem; border-left: 3px solid var(--color-primary); max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; }
    .nav-item-dropdown.is-active > .dropdown-menu { max-height: 500px; }
    .dropdown-menu li a { padding: 0.75rem 1rem; font-size: 1rem; border-bottom: 1px solid var(--color-border); }
    .dropdown-menu li:last-child a { border-bottom: none; }
    .nav-item-dropdown.is-active > a .fa-angle-down { transform: rotate(180deg); }
    .nav-list li.nav-button-item { display: block; margin-top: 1.5rem; }
    .nav-list li.nav-button-item a { text-align: center; border-radius: var(--border-radius); border: 1px solid; justify-content: center; }
    .nav-list .button.button-secondary { border-color: var(--color-primary); color: var(--color-primary); }
    .nav-list .button.button-primary { background-color: var(--color-primary); color: var(--color-light); }
}

/* ==========================================================================
   4. Reusable Components
   ========================================================================== */
.button { padding: 0.5rem 1rem; border: 1px solid transparent; border-radius: var(--border-radius); font-weight: 500; cursor: pointer; text-decoration: none !important; white-space: nowrap; transition: all var(--transition-speed); display: inline-flex; align-items: center; gap: 0.5rem; }
.button-primary { background-color: var(--color-primary); color: var(--color-light); }
.button-primary:hover { background-color: var(--color-primary-dark); color: var(--color-light); }
.button-secondary { background-color: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.button-secondary:hover { background-color: var(--color-primary); color: var(--color-light); }
.button-large { padding: 0.8rem 1.8rem; font-size: 1.1rem; }
.button-text { font-weight: 600; color: var(--color-primary); text-decoration: none; }
.button-text:hover { text-decoration: underline; }
.button-text .fas { margin-left: 0.3rem; transition: transform var(--transition-speed); }
.button-text:hover .fas { transform: translateX(4px); }
.site-main > section { padding: 4rem 0; }
@media (min-width: 768px) { .site-main > section { padding: 5rem 0; } }
.section-title { font-size: 2.25rem; font-weight: 600; text-align: center; margin-bottom: 3rem; position: relative; padding-bottom: 1rem; }
.section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background-color: var(--color-primary); border-radius: 2px; }
.section-title-left { text-align: left; font-size: 2rem; margin-bottom: 1.5rem; }
.section-title-left::after { content: ''; display: block; width: 60px; height: 3px; background-color: var(--color-primary); margin-top: 1rem; }
.section-header { text-align: center; margin-bottom: 3rem; }
.section-header .section-title { margin-bottom: 1rem; }
.section-header .section-intro, .section-intro { max-width: 700px; margin-left: auto; margin-right: auto; color: var(--color-muted); }
.section-bg { background-color: var(--color-secondary); }
.section-actions { text-align: center; margin-top: 3rem; }
.page-hero { background-color: var(--color-primary); color: var(--color-light); padding: 4rem 0; text-align: center; }
.page-hero-title { font-size: 2.8rem; font-weight: 700; }
.page-hero-subtitle { font-size: 1.1rem; max-width: 800px; margin: 1rem auto 0 auto; opacity: 0.9; }
.page-hero a { color: var(--color-light); font-weight: 600; text-decoration: underline; }
.alert { padding: 1rem 1.5rem; border-radius: var(--border-radius); margin-bottom: 1.5rem; border: 1px solid transparent; }
.alert-success { background-color: #d4edda; border-color: #c3e6cb; color: #155724; }
.alert-error, .alert-danger { background-color: #f8d7da; border-color: #f5c6cb; color: #721c24; }
.alert-info { background-color: #cce5ff; border-color: #b8daff; color: #004085; }
.alert ul { margin-top: 0.5rem; padding-left: 20px; }
.icon-list { list-style: none; padding: 0; margin: 2rem 0; }
.icon-list li { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; font-size: 1.05rem; }
.icon-list .fas { color: var(--color-primary); font-size: 1.2rem; margin-top: 0.2rem; }
.error-section { padding: 5rem 0; text-align: center; }
.error-section .fas { font-size: 3rem; color: var(--color-danger); margin-bottom: 1.5rem; }

/* ==========================================================================
   5. Page-Specific & Component Styles
   ========================================================================== */

/* --- Home Page --- */
.hero-section { background-color: var(--color-light); text-align: center; padding: 5rem var(--container-padding); }
.hero-title { font-size: 2.8rem; font-weight: 700; line-height: 1.2; margin-bottom: 1rem; }
.hero-title span { color: var(--color-primary); }
.hero-subtitle { font-size: 1.1rem; color: var(--color-muted); max-width: 750px; margin: 0 auto 2.5rem auto; }
.hero-actions { display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; }
@media (min-width: 768px) { .hero-title { font-size: 3.5rem; } .hero-subtitle { font-size: 1.25rem; } }
.journey-grid { display: grid; gap: 1.5rem; }
@media (min-width: 576px) { .journey-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .journey-grid { grid-template-columns: repeat(4, 1fr); } }
.journey-card { background-color: var(--color-light); border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: 2.5rem 2rem; text-align: center; box-shadow: var(--shadow-sm); transition: transform var(--transition-speed), box-shadow var(--transition-speed); opacity: 0; transform: translateY(20px); }
.journey-card.is-visible { opacity: 1; transform: translateY(0); }
.journey-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.journey-card .card-icon { display: inline-block; background-color: var(--color-primary); color: var(--color-light); height: 70px; width: 70px; line-height: 70px; border-radius: 50%; font-size: 2rem; margin-bottom: 1.5rem; transition: transform var(--transition-speed); }
.journey-card:hover .card-icon { transform: scale(1.1) rotate(5deg); }
.journey-card .card-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.75rem; }
.journey-card .card-description { font-size: 0.95rem; line-height: 1.7; color: var(--color-muted); }

/* --- Footer --- */
.site-footer { background-color: var(--color-primary); color: #044789; padding: 4rem 0 2rem 0; font-size: 0.9rem; line-height: 1.7; }
.site-footer a { color: #044789; }
.site-footer a:hover { color: var(--color-light); }
.footer-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2.5rem; padding-bottom: 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid #343a40; }
.footer-col h4 { color: var(--color-light); font-size: 1rem; font-weight: 600; margin-bottom: 1.25rem; text-transform: uppercase; letter-spacing: 0.5px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.75rem; }
.footer-brand .footer-logo img { max-width: 150px; margin-bottom: 1rem; }
.footer-tagline { font-style: italic; color: var(--color-light); margin-bottom: 1.5rem; }
.footer-social { display: flex; gap: 1rem; }
.footer-social a { font-size: 1.2rem; transition: transform var(--transition-speed), color var(--transition-speed); }
.footer-social a:hover { transform: translateY(-3px); color: var(--color-primary); }
.footer-bottom { text-align: center; font-size: 0.85rem; }
.footer-bottom p { margin: 0.25rem 0; }
.copyright { color: var(--color-light); }

/* --- SDG Components --- */
.sdg-tag { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.3em 0.8em; border-radius: 20px; font-size: 0.85rem; font-weight: 500; color: var(--color-light); white-space: nowrap; }
.sdg-tag .fa, .sdg-tag .fas { font-size: 0.9em; }
.sdg-tag.sdg-1 { background-color: #E5243B; } .sdg-tag.sdg-2 { background-color: #DDA63A; } .sdg-tag.sdg-3 { background-color: #4C9F38; } .sdg-tag.sdg-4 { background-color: #C5192D; } .sdg-tag.sdg-5 { background-color: #FF3A21; } .sdg-tag.sdg-6 { background-color: #26BDE2; } .sdg-tag.sdg-7 { background-color: #FCC30B; } .sdg-tag.sdg-8 { background-color: #A21942; } .sdg-tag.sdg-9 { background-color: #FD6925; } .sdg-tag.sdg-10 { background-color: #DD1367; } .sdg-tag.sdg-11 { background-color: #FD9D24; } .sdg-tag.sdg-12 { background-color: #BF8B2E; } .sdg-tag.sdg-13 { background-color: #3F7E44; } .sdg-tag.sdg-14 { background-color: #0A97D9; } .sdg-tag.sdg-15 { background-color: #56C02B; } .sdg-tag.sdg-16 { background-color: #00689D; } .sdg-tag.sdg-17 { background-color: #19486A; }
.sdg-overview-section .sdg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; }
.sdg-overview-section .sdg-card { background-color: var(--sdg-card-color, var(--color-primary)); color: var(--color-light); aspect-ratio: 1 / 1; border-radius: var(--border-radius); padding: 1rem; text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; position: relative; overflow: hidden; transition: transform var(--transition-speed); }
.sdg-overview-section .sdg-card:hover { transform: scale(1.05); z-index: 10; }
.sdg-overview-section .sdg-card-icon { font-size: 2.5rem; }
.sdg-overview-section .sdg-card-number { position: absolute; top: 0.5rem; right: 1rem; font-size: 1.5rem; font-weight: 700; opacity: 0.5; }
.sdg-overview-section .sdg-card-title { font-weight: 600; font-size: 0.9rem; line-height: 1.3; }

/* --- Forms & Form Components --- */
.bw-form { background-color: var(--color-light); }
.form-section { background-color: var(--color-secondary); padding: 4rem 0; }
.form-group { margin-bottom: 1.5rem; }
.bw-form label { display: block; font-weight: 600; margin-bottom: 0.5rem; }
.bw-form input[type="text"], .bw-form input[type="email"], .bw-form input[type="password"], .bw-form input[type="url"], .bw-form input[type="date"], .bw-form textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--color-border); border-radius: var(--border-radius); font-family: var(--font-primary); font-size: 1rem; transition: border-color var(--transition-speed), box-shadow var(--transition-speed); }
.bw-form input:focus, .bw-form textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); }
.bw-form textarea { min-height: 120px; resize: vertical; }
.bw-form small, .char-count { display: block; margin-top: 0.5rem; color: var(--color-muted); font-size: 0.85rem; }
.char-count { text-align: right; }
.sdg-checkbox-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sdg-checkbox-item input[type="checkbox"] { display: none; }
.sdg-checkbox-item .sdg-tag { cursor: pointer; opacity: 0.6; transition: all var(--transition-speed); border: 2px solid transparent; }
.sdg-checkbox-item input[type="checkbox"]:checked + .sdg-tag { opacity: 1; box-shadow: 0 0 0 2px var(--color-light), 0 0 0 4px currentColor; }
.file-input-hidden { display: none; }
.file-drop-zone { border: 2px dashed var(--color-border); border-radius: var(--border-radius); padding: 2rem; text-align: center; cursor: pointer; transition: background-color var(--transition-speed), border-color var(--transition-speed); }
.file-drop-zone:hover { border-color: var(--color-primary); background-color: #f0f8ff; }
.file-drop-zone.is-dragover { border-color: var(--color-success); background-color: #e9f7ec; }
.drop-zone-prompt .fas { font-size: 3rem; color: var(--color-muted); margin-bottom: 1rem; }
.file-preview-list { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.file-preview-item { position: relative; border: 1px solid var(--color-border); border-radius: var(--border-radius); overflow: hidden; background-color: var(--color-secondary); }
.preview-image { width: 100%; height: 120px; object-fit: cover; display: block; }
.preview-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 120px; background-color: #e9ecef; font-size: 3rem; color: var(--color-muted); }
.file-info { padding: 0.5rem; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.remove-file-btn { position: absolute; top: 5px; right: 5px; background-color: rgba(0,0,0,0.6); color: white; border: none; border-radius: 50%; width: 24px; height: 24px; line-height: 24px; text-align: center; cursor: pointer; font-size: 0.9rem; }

/* --- About Page --- */
.about-story-section, .mission-vision-section, .team-section { padding: 5rem 0; }
.story-grid, .mission-vision-grid, .options-layout, .focus-layout { display: grid; grid-template-columns: 1fr; align-items: center; gap: 3rem; }
@media (min-width: 992px) { .story-grid, .options-layout, .focus-layout { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .mission-vision-grid { grid-template-columns: repeat(2, 1fr); } }
.story-image-wrapper img, .options-image-wrapper img, .focus-image-wrapper img { border-radius: var(--border-radius); box-shadow: var(--shadow-md); }
.mission-vision-card { background-color: var(--color-light); padding: 2.5rem; border-radius: var(--border-radius); text-align: center; border: 1px solid var(--color-border); }
.mission-vision-card .card-icon { font-size: 2.5rem; color: var(--color-primary); margin-bottom: 1rem; }
.mission-vision-card h3 { font-size: 1.5rem; margin-bottom: 1rem; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; }
@media (min-width: 1200px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }
.team-member-card { background: var(--color-light); border-radius: var(--border-radius); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform var(--transition-speed), box-shadow var(--transition-speed); display: flex; flex-direction: column; }
.team-member-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.team-member-card .card-image img { width: 100%; height: 300px; object-fit: cover; object-position: center top; }
.team-member-card .card-content { padding: 1.5rem; text-align: center; flex-grow: 1; display: flex; flex-direction: column; }
.member-name { font-size: 1.25rem; font-weight: 600; margin: 0; }
.member-role { color: var(--color-primary); font-weight: 500; margin-bottom: 1rem; }
.member-bio { font-size: 0.9rem; color: var(--color-muted); margin-bottom: 1.5rem; flex-grow: 1; }
.member-social { display: flex; justify-content: center; gap: 1.5rem; }
.member-social a { font-size: 1.2rem; color: var(--color-muted); }
.member-social a:hover { color: var(--color-primary); }

/* --- Various Card Grids (Awards, Challenges, Learn, Impact, Train) --- */
.project-card-grid, .challenge-grid, .course-grid, .training-grid, .info-grid { display: grid; gap: 2rem; }
.project-card-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.challenge-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.course-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.training-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.info-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin-top: 3rem; }
.project-card, .challenge-card, .course-card { background: var(--color-light); border-radius: var(--border-radius); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--transition-speed), box-shadow var(--transition-speed); }
.project-card:hover, .challenge-card:hover, .course-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.project-card .card-thumbnail, .challenge-card .card-thumbnail, .course-card .card-thumbnail { display: block; position: relative; }
.project-card .card-thumbnail img { height: 220px; }
.challenge-card .card-thumbnail img { height: 240px; }
.course-card .card-thumbnail img { height: 200px; }
.project-card .card-thumbnail img, .challenge-card .card-thumbnail img, .course-card .card-thumbnail img { width: 100%; object-fit: cover; transition: transform 0.4s ease; }
.project-card:hover .card-thumbnail img, .challenge-card:hover .card-thumbnail img, .course-card:hover .card-thumbnail img { transform: scale(1.05); }
.project-card .card-content, .challenge-card .card-content, .course-card .card-content { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; }
.project-card .card-title, .challenge-card .card-title, .course-card .card-title { font-size: 1.25rem; margin-bottom: 0.5rem; }
.project-card .card-title a, .challenge-card .card-title a, .course-card .card-title a { color: var(--color-dark); text-decoration: none; }
.project-card .card-title a:hover, .challenge-card .card-title a:hover, .course-card .card-title a:hover { color: var(--color-primary); }
.status-badge { position: absolute; top: 1rem; left: 1rem; padding: 0.4rem 0.8rem; border-radius: 20px; color: var(--color-light); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.status-badge.status-active { background-color: var(--color-success); }
.status-badge.status-upcoming { background-color: var(--color-primary); }
.content-type-badge { position: absolute; top: 1rem; left: 1rem; padding: 0.4rem 0.8rem; border-radius: 20px; color: var(--color-primary); background-color: var(--color-light); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.card-subtitle, .project-card .card-meta, .card-summary { color: var(--color-muted); font-size: 0.95rem; flex-grow: 1; margin-bottom: 1.5rem; }
.card-actions { margin-top: auto; }
.award-tag { display: inline-block; align-self: flex-start; background-color: #fff3cd; color: #856404; padding: 0.4rem 0.8rem; border-radius: var(--border-radius); font-weight: 600; font-size: 0.85rem; }
.award-tag .fa-award { margin-right: 0.5rem; }
.project-stats { display: flex; gap: 1.5rem; color: var(--color-muted); }
.project-stats .fas { margin-right: 0.4rem; }
.project-card .card-footer { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; }

/* --- Other Pages (Legal, Auth, Dashboard, etc.) --- */
/* (This section consolidates styles for multiple pages to reduce repetition) */
.auth-section, .dashboard-section, .legal-page-section, .contact-section { padding: 3rem 0; background-color: var(--color-secondary); }
.auth-section { min-height: calc(100vh - var(--header-height) - 158px); display: flex; align-items: center; justify-content: center; }
.auth-form-container { max-width: 480px; width: 100%; background-color: var(--color-light); padding: 2.5rem; border-radius: var(--border-radius); box-shadow: var(--shadow-md); }
@media (min-width: 768px) { .auth-form-container { padding: 3rem; } }
.auth-form-container .form-header { text-align: center; margin-bottom: 2rem; }
.auth-form-container .form-header h2 { font-size: 1.8rem; margin-bottom: 0.5rem; }
.auth-form-container .form-header p { color: var(--color-muted); }
.auth-form-container .button { width: 100%; justify-content: center; }
.label-group { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.label-group label { margin-bottom: 0; }
.form-link { font-size: 0.9rem; font-weight: 500; }
.form-footer { text-align: center; margin-top: 1.5rem; font-size: 0.95rem; color: var(--color-muted); }
.checkbox-group { display: flex; align-items: flex-start; gap: 0.75rem; }
.checkbox-group input[type="checkbox"] { flex-shrink: 0; margin-top: 0.3em; width: 1.1em; height: 1.1em; }
.checkbox-group label { font-weight: 400; font-size: 0.95rem; color: var(--color-muted); }
.checkbox-group label a { font-weight: 500; text-decoration: underline; }
.legal-content-wrapper { max-width: 800px; margin: 0 auto; background-color: var(--color-light); padding: 2.5rem 3rem; border-radius: var(--border-radius); border: 1px solid var(--color-border); }
.last-updated { font-style: italic; color: var(--color-muted); text-align: right; margin-bottom: 2rem; font-size: 0.9rem; }
.legal-toc { background-color: var(--color-secondary); padding: 1.5rem; border-radius: var(--border-radius); margin-bottom: 2.5rem; }
.legal-toc h4 { margin: 0 0 1rem 0; font-size: 1.1rem; }
.legal-toc ul { list-style: none; column-count: 1; }
@media (min-width: 768px) { .legal-toc ul { column-count: 2; } }
.legal-toc ul li { margin-bottom: 0.5rem; }
.legal-toc ul a { text-decoration: none; font-weight: 500; }
.legal-content-wrapper h3 { font-size: 1.5rem; margin-top: 2.5rem; margin-bottom: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.legal-content-wrapper h3:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.legal-content-wrapper p, .legal-content-wrapper li { line-height: 1.7; color: #495057; }
.legal-content-wrapper p { margin-bottom: 1.25rem; }
.legal-content-wrapper ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1.25rem; }
.dashboard-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 992px) { .dashboard-layout { grid-template-columns: 280px 1fr; } }
.dashboard-sidebar { background-color: var(--color-light); border-radius: var(--border-radius); padding: 1.5rem; height: fit-content; }
.dashboard-sidebar h4 { font-size: 1rem; text-transform: uppercase; color: var(--color-muted); letter-spacing: 0.5px; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
.dashboard-sidebar ul { list-style: none; }
.dashboard-sidebar li a { display: flex; align-items: center; gap: 1rem; padding: 0.8rem 1rem; text-decoration: none; color: var(--color-dark); font-weight: 500; border-radius: var(--border-radius); transition: background-color var(--transition-speed), color var(--transition-speed); }
.dashboard-sidebar li a .fas { width: 20px; text-align: center; color: var(--color-muted); transition: color var(--transition-speed); }
.dashboard-sidebar li a:hover { background-color: var(--color-secondary); }
.dashboard-sidebar li a.active { background-color: var(--color-primary); color: var(--color-light); }
.dashboard-sidebar li a.active .fas { color: var(--color-light); }
.profile-card { background-color: var(--color-light); border-radius: var(--border-radius); padding: 2rem; margin-bottom: 2rem; }
.profile-card h3 { font-size: 1.5rem; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
.dashboard-main-content .form-actions { text-align: left; border-top: none; padding-top: 0; }
.avatar-group { display: flex; align-items: center; gap: 1.5rem; }
.avatar-upload-wrapper { display: flex; align-items: center; gap: 1.5rem; }
.profile-avatar-preview { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid var(--color-border); }

/* --- Final Page-Specific Styles --- */
/* (This section contains styles for pages not easily grouped above) */
body:has(.course-page-layout) .site-main { padding: 0; }
body:has(.course-page-layout) .site-footer { display: none; }
.course-page-layout { display: grid; grid-template-columns: 1fr; min-height: calc(100vh - var(--header-height)); }
@media (min-width: 1024px) { .course-page-layout { grid-template-columns: 1fr 380px; } }
.course-main-content { padding: 3rem 4rem; background-color: var(--color-light); }
.course-sidebar { background-color: var(--color-secondary); border-left: 1px solid var(--color-border); }
.sidebar-card { position: sticky; top: var(--header-height); height: calc(100vh - var(--header-height)); display: flex; flex-direction: column; }
.sidebar-image { width: 100%; height: 220px; object-fit: cover; flex-shrink: 0; }
.sidebar-content { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; }
.sidebar-content h4 { font-size: 1.2rem; margin-bottom: 1rem; }
.status-badge.status-not_started { background-color: #e9ecef; }
.status-badge.status-in_progress { background-color: #fff3cd; color: #856404; }
.status-badge.status-completed { background-color: #d4edda; color: #155724; }
.progress-bar-container { background-color: #e9ecef; border-radius: 20px; height: 12px; overflow: hidden; margin-top: 0.5rem; }
.progress-bar { background-color: var(--color-success); height: 100%; border-radius: 20px; }
.progress-text { font-size: 0.85rem; color: var(--color-muted); margin-top: 0.25rem; display: block; }
.sidebar-actions .button { width: 100%; text-align: center; justify-content: center; }
.sidebar-meta { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.sidebar-meta strong { display: block; margin-bottom: 0.75rem; font-size: 0.9rem; }
.pagination { margin-top: 3rem; display: flex; justify-content: center; }
.pagination ul { list-style: none; display: flex; gap: 0.5rem; }
.pagination li a { display: block; padding: 0.75rem 1rem; min-width: 44px; text-align: center; border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: var(--color-light); color: var(--color-primary); text-decoration: none; font-weight: 500; transition: background-color var(--transition-speed), color var(--transition-speed); }
.pagination li a:hover { background-color: var(--color-secondary); border-color: var(--color-primary); }
.pagination li a.active { background-color: var(--color-primary); color: var(--color-light); border-color: var(--color-primary); cursor: default; }
.how-it-works-timeline-section { padding: 5rem 0; }
.timeline-container { position: relative; max-width: 900px; margin: 0 auto; }
.timeline-container::after { content: ''; position: absolute; width: 4px; background-color: var(--color-border); top: 0; bottom: 0; left: 50%; margin-left: -2px; }
.timeline-item { padding: 10px 40px; position: relative; width: 50%; }
.timeline-icon { position: absolute; width: 60px; height: 60px; right: -30px; background-color: var(--color-primary); color: var(--color-light); border: 4px solid var(--color-secondary); top: 25px; border-radius: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.timeline-step { position: absolute; top: 0; font-size: 0.8rem; font-weight: 600; color: var(--color-muted); background-color: var(--color-secondary); padding: 0.2rem 0.6rem; border-radius: 20px; }
.timeline-item:nth-child(odd) { left: 0; }
.timeline-item:nth-child(odd) .timeline-step { right: -80px; }
.timeline-item:nth-child(even) { left: 50%; }
.timeline-item:nth-child(even) .timeline-icon { left: -30px; }
.timeline-item:nth-child(even) .timeline-step { left: -80px; }
.timeline-content { padding: 20px 30px; background-color: var(--color-light); border: 1px solid var(--color-border); position: relative; border-radius: var(--border-radius); }
.timeline-content h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.timeline-content p { color: var(--color-muted); }
@media screen and (max-width: 900px) { .timeline-container::after { left: 31px; } .timeline-item { width: 100%; padding-left: 70px; padding-right: 25px; } .timeline-item:nth-child(odd), .timeline-item:nth-child(even) { left: 0; } .timeline-icon, .timeline-item:nth-child(even) .timeline-icon { left: 1px; } .timeline-step, .timeline-item:nth-child(odd) .timeline-step, .timeline-item:nth-child(even) .timeline-step { right: auto; left: 70px; } }
.key-points-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 2rem; text-align: left; }
.key-point { display: flex; align-items: center; gap: 1rem; background-color: var(--color-light); padding: 1.25rem; border-radius: var(--border-radius); border-left: 4px solid var(--color-primary); }
.key-point .fas { color: var(--color-success); font-size: 1.2rem; }
.search-listing-section { padding: 4rem 0; }
.search-result-group { margin-bottom: 4rem; }
.search-result-group .section-title-left { font-size: 1.75rem; }
.result-count { color: var(--color-muted); font-weight: 400; }
.search-result-list { list-style: none; }
.search-result-list li { margin-bottom: 1.5rem; }
.search-result-item { display: flex; gap: 1.5rem; padding: 1.5rem; background-color: var(--color-light); border-radius: var(--border-radius); text-decoration: none; color: var(--color-dark); border: 1px solid var(--color-border); transition: box-shadow var(--transition-speed), transform var(--transition-speed); }
.search-result-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.result-thumbnail { flex-shrink: 0; width: 120px; height: 120px; }
.result-thumbnail img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--border-radius); }
@media (max-width: 576px) { .result-thumbnail { width: 80px; height: 80px; } }
.result-title { font-size: 1.25rem; margin: 0 0 0.5rem 0; }
.search-result-item:hover .result-title { color: var(--color-primary); }
.result-summary { color: var(--color-muted); font-size: 0.95rem; line-height: 1.6; margin: 0 0 1rem 0; }
.result-date { font-size: 0.85rem; color: var(--color-muted); }
.training-listing-section { padding: 5rem 0; }
.training-card { background-color: var(--color-light); border-radius: var(--border-radius); padding: 2.5rem 2rem; text-align: center; border: 1px solid var(--color-border); transition: transform var(--transition-speed), box-shadow var(--transition-speed); display: flex; flex-direction: column; }
.training-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.training-card .card-icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; background-color: var(--color-primary); color: var(--color-light); border-radius: 50%; font-size: 2.5rem; margin: 0 auto 1.5rem auto; }
.training-card .card-content { flex-grow: 1; display: flex; flex-direction: column; }
.training-card h3 { font-size: 1.3rem; margin-bottom: 1rem; }
.training-card p { color: var(--color-muted); line-height: 1.6; flex-grow: 1; margin-bottom: 2rem; }
.training-card .card-actions { margin-top: auto; }
body { --sdg-color: var(--color-primary); }
.sdg-hero { background-color: var(--sdg-color); color: var(--color-light); padding: 4rem 0; text-align: center; }
.sdg-icon-large { font-size: 4rem; margin-bottom: 1.5rem; display: inline-block; line-height: 1; }
.sdg-title { font-size: 2.8rem; font-weight: 700; }
.sdg-subtitle { font-size: 1.2rem; max-width: 800px; margin: 1rem auto 0 auto; opacity: 0.9; }
.sdg-main-content { padding: 5rem 0; }
.sdg-layout-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 992px) { .sdg-layout-grid { grid-template-columns: 2fr 1fr; } }
.sdg-content-body h3 { font-size: 1.75rem; margin-bottom: 1.5rem; }
.sdg-content-body p { line-height: 1.7; margin-bottom: 1.25rem; }
.sdg-sidebar .sidebar-card { background-color: var(--color-secondary); padding: 2rem; border-radius: var(--border-radius); position: sticky; top: 100px; }
.sdg-sidebar .sidebar-card h4 { font-size: 1.3rem; margin-bottom: 1rem; }
.sdg-sidebar .sidebar-list { list-style: none; padding-left: 0; margin-bottom: 2rem; }
.sdg-sidebar .sidebar-list li { padding-left: 1.5rem; position: relative; margin-bottom: 0.75rem; }
.sdg-sidebar .sidebar-list li::before { content: '\f14a'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--sdg-color); position: absolute; left: 0; }
.sdg-sidebar .button { width: 100%; justify-content: center; }
.project-details-hero { background-color: var(--color-dark); color: var(--color-light); padding: 4rem 0; }
.project-details-hero .project-title { font-size: 2.8rem; margin-bottom: 1rem; }
.project-details-hero .project-summary { font-size: 1.2rem; max-width: 800px; opacity: 0.9; }
.project-meta { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.submitter-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.project-page-layout { padding: 4rem 0; }
.project-layout-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 992px) { .project-layout-grid { grid-template-columns: 2.5fr 1fr; } }
.project-body h3 { font-size: 1.75rem; margin-bottom: 1.5rem; }
.project-body p { line-height: 1.8; margin-bottom: 1.25rem; }
.project-media-gallery { margin-top: 3rem; }
.project-media-gallery h3 { font-size: 1.75rem; margin-bottom: 1.5rem; }
.project-media-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.project-media-gallery img { width: 100%; border-radius: var(--border-radius); }
.project-comments-section { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--color-border); }
.project-comments-section h3 { font-size: 1.75rem; margin-bottom: 1.5rem; }
.comment-form-wrapper textarea { width: 100%; min-height: 100px; }
.comment-form-wrapper .form-group { margin-bottom: 1rem; }
.comment-form-wrapper button { float: right; }
.comments-list { margin-top: 2rem; }
.comment-item { display: flex; gap: 1.5rem; margin-bottom: 2rem; }
.comment-avatar { width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0; }
.comment-author { font-weight: 600; margin-bottom: 0.25rem; }
.comment-date { font-size: 0.8rem; color: var(--color-muted); margin-left: 0.5rem; }
.comment-text { margin: 0; }
.project-sidebar .sidebar-card { background-color: var(--color-secondary); padding: 1.5rem; border-radius: var(--border-radius); margin-bottom: 1.5rem; }
.project-sidebar .sidebar-card h4 { margin: 0 0 1rem 0; font-size: 1.1rem; }
.project-sidebar { position: sticky; top: 100px; }
.project-stats-sidebar { display: flex; flex-direction: column; gap: 0.75rem; }
.project-stats-sidebar span { display: flex; align-items: center; gap: 0.75rem; }
.project-stats-sidebar .fas { color: var(--color-muted); }
.sidebar-actions .button { width: 100%; justify-content: center; }
.sidebar-actions .button.is-liked { background-color: var(--color-success); border-color: var(--color-success); color: white; }
.sdg-tags-list .sdg-tag { margin: 0.2rem; }
.cta-section { background-color: var(--color-dark); color: var(--color-light); padding: 4rem 0; text-align: center; }
.cta-section h3 { font-size: 2rem; font-weight: 600; }
.cta-section p { margin-bottom: 2rem; opacity: 0.9; }

/* ==========================================================================
   28. Page Specific: Dashboard Overview
   ========================================================================== */
.dashboard-header {
    background-color: var(--color-light);
    border-radius: var(--border-radius);
    padding: 2rem;
    margin-bottom: 2rem;
}
.dashboard-header h1 {
    font-size: 2rem;
    margin: 0 0 0.5rem 0;
}
.dashboard-header p {
    margin: 0;
    color: var(--color-muted);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.stat-card {
    background-color: var(--color-light);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    text-align: center;
    text-decoration: none;
    color: var(--color-dark);
    border: 1px solid var(--color-border);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-sm);
}
.stat-icon {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}
.stat-value {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1;
}
.stat-label {
    color: var(--color-muted);
    font-weight: 500;
}

.activity-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 1024px) {
    .activity-layout { grid-template-columns: 1fr 1fr; }
}
.activity-card {
    background-color: var(--color-light);
    border-radius: var(--border-radius);
    padding: 2rem;
}
.activity-card h4 {
    font-size: 1.25rem;
    margin: 0 0 1.5rem 0;
}
.activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.activity-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-secondary);
}
.activity-list li:last-child { border-bottom: none; }

.activity-list .list-icon {
    font-size: 1.5rem;
    color: var(--color-muted);
    width: 30px;
    text-align: center;
}
.activity-details a {
    font-weight: 500;
    text-decoration: none;
    color: var(--color-dark);
}
.activity-details a:hover { color: var(--color-primary); }
.activity-details small { display: block; color: var(--color-muted); font-size: 0.85rem; }
/* ==========================================================================
   29. Page Specific: My Awards
   ========================================================================== */
.awards-list-container .alert h4 {
    margin-bottom: 0.5rem;
}
.awards-list-container .alert p {
    margin-bottom: 1.5rem;
}

.awards-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.award-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background-color: var(--color-light);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
}

.award-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background-color: var(--color-primary-dark);
    color: var(--color-light);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}
.award-card:nth-child(odd) .award-icon {
    background-color: var(--color-primary);
}

.award-content {
    flex-grow: 1;
}
.award-content h4 {
    font-size: 1.2rem;
    margin: 0 0 0.25rem 0;
}
.award-date {
    font-size: 0.9rem;
    color: var(--color-muted);
    margin: 0 0 0.5rem 0;
}
.related-item-link {
    font-weight: 500;
    text-decoration: none;
    font-size: 0.9rem;
}
.related-item-link i {
    margin-right: 0.25rem;
}

.award-actions {
    margin-left: auto; /* Pushes button to the right */
}
/* ==========================================================================
   30. Page Specific: My Courses
   ========================================================================== */
.learning-list-container .alert h4 {
    margin-bottom: 0.5rem;
}
.learning-list-container .alert p {
    margin-bottom: 1.5rem;
}

.learning-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.learning-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background-color: var(--color-light);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
}

.learning-card .card-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background-color: var(--color-secondary);
    color: var(--color-primary);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.learning-card .card-main-content {
    flex-grow: 1;
}

.learning-card .card-header {
    margin-bottom: 0.75rem;
}

.learning-card .card-header .content-type-badge {
    float: right;
    margin-left: 1rem;
}

.learning-card .card-header h4 {
    font-size: 1.2rem;
    margin: 0;
}
.learning-card .card-header h4 a {
    text-decoration: none;
    color: var(--color-dark);
}
.learning-card .card-header h4 a:hover {
    color: var(--color-primary);
}

.card-progress-details {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.9rem;
}
.card-progress-details .status-text {
    margin: 0;
    white-space: nowrap;
}
.card-progress-details .progress-bar-container {
    flex-grow: 1;
    height: 8px;
    background-color: #e9ecef;
    border-radius: 20px;
}
.card-progress-details .progress-bar {
    height: 100%;
    background-color: var(--color-success);
    border-radius: 20px;
}
.card-progress-details .progress-text {
    font-weight: 500;
}

.learning-card .card-actions {
    margin-left: auto;
}

/* ==========================================================================
   31. Page Specific: My Projects
   ========================================================================== */
.dashboard-header .header-actions {
    margin-top: 1rem;
}

.projects-table-container {
    background-color: var(--color-light);
    border-radius: var(--border-radius);
    padding: 0.5rem; /* Padding for the container */
    overflow-x: auto; /* Allows horizontal scrolling on small screens */
}

.projects-table {
    width: 100%;
    border-collapse: collapse;
}

.projects-table th, 
.projects-table td {
    padding: 1rem;
    text-align: left;
    vertical-align: middle;
}

.projects-table thead {
    border-bottom: 2px solid var(--color-border);
}
.projects-table th {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.projects-table tbody tr {
    border-bottom: 1px solid var(--color-secondary);
}
.projects-table tbody tr:last-child {
    border-bottom: none;
}
.projects-table tbody tr:hover {
    background-color: var(--color-secondary);
}

.project-title-link {
    font-weight: 600;
    color: var(--color-dark);
    text-decoration: none;
}
.project-title-link:hover {
    color: var(--color-primary);
}

.projects-table .project-stats {
    display: flex;
    gap: 1rem;
    color: var(--color-muted);
}
.projects-table .project-stats .fas {
    margin-right: 0.3rem;
}

/* Status badge for 'rejected' */
.status-badge.status-rejected {
    background-color: var(--color-danger);
    color: var(--color-light);
}

.action-buttons {
    display: flex;
    gap: 0.5rem;
}
.action-buttons .button-small {
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
}
.delete-form {
    display: inline-block;
    margin: 0;
}

/* ==========================================================================
   32. Page Specific: My Training
   ========================================================================== */
.training-list-container .alert h4 {
    margin-bottom: 0.5rem;
}
.training-list-container .alert p {
    margin-bottom: 1.5rem;
}

.training-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.training-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background-color: var(--color-light);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
}

.training-card .card-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background-color: var(--color-secondary);
    color: var(--color-primary);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.training-card .card-content {
    flex-grow: 1;
}

.training-card .card-header {
    margin-bottom: 0.75rem;
}
.training-card .card-header .content-type-badge {
    float: right;
    margin-left: 1rem;
    background-color: var(--color-primary);
    color: var(--color-light);
}

.training-card .card-header h4 {
    font-size: 1.2rem;
    margin: 0;
}
.training-card .card-header h4 a {
    text-decoration: none;
    color: var(--color-dark);
}
.training-card .card-header h4 a:hover {
    color: var(--color-primary);
}

.training-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: 0.9rem;
    color: var(--color-muted);
    margin: 0;
}
.training-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.training-card .card-actions {
    margin-left: auto;
}
/* --- Course Progress Sidebar Elements --- */
.status-badge {
    padding: 0.2em 0.6em;
    font-size: 0.85em;
    font-weight: 700;
    border-radius: 20px;
    color: #fff;
    text-transform: capitalize;
}
.status-badge.status-not_started { background-color: #6c757d; }
.status-badge.status-in_progress { background-color: #007bff; }
.status-badge.status-completed { background-color: #28a745; }

.progress-bar-container {
    background-color: #e9ecef;
    border-radius: 0.25rem;
    height: 1rem;
    overflow: hidden;
    margin-top: 0.5rem;
}
.progress-bar {
    background-color: #007bff;
    height: 100%;
    transition: width 0.4s ease;
    text-align: center;
    color: white;
    line-height: 1rem;
    font-size: 0.75rem;
}
.progress-text {
    font-size: 0.8rem;
    color: #6c757d;
    display: block;
    text-align: right;
    margin-top: 0.25rem;
}
.hidden {
    display: none;
}
/* For message areas used in AJAX forms */
.message-area.success {
    color: #155724;
    background-color: #d4edda;
    padding: 10px;
    border-radius: 4px;
}
.message-area.error {
    color: #721c24;
    background-color: #f8d7da;
    padding: 10px;
    border-radius: 4px;
}