/********** Template CSS **********/
:root {
    --primary: #D15704;
    --secondary: #FB9F38;
    --light: #F5F8F2;
    --dark: #252C30;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 99;
}

/* Floating WhatsApp button */
.whatsapp-float {
    position: fixed;
    right: 30px;
    bottom: 100px;
    z-index: 9999;
    width: 56px;
    height: 56px;
    background: #25D366; /* WhatsApp green */
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}
.whatsapp-float i {
    font-size: 22px;
    line-height: 1;
}
.whatsapp-float:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.22); }
.whatsapp-float:focus { outline: none; box-shadow: 0 0 0 6px rgba(37,211,102,0.14); }

@media (max-width: 576px) {
    .whatsapp-float { right: 18px; bottom: 86px; width:48px; height:48px; }
    .whatsapp-float i { font-size:20px; }
}

/* Image inside whatsapp float */
.whatsapp-float img {
    display: block;
    width: 60%;
    height: 60%;
    object-fit: contain;
    border-radius: 50%;
}

@media (max-width: 576px) {
    .whatsapp-float img { width: 64%; height: 64%; }
}

.fw-medium {
    font-weight: 600;
}

.fw-bold {
    font-weight: 700;
}

.fw-black {
    font-weight: 900;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    transition: .5s;
    font-weight: 500;
}

.btn-primary,
.btn-outline-primary:hover {
    color: var(--light);
}

.btn-secondary,
.btn-outline-secondary:hover {
    color: var(--dark);
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

/* Bulk-order category tiles */
.bulk-tile {
    --tile-border: var(--secondary);
    background: #ffffff;
    color: var(--primary);
    border: 2px solid var(--secondary);
    border-radius: 12px;
    font-size: 1.3rem;
    font-weight: 600;
    padding: 1rem 0.9rem;
    min-height: 90px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    text-decoration: none !important;
}
.bulk-tile:hover,
.bulk-tile:focus {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 18px 40px rgba(209,87,4,0.12);
    border-color: var(--primary);
}
.bulk-tile:active { transform: translateY(-2px) scale(0.995); }

@media (max-width: 576px) {
    .bulk-tile { font-size: 1.05rem; min-height: 72px; padding: .7rem .6rem; }
}

/* Make sure full-width bootstrap utility doesn't remove our rounding */
.bulk-tile.w-100 { display: flex; }


/*** Navbar ***/
.sticky-top {
    top: -150px;
    transition: .5s;
}

.navbar .navbar-brand {
    position: absolute;
    padding: 0;
    width: 170px;
    height: 135px;
    top: 0;
    left: 0;
}

/* Ensure logo image fits the navbar-brand container */
.navbar .navbar-brand img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.navbar .navbar-nav .nav-link {
    margin-right: 35px;
    padding: 25px 0;
    color: var(--dark);
    font-weight: 600;
    text-transform: uppercase;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--primary);
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

@media (max-width: 991.98px) {
    .navbar .navbar-brand {
        width: 126px;
        height: 100px;
    }

    .navbar .navbar-nav .nav-link  {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar .navbar-nav {
        margin-top: 75px;
        border-top: 1px solid #EEEEEE;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}


/*** Header ***/
.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, .45); /* darker overlay for improved contrast */
    z-index: 1;
}

/* Improve readability of the text on carousel images */
#header-carousel .carousel-caption p,
#header-carousel .carousel-caption h1,
#header-carousel .carousel-caption .btn {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}

#header-carousel .carousel-caption strong,
#header-carousel .carousel-caption p strong {
    color: #ffffff !important; /* make strong text white for visibility */
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7) !important;
}

/* Make the 'Book Now' button (btn-light) text black on the carousel */
#header-carousel .carousel-caption .btn.btn-light {
    color: #000000 !important;
    text-shadow: none !important;
    background-color: #ffffff !important;
}

.carousel-control-prev,
.carousel-control-next {
    width: 15%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 3.5rem;
    background-color: var(--dark);
    border: 15px solid var(--dark);
}

@media (max-width: 768px) {
    #header-carousel .carousel-item {
        position: relative;
        min-height: 450px;
    }
    
    #header-carousel .carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.page-header {
    /* Use image as background and apply overlay via ::before for reliability */
    position: relative;
    /* Primary: contacthead.jpg (user). Fallback: main.jpg */
    background: url(../img/contacthead.jpg) center center / cover no-repeat, url(../img/main.jpg) center center / cover no-repeat;
}

.page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(255, 179, 71, .7), rgba(255, 179, 71, .7));
    pointer-events: none;
}

.page-header > .container {
    position: relative;
    z-index: 1;
}

.page-header .breadcrumb-item+.breadcrumb-item::before {
    color: var(--light);
}

