/* =========================================
   ABOUT SECTION – MISSION & VISION (REUSABLE)
========================================= */

/* Slider Navigation */
/* @media (max-width: 768px) {
    .slider-navigation {
        position: absolute;
        width: 100%; */
        /* bottom: 5px;   👈 push them lower */
        /* left: 0;
        justify-content: center;
        gap: 20px;
        z-index: 10;
    } */

    /* .slider-btn { */
        /* width: 40px; */
        /* height: 40px; */
        /* font-size: 14px; */
        /* background: rgba(0,0,0,0.6); */
        /* color: white; */
        /* border-radius: 50%; */
    /* }
} */

/* About Section Container */
#about-section .about__content {
    max-width: 650px;
    margin: 0 auto;
}

/* Mission & Vision cards */
#about-section .section__header {
    margin-bottom: 30px;
    position: relative;
    padding: 15px;
    background: linear-gradient(135deg, #02723d 50%, #020e74 50%);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(2, 14, 116, 0.2);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#about-section .section__header:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(2, 14, 116, 0.3);
}

/* Shimmer effect */
#about-section .section__header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.12) 50%,
        transparent 70%
    );
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

#about-section .section__header h3 {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

#about-section .section__header p {
    color: #e8f0ff;
    font-size: 16px;
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

/* Divider */
#about-section .divider {
    border: none;
    height: 3px;
    margin: 25px 0;
    border-radius: 2px;
    background: linear-gradient(90deg, #020e74, #02723d, #020e74);
}

/* Core values card */
#about-section .about__content-inner {
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

/* Core values title */
#about-section .about__content-inner > span {
    display: inline-block;
    color: #020e74;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 25px;
    padding-bottom: 8px;
    border-bottom: 4px solid #02723d;
}

/* Core values list */
#about-section .help__content-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#about-section .help__content-list li {
    padding: 8px 10px;
    margin-bottom: 6px;
    background: linear-gradient(
        135deg,
        rgba(2, 14, 116, 0.05),
        rgba(2, 114, 61, 0.05)
    );
    border-radius: 10px;
    border-left: 4px solid #02723d;
    font-size: 16px;
    color: #000;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

#about-section .help__content-list li:hover {
    transform: translateX(10px);
    background: linear-gradient(
        135deg,
        rgba(2, 14, 116, 0.1),
        rgba(2, 114, 61, 0.1)
    );
    border-left-color: #020e74;
    box-shadow: 0 4px 15px rgba(2, 114, 61, 0.15);
}

#about-section .help__content-list li i {
    color: #02723d;
    margin-right: 15px;
    font-size: 20px;
    transition: transform 0.3s ease, color 0.3s ease;
}

#about-section .help__content-list li:hover i {
    transform: scale(1.2);
    color: #020e74;
}

/* CTA */
#about-section .mt-40 {
    margin-top: 20px;
}

#about-section .about__content-inner__btn {
    text-align: center;
}

#about-section .btn--secondary {
    display: inline-block;
    padding: 18px 45px;
    background: linear-gradient(135deg, #020e74, #02723d);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 12px;
    box-shadow: 0 8px 25px rgba(2, 14, 116, 0.3);
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

#about-section .btn--secondary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #02723d, #020e74);
    transform: translateX(-100%);
    transition: transform 0.4s ease;
    z-index: 0;
}

#about-section .btn--secondary:hover::before {
    transform: translateX(0);
}

#about-section .btn--secondary span {
    position: relative;
    z-index: 1;
}

#about-section .btn--secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(2, 114, 61, 0.4);
}

/* =====================
   RESPONSIVE
===================== */

@media (max-width: 768px) {
    #about-section .section__header h3 {
        font-size: 22px;
    }

    #about-section .section__header p {
        font-size: 14px;
    }

    #about-section .about__content-inner {
        padding: 18px;
    }

    #about-section .about__content-inner > span {
        font-size: 18px;
    }

    #about-section .help__content-list li {
        font-size: 14px;
        padding: 12px 14px;
    }

    #about-section .btn--secondary {
        padding: 14px 32px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    #about-section .section__header {
        padding: 14px;
    }

    #about-section .section__header h3 {
        font-size: 20px;
    }

    #about-section .about__content-inner > span {
        font-size: 16px;
    }
}

/* ===== END ABOUT SECTION ===== */


