:root {
    --primary-blue: #0038A8;
    --secondary-blue: #0B4CC2;
    --white: #ffffff;
    --dark: #222222;
    --light-gray: #f5f5f5;

    --container-width: 1200px;

    --heading-font: Arial, sans-serif;
    --body-font: Arial, sans-serif;
}

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

body{
    font-family:system-ui,sans-serif;
}

.container{
    max-width:1200px;
    margin:auto;
    padding:0 20px;
}

/* TOP BAR */

.top-bar{
    background:#0038A8;
    color:white;
    font-size:14px;
}

.top-bar-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:50px;
}

.top-left,
.top-right{
    display:flex;
    align-items:center;
    gap:20px;
}

.top-bar a{
    color:white;
    text-decoration:none;
}

/* HEADER */

.header{
    background:white;
    min-height:90px;
    display:flex;
    align-items:center;
    border-bottom:1px solid #eee;
}

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

.logo img{
    height:60px;
}

.header-actions{
    display:flex;
    align-items:center;
    gap:20px;
}

.menu-btn{
    border:none;
    background:none;
    font-size:30px;
    cursor:pointer;
}

.donate-btn{
    background:#0038A8;
    color:white;
    text-decoration:none;
    padding:12px 20px;
    font-weight:600;
}

/* SIDEBAR */

.sidebar{
    position:fixed;
    top:0;
    right:-300px;
    width:300px;
    height:100vh;
    background:white;
    transition:.3s;
    box-shadow:-2px 0 10px rgba(0,0,0,.1);
    padding:40px 20px;
}

.sidebar.active{
    right:0;
}

.close-btn{
    border:none;
    background:none;
    font-size:35px;
    cursor:pointer;
}

.sidebar ul{
    list-style:none;
    margin-top:30px;
}

.sidebar li{
    margin-bottom:20px;
}

.sidebar a{
    text-decoration:none;
    color:#222;
    font-size:18px;
}

/* FOOTER */

.footer{
    background:#0038A8;
    color:white;
    margin-top:60px;
}

.footer-container{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr;
    gap:50px;
    padding:60px 20px;
}

.footer h3,
.footer h4{
    margin-bottom:20px;
}

.footer-about{
    line-height:1.8;
    margin-bottom:30px;
}

.social-links{
    display:flex;
    gap:10px;
}

.social-links a{
    width:40px;
    height:40px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(255,255,255,.15);
    color:white;
    text-decoration:none;
}

.footer ul{
    list-style:none;
}

.footer ul li{
    margin-bottom:12px;
}

.footer ul a{
    text-decoration:none;
    color:white;
}

.footer ul a:hover{
    opacity:.8;
}

.contact-item{
    display:flex;
    gap:12px;
    margin-bottom:20px;
    line-height:1.6;
}

.contact-item a{
    color:white;
    text-decoration:none;
}

.footer-bottom{
    background:white;
    color:#333;
    padding:15px 0;
}

.footer-bottom-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:14px;
}

.contact-banner{
    height:300px;

    background:
        linear-gradient(
            rgba(0,56,168,.75),
            rgba(0,56,168,.75)
        ),
        url("../images/contact-banner.webp");

    background-size:cover;
    background-position:center;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;
}

.contact-banner h1{
    color:white;
    font-size:60px;
    margin-bottom:10px;
}

.contact-banner p{
    color:white;
}

.contact-info{
    background:#0038A8;
    color:white;
    padding:70px 0;
}

.contact-info h2{
    margin-bottom:40px;
}

.contact-card{
    display:flex;
    gap:20px;
    margin-bottom:30px;
}

.icon{
    width:60px;
    height:60px;

    border-radius:50%;

    background:#7AC943;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:22px;
}
.contact-form-section{
    background:#f5f5f5;
    padding:80px 0;
}

.contact-form-section h2{
    text-align:center;
    margin-bottom:40px;
    color:#0038A8;
}

.contact-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.contact-form textarea{
    grid-column:span 2;
    height:150px;
}

.contact-form input,
.contact-form textarea{
    padding:15px;
    border:1px solid #ddd;
}

.contact-form button{
    grid-column:span 2;

    width:180px;

    margin:auto;

    background:#7AC943;
    color:white;

    border:none;

    padding:15px;
    cursor:pointer;
}
.donors{
    padding:80px 0;
}

.donors h2{
    text-align:center;
    color:#0038A8;
    margin-bottom:40px;
}

.donor-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.donor-grid img{
    width:100%;
    border:1px solid #ddd;
    padding:20px;
}


/* ===========================
   OUR COMMITMENT
=========================== */

.commitment-section{

    padding:90px 0;

    background:#ffffff;

}

.section-heading{

    text-align:center;

    max-width:800px;

    margin:0 auto 60px;

}

.section-heading span{

    color:#8CC63F;

    font-weight:700;

    letter-spacing:2px;

}

.section-heading h2{

    font-size:42px;

    color:#0038A8;

    margin:15px 0 20px;

}

.section-heading p{

    color:#666;

    line-height:1.8;

}

.commitment-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.commitment-card{

    background:#fff;

    padding:35px;

    border-radius:15px;

    text-align:center;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.35s;

    border-top:5px solid #8CC63F;

}

.commitment-card:hover{

    transform:translateY(-10px);

}

.commitment-icon{

    width:75px;

    height:75px;

    margin:auto auto 25px;

    border-radius:50%;

    background:#0038A8;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

}

.commitment-card h3{

    color:#0038A8;

    margin-bottom:15px;

}

.commitment-card p{

    color:#555;

    line-height:1.8;

}

/*==========================
    IMPACT MESSAGE
===========================*/

.impact-message{

    padding:90px 0;

    background:#ffffff;

    text-align:center;

}

.impact-message .container{

    max-width:900px;

}

.section-tag{

    display:inline-block;

    color:#8CC63F;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:15px;

}

.impact-message h2{

    font-size:42px;

    color:#0038A8;

    line-height:1.3;

    margin-bottom:25px;

    font-weight:700;

}

.impact-message p{

    font-size:18px;

    color:#666;

    line-height:1.9;

}


/* =========================
   NEWS BANNER
========================= */

.news-banner{
    height:300px;

    background:
    linear-gradient(
        rgba(0,56,168,.8),
        rgba(0,56,168,.8)
    ),
    url("../images/news/banner.webp");

    background-size:cover;
    background-position:center;

    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.news-banner h1{
    color:#fff;
    font-size:70px;
    font-weight:700;
    margin-bottom:10px;
}

.news-banner p{
    color:#fff;
    font-size:18px;
    letter-spacing:1px;
}

/* =========================
   NEWS PAGE LAYOUT
========================= */

.news-page{
    padding:70px 0;
    background:#f7f7f7;
}

.news-layout{
    display:grid;
    grid-template-columns:3fr 1fr;
    gap:30px;
}

/* =========================
   NEWS GRID
========================= */

.news-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

/* =========================
   NEWS CARD
========================= */

/* ===========================
   NEWS CARD
=========================== */

.news-card{

    background:#fff;

    border-radius:14px;

    overflow:hidden;

    text-decoration:none;

    color:#222;

    display:flex;

    flex-direction:column;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;
}

.news-card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 40px rgba(0,0,0,.16);

}

.news-card img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.5s;
}

.news-card:hover img{

    transform:scale(1.08);

}

/* Category */

.category{

    position:absolute;

    top:18px;

    right:18px;

    background:#8CC63F;

    color:#fff;

    padding:8px 16px;

    border-radius:30px;

    font-size:12px;

    font-weight:600;

    letter-spacing:.5px;

    text-transform:uppercase;
}

/* Content */

.news-content{

    padding:25px;

    flex:1;
}

/* Date */

.news-date{

    color:#888;

    font-size:14px;

    margin-bottom:15px;

}

/* Title */

.news-content h3{

    color:#0038A8;

    font-size:26px;

    line-height:1.45;

    margin-bottom:18px;

}

/* Description */

.news-content p{

    color:#666;

    line-height:1.8;

    margin-bottom:25px;
}

/* Read More */

.read-more{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#0038A8;

    font-weight:700;

    transition:.3s;
}

.news-card:hover .read-more{

    color:#8CC63F;

    gap:14px;

}
/* =========================
   CATEGORY BADGE
========================= */

.category{
    position:absolute;
    top:15px;
    right:15px;

    background:#c8d74a;
    color:#fff;

    padding:6px 14px;

    border-radius:20px;

    font-size:12px;
    font-weight:600;

    text-transform:uppercase;
}

/* =========================
   NEWS CONTENT
========================= */

.news-content{
    padding:25px;
    flex-grow:1;
}

.news-content h3{
    color:#0038A8;
    line-height:1.5;
    margin-bottom:20px;
    font-size:24px;
}

.read-more{
    color:#0038A8;
    font-size:13px;
    font-weight:600;
    letter-spacing:.5px;
}

/* =========================
   NEWS DATE
========================= */

.news-date{
    border-top:1px solid #eee;

    padding:15px 25px;

    color:#777;

    font-size:13px;
}

/* =========================
   SIDEBAR
========================= */

.news-sidebar{
    position:sticky;
    top:120px;
    height:fit-content;
}

