/*======================================
RESPONSIVE CSS
Green Valley Public School
======================================*/

/*==============================
1200px
==============================*/

@media(max-width:1200px){

.container{
width:95%;
}

.content h1{
font-size:60px;
}

.section-title h2{
font-size:38px;
}

.about-content h2,
.principal-content h2,
.contact-home h2{
font-size:36px;
}

}

/*==============================
992px
==============================*/

@media(max-width:992px){

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

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

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

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

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

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

.testimonial-slider{
grid-template-columns:1fr;
}

.content h1{
font-size:50px;
}

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

header .container{
height:80px;
}

.logo h2{
font-size:22px;
}

.logo img{
width:60px;
}

nav{

position:absolute;
top:80px;
left:-100%;
width:100%;
background:#fff;
box-shadow:0 10px 25px rgba(0,0,0,.1);
transition:.4s;

}

nav.active{

left:0;

}

nav ul{

flex-direction:column;
padding:20px;

}

nav ul li{

margin:15px 0;

}

.menu-btn{

display:block;

}

.admission-btn{

display:none;

}

}

/*==============================
768px
==============================*/

@media(max-width:768px){

.topbar{

display:none;

}

section{

padding:70px 0;

}

.section-title h2{

font-size:32px;

}

.content h1{

font-size:40px;

}

.content h4{

font-size:18px;

}

.content p{

font-size:16px;

}

.about-content h2,
.principal-content h2,
.contact-home h2{

font-size:30px;

}

.cards{

grid-template-columns:1fr;

}

.facility-grid{

grid-template-columns:1fr;

}

.counter-grid{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

}

.about-list{

grid-template-columns:1fr;

}

.buttons{

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

}

.btn2{

margin-left:0;

}

.contact-home form{

padding:25px;

}

.counter-box h2{

font-size:42px;

}

.admission-banner h2{

font-size:36px;

}

.admission-banner p{

font-size:18px;

}

.footer-box{

text-align:center;

}

.social{

justify-content:center;
display:flex;

}

}

/*==============================
576px
==============================*/

@media(max-width:576px){

.hero{

height:85vh;

}

.content h1{

font-size:32px;

}

.content h4{

font-size:16px;

letter-spacing:2px;

}

.content p{

font-size:15px;

}

.btn,
.btn2{

padding:12px 25px;

font-size:15px;

}

.logo img{

width:50px;

}

.logo h2{

font-size:18px;

}

.logo p{

font-size:12px;

}

.section-title h2{

font-size:28px;

}

.about-content h2,
.principal-content h2,
.contact-home h2{

font-size:26px;

}

.about-list div{

font-size:14px;

}

.card{

padding:30px 20px;

}

.facility-box{

padding:30px 20px;

}

.gallery-item img{

height:220px;

}

.counter-box{

padding:30px 15px;

}

.counter-box h2{

font-size:36px;

}

.contact-home form{

padding:20px;

}

.footer{

padding-top:50px;

}

.whatsapp{

width:55px;
height:55px;
font-size:26px;

}

#topBtn{

width:45px;
height:45px;

}

}

/*==============================
400px
==============================*/

@media(max-width:400px){

.content h1{

font-size:28px;

}

.logo h2{

font-size:16px;

}

.section-title h2{

font-size:24px;

}

.about-content h2,
.principal-content h2,
.contact-home h2{

font-size:22px;

}

.btn,
.btn2{

width:100%;
text-align:center;

}

}