.page-header .breadcrumb-item,
.page-header .breadcrumb-item a {
    font-size: 18px;
    color: var(--light);
}


/*** Section Title ***/
.section-title {
    position: relative;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
}

.section-title::before {
    position: absolute;
    content: "";
    width: 50%;
    height: 2px;
    bottom: 0;
    left: 0;
    background: var(--primary);
}

.section-title::after {
    position: absolute;
    content: "";
    width: 28px;
    height: 28px;
    bottom: -13px;
    left: calc(25% - 13px);
    background: var(--dark);
    border: 10px solid #FFFFFF;
    border-radius: 28px;
}

.section-title.text-center::before {
    left: 25%;
}

.section-title.text-center::after {
    left: calc(50% - 13px);
}


/*** Products ***/
.product {
    background: url(../img/product-bg.png) left bottom no-repeat;
    background-size: auto;
}

.product-carousel .owl-nav {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.about-section { padding-top: 1.25rem; padding-bottom: 1.25rem; }

.product-carousel .owl-nav .owl-prev,
.product-carousel .owl-nav .owl-next {
    background: var(--primary);
    border-radius: 55px;
    box-shadow: 0 0 45px rgba(0, 0, 0, .15);
    font-size: 25px;
    transition: .5s;
}

.product-carousel .owl-nav .owl-prev:hover,
.product-carousel .owl-nav .owl-next:hover {
    background: #FFFFFF;
    color: var(--primary);
}


/*** About ***/
.video {
    /* keep the background image and subtle tint, but enable positioning for overlay */
    position: relative;
    background: linear-gradient(rgba(255, 179, 71, .08), rgba(255, 179, 71, .08)), url(../img/video-bg.jpg) center center no-repeat;
    background-size: cover;
}

.video::before {
    /* dark translucent overlay to improve text contrast */
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 0;
    pointer-events: none;
}

/* Ensure content sits above the overlay and text is visible */
.video .container,
.video .container .row,
.video .container .row .col-lg-6 {
    position: relative;
    z-index: 1;
}

/* Starters page styles */
.starters-hero {
    padding: 2.5rem 0 1rem;
}
.starters-intro {
    max-width: 850px;
    margin: 0 auto 2rem auto;
    color: var(--dark);
}
.starter-card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(37,21,7,0.06);
    transition: transform .22s ease, box-shadow .22s ease;
}
.starter-card:hover { transform: translateY(-6px); box-shadow: 0 18px 42px rgba(37,21,7,0.12); }
.starter-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}
.starter-body { padding: 1rem; }
.starter-title { font-weight: 700; margin-bottom: .5rem; }
.starter-desc { font-size: .95rem; color: #586069; margin-bottom: .75rem; }
.starter-actions { display:flex; gap:.5rem; align-items:center; }
.starter-badge { margin-left:auto; font-weight:700; }

@media (max-width: 576px) {
    .starter-img { height: 140px; }
}

/* Improved heading and list styling for Starters page */
.starters-hero .section-title p {
    font-size: 1rem;
    color: var(--primary);
    letter-spacing: .4px;
}
.starters-hero .section-title h1 {
    font-size: 2.25rem;
    color: var(--dark);
    font-weight: 800;
    margin-top: .25rem;
}

/* Decorative heading tweaks for starters page */
.starter-heading {
    display: inline-block;
    position: relative;
    padding: 6px 14px;
    border-radius: 40px;
    background: linear-gradient(90deg, rgba(241,146,60,0.08), rgba(241,146,60,0.04));
    box-shadow: 0 6px 20px rgba(37,21,7,0.04);
    font-size: 2.1rem;
}
.curries-hero .section-title p,
.curries-hero .starter-heading {
    color: #FFD54A !important; /* gold heading for Curries page */
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.starter-emoji { font-size: 1.05em; margin: 0 .4rem; }
.decor-divider {
    width: 140px;
    height: 6px;
    border-radius: 6px;
    margin-top: 12px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    box-shadow: 0 6px 16px rgba(209,87,4,0.12);
}
.starters-hero .lead { color: #555; max-width: 820px; margin: 0 auto 1.25rem auto; }

/* Background variant for a starter card (paneer example) */
.starter-bg-paneer {
    position: relative;
    color: #fff;
/* ------------------------------------------------------------------
    Paneer & Cheese background

    - Current image: ../img/food1.jpg
    - Usage: applied to the "Paneer & Cheese" card via class `starter-bg-paneer`.
    - To replace the image: update the `background-image` URL below
      OR replace the image file at `img/food1.jpg` with your chosen image
      (keep the same filename), whichever is easier.
------------------------------------------------------------------ */
     background-image: url("../img/pannertikka.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
    overflow: hidden;
}
.starter-bg-paneer::before {
    content: "";
    position: absolute;
    inset: 0;
    /* stronger overlay for better text contrast (Paneer section tuned) */
    background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.8));
    z-index: 0;
}
.starter-bg-paneer h5,
.starter-bg-paneer .starter-list,
.starter-bg-paneer .starter-list li {
   
    z-index: 1;
    color: #fff;
}
.starter-bg-paneer .starter-list { list-style: disc inside; }

/* Generic background variant for other sections */
.starter-bg {
    position: relative;
    color: #fff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
    overflow: hidden;
/* ------------------------------------------------------------------
    Generic section backgrounds (used with `starter-bg` + inline URL)

    The following sections use inline `style="background-image: url('...')"` in
    `starters.html`. Replace the image by editing the URL in that file, or
    change the filename in the `img/` folder.

    Mapping used in `starters.html` (current):
      - Vegetable Starters : img/main.jpg
      - Baby Corn & Gobi    : img/main2.jpg
      - Rolls & Fried Snacks: img/about1.jpg
      - South Indian Starters: img/about2.jpg
      - Chaat & Snack Starters: img/about3.jpg

    To change a section image quickly:
      1) Edit `starters.html` and update the inline `background-image` URL for
          the desired card, e.g.
              <div class="card starter-card p-3 starter-bg" style="background-image: url('img/your-image.jpg');">
      2) Or replace the file in `img/` with the same name as currently used.

    If you prefer CSS-only control, I can add dedicated classes
    (e.g. `.starter-bg-vegetable { background-image: url(...); }`) — tell me.
------------------------------------------------------------------ */
}
.starter-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    /* stronger overlay for better text contrast */
    background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.65));
    z-index: 0;
}
.starter-bg h5,
.starter-bg .starter-list,
.starter-bg .starter-list li {
    position: relative;
    z-index: 1;
    color: #fff;
}
.starter-bg .starter-list { list-style: disc inside; }