.sidebar-box{
    background:#fff;

    padding:30px;

    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.sidebar-box h3{
    color:#0038A8;
    margin-bottom:25px;
}

.sidebar-box ul{
    list-style:none;
}

.sidebar-box li{
    margin-bottom:15px;
}

.sidebar-box a{
    color:#333;
    text-decoration:none;
    transition:.3s;
}

.sidebar-box a:hover{
    color:#0038A8;
}

/* VOLUNTEER BANNER */

.volunteer-banner{
    height:450px;

    background:
    linear-gradient(
        rgba(0,56,168,.75),
        rgba(0,56,168,.75)
    ),
    url("../images/volunteer/banner.webp");

    background-size:cover;
    background-position:center;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;
}

.volunteer-banner h1{
    color:#fff;
    font-size:70px;
}

.volunteer-banner p{
    color:#fff;
    font-size:20px;
}

/* WHY VOLUNTEER */

/* ===========================
   WHY VOLUNTEER
=========================== */

.why-volunteer{

    padding:100px 0;

    background:#f8f9fc;

}

.why-volunteer .container{

    display:grid;

    grid-template-columns:380px 1fr;

    gap:60px;

    align-items:center;

}

/* Quote Card */

.quote-box{

    background:#fff;

    padding:50px 40px;

    border-radius:15px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    text-align:center;

    position:sticky;

    top:120px;

}

.quote-icon{

    font-size:70px;

    color:#0038A8;

    display:block;

    margin-bottom:20px;

}

.quote-box blockquote{

    font-size:24px;

    line-height:1.6;

    color:#0038A8;

    font-style:italic;

    margin-bottom:25px;

}

.quote-box h4{

    color:#8CC63F;

    font-size:20px;

}

/* Text */

.volunteer-text p{

    font-size:18px;

    color:#555;

    line-height:2;

    margin-bottom:25px;

    text-align:justify;

}

/* OPPORTUNITIES */

/*==========================================
        VOLUNTEERING OPPORTUNITIES
==========================================*/

.opportunities{
    padding:100px 0;
    background:#f8f9fc;
}

.opportunities h2{
    text-align:center;
    color:#0038A8;
    font-size:42px;
    margin-bottom:15px;
}

.section-intro{
    text-align:center;
    color:#666;
    font-size:18px;
    line-height:1.8;
    max-width:750px;
    margin:0 auto 60px;
}

/*==============================
        GRID
==============================*/

.opportunity-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:35px;
}

/*==============================
        CARD
==============================*/

.opportunity-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:all .35s ease;
}

.opportunity-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.opportunity-card img{
    width:100%;
    height:240px;
    object-fit:cover;
    display:block;
}

/*==============================
      CARD CONTENT
==============================*/

.card-content{
    padding:30px;
}

.card-content h3{
    color:#0038A8;
    font-size:28px;
    margin-bottom:20px;
    line-height:1.4;
}

.card-content p{
    color:#555;
    font-size:16px;
    line-height:1.9;
    margin:0;
}

/*==============================
        LIST
==============================*/

.card-content ul{
    list-style:none;
    padding:0;
    margin:0;
}

.card-content li{
    position:relative;
    padding:12px 0 12px 28px;
    border-bottom:1px solid #eee;
    color:#555;
    font-size:16px;
    line-height:1.8;
}

.card-content li:last-child{
    border-bottom:none;
}

.card-content li::before{
    content:"✔";
    position:absolute;
    left:0;
    top:14px;
    color:#8CC63F;
    font-weight:bold;
    font-size:15px;
}

.card-content strong{
    color:#0038A8;
    font-weight:600;
}

/*==============================
        BUTTON (OPTIONAL)
==============================*/

.card-content a{
    display:inline-block;
    margin-top:20px;
    color:#0038A8;
    font-weight:700;
    text-decoration:none;
    transition:.3s;
}

.card-content a:hover{
    color:#8CC63F;
}

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

@media (max-width:992px){

    .opportunities{
        padding:80px 0;
    }

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

    .card-content h3{
        font-size:24px;
    }

}

@media (max-width:768px){

    .opportunities{
        padding:70px 0;
    }

    .section-intro{
        font-size:16px;
        margin-bottom:40px;
    }

    .opportunity-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .opportunity-card img{
        height:220px;
    }

    .card-content{
        padding:22px;
    }

    .card-content h3{
        font-size:22px;
    }

    .card-content p,
    .card-content li{
        font-size:15px;
    }

}

@media (max-width:480px){

    .opportunities h2{
        font-size:30px;
    }

    .section-intro{
        font-size:15px;
    }

    .card-content{
        padding:20px;
    }

    .card-content h3{
        font-size:20px;
    }

    .opportunity-card img{
        height:200px;
    }

}


/* KNOWLEDGE */

.knowledge-sharing{
    background:#0038A8;
    padding:80px 0;
}

.knowledge-sharing h2{
    color:#fff;
    text-align:center;
    margin-bottom:50px;
}

.knowledge-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.knowledge-card{
    background:#fff;
    padding:30px;
    text-align:center;
}

.knowledge-icon{
    width:80px;
    height:80px;
    border-radius:50%;
    background:#8CC63F;
    color:#fff;
    margin:auto;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:30px;
}

/* CTA */

.volunteer-cta{
    height:400px;

    background:
    linear-gradient(
        rgba(255,255,255,.7),
        rgba(255,255,255,.7)
    ),
    url("../images/volunteer/cta.webp");

    background-size:cover;
    background-position:center;

    display:flex;
    justify-content:center;
    align-items:center;
}

.volunteer-btn{
    background:#8CC63F;
    color:#fff;
    padding:15px 35px;
    text-decoration:none;
    font-weight:600;
}


/* PROGRAM BANNER */

.program-banner{
    height:350px;
    background:#0038A8;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.program-banner h1{
    color:#fff;
    font-size:60px;
}

.program-banner p{
    color:#fff;
}

/* GALLERY */

.featured-program{
    padding:80px 0;
}

.featured-program{
    padding:80px 0;
}

.main-image{
    margin-bottom:25px;
    overflow:hidden;
    border-radius:12px;
}

.main-image img{

    width:100%;
    height:550px;

    object-fit:cover;

    display:block;

    transition:.4s;

}

.main-image:hover img{

    transform:scale(1.05);

}

.gallery-row{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}

.gallery-row img{

    width:100%;

    height:220px;

    object-fit:cover;

    border-radius:10px;

    transition:.3s;

}

.gallery-row img:hover{

    transform:scale(1.05);

}
/* PLACEHOLDERS */

.placeholder-image{
    background:#e5e5e5;
    border:2px dashed #ccc;

    display:flex;
    justify-content:center;
    align-items:center;

    color:#777;
    font-weight:600;

    min-height:180px;
}

.large{
    min-height:450px;
}

.card-image{
    height:220px;
}


/*=========================================
        FLAGSHIP PROGRAMMES
=========================================*/

.flagship-programs{
    padding:100px 0;
    background:#fff;
}

.flagship-card{
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:50px;
    align-items:center;
    margin-top:70px;
    padding:35px;
    background:#fff;
    border-radius:20px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
}

.flagship-card.reverse{
    grid-template-columns:1.1fr 1fr;
}

.flagship-card.reverse .program-image{
    order:2;
}

.flagship-card.reverse .program-content{
    order:1;
}

.program-image img{
    width:100%;
    border-radius:18px;
    display:block;
}

.program-tag{
    display:inline-block;
    background:#eaf4ff;
    color:#0038A8;
    padding:8px 18px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    margin-bottom:18px;
}

.program-content h3{
    font-size:34px;
    color:#0038A8;
    margin-bottom:20px;
}

.program-content p{
    color:#555;
    line-height:1.9;
    margin-bottom:18px;
}

.program-tags{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:25px;
}

.program-tags span{
    background:#8CC63F;
    color:#fff;
    padding:8px 18px;
    border-radius:30px;
    font-size:14px;
}


/*=========================================
      SKILLS FOR BRIGHTER TOMORROW
=========================================*/

.brighter-tomorrow{

    background:
    linear-gradient(rgba(0,56,168,.85),rgba(0,56,168,.85)),
    url("../images/programs/Programs-Empowering youth through emerging technologies.jpg");

    background-size:cover;
    background-position:center;
    background-attachment:fixed;

    color:#fff;
    text-align:center;
}

.brighter-tomorrow .overlay{
    padding:120px 20px;
}

.brighter-tomorrow span{
    display:block;
    color:#8CC63F;
    letter-spacing:2px;
    font-weight:700;
    margin-bottom:18px;
}

.brighter-tomorrow h2{
    font-size:48px;
    margin-bottom:30px;
}

.brighter-tomorrow p{
    max-width:850px;
    margin:auto;
    line-height:2;
    font-size:18px;
}

.brighter-tomorrow .btn-primary{

    margin-top:40px;
    display:inline-block;

}


/*=========================================
          TESTIMONIALS
=========================================*/

.student-testimonials{

    padding:100px 0;

    background:#f7f9fc;

}

.testimonial-card{

    display:grid;

    grid-template-columns:280px 1fr;

    gap:45px;

    align-items:center;

    background:#fff;

    border-radius:22px;

    padding:35px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    margin-top:50px;

    transition:.35s;

}

.testimonial-card:hover{

    transform:translateY(-8px);

}

.testimonial-card.reverse{

    grid-template-columns:1fr 280px;

}

.testimonial-card.reverse .testimonial-image{

    order:2;

}

.testimonial-card.reverse .testimonial-content{

    order:1;

}

.testimonial-image img{

    width:100%;

    border-radius:18px;

    display:block;

}

.quote{

    font-size:26px;

    color:#0038A8;

    font-weight:700;

    font-style:italic;

    margin-bottom:20px;

    line-height:1.5;

}

.testimonial-content h3{

    color:#222;

    font-size:30px;

    margin-bottom:6px;

}

.testimonial-content h4{

    color:#8CC63F;

    margin-bottom:25px;

    font-weight:600;

}

.testimonial-content p{

    color:#555;

    line-height:2;

    margin-bottom:25px;

}

