/* ===================================
Large Screens
=================================== */

@media (max-width:1200px){

    .hero-content h1{

        font-size:52px;

    }

}


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

@media (max-width:992px){

    section{

        padding:80px 0;

    }

    .navbar{

        background:#fff;

    }

    .hero{

        text-align:center;

        padding-top:120px;

    }

    .hero-content{

        margin-bottom:50px;

    }

    .hero-content h1{

        font-size:42px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-image{

        width:350px;

    }

    .teacher-image{

        width:280px;

        height:280px;

    }

    .section-title h2{

        font-size:36px;

    }

}


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

@media (max-width:768px){

    .hero{

        min-height:auto;

        padding-top:120px;

    }

    .hero-content h1{

        font-size:34px;

    }

    .hero-content p{

        font-size:17px;

    }

    .hero-image{

        width:280px;

    }

    .tech{

        display:none;

    }

    .teacher-image{

        width:220px;

        height:220px;

    }

    .stat-box h2{

        font-size:38px;

    }

    .grade-card{

        padding:35px 25px;

    }

    .login-card{

        padding:30px 22px;

    }

}


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

@media (max-width:576px){

    .section-title h2{

        font-size:30px;

    }

    .hero-content h1{

        font-size:30px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-buttons .btn{

        width:100%;

    }

    #topBtn{

        width:45px;

        height:45px;

        bottom:20px;

        left:20px;

    }

}