/* Aboout Details Tab Section Start */
        .product-tab {
            padding: 120px 0;
            background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
            position: relative;
        }

        .product-tab::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 200px;
            background: linear-gradient(135deg, rgba(2, 14, 116, 0.03) 0%, rgba(2, 114, 61, 0.03) 100%);
            z-index: 0;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 0 20px;
            position: relative;
            z-index: 1;
        }

        /* Tab Navigation */
        .product-tab__inner {
            background: #ffffff;
            border-radius: 24px;
            box-shadow: 0 10px 50px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        .product-tab__btns {
            background: linear-gradient(135deg, #020e74 0%, #02723d 100%);
            padding: 20px 30px;
            display: flex;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .product-tab__btns::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.08) 50%, transparent 70%);
            animation: shimmer 3s infinite;
        }

        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        .product-tab__btn {
            background: rgba(255, 255, 255, 0.2);
            color: #ffffff;
            border: 2px solid rgba(255, 255, 255, 0.3);
            padding: 15px 40px;
            font-size: 20px;
            font-weight: 700;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            z-index: 1;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .product-tab__btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }

        .product-tab__btn.active {
            background: #ffffff;
            color: #020e74;
            border-color: #ffffff;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        /* Content Area */
        .product-tab__content {
            padding: 50px 40px;
        }

        .content h4 {
            font-size: 36px;
            font-weight: 700;
            color: #020e74;
            margin-bottom: 30px;
            position: relative;
            display: inline-block;
            padding-bottom: 15px;
        }

        .content h4::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #020e74, #02723d);
            border-radius: 2px;
        }

        /* Timeline Style for Content */
        .content {
            position: relative;
        }

        .content p {
            font-size: 17px;
            line-height: 1.9;
            color: #333;
            margin: 0;
            text-align: justify;
            position: relative;
            padding-left: 40px;
        }

        .content p::before {
            content: '';
            position: absolute;
            left: 0;
            top: 8px;
            width: 4px;
            height: calc(100% - 8px);
            background: linear-gradient(180deg, #020e74, #02723d);
            border-radius: 2px;
        }

        .content p::after {
            content: '';
            position: absolute;
            left: -6px;
            top: 8px;
            width: 16px;
            height: 16px;
            background: #02723d;
            border: 3px solid #ffffff;
            border-radius: 50%;
            box-shadow: 0 0 0 3px rgba(2, 114, 61, 0.2);
        }

        /* Highlight important years/dates */
        .content p strong {
            color: #02723d;
            font-weight: 700;
        }

        /* Quote Style for impactful text */
        .content blockquote {
            background: linear-gradient(135deg, rgba(2, 14, 116, 0.05), rgba(2, 114, 61, 0.05));
            border-left: 5px solid #02723d;
            padding: 20px 30px;
            margin: 30px 0;
            border-radius: 10px;
            font-style: italic;
            color: #020e74;
            font-size: 18px;
            line-height: 1.7;
        }

        /* Stats or Highlights */
        .highlights {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 40px;
        }

        .highlight-card {
            background: linear-gradient(135deg, #020e74 0%, #02723d 100%);
            padding: 25px;
            border-radius: 15px;
            text-align: center;
            color: #ffffff;
            box-shadow: 0 5px 20px rgba(2, 14, 116, 0.2);
            transition: transform 0.3s ease;
        }

        .highlight-card:hover {
            transform: translateY(-5px);
        }

        .highlight-card .year {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .highlight-card .label {
            font-size: 14px;
            opacity: 0.9;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .product-tab {
                padding: 80px 0;
            }

            .product-tab__btns {
                padding: 15px 20px;
            }

            .product-tab__btn {
                padding: 12px 30px;
                font-size: 16px;
            }

            .product-tab__content {
                padding: 35px 25px;
            }

            .content h4 {
                font-size: 28px;
                margin-bottom: 25px;
            }

            .content p {
                font-size: 16px;
                line-height: 1.8;
                padding-left: 30px;
            }

            .content blockquote {
                padding: 15px 20px;
                font-size: 16px;
            }

            .highlights {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 480px) {
            .product-tab {
                padding: 60px 0;
            }

            .product-tab__btn {
                padding: 10px 25px;
                font-size: 14px;
            }

            .content h4 {
                font-size: 24px;
            }

            .content p {
                font-size: 15px;
                padding-left: 25px;
                text-align: left;
            }

            .highlight-card .year {
                font-size: 28px;
            }
        }

/* About Details Tab Section END */


/* IMPACT Section START*/
 .counter {
            padding: 120px 0;
            background: linear-gradient(135deg, #020e74 0%, #02723d 100%);
            position: relative;
            overflow: hidden;
        }

        /* Background Pattern Overlay */
        .counter::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
            z-index: 0;
        }

        /* Animated Shimmer Effect */
        .counter::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            animation: shimmer 3s infinite;
            z-index: 0;
        }

        @keyframes shimmer {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
            position: relative;
            z-index: 1;
        }

        /* Section Title */
        .counter h2 {
            text-align: center;
            font-size: 56px;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 60px;
            position: relative;
            text-transform: uppercase;
            letter-spacing: 3px;
        }

        .counter h2::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 5px;
            background: #ffffff;
            border-radius: 3px;
        }

        /* Counter Grid - SPECIFIC TO IMPACT SECTION ONLY */
        .counter .counter__inner {
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            gap: 20px;
            padding: 20px 0;
            flex-wrap: nowrap;
            overflow-x: auto;
        }

        /* Individual Counter Card - SPECIFIC TO IMPACT SECTION ONLY */
        .counter .counter__single {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 40px 25px;
            text-align: center;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            flex: 1;
            min-width: 180px;
        }

        .counter .counter__single::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, #020e74, #02723d);
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }

        .counter .counter__single:hover::before {
            transform: scaleX(1);
        }

        .counter .counter__single:hover {
            transform: translateY(-15px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            background: #ffffff;
        }

        /* Icon Container - SPECIFIC TO IMPACT SECTION ONLY */
        .counter .thumb {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, #020e74 0%, #02723d 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.4s ease;
            position: relative;
        }

        .counter .thumb::after {
            content: '';
            position: absolute;
            inset: -8px;
            border-radius: 50%;
            border: 2px solid rgba(2, 114, 61, 0.3);
            animation: pulse-ring 2s infinite;
        }

        @keyframes pulse-ring {
            0%, 100% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.1);
                opacity: 0.5;
            }
        }

        .counter .counter__single:hover .thumb {
            transform: scale(1.1) rotate(360deg);
        }

        .counter .thumb i {
            font-size: 36px;
            color: #ffffff;
        }

        /* Counter Content - SPECIFIC TO IMPACT SECTION ONLY */
        .counter .counter__content {
            margin-top: 20px;
        }

        .counter .counter__content h2 {
            font-size: 42px;
            font-weight: 700;
            color: #020e74;
            margin-bottom: 10px;
            line-height: 1;
            letter-spacing: 0;
        }

        .counter .counter__content h2::after {
            display: none;
        }

        .counter .counter__content h2 .prefix {
            font-size: 32px;
            color: #02723d;
            margin-left: 5px;
        }

        .counter .counter__content h5 {
            font-size: 16px;
            font-weight: 600;
            color: #555;
            margin: 0;
            line-height: 1.4;
        }

        /* Remove old dividers */
        .divider {
            display: none;
        }

        /* Decorative Elements */
        .shape-left {
            position: absolute;
            bottom: 0;
            left: 0;
            opacity: 0.1;
            z-index: 0;
        }

        .poor {
            display: none; /* Hide background image for cleaner design */
        }

         /* Keep odometer number and + on one line */
            .counter__content h2 {
                white-space: nowrap;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 4px;
            }


            @media (max-width: 768px) {
           .counter__content h2 {
                font-size: 22px;
             }
            }

            @media (max-width: 480px) {
                .counter__content h2 {
                    font-size: 18px;
                }
            }

        /* Responsive Design */
        @media (max-width: 1200px) {
            .counter__inner {
                gap: 15px;
            }
            
            .counter__single {
                padding: 35px 20px;
                min-width: 140px;
            }
            
            .counter__content h5 {
                font-size: 14px;
            }
        }

        @media (max-width: 768px) {
            .counter {
                padding: 80px 0;
            }

            .counter h2 {
                font-size: 42px;
                margin-bottom: 40px;
                letter-spacing: 2px;
            }

            .counter__inner {
                overflow-x: auto;
                padding-bottom: 10px;
                -webkit-overflow-scrolling: touch;
            }
            
            .counter__inner::-webkit-scrollbar {
                height: 8px;
            }
            
            .counter__inner::-webkit-scrollbar-track {
                background: rgba(255, 255, 255, 0.1);
                border-radius: 10px;
            }
            
            .counter__inner::-webkit-scrollbar-thumb {
                background: rgba(255, 255, 255, 0.3);
                border-radius: 10px;
            }

            .counter__single {
                padding: 30px 15px;
                min-width: 150px;
            }

            .thumb {
                width: 70px;
                height: 70px;
                margin-bottom: 15px;
            }

            .thumb i {
                font-size: 30px;
            }

            .counter__content h2 {
                font-size: 36px;
            }

            .counter__content h2 .prefix {
                font-size: 28px;
            }

            .counter__content h5 {
                font-size: 13px;
            }
        }

        @media (max-width: 480px) {
            .counter {
                padding: 60px 0;
            }

            .counter h2 {
                font-size: 32px;
                letter-spacing: 1px;
            }

            .counter__single {
                padding: 25px 12px;
                min-width: 140px;
            }

            .thumb {
                width: 65px;
                height: 65px;
            }

            .thumb i {
                font-size: 26px;
            }

            .counter__content h2 {
                font-size: 32px;
            }

            .counter__content h5 {
                font-size: 12px;
            }
        }
        /* IMPACT Section END*/

        
