/* ===================================
   TABLETS (991px and below)
=================================== */

@media (max-width:991px){

.hero{

text-align:center;
min-height:80vh;
padding:100px 0;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:18px;
margin:auto auto 30px;

}

.hero-buttons{

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

}

.navbar-nav{

text-align:center;
padding-top:20px;

}

section{

padding:70px 0;

}

.about img,
.volunteer img,
.donation img{

margin-bottom:30px;

}

section h2{

font-size:34px;

}

}


/* ===================================
   MOBILE (767px and below)
=================================== */

@media (max-width:767px){

.hero{

min-height:70vh;

}

.hero h1{

font-size:34px;
line-height:1.3;

}

.hero p{

font-size:16px;

}

.navbar-brand{

font-size:24px;

}

.btn-primary,
.btn-secondary,
.btn-outline-primary{

width:100%;
margin-bottom:15px;

}

.program-card,
.impact-card,
.card{

margin-bottom:20px;

}

.events .card img{

height:220px;

}

.gallery img{

height:220px;

}

.footer{

text-align:center;

}

.footer .col-lg-4,
.footer .col-lg-2{

margin-bottom:35px;

}

.footer a{

display:inline-block;
padding:5px;

}

section h2{

font-size:28px;

}

.section-subtitle{

font-size:14px;

letter-spacing:1px;

}

}


/* ===================================
   LARGE DESKTOP
=================================== */

@media (min-width:1400px){

.container{

max-width:1320px;

}

.hero h1{

font-size:68px;

}

.hero p{

font-size:22px;

}

}

/* =========================
   Gallery Mobile View
========================= */

@media (max-width: 768px) {

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

    .gallery-overlay h5 {
        font-size: 16px;
    }

}