.testimonial-content a{

    color:#0038A8;

    font-weight:700;

    text-decoration:none;

}

.testimonial-content a:hover{

    color:#8CC63F;

}


/*=========================================
      SECTION HEADING
=========================================*/

.section-heading{

    text-align:center;

    margin-bottom:60px;

}

.section-heading span{

    color:#8CC63F;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    display:block;

    margin-bottom:15px;

}

.section-heading h2{

    color:#0038A8;

    font-size:44px;

    margin-bottom:20px;

}

.section-heading p{

    max-width:800px;

    margin:auto;

    color:#666;

    line-height:1.9;

}


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

@media(max-width:992px){

.flagship-card,
.flagship-card.reverse{

    grid-template-columns:1fr;

}

.flagship-card.reverse .program-image,
.flagship-card.reverse .program-content{

    order:unset;

}

.testimonial-card,
.testimonial-card.reverse{

    grid-template-columns:1fr;

}

.testimonial-card.reverse .testimonial-image,
.testimonial-card.reverse .testimonial-content{

    order:unset;

}

.program-content h3{

    font-size:30px;

}

.brighter-tomorrow h2{

    font-size:38px;

}

.quote{

    font-size:22px;

}

}

@media(max-width:768px){

.flagship-programs,
.student-testimonials{

    padding:70px 0;

}

.flagship-card{

    padding:25px;

}

.testimonial-card{

    padding:25px;

}

.brighter-tomorrow .overlay{

    padding:90px 20px;

}

.brighter-tomorrow h2{

    font-size:32px;

}

.section-heading h2{

    font-size:34px;

}

.program-content h3{

    font-size:26px;

}

.quote{

    font-size:20px;

}

}
/* DESCRIPTION */

/* ===========================
   PROGRAM DESCRIPTION
=========================== */

.program-description{

    padding:90px 0;

    background:#fff;

}

.program-description h2{

    text-align:center;

    color:#0038A8;

    font-size:42px;

    margin-bottom:40px;

}

.program-description p{

    max-width:1100px;

    margin:0 auto 22px;

    font-size:18px;

    line-height:1.9;

    color:#555;

    text-align:center;

}

/* Quote */

.program-description blockquote{

    max-width:900px;

    margin:55px auto 18px;

    padding:30px 40px;

    background:#f8f9fc;

    border-left:6px solid #8CC63F;

    border-radius:10px;

    color:#0038A8;

    font-size:24px;

    font-style:italic;

    font-weight:600;

    line-height:1.6;

    text-align:center;

}

.quote-author{

    display:block;

    text-align:center;

    color:#666;

    font-size:17px;

    font-weight:600;

}

/* CARDS */

.program-highlights{

    padding:90px 0;

    background:#f8f9fc;

}

.highlight-card{

    display:grid;

    grid-template-columns:380px 1fr;

    background:#fff;

    border-radius:16px;

    overflow:hidden;

    margin-bottom:40px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

}


.highlight-card:hover{

    transform:translateY(-8px);

}

.highlight-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.card-body{

    padding:35px;

}

.program-tag{

    display:inline-block;

    padding:8px 18px;

    background:#8CC63F;

    color:#fff;

    border-radius:30px;

    font-size:13px;

    margin-bottom:20px;

}

.card-body h3{

    color:#0038A8;

    font-size:32px;

    margin-bottom:18px;

}

.card-body p{

    color:#555;

    line-height:1.8;

    margin-bottom:25px;

}

.card-body ul{

    list-style:none;

    padding:0;

    margin-bottom:25px;

}

.card-body li{

    padding:8px 0;

}

.card-body li::before{

    content:"✔";

    color:#8CC63F;

    margin-right:10px;

}

.card-body a{

    color:#0038A8;

    text-decoration:none;

    font-weight:700;

}
.hero{
    height:550px;

    background:
    linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.45)
    ),
    url("../images/home/About-Corporate\ Engagement.JPG");

    background-size:cover;
    background-position:center;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;
}

.hero h1{
    color:#fff;
    font-size:60px;
    margin-bottom:20px;
}

.hero p{
    color:#fff;
    font-size:24px;
}
.about-home{
    padding:100px 0;
    text-align:center;
}

.about-home h2{
    color:#0038A8;
    margin-bottom:30px;
    font-size:40px;
}

.about-home p{
    max-width:800px;
    margin:auto;
    line-height:1.8;
}
.impact-stats{
    background:#edf4e7;
    padding:80px 0;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px 60px;
}

.stat{
    display:flex;
    align-items:center;
    gap:20px;

    padding-bottom:20px;
    border-bottom:1px solid #cfd7c8;
}

.stat-icon img{
    width:50px;
    height:50px;
    object-fit:contain;
}

.stat-content h3{
    color:#0038A8;
    font-size:36px;
    margin-bottom:5px;
    font-weight:700;
}

.stat-content p{
    color:#555;
    font-size:15px;
    line-height:1.5;
}
.volunteer-home{
    height:450px;

    background:
    linear-gradient(
        rgba(255,255,255,.45),
        rgba(255,255,255,.45)
    ),
    url("../images/home");

    background-size:cover;
    background-position:center;

    display:flex;
    align-items:center;
    justify-content:center;
}
.donate-home{
    height:350px;

    background:
    linear-gradient(
        rgba(0,56,168,.75),
        rgba(0,56,168,.75)
    ),
    url("../images/home/Make-a-Positive-Impact-on-Home.jpeg");

    background-size:cover;
    background-position:center;

    display:flex;
    justify-content:center;
    align-items:center;
}

/* ===========================
   CTA BUTTON
=========================== */

.cta-btn{

    display:inline-flex;
    align-items:center;
    gap:12px;

    padding:18px 40px;

    background:#8CC63F;

    color:#fff;
    text-decoration:none;

    font-size:18px;
    font-weight:700;

    text-transform:uppercase;

    border-radius:50px;

    box-shadow:0 10px 25px rgba(0,0,0,.25);

    transition:all .35s ease;
}

.cta-btn i{

    font-size:20px;

}

.cta-btn:hover{

    background:#0038A8;

    transform:translateY(-6px);

    box-shadow:0 18px 35px rgba(0,0,0,.35);

}
.major-donors{
    padding:80px 0;
    text-align:center;
}

.donor-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:40px;
}

.donor-grid img{
    width:100%;
    max-height:80px;
    object-fit:contain;
}
/* ABOUT */

.about-banner{
    background:#4f67b5;
    padding:50px 0;
}

.banner-images{
    display:flex;
    justify-content:center;
    gap:30px;
}

.banner-images img{
    width:180px;
    height:180px;
    border-radius:50%;
    object-fit:cover;
    border:5px solid #fff;
}

.mission-section{
    padding:80px 0;
    text-align:center;
}

.mission-section h4{
    color:#000;
    font-size:28px;
    font-weight:700;
    margin-bottom:20px;
    letter-spacing:1px;
}

.mission-section h2{
    color:#0038A8;
    max-width:900px;
    margin:0 auto 35px;
    font-size:42px;
    line-height:1.3;
    font-weight:700;
}

.mission-section p{
    max-width:1100px;
    margin:0 auto;
    color:#444;
    font-size:18px;
    line-height:1.9;
}
/* PILLARS */

/* =========================
   THREE PILLARS
========================= */

.pillars{
    padding:80px 0;
}

.pillars h2{
    text-align:center;
    color:#0038A8;
    font-size:42px;
    margin-bottom:60px;
}

.pillar-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:50px;
}

.pillar-card{
    text-align:center;
    padding:0 20px;
}

.pillar-icon{
    width:80px;
    height:80px;
    border-radius:50%;
    background:#0038A8;
    color:#fff;

    margin:0 auto 25px;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:32px;
}

.pillar-card h3{
    color:#0038A8;
    font-size:28px;
    margin-bottom:20px;
    font-weight:700;
}

.pillar-card p{
    color:#444;
    font-size:17px;
    line-height:1.9;
    max-width:340px;
    margin:0 auto;
}

/* VALUES */

/*==============================
    VISION & MISSION
===============================*/

.vision-mission{
    padding:90px 0;
    background:#f7f9fc;
}

.section-heading{
    text-align:center;
    margin-bottom:60px;
}

.section-heading span{
    display:inline-block;
    color:#8CC63F;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.section-heading h2{
    color:#0038A8;
    font-size:42px;
    margin:0;
}

.vision-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:35px;
}

.vision-card{
    background:#fff;
    padding:45px 35px;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    text-align:center;
    transition:.35s;
}

.vision-card:hover{
    transform:translateY(-8px);
}

.vision-icon{
    width:90px;
    height:90px;
    background:#0038A8;
    color:#fff;
    border-radius:50%;
    margin:0 auto 25px;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:36px;
}

.vision-card h3{
    color:#0038A8;
    margin-bottom:20px;
    font-size:28px;
}

.vision-card p{
    color:#555;
    line-height:1.9;
    font-size:17px;
}

/* Mobile */

@media(max-width:768px){

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

    .section-heading h2{
        font-size:34px;
    }

}

/* =========================
   VALUES & ETHICS
========================= */

/* =========================
   VALUES & ETHICS
========================= */

.values-section{
    background:#f7f7f7;
    padding:90px 0;
}

.values-section h2{
    text-align:center;
    color:#0038A8;
    font-size:46px;
    font-weight:700;
    margin-bottom:60px;
}

.values-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:35px;
    align-items:stretch;
}

.value-card{
    background:#fff;

    padding:40px 30px;

    border:1px solid #e8e8e8;

    text-align:center;

    display:flex;
    flex-direction:column;
    align-items:center;

    min-height:520px;

    transition:.35s ease;

    box-shadow:0 3px 12px rgba(0,0,0,.05);
}