/* =========================================
   PROJECT DETAILS PAGE - MODERN STYLING
========================================= */

/* Main Section */
body section.pt-120.pb-120 {
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
    position: relative;
}

/* Soft background overlay */
body section.pt-120.pb-120::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 250px;
    background: linear-gradient(135deg, rgba(2, 14, 116, 0.03) 0%, rgba(2, 114, 61, 0.03) 100%);
    z-index: 0;
}

body section.pt-120.pb-120 .container {
    position: relative;
    z-index: 1;
}

/* ===== Project Header ===== */
body section.pt-120.pb-120 .container > .row.mb-5:first-child {
    background: linear-gradient(135deg, #020e74 0%, #02723d 100%);
    padding: 50px 30px;
    border-radius: 24px;
    box-shadow: 0 15px 50px rgba(2, 14, 116, 0.2);
    position: relative;
    overflow: hidden;
}

body section.pt-120.pb-120 .container > .row.mb-5:first-child::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

body section.pt-120.pb-120 .container > .row.mb-5:first-child .col-12 {
    position: relative;
    z-index: 1;
}

body section.pt-120.pb-120 .container > .row.mb-5:first-child h2 {
    color: #ffffff;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
}

body section.pt-120.pb-120 .container > .row.mb-5:first-child p {
    color: #e8f0ff;
}

/* ===== Main Image ===== */
body section.pt-120.pb-120 .container > .row.mb-5:nth-child(2) .col-12 {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

body section.pt-120.pb-120 .container > .row.mb-5:nth-child(2) img {
    width: 100%;
    max-height: 600px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

body section.pt-120.pb-120 .container > .row.mb-5:nth-child(2):hover img {
    transform: scale(1.03);
}

/* ===== Description ===== */
body section.pt-120.pb-120 .container > .row.mb-5:nth-child(3) {
    background: #ffffff;
    padding: 50px 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

/* ===== Gallery ===== */
body section.pt-120.pb-120 .container > .row:last-child h4 {
    font-size: 36px;
    font-weight: 700;
    color: #020e74;
    text-align: center;
    margin-bottom: 40px;
}

body section.pt-120.pb-120 .container > .row:last-child img {
    border-radius: 16px;
    transition: all 0.4s ease;
}

body section.pt-120.pb-120 .container > .row:last-child img:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(2,14,116,0.2);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    body section.pt-120 { padding-top: 80px; }
    body section.pb-120 { padding-bottom: 80px; }
    body section.pt-120.pb-120 .container > .row.mb-5:first-child h2 {
        font-size: 32px;
    }
}

@media (max-width: 480px) {
    body section.pt-120 { padding-top: 60px; }
    body section.pb-120 { padding-bottom: 60px; }
    body section.pt-120.pb-120 .container > .row.mb-5:first-child h2 {
        font-size: 26px;
    }
}

/* ================================
   CORE PROGRAM AREAS – IMAGE FIX START
   ================================ */

.cause__slider-single .thumb {
    width: 100%;
    height: 260px;               /* Fixed card image height */
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    position: relative;
    background: #f2f2f2;
}

.cause__slider-single .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;           /* Crop instead of shrinking */
    object-position: center;
    display: block;
    transition: transform 0.6s ease;
}

/* Hover zoom effect */
.cause__slider-single:hover .thumb img {
    transform: scale(1.08);
}

/* Tablet */
@media (max-width: 991px) {
    .cause__slider-single .thumb {
        height: 230px;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .cause__slider-single .thumb {
        height: 200px;
    }
}

/* ================================
   CORE PROGRAM AREAS – IMAGE FIX END
   ================================ */

/* ============================================
   Read More Expandable Text START
   ============================================ */

.read-more-wrapper {
    position: relative;
}

.read-more-text {
    max-height: 85px; /* preview height */
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.read-more-text.expanded {
    max-height: 1000px; /* enough to show full text */
}

.read-more-btn {
    display: inline-block;
    margin-top: 8px;
    color: #0b5ed7;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.read-more-btn:hover {
    text-decoration: underline;
}

/* ============================================
   Read More Expandable Text END
   ============================================ */

/* ============================================
   Cross-Cutting Themes – Equal Height Cards
   ============================================ */

/* Make all cards stretch equally */
.blog-main .row.gutter-24 {
    display: flex;
    flex-wrap: wrap;
}

.blog-main .col-xl-4,
.blog-main .col-md-6 {
    display: flex;
}

/* Card container */
.blog__single-wrapper {
    width: 100%;
    display: flex;
}

.blog__single {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
}

/* Control image size */
.blog__single-thumb img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

/* Make content area flexible */
.blog__single-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 25px;
}

/* Force titles to same height */
.blog__single-content h5 {
    min-height: 70px; /* forces same title block height */
    display: flex;
    align-items: center;
    text-align: center;
}

/* Optional: center text nicely */
.blog__single-content {
    text-align: center;
}



/* =========================================
   BLOG PAGE - MODERN STYLING START
========================================= */

/* Banner Section */
.common-banner {
    position: relative;
    padding: 180px 0 120px;
    overflow: hidden;
}

.common-banner .banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.common-banner .banner-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(2, 14, 116, 0.85) 0%, rgba(2, 114, 61, 0.85) 100%);
    z-index: 1;
}

.common-banner .banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.common-banner .container {
    position: relative;
    z-index: 2;
}

/* Banner Title */
.common-banner__content h2 {
    font-size: 56px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 0px 5px #ffffff;
}

/* Breadcrumb */
.common-banner nav {
    position: relative;
    z-index: 2;
    margin-top: 100px;
}

.common-banner .breadcrumb {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 15px 30px;
    border-radius: 50px;
    justify-content: center;
    margin: 0 auto;
    display: inline-flex;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.common-banner .breadcrumb-item {
    font-size: 16px;
    font-weight: 500;
}

.common-banner .breadcrumb-item a {
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.common-banner .breadcrumb-item a:hover {
    opacity: 0.8;
}

.common-banner .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.85);
}

.common-banner .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.7);
    content: "›";
    padding: 0 12px;
}

