/* ==========================================
   Restaurant Details Main CSS
========================================== */


*{
    box-sizing:border-box;
}


body{

    margin:0;

    padding:0;

    font-family:
    "Poppins",
    Arial,
    sans-serif;

    background:#f7f7f7;

    color:#222;

}


/* Main Container */

.restaurant-container{

    width:100%;

    max-width:1200px;

    margin:auto;

    padding:20px;

}


/* Common Section */

.restaurant-section{

    background:#ffffff;

    border-radius:15px;

    padding:20px;

    margin-bottom:20px;

    box-shadow:
    0 5px 20px rgba(0,0,0,0.06);

}


/* Heading Style */

.restaurant-section h2{

    margin:0 0 15px;

    font-size:24px;

    font-weight:600;

}


/* Buttons */

.restaurant-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    border-radius:8px;

    background:#ff5200;

    color:#fff;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    border:none;

    cursor:pointer;

    transition:.3s;

}


.restaurant-btn:hover{

    background:#e74600;

}



/* Images */

img{

    max-width:100%;

    display:block;

}



/* Flex Utility */

.restaurant-flex{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}



/* Grid */

.restaurant-grid{

    display:grid;

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

    gap:20px;

}



/* Mobile Responsive */

@media(max-width:992px){


    .restaurant-grid{

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

    }


}



@media(max-width:600px){


    .restaurant-container{

        padding:10px;

    }


    .restaurant-section{

        padding:15px;

        border-radius:12px;

    }


    .restaurant-flex{

        flex-direction:column;

        align-items:flex-start;

    }


    .restaurant-grid{

        grid-template-columns:
        1fr;

    }


    .restaurant-section h2{

        font-size:20px;

    }


}