.value-card:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 35px rgba(0,0,0,.12);

}

/* ICON */

.value-icon{

    margin-bottom:25px;

}

.value-icon img{

    width:75px;
    height:75px;

    object-fit:contain;

}

/* Divider */

.value-icon::after{

    content:"";

    display:block;

    width:60px;
    height:3px;

    background:#0038A8;

    margin:18px auto 0;

}

/* Title */

.value-card h3{

    color:#0038A8;

    font-size:30px;

    font-weight:700;

    margin-bottom:22px;

}

/* Description */

.value-card p{

    color:#555;

    font-size:17px;

    line-height:1.9;

    margin:0;

}


/*==================================
      UNITE & SERVE
===================================*/

.unite-serve{

    padding:100px 0;

    background:#f8f9fc;

}

.serve-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.serve-card{

    background:#fff;

    padding:35px;

    border-radius:18px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

    border-top:5px solid #8CC63F;

}

.serve-card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 40px rgba(0,0,0,.15);

}

.serve-icon{

    width:75px;

    height:75px;

    background:#0038A8;

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    margin-bottom:25px;

}

.serve-card h3{

    color:#0038A8;

    font-size:24px;

    margin-bottom:20px;

}

.serve-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.serve-card li{

    position:relative;

    padding-left:28px;

    margin-bottom:15px;

    line-height:1.8;

    color:#555;

}

.serve-card li::before{

    content:"✔";

    position:absolute;

    left:0;

    color:#8CC63F;

    font-weight:bold;

}

@media(max-width:768px){

    .serve-grid{

        grid-template-columns:1fr;

    }

}

/* INITIATIVES */

/* =========================
   FEATURED INITIATIVES
========================= */

.featured-initiatives{
    padding:90px 0;
    background:#fff;
}

.featured-initiatives h2{
    text-align:center;
    color:#0038A8;
    font-size:42px;
    margin-bottom:50px;
}

.initiative-slider{
    position:relative;
    overflow:hidden;
}

.slider-track{
    display:flex;
    gap:35px;
    transition:transform .5s ease;
}

.initiative-card{
    min-width:500px;
    background:#fff;

    border-radius:12px;
    overflow:hidden;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    transition:.35s;
}

.initiative-card:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.initiative-card img{

    width:100%;
    height:300px;

    object-fit:cover;

    display:block;

}

.initiative-card h3{

    padding:25px 25px 15px;

    color:#0038A8;

    font-size:30px;

}

.initiative-card p{

    padding:0 25px 30px;

    color:#555;

    font-size:17px;

    line-height:1.8;

}

/* Navigation */

.slide-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#8CC63F;

    color:#fff;

    font-size:22px;

    cursor:pointer;

    transition:.3s;

    z-index:20;

}

.slide-btn:hover{

    background:#6fa52f;

}

.prev{

    left:-10px;

}

.next{

    right:-10px;

}
/* TRUSTEES */

/* =========================
   BOARD OF TRUSTEES
========================= */

.trustees{
    background:#111;
    color:#fff;
    padding:90px 0;
}

.trustees h2{
    text-align:center;
    color:#fff;
    font-size:42px;
    margin-bottom:60px;
}

.trustee-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
}

.trustee-card{
    background:#1d1d1d;
    border-radius:10px;
    overflow:hidden;
    transition:.3s;

    display:flex;
    flex-direction:column;

    height:100%;
}

.trustee-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,.35);
}

.trustee-image{
    height:340px;
    overflow:hidden;
    background:#ddd;
}

.trustee-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.trustee-content{
    padding:25px;
    flex:1;

    display:flex;
    flex-direction:column;
}

.trustee-content h3{
    color:#fff;
    font-size:24px;
    margin-bottom:10px;
}

.trustee-content h5{
    color:#8CC63F;
    font-size:15px;
    margin-bottom:18px;
    font-weight:500;
}

.trustee-content p{
    color:#ddd;
    font-size:15px;
    line-height:1.8;
}
.community-banner{
    height:350px;

    background:
    linear-gradient(
        rgba(79,103,181,.85),
        rgba(79,103,181,.85)
    ),
    url("../images/community/CommunityBanner.jpg");

    background-size:cover;
    background-position:center;

    display:flex;
    align-items:center;

    padding-left:80px;
}

.banner-content{
    max-width:450px;
}

.community-banner h1{
    color:#fff;
    font-size:42px;
    font-weight:700;
    line-height:1.3;
    text-transform:uppercase;
}
.community-stats{
    padding:80px 0;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
}

.stat-card{
    text-align:center;
}

.stat-card h2{
    color:#8CC63F;
    font-size:42px;
}

/* =========================
   INITIATIVES TEXT
========================= */

.initiatives-text{
    padding:90px 0;
    background:#fff;
}

.initiatives-text h2{
    text-align:center;
    color:#0038A8;
    font-size:42px;
    margin-bottom:40px;
}

.initiatives-text p{
    max-width:1100px;
    margin:0 auto 22px;
    text-align:center;

    color:#444;

    font-size:18px;

    line-height:1.9;
}

/* Quote */

.initiatives-text blockquote{

    max-width:900px;

    margin:50px auto 15px;

    padding:30px;

    background:#f7f9fc;

    border-left:6px solid #8CC63F;

    font-size:24px;

    font-style:italic;

    font-weight:600;

    color:#0038A8;

    text-align:center;

    border-radius:8px;
}

.quote-author{

    display:block;

    text-align:center;

    color:#666;

    font-size:16px;

    font-weight:600;
}

/* =========================
   COMMUNITY CENTERS
========================= */

.community-centers{
    padding:90px 0;
    background:#f7f7f7;
}

.community-centers h2{
    text-align:center;
    color:#0038A8;
    font-size:42px;
    margin-bottom:60px;
}

.center-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:40px;
}

.center-card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;

    display:flex;
    flex-direction:column;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    transition:.3s;
}

.center-card:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.center-image{
    height:320px;
    overflow:hidden;
}

.center-image img{
    width:100%;
    height:100%;
    object-fit:cover;

    display:block;

    transition:.4s;
}

.center-card:hover .center-image img{

    transform:scale(1.08);

}

.center-title{

    background:#0038A8;

    color:#fff;

    text-align:center;

    font-size:22px;

    font-weight:600;

    padding:18px;

}

.center-content{

    padding:30px;

    display:flex;

    flex-direction:column;

    flex:1;

}

.center-content p{

    color:#555;

    font-size:16px;

    line-height:1.8;

    margin-bottom:25px;

    text-align:justify;

}

.center-content strong{

    color:#0038A8;

    font-size:17px;

}

.center-content span{

    color:#444;

    margin-top:5px;

}

/* =========================
   JOIN COMMUNITY
========================= */

.join-community{
    padding:90px 0;
    background:#f7f7f7;
}

.join-community h2{
    text-align:center;
    color:#0038A8;
    font-size:42px;
    margin-bottom:60px;
}

.join-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.join-card{

    display:flex;
    align-items:center;
    gap:25px;

    background:#fff;

    padding:30px;

    text-decoration:none;

    border-radius:12px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    transition:.35s;
}

.join-card:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.join-icon{

    width:70px;
    height:70px;

    border-radius:50%;

    background:#0038A8;

    color:#fff;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:28px;

    flex-shrink:0;
}

.join-content{

    flex:1;
}

.join-content h3{

    color:#0038A8;

    font-size:24px;

    margin-bottom:12px;
}

.join-content p{

    color:#555;

    line-height:1.7;
}

.join-arrow{

    width:45px;
    height:45px;

    border-radius:50%;

    background:#8CC63F;

    color:#fff;

    display:flex;
    justify-content:center;
    align-items:center;

    transition:.3s;
}

.join-card:hover .join-arrow{

    transform:translateX(8px);

}

.home-news{
    padding:80px 0;
}

.home-news h2{
    text-align:center;
    color:#0038A8;
    margin-bottom:40px;
}

.home-news-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.home-news-card{
    display:flex;
    background:#fff;

    text-decoration:none;

    box-shadow:
    0 2px 10px rgba(0,0,0,.08);

    transition:.3s;
}

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

.home-news-card img{
    width:180px;
    height:180px;
    object-fit:cover;
}

.home-news-content{
    padding:20px;
}

.home-news-content h3{
    color:#0038A8;
    margin-bottom:20px;
    line-height:1.5;
}

.home-news-content span{
    color:#0038A8;
    font-size:13px;
    font-weight:600;
}

/* CAREER BANNER */

.career-banner{
    height:350px;

    background:
    linear-gradient(
        rgba(0,56,168,.8),
        rgba(0,56,168,.8)
    ),
    url("../images/career/banner.jpg");

    background-size:cover;
    background-position:center;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;
}

.career-banner h1{
    color:#fff;
    font-size:60px;
}

.career-banner p{
    color:#fff;
    margin-top:15px;
}

/* WHY JOIN */

.why-join{
    padding:80px 0;
}

.why-content{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
}

.why-image img{
    width:100%;
    border-radius:10px;
}

/* JOBS */

.job-openings{
    padding:80px 0;
    background:#f7f7f7;
}

.job-openings h2{
    text-align:center;
    margin-bottom:40px;
    color:#0038A8;
}

.job-card{
    background:#fff;
    padding:25px;
    margin-bottom:20px;
    border-left:5px solid #8CC63F;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.job-card a{
    color:#0038A8;
    font-weight:600;
    text-decoration:none;
}

/* BENEFITS */

.benefits{
    padding:80px 0;
}