/* Decorative Elements */
.common-banner .sprade,
.common-banner .line {
    position: absolute;
    z-index: 1;
    opacity: 0.15;
    pointer-events: none;
}

.common-banner .sprade {
    bottom: 30px;
    right: 30px;
}

.common-banner .line {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

/* Publications Section */
section.container.py-5 {
    padding: 120px 0 !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
}

section.container.py-5 .text-center {
    margin-bottom: 60px;
}

section.container.py-5 h2 {
    font-size: 42px;
    font-weight: 700;
    color: #020e74;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

section.container.py-5 h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #020e74, #02723d);
    border-radius: 2px;
}

section.container.py-5 .text-muted {
    font-size: 18px;
    color: #666 !important;
    margin: 0;
}

/* Table Container */
.table-responsive {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    padding: 30px;
    position: relative;
    overflow: hidden;
}

.table-responsive::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #020e74, #02723d);
    z-index: 1;
}

/* Table Styling */
.table {
    margin-bottom: 0;
    font-size: 16px;
}

.table thead {
    background: linear-gradient(135deg, #020e74 0%, #02723d 100%) !important;
}

.table thead th {
    color: #ffffff !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 18px 20px;
    border: none !important;
    font-size: 14px;
}

.table thead th:first-child {
    border-radius: 12px 0 0 0;
}

.table thead th:last-child {
    border-radius: 0 12px 0 0;
}

.table tbody tr {
    transition: all 0.3s ease;
    border-bottom: 1px solid #e9ecef;
}

.table tbody tr:hover {
    background: linear-gradient(135deg, rgba(2, 14, 116, 0.03), rgba(2, 114, 61, 0.03)) !important;
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(2, 14, 116, 0.1);
}

.table tbody tr:last-child {
    border-bottom: none;
}

.table tbody td {
    padding: 20px;
    vertical-align: middle;
    border: none !important;
    color: #333;
}

.table tbody td:first-child {
    font-weight: 600;
    color: #020e74;
    font-size: 18px;
}

/* View Button */
.btn-primary {
    background: linear-gradient(135deg, #020e74 0%, #02723d 100%) !important;
    border: none !important;
    padding: 10px 25px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease !important;
    box-shadow: 0 5px 15px rgba(2, 14, 116, 0.3);
}

.btn-primary:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(2, 114, 61, 0.4) !important;
}

.btn-primary:active {
    transform: translateY(-1px) !important;
}

/* Empty State */
.text-center.text-muted {
    padding: 40px;
    font-size: 16px;
    color: #999 !important;
}

/* Striped Rows - Override Bootstrap */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(248, 249, 250, 0.5);
}

.table-bordered {
    border: none !important;
}

.table-bordered td,
.table-bordered th {
    border: none !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .common-banner {
        padding: 140px 0 100px;
    }

    .common-banner__content h2 {
        font-size: 38px;
        letter-spacing: 2px;
    }

    .common-banner .breadcrumb {
        padding: 12px 20px;
        font-size: 14px;
    }

    section.container.py-5 {
        padding: 80px 15px !important;
    }

    section.container.py-5 h2 {
        font-size: 32px;
    }

    section.container.py-5 .text-muted {
        font-size: 16px;
    }

    .table-responsive {
        padding: 20px;
    }

    .table {
        font-size: 14px;
    }

    .table thead th {
        padding: 15px 12px;
        font-size: 12px;
    }

    .table tbody td {
        padding: 15px 12px;
    }

    .table tbody td:first-child {
        font-size: 16px;
    }

    .btn-primary {
        padding: 8px 20px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    .common-banner {
        padding: 120px 0 80px;
    }

    .common-banner__content h2 {
        font-size: 28px;
        letter-spacing: 1px;
    }

    section.container.py-5 {
        padding: 60px 15px !important;
    }

    section.container.py-5 h2 {
        font-size: 26px;
    }

    section.container.py-5 .text-muted {
        font-size: 15px;
    }

    .table-responsive {
        padding: 15px;
    }

    .table {
        font-size: 13px;
    }

    .table thead th {
        padding: 12px 10px;
        font-size: 11px;
    }

    .table tbody td {
        padding: 12px 10px;
    }

    /* Stack table on very small screens */
    .table thead {
        display: none;
    }

    .table tbody tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        overflow: hidden;
    }

    .table tbody td {
        display: block;
        text-align: right;
        padding: 12px 15px;
        border-bottom: 1px solid #f0f0f0;
    }

    .table tbody td:last-child {
        border-bottom: none;
    }

    .table tbody td::before {
        content: attr(data-label);
        float: left;
        font-weight: 600;
        color: #020e74;
    }

    .table tbody td:first-child::before {
        content: "No.";
    }

    .table tbody td:nth-child(2)::before {
        content: "Topic";
    }

    .table tbody td:nth-child(3)::before {
        content: "Year";
    }

    .table tbody td:last-child::before {
        content: "Link";
    }

    .table tbody td:last-child {
        text-align: center;
    }
}