/* Dedicated background classes for easy image replacement
    Update the `background-image` URL here to change a section's image without editing HTML.
*/
.starter-bg-vegetable { background-image: url("../img/vegmunchurian.jpg"); }
.starter-bg-babycorn { background-image: url("../img/corn.jpg"); }
.starter-bg-rolls { background-image: url("../img/french.jog.jpg"); }
.starter-bg-south { background-image: url("../img/samosa.jpg"); }
.starter-bg-chaat { background-image: url("../img/tikki.jpg"); }

@media (max-width: 576px) {
    .starter-bg-paneer { background-position: center 30%; }
}
.starter-list {
    list-style: disc inside;
    padding-left: 0.5rem;
}
.starter-list li {
    padding: 4px 0;
    color: #333;
}
.starter-card.starter-bg h5,
.starter-card.starter-bg .starter-list,
.starter-card.starter-bg .starter-list li,
.starter-bg-paneer h5,
.starter-bg-paneer .starter-list,
.starter-bg-paneer .starter-list li {
    color: #fff; /* ensure white text on background cards */
    position: relative;
    z-index: 1;
}

/* Additional Paneer-specific text improvements */
.starter-bg-paneer h5 {
    font-size: 1.08rem;
    font-weight: 800;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.starter-bg-paneer .starter-list li {
    font-weight: 600;
    padding: 6px 0;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.starter-bg-paneer .starter-list {
    margin-bottom: 0.25rem;
}

/* Apply the same Paneer overlay + text treatments to all other background sections */
.starter-bg-vegetable::before,
.starter-bg-babycorn::before,
.starter-bg-rolls::before,
.starter-bg-south::before,
.starter-bg-chaat::before {
    content: "";
    position: absolute;
    inset: 0;
    /* match Paneer overlay strength for consistent legibility */
    background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.8));
    z-index: 0;
}

.starter-bg-vegetable h5,
.starter-bg-vegetable .starter-list,
.starter-bg-vegetable .starter-list li,
.starter-bg-babycorn h5,
.starter-bg-babycorn .starter-list,
.starter-bg-babycorn .starter-list li,
.starter-bg-rolls h5,
.starter-bg-rolls .starter-list,
.starter-bg-rolls .starter-list li,
.starter-bg-south h5,
.starter-bg-south .starter-list,
.starter-bg-south .starter-list li,
.starter-bg-chaat h5,
.starter-bg-chaat .starter-list,
.starter-bg-chaat .starter-list li {
    color: #fff; /* ensure white text on background cards */
    position: relative;
    z-index: 1;
}

