@media(max-width:768px){

    .top-bar{
        display:none;
    }

    .logo img{
        height:45px;
    }

    .donate-btn{
        padding:10px 15px;
        font-size:14px;
    }

    .menu-btn{
        font-size:24px;
    }

}

@media(max-width:768px){

    .footer-container{
        grid-template-columns:1fr;
        gap:40px;
    }

    .footer-bottom-content{
        flex-direction:column;
        gap:10px;
        text-align:center;
    }

}
@media(max-width:768px){

    .contact-banner h1{
        font-size:40px;
    }

    .contact-form{
        grid-template-columns:1fr;
    }

    .contact-form textarea,
    .contact-form button{
        grid-column:span 1;
    }

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

}


@media(max-width:992px){

    .news-layout{
        grid-template-columns:1fr;
    }

    .news-sidebar{
        position:static;
    }

}

@media(max-width:768px){

    .news-banner{
        height:250px;
    }

    .news-banner h1{
        font-size:45px;
    }

    .news-banner p{
        font-size:14px;
        padding:0 20px;
    }

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

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

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

}

@media(max-width:480px){

    .news-banner h1{
        font-size:36px;
    }

    .news-banner p{
        font-size:13px;
    }

}
@media(max-width:768px){

    .why-volunteer .container{
        grid-template-columns:1fr;
    }

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

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

    .volunteer-banner h1{
        font-size:40px;
    }

}
/* =========================
   TABLET
========================= */

@media (max-width: 992px){

    .program-banner{
        height:300px;
        padding:0 20px;
    }

    .program-banner h1{
        font-size:48px;
    }

    .program-gallery{
        grid-template-columns:1fr;
    }

    .large{
        min-height:350px;
    }

    .small-images{
        grid-template-columns:repeat(3,1fr);
    }

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

}
/* =========================
   MOBILE
========================= */

@media (max-width: 768px){

    .program-banner{
        height:250px;
    }

    .program-banner h1{
        font-size:36px;
    }

    .program-banner p{
        font-size:14px;
        padding:0 20px;
    }

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

    .program-description{
        padding:50px 0;
    }

    .program-description h2{
        font-size:28px;
        text-align:center;
    }

    .program-description p{
        text-align:center;
    }

    .small-images{
        grid-template-columns:1fr;
    }

    .large{
        min-height:250px;
    }

    .placeholder-image{
        min-height:180px;
    }

    .card-image{
        height:180px;
    }

    .program-highlights{
        padding:50px 0;
    }

    .highlight-card{
        padding:15px;
    }

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

}
/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 480px){

    .program-banner h1{
        font-size:30px;
    }

    .program-banner p{
        font-size:13px;
    }

    .large{
        min-height:220px;
    }

    .placeholder-image{
        min-height:150px;
        font-size:14px;
    }

    .program-description h2{
        font-size:24px;
    }

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

}
@media(max-width:768px){

    .hero h1{
        font-size:34px;
    }

    .hero p{
        font-size:18px;
    }

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

    .donor-grid{
        grid-template-columns:repeat(2,1fr);
    }

}
@media(max-width:768px){

    .banner-images{
        flex-direction:column;
        align-items:center;
    }

    .pillar-grid,
    .values-grid,
    .initiative-grid,
    .trustee-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

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

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

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

    .community-banner h1{
        font-size:32px;
    }

}

@media(max-width:768px){

    .home-news-grid{
        grid-template-columns:1fr;
    }

    .home-news-card{
        flex-direction:column;
    }

    .home-news-card img{
        width:100%;
        height:220px;
    }

}

@media(max-width:768px){

    .why-content{
        grid-template-columns:1fr;
    }

    .benefit-grid{
        grid-template-columns:repeat(2,1fr);
    }

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

}

@media(max-width:992px){

    .pillar-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .pillar-card{
        max-width:600px;
        margin:0 auto;
    }

    .pillars h2{
        font-size:34px;
    }

}
@media(max-width:992px){

    .initiative-card{

        min-width:420px;

    }

}

@media(max-width:768px){

    .initiative-card{

        min-width:100%;

    }

    .initiative-card img{

        height:220px;

    }

    .slide-btn{

        width:45px;
        height:45px;

        font-size:18px;

    }

}
@media(max-width:992px){

    .values-grid{

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

    }

}