/* ==================================================================================================
                                    END BLOG PAGE 
==================================================================================================== */

/* ===============================
   GALLERY IMAGE UNIFORM SIZING
================================ */

.gallery-section-wrapper .card {
    overflow: hidden;
    border-radius: 12px;
}

.gallery-section-wrapper .gallery-img {
    width: 100%;
    height: 260px;             /* same height for all images */
    object-fit: cover;        /* crop instead of stretch */
    object-position: center;
    transition: transform 0.4s ease;
}

/* Hover zoom effect */
.gallery-section-wrapper .card:hover .gallery-img {
    transform: scale(1.05);
}

/* Make card heights consistent */
.gallery-section-wrapper .card-body {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

/* Title */
.gallery-section-wrapper .card-title {
    font-weight: 600;
}

/* Description */
.gallery-section-wrapper .card-text {
    font-size: 14px;
}


/* =========================================
   GALLERY SECTION - MODERN STYLING (NO CONFLICTS)
========================================= */

/* Gallery Section - SPECIFIC TARGETING */
.gallery-section-wrapper {
    padding: 120px 0 !important;
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%);
}

/* Section Header - SPECIFIC */
.gallery-section-wrapper .text-center.mb-4 {
    margin-bottom: 60px !important;
}

.gallery-section-wrapper .text-center h2 {
    font-size: 42px;
    font-weight: 700;
    color: #020e74;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.gallery-section-wrapper .text-center h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #020e74, #02723d);
    border-radius: 2px;
}

.gallery-section-wrapper .text-center > p.text-muted {
    font-size: 18px;
    color: #666 !important;
    margin: 0;
}

/* Gallery Grid - SPECIFIC */
.gallery-section-wrapper .row.g-4 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    grid-auto-flow: dense;
}

/* Reset Bootstrap defaults for gallery cards */
.gallery-section-wrapper .row.g-4 > div {
    width: 100%;
    max-width: none;
    flex: none;
    padding: 0;
}

/* Gallery Card - SPECIFIC */
.gallery-section-wrapper .row.g-4 .card {
    background: #ffffff;
    border-radius: 20px !important;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.4s ease;
    position: relative;
    height: auto !important;
    border: none !important;
}

.gallery-section-wrapper .row.g-4 .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #020e74, #02723d);
    transform: scaleX(0);
    transition: transform 0.4s ease;
    z-index: 2;
}

.gallery-section-wrapper .row.g-4 .card:hover::before {
    transform: scaleX(1);
}

.gallery-section-wrapper .row.g-4 .card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 50px rgba(2, 14, 116, 0.15) !important;
}

/* Image Container - SPECIFIC */
.gallery-section-wrapper .row.g-4 .card .card-img-top {
    width: 100%;
    height: 280px !important;
    object-fit: cover;
    transition: transform 0.5s ease;
    position: relative;
    display: block;
}

.gallery-section-wrapper .row.g-4 .card:hover .card-img-top {
    transform: scale(1.08);
}

/* Image Overlay Effect - SPECIFIC */
.gallery-section-wrapper .row.g-4 .card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 280px;
    background: linear-gradient(to bottom, transparent 0%, rgba(2, 14, 116, 0.6) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.gallery-section-wrapper .row.g-4 .card:hover::after {
    opacity: 1;
}

/* Card Body - SPECIFIC */
.gallery-section-wrapper .row.g-4 .card .card-body {
    padding: 25px !important;
    position: relative;
    z-index: 2;
    background: #ffffff;
}

.gallery-section-wrapper .row.g-4 .card .card-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #020e74 !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
    transition: color 0.3s ease;
}

.gallery-section-wrapper .row.g-4 .card:hover .card-title {
    color: #02723d !important;
}

.gallery-section-wrapper .row.g-4 .card .card-text {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #666 !important;
    margin: 0 !important;
}

/* Zoom Icon Effect - SPECIFIC */
.gallery-section-wrapper .row.g-4 .card .card-img-top::before {
    content: '\f00e';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 32px;
    color: #ffffff;
    background: rgba(2, 14, 116, 0.9);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    z-index: 3;
    text-align: center;
    line-height: 70px;
}

.gallery-section-wrapper .row.g-4 .card:hover .card-img-top::before {
    transform: translate(-50%, -50%) scale(1);
}

/* Empty State - SPECIFIC */
.gallery-section-wrapper .row.g-4 .col-12.text-center {
    grid-column: 1 / -1;
    padding: 60px 20px;
}

.gallery-section-wrapper .row.g-4 .col-12.text-center p {
    font-size: 18px;
    color: #999 !important;
}

/* Lazy Loading - Fade In Animation */
.gallery-section-wrapper .row.g-4 .card {
    animation: galleryFadeInUp 0.6s ease forwards;
    opacity: 0;
}

.gallery-section-wrapper .row.g-4 > div:nth-child(1) .card { animation-delay: 0.1s; }
.gallery-section-wrapper .row.g-4 > div:nth-child(2) .card { animation-delay: 0.15s; }
.gallery-section-wrapper .row.g-4 > div:nth-child(3) .card { animation-delay: 0.2s; }
.gallery-section-wrapper .row.g-4 > div:nth-child(4) .card { animation-delay: 0.25s; }
.gallery-section-wrapper .row.g-4 > div:nth-child(5) .card { animation-delay: 0.3s; }
.gallery-section-wrapper .row.g-4 > div:nth-child(6) .card { animation-delay: 0.35s; }
.gallery-section-wrapper .row.g-4 > div:nth-child(n+7) .card { animation-delay: 0.4s; }

