.restaurant-hero{

    position:relative;

    min-height:90vh;

    display:flex;
    align-items:center;

    background:url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?q=80&w=2000');

    background-size:cover;
    background-position:center;
}

.restaurant-overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        rgba(8,17,32,.75),
        rgba(8,17,32,.85)
    );
}

.restaurant-content{

    position:relative;
    z-index:2;

    max-width:800px;

    color:white;
}

.restaurant-badge{

    display:inline-block;

    padding:12px 24px;

    border-radius:50px;

    background:
    rgba(255,107,53,.15);

    border:1px solid rgba(255,107,53,.3);

    color:#ff6b35;

    font-weight:700;
}

.restaurant-content h1{

    font-size:70px;

    font-weight:800;

    margin:25px 0;
}

.restaurant-content p{

    font-size:20px;

    color:#e2e8f0;

    line-height:1.8;
}

.hero-buttons{

    margin-top:35px;

    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.restaurant-welcome{

    padding:120px 0;

    background:#fff;
}

.welcome-image{

    position:relative;
}

.welcome-image img{

    width:100%;

    height:650px;

    object-fit:cover;

    border-radius:35px;

    box-shadow:
    0 25px 60px rgba(0,0,0,.12);
}

.welcome-content{

    padding-left:40px;
}

.welcome-content span{

    color:#ff6b35;

    font-weight:700;

    letter-spacing:2px;
}

.welcome-content h2{

    font-size:52px;

    font-weight:800;

    color:#081120;

    margin:20px 0 30px;
}

.welcome-content p{

    color:#64748b;

    line-height:1.9;

    margin-bottom:20px;
}

.welcome-features{

    margin-top:35px;

    display:grid;

    gap:15px;
}

.welcome-features div{

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px 20px;

    border-radius:15px;

    background:#ff6b35;

    font-weight:600;
}

.welcome-features i{

    color:#fff5f2;

    font-size:20px;
}

.restaurant-menu{

    padding:120px 0;

    background:#f2f3f5;
}

.section-header{

    max-width:700px;

    margin:auto auto 60px;
}

.section-header span{

    color:#ff6b35;

    font-weight:700;
}

.section-header h2{

    font-size:55px;

    font-weight:800;

    margin-top:15px;
}

.menu-tabs{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:60px;
}

.menu-tab{

    border:none;

    padding:16px 30px;

    border-radius:50px;

    background:white;

    font-weight:700;

    transition:.3s;

    box-shadow:
    0 10px 25px rgba(0,0,0,.05);
}

.menu-tab.active,
.menu-tab:hover{

    background:
    linear-gradient(
        135deg,
        #ff6b35,
        #dc2626
    );

    color:white;
}
.menu-pane{

    display:none;

    animation:fadeMenu .5s ease;
}

.menu-pane.active{

    display:block;
}

.menu-image{

    width:100%;

    height:500px;

    object-fit:cover;

    border-radius:30px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.12);
}

.menu-text h3{

    font-size:42px;

    margin-bottom:20px;

    font-weight:800;
}

.menu-text p{

    color:#64748b;

    margin-bottom:25px;
}

.menu-text ul{

    padding:0;

    list-style:none;
}

.menu-text li{

    display:flex;

    justify-content:space-between;

    padding:15px 0;

    border-bottom:1px solid #e2e8f0;

    font-weight:600;
}
@keyframes fadeMenu{

    from{

        opacity:0;
        transform:translateY(20px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.order-section{

    padding:120px 0;

    background:
    linear-gradient(
        180deg,
        #ffffff,
        #f8fafc
    );
}

.order-image-wrapper{

    position:relative;
}

.order-image-wrapper img{

    width:100%;

    height:650px;

    object-fit:cover;

    border-radius:35px;

    box-shadow:
    0 25px 60px rgba(0,0,0,.15);
}
.floating-card{

    position:absolute;

    bottom:30px;
    left:30px;

    background:white;

    padding:20px 25px;

    border-radius:20px;

    display:flex;

    align-items:center;

    gap:15px;

    box-shadow:
    0 15px 35px rgba(0,0,0,.12);
}

.floating-card i{

    width:60px;
    height:60px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #ff6b35,
        #dc2626
    );

    color:white;

    font-size:24px;
}

.floating-card p{

    margin:0;

    color:#64748b;
}
.order-content{

    padding-left:30px;
}

.order-content h2{

    font-size:55px;

    font-weight:800;

    margin:20px 0;
}

.order-content p{

    font-size:17px;

    color:#64748b;

    line-height:1.9;
}
.order-features{

    margin:35px 0;

    display:grid;

    gap:18px;
}

.feature-item{

    display:flex;

    align-items:center;

    gap:15px;

    font-weight:600;

    color:#081120;
}

.feature-item i{

    color:#ff6b35;

    font-size:20px;
}
.order-actions{

    display:flex;

    gap:20px;

    flex-wrap:wrap;
}

.btn-order{

    padding:18px 35px;

    border-radius:60px;

    text-decoration:none;

    background:
    linear-gradient(
        135deg,
        #25D366,
        #128C7E
    );

    color:white;

    font-weight:700;

    transition:.3s;
}

.btn-order:hover{

    transform:translateY(-4px);

    color:white;
}

.btn-view-menu{

    padding:18px 35px;

    border-radius:60px;

    text-decoration:none;

    border:2px solid #ff6b35;

    color:#ff6b35;

    font-weight:700;

    transition:.3s;
}

.btn-view-menu:hover{

    background:#ff6b35;

    color:white;
}

.restaurant-stats{

    padding:100px 0;

    background:
    linear-gradient(
        135deg,
        #081120,
        #0f172a
    );

    position:relative;

    overflow:hidden;
}

.restaurant-stats::before{

    content:"";

    position:absolute;

    top:-200px;
    right:-200px;

    width:400px;
    height:400px;

    border-radius:50%;

    background:
    rgba(255,107,53,.08);
}
.stats-wrapper{

    display:grid;

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

    gap:30px;

    position:relative;

    z-index:2;
}

.stat-card{

    text-align:center;

    padding:40px 25px;

    border-radius:25px;

    background:
    rgba(255,255,255,.05);

    backdrop-filter:blur(10px);

    border:
    1px solid rgba(255,255,255,.08);

    transition:.4s;
}

.stat-card:hover{

    transform:
    translateY(-10px);

    background:
    rgba(255,255,255,.08);
}
.stat-icon{

    width:80px;
    height:80px;

    margin:auto auto 25px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #ff6b35,
        #dc2626
    );

    color:white;

    font-size:30px;
}
.stat-card h3{

    color:white;

    font-size:48px;

    font-weight:800;

    margin-bottom:10px;
}

.stat-card p{

    color:#cbd5e1;

    margin:0;

    font-size:16px;

    font-weight:500;
}
@media(max-width:992px){

    .stats-wrapper{

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

}

@media(max-width:576px){

    .stats-wrapper{

        grid-template-columns:1fr;
    }

}