/*
|--------------------------------------------------------------------------
| TPQ AT-TAQWA
|--------------------------------------------------------------------------
| File      : assets/css/responsive.css
| Version   : 1.0.0
|--------------------------------------------------------------------------
*/

/* ==========================================================
   DESKTOP BESAR
========================================================== */

@media (max-width:1200px){

    .container{
        max-width:1100px;
    }

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

    .hero-content{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-text{

        order:2;

    }

    .hero-image{

        order:1;

    }

    .hero-text h1{

        font-size:42px;

    }

    .hero-button{

        justify-content:center;

    }

    .menu{

        gap:20px;

    }

    .section{

        padding:70px 0;

    }

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    .navbar{

        padding:10px 0;

    }

    .logo h2{

        font-size:20px;

    }

    .menu{

        display:none;

    }

    .hero{

        padding-top:120px;

    }

    .hero-text h1{

        font-size:34px;

    }

    .hero-text p{

        font-size:16px;

    }

    .stats{

        margin-top:-40px;

    }

    .section-title h2{

        font-size:28px;

    }

    .about-content h2{

        font-size:30px;

    }

    .class-image{

        height:180px;

    }

    .teacher-photo{

        width:100px;
        height:100px;

    }

    .footer{

        text-align:center;

    }

}

/* ==========================================================
   MOBILE KECIL
========================================================== */

@media (max-width:576px){

    .container{

        padding-left:15px;
        padding-right:15px;

    }

    .hero{

        padding-bottom:70px;

    }

    .hero-text h1{

        font-size:28px;

    }

    .hero-button{

        flex-direction:column;

    }

    .btn{

        width:100%;

    }

    .stats-grid{

        grid-template-columns:1fr;

    }

    .feature-grid{

        grid-template-columns:1fr;

    }

    .teacher-grid{

        grid-template-columns:1fr;

    }

    .class-grid{

        grid-template-columns:1fr;

    }

    .dashboard-card{

        flex-direction:column;

        text-align:center;

        gap:20px;

    }

    .table{

        display:block;

        overflow-x:auto;

    }

}