@keyframes galleryFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Featured Item (First 2 cards span 2 columns on large screens) */
@media (min-width: 992px) {
    .gallery-section-wrapper .row.g-4 > div:nth-child(1),
    .gallery-section-wrapper .row.g-4 > div:nth-child(2) {
        grid-column: span 2;
    }

    .gallery-section-wrapper .row.g-4 > div:nth-child(1) .card .card-img-top,
    .gallery-section-wrapper .row.g-4 > div:nth-child(2) .card .card-img-top {
        height: 350px !important;
    }

    .gallery-section-wrapper .row.g-4 > div:nth-child(1) .card::after,
    .gallery-section-wrapper .row.g-4 > div:nth-child(2) .card::after {
        height: 350px;
    }
}

/* Responsive Design */
@media (max-width: 992px) {
    .gallery-section-wrapper .row.g-4 {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 25px;
    }

    .gallery-section-wrapper .row.g-4 .card .card-img-top {
        height: 250px !important;
    }

    .gallery-section-wrapper .row.g-4 .card::after {
        height: 250px;
    }
}

@media (max-width: 768px) {
    .gallery-section-wrapper {
        padding: 80px 15px !important;
    }

    .gallery-section-wrapper .text-center h2 {
        font-size: 32px;
    }

    .gallery-section-wrapper .text-center > p.text-muted {
        font-size: 16px;
    }

    .gallery-section-wrapper .row.g-4 {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }

    .gallery-section-wrapper .row.g-4 .card .card-img-top {
        height: 220px !important;
    }

    .gallery-section-wrapper .row.g-4 .card::after {
        height: 220px;
    }

    .gallery-section-wrapper .row.g-4 .card .card-body {
        padding: 20px !important;
    }

    .gallery-section-wrapper .row.g-4 .card .card-title {
        font-size: 18px !important;
    }

    .gallery-section-wrapper .row.g-4 .card .card-text {
        font-size: 14px !important;
    }
}

@media (max-width: 576px) {
    .gallery-section-wrapper {
        padding: 60px 15px !important;
    }

    .gallery-section-wrapper .text-center h2 {
        font-size: 26px;
    }

    .gallery-section-wrapper .row.g-4 {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .gallery-section-wrapper .row.g-4 .card .card-img-top {
        height: 250px !important;
    }

    .gallery-section-wrapper .row.g-4 .card::after {
        height: 250px;
    }

    /* Remove featured layout on mobile */
    .gallery-section-wrapper .row.g-4 > div:nth-child(1),
    .gallery-section-wrapper .row.g-4 > div:nth-child(2) {
        grid-column: span 1;
    }

    .gallery-section-wrapper .row.g-4 > div:nth-child(1) .card .card-img-top,
    .gallery-section-wrapper .row.g-4 > div:nth-child(2) .card .card-img-top {
        height: 250px !important;
    }
}

/* Performance Optimization for 30+ Images */
.gallery-section-wrapper .row.g-4 .card .card-img-top {
    will-change: transform;
}

.gallery-section-wrapper .row.g-4 .card {
    will-change: transform, box-shadow;
}

/* Accessibility */
.gallery-section-wrapper .row.g-4 .card:focus-within {
    outline: 3px solid #02723d;
    outline-offset: 4px;
}

/* ============================================
   Project Gallery – Equal Size Images
   ============================================ */

.project-gallery-img {
    width: 100%;
    height: 220px;          /* You can change to 250px if you want bigger */
    object-fit: cover;     /* Crop instead of stretch */
    display: block;
}

/* Optional: add smooth hover zoom */
.project-gallery-img:hover {
    transform: scale(1.04);
    transition: 0.3s ease;
}


/* ===== END GALLERY SECTION ===== */

/* Partner logos container */
.partner__slider-single {
    height: 150px;              /* controls logo box height */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;           /* optional: makes logos stand out */
    padding: 15px;
    border-radius: 8px;
}

/* Logos themselves */
.partner__slider-single img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;        /* prevents distortion */
    filter: grayscale(0%);      /* remove if you want gray logos */
}

/* Safe wrapper (no Bootstrap or theme classes) */
.react-back-row {
    width: 100%;
    margin-bottom: 30px;
}

/* Button */
.react-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 40px;
    background: transparent;
    border: 2px solid #020e74;
    color: #020e74;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.react-back-btn:hover {
    background: #020e74;
    color: #ffffff;
    transform: translateX(-4px);
}

.react-back-btn:active {
    transform: scale(0.96);
}



/* =========================================
   SPECIFIC FIXES FOR BANNER & FOOTER
   Add this to the BOTTOM of your style.css
========================================= */

/* ===== BANNER SECTION FIXES ===== */