@media(max-width:768px){

    .values-grid{

        grid-template-columns:1fr;

    }

    .value-card{

        min-height:auto;

        padding:35px 25px;

    }

    .values-section h2{

        font-size:36px;

    }

}
@media(max-width:992px){

    .trustee-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:768px){

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

    .trustee-image{
        height:300px;
    }

}

@media(max-width:992px){

    .center-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .community-centers h2{

        font-size:34px;

    }

    .center-image{

        height:250px;

    }

    .center-title{

        font-size:20px;

    }

}

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

/*--------------- Large Tablets ----------------*/

@media (max-width:1200px){

    .stats-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .initiative-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


/*--------------- Tablets ----------------*/

@media (max-width:992px){

    .initiatives-intro,
    .community-initiatives,
    .initiative-vision,
    .initiative-cta{
        padding:80px 0;
    }

    .initiatives-intro h2,
    .section-heading h2,
    .vision-content h2{
        font-size:38px;
    }

    .initiative-cta h2{
        font-size:42px;
    }

    .initiatives-intro p,
    .vision-content p,
    .initiative-cta p{
        font-size:17px;
    }

    .initiative-grid{
        grid-template-columns:repeat(2,1fr);
    }

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

    .cta-buttons{
        flex-direction:column;
        align-items:center;
    }

    .btn-primary,
    .btn-secondary{
        width:260px;
    }

}


/*--------------- Mobile ----------------*/

@media (max-width:768px){

    .initiatives-intro,
    .community-initiatives,
    .initiative-stats,
    .initiative-vision,
    .initiative-cta{
        padding:70px 0;
    }

    .initiatives-intro h2,
    .section-heading h2,
    .vision-content h2{
        font-size:32px;
    }

    .initiative-cta h2{
        font-size:34px;
    }

    .section-heading p,
    .initiatives-intro p,
    .vision-content p,
    .initiative-cta p{
        font-size:16px;
    }

    .stats-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

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

    .initiative-content{
        padding:25px;
    }

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

    .initiative-content p{
        font-size:15px;
    }

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

    .initiative-icon{
        width:60px;
        height:60px;
        margin-top:-55px;
    }

    .initiative-icon i{
        font-size:24px;
    }

    .vision-features div{
        font-size:18px;
        padding:20px;
    }

    .btn-primary,
    .btn-secondary{
        width:100%;
        max-width:300px;
    }

}


/*--------------- Small Mobile ----------------*/

@media (max-width:480px){

    .initiatives-intro h2,
    .section-heading h2,
    .vision-content h2{
        font-size:28px;
    }

    .initiative-cta h2{
        font-size:30px;
    }

    .initiatives-intro p,
    .section-heading p,
    .vision-content p,
    .initiative-cta p{
        font-size:15px;
        line-height:1.8;
    }

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

    .initiative-content{
        padding:20px;
    }

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

    .stat-box{
        padding:30px 20px;
    }

    .stat-box h3{
        font-size:32px;
    }

    .stat-box p{
        font-size:16px;
    }

}


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

.initiative-card,
.stat-box,
.vision-features div,
.btn-primary,
.btn-secondary{
    transition:all .35s ease;
}

.initiative-card:hover{
    transform:translateY(-10px);
}

.stat-box:hover{
    transform:translateY(-8px);
}

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

.btn-primary:hover,
.btn-secondary:hover{
    transform:translateY(-4px);
}


/*====================================================
                IMAGE EFFECT
====================================================*/

.initiative-card{
    overflow:hidden;
}

.initiative-card img{
    transition:transform .5s ease;
}

.initiative-card:hover img{
    transform:scale(1.08);
}


/*====================================================
                SCROLL ANIMATION
====================================================*/

.initiatives-intro,
.initiative-stats,
.community-initiatives,
.initiative-vision,
.initiative-cta{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

html{

    scroll-behavior:smooth;

}


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

::selection{

    background:#0038A8;

    color:#fff;

}


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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f1f1f1;

}

::-webkit-scrollbar-thumb{

    background:#0038A8;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#8CC63F;

}