.benefit-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.benefit-card{
    text-align:center;
    background:#fff;
    padding:30px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.benefit-card i{
    font-size:40px;
    color:#8CC63F;
    margin-bottom:20px;
}

/* HIRING PROCESS */

.hiring-process{
    background:#edf4e7;
    padding:80px 0;
}

.process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    text-align:center;
}

.process-grid div{
    background:#fff;
    padding:30px;
    font-weight:600;
    color:#0038A8;
}

/* CTA */

.career-cta{
    padding:80px 0;
    text-align:center;
}
/* =========================
   GALLERY BANNER
========================= */

.gallery-banner{

    height:320px;

    background:
    linear-gradient(
        rgba(0,56,168,.8),
        rgba(0,56,168,.8)
    ),
    url("../images/gallery/banner.jpg");

    background-size:cover;
    background-position:center;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;
}

.gallery-banner h1{

    color:#fff;
    font-size:60px;
}

.gallery-banner p{

    color:#fff;
    margin-top:15px;
}

/* =========================
   INTRO
========================= */

.gallery-intro{

    padding:70px 0;
    text-align:center;
}

.gallery-intro h2{

    color:#0038A8;
    margin-bottom:20px;
}

/* =========================
   FILTER
========================= */

.gallery-filter{

    padding-bottom:40px;
}

.gallery-filter .container{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
}

.gallery-filter button{

    padding:12px 25px;

    border:none;

    background:#e5e5e5;

    cursor:pointer;

    transition:.3s;
}

.gallery-filter button.active,
.gallery-filter button:hover{

    background:#0038A8;
    color:white;
}

/* =========================
   GALLERY
========================= */

.gallery-section{

    padding-bottom:80px;
}

.gallery-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:20px;
}

.gallery-item{

    overflow:hidden;

    border-radius:10px;

    box-shadow:
    0 3px 10px rgba(0,0,0,.08);
}

.gallery-item img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.4s;
}

.gallery-item:hover img{

    transform:scale(1.08);
}

/* =========================
   CTA
========================= */

.gallery-cta{

    background:#edf4e7;

    padding:80px 0;

    text-align:center;
}

.gallery-cta h2{

    color:#0038A8;

    margin-bottom:30px;
}

/*====================================================
            INITIATIVES PAGE
====================================================*/

/*=========================
      INTRO SECTION
==========================*/

.initiatives-intro{
    padding:100px 0 70px;
    background:#fff;
}

.initiatives-intro .section-heading{
    max-width:900px;
    margin:auto;
    text-align:center;
}

.initiatives-intro span{
    display:inline-block;
    color:#8CC63F;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.initiatives-intro h2{
    color:#0038A8;
    font-size:46px;
    margin-bottom:25px;
}

.initiatives-intro p{
    color:#555;
    line-height:1.9;
    font-size:18px;
    margin-bottom:20px;
}


/*=========================
      SECTION HEADING
==========================*/

.section-heading{
    text-align:center;
    margin-bottom:60px;
}

.section-heading span{
    color:#8CC63F;
    font-size:15px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    display:block;
    margin-bottom:15px;
}

.section-heading h2{
    color:#0038A8;
    font-size:44px;
    margin-bottom:20px;
}

.section-heading p{
    color:#666;
    max-width:850px;
    margin:auto;
    line-height:1.9;
}


/*=========================
      IMPACT STATS
==========================*/

.initiative-stats{
    padding:80px 0;
    background:#0038A8;
}

.stats-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.stat-box{

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(5px);

    border-radius:18px;

    padding:40px 25px;

    text-align:center;

    transition:.35s;

}

.stat-box:hover{

    transform:translateY(-10px);

    background:#8CC63F;

}

.stat-box i{

    color:#fff;

    font-size:42px;

    margin-bottom:20px;

}

.stat-box h3{

    color:#fff;

    font-size:40px;

    margin-bottom:12px;

}

.stat-box p{

    color:#fff;

    font-size:18px;

}


/*=========================
     COMMUNITY SECTION
==========================*/

.community-initiatives{

    padding:100px 0;

    background:#f8f9fc;

}


/*=========================
      GRID
==========================*/

.initiative-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:35px;

}


/*=========================
       CARD
==========================*/

.initiative-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;

    position:relative;

}

.initiative-card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 45px rgba(0,0,0,.15);

}

.initiative-card img{

    width:100%;

    height:240px;

    object-fit:cover;

    display:block;

}


/*=========================
      CARD CONTENT
==========================*/

.initiative-content{

    padding:35px;

    position:relative;

}


/*=========================
      ICON
==========================*/

.initiative-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#0038A8;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-top:-70px;

    margin-bottom:20px;

    position:relative;

    z-index:5;

    border:5px solid #fff;

}

.initiative-icon i{

    color:#fff;

    font-size:28px;

}


/*=========================
        TITLE
==========================*/

.initiative-content h3{

    color:#0038A8;

    font-size:28px;

    margin-bottom:18px;

    line-height:1.4;

}


/*=========================
      PARAGRAPH
==========================*/

.initiative-content p{

    color:#555;

    line-height:1.9;

    margin-bottom:25px;

    font-size:16px;

}


/*=========================
      BUTTON
==========================*/

.initiative-content a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#0038A8;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}

.initiative-content a:hover{

    color:#8CC63F;

}

/*====================================================
        WHY OUR INITIATIVES MATTER
====================================================*/

.initiative-vision{

    padding:100px 0;

    background:#fff;

}

.vision-content{

    max-width:1000px;

    margin:auto;

    text-align:center;

}

.vision-content span{

    display:inline-block;

    color:#8CC63F;

    font-size:15px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.vision-content h2{

    color:#0038A8;

    font-size:44px;

    margin-bottom:30px;

}

.vision-content p{

    color:#555;

    font-size:18px;

    line-height:1.9;

    margin-bottom:25px;

}

/*==============================
      FEATURES
==============================*/

.vision-features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

    margin-top:50px;

}

.vision-features div{

    background:#f8f9fc;

    border-radius:15px;

    padding:25px;

    font-size:20px;

    font-weight:600;

    color:#0038A8;

    box-shadow:0 8px 20px rgba(0,0,0,.06);

    transition:.35s;

}

.vision-features div:hover{

    transform:translateY(-8px);

    background:#0038A8;

    color:#fff;

}

.vision-features i{

    color:#8CC63F;

    margin-right:12px;

    font-size:22px;

}

.vision-features div:hover i{

    color:#fff;

}


/*====================================================
            CALL TO ACTION
====================================================*/

.initiative-cta{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(rgba(0,56,168,.85),rgba(0,56,168,.85)),
    url("../images/initiatives/initiative-banner.jpg");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

    padding:120px 0;

    text-align:center;

    color:#fff;

}

.initiative-cta::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:rgba(255,255,255,.06);

    top:-120px;

    left:-120px;

}

.initiative-cta::after{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    bottom:-100px;

    right:-100px;

}

.initiative-cta .container{

    position:relative;

    z-index:5;

}

.initiative-cta span{

    display:block;

    color:#8CC63F;

    letter-spacing:3px;

    font-weight:700;

    margin-bottom:18px;

}

.initiative-cta h2{

    font-size:52px;

    margin-bottom:25px;

    color:#fff;

}

.initiative-cta p{

    max-width:900px;

    margin:auto;

    font-size:19px;

    line-height:2;

    color:#f3f3f3;

}


/*==============================
      BUTTONS
==============================*/

.cta-buttons{

    margin-top:50px;

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

}

/* Primary Button */

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 38px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    font-size:16px;

    color:#fff;

    background:#8CC63F;

    transition:.35s;

    box-shadow:0 12px 30px rgba(140,198,63,.35);

}

.btn-primary:hover{

    background:#75aa2c;

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(140,198,63,.45);

}


/* Secondary Button */

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 38px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    font-size:16px;

    color:#0038A8;

    background:#fff;

    transition:.35s;

    box-shadow:0 12px 30px rgba(0,0,0,.12);

}

.btn-secondary:hover{

    background:#0038A8;

    color:#fff;

    transform:translateY(-4px);

}


/*==============================
      SMALL DECORATIONS
==============================*/

.initiative-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:6px;

    height:100%;

    background:#8CC63F;

    transition:.35s;

}

.initiative-card:hover::before{

    width:10px;

}

.initiative-card img{

    transition:.4s;

}

.initiative-card:hover img{

    transform:scale(1.05);

}

/*====================================================
                CPBFI HERO BANNER
====================================================*/

.cpbfi-banner{

    position:relative;

    height:90vh;

    min-height:650px;

    background:
    linear-gradient(rgba(0,56,168,.78),rgba(0,56,168,.78)),
    url("../images/cpbfi/banner.jpg");

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:#fff;

    overflow:hidden;

}

.cpbfi-banner::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    background:rgba(255,255,255,.05);

    border-radius:50%;

    top:-180px;

    left:-120px;

}

.cpbfi-banner::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    background:rgba(255,255,255,.05);

    border-radius:50%;

    bottom:-120px;

    right:-100px;

}

.banner-overlay{

    position:relative;

    z-index:2;

    max-width:900px;

    padding:20px;

}

.banner-overlay span{

    display:inline-block;

    background:#8CC63F;

    color:#fff;

    padding:10px 25px;

    border-radius:40px;

    font-size:15px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:25px;

}

.banner-overlay h1{

    font-size:56px;

    line-height:1.2;

    margin-bottom:25px;

    font-weight:700;

}

.banner-overlay p{

    max-width:800px;

    margin:auto;

    font-size:20px;

    line-height:1.9;

    color:#f2f2f2;

}

.banner-buttons{

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}


/*====================================================
                ABOUT CPBFI
====================================================*/

