/* =====================================
   LEGENDS RESPONSIVE DESIGN
===================================== */



/* ===============================
   TABLETS
=============================== */


@media (max-width: 1100px) {


    .nav-links {

        gap: 20px;

    }



    .hero h1 {

        font-size: 60px;

    }



    .category-grid {

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

    }



    .food-grid {

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

    }



    .features-grid {

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

    }



    .gallery-grid {

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

    }



    .review-slider {

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

    }



    .footer-container {

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

    }


}









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


@media (max-width: 768px) {




    section {

        padding: 60px 5%;

    }






    /* NAVBAR */


    .navbar {

        height: 80px;

        padding: 0 5%;

    }





    .logo img {

        width: 120px;

    }





    .hamburger {

        display: flex;

    }







    .nav-links {


        position: absolute;

        top: 80px;

        left: 0;

        width: 100%;


        background: #0b0b0b;


        flex-direction: column;


        padding: 30px;


        gap: 25px;


        display: none;


    }





    .nav-links.open {


        display: flex;


    }







    .order-btn {


        text-align: center;


        width: 100%;


    }









    /* HERO */


    .hero {


        height: 90vh;


    }






    .hero h1 {


        font-size: 42px;


    }





    .hero p {


        font-size: 17px;


    }





    .hero-buttons {


        flex-direction: column;


        width: 100%;


    }





    .btn {


        text-align: center;


        width: 100%;


    }








    /* PAGE HERO */


    .page-hero {


        height: 45vh;


    }





    .page-hero h1 {


        font-size: 42px;


    }









    /* TITLES */


    .section-title h2 {


        font-size: 32px;


    }









    /* GRIDS */


    .category-grid,
    .food-grid,
    .features-grid,
    .gallery-grid,
    .review-slider {


        grid-template-columns: 1fr;


    }









    /* ABOUT */


    .about-container {


        grid-template-columns: 1fr;


        gap: 30px;


    }








    .about-content h2 {


        font-size: 32px;


    }









    /* LOCATION */


    .location-container {


        grid-template-columns: 1fr;


    }






    .map {


        height: 300px;


    }









    /* MENU SLIDER */


    .menu-slider {


        gap: 10px;


    }





    .menu-image-container {


        width: 90%;


    }






    .slide-btn {


        width: 40px;


        height: 40px;


        font-size: 18px;


    }









    /* SOCIAL */


    .social-links {


        flex-direction: column;


    }







    /* FOOTER */


    .footer-container {


        grid-template-columns: 1fr;


        text-align: center;


    }




    .footer-logo {


        margin: auto;

        margin-bottom: 20px;


    }



}