/*=========================================
GREEN VALLEY PUBLIC SCHOOL
RESPONSIVE.CSS
=========================================*/


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

@media (max-width:1200px){

.container{
    width:95%;
}

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

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

}



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

@media (max-width:992px){

header .container{
    height:80px;
}

.logo img{
    width:55px;
}

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

.logo p{
    font-size:13px;
}

.menu-btn{
    display:block;
}

.admission-btn{
    display:none;
}

nav{
    position:fixed;
    top:80px;
    left:-100%;
    width:100%;
    background:#fff;
    transition:.4s;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
    z-index:999;
}

nav.active{
    left:0;
}

nav ul{
    flex-direction:column;
    padding:20px;
}

nav ul li{
    margin:15px 0;
}

.hero{
    margin-top:80px;
    height:550px;
}

.slider,
.slide{
    height:550px;
}

.content{
    width:90%;
    text-align:center;
}

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

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

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

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

}



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

@media (max-width:768px){

section{
    padding:70px 0;
}

.topbar{
    display:none;
}

.hero{
    margin-top:70px;
    height:360px;
}

.slider,
.slide{
    height:360px;
}

.slide{
    background-size:cover;
    background-position:center;
}

.content{
    width:95%;
    text-align:center;
    padding:0 15px;
}

.content h4{
    font-size:14px;
    letter-spacing:2px;
}

.content h1{
    font-size:34px;
    line-height:1.2;
    margin-bottom:15px;
}

.content p{
    font-size:15px;
    width:100%;
    margin-bottom:20px;
}

.buttons{
    justify-content:center;
    gap:10px;
}

.btn,
.btn2{
    padding:10px 20px;
    font-size:14px;
}

.cards,
.facility-grid,
.gallery-grid,
.footer-grid,
.counter-grid,
.about-list{
    grid-template-columns:1fr;
}

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

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

.footer-box{
    text-align:center;
}

.social{
    justify-content:center;
}

}



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

@media (max-width:576px){

header .container{
    height:70px;
}

.logo img{
    width:45px;
}

.logo h2{
    font-size:17px;
    white-space:nowrap;
}

.logo p{
    font-size:11px;
}

.hero{
    margin-top:70px;
    height:300px;
}

.slider,
.slide{
    height:300px;
}

.slide{
    background-size:cover;
    background-position:center center;
}

.content{
    width:95%;
    padding:0 10px;
}

.content h4{
    font-size:12px;
}

.content h1{
    font-size:28px;
    line-height:1.2;
}

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

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

.btn,
.btn2{
    width:180px;
    text-align:center;
    padding:10px 18px;
    font-size:14px;
}

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

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

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

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

.counter-box h2{
    font-size:34px;
}

.whatsapp{
    width:55px;
    height:55px;
    font-size:24px;
}

#topBtn{
    width:45px;
    height:45px;
}

}



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

@media (max-width:400px){

header .container{
    height:65px;
}

.logo img{
    width:40px;
}

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

.logo p{
    display:none;
}

.hero{
    margin-top:65px;
    height:260px;
}

.slider,
.slide{
    height:260px;
}

.slide{
    background-size:cover;
    background-position:center;
}

.content h4{
    font-size:11px;
}

.content h1{
    font-size:23px;
    line-height:1.2;
}

.content p{
    display:none;
}


@media (max-width:768px){

.buttons{
    display:none !important;
}

}
.btn,
.btn2{
    width:160px;
    padding:8px 15px;
    font-size:12px;
}

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

}