/* Hero 365 - Global Design Tokens */
:root {
    /* Color Palette */
    --color-primary: #062d70;       /* Trust & Safety Blue */
    --color-primary-hover: #004494;
    --color-secondary: #E53935;     /* Action & Emergency Red */
    --color-secondary-hover: #C62828;
    
    /* Neutral Palette (Glassy & Modern UI) */
    --color-dark: #1E293B;          /* Slate 800 for high-contrast text */
    --color-light: #F8FAFC;         /* Light background */
    --color-white: #FFFFFF;
    --color-muted: #64748B;         /* Accessible grey for secondary text */
    
    /* Glassmorphism Accents */
    --glass-bg: rgba(225, 225, 225, 0.91);
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-shadow: rgba(0, 87, 184, 0.08);

    /* Typography Hierarchy (Responsive Scales) */
    --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --fs-sm: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
    --fs-base: clamp(1rem, 0.95rem + 0.4vw, 1.125rem);      /* Global body font size */
    --fs-md: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);      /* h4 / Subheadings */
    --fs-lg: clamp(1.5rem, 1.35rem + 0.8vw, 2rem);         /* h3 */
    --fs-xl: clamp(2rem, 1.75rem + 1.2vw, 2.75rem);        /* h2 */
    --fs-display: clamp(2.5rem, 2.1rem + 2vw, 4rem);       /* h1 / Hero Title */

    /* Typography Weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Transitions & UI Smoothness */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --radius-smooth: 12px;
}

/* Core Structural Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    line-height: 1.6;
    color: var(--color-dark);
    background-color: var(--color-light);
    -webkit-font-smoothing: antialiased;
}

/* Typography Scale Enforcement */
h1, .h1-display {
    font-size: var(--fs-display);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h2 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    line-height: 1.3;
}

h3 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
}

h4 {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
}

p, li {
    color: var(--color-dark);
}
a{
    text-decoration: none;
}
.text-muted-custom {
    color: var(--color-muted);
}

/* Hero Theme Specific Buttons */
.btn-hero-blue {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--fw-medium);
    border: none;
    transition: var(--transition-smooth);
}

.btn-hero-blue:hover, .btn-hero-blue:focus {
    background-color: var(--color-primary-hover);
    color: var(--color-white);
    transform: translateY(-2px);
}

.btn-hero-red {
    background-color: var(--color-secondary);
    color: var(--color-white);
    font-weight: var(--fw-medium);
    border: none;
    transition: var(--transition-smooth);
}

.btn-hero-red:hover, .btn-hero-red:focus {
    background-color: var(--color-secondary-hover);
    color: var(--color-white);
    transform: translateY(-2px);
}

/* Modern Glassmorphism Card Effect */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px 0 var(--glass-shadow);
    border-radius: var(--radius-smooth);
    transition: var(--transition-smooth);
}

.glass-panel:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px 0 rgba(0, 87, 184, 0.12);
}


/*========== 
NAVBAR CSS 
===========*/

/* 1. Top Utility Info Row Custom Configurations */
.top-utility-bar {
    background-color: #001A33; /* Darker navy block to separate top links from page canvas */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.utility-right-contact a {
    transition: var(--transition-smooth);
    opacity: 0.85;
}

.utility-right-contact a:hover {
    opacity: 1;
    color: var(--color-secondary) !important;
}

.utility-pipe {
    opacity: 0.25;
}

/* ==========================================================
   1. ROOT & BASE STYLES
   ========================================================== */

/* Navbar Container & Logo */
.navbar {
    background-color: var(--color-white) !important;
}

.site-logo {
    width: 140px;
}

/* Base Nav Links */
.navbar-nav .nav-link {
    color: var(--color-dark) !important;
    font-size: var(--fs-xs);
    padding: 0.5rem 1rem !important;
    position: relative;
    transition: var(--transition-smooth);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--color-secondary) !important;
}

/* Mobile Toggler Reset */
.navbar-toggler:focus {
    box-shadow: none !important;
}

/* Base Dropdown Styling */
.dropdown-menu {
    border-radius: 0.5rem;
        box-shadow: 0 30px 80px -40px color-mix(in oklab, var(--color-primary) 30%, transparent)!important;
}

.dropdown-item {
    font-size: var(--fs-xs);
    color: var(--color-dark);
    padding: 0.5rem 1rem;
    transition: var(--transition-smooth);
}

.dropdown-item:hover, 
.dropdown-item:focus {
    background-color: rgba(220, 53, 69, 0.08); /* Soft red hover highlight */
    color: var(--color-secondary) !important;
}

/* Search Trigger & Search Box Focus Rings */
.btn-search-trigger {
    color: var(--color-dark);
    transition: var(--transition-smooth);
    line-height: 1;
}

.btn-search-trigger:hover {
    color: var(--color-secondary) !important;
    transform: scale(1.08);
}

#navbarSearchDropdown .form-control:focus {
    border-color: #ced4da;
}

#navbarSearchDropdown .input-group:focus-within {
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.15);
    border-radius: 0.375rem;
}


/* ==========================================================
   2. DESKTOP STYLES (Screen width >= 1200px)
   ========================================================== */
@media (min-width: 1200px) {
    .navbar-nav .nav-link {
        padding: 0.25rem 0.5rem !important;
    }

    /* Underline Animation (Excludes dropdown toggles so Bootstrap caret arrows do not break) */
    .navbar-nav .nav-link:not(.dropdown-toggle)::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: -2px;
        left: 50%;
        background-color: var(--color-secondary);
        transition: var(--transition-smooth);
        transform: translateX(-50%);
    }

    .navbar-nav .nav-link:not(.dropdown-toggle):hover::after,
    .navbar-nav .nav-link:not(.dropdown-toggle).active::after {
        width: 80%;
    }

    /* Desktop Hover Trigger Setup */
    .navbar-nav .dropdown {
        position: relative;
    }

    /* Invisible hover bridge (prevents menu from closing when moving cursor across the gap) */
    .navbar-nav .dropdown::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 10px;
    }

    .navbar-nav .dropdown:hover > .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .navbar-nav .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
        margin-top: 8px !important;
    }

    /* Mega Dropdown Full-Width Positioning */
    .navbar-nav .dropdown.position-static {
        position: static !important;
    }

    .mega-dropdown-menu {
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 0 0 0.75rem 0.75rem;
    }
}


/* ==========================================================
   3. MOBILE & OFFCANVAS STYLES (Screen width < 1200px)
   ========================================================== */