/* Sub-title text */
.banner-two__slider-content .sub-title,
.sub-title.title-animation {
    color: #014d29 !important;
    /* If you want it in REACT colors instead: */
    /* color: #02723d !important; */
}
.cause__slider-cta{
    background: linear-gradient(135deg, #020e74 0%, #02723d 100%) !important;
    border-color: #020e74 !important;
    color: #ffffff !important;
}
/* Main heading in banner */
.banner-two__slider-content h1 {
    color: #ffffff !important;
}

/* Bottom line underline */
.banner-two__slider-content h1 .bottom-line {
    color: #ffffff !important;
    border-bottom-color: #02723d !important;
}

/* H4 subtitle */
.banner-two__slider-content h4.sub-title {
    color: #e8f0ff !important;
}

/* Banner buttons - Primary */
.banner-two__slider-content .btn--primary {
    background: linear-gradient(135deg, #020e74 0%, #02723d 100%) !important;
    border-color: #020e74 !important;
    color: #ffffff !important;
}

.btn--primary {
    background: linear-gradient(135deg, #020e74 50%, #02723d 50%) !important;
    border-color: #020e74 !important;
    color: #ffffff !important;
}

.banner-two__slider-content .btn--primary:hover {
    background: linear-gradient(135deg, #02723d 0%, #020e74 100%) !important;
    border-color: #02723d !important;
    color: #ffffff !important;
}

/* Banner buttons - Secondary */
.banner-two__slider-content .btn--secondary {
    background: linear-gradient(135deg, #020e74 0%, #02723d 100%) !important;
    border-color: #020e74 !important;
    color: #ffffff !important;
}

.banner-two__slider-content .btn--secondary:hover {
    background: linear-gradient(135deg, #02723d 0%, #020e74 100%) !important;
    border-color: #02723d !important;
    color: #ffffff !important;
}

.banner-two__slider-content .btn--secondary span {
    color: #ffffff !important;
}

/* Slider Navigation Buttons */
.slider-navigation .slider-btn,
.slider-navigation .prev-banner,
.slider-navigation .next-banner,
.slider-navigation .slider-btn-next {
    background: linear-gradient(135deg, #020e74 50%, #02723d 50%) !important;
    border-color: #020e74 !important;
    color: #ffffff !important;
}

.slider-navigation .slider-btn:hover,
.slider-navigation .prev-banner:hover,
.slider-navigation .next-banner:hover,
.slider-navigation .slider-btn-next:hover {
    background: linear-gradient(135deg, #02723d 0%, #020e74 100%) !important;
    border-color: #02723d !important;
    color: #ffffff !important;
}

.slider-navigation .slider-btn i,
.slider-navigation .prev-banner i,
.slider-navigation .next-banner i {
    color: #ffffff !important;
}

/* ===== FOOTER BOTTOM SECTION FIXES ===== */

/* Footer bottom background */
.footer__bottom {
    background: rgba(0, 0, 0, 0.3) !important;
    /* Or use REACT Dark Blue: */
    /* background: rgba(2, 14, 116, 0.2) !important; */
}

/* Footer bottom inner container */
.footer__bottom-inner {
    background: transparent !important;
}

/* Footer bottom links */
.footer__bottom-left a {
    color: rgba(255, 255, 255, 0.85) !important;
}

.footer__bottom-left a:hover {
    color: #ffffff !important;
}

/* Footer bottom text/copyright */
.footer__bottom-left p {
    color: rgba(255, 255, 255, 0.85) !important;
}

.footer__bottom-left p a {
    color: #ffffff !important;
    font-weight: 600;
}

.footer__bottom-left p a:hover {
    color: #02723d !important;
}

/* Footer bottom list separators */
.footer__bottom-list li span {
    background: rgba(255, 255, 255, 0.5) !important;
}

/* Social media icons in footer bottom */
.footer__bottom-right .social a {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.footer__bottom-right .social a:hover {
    background: linear-gradient(135deg, #020e74 0%, #02723d 100%) !important;
    border-color: #02723d !important;
    color: #ffffff !important;
}

.footer__bottom-right .social a i {
    color: #ffffff !important;
}

/* ===== ADDITIONAL BANNER ELEMENTS ===== */

/* Banner overlay (if exists) */
.banner-two__slider-bg::before,
.banner-two__slider-bg::after {
    background: linear-gradient(135deg, rgba(2, 14, 116, 0.7) 0%, rgba(2, 114, 61, 0.6) 100%) !important;
}

/* Banner content area */
.banner-two__slider-content {
    position: relative;
    z-index: 2;
}

/* Swiper pagination dots (if visible) */
.swiper-pagination-bullet-active {
    background: #02723d !important;
}

/* Swiper navigation (alternative style) */
.swiper-button-next,
.swiper-button-prev {
    color: #02723d !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    color: #020e74 !important;
}

/* ===== BANNER TEXT ANIMATIONS ===== */

/* Title animation class */
.title-animation {
    color: #ffffff !important;
}

/* Ensure all banner text is visible */
.banner-two__slider-content span,
.banner-two__slider-content h1,
.banner-two__slider-content h2,
.banner-two__slider-content h3,
.banner-two__slider-content h4,
.banner-two__slider-content h5,
.banner-two__slider-content p {
    color: #ffffff !important;
}

/* ===== END SPECIFIC FIXES ===== */

/* =========================================
   COMPLETE HOVER COLOR FIX
   Add this to the BOTTOM of your style.css
========================================= */

/* ===== ALL BUTTON HOVERS ===== */
.btn:hover,
.button:hover,
button:hover,
.btn-primary:hover,
.btn--primary:hover,
.btn-secondary:hover,
.btn--secondary:hover,
.primary-btn:hover,
.secondary-btn:hover,
.theme-btn:hover,
a.btn:hover,
a.button:hover,
[class*="btn"]:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
    background: linear-gradient(135deg, #02723d 50%, #020e74 50%) !important;
    border-color: #00ff84 !important;
    color: #00ff84 !important;
}

/* ===== LINK HOVERS ===== */
a:hover,
.link:hover,
[class*="link"]:hover {
    color: #00ff84 !important;
}

/* ===== NAVIGATION HOVERS ===== */
.navbar-nav .nav-link:hover,
.menu-item a:hover,
.nav-menu li a:hover,
header nav li a:hover,
.navigation li a:hover,
.main-menu li a:hover,
nav a:hover,
.header a:hover {
    color: #00ff84 !important;
}

/* ===== CARD/BOX HOVERS ===== */
.card:hover,
.box:hover,
.item:hover,
.service:hover,
.feature:hover,
.project:hover,
.cause:hover,
.campaign:hover,
.post:hover,
.article:hover,
[class*="card"]:hover,
[class*="box"]:hover {
    border-color: #02723d !important;
    box-shadow: 0 15px 40px rgba(2, 114, 61, 0.2) !important;
}

/* ===== ICON HOVERS ===== */
i:hover,
.icon:hover,
.fa:hover,
[class*="icon"]:hover,
[class^="fa-"]:hover {
    color: #02723d !important;
}

/* ===== SOCIAL MEDIA ICON HOVERS ===== */
.social a:hover,
.social-links a:hover,
.social-icon:hover,
[class*="social"] a:hover {
    background: linear-gradient(135deg, #020e74 50%, #02723d 50%) !important;
    border-color: #02723d !important;
    color: #00ff84 !important;
}

/* ===== IMAGE/THUMB HOVERS ===== */
.thumb:hover,
.thumbnail:hover,
.image-wrapper:hover,
[class*="thumb"]:hover,
[class*="image"]:hover {
    border-color: #02723d !important;
}

/* ===== LIST ITEM HOVERS ===== */
ul li:hover,
ol li:hover,
.list-item:hover,
.menu-item:hover {
    color: #00ff84 !important;
}

/* ===== PAGINATION HOVERS ===== */
.pagination .page-link:hover,
.page-numbers:hover,
[class*="pagination"] a:hover {
    color: #02723d !important;
    border-color: #02723d !important;
    background-color: rgba(2, 114, 61, 0.1) !important;
}

/* ===== TAB HOVERS ===== */
.nav-tabs .nav-link:hover,
.tab:hover,
.tab-item:hover,
[class*="tab"] a:hover {
    color: #02723d !important;
    border-color: #02723d !important;
}

/* ===== DROPDOWN HOVERS ===== */
.dropdown-item:hover,
.dropdown-menu a:hover,
[class*="dropdown"] a:hover {
    background-color: rgba(2, 114, 61, 0.1) !important;
    color: #02723d !important;
}

/* ===== FORM ELEMENT HOVERS ===== */
input:hover,
textarea:hover,
select:hover,
.form-control:hover,
.form-select:hover {
    border-color: #02723d !important;
}

/* ===== SPECIFIC TEMPLATE ELEMENTS ===== */
/* Donate/Contribution Buttons */
.donate-btn:hover,
.donation-btn:hover,
.contribute-btn:hover,
.give-btn:hover {
    background: linear-gradient(135deg, #02723d 50%, #020e74 50%) !important;
    color: #ffffff !important;
}

/* Team/Member Cards */
.team-member:hover,
.member-card:hover,
.volunteer:hover {
    border-color: #02723d !important;
}

/* Event Cards */
.event:hover,
.event-card:hover,
.event-item:hover {
    border-color: #02723d !important;
}

/* Blog/Post Elements */
.blog-post:hover,
.post-card:hover,
.article-card:hover {
    border-color: #00ff84 !important;
}

.post-title a:hover,
.blog-title a:hover,
.article-title a:hover {
    color: #00ff84 !important;
}

/* Category/Tag Hovers */
.category:hover,
.tag:hover,
.badge:hover,
.label:hover {
    background: #02723d !important;
    color: #ffffff !important;
}

/* ===== BACKGROUND HOVERS ===== */
[class*="bg-"]:hover,
.background:hover {
    background-color: rgba(2, 114, 61, 0.1) !important;
}

/* ===== OVERLAY HOVERS ===== */
.overlay:hover,
[class*="overlay"]:hover::before,
[class*="overlay"]:hover::after {
    background: linear-gradient(135deg, rgba(2, 14, 116, 0.9) 50%, rgba(2, 114, 61, 0.9) 50%) !important;
}

/* ===== FOOTER LINK HOVERS ===== */
footer a:hover,
.footer a:hover,
.footer-widget a:hover,
.footer-menu a:hover {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ===== BREADCRUMB HOVERS ===== */
.breadcrumb-item a:hover {
    color: #ffffff !important;
}

/* ===== TABLE ROW HOVERS ===== */
table tr:hover,
.table tr:hover,
tbody tr:hover {
    background-color: #00ff84 !important;
}

/* ===== ACCORDION HOVERS ===== */
.accordion-button:hover,
.accordion-header:hover,
[class*="accordion"]:hover {
    background-color: rgba(2, 114, 61, 0.1) !important;
    color: #02723d !important;
}

/* ===== SPECIFIC HOVER STATES WITH ::before and ::after ===== */
a::before,
a::after,
button::before,
button::after,
[class*="btn"]::before,
[class*="btn"]::after {
    background: linear-gradient(135deg, #02723d 50%, #020e74 50%) !important;
}

/* ===== SEARCH FORMS ===== */
.search-form button:hover,
.search-button:hover,
.search-submit:hover {
    background: linear-gradient(135deg, #02723d 50%, #020e74 50%) !important;
    border-color: #02723d !important;
}

/* ===== PROGRESS/SKILL BARS ON HOVER ===== */
.progress-bar:hover,
.skill-bar:hover,
.percentage-bar:hover {
    background: linear-gradient(90deg, #02723d 0%, #020e74 100%) !important;
}

/* ===== SLIDER/CAROUSEL CONTROLS ===== */
.slick-prev:hover,
.slick-next:hover,
.carousel-control:hover,
.slider-arrow:hover,
.owl-prev:hover,
.owl-next:hover {
    background: linear-gradient(135deg, #020e74 50%, #02723d 50%) !important;
    border-color: #00ff84 !important;
}

/* ===== VIDEO PLAY BUTTONS ===== */
.video-play:hover,
.play-btn:hover,
[class*="play"]:hover {
    background: linear-gradient(135deg, #020e74 0%, #02723d 100%) !important;
}

/* ===== COUNTERS/STATS ===== */
.counter:hover,
.stat-box:hover,
.count-item:hover {
    border-color: #02723d !important;
}

/* ===== TESTIMONIALS ===== */
.testimonial:hover,
.review:hover,
.testimonial-card:hover {
    border-color: #02723d !important;
}

/* ===== PORTFOLIO/GALLERY ITEMS ===== */
.portfolio-item:hover,
.gallery-item:hover,
.project-item:hover {
    border-color: #02723d !important;
}

/* ===== PRICING TABLES ===== */
.pricing-table:hover,
.price-card:hover,
.pricing-plan:hover {
    border-color: #02723d !important;
}

/* ===== BACK TO TOP BUTTON ===== */
.back-to-top:hover,
.scroll-top:hover,
[class*="scroll"]:hover {
    background: linear-gradient(135deg, #020e74 0%, #02723d 100%) !important;
}

/* ===== END HOVER COLOR FIX ===== */

/* 
   IF HOVERS STILL SHOW OLD COLOR:
   1. Right-click the element showing wrong hover color
   2. Click "Inspect"
   3. Hover over it to see which CSS rule applies
   4. Find the class name
   5. Add it below with !important:
   
   .your-specific-class:hover {
       background: linear-gradient(135deg, #02723d 0%, #020e74 100%) !important;
       color: #ffffff !important;
       border-color: #02723d !important;
   }
*/