/* Match Paneer typography/treatment for headings and list items */
.starter-bg-vegetable h5,
.starter-bg-babycorn h5,
.starter-bg-rolls h5,
.starter-bg-south h5,
.starter-bg-chaat h5 {
    font-size: 1.08rem;
    font-weight: 800;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.starter-bg-paneer h5,
.starter-bg-vegetable h5,
.starter-bg-babycorn h5,
.starter-bg-rolls h5,
.starter-bg-south h5,
.starter-bg-chaat h5 { font-size: 1.12rem; }

/* Unified card subheadings: use primary accent for visibility across pages */
.starters-hero .starter-card h5,
.starter-card h5,
.menu-card h5 {
    color: var(--primary) !important;
    font-size: 1.18rem;
    font-weight: 800;
    margin-bottom: 0.6rem;
    text-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.starter-bg-vegetable .starter-list li,
.starter-bg-babycorn .starter-list li,
.starter-bg-rolls .starter-list li,
.starter-bg-south .starter-list li,
.starter-bg-chaat .starter-list li {
    font-weight: 600;
    padding: 6px 0;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.starter-card h5 { font-weight:700; }

@media (max-width: 576px) {
    .starters-hero .section-title h1 { font-size: 1.75rem; }
}

/* Reduce spacing between starter cards and compact content */
.starters-hero .row {
    row-gap: 0.6rem; /* tighter vertical gap between rows */
    column-gap: 0.8rem; /* tighter horizontal gap between cols */
}
.starter-card { padding: 0.65rem; border-radius: 10px; }
.starter-card .starter-list { margin-bottom: 0.15rem; }
.starter-card .starter-list li { font-size: 0.98rem; padding: 3px 0; }
.starter-card h5 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.starters-hero { padding-top: 1rem; }

/* Force exactly 3 columns per row (3x2 grid) within the Starters section
   on screens >= 576px. This ensures the six starter cards arrange as
   three columns in two rows. Keeps default Bootstrap stacking on very small screens. */
@media (min-width: 576px) {
    .starters-hero .row {
        display: flex;
        flex-wrap: wrap;
    }
    .starters-hero .col-12.col-sm-4 {
        flex: 0 0 calc(33.333333% - 0.533333rem); /* account for column-gap */
        max-width: calc(33.333333% - 0.533333rem);
        box-sizing: border-box;
    }
}

/* Curries page: force 3-per-row grid on medium screens and up (>=768px) */
@media (min-width: 768px) {
    .curries-hero .row {
        display: flex;
        flex-wrap: wrap;
    }
    /* target the column classes used on curries.html */
    .curries-hero .col-12.col-sm-6.col-md-4 {
        flex: 0 0 calc(33.333333% - 1rem);
        max-width: calc(33.333333% - 1rem);
        box-sizing: border-box;
    }
}

/* Rice page: force 3-per-row grid on medium screens and up (>=768px) */
@media (min-width: 768px) {
    .rice-hero .row {
        display: flex;
        flex-wrap: wrap;
    }
    .rice-hero .col-12.col-sm-6.col-md-4 {
        flex: 0 0 calc(33.333333% - 1rem);
        max-width: calc(33.333333% - 1rem);
        box-sizing: border-box;
    }
}

/* Full-width background for Curries page */
.curries-bg {
    position: relative;
    background-image: url("../img/curries.jpg"); /* put your image at img/curries-bg.jpg */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 40px 0; /* vertical padding as fallback */
}
.curries-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45); /* dark overlay for readability */
    z-index: 0;
}
.curries-bg > .container {
    position: relative;
    z-index: 1; /* ensure content sits above overlay */
}

/* Hint: To change the background image, replace img/curries-bg.jpg or update the URL above. */

.rice-bg {
    position: relative;
    background-image: url("../img/rice-bg.jpg"); /* put your image at img/rice-bg.jpg */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 40px 0; /* vertical padding as fallback */
}
.rice-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45); /* dark overlay for readability */
    z-index: 0;
}
.rice-bg > .container {
    position: relative;
    z-index: 1; /* ensure content sits above overlay */
}

/* Hint: To change the rice background image, replace img/rice-bg.jpg or update the URL above. */

/* Make Rice page headings visible over the background image */
.rice-hero .section-title p,
.rice-hero .starter-heading {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.rice-hero .lead {
    color: rgba(255,255,255,0.9) !important;
}

/* Full-width background for Roti page */
.roti-bg {
    position: relative;
    background-image: url("../img/roti-bg.jpg"); /* put your image at img/roti-bg.jpg */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 40px 0; /* vertical padding as fallback */
}
.roti-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45); /* dark overlay for readability */
    z-index: 0;
}
.roti-bg > .container {
    position: relative;
    z-index: 1; /* ensure content sits above overlay */
}