@media (max-width: 1199.98px) {
    /* Slide-in Drawer Width */
    .offcanvas-start {
        width: 280px;
    }
    
    .navbar-nav .nav-link {
        font-size: 1rem;
        padding: 0.75rem 1rem !important;
    }

    /* Mobile Dropdown Nested Presentation */
    .dropdown-menu {
        background-color: #f8f9fa; /* Slightly darker background for visual hierarchy */
        box-shadow: none !important;
        border: none;
        padding-left: 0.5rem;
        margin-top: 0.25rem !important;
    }

    .mega-dropdown-menu .row > div {
        margin-bottom: 1rem;
    }

    /* Offcanvas Button Full Width on Mobile */
    .offcanvas-body .btn-hero-red {
        width: 100%;
    }
}

@media (max-width:456px) {
    .site-logo {
        width: 115px;
    }
}
/*=============== 
HERO SECTION CSS 
===============*/
/* .hero-section {
    background-image: url('../images/banner.jpg');
    background-size: cover;
    background-position: center center; 
    background-repeat: no-repeat;
    transition: background-position 0.3s ease;
    min-height: calc(100vh - 120px);
}

@media (max-width: 991.98px) {
    .hero-section {
        background-position: center; 
    }
}

@media (max-width: 575.98px) {
    .hero-section {
        background-position: center; 
    }
}

.text-navy {
    color: var(--color-primary);
}

.text-red {
    color: var(--color-secondary);
}

.hero-title {
    font-size: clamp(2.2rem, 4vw, 3.8rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.hero-description {
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    max-width: 480px;
}

.btn-red-action {
    background-color: var(--color-secondary);
    color: #ffffff !important;
    border: 2px solid var(--color-secondary);
    border-radius: 6px;
    transition: all 0.25s ease;
    font-size: var(--fs-xs);
}

.btn-red-action:hover {
    background-color: #c62828;
    border-color: #c62828;
    transform: translateY(-2px);
}

.btn-outline-blue {
    background: transparent;
    color: var(--color-primary) !important;
    border: 2px solid var(--color-primary);
    border-radius: 6px;
    transition: all 0.25s ease;
}

.btn-outline-blue:hover {
    background-color: var(--color-primary);
    color: #ffffff !important;
    transform: translateY(-2px);
}

.hero-img-col {
    min-height: 450px;
}

.hero-bg-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center left;
    z-index: 1;
}

@media (min-width: 992px) {
    .hero-bg-img {
        mask-image: linear-gradient(108deg, transparent 12%, #000 24%);
        -webkit-mask-image: linear-gradient(108deg, transparent 25%, #000 24%);
    }
} */

/* 1. Hero Section Setup */
.hero-section {
    min-height: 540px;
    background-color: #001226;
}

.hero-section-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
    background-size: cover;
    background-position: center right;
    z-index: 0;
}
.hero-title {
    font-size: clamp(2.2rem, 3vw, 3.8rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.hero-section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(115deg, #001226 35%, rgba(0, 18, 38, 0.85) 50%, transparent 100%);
    z-index: 1;
}

@media (max-width: 991.98px) {
    .hero-section{
        min-height: auto;
    }
    .hero-section-bg {
        width: 100%;
        background-position: center;
    }
    .hero-section-overlay {
        background: rgba(0, 18, 38, 0.88);
    }
}


/* Dark Blue Stats Floating Panel Block */
.stats-floating-card {
    position: absolute;
    top: 100px;
    right: 5%;
    width: 320px;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 52, 120, 0.25);
    z-index: 3;
}

.stat-icon-wrapper {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
}

/* Trust Bar / Logo Spacing Utilities */
.trust-title {
    letter-spacing: 0.05em;
    line-height: 1.4;
    display: inline-block;
}

.brand-logo-grid .brand-logo {
    height: clamp(30px, 4vw, 35px);
    width: auto;
    object-fit: contain;
    opacity: 0.85;
    filter: grayscale(20%);
    transition: all 0.2s ease;
}

.brand-logo-grid .brand-logo:hover {
    opacity: 1;
    filter: grayscale(0%);
}

/* Mobile Responsiveness Fine-tuning */
@media (max-width: 991.98px) {
    .hero-img-col {
        min-height: 400px;
    }
    .stats-floating-card {
        position: relative;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        margin: 0 auto;
    }
}


/*=============== 
CARD SECTION CSS 
===============*/

.tracking-wider {
    letter-spacing: 0.08em;
}

.section-title {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    color: var(--color-primary);
}

/* Card Container Styles */
.pillar-card {
    background: var(--color-white);
    border-radius: 12px !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 3px solid var(--color-primary) !important;
}

/* Card Hover Animation Box-Shadow Shift */
.pillar-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(10, 25, 47, 0.08) !important;
    border-bottom: 3px solid var(--color-secondary) !important;
}

/* Pill-Circle Graphic Container Setup */
.icon-circle {
    width: 90px;
    height: 90px;
    background-color: #F1F5F9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.25s ease;
}

.pillar-card:hover .icon-circle {
    background-color: #E2E8F0;
}

.pillar-card .icon-circle i{
    color: var(--color-primary);
}

/* Text Element Styling Rules Inside Cards */
.pillar-heading {
    font-size: 1.1rem;
    letter-spacing: 0.03em;
}

.heading-line {
    width: 24px;
    height: 2px;
}

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

/* List Checkmark Alignment rules */
.pillar-list li {
    font-size: var(--fs-xs);
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: start;
}

.pillar-list li i {
    font-size: 0.95rem;
    margin-top: 1px;
}

/* Call-to-Action Link Sliding Arrow Animation */
.pillar-link {
    font-size: var(--fs-sm);
    transition: color 0.2s ease;
    color: var(--color-primary);
}

.pillar-link i {
    transition: transform 0.2s ease;
    display: inline-block;
    color: var(--color-primary);
}

.pillar-card:hover .pillar-link {
    color: var(--color-secondary); /* Darker variant for hover state */
}

.pillar-card:hover .pillar-link i {
    transform: translateX(4px);
}


/*==================== 
TIMELINE SECTION CSS 
=====================*/
/* Container Box */
.timeline-card-wrapper {
    background-color: var(--color-white);
    border-radius: var(--radius-smooth);
    border-color: rgba(0, 0, 0, 0.06) !important;
}

/* Step Blocks */
.timeline-step {
    flex: 1;
    min-width: 200px;
}

/* Circular Icon Styling */
.timeline-icon-box {
    width: 65px;
    height: 65px;
    background-color: #EDF2F7; /* Soft aesthetic light blue-grey background */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.timeline-step:hover .timeline-icon-box {
    transform: scale(1.05);
    background-color: #E2E8F0;
}

/* Fine-tuning Typographic Scale within constraints */
.small-heading {
    font-size: var(--fs-sm);
    letter-spacing: 0.05em;
}

.font-sm {
    font-size: var(--fs-xs) !important;
    line-height: 1.4;
    max-width: 180px;
}

/* Mini Heart Overlay Position on Final Icon */
.heart-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 0.75rem;
    background: #EDF2F7;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Arrow Vector Elements color adjustment */
