/* ==========================================
   TECH'nSYNTAX RESPONSIVE CSS
========================================== */


/* ==========================================
   LARGE DESKTOP
========================================== */

@media (max-width:1200px){

    .container{

        width:92%;

    }


    .hero h1{

        font-size:52px;

    }


    .page-hero h1{

        font-size:45px;

    }

}



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

@media (max-width:992px){


    /* Navbar */

    .navbar{

        height:75px;

        position:relative;

    }


    .menu-btn{

        display:block;

    }



    .navbar > .btn{

        display:none;

    }



    .nav-links{

        position:absolute;

        top:75px;

        left:0;


        width:100%;


        background:white;


        flex-direction:column;


        align-items:center;


        gap:22px;


        padding:30px 0;


        box-shadow:0 10px 30px rgba(0,0,0,.1);


        display:none;


        z-index:999;


    }



    .nav-links.show{

        display:flex;

    }




    /* Hero */


    .hero-content{

        grid-template-columns:1fr;

        text-align:center;

        gap:40px;

    }



    .hero-buttons{

        justify-content:center;

    }




    /* Grids */


    .grid-2{

        grid-template-columns:1fr;

    }



    .contact-grid{

        grid-template-columns:1fr;

    }



}



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


@media (max-width:768px){


    .container{

        width:94%;

    }



    /* Typography */


    .hero h1{

        font-size:38px;

    }



    .page-hero h1{

        font-size:34px;

    }



    h2{

        font-size:28px;

    }



    /* Hero */


    .hero{

        padding:70px 0;

    }



    .hero-buttons{

        flex-direction:column;

        width:100%;

    }



    .hero-buttons .btn,
    .hero-buttons .btn-outline{

        width:100%;

    }





    /* Sections */


    .section{

        padding:60px 0;

    }




    /* Cards */


    .card{

        padding:22px;

    }




    /* Service grid */


    .service-grid{

        grid-template-columns:1fr;

    }



}



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


@media (max-width:480px){



    .logo{

        font-size:18px;

    }



    .logo img{

        width:32px;

    }




    .hero h1{

        font-size:30px;

    }



    .hero p{

        font-size:15px;

    }



    .page-hero{

        padding:70px 0 40px;

    }



    .page-hero h1{

        font-size:28px;

    }




    .cta h2{

        font-size:26px;

    }



    .btn,
    .btn-outline{

        padding:12px 20px;

        font-size:14px;

    }



}



/* ==========================================
   EXTRA SMALL DEVICES
========================================== */


@media (max-width:360px){


    .hero h1{

        font-size:26px;

    }


    .nav-links{

        font-size:14px;

    }


}