/* Make Roti page headings visible over the background image */
.roti-hero .section-title p,
.roti-hero .starter-heading {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.roti-hero .lead {
    color: rgba(255,255,255,0.9) !important;
}

/* Full-width background for Sweets page */
.sweets-bg {
    position: relative;
    background-image: url("../img/sweets.jpg"); /* put your image at img/sweets-bg.jpg */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 40px 0;
}
.sweets-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 0;
}
.sweets-bg > .container { position: relative; z-index: 1; }
.sweets-hero .section-title p,
.sweets-hero .starter-heading { color: #ffffff !important; text-shadow: 0 2px 10px rgba(0,0,0,0.7); }
.sweets-hero .lead { color: rgba(255,255,255,0.9) !important; }

/* Full-width background for Raita page */
.raita-bg {
    position: relative;
    background-image: url("../img/raita.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 40px 0;
}
.raita-bg::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 0; }
.raita-bg > .container { position: relative; z-index: 1; }
.raita-hero .section-title p,
.raita-hero .starter-heading { color: #ffffff !important; text-shadow: 0 2px 10px rgba(0,0,0,0.7); }
.raita-hero .lead { color: rgba(255,255,255,0.9) !important; }

/* Full-width background for Beverages page */
.beverages-bg {
    position: relative;
    background-image: url("../img/bevarages.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 40px 0;
}
.beverages-bg::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 0; }
.beverages-bg > .container { position: relative; z-index: 1; }
.beverages-hero .section-title p,
.beverages-hero .starter-heading { color: #ffffff !important; text-shadow: 0 2px 10px rgba(0,0,0,0.7); }
.beverages-hero .lead { color: rgba(255,255,255,0.9) !important; }

/* Full-width background for South Indian page */
.south-bg {
    position: relative;
    background-image: url("../img/south.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 40px 0;
}
.south-bg::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 0; }
.south-bg > .container { position: relative; z-index: 1; }
.south-hero .section-title p,
.south-hero .starter-heading { color: #ffffff !important; text-shadow: 0 2px 10px rgba(0,0,0,0.7); }
.south-hero .lead { color: rgba(255,255,255,0.9) !important; }


/* Force headings, subheadings and feature text to be light for readability */
.video h1,
.video h5,
.video p,
.video .text-dark,
.video span.text-dark {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* Keep the white buttons and make sure they remain on top */
.video .btn-light {
    z-index: 2;
}

.btn-play {
    position: relative;
    display: block;
    box-sizing: content-box;
    width: 65px;
    height: 75px;
    border-radius: 100%;
    border: none;
    outline: none !important;
    padding: 28px 30px 30px 38px;
    background: #FFFFFF;
}

.btn-play:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 120px;
    height: 120px;
    background: #FFFFFF;
    border-radius: 100%;
    animation: pulse-border 1500ms ease-out infinite;
}

.btn-play:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 120px;
    height: 120px;
    background: #FFFFFF;
    border-radius: 100%;
    transition: all 200ms;
}

.btn-play span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    left: 13px;
    border-left: 40px solid var(--primary);
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(2);
        opacity: 0;
    }
}

.modal-video .modal-dialog {
    position: relative;
    max-width: 800px;
    margin: 60px auto 0 auto;
}

.modal-video .modal-body {
    position: relative;
    padding: 0px;
}

/* Enhanced styling for Sri Vrinda's video modal */
.modal-video .modal-dialog {
    max-width: 920px;
    margin: 40px auto;
}
.modal-video .modal-content {
    padding: 1.25rem;
    border-radius: 10px;
    overflow: hidden;
}
.modal-video .modal-header {
    border-bottom: none;
    padding-bottom: 0.25rem;
}
.modal-video .modal-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.75rem;
    margin: 0;
}
.modal-video .modal-body .adv-list {
    margin-top: 0.5rem;
}
.modal-video .adv-list .adv-item {
    display: flex;
    align-items: flex-start;
    font-size: 1.05rem;
    line-height: 1.6;
}
.modal-video .adv-list .adv-item i {
    font-size: 1.35rem;
    margin-top: 4px;
}
.modal-video video,
.modal-video iframe {
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
    width: 100%;
    height: auto;
    max-height: 520px;
}

@media (max-width: 767.98px) {
    .modal-video .modal-dialog { max-width: 95%; margin: 20px auto; }
    .modal-video .row.gx-4 { gap: 1.25rem 1.25rem; }
    .modal-video .adv-list .adv-item { font-size: 1rem; }
}

.modal-video .close {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 0px;
    top: -30px;
    z-index: 999;
    font-size: 30px;
    font-weight: normal;
    color: #FFFFFF;
    background: #000000;
    opacity: 1;
}


/*** Store ***/
.store-item .store-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    opacity: 0;
    transition: .5s;
}

.store-item:hover .store-overlay {
    opacity: 1;
}


