﻿/* =========================================================
   RESPONSIVE STYLES â€” Green Plateau Public School
   ========================================================= */

@media (max-width: 1180px){
  .stats-grid{grid-template-columns:repeat(3,1fr);row-gap:36px;}

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

@media (max-width: 991px){
  .nav-menu, .nav-cta .nav-search-btn{display:none;}
  .hamburger{display:flex;}
  section{padding:70px 0;}
  .welcome-grid, .advantage-wrap, .contact-wrap{grid-template-columns:1fr;gap:40px;}
  .advantage-wrap{direction:ltr;}
  .grid-3, .grid-4{grid-template-columns:repeat(2,1fr);}
  .doc-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .welcome-media img.float-img{width:44%;bottom:-24px;right:-16px;}
  .hero-slider{height:50vh;}
  .form-grid{grid-template-columns:1fr;}
}

@media (max-width: 767px){
  .topbar .container{justify-content:center;text-align:center;}
  .topbar-info{justify-content:center;}
  .grid-3, .grid-4, .grid-2{grid-template-columns:1fr;}
  .doc-grid{grid-template-columns:1fr 1fr;}

  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr;gap:34px;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .hero-content .sub{padding:0 20px;}
  .hero-arrows{display:none;}
  .page-banner{height:260px;}
  .newsletter{flex-direction:column;text-align:center;}
  .newsletter-form{width:100%;}
  .form-card{padding:28px;}
  .badge-card{position:static;margin-bottom:18px;display:inline-flex;}
  .welcome-media img.float-img{position:static;width:100%;margin-top:16px;animation:none;}
  .fee-table th,.fee-table td{padding:12px 14px;font-size:.82rem;}
}

@media (max-width: 560px){
  .doc-grid{grid-template-columns:1fr;}

  .hero-btns{flex-direction:column;width:100%;padding:0 30px;}
  .hero-btns .btn{width:100%;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .whatsapp-float{width:50px;height:50px;font-size:1.35rem;left:18px;bottom:18px;}
  .scroll-top{width:44px;height:44px;right:18px;bottom:18px;}
  h1{font-size:2.1rem;}
  .error-num{font-size:5.2rem;}
}
/* Mobile */
@media (max-width:768px){

    .hero-slider{
        position: relative;
        width: 100%;
        overflow: hidden;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .hero-slide{
        position: relative !important;
        inset: auto;
        width: 100%;
        height: auto;
        opacity: 1 !important;
        visibility: visible !important;
        display: none;
    }

    .hero-slide.active{
        display: block;
    }

    .hero-slide img{
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        vertical-align: middle;
    }

}


/* Mobile */
@media (max-width:768px){

    .topbar{
       display: none;
    }


}