.about-cpbfi{

    padding:100px 0;

    background:#fff;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.about-image{

    overflow:hidden;

    border-radius:20px;

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.about-image img{

    width:100%;

    display:block;

    transition:.5s;

}

.about-image:hover img{

    transform:scale(1.05);

}

.about-content h3{

    font-size:34px;

    color:#0038A8;

    margin-bottom:25px;

}

.about-content p{

    color:#555;

    font-size:17px;

    line-height:1.9;

    margin-bottom:20px;

}

.about-highlights{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-top:35px;

}

.about-highlights div{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px;

    background:#f8f9fc;

    border-radius:15px;

    font-weight:600;

    color:#0038A8;

    transition:.35s;

}

.about-highlights div:hover{

    background:#0038A8;

    color:#fff;

    transform:translateY(-5px);

}

.about-highlights i{

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#8CC63F;

    color:#fff;

    font-size:20px;

}


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

.cpbfi-impact{

    padding:100px 0;

    background:#f8fbff;

}

.impact-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:25px;

    margin-top:60px;

}

.impact-card{

    background:#fff;

    text-align:center;

    padding:40px 25px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.impact-card:hover{

    transform:translateY(-10px);

    background:#0038A8;

}

.impact-card i{

    font-size:42px;

    color:#8CC63F;

    margin-bottom:20px;

}

.impact-card h3{

    font-size:40px;

    color:#0038A8;

    margin-bottom:10px;

    transition:.35s;

}

.impact-card p{

    color:#666;

    line-height:1.7;

    transition:.35s;

}

.impact-card:hover h3,

.impact-card:hover p{

    color:#fff;

}


/*====================================================
                PROGRAM SNAPSHOT
====================================================*/

.program-snapshot{

    padding:100px 0;

    background:#fff;

}

.snapshot-card{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    background:#0038A8;

    color:#fff;

    padding:60px;

    border-radius:25px;

    box-shadow:0 20px 45px rgba(0,56,168,.18);

}

.snapshot-left h2{

    font-size:42px;

    margin-bottom:25px;

}

.snapshot-left p{

    font-size:18px;

    line-height:1.9;

    color:#f0f0f0;

}

.snapshot-right{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}

.snapshot-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:25px;

    background:rgba(255,255,255,.08);

    border-radius:18px;

    transition:.35s;

}

.snapshot-item:hover{

    background:#8CC63F;

    transform:translateY(-6px);

}

.snapshot-item i{

    font-size:34px;

    color:#fff;

    min-width:40px;

}

.snapshot-item h4{

    font-size:20px;

    margin-bottom:8px;

    color:#fff;

}

.snapshot-item p{

    font-size:15px;

    color:#f4f4f4;

    line-height:1.7;

}

/*====================================================
                WHY CPBFI
====================================================*/

.why-cpbfi{

    padding:100px 0;

    background:#f8fbff;

}

.why-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

    margin-top:60px;

}

.why-card{

    background:#fff;

    padding:40px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.why-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:6px;

    height:100%;

    background:#8CC63F;

    transition:.35s;

}

.why-card:hover::before{

    width:100%;

    opacity:.08;

}

.why-card:hover{

    transform:translateY(-10px);

}

.why-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    background:#0038A8;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

}

.why-icon i{

    color:#fff;

    font-size:32px;

}

.why-card h3{

    color:#0038A8;

    font-size:26px;

    margin-bottom:18px;

}

.why-card p{

    color:#555;

    line-height:1.9;

    font-size:16px;

}



/*====================================================
            PROGRAMME CURRICULUM
====================================================*/

.cpbfi-curriculum{

    padding:100px 0;

    background:#fff;

}

.curriculum-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

    margin-top:60px;

}

.curriculum-card{

    background:#fff;

    border-radius:20px;

    padding:40px;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.35s;

    border-top:5px solid #8CC63F;

}

.curriculum-card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.curriculum-icon{

    width:85px;

    height:85px;

    background:#0038A8;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

}

.curriculum-icon i{

    color:#fff;

    font-size:34px;

}

.curriculum-card h3{

    color:#0038A8;

    font-size:28px;

    margin-bottom:25px;

}

.curriculum-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.curriculum-card ul li{

    position:relative;

    padding-left:35px;

    margin-bottom:16px;

    color:#555;

    line-height:1.8;

    font-size:16px;

}

.curriculum-card ul li::before{

    content:"✔";

    position:absolute;

    left:0;

    color:#8CC63F;

    font-weight:bold;

    font-size:18px;

}



/*====================================================
            PROGRAMME DURATION
====================================================*/

.duration-box{

    margin-top:70px;

    background:linear-gradient(135deg,#0038A8,#0059d6);

    color:#fff;

    padding:60px;

    border-radius:25px;

    text-align:center;

    box-shadow:0 18px 40px rgba(0,56,168,.20);

}

.duration-box h3{

    font-size:36px;

    margin-bottom:20px;

}

.duration-box h3 i{

    color:#8CC63F;

    margin-right:10px;

}

.duration-box>p{

    font-size:22px;

    margin-bottom:45px;

    color:#f4f4f4;

}

.duration-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

.duration-grid div{

    background:rgba(255,255,255,.10);

    padding:35px;

    border-radius:18px;

    transition:.35s;

}

.duration-grid div:hover{

    background:#8CC63F;

    transform:translateY(-6px);

}

.duration-grid h4{

    font-size:34px;

    color:#fff;

    margin-bottom:10px;

}

.duration-grid p{

    color:#f8f8f8;

    line-height:1.8;

    font-size:16px;

}

/*====================================================
                ELIGIBILITY
====================================================*/

.cpbfi-eligibility{

    padding:100px 0;

    background:#f8fbff;

}

.eligibility-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

    margin-top:60px;

}

.eligibility-card{

    background:#fff;

    padding:45px 35px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.eligibility-card:hover{

    transform:translateY(-10px);

    background:#0038A8;

}

.eligibility-card i{

    width:85px;

    height:85px;

    border-radius:50%;

    background:#8CC63F;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 25px;

    font-size:34px;

}

.eligibility-card h3{

    color:#0038A8;

    font-size:25px;

    margin-bottom:18px;

    transition:.35s;

}

.eligibility-card p{

    color:#555;

    line-height:1.9;

    transition:.35s;

}

.eligibility-card:hover h3,

.eligibility-card:hover p{

    color:#fff;

}



/*====================================================
            REGISTRATION TIMELINE
====================================================*/

.registration-process{

    padding:100px 0;

    background:#fff;

}

.timeline{

    position:relative;

    max-width:900px;

    margin:70px auto 0;

}

.timeline::before{

    content:"";

    position:absolute;

    left:35px;

    top:0;

    width:4px;

    height:100%;

    background:#8CC63F;

}

.timeline-item{

    display:flex;

    gap:30px;

    position:relative;

    margin-bottom:45px;

}

.timeline-number{

    min-width:70px;

    width:70px;

    height:70px;

    border-radius:50%;

    background:#0038A8;

    color:#fff;

    font-size:28px;

    font-weight:700;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    z-index:2;

    box-shadow:0 10px 20px rgba(0,56,168,.2);

}

.timeline-content{

    flex:1;

    background:#f8fbff;

    padding:30px;

    border-radius:18px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    transition:.35s;

}

.timeline-content:hover{

    transform:translateX(10px);

    box-shadow:0 15px 30px rgba(0,0,0,.12);

}

.timeline-content h3{

    color:#0038A8;

    font-size:25px;

    margin-bottom:15px;

}

.timeline-content p{

    color:#555;

    line-height:1.9;

}



/*====================================================
                CERTIFICATION
====================================================*/

.cpbfi-certification{

    padding:100px 0;

    background:#f8fbff;

}

.certification-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-top:60px;

}

.certificate-card{

    background:#fff;

    text-align:center;

    padding:40px 30px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.certificate-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:#8CC63F;

}

.certificate-card:hover{

    transform:translateY(-10px);

}

.certificate-card i{

    width:80px;

    height:80px;

    border-radius:50%;

    background:#0038A8;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 25px;

    font-size:32px;

}

.certificate-card h3{

    color:#0038A8;

    font-size:24px;

    margin-bottom:15px;

}

.certificate-card p{

    color:#555;

    line-height:1.8;

}



/*====================================================
            HOVER EFFECTS
====================================================*/

.timeline-number,

.eligibility-card,

.certificate-card,

.timeline-content{

    transition:all .35s ease;

}

.certificate-card:hover i{

    background:#8CC63F;

}

.eligibility-card:hover i{

    background:#fff;

    color:#0038A8;

}

/*====================================================
                ABOUT BAJAJ FINANCE
====================================================*/

.about-bajaj{

    padding:100px 0;

    background:#fff;

}

