/* =========================
   Mobile (max-width:768px)
========================= */

@media (max-width:768px){

    .container{
        width:92%;
    }

    /* Header */
    .header{
        padding:15px 0;
    }

    .nav{
        display:flex;
        justify-content:space-between;
        align-items:center;
    }

    .logo{
        font-size:24px;
        white-space:nowrap;
    }

    .navbar{
        display:none;
    }

    .btn{
        padding:10px 18px;
        font-size:14px;
    }

    /* Hero */
    .hero-content{
        display:flex;
        flex-direction:column-reverse;
        align-items:center;
        text-align:center;
        gap:30px;
    }

    .hero-text h1{
        font-size:42px;
        line-height:1.2;
    }

    .hero-text p{
        font-size:16px;
        max-width:100%;
        margin:15px auto;
    }

    .hero-buttons{
        justify-content:center;
        gap:15px;
    }

    .hero-image img{
        width:80%;
        max-width:320px;
        margin:auto;
    }

    /* Categories */

    .category-grid{
        display:flex;
        overflow-x:auto;
        gap:15px;
        padding-bottom:10px;
    }

    .category-card{
        min-width:150px;
    }

    /* Popular Menu */

    .menu-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:25px;
    }

    .menu-card{
        width:100%;
        max-width:340px;
        margin:auto;
    }

    .menu-card img{
        width:180px;
        height:auto;
    }

}
@media (max-width:768px){

    .hero-content{
        display:flex;
        flex-direction:column-reverse;
        align-items:center;
        justify-content:center;
        text-align:center;
        gap:30px;
    }

    .hero-text,
    .hero-image{
        width:100%;
    }

    .hero-image img{
        width:320px;
        max-width:90%;
    }

    .hero-buttons{
        justify-content:center;
    }

    .why-grid,
    .category-grid,
    .menu-grid,
    .about-content{
        display:grid;
        grid-template-columns:1fr;
    }
}