/* Hero background image full cover */
.hero {
    width: 100%;
    min-height: 80vh;
    background-image: url('../assets/images/landing/hero-1.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hero::before {
    /* overlay for text readability */
    content: "";
    position: absolute;
    inset: 0;
    /*background: rgba(0,0,0,0.45);*/
    z-index: 0;
}

.hero .container-lg {
    position: relative;
    z-index: 2;
}

.hero-title {
    font-family: PlayfairDisplay, serif;
    font-size: 55px;
    font-weight: 700;
    line-height: 60px;
    letter-spacing: 0;
}

.hero-subtitle{
    font-family: PlusJakartaSans, serif;
    font-size: 19px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0;
}

/* Indicators */
.hero-indicators {
    position: static;
    margin: 18px 0 24px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.hero-indicators [data-bs-target] {
    width: 42px;
    height: 8px;
    background-color: #e4d9d0;
    opacity: 1;
    border: 0;
    border-radius: 999px;
}

.hero-indicators .active {
    background-color: var(--button-color);
}

/* Responsive */
@media (max-width: 991.98px) {
    .hero { min-height: 72vh; }
    .hero-title {
        font-size: 45px;
        line-height: 50px;
    }
    .hero:before{
        background: rgba(0,0,0,0.45);
    }
    .hero-subtitle {
        font-size: 16px;
        line-height: 24px;
    }
}

@media (max-width: 575.98px) {
    .hero { min-height: 64vh; }
    .hero-pizza { display: none; }
    .hero:before{
        background: rgba(0,0,0,0.45);
    }
    .hero-title {
        font-size: 35px;
        line-height: 40px;
    }
    .hero-subtitle {
        font-size: 14px;
        line-height: 20px;
    }
}

.menu-text{
    font-family: Anton, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 45px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--button-color);
}

/*Menu CArd Styles*/

/* ===== Card ===== */
.menu-card{
    display:block;
    background:#fff;
    border-radius:20px;
    box-shadow:0 10px 26px rgba(0,0,0,.10);
    overflow:hidden;
    transition:transform .18s ease, box-shadow .18s ease;
}
.menu-card:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.14); }

.menu-card__img{
    position: relative;
    overflow: hidden;
}

.menu-card__img img{
    display: block;
    width: 100%;

    object-fit: cover;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.menu-card__body{
    position:relative;
    background:#fff;
    text-align:center;
    padding:18px 16px 22px;
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;
}

.menu-card__title{
    display:block;
    color: var(--deep-charcoal);
    font-family: Anton, sans-serif;
    font-weight: 400;
    font-size: 40px;
    letter-spacing:.0em;
    text-transform:uppercase;
    margin-bottom:8px;
    margin-top: 10px;
}

.row.g-4{ --bs-gutter-x:2rem; --bs-gutter-y:2rem; }

@media (max-width:575.98px){
    .menu-card__img img{ aspect-ratio: 4 / 4; } /* মোবাইলে আরও লম্বা */
}

/*best Selling Items*/

/* ----- Section container with big radius + bottom scallops ----- */
.best-shell{
    background: var(--shell);
    border-radius: 28px;
    position: relative;
    padding-inline: clamp(.5rem, 2vw, 1.25rem);
    margin-bottom: 200px;
}
.best-shell::after{
    /* নিচে স্ক্যালপ ইফেক্ট */
    content:"";
    background: url("../assets/images/landing/best_selling_bottom_bg.webp") no-repeat center;
    position: absolute;
    width: 100%;
    bottom: -100px;
    height: 150px;
    background-size: cover;
    left: 0;
    z-index: 1;
}
.bs-form{
    padding-bottom: 30px;
}

.best-title{
    color: var(--button-color);
    font-family: Anton, serif;
    font-weight: 400;
    letter-spacing: 0;
    font-size: 45px;
    line-height: 21px;
    text-transform: uppercase;
}
.best-sub{
    font-family: PlusJakartaSans, serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 28px;
    color: var(--light-charcoal);
}

/* ----- Round nav buttons ----- */
.circle-nav{
    width: 38px; height: 38px;
    border-radius: 999px;
    background: var(--button-color);
    color: #fff;
    border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(187,74,23,.25);
    transition: transform .15s ease, background .15s ease, box-shadow .15s;
}
.circle-nav:hover{ background: var(--button-hover-color); transform: translateY(-1px); }


.product-card{
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 14px 20px rgba(0,0,0,.10);
    overflow: hidden;
    display: flex; flex-direction: column;
}

.product-img{ position: relative; overflow: hidden; }
.product-img img{
    display:block;
    width:100%;
    height: 380px;
    object-fit: cover;
}

/* Body */
.product-body{ padding: 18px 18px 22px; }
.product-title{
    font-family: Anton, sans-serif;
    font-weight: 400;
    font-size: 30px;
    letter-spacing: 0;
    text-transform: uppercase;
    margin: 10px;
    color: #1a1a1a;
}
.product-title .emoji{ font-size: 1.1rem; margin-left: .25rem; }
.product-desc{
    color: rgba(0,0,0,.65);
    margin-left: 10px;
    margin-bottom: 14px;
}

/* Track (mobile horizontal scroll) */
.best-track{
    scroll-snap-type: x mandatory;
}
.best-track > .col{ scroll-snap-align: start; }

/* Tighter card width on very small screens */
@media (max-width: 575.98px){
    .best-track > .col{ max-width: 85%; }
}


/* How it works section */

.howitworks{
    background-color: var(--shell);
    margin-top: 100px;
}
.how-card-parent{
    margin-bottom: 80px;
}
.how-card {
    border-radius: 1rem;
    background: #FFFFFF;
    padding-top: 60px;
    margin-top: 80px;
    margin-bottom: -80px;
}
.how-image{
    margin-top: -150px;
    object-fit: fill;
}
.how-headings{
    margin-top: 20px;
    font-family: Anton, serif;
    font-weight: 400;
    font-size: 35px;
    line-height: 30px;
    letter-spacing: 0;
}
.how-info{
    margin-top: 30px;
    font-family: PlusJakartaSans, serif;
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 0;
    color: #817C7C;
}