/*** Contact ***/
.contact .btn-square {
    width: 100px;
    height: 100px;
    border: 20px solid var(--light);
    background: var(--primary);
    border-radius: 50px;
}


/*** Testimonial ***/
.testimonial {
    background: url(../img/testimonial-bg.jpg) center center no-repeat;
    background-size: cover;
}

.testimonial-item {
    margin: 0 auto;
    max-width: 600px;
    text-align: center;
    background: #FFFFFF;
    border: 30px solid var(--primary);
}

.testimonial-item img {
    width: 60px !important;
    height: 60px !important;
    border-radius: 60px;
}

.testimonial-carousel .owl-dots {
    margin-top: 35px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    background: var(--primary);
    border-radius: 15px;
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    width: 30px;
    background: var(--dark);
}


/*** Footer ***/
.footer {
    color: #B0B9AE;
}

.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: #B0B9AE;
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--primary);
    margin: 0; /* spacing handled by flex gap */
}

.footer .btn.btn-link:hover {
    justify-content: center; /* center links under Quick Links heading */
    padding-left: 0; /* ensure links center visually */
    letter-spacing: 1px;
    box-shadow: none;
}

/* When a footer column is center-aligned, make link buttons flex items
   so the arrow pseudo-element and text align consistently. */
.footer .text-center .btn.btn-link {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* left-align by default */
    gap: 0.6rem; /* space between arrow and text */
    width: 100%;
    padding: 0.35rem 0;
}

/* Quick Links column: center the list directly under the heading */
.footer .quick-links-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer .quick-links-col .btn.btn-link {
    justify-content: center; /* center the arrow+text as a group */
    padding-left: 0;
}
.footer .quick-links-col h4 {
    width: 100%;
    text-align: center;
    margin-bottom: 0.5rem;
}

/* Prevent long link text from awkwardly wrapping the arrow; allow wrap but keep visual alignment */
.footer .text-center .btn.btn-link span {
    display: inline-block;
}

/* Normalize footer column layout so lines align consistently */
.footer .container > .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer .container > .row > [class*="col-"] h4 {
    margin-bottom: 0.5rem; /* tighten heading spacing so list sits just below */
}

.footer p.mb-2,
.footer .btn.btn-link,
.footer h6.text-light {
    margin-bottom: 0.6rem; /* reduce vertical gap between lines */
    line-height: 1.6;
}