.about-bajaj-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.about-bajaj-image{

    overflow:hidden;

    border-radius:20px;

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.about-bajaj-image img{

    width:100%;

    display:block;

    transition:.5s;

}

.about-bajaj-image:hover img{

    transform:scale(1.05);

}

.about-bajaj-content span{

    display:inline-block;

    color:#8CC63F;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:18px;

}

.about-bajaj-content h2{

    color:#0038A8;

    font-size:42px;

    margin-bottom:25px;

}

.about-bajaj-content p{

    color:#555;

    line-height:1.9;

    margin-bottom:20px;

    font-size:17px;

}

.bajaj-highlights{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin-top:35px;

}

.bajaj-highlights div{

    background:#f8fbff;

    padding:25px;

    text-align:center;

    border-radius:18px;

    transition:.35s;

}

.bajaj-highlights div:hover{

    background:#0038A8;

    color:#fff;

    transform:translateY(-6px);

}

.bajaj-highlights i{

    font-size:34px;

    color:#8CC63F;

    margin-bottom:15px;

}

.bajaj-highlights span{

    display:block;

    color:inherit;

    font-weight:600;

    letter-spacing:0;

}



/*====================================================
                PARTNERSHIP
====================================================*/

.cpbfi-partnership{

    padding:100px 0;

    background:#f8fbff;

}

.partnership-content{

    max-width:950px;

    margin:0 auto 60px;

    text-align:center;

}

.partnership-content p{

    font-size:18px;

    color:#555;

    line-height:2;

    margin-bottom:25px;

}

.partnership-features{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.feature-box{

    background:#fff;

    padding:40px 30px;

    text-align:center;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.feature-box:hover{

    transform:translateY(-10px);

}

.feature-box i{

    width:80px;

    height:80px;

    background:#0038A8;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 25px;

    font-size:32px;

}

.feature-box h3{

    color:#0038A8;

    margin-bottom:15px;

    font-size:24px;

}

.feature-box p{

    color:#555;

    line-height:1.8;

}



/*====================================================
                    CTA
====================================================*/

.cpbfi-cta{

    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:
    linear-gradient(rgba(0,56,168,.88),rgba(0,56,168,.88)),
    url("../images/cpbfi/banner.jpg");

    background-size:cover;

    background-position:center;

    text-align:center;

    color:#fff;

}

.cpbfi-cta::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    background:rgba(255,255,255,.06);

    border-radius:50%;

    top:-120px;

    left:-100px;

}

.cpbfi-cta::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    background:rgba(255,255,255,.05);

    border-radius:50%;

    bottom:-90px;

    right:-90px;

}

.cpbfi-cta .container{

    position:relative;

    z-index:2;

}

.cpbfi-cta span{

    color:#8CC63F;

    font-weight:700;

    letter-spacing:3px;

}

.cpbfi-cta h2{

    font-size:50px;

    margin:25px 0;

}

.cpbfi-cta p{

    max-width:850px;

    margin:0 auto;

    font-size:18px;

    line-height:2;

    color:#f3f3f3;

}

.cpbfi-cta .cta-buttons{

    margin-top:45px;

}



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

@media(max-width:992px){

.about-grid,

.snapshot-card,

.about-bajaj-grid{

grid-template-columns:1fr;

}

.impact-grid{

grid-template-columns:repeat(2,1fr);

}

.why-grid,

.curriculum-grid,

.eligibility-grid,

.certification-grid,

.partnership-features,

.bajaj-highlights,

.duration-grid{

grid-template-columns:1fr;

}

.snapshot-right{

grid-template-columns:1fr;

}

.banner-overlay h1{

font-size:42px;

}

.about-content h3,

.about-bajaj-content h2{

font-size:34px;

}

.cpbfi-cta h2{

font-size:38px;

}

}



@media(max-width:768px){

.cpbfi-banner{

height:auto;

padding:140px 0 100px;

}

.banner-overlay h1{

font-size:34px;

}

.banner-overlay p{

font-size:17px;

}

.banner-buttons{

flex-direction:column;

align-items:center;

}

.banner-buttons a{

width:250px;

text-align:center;

}

.impact-grid{

grid-template-columns:1fr;

}

.timeline::before{

left:25px;

}

.timeline-number{

width:55px;

height:55px;

font-size:22px;

min-width:55px;

}

.timeline{

padding-left:0;

}

.timeline-item{

gap:20px;

}

.section-heading h2{

font-size:34px;

}

.snapshot-card{

padding:40px 25px;

}

.duration-box{

padding:40px 25px;

}

.cpbfi-cta{

padding:90px 0;

}

.cpbfi-cta h2{

font-size:32px;

}

}



/*====================================================
                ANIMATIONS
====================================================*/

.about-image img,

.about-bajaj-image img,

.feature-box,

.impact-card,

.why-card,

.curriculum-card,

.eligibility-card,

.certificate-card,

.snapshot-item{

transition:all .35s ease;

}

.feature-box:hover,

.impact-card:hover,

.why-card:hover,

.curriculum-card:hover,

.snapshot-item:hover,

.eligibility-card:hover,

.certificate-card:hover{

transform:translateY(-10px);

}



/*====================================================
                SMOOTH SCROLL
====================================================*/

html{

scroll-behavior:smooth;

}



/*====================================================
                SCROLLBAR
====================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f2f2f2;

}

::-webkit-scrollbar-thumb{

background:#0038A8;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#8CC63F;

}



/*====================================================
                TEXT SELECTION
====================================================*/

::selection{

background:#0038A8;

color:#fff;

}

/*====================================================
                DONATE HERO BANNER
====================================================*/

.donate-banner{

    position:relative;

    height:90vh;

    min-height:650px;

    background:
    linear-gradient(rgba(0,56,168,.80),rgba(0,56,168,.80)),
    url("../images/donate/banner.jpg");

    background-size:cover;

    background-position:center;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#fff;

    overflow:hidden;

}

.donate-banner::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:rgba(255,255,255,.05);

    border-radius:50%;

    top:-150px;

    left:-120px;

}

.donate-banner::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    background:rgba(255,255,255,.05);

    border-radius:50%;

    bottom:-120px;

    right:-90px;

}

.donate-banner .banner-overlay{

    position:relative;

    z-index:2;

    max-width:900px;

    padding:20px;

}

.donate-banner span{

    display:inline-block;

    background:#8CC63F;

    color:#fff;

    padding:10px 26px;

    border-radius:40px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:25px;

}

.donate-banner h1{

    font-size:58px;

    margin-bottom:25px;

    line-height:1.2;

}

.donate-banner p{

    font-size:20px;

    line-height:1.9;

    color:#f5f5f5;

    max-width:820px;

    margin:auto;

}

.banner-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:45px;

    flex-wrap:wrap;

}



/*====================================================
                WHY DONATE
====================================================*/

.why-donate{

    padding:100px 0;

    background:#fff;

}

.why-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

    margin-top:60px;

}

.why-card{

    background:#fff;

    padding:40px;

    border-radius:20px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;

    border-left:5px solid #8CC63F;

}

.why-card:hover{

    transform:translateY(-10px);

}

.why-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    background:#0038A8;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

}

.why-icon i{

    color:#fff;

    font-size:32px;

}

.why-card h3{

    color:#0038A8;

    margin-bottom:18px;

    font-size:28px;

}

.why-card p{

    color:#555;

    line-height:1.9;

}



/*====================================================
                WAYS TO DONATE
====================================================*/

.ways-donate{

    padding:100px 0;

    background:#f8fbff;

}

.donation-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

    margin-top:60px;

}

.donation-card{

    background:#fff;

    padding:45px 35px;

    text-align:center;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.donation-card:hover{

    transform:translateY(-10px);

    background:#0038A8;

}

.donation-card i{

    width:85px;

    height:85px;

    border-radius:50%;

    background:#8CC63F;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 25px;

    font-size:34px;

}

.donation-card h3{

    color:#0038A8;

    font-size:26px;

    margin-bottom:18px;

    transition:.35s;

}

.donation-card p{

    color:#666;

    line-height:1.9;

    transition:.35s;

}

.donation-card:hover h3,

.donation-card:hover p{

    color:#fff;

}

/*====================================================
            DONATE TO OUR INITIATIVES
====================================================*/

.donate-initiatives{

    padding:100px 0;

    background:#fff;

}

.initiative-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

    margin-top:60px;

}

.initiative-card{

    background:#fff;

    border-radius:22px;

    padding:40px 30px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;

    border-top:5px solid #8CC63F;

}

.initiative-card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.initiative-icon{

    width:85px;

    height:85px;

    border-radius:50%;

    background:#0038A8;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

}

.initiative-icon i{

    color:#fff;

    font-size:34px;

}

.initiative-card h3{

    color:#0038A8;

    font-size:28px;

    margin-bottom:18px;

}

.initiative-card p{

    color:#555;

    line-height:1.9;

    margin-bottom:25px;

}

.initiative-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.initiative-card ul li{

    position:relative;

    padding-left:28px;

    margin-bottom:15px;

    color:#555;

}

.initiative-card ul li::before{

    content:"✔";

    position:absolute;

    left:0;

    color:#8CC63F;

    font-weight:700;

}

.initiative-card:hover{

    background:#0038A8;

}

.initiative-card:hover h3,

.initiative-card:hover p,

.initiative-card:hover ul li{

    color:#fff;

}

.initiative-card:hover .initiative-icon{

    background:#8CC63F;

}



/*====================================================
                    OUR IMPACT
====================================================*/

.donate-impact{

    padding:100px 0;

    background:#f8fbff;

}

.impact-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

    margin-top:60px;

}

.impact-card{

    background:#fff;

    text-align:center;

    padding:40px 25px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.impact-card:hover{

    transform:translateY(-10px);

    background:#0038A8;

}

.impact-card i{

    width:85px;

    height:85px;

    border-radius:50%;

    background:#8CC63F;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 25px;

    font-size:34px;

}

.impact-card h3{

    color:#0038A8;

    font-size:38px;

    margin-bottom:12px;

    transition:.35s;

}

.impact-card p{

    color:#666;

    line-height:1.8;

    transition:.35s;

}

.impact-card:hover h3,

.impact-card:hover p{

    color:#fff;

}

.impact-card:hover i{

    background:#fff;

    color:#0038A8;

}

/*====================================================
                BECOME A DONOR
====================================================*/

.become-donor{

    padding:100px 0;

    background:#fff;

}

.donor-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

    margin-top:60px;

}

.donor-image img{

    width:100%;

    border-radius:20px;

    display:block;

    box-shadow:0 15px 35px rgba(0,0,0,.12);

}

.donor-info h3{

    font-size:36px;

    color:#0038A8;

    margin-bottom:25px;

}