.timeline-arrow i,
.timeline-arrow-mobile i {
    color: var(--color-primary) !important; /* Uses Trust Blue for pathways */
    opacity: 0.7;
}

/* Mobile Constraint Adjustments */
@media (max-width: 991.98px) {
    .timeline-step {
        width: 100%;
        max-width: 320px;
        justify-content: flex-start;
    }
    .font-sm {
        max-width: 100%;
    }
}



/*========================= 
TRAINING CARD SECTION CSS 
==========================*/

/* Custom Red Accent Underline Line Decoration */
.section-heading-decor::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35px;
    height: 3px;
    background-color: var(--color-secondary);
}

/* Program Card Styling Rules */
.program-card {
    background-color: var(--color-white);
    border-radius: var(--radius-smooth) !important;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.program-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(30, 41, 59, 0.08) !important;
}

/* Image Wrapper Scale and Masking */
.program-img-wrapper {
    width: 100%;
    height: 140px;
    overflow: hidden;
    background-color: #f1f5f9;
}

.program-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-smooth);
}

.program-card:hover .program-img {
    transform: scale(1.05);
}

.program-card-title {
    font-size: var(--fs-base);
    letter-spacing: 0.02em;
}

/* Dynamic Call-To-Action Text Links */
.program-link {
    font-size: var(--fs-xs);
    transition: var(--transition-smooth);
}

.program-link i {
    transition: var(--transition-smooth);
    display: inline-block;
}

.program-card:hover .program-link {
    color: var(--color-primary-hover) !important;
}

.program-card:hover .program-link i {
    transform: translateX(4px);
}

/* Dark Navy Sidebar Box panel styling */
.why-choose-sidebar {
    background-color: #003366; /* Deep navy tone directly referencing image */
    border-radius: var(--radius-smooth);
    box-shadow: 0 10px 25px rgba(0, 51, 102, 0.15);
}

.sidebar-title {
    font-size: var(--fs-base);
}

/* Sidebar Custom Checklist items */
.feature-list-items li i {
    font-size: 1.05rem;
}

.feature-list-items span {
    color: var(--color-light);
}

/* Red Button Reset overrides */
.btn-red-action {
    background-color: var(--color-secondary);
    color: var(--color-white) !important;
    border: none;
    border-radius: 6px;
    transition: var(--transition-smooth);
}

.btn-red-action:hover {
    background-color: var(--color-secondary-hover);
    transform: translateY(-2px);
}

/* Custom Responsive Screen Scale Overrides */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Prevents layout overflow rows on small laptop landscapes */
    .program-card-title {
        font-size: 0.95rem;
    }
    .why-choose-sidebar {
        padding: 1.5rem !important;
    }
}



/*==================
 IMPACT SECTION CSS 
 =================*/

.tracking-wide {
    letter-spacing: 0.03em;
}

.fs-7 {
    font-size: 0.85rem;
}

.font-base-height {
    line-height: 1.5;
    max-width: 320px;
}

@media (max-width: 991.98px) {
    .font-base-height {
        max-width: 100%;
    }
}


/* Image Steps Cards System */
.impact-step-card {
    background-color: #f8fafc;
    aspect-ratio: 3 / 3;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: var(--transition-smooth);
}

.impact-step-card .step-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-smooth);
}

/* Bottom Navy Text Overlays */
.step-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #002D62; /* Solid dark blue context background matching your image */
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    letter-spacing: 0.02em;
    z-index: 2;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Action Hover Effect */
.impact-step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 45, 98, 0.12);
}

.impact-step-card:hover .step-img {
    transform: scale(1.04);
}

/* Responsive Connecting Chevron Paths */
.step-chevron i {
    font-weight: 900;
    animation: pulseChevron 2s infinite ease-in-out;
}

@keyframes pulseChevron {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* Responsive Scaling Overrides for Tablets/Mobile */
@media (max-width: 767.98px) {
    .impact-step-card {
        max-width: 280px;
        margin: 0 auto;
    }
    .step-badge {
        font-size: 0.85rem;
    }
}

/*======================= 
TESTIMONIAL SECTION CSS 
========================*/

/* Custom Red Heading Accent Line */
.section-heading-decor::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 3px;
    background-color: var(--color-secondary);
}

/* Testimonial Card Custom CSS Rules */
.testimonial-card {
    background-color: var(--color-white);
    border-radius: var(--radius-smooth) !important;
    min-height: 260px;
    transition: var(--transition-smooth);
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(30, 41, 59, 0.06) !important;
}

/* Avatar Image Tuning Override for Owl Carousel Default Behavior */
.testimonial-slider .owl-item .author-avatar {
    width: 48px !important;
    height: 48px !important;
    object-fit: cover;
    display: inline-block;
}

/* Customizing Owl Carousel Dots to fit project aesthetic */
.testimonial-slider .owl-dots {
    margin-top: 20px !important;
}

.testimonial-slider .owl-theme .owl-dots .owl-dot span {
    background: #CBD5E1 !important;
    width: 8px;
    height: 8px;
    transition: var(--transition-smooth);
}

.testimonial-slider .owl-theme .owl-dots .owl-dot.active span {
    background: var(--color-primary) !important;
    width: 24px;
    border-radius: 4px;
}

/* Dark Navy Image Sidebar CTA */
.donate-cta-sidebar {
    background-image: url('../images/donate.jpg'); /* Replace with your background asset file path */
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-smooth);
    box-shadow: 0 10px 25px rgba(10, 25, 47, 0.1);
}

.sidebar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 26, 51, 0.92) 0%, rgba(0, 45, 98, 0.95) 100%);
    z-index: 1;
}

/* Specialized White Button Override */
.btn-donate-white {
    background-color: var(--color-white);
    color: #002D62 !important; /* Matches branding baseline dark navy text */
    border: none;
    border-radius: 6px;
    transition: var(--transition-smooth);
}

.btn-donate-white:hover {
    background-color: #F8FAFC;
    transform: translateY(-2px);
}

/* Responsive Structural Tweak */
@media (max-width: 991.98px) {
    .donate-cta-sidebar {
        min-height: 250px;
    }
}



/*========== 
IMPACT SECTION CSS 
===========*/

/* Section Background Base */
.impact-section {
    background-color: #001226; /* Dark Navy matches the banner style */
}

/* Left Image Column Height & Overlay */
.impact-image-col {
    min-height: 400px;
}

@media (min-width: 992px) {
    .impact-image-col {
        min-height: 520px;
    }
}

.impact-img {
    height: 100%;
    min-height: 100%;
    object-fit: cover;
}

/* Smooth Gradient Overlay fading image into the dark navy background */
.impact-img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 18, 38, 0.2) 0%, rgba(0, 18, 38, 0.85) 80%, #001226 100%);
}