/* Slightly reduce link padding so items sit closer to heading */
.footer .btn.btn-link {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Ensure the pseudo icon before quick links is positioned nicely when centered */
.footer .text-center .btn.btn-link::before {
    vertical-align: middle;
}

.copyright {
    color: #B0B9AE;
}

.copyright {
    background: #252525;
}

.copyright a:hover {
    color: #FFFFFF !important;
}

/* Footer visual polish to match provided design */
.footer {
    background: #22282a; /* darker slate */
    color: #b0b9ae;
}

.footer .container > .row > [class*="col-"] {
    align-items: flex-start; /* keep heading left/top unless explicitly centered */
}

.footer h4 {
    color: #86b93f; /* green heading color */
    font-size: 36px;
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 1rem;
}

.footer p.mb-2 { color: #c7d0c6; }
.footer .btn.btn-link { color: #c7d0c6; }

/* Social icon circles (orange) */
.footer .btn-square {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #ffffff;
    box-shadow: none;
    border: none;
    margin: 0 .35rem;
}

.footer .d-flex.pt-3 { margin-top: 1rem; }

/* Quick Links arrows keep the orange accent */
.footer .btn.btn-link::before { color: var(--primary); font-size: 0.9rem; }

/* Business hours emphasized bold lines */
.footer h6.text-light { color: #ffffff; font-weight: 700; }

/* Copyright bar exact look */
.copyright {
    background: #1b1d1e;
    color: #b0b9ae;
    padding: 1.1rem 0;
}
.copyright a.fw-medium { color: #86b93f; font-weight: 700; }

@media (min-width: 992px) {
    .footer .container > .row > [class*="col-"] {
        align-items: flex-start;
    }
}

/* Theme button overrides to ensure Bootstrap buttons follow the orange theme */
.btn-primary {
    color: #ffffff;
    background-color: var(--primary);
    border-color: var(--primary);
}
.btn-primary:hover,
.btn-primary:focus {
    color: #ffffff;
    background-color: #c94803; /* slightly darker */
    border-color: #c94803;
}
.btn-primary:active,
.btn-primary.active {
    background-color: #b13f03;
    border-color: #b13f03;
}
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--primary);
    border-color: var(--primary);
    opacity: 0.8;
}

/* Thali / Store item tweaks */
.store-item .p-4 h4 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.25rem;
}
.store-item .p-4 ul {
    list-style: disc;
    margin-left: 1rem;
    padding-left: 0;
}
.store-item .p-4 li {
    margin-bottom: 0.35rem;
}
.store-item img {
    max-height: 220px;
    width: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* Ensure all thali images show at the same size */
.thali-img {
    width: 100%;
    height: 220px; /* fixed visual height */
    object-fit: cover; /* crop to fill without distortion */
    display: block;
    border-radius: 6px;
}

@media (max-width: 576px) {
    .thali-img { height: 160px; }
}

/* Floating WhatsApp button */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 20px;
    right: 20px;
    background: #25D366;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    z-index: 9999;
    transition: transform .15s ease;
}
    .whatsapp-float i { margin: 0; }

/* Booking card tweaks */
.card p, .card h5 { margin: 0; }

@media (max-width: 576px) {
    .store-item .p-4 h4 { font-size: 1.05rem; }
}

/* Ensure product carousel items and images are a consistent size
   - Make each carousel card a vertical flex container so image + card body
     align and share consistent heights across slides. */
.product-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: stretch;
}
.product-item img {
    width: 100%;
    height: 240px; /* fixed visual height for carousel items */
    object-fit: cover; /* crop to fill without distortion */
    display: block;
    flex: 0 0 240px;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}

/* Make the white info panel underneath the image expand to a uniform height
   so all tiles look identical. Keep centering and small-padding visual style. */
.product-item .bg-white {
    flex: 1 1 auto;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

/* Standardize title and description sizing for uniform appearance */
.product-item h4 {
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
    line-height: 1.1;
}
.product-item .text-body {
    font-size: 0.95rem;
    color: #444;
    display: block;
}

@media (max-width: 768px) {
    .product-item img { height: 200px; }
}

/* Blog styles */
.blog-article .feature-img {
    width: 100%;
    height: 360px;
    object-fit: cover;
}
.blog-article h1 { font-family: 'Playfair Display', serif; }
.blog-article p { color: #333; }
.post-meta { color: #8b8b8b; font-size: 0.95rem; }
.author-box { background: #f8f9fa; }

.sidebar .widget h5 { font-weight: 600; }
.sidebar .widget a { color: #333; text-decoration: none; }
.sidebar .widget img { border-radius: 4px; }

@media (max-width: 991.98px) {
    .blog-article .feature-img { height: 220px; }
}

/* ===== Menu Page Enhancements ===== */
.menu-hero {
    background: linear-gradient(120deg, rgba(255,197,102,0.12), rgba(255,243,230,0.08));
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(37,44,48,0.06);
}

.menu-card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(37,44,48,0.08);
    transition: transform .35s ease, box-shadow .35s ease;
    background: linear-gradient(180deg, #ffffff, #fffaf5);
}
.menu-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(37,44,48,0.14); }

.menu-card .card-body { padding: 1.5rem; }
.menu-card h5 { font-family: 'Playfair Display', serif; font-size: 1.15rem; color: var(--dark); margin-bottom: .8rem; }

.menu-card ul { list-style: none; padding: 0; margin: 0; }
.menu-card ul li {
    padding: .45rem 0;
    border-bottom: 1px dashed #f0e6dd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #444;
    font-size: .98rem;
}
.menu-card ul li:last-child { border-bottom: none; }
.menu-card ul li::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--primary); border-radius: 50%; margin-right: .75rem; }

.menu-card .price { color: var(--primary); font-weight: 700; margin-left: 1rem; }

/* General price styling for elements outside .menu-card (e.g., thali headers) */
.price { color: var(--primary); font-weight: 700; }

.menu-section-note { font-size: .95rem; color: #666; margin-top: 1rem; }

.menu-contact-card { background: linear-gradient(90deg, rgba(217,87,4,0.06), rgba(255,159,56,0.04)); border-radius: 12px; padding: 1rem; }

@media (max-width: 767.98px) {
    .menu-card { margin-bottom: 1rem; }
    .menu-card .card-body { padding: 1rem; }
}

/* About page enhancements */
.about-intro .lead { font-size: 1.05rem; color: #333; line-height: 1.45; margin-bottom: .5rem; }
.about-intro { margin-bottom: .5rem; }
.about-intro .btn { border-width: 2px; padding: .45rem 1rem; }

/* Mosaic gallery (column masonry to avoid gaps) */
.about-mosaic {
    column-count: 2;
    column-gap: .75rem;
    margin-bottom: 0;
}
.about-mosaic .m-item { display: inline-block; width: 100%; margin: 0 0 1rem; border-radius: 10px; overflow: hidden; }
.about-mosaic .m-item img { width: 100%; height: auto; object-fit: cover; display: block; }
.about-mosaic .m-item { box-shadow: 0 12px 30px rgba(37,44,48,0.08); transition: transform .35s ease; }
.about-mosaic .m-item img { transition: transform .35s ease; }
.about-mosaic .m-item:hover img { transform: scale(1.04); }

@media (max-width: 991.98px) {
    .about-mosaic { column-count: 2; column-gap: .75rem; }
}
@media (max-width: 576px) {
    .about-mosaic { column-count: 1; column-gap: 0; }
}
@media (min-width: 1200px) {
     .about-mosaic { column-count: 3; }
}

/* Slightly lift section title and spacing */
.section-title { margin-bottom: 1rem; }
.section-title h1 { font-size: 1.6rem; }

/* About page gallery masonry */
.about-gallery { margin-top: .5rem; }

/* Service icons (replace font icons with images) */
.service-icon {
    width: 56px;
    height: 56px;
    display: block;
    object-fit: contain;
    color: var(--primary); /* SVGs use currentColor */
}

.service-icon-wrap {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 6px 20px rgba(37,44,48,0.06);
}

.service-icon-wrap .service-icon { width: 56px; height: 56px; }

/* Small tweak for thali header to match menu */
.store-item .p-4 h4 { font-size: 1.35rem; color: var(--dark); }

/* make alerts and info blocks blend with theme */
.alert-info { background: linear-gradient(90deg, rgba(255,244,236,1), rgba(255,249,240,1)); border: 1px solid rgba(251,159,56,0.12); color: #5b3b1b; }

/* Order button placed below page headings (right-aligned) */
.order-actions { display: flex; justify-content: flex-end; }
.whatsapp-order {
    background: linear-gradient(90deg,#28d06a,#25d366);
    border: 1px solid rgba(0,0,0,0.06);
    color: #ffffff;
    padding: .4rem .6rem;
    font-weight: 800;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(37,44,48,0.10);
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-width: 140px;
    justify-content: center;
    font-size: 0.82rem;
    line-height: 1;
    text-decoration: none;
}
.whatsapp-order:focus { outline: none; box-shadow: 0 14px 36px rgba(37,44,48,0.18); }
.whatsapp-order:hover { transform: translateY(-3px); }

.whatsapp-order .order-icon { flex: 0 0 auto; display: block; }
.whatsapp-order .order-text-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.whatsapp-order .order-text { display: block; white-space: normal; font-size: 1rem; }
.whatsapp-order .order-number { display: block; font-weight: 900; margin-top: 3px; font-size: 1.02rem; }

/* When the order button is placed inside a section title, position it to the right
   and vertically center it relative to the section title. Use --order-offset to
   nudge it closer/further (positive moves it down). */
.section-title { position: relative; }
.section-title .order-actions {
    position: static;
    display: flex;
    width: 100%;
    justify-content: center; /* center the order button below subtitles by default */
    margin-top: .8rem;
    align-items: center;
}

/* Place the order button absolutely relative to beverages section (right side) */
.beverages-hero .order-actions {
    /* Place the order button below the subtitle inside the section title
       so it flows with the content and doesn't overlap the heading. */
    position: static;
    display: flex;
    width: 100%;
    justify-content: center; /* center under the subtitle */
    margin-top: .8rem; /* spacing below the subheading */
    align-items: center;
    z-index: 60;
}

@media (max-width: 576px) {
    /* On small screens, stack the button below the heading for readability */
    .section-title .order-actions {
        position: static;
        transform: none;
        margin-top: .75rem;
        justify-content: center;
        min-width: 0;
    }
    .whatsapp-order { min-width: auto; padding: .6rem .9rem; font-size: .98rem; }

} /* end @media (max-width: 576px) */

/* Ensure the two-line layout keeps good spacing when there is limited width */
@media (min-width: 768px) {
    .whatsapp-order { min-width: 300px; }
}

/* Bulk order thali note styling */
.thali-note {
    position: relative;
    font-size: 1.2rem;
    color: #e6f4dd; /* light green text for contrast */
    background: linear-gradient(180deg,#0f1414 0%, #172122 100%); /* dark slate */
    padding: 1.25rem 1.75rem;
    border-radius: 10px;
    border-left: 6px solid var(--primary); /* orange accent */
    box-shadow: 0 8px 26px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.02);
    max-width: 960px;
    margin: 0 auto;
    font-weight: 600;
    text-align: center;
}

.thali-note::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -12px;
    width: 120px;
    height: 8px;
    background: var(--primary);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(209,87,4,0.18);
}

@media (max-width: 576px) {
    .thali-note { font-size: 1rem; padding: 0.9rem 1rem; }
    .thali-note::before { width: 80px; top: -10px; height: 6px; }
}