.donor-info p{

    color:#555;

    line-height:1.9;

    margin-bottom:30px;

}

.donor-highlights{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

    margin-bottom:35px;

}

.donor-highlights div{

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px 20px;

    background:#f8fbff;

    border-radius:12px;

    transition:.35s;

}

.donor-highlights div:hover{

    background:#0038A8;

    color:#fff;

}

.donor-highlights i{

    color:#8CC63F;

    font-size:22px;

}

.donor-highlights div:hover i{

    color:#fff;

}



/*====================================================
                CSR SECTION
====================================================*/

.csr-section{

    padding:100px 0;

    background:#f8fbff;

}

.csr-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

    margin-top:60px;

}

.csr-card{

    background:#fff;

    padding:45px 35px;

    text-align:center;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.csr-card:hover{

    transform:translateY(-10px);

    background:#0038A8;

}

.csr-card i{

    width:90px;

    height:90px;

    border-radius:50%;

    background:#8CC63F;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 25px;

    font-size:36px;

}

.csr-card h3{

    color:#0038A8;

    margin-bottom:18px;

    font-size:28px;

    transition:.35s;

}

.csr-card p{

    color:#666;

    line-height:1.8;

    transition:.35s;

}

.csr-card:hover h3,

.csr-card:hover p{

    color:#fff;

}

.csr-card:hover i{

    background:#fff;

    color:#0038A8;

}



/*====================================================
            TRUST & TRANSPARENCY
====================================================*/

.trust-section{

    padding:100px 0;

    background:#fff;

}

.trust-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

    margin-top:60px;

}

.trust-card{

    background:#fff;

    padding:40px 30px;

    text-align:center;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

    border-top:5px solid #8CC63F;

}

.trust-card:hover{

    transform:translateY(-10px);

    background:#0038A8;

}

.trust-card i{

    width:85px;

    height:85px;

    border-radius:50%;

    background:#0038A8;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 25px;

    font-size:34px;

    transition:.35s;

}

.trust-card h3{

    color:#0038A8;

    font-size:26px;

    margin-bottom:18px;

    transition:.35s;

}

.trust-card p{

    color:#666;

    line-height:1.8;

    transition:.35s;

}

.trust-card:hover h3,

.trust-card:hover p{

    color:#fff;

}

.trust-card:hover i{

    background:#8CC63F;

    color:#fff;

}
/*====================================================
                DONATION PROCESS
====================================================*/

.donation-process{

    padding:100px 0;

    background:#f8fbff;

}

.timeline{

    max-width:900px;

    margin:60px auto 0;

    position:relative;

}

.timeline::before{

    content:"";

    position:absolute;

    left:25px;

    top:0;

    width:4px;

    height:100%;

    background:#8CC63F;

}

.timeline-item{

    display:flex;

    gap:35px;

    position:relative;

    margin-bottom:50px;

}

.timeline-number{

    width:55px;

    height:55px;

    background:#0038A8;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    font-weight:700;

    flex-shrink:0;

    position:relative;

    z-index:2;

}

.timeline-content{

    background:#fff;

    padding:30px;

    border-radius:18px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    flex:1;

}

.timeline-content h3{

    color:#0038A8;

    margin-bottom:15px;

}

.timeline-content p{

    color:#666;

    line-height:1.8;

}



/*====================================================
                    FAQ
====================================================*/

.donate-faq{

    padding:100px 0;

    background:#fff;

}

.faq-container{

    max-width:900px;

    margin:60px auto 0;

}

.faq-item{

    background:#f8fbff;

    padding:30px;

    border-left:5px solid #8CC63F;

    border-radius:15px;

    margin-bottom:25px;

    transition:.35s;

}

.faq-item:hover{

    transform:translateX(8px);

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.faq-item h3{

    color:#0038A8;

    margin-bottom:15px;

    font-size:24px;

}

.faq-item p{

    color:#666;

    line-height:1.8;

}



/*====================================================
                CALL TO ACTION
====================================================*/

.donate-cta{

    padding:110px 20px;

    background:linear-gradient(135deg,#0038A8,#0056d6);

    text-align:center;

    color:#fff;

}

.donate-cta span{

    display:inline-block;

    background:#8CC63F;

    padding:10px 28px;

    border-radius:30px;

    font-weight:700;

    margin-bottom:25px;

}

.donate-cta h2{

    font-size:48px;

    margin-bottom:25px;

}

.donate-cta p{

    max-width:800px;

    margin:auto;

    font-size:19px;

    line-height:1.9;

    color:#f5f5f5;

}

.cta-buttons{

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}



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

@media(max-width:992px){

    .why-grid,
    .donation-grid,
    .initiative-grid,
    .csr-grid,
    .trust-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .impact-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .donor-content{

        grid-template-columns:1fr;

        gap:40px;

    }

    .donor-highlights{

        grid-template-columns:1fr;

    }

    .donate-banner h1{

        font-size:46px;

    }

}

@media(max-width:768px){

    .why-grid,
    .donation-grid,
    .initiative-grid,
    .impact-grid,
    .csr-grid,
    .trust-grid{

        grid-template-columns:1fr;

    }

    .timeline::before{

        left:22px;

    }

    .timeline-item{

        gap:20px;

    }

    .timeline-content{

        padding:22px;

    }

    .donate-banner{

        height:auto;

        padding:120px 20px;

    }

    .donate-banner h1{

        font-size:36px;

    }

    .donate-banner p{

        font-size:17px;

    }

    .donate-cta h2{

        font-size:34px;

    }

}

@media(max-width:576px){

    .section-heading h2{

        font-size:30px;

    }

    .why-card,
    .donation-card,
    .initiative-card,
    .impact-card,
    .csr-card,
    .trust-card,
    .faq-item{

        padding:25px;

    }

    .timeline-number{

        width:45px;

        height:45px;

        font-size:18px;

    }

    .timeline::before{

        left:18px;

    }

}



/*====================================================
                ANIMATIONS
====================================================*/

.why-card,
.donation-card,
.initiative-card,
.impact-card,
.csr-card,
.trust-card,
.timeline-content,
.faq-item{

    transition:all .35s ease;

}

.why-card:hover,
.donation-card:hover,
.initiative-card:hover,
.impact-card:hover,
.csr-card:hover,
.trust-card:hover{

    transform:translateY(-10px);

}




/* =====================================================
                TESTIMONIALS SECTION
===================================================== */

.home-testimonials{

    padding:100px 0;

    background:#f7f9fc;

}


/* =====================================================
                SECTION HEADING
===================================================== */

.home-testimonials .section-heading{

    text-align:center;

    max-width:850px;

    margin:0 auto 60px;

}

.home-testimonials .section-heading span{

    display:inline-block;

    color:#8CC63F;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:15px;

}

.home-testimonials .section-heading h2{

    color:#0038A8;

    font-size:42px;

    margin-bottom:20px;

}

.home-testimonials .section-heading p{

    color:#666;

    font-size:17px;

    line-height:1.8;

}



/* =====================================================
                TESTIMONIAL GRID
===================================================== */

.testimonial-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

}



/* =====================================================
                TESTIMONIAL CARD
===================================================== */

.testimonial-card{

    background:#fff;

    padding:35px;

    border-radius:20px;

    box-shadow:
    0 8px 30px rgba(0,0,0,.08);

    position:relative;

    overflow:hidden;

    transition:all .35s ease;

    border-top:5px solid #0038A8;

}

.testimonial-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 18px 40px rgba(0,0,0,.13);

}



/* =====================================================
                STUDENT PROFILE
===================================================== */

.testimonial-profile{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:25px;

}



/* STUDENT PHOTO */

.testimonial-photo{

    width:90px;

    height:90px;

    border-radius:50%;

    overflow:hidden;

    flex-shrink:0;

    border:4px solid #8CC63F;

    background:#eee;

}

.testimonial-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}



/* STUDENT NAME */

.testimonial-profile h3{

    color:#0038A8;

    font-size:22px;

    margin:0 0 7px;

}



/* COLLEGE */

.testimonial-profile p{

    color:#666;

    font-size:14px;

    line-height:1.5;

    margin:0 0 6px;

}



/* JOB */

.testimonial-profile strong{

    color:#333;

    font-size:14px;

}



/* =====================================================
                QUOTE ICON
===================================================== */

.testimonial-quote{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#0038A8;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    line-height:1;

    margin-bottom:20px;

}



/* =====================================================
                TESTIMONIAL TEXT
===================================================== */

.testimonial-text{

    color:#555;

    font-size:16px;

    line-height:1.85;

    margin:0;

}



/* =====================================================
                DECORATIVE ELEMENT
===================================================== */

.testimonial-card::after{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    border-radius:50%;

    background:rgba(140,198,63,.08);

    right:-50px;

    bottom:-50px;

    pointer-events:none;

}



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

@media(max-width:992px){

    .testimonial-grid{

        grid-template-columns:1fr;

        max-width:750px;

        margin:auto;

    }

}


@media(max-width:768px){

    .home-testimonials{

        padding:70px 0;

    }

    .home-testimonials .section-heading h2{

        font-size:34px;

    }

    .testimonial-card{

        padding:30px;

    }

}


@media(max-width:576px){

    .home-testimonials .section-heading h2{

        font-size:29px;

    }

    .testimonial-profile{

        align-items:flex-start;

    }

    .testimonial-photo{

        width:70px;

        height:70px;

    }

    .testimonial-profile h3{

        font-size:19px;

    }

    .testimonial-profile p,

    .testimonial-profile strong{

        font-size:13px;

    }

    .testimonial-text{

        font-size:15px;

        line-height:1.75;

    }

}