@media (max-width: 991.98px) {
    .impact-img-overlay {
        background: linear-gradient(180deg, rgba(0, 18, 38, 0.2) 0%, #001226 100%);
    }
}

/* Red Accent Line below Title */
.title-underline-red {
    width: 40px;
    height: 4px;
    background-color: var(--color-secondary, #e63946);
    border-radius: 2px;
}

/* Stats Grid Grid Lines */
.impact-stats-grid .stat-box {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

@media (min-width: 576px) {
    .border-end-sm {
        border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
    }
    .border-bottom-sm-0 {
        border-bottom: 0 !important;
    }
}

/* Impact Report Button Styling */
.btn-impact-report {
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    border-color: rgba(255, 255, 255, 0.4);
    transition: var(--transition-smooth, all 0.3s ease);
}

.btn-impact-report:hover {
    background-color: var(--color-secondary, #e63946);
    border-color: var(--color-secondary, #e63946);
    color: #ffffff !important;
    transform: translateY(-2px);
}

/*==================
IMPACT SECTION CSS 
===================*/

.impact-section {
    background-color: #001226; /* Dark Navy fallback */
}

/* Background Image Layer */
.impact-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: left center;
    z-index: 0;
}

/* Dark Gradient Overlay for text readability */
.impact-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 18, 38, 0.4) 0%, rgba(0, 18, 38, 0.92) 50%, #001226 100%);
    z-index: 1;
}

@media (max-width: 991.98px) {
    .impact-bg-overlay {
        background: rgba(0, 18, 38, 0.88); /* Uniform dark overlay on smaller screens */
    }
}

/* Red Accent Line below Title */
.title-underline-red {
    width: 40px;
    height: 4px;
    background-color: var(--color-secondary, #e63946);
    border-radius: 2px;
}

/* Grid Border lines */
.impact-stats-grid .stat-box {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

@media (min-width: 768px) {
    .border-end-md-only {
        border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
    }
    .border-end-md-none {
        border-right: 0 !important;
    }
    .border-bottom-md-0 {
        border-bottom: 0 !important;
    }
}

/* Button Hover State */
.btn-impact-report {
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    border-color: rgba(255, 255, 255, 0.4);
    transition: var(--transition-smooth, all 0.3s ease);
}

.btn-impact-report:hover {
    background-color: var(--color-secondary, #e63946);
    border-color: var(--color-secondary, #e63946);
    color: #ffffff !important;
    transform: translateY(-2px);
}


/*======================= 
OUR PARTNER  SECTION CSS 
========================*/

/* Color Maps to synchronize with the Global Sheet */
.text-navy { color: var(--color-dark); }

/* Centered Header Underline Decor Line */
.partners-section .section-heading-decor::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 3px;
    background-color: var(--color-secondary);
}

/* Infinite Slider Ticker Container Box */
.logo-ticker-container {
    width: 100%;
    white-space: nowrap;
    padding: 20px 0;
}

/* Blur/Fade Mask Overlays for premium edge blending */
.ticker-fade-left, .ticker-fade-right {
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}
.ticker-fade-left {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}
.ticker-fade-right {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

/* The flex-track hosting sliding nodes */
.logo-ticker-track {
    display: inline-flex;
    align-items: center;
    width: max-content;
    /* Adjust '30s' here to make it crawl faster or slower */
    animation: infiniteLogoScroll 30s linear infinite;
}

/* Individual slide blocks */
.ticker-slide {
    padding: 0 30px; /* Spacing between distinct partner logos */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Partner Logo Elements Constraints */
.partner-logo {
    height: clamp(34px, 4.5vw, 35px);
    width: auto;
    object-fit: contain;
    /* opacity: 0.8;
    filter: grayscale(15%); */
    transition: var(--transition-smooth);
}

/* Interaction Hover highlights logo true colors */
.partner-logo:hover {
    /* opacity: 1;
    filter: grayscale(0%); */
    transform: scale(1.03);
}

/* Pause the scrolling animation when a user interacts or hovers over a logo */
.logo-ticker-container:hover .logo-ticker-track {
    animation-play-state: paused;
}

/* Infinite Scrolling Keyframes Transform Rules */
@keyframes infiniteLogoScroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        /* Translates precisely half the layout structure back smoothly */
        transform: translate3d(-50%, 0, 0);
    }
}

/* Mobile Adjustments for smoother handling on small phones */
@media (max-width: 767.98px) {
    .ticker-slide {
        padding: 0 25px; /* Brings logo assets slightly closer on small displays */
    }
    .logo-ticker-track {
        animation-duration: 20s; /* Moves slightly faster on small devices for better viewport cycles */
    }
}


/*=================
FOOTER SECTION CSS 
==================*/

/* Main Corporate Deep Navy Canvas Panel Wrapper */
.main-site-footer {
    background-color: #002244; /* Premium brand deep navy palette baseline directly from mockups */
    border-top: 4px solid var(--color-primary);
}

.footer-logo {
    letter-spacing: -0.01em;
}

.footer-tagline {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
}

.footer-col-heading {
    letter-spacing: 0.05em;
    position: relative;
}

/* Navigational List Transition Configurations */
.footer-nav-links li a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: var(--transition-smooth);
    display: inline-block;
}

.footer-nav-links li a:hover {
    color: var(--color-white);
    transform: translateX(4px);
}

/* Rounded Profile Social Elements Config */
.social-circle-btn {
    width: 34px;
    height: 34px;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.95rem;
    transition: var(--transition-smooth);
}

.social-circle-btn:hover {
    background-color: var(--color-white);
    color: #002244;
    transform: translateY(-2px);
}

/* Dynamic Vertical Separator Border Gridlines */
@media (min-width: 768px) {
    .column-border-left {
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* Contact Module Specific Rules */
.contact-info-items i {
    opacity: 0.85;
}

.contact-info-items span {
    color: var(--color-white);
}

/* Newsletter Custom Inner Form Control Setup */
.newsletter-input-group .form-control::placeholder {
    color: #94a3b8;
    font-size: 0.875rem;
}

.newsletter-input-group .form-control:focus {
    background-color: transparent;
}

/* Specialized Subscribe Action Button Overrides */
.btn-red-subscribe {
    background-color: var(--color-secondary);
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    transition: var(--transition-smooth);
}

.btn-red-subscribe:hover {
    background-color: var(--color-secondary-hover);
}

/* Responsive UI Breakpoint Tweaks */
@media (max-width: 1199.98px) {
    /* Handles large display-grid adjustments for tablet layouts */
    .column-border-left {
        border-left: none;
        padding-left: calc(var(--bs-gutter-x) * .5) !important;
    }
}



/*=============================
SOLUTION / HEALTHCARE PAGE CSS 
===============================*/

/* Font size utilities */
.fs-7 { font-size: 0.85rem; }
.fs-8 { font-size: 0.75rem; }

/* Custom 5-column grid for Desktop viewports */
@media (min-width: 992px) {
    .col-lg-2-4 {
        flex: 0 0 auto;
        width: 20%;
    }
}

/* Color re-mapping */
.text-navy { color: var(--color-dark, #001226) !important; }
.text-red { color: var(--color-secondary, #e63946) !important; }

/* Custom Button Styles */
.btn-outline-navy {
    border: 2px solid var(--color-dark, #001226);
    color: var(--color-dark, #001226);
    transition: var(--transition-smooth, all 0.3s ease);
}

.btn-outline-navy:hover {
    background-color: var(--color-dark, #001226);
    color: #ffffff !important;
}

/* Solution Card Icons */
.solution-icon-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.solution-icon-wrapper.red { background-color: rgba(230, 57, 70, 0.1); color: #e63946; }
.solution-icon-wrapper.navy { background-color: rgba(0, 18, 38, 0.1); color: #001226; }
.solution-icon-wrapper.purple { background-color: rgba(111, 66, 193, 0.1); color: #6f42c1; }
.solution-icon-wrapper.orange { background-color: rgba(253, 126, 20, 0.1); color: #fd7e14; }
.solution-icon-wrapper.teal { background-color: rgba(32, 201, 151, 0.1); color: #20c997; }

.solution-card, .program-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.solution-card:hover, .program-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

/* Approach Section Icons */
.approach-icon {
    width: 40px;
    height: 40px;
    background-color: rgba(0, 18, 38, 0.05);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Program Card Image height */
.program-img {
    height: 180px;
    object-fit: cover;
}

/* Red Accent Line below Section Titles */
.title-underline-red {
    width: 40px;
    height: 3px;
    background-color: var(--color-secondary, #e63946);
    border-radius: 2px;
}

/* CTA Footer Section */
.cta-banner {
    background: linear-gradient(135deg, #001226 0%, #a81c24 100%);
}

.cta-heart-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}


/*========== 
ABOUT US PAGE STYLES 
===========*/

.text-navy { color: var(--color-dark, #001A33) !important; }
.text-red { color: var(--color-secondary, #E63946) !important; }
.fs-7 { font-size: 0.85rem; }
.fs-8 { font-size: 0.75rem; }
.extra-small { font-size: 0.7rem; line-height: 1.35; }

/* 1. Hero Section Setup & Responsive Background Shifting */
.about-us-hero {
    min-height: 520px;
    background-color: #ffffff;
}

.hero-bg-overlay-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background-size: cover;
    background-position: center right;
    z-index: 0;
}

.hero-bg-gradient-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #ffffff 40%, rgba(255, 255, 255, 0.75) 45%, transparent 100%);
    z-index: 1;
}

/* Tablet screen image adjustment */
@media (max-width: 991.98px) {
    .hero-bg-overlay-img {
        width: 100%;
        background-position: 25% center;
    }
    .hero-bg-gradient-mask {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%);
    }
}

/* Mobile screen image adjustment */
@media (max-width: 575.98px) {
    .hero-bg-overlay-img {
        background-position: left center;
    }
}

/* 2. Purpose Cards */
.purpose-card {
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.purpose-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06) !important;
}

.purpose-icon-box {
    width: 45px;
    height: 45px;
    background-color: rgba(0, 26, 51, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3. Timeline Component */
.timeline-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #001A33;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.timeline-icon-box.active {
    background-color: var(--color-secondary, #E63946);
}

/* Connecting Line on Desktop viewports */
@media (min-width: 992px) {
    .timeline-row::before {
        content: '';
        position: absolute;
        top: 50px;
        left: 10%;
        width: 80%;
        height: 2px;
        background-color: #e2e8f0;
        z-index: 1;
    }
}

/* 4. Leadership Section */
.leader-img {
    width: 150px;
    object-fit: cover;
}

.leader-card {
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease;
}

.leader-card:hover {
    transform: translateY(-4px);
}

.btn-outline-navy {
    border: 1px solid var(--color-dark, #001A33);
    color: var(--color-dark, #001A33);
    transition: all 0.3s ease;
}

.btn-outline-navy:hover {
    background-color: var(--color-dark, #001A33);
    color: #ffffff !important;
}

.title-underline-red {
    width: 35px;
    height: 3px;
    background-color: var(--color-secondary, #E63946);
    border-radius: 2px;
}


/*========== 
IMPACT PAGE STYLES 
===========*/

.bg-navy-dark { background-color: #001226 !important; }

/* 5-Column Grid Layout for Desktop */
@media (min-width: 992px) {
    .col-lg-2-4 {
        flex: 0 0 auto;
        width: 20%;
    }
}

/* 1. Hero Section Setup */
.impact-hero {
    min-height: 540px;
    background-color: #001226;
}

.impact-hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
    background-size: cover;
    background-position: center right;
    z-index: 0;
}

.impact-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #001226 45%, rgba(0, 18, 38, 0.85) 50%, transparent 100%);
    z-index: 1;
}

@media (max-width: 991.98px) {
    .impact-hero{
        min-height: auto;
    }
    .impact-hero-bg {
        width: 100%;
        background-position: center;
    }
    .impact-hero-overlay {
        background: rgba(0, 18, 38, 0.88);
    }
}

/* 2. Stats Bar Borders */
@media (min-width: 768px) {
    .border-start-md {
        border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
    }
}

/* 3. Story Cards */
.story-img {
    height: 200px;
    object-fit: cover;
}

.story-quote-badge {
    bottom: -15px;
    left: 20px;
    width: 36px;
    height: 36px;
    box-shadow: 0 4px 10px rgba(230, 57, 70, 0.3);
}

.story-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.story-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

/* 4. SDG Boxes */
.sdg-box {
    min-height: 140px;
    transition: transform 0.3s ease;
}

.sdg-box:hover {
    transform: translateY(-3px);
}

/* 5. Initiative Cards */
.initiative-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(0, 18, 38, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.initiative-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.initiative-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
}

/* Custom Buttons */
.btn-outline-navy {
    border: 1px solid var(--color-dark, #001226);
    color: var(--color-dark, #001226);
    transition: all 0.3s ease;
}

.btn-outline-navy:hover {
    background-color: var(--color-dark, #001226);
    color: #ffffff !important;
}


/*========== 
RESOURCES PAGE STYLES 
===========*/

.text-purple { color: #6f42c1 !important; }
.text-teal { color: #20c997 !important; }
.fs-9 { font-size: 0.65rem; }

/* 1. Hero Section Setup */
.resource-hero {
    min-height: 540px;
    background-color: #001226;
}

.resource-hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
    background-size: cover;
    background-position: center right;
    z-index: 0;
}

.resource-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #001226 45%, rgba(0, 18, 38, 0.85) 50%, transparent 100%);
    z-index: 1;
}

@media (max-width: 991.98px) {
    .resource-hero{
        min-height: auto;
    }
    .resource-hero-bg {
        width: 100%;
        background-position: center;
    }
    .resource-hero-overlay {
        background: rgba(0, 18, 38, 0.88);
    }
}


/* Section Title Underline */
.title-underline-red {
    width: 35px;
    height: 3px;
    background-color: var(--color-secondary, #e63946);
    border-radius: 2px;
}

/* Category Cards */
.category-card {
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
}

/* Feature Cards Images */
.resource-img {
    height: 170px;
    object-fit: cover;
}

.resource-img-wide {
    height: 190px;
    object-fit: cover;
}

.resource-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.resource-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

/* Custom Badges */
.bg-purple { background-color: #6f42c1; color: #ffffff; }

.badge-light-red { background-color: rgba(230, 57, 70, 0.1); }
.badge-light-navy { background-color: rgba(0, 18, 38, 0.1); }
.badge-light-purple { background-color: rgba(111, 66, 193, 0.1); }
.badge-light-teal { background-color: rgba(32, 201, 151, 0.1); }

/* Newsletter Form Button */
.btn-red {
    background-color: var(--color-secondary, #e63946);
    color: #ffffff;
    border: none;
    transition: background-color 0.3s ease;
}

.btn-red:hover {
    background-color: #c82333;
    color: #ffffff;
}

/* Popular Resources List */
.pop-thumb {
    width: 150px;
    height: 130px;
    object-fit: cover;
}

.pop-resource-item {
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pop-resource-item:hover {
    transform: translateX(4px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06) !important;
}

/* Bottom CTA Banner with Overlay */
.share-bg-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
    background-size: cover;
    background-position: center right;
    z-index: 0;
}

.share-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #001226 50%, rgba(0, 18, 38, 0.8) 75%, transparent 100%);
    z-index: 1;
}

@media (max-width: 767.98px) {
    .share-bg-img {
        width: 100%;
        background-position: center;
    }
    .share-bg-overlay {
        background: rgba(0, 18, 38, 0.88);
    }
}


/*========== 
CONTACT PAGE STYLES 
===========*/

.bg-navy-card { background-color: #001833 !important; }

/* Global Red Button */
.btn-red {
    background-color: var(--color-secondary, #e63946);
    color: #ffffff;
    border: none;
    transition: background-color 0.3s ease;
}

.btn-red:hover {
    background-color: #c82333;
    color: #ffffff;
}

/* Outline Navy Button */
.btn-outline-navy {
    border: 1px solid var(--color-dark, #001226);
    color: var(--color-dark, #001226);
    transition: all 0.3s ease;
}

.btn-outline-navy:hover {
    background-color: var(--color-dark, #001226);
    color: #ffffff !important;
}

/* Hero Section Custom Styles */
.bg-white-10 {
    background-color: rgba(255, 255, 255, 0.06);
}

.border-white-10 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.backdrop-blur {
    backdrop-filter: blur(10px);
}

.hero-graphic-box {
    transition: transform 0.3s ease;
}

.hero-graphic-box:hover {
    transform: translateY(-5px);
}

/* Contact Info Boxes */
.contact-icon-box {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Map Image Styling */
.map-image {
    /* max-height: 320px; */
    object-fit: contain;
}

.bg-light-subtle{
  background: #f4f4f499!important;
}

/* Stats Cards */
.stat-card {
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
}

/* Partner Banner Circle Icon */
.partner-icon-circle {
    width: 54px;
    height: 54px;
}

/* Section Title Underline */
.title-underline-red {
    width: 35px;
    height: 3px;
    background-color: var(--color-secondary, #e63946);
    border-radius: 2px;
}

/* Custom Accordion Styling */
.custom-faq-accordion .accordion-button:not(.collapsed) {
    color: var(--color-secondary, #e63946);
    background-color: transparent;
    box-shadow: none;
}

.custom-faq-accordion .accordion-button:focus {
    box-shadow: none;
}

/* Chat Icon Box */
.chat-icon-box {
    width: 48px;
    height: 48px;
}


/*========== 
COMMUNITY PAGE STYLES 
===========*/

.title-underline-red {
    width: 35px;
    height: 3px;
    background-color: var(--color-secondary, #e63946);
    border-radius: 2px;
}

/* Hero Section */
.community-hero {
    min-height: 520px;
    background-color: #001226;
}

.community-hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
    background-size: cover;
    background-position: center right;
    z-index: 0;
}

.community-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(115deg, #001226 45%, rgba(0, 18, 38, 0.85) 30%, transparent 100%);
    z-index: 1;
}

@media (max-width: 991.98px) {
    .community-hero{
        min-height: auto;
    }
    .community-hero-bg {
        width: 100%;
        background-position: center;
    }
    .community-hero-overlay {
        background: rgba(0, 18, 38, 0.88);
    }
}

/* Impact Feature Section */
.min-h-350 {
    min-height: 350px;
}

.impact-overlay {
    background: linear-gradient(180deg, transparent 20%, rgba(0, 18, 38, 0.88) 100%);
}

.impact-icon-circle {
    width: 36px;
    height: 36px;
}

/* Map Image Styling */
.india-map-img {
    max-height: 320px;
    object-fit: contain;
}

.map-stat-icon {
    width: 44px;
    height: 44px;
}

/* Timeline Process */
.timeline-container {
    z-index: 1;
}

.timeline-line {
    position: absolute;
    top: 28px;
    left: 0;
    right: 0;
    height: 2px;
    border-top: 2px dashed rgba(0, 18, 38, 0.2);
    z-index: 0;
}

.timeline-step {
    position: relative;
    z-index: 2;
}

.step-icon-box {
    width: 56px;
    height: 56px;
}

/* Gallery Section */
.gallery-thumb {
    height: 200px;
}

.gallery-thumb img {
    transition: transform 0.4s ease;
}

.gallery-thumb:hover img {
    transform: scale(1.05);
}


/*=================== 
PROJECT PAGE STYLES 
====================*/

/* Featured Video Hero Box */
.min-h-250 { min-height: 250px; }

.bg-dark-overlay {
    background: rgba(0, 18, 38, 0.35);
    transition: background 0.3s ease;
}

.project-video-card:hover .bg-dark-overlay {
    background: rgba(0, 18, 38, 0.15);
}

.play-btn-circle {
    width: 64px;
    height: 64px;
    transition: transform 0.3s ease;
}

.play-btn-circle:hover {
    transform: scale(1.1);
}

/* Journey Process Cards */
.process-img {
    height: 140px;
}

.process-card {
    transition: transform 0.3s ease;
}

.process-card:hover {
    transform: translateY(-4px);
}

/* CSR Focus Cards */
.csr-img {
    height: 160px;
}

.csr-icon-badge {
    width: 42px;
    height: 42px;
}

.csr-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.csr-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

/* Stories of Change Thumbnails */
.story-img {
    height: 130px;
}

.story-thumb-card {
    transition: transform 0.3s ease;
}

.story-thumb-card:hover {
    transform: translateY(-3px);
}

/* SDG Cards */
.sdg-box {
    height: 120px;
    transition: transform 0.3s ease;
}

.sdg-box:hover {
    transform: translateY(-4px);
}



/*========== 
DONOR JOURNEY PAGE STYLES 
===========*/

.text-purple { color: #6f42c1 !important; }

.bg-teal { background-color: #20c997 !important; }
.tracking-wider { letter-spacing: 1px; }

/* 1. Hero Section Setup */
.donor-hero {
    min-height: 540px;
    background-color: #001226;
}

.donor-hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
    background-size: cover;
    background-position: center right;
    z-index: 0;
}

.donor-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #001226 45%, rgba(0, 18, 38, 0.85) 50%, transparent 100%);
    z-index: 1;
}

@media (max-width: 991.98px) {
    .donor-hero{
        min-height: auto;
    }
    .donor-hero-bg {
        width: 100%;
        background-position: center;
    }
    .donor-hero-overlay {
        background: rgba(0, 18, 38, 0.88);
    }
}


/* Section 1: 5-Step Journey Avatar styling */
.journey-steps-container {
    z-index: 1;
}

.journey-connecting-line {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    height: 2px;
    border-top: 2px dashed rgba(0, 18, 38, 0.2);
    z-index: 0;
}

.journey-step-col {
    position: relative;
    z-index: 2;
}

.journey-avatar-wrapper {
    width: 120px;
    height: 120px;
}

.journey-avatar {
    width: 100%;
    height: 100%;
    border: 3px solid #ffffff;
}

.step-num-badge {
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    z-index: 3;
}

.step-icon-badge {
    bottom: 0px;
    right: 5px;
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    z-index: 3;
}

/* Section 3: Donate Cards Hover */
.donate-type-card {
    cursor: pointer;
    transition: all 0.3s ease;
}

.donate-type-card:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-4px);
    border-color: var(--color-secondary, #e63946) !important;
}

/* Section 4: Allocation Icons */
.alloc-icon-circle {
    width: 44px;
    height: 44px;
}

/* Section 6: Bottom Banner */
.min-h-200 {
    min-height: 200px;
}


/*========== 
ANNUAL REPORT PAGE STYLES 
===========*/

/* Chairman Box Image */
.chairman-img-box {
    width: 225px;
    /* height: 220px; */
}

/* Timeline Horizontal Scroll */
.min-w-800 {
    min-width: 800px;
}

.timeline-line-bg {
    position: absolute;
    top: 30px;
    left: 40px;
    right: 40px;
    height: 2px;
    background-color: #dee2e6;
    z-index: 0;
}

.timeline-node {
    position: relative;
    z-index: 1;
    width: 80px;
}

.node-dot {
    width: 16px;
    height: 16px;
    border: 3px solid #ffffff;
}

/* Story Cards */
.story-card-img {
    height: 150px;
}

/* Financial Transparency Donut */
.donut-chart-box {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: conic-gradient(
        #20c997 0% 78%,
        #0d6efd 78% 90%,
        #ffc107 90% 96%,
        #dc3545 96% 100%
    );
    padding: 18px;
}

.donut-center {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/*========== 
ACADEMY PAGE STYLES 
===========*/
.bg-red { background-color: var(--color-secondary, #e63946) !important; }
.academy-hero {
    min-height: 540px;
    background-color: #001226;
}
.btn-white {
    background-color: #ffffff;
    color: #e63946;
    border: none;
    transition: all 0.3s ease;
}

.btn-white:hover {
    background-color: #f8f9fa;
    color: #c82333;
}
.academy-hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
    background-size: cover;
    background-position: center right;
    z-index: 0;
}

.academy-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #001226 45%, rgba(0, 18, 38, 0.85) 50%, transparent 100%);
    z-index: 1;
}

@media (max-width: 991.98px) {
    .donor-hero{
        min-height: auto;
    }
    .donor-hero-bg {
        width: 100%;
        background-position: center;
    }
    .donor-hero-overlay {
        background: rgba(0, 18, 38, 0.88);
    }
}


.divider {
    width: 40px;
    height: 3px;
    background-color: var(--color-secondary, #e63946);
    border-radius: 2px;
}

/* Program Cards */
.program-card-img {
    height: 160px;
}

.icon-badge {
    width: 32px;
    height: 32px;
}

.feature-icon {
    width: 40px;
    height: 40px;
}

/* Journey Section */
.min-w-800 { min-width: 800px; }

.journey-line {
    position: absolute;
    top: 25px;
    left: 80px;
    right: 80px;
    height: 2px;
    background-color: #dee2e6;
    z-index: 0;
}

.journey-step {
    position: relative;
    z-index: 1;
    width: 120px;
}

.step-icon {
    width: 50px;
    height: 50px;
}

.achieve-icon {
    width: 50px;
    height: 50px;
}


/*========== 
CERTIFICATE / TRAINER PAGE STYLES 
===========*/
.certificate-hero {
    min-height: 540px;
    background-color: #001226;
}

.certificate-hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
    background-size: cover;
    background-position: center right;
    z-index: 0;
}

.certificate-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #001226 45%, rgba(0, 18, 38, 0.85) 50%, transparent 100%);
    z-index: 1;
}

@media (max-width: 991.98px) {
    .certificate-hero{
        min-height: auto;
    }
    .certificate-hero-bg {
        width: 100%;
        background-position: center;
    }
    .certificate-hero-overlay {
        background: rgba(0, 18, 38, 0.88);
    }
}

.path-step {
    width: 130px;
}

.step-icon {
    width: 46px;
    height: 46px;
}

/* Benefit Cards */
.benefit-icon {
    width: 42px;
    height: 42px;
}

/* Community Gallery Thumbnails */
.community-thumb {
    height: 120px;
}


/*========================= 
TRAINING CENTER PAGE STYLES 
===========================*/


/* Pathway Horizontal Bar */
.min-w-800 { min-width: 800px; }

.partnership-hero {
    min-height: 540px;
    background-color: #001226;
}

.partnership-hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
    background-size: cover;
    background-position: center right;
    z-index: 0;
}

.partnership-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(115deg, #001226 45%, rgba(0, 18, 38, 0.85) 50%, transparent 100%);
    z-index: 1;
}

@media (max-width: 991.98px) {
    .partnership-hero{
        min-height: auto;
    }
    .partnership-hero-bg {
        width: 100%;
        background-position: center;
    }
    .partnership-hero-overlay {
        background: rgba(0, 18, 38, 0.88);
    }
}

.path-step {
    width: 130px;
}

.step-icon {
    width: 46px;
    height: 46px;
}

/* Benefit/Feature Icons */
.benefit-icon {
    width: 44px;
    height: 44px;
}

/* Stories Section */
.story-img {
    height: 170px;
}

/* Equipment image height limit */
.max-h-100 {
    max-height: 90px;
    object-fit: contain;
}


/*============================ 
CORPORATE SOLUTIONS PAGE STYLES 
=============================*/

.corporate-hero {
    min-height: 540px;
    background-color: #001226;
}

.corporate-hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
    background-size: cover;
    background-position: center right;
    z-index: 0;
}

.corporate-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(115deg, #f9f9f9 45%, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
    z-index: 1;
}

@media (max-width: 991.98px) {
    .corporate-hero{
        min-height: auto;
    }
    .corporate-hero-bg {
        width: 100%;
        background-position: center;
    }
    .corporate-hero-overlay {
        background: rgba(0, 18, 38, 0.88);
    }
}

.bg-light-blue { background-color: #e8f1ff; }

/* Feature Icons */
.feature-icon {
    width: 42px;
    height: 42px;
}

/* Solution Cards */
.solution-icon {
    width: 44px;
    height: 44px;
}

.solution-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.solution-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
}


/*========== 
SCHOOLS & COLLEGES SOLUTION PAGE STYLES 
===========*/

.sch-clg-hero {
    min-height: 540px;
    background-color: #001226;
}

.sch-clg-hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
    background-size: cover;
    background-position: center right;
    z-index: 0;
}

.sch-clg-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(115deg, #ffffff 45%, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
    z-index: 1;
}

@media (max-width: 991.98px) {
    .sch-clg-hero{
        min-height: auto;
    }
    .sch-clg-hero-bg {
        width: 100%;
        background-position: center;
    }
    .sch-clg-hero-overlay {
        background: rgba(0, 18, 38, 0.88);
    }
}

.program-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.program-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
}

/* Stories / Testimonials */
.testimonial-img {
    width: 150px;
}


/*========== 
OUR TRUSTED PARTNERS PAGE STYLES 
===========*/

.ourpartner-hero {
    min-height: 540px;
    background-color: #001226;
}

.ourpartner-hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
    background-size: cover;
    background-position: center right;
    z-index: 0;
}

.ourpartner-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(110deg, #001226 45%, rgba(0, 18, 38, 0.85) 50%, transparent 100%);
    z-index: 1;
}

@media (max-width: 991.98px) {
    .ourpartner-hero{
        min-height: auto;
    }
    .ourpartner-hero-bg {
        width: 100%;
        background-position: center;
    }
    .ourpartner-hero-overlay {
        background: rgba(0, 18, 38, 0.88);
    }
}

/* Navigation Tab Filter Styling */
.filter-tabs .nav-link {
    color: #001226;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    padding: 8px 16px;
    white-space: nowrap;
    transition: all 0.2s ease-in-out;
}

.filter-tabs .nav-link:hover {
    background-color: #e9ecef;
}

.filter-tabs .nav-link.active {
    background-color: var(--color-secondary, #e63946) !important;
    color: #ffffff !important;
    border-color: var(--color-secondary, #e63946) !important;
}

/* Partner Logo Cards */
.partner-card {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.partner-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.partner-card img {
    max-width: 100%;
    max-height: 50px;
    object-fit: contain;
}

/* Path Icons */
.partner-path-icon {
    width: 40px;
    height: 40px;
}


/*========== 
MEDIA CENTER SECTION STYLES 
===========*/

.hover-danger:hover {
    color: var(--color-secondary, #e63946) !important;
}

/* Custom 5-column layout breakpoint helper */
@media (min-width: 992px) {
    .col-lg-2\.4 {
        flex: 0 0 auto;
        width: 20%;
    }
}

/* Media Coverage Cards */
.media-logo-header {
    height: 48px;
}

.media-card-img {
    height: 140px;
}

.media-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.media-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
}

/* Photo Gallery Cards */
.gallery-img {
    height: 130px;
}

.gallery-card {
    transition: transform 0.2s ease;
}

.gallery-card:hover {
    transform: translateY(-2px);
}

/* Video Thumbnails & Play Icon */
.video-thumb {
    height: 125px;
    transition: transform 0.3s ease;
}

.video-card:hover .video-thumb {
    transform: scale(1.03);
}

.play-btn {
    width: 36px;
    height: 36px;
    z-index: 2;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.video-card:hover .play-btn {
    transform: translate(-50%, -50%) scale(1.1);
    background-color: var(--color-secondary, #e63946) !important;
    color: #ffffff !important;
}

/* Newsletter Icon */
.newsletter-icon {
    width: 52px;
    height: 52px;
}

/* Asset Icons */
.asset-icon {
    width: 48px;
    height: 48px;
}

/* Contact Box Icons */
.media-contact-icon {
    width: 42px;
    height: 42px;
}


/*========== 
EMERGENCY PREPAREDNESS HUB STYLES 
===========*/

/* Icon Box Styles */
.icon-box {
    width: 48px;
    height: 48px;
}

.bg-light-danger { background-color: #ffebee; }
.bg-light-primary { background-color: #e3f2fd; }
.bg-light-success { background-color: #e8f5e9; }
.bg-light-warning { background-color: #fff8e1; }
.bg-light-info { background-color: #e0f7fa; }

/* Scenario Image Heights */
.scenario-img {
    height: 120px;
}

/* Hover effect on cards */
.hover-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
}

/* Map Image Box */
.max-h-250 {
    max-height: 250px;
    object-fit: contain;
}

.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}



/*========== 
CAREERS PAGE SPECIFIC STYLES
===========*/

.career-hero {
    min-height: 540px;
    background-color: #001226;
}

.career-hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
    background-size: cover;
    background-position: center right;
    z-index: 0;
}

.career-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(115deg, #001226 45%, rgba(0, 18, 38, 0.85) 50%, transparent 100%);
    z-index: 1;
}

@media (max-width: 991.98px) {
    .career-hero{
        min-height: auto;
    }
    .career-hero-bg {
        width: 100%;
        background-position: center;
    }
    .career-hero-overlay {
        background: rgba(0, 18, 38, 0.88);
    }
}

/* Custom Underline for Section Titles */
.section-title-line::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 3px;
    background-color: var(--color-secondary, #e63946);
    border-radius: 2px;
}

/* Feature Icon Circle */
.icon-box-circle {
    width: 44px;
    height: 44px;
}

/* Image heights for responsive grid */
.min-h-180 { min-height: 180px; }

/* Hiring Process Timeline Line */
.hiring-process-line {
    position: absolute;
    top: 45px;
    left: 10%;
    right: 10%;
    height: 2px;
    border-top: 2px dashed #001226;
    z-index: 0;
}

.process-icon-box {
    width: 46px;
    height: 46px;
}