/* ==========================================
   TABLET SCREENS
   768px TO 1199px
========================================== */

@media (min-width:768px) and (max-width:1199px) {


    .container {

        padding: 0 25px;

    }


    section {

        padding: 80px 0;

    }


    h1 {

        font-size: 52px;

    }


    h2 {

        font-size: 38px;

    }


    h3 {

        font-size: 26px;

    }


    p {

        font-size: 16px;

    }



    .hero-grid {

        grid-template-columns: 1fr;

        text-align: center;

        gap: 40px;

    }



    .hero-actions {

        justify-content: center;

    }



    .services-grid,
    .courses-grid,
    .testimonials-grid,
    .statistics-grid {


        grid-template-columns:
            repeat(2, 1fr);


        gap: 25px;


    }



    .about-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }



    .footer-grid {


        grid-template-columns:
            repeat(2, 1fr);


        gap: 35px;


    }



    .nav-links {

        display: none;

    }


}


/* ==========================================
   MOBILE SCREENS
   BELOW 768px
========================================== */

@media (max-width:767px) {


    .container {

        padding-left: 18px;

        padding-right: 18px;

    }



    section {

        padding: 60px 0;

    }



    h1 {

        font-size: 36px;

        line-height: 1.2;

    }



    h2 {

        font-size: 30px;

        line-height: 1.25;

    }



    h3 {

        font-size: 22px;

    }



    p {

        font-size: 15px;

        line-height: 1.7;

    }



    .hero-grid {

        grid-template-columns: 1fr;

        text-align: center;

    }



    .hero-actions {


        flex-direction: column;


        width: 100%;


    }



    .hero-actions a,
    .btn,
    .nav-btn {


        width: 100%;

        justify-content: center;


    }




    .services-grid,
    .courses-grid,
    .testimonials-grid,
    .statistics-grid {


        grid-template-columns: 1fr;


        gap: 20px;


    }




    .service-card,
    .course-card,
    .testimonial-card,
    .stat-card {


        padding: 25px 20px;


        border-radius: 22px;


    }




    .service-icon,
    .course-icon,
    .stat-icon {


        width: 60px;

        height: 60px;


    }




    .about-grid {


        grid-template-columns: 1fr;


    }



    .footer-grid {


        grid-template-columns: 1fr;


        gap: 30px;


    }



    .navbar-container {


        padding: 0 15px;


    }



    .logo img {


        max-width: 140px;


    }



    .hamburger {


        display: block;


    }



}