/*=========================================
Large Screen (1400px)
=========================================*/

@media(max-width:1400px){

header{
padding:0 40px;
}

.hero{
padding:0 40px;
}

.text h1{
font-size:55px;
line-height:65px;
}

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

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

.partner-grid{
grid-template-columns:repeat(4,1fr);
}

}

/*=========================================
Laptop
=========================================*/

@media(max-width:1200px){

header{
padding:0 25px;
height:80px;
}

.logo img{
width:150px;
}

nav ul li a{
padding:30px 12px;
font-size:14px;
}

.hero{
height:auto;
padding:70px 25px;
}

.slide{
flex-direction:column;
gap:50px;
}

.text{
width:100%;
text-align:center;
}

.image{
width:100%;
}

.text h1{
font-size:45px;
line-height:55px;
}

.about-home{

flex-direction:column;

}

.about-home .left,
.about-home .right{

width:100%;

}

.mission-box{

grid-template-columns:1fr;

}

.footer-grid{

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

}

}

/*=========================================
Tablet
=========================================*/

@media(max-width:992px){

header{

height:75px;

}

nav{

position:fixed;

left:-100%;

top:75px;

width:300px;

height:100vh;

background:#fff;

transition:.4s;

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

overflow-y:auto;

}

nav.active{

left:0;

}

nav ul{

display:block;

}

nav ul li{

width:100%;

}

nav ul li a{

padding:18px 25px;

border-bottom:1px solid #eee;

}

nav ul li ul{

position:relative;

display:none;

width:100%;

box-shadow:none;

border-radius:0;

}

nav ul li:hover ul{

display:block;

}

.menu-toggle{

display:flex;

cursor:pointer;

font-size:28px;

}

.hero{

padding:50px 25px;

}

.text h1{

font-size:40px;

line-height:48px;

}

.text p{

font-size:18px;

}

.cards{

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

}

.story-grid{

grid-template-columns:1fr;

}

.gallery-grid{

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

}

.testimonial-grid{

grid-template-columns:1fr;

}

.partner-grid{

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

}

.counter-box{

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

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

}

/*=========================================
Mobile
=========================================*/

@media(max-width:768px){

header{

padding:0 18px;

}

.logo img{

width:130px;

}

.hero{

padding:40px 18px;

}

.text h1{

font-size:34px;

line-height:42px;

}

.text p{

font-size:16px;

line-height:28px;

}

.btn{

padding:12px 28px;

font-size:14px;

}

.cards{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:1fr;

}

.partner-grid{

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

}

.counter-box{

grid-template-columns:1fr;

gap:30px;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.social{

justify-content:center;

}

.about-home{

padding:70px 18px;

}

.impact{

padding:70px 8px;

}

.gallery{

padding:70px 18px;

}

.news{

padding:70px 18px;

}

.success{

padding:70px 18px;

}

.testimonials{

padding:70px 18px;

}

}

/*=========================================
Small Mobile
=========================================*/

@media(max-width:480px){

.text h1{

font-size:28px;

line-height:36px;

}

.text p{

font-size:15px;

}

.about-home h2,
.impact h2,
.gallery h2,
.success h2,
.testimonials h2{

font-size:30px;

}

.card{

padding:25px;

}

.mission-card{

padding:25px;

}

.news-content{

padding:20px;

}

.story-content{

padding:20px;

}

.partner-grid{

grid-template-columns:1fr;

}

.donate{

display:none;

}

}

/*=========================================
Back To Top Button
=========================================*/

#topBtn{

position:fixed;

right:25px;

bottom:25px;

width:50px;

height:50px;

border-radius:50%;

background:#9b5c26;

color:#fff;

display:flex;

justify-content:center;

align-items:center;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.4s;

z-index:999;

}

#topBtn.show{

opacity:1;

visibility:visible;

}

/*=========================================
Sticky Header Effect
=========================================*/

header.sticky{

height:70px;

background:#fff;

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

transition:.4s;

}

/*=========================================
Animation
=========================================*/

.fade-up{

opacity:0;

transform:translateY(50px);

transition:1s;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}

.fade-left{

opacity:0;

transform:translateX(-80px);

transition:1s;

}

.fade-left.show{

opacity:1;

transform:translateX(0);

}

.fade-right{

opacity:0;

transform:translateX(80px);

transition:1s;

}

.fade-right.show{

opacity:1;

transform:translateX(0);

}

@media(max-width:991px){

.work-container{

grid-template-columns:1fr;

text-align:center;

}

.section-title h2{

font-size:38px;

}

.content-box h3{

font-size:28px;

}

.districts{

justify-content:center;

}

}

@media(max-width:991px){

.work-container{

grid-template-columns:1fr;

text-align:center;

}

.section-title h2{

font-size:38px;

}

.content-box h3{

font-size:28px;

}

.districts{

justify-content:center;

}

}

@media(max-width:991px){

.work-container{

grid-template-columns:1fr;

text-align:center;

}

.section-title h2{

font-size:38px;

}

.content-box h3{

font-size:28px;

}

.districts{

justify-content:center;

}

}

@media(max-width:991px){

.donation-container{

grid-template-columns:1fr;

}

.donation-left{

text-align:center;

}

.donation-left h2{

font-size:38px;

}

.donation-card{

padding:35px;

}

}

@media(max-width:768px){

.partner-section{

padding:55px 5%;

}

.section-heading h2{

font-size:30px;

}

.partner-card{

padding:25px 18px;

}

.partner-card h4{

font-size:20px;

}

}

@media(max-width:991px){

.impact-grid{

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

}

}

@media(max-width:576px){

.impact-grid{

grid-template-columns:1fr;

}

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

.focus-main{

flex-direction:column;

}

.program-cards{

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

}

}

@media(max-width:768px){

.program-cards{

grid-template-columns:1fr;

}

.section-title{

font-size:34px;

}

.focus-content h3{

font-size:30px;

}

}

@media(max-width:991px){

.footer-container{

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

}

.footer-bottom{

flex-direction:column;

gap:20px;

text-align:center;

}

}

@media(max-width:768px){

.footer-container{

grid-template-columns:1fr;

}

.footer-box form{

flex-direction:column;

}

.footer-box button{

width:100%;

height:55px;

margin-top:10px;

}

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

.contribute-grid{

grid-template-columns:1fr;

}

.contribute-title{

font-size:40px;
text-align:center;

}

}