/* ============================================
   7SPRINKLES HEADER RESPONSIVENESS
   Desktop styles remain unchanged
   ============================================ */


/* ============================================
   TABLETS: 768px - 1024px
   ============================================ */

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .category-section.banner-section-inline {
        position: absolute !important;
    top: 164rem !important;
    left: 0 !important;
    right: 0  !important;
    }
    
        .hero#home {
        min-height: 1507px !important;
        }
    .header > .container {
        width: 100%;
        max-width: 100%;
        padding-inline: 15px;
    }

    /* Logo */
    .header .header-logo img,
    .header .navbar > .logo img {
        max-width: 130px;
        height: auto;
    }

    /* Navigation menu */
    .header .navbar {
        max-width: 85%;
    }

    .header .navbar-list {
        gap: 12px;
    }

    .header .navbar-link .span {
        font-size: 13px;
    }

    /* Social icons */
    .header .social-icons {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        justify-content: start; 
    }

    .header .iconz {
        max-width: 25px;
        height: auto;
    }
 .topbar-item.item-2 {
        justify-content: space-between;
        padding: 0 20px;
    }
 
    .topbar-item.item-2 .span,
    .topbar-item.item-2 .location-btn {
        font-size: 14px;
    }
    /* Reservation button */
    .header .contact-info .btn {
        white-space: nowrap;
    }

    /* Party hall banner */
    .header .phoneContact img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

}


/* ============================================
   MOBILE PHONES: 767px AND BELOW
   ============================================ */

@media screen and (max-width: 767px) {
 .navbar-item .span {
        text-align: start !important;
    }
    /* Header container */
    .header > .container {
        width: 100%;
        max-width: 100%;
        padding-inline: 12px;
        gap: 10px;
    }

    /* Header logo */
    .header .header-logo img {
        width: 120px;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* Navigation drawer */
    .header .navbar {
        width: min(320px, 85vw);
        max-width: 85vw;
        overflow-x: hidden;
        overflow-y: auto;
        box-sizing: border-box;
    }

    .header .navbar-list {
        width: 100%;
        padding-inline: 15px;
        box-sizing: border-box;
    }

    .header .navbar-item {
        max-width: 100%;
    }

    .header .navbar-link {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .header .navbar-link .span {
        font-size: 14px;
    }

    /* Logo inside opened navigation */
    .header .navbar > .logo img {
        max-width: 125px;
        height: auto;
    }

    /* Close button */
    .header .close-btn {
        z-index: 5;
    }

    /* Social icons */
    .header .social-icons {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: start;
        gap: 12px;
        padding: 15px;
    margin-top:0rem !important;
    }
    .heroSection h1 {
        font-size: 22px !important;
}
    .navbar-list { 
    margin-block-end: 36px !important;
}
.sigin-in-btn {
    margin-top:1rem !important;
}
    .header .iconz {
        width: 24px;
        max-width: 100%;
        height: auto;
    }

    /* Reservation button */
    .header .contact-info .btn {
        padding: 10px 12px;
        font-size: 12px;
        white-space: nowrap;
    }

    /* Party hall banner */
    .header .phoneContact {
        max-width: 75px;
        flex-shrink: 1;
    }

    .header .phoneContact img {
        display: block;
        width: 100%;
        max-width: 75px;
        height: auto;
        object-fit: contain;
    }

    /* Topbar content inside mobile navigation */
    .header .topbar-item {
        max-width: 100%;
        box-sizing: border-box;
    }

    .header .item-2-flex {
        flex-wrap: wrap;
        gap: 6px;
    }

    .header .location-btn {
        max-width: 100%;
        white-space: normal;
    }

    /* User account dropdown */
    .header .user-dropdown {
        max-width: 100%;
    }

    .header .dropdown-menu {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Order popup */
    .header .popup-content {
        width: calc(100% - 30px);
        max-width: 420px;
        max-height: 85vh;
        overflow-y: auto;
        box-sizing: border-box;
        padding: 20px 15px;
    }

    .header .popup-content h1 {
        font-size: 27px !important;
    }

    .header .popup-content h3 {
        font-size: 23px !important;
        margin-top: 10px !important;
    }

    .header .popup-content p {
        font-size: 15px !important;
    }

    .header #whatsapp-links .whatsapp-link {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
        font-size: 18px !important;
        text-align: center;
    }

    .header .popup-content .icons {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
    }

    .header .popup-content .icons a {
        flex: 1;
        min-width: 0;
    }

    .header .popup-content .icons img {
        width: 100% !important;
        height: auto;
    }
.restaurant-header {
        padding: 55px 0 14px;
    }
 
    .menu-up {
        position: relative;
        display: block;
    }
 
    /* Swipe is the natural gesture on touch, so hide the arrows */
    .category-arrow {
        display: none;
    }
 
    .category-slider {
        display: flex;
        gap: 16px;
        padding: 6px 16px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scroll-padding-left: 16px;
    }
 
    .category-slider a {
        flex: 0 0 auto;
        width: 78px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        scroll-snap-align: start;
        -webkit-tap-highlight-color: transparent;
    }
 
    .category-slider a img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid transparent;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
 
    /* Fade on the right edge hints that the row scrolls */
    .menu-up::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 28px;
        pointer-events: none;
        background: linear-gradient(to right, rgba(42, 15, 15, 0), var(--rh-bg));
    }
 
    /* Deals: horizontal swipe cards */
    .deals-wrapper {
        margin: auto;
    }
 
    .deals {
        display: flex;
        gap: 12px;
        padding: 4px 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;
    }
 
    .deal {
        flex: 0 0 auto;
        width: 245px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        background: var(--rh-surface);
        border: 1px solid var(--rh-border);
        border-radius: 14px;
        scroll-snap-align: start;
        -webkit-tap-highlight-color: transparent;
    }
 
    .deal[onclick]:active {
        transform: scale(0.98);
    }
 
    .deal-icon {
        flex: 0 0 44px;
        height: 44px;
        border-radius: 12px;
        background: rgba(255, 231, 177, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    .deal-icon-glyph {
        font-size: 20px;
        line-height: 1;
        color: var(--rh-accent);
        font-weight: 700;
    }
 
    .deal-main {
        font-size: 15px;
        font-weight: 700;
        color: var(--rh-text);
        line-height: 1.25;
        white-space: nowrap;
    }
 
    .deal-sub {
        margin-top: 2px;
        font-size: 12px;
        color: var(--rh-muted);
        line-height: 1.35;
        /* Long text such as the 10% discount line wraps to 2 lines max */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .deal-main.deal-font-lg {
    font-size: 1.3rem;
}
    #searchItems .card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}


/* ============================================
   SMALL PHONES: 480px AND BELOW
   ============================================ */

@media screen and (max-width: 480px) {
   
    .sigin-in-btn btn-secondary{
        margin-top: 2rem !important;
    }
    .Header-Logo {
        width:auto;
    }
        .logo {
        width: 81px;
        height: 81px;
    }
    .Banners .heading-1{
        width:100%;
    }
    .header {
        top: 0px;
    }
        .category-section-top-inline .section-title {
            width:auto !important;
        }
        .header.active .nav-open-btn {
            margin-top:0rem;
        }
        .header.active .phoneContact { 
        margin-top: 0rem;
    }
        .header.active .Header-Logo {
            margin-top:0px;
        }
    .header > .container {
        padding-inline: 8px;
        gap: 6px; 
    }
 
    .header .header-logo img {
        width: 80px;
    }
.header.active .container .logo {
 width: 81px;
        height: 81px;
}
    
.has-after {
    top: 17px;
}
    .header .phoneContact {
        max-width: 11rem;
                margin-top: 4rem;
    }
    .categorySwiperTopInline p{
        font-size:1.3rem;
    }
    .hero .Banners {
        top: 4%;
        left: -7%;
    }.hero .Banners img {
    width: 56%;
}
    .quote .heading-sub-2 {
        font-size: 2.8rem;
        padding-top: 4rem;
    }
    .header .phoneContact img {
                max-width: 100%;
    }

    .header .contact-info .btn {
        padding: 8px;
        font-size: 10px;
    }

    .header .nav-open-btn {
        flex-shrink: 0;
                margin-top: 4rem;
    }

    .header .navbar {
        width: min(300px, 88vw);
        max-width: 88vw;
    }
    
    .media-list {
           flex-direction: column ;
    }

.heading-sub-2{ 
    font-size: 2.3rem;
}
    .header .social-icons {
        gap: 10px;
        padding: 10px;
    margin-top:0rem !important;
    }
    .sigin-in-btn {
    margin-top:1rem !important;
}
.heroSection h1 {
        font-size: 22px !important;
}
.navbar-list { 
    margin-block-end: 36px !important;
}
        .category-section.category-section-top-inline {
                            margin-top: 21%;
}
    .header .topbar-item.item-2 { 
    align-items: start !important;
}
    .hero#home .slider-item {
        padding-block-start: 157rem;
    }
    .headline-1 {
            font-size: 2.5rem;
    }
        .hero#home .offer-block {
                    margin: 13px auto 28px;
        }
            .hero#home {
        min-height: 1696px;
        height: 1826px; 
    }
            .offer-block .offer-image {
                width:100vw !important;
            }
            .category-section-top-inline .categorySwiperTopInline {
                top:2%;
                }
                .categorySwiperTopInline .category-card p{
                    margin-top:15px;
                }
                .hero .slider-item {
                        top: 3%;
                }
                .heading-sub-2 {
    margin-bottom: 0rem;
                }
                #reservation .container {
     width: auto; 
}
                .offers-wrapper {
                    display:block;
                }
                .offers-wrapper { 
    padding: 31px 16px 60px;
                }
                .partyTitle { 
     margin-bottom: 0px; 
    font-size: 23px;
}
.form-right .body-4{ 
    align-items: start !important; 
} 
    .partyDescription {
        font-size: 14px;
         padding: 0 0px; 
    } 
    .topbar-item.item-2 {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 12px;
        gap: 0;
    }
 
    .topbar-item.item-2 .span,
    .topbar-item.item-2 .location-btn {
        font-size: 12px;
    }
 
    .topbar-item.item-2 .location-btn {
        padding: 4px 0;
        min-height: 32px;
    }
.floating-links a:nth-child(1) img {
    width: 44px;
    height: 36px;
}
.partyDescription { 
     margin: 15px auto 40px;
    }
    .offer-block {
        padding: 0px;
    }
    .partyDescription {
        margin:11px;
    }
    .book-partyHall-modal-content{ 
            margin-top: 2rem; 
        margin-left: 0% !important;
    width: 100% !important;
}
.event-gallery .heading-2{
    font-size: 2.3rem !important; 
}
   .event-gallery .headline-1 {
        font-size: 3.5rem;
    }
    .event-gallery-video { 
        height: 83% !important;
    }
    .event-video-play { 
        top: 35% !important;
    } 
    .event-gallery {
             padding: 69px 0px 0px 0px !important;
        margin-top:0rem !important;
    }
    .eventGallerySwiper {
        padding: 0px 0 !important;
    }
    .event-gallery.event-gallery-2{
        padding-top:0px !important;
    }
        .event-gallery .headline-1, .headline-2 {
        font-size: 2.5rem !important;
            margin: 0 auto 2rem auto !important;
            width: auto !important;
    } 
        .gallery-item {
                    height: 29rem;
        }
        .our-packages .heading-1{
        font-size: 2.5rem !important;
            margin: 0 auto 2rem auto !important;
            width: auto !important; 
        }
                .package-modal-content {
                    height: 35vh !important;
                }
                .event-gallery.event-gallery-2{
                        height: 47%; 
                }
                    .our-packages .headline-1, .headline-2 {
        font-size: 2.5rem !important;
        margin: 0 auto 2rem auto !important;
        width: auto !important;
    }
        .category-section.banner-section-inline{
    margin-top: 5rem;
            
        }
        .about .abs-img-2 { 
    top: -34px;
        }
          .heading-sub-2 {
       font-size: 1.8rem; 
        padding-bottom: 2rem;
    }
        .category-section-top-inline .top-inline-grid {
                    margin-top: 5rem;
        }
    .special-dish-banner img { 
    margin-top: 5rem !important;
}
.special-dish-content {
        margin-top: 0px !important;
    padding-left:0px !important;
}
.special-dish-content .headline-1{
    margin-top: 2rem !important;
}
.reviews-section {
    margin-top: 1rem !important;
}
.stats-section { 
    margin: 5rem auto !important;
}
    .stat-item {
        padding: 1px 7px !important;
    
}

.swiper-wrapper {
    height: auto !important; 
}
.gallery-item {
    height:26rem !important;
}

#franchiseModal .modal-box {
    height: 60rem !important;
    overflow:scroll ;
}
.navbar .logo { 
    margin: 1px;
}
   .navbar .close-btn { 
    margin-block: 37px 20px;
}
.close-btn { 
    top: 5px;
    margin-block: 0px !important; 
}
  .category-slider {
        gap: 12px;
        padding: 4px 1px;
        scroll-padding-left: 12px;
    }
 
    .category-slider a { 
            min-width: 65px;

    }
 
    .category-slider a img {
        width: 56px;
        height: 56px;
    }
 
    .category-slider a span {
        font-size: 11.5px !important;
        line-height: 15px !important;
        max-width: 68px;
    }
 
    .deals {
        padding: 4px 12px;
        scroll-padding-left: 12px;
    }
 
    .deal {
        width: 220px;
        padding: 10px 12px;
    }
 
    .deal-icon {
        flex-basis: 40px;
        height: 40px;
    }
 
    .deal-main {
        font-size: 14px;
    }
 
    .deal-sub {
        font-size: 11.5px;
    }
     .fixed-menu .menu-up {
       top: 128px; 
 }
  .menu-container {
        padding: 12px 12px 20px;
    }
 
    .menu-container h3 {
        font-size: 18px;
    }
 
    .menu-container .card {
        gap: 10px;
    }
     #searchItems .card { gap: 8px; }
    #searchItems .food-card { padding: 8px; gap: 8px; border-radius: 12px; }
    #searchItems .food-title { font-size: 13px; }
    #searchItems .food-price { font-size: 13px; }
    #searchItems .food-desc { font-size: 11.5px; }
    #searchItems .add-btn {
        min-width: 70px;
        height: 30px;
        padding: 0 12px;
        font-size: 12px;
        margin-top: -15p 
    }
    #searchItems .card,
    #searchItems :has(> .food-card) {
        gap: 8px !important;
    }
     #searchItems { gap: 8px; }
      #searchItems .tag-item {
        gap: 10px;
        padding: 8px;
        border-radius: 12px;
    }
 
    #searchItems .tag-img {
        width: 84px;
        height: 84px;
        border-radius: 10px;
    }
 
    #searchItems .tag-title { font-size: 14px; }
    #searchItems .tag-desc  { font-size: 12px; -webkit-line-clamp: 2; }
    #searchItems .tag-offer { font-size: 12.5px; }
    .press-links {
    margin-top: 80px !important;
}

}
/*@media screen and (max-width: 480px) END*/




/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .hero#home .slider-item {
                padding-block-start: 0px !important;
    }
    .hero .slider-item {
        top:24% !important;
    }
        .hero .Banners {
        top: 36% !important;
        }
        .heading-sub-2 {
    margin-bottom: 1rem;
        }
    .category-section.category-section-top-inline { 
     margin-top: 0px !important;
    }
        .hero#home .offer-block {
        margin: 29px auto 28px;
    }
    .category-section-top-inline .categorySwiperTopInline {
        width:100%;
   position: absolute !important;
    top: 24rem !important;
    left: 0 !important;
    right: 0 !important;
    }
    .header .topbar-item.item-2 { 
    align-items: start !important;
}
     .navbar-item .span {
        text-align: start !important;
    }
    .sigin-in-btn btn-secondary{
        margin-top: 2rem !important;
    }
       .navbar .close-btn { 
    margin-block: 37px 20px;
}
.close-btn { 
    top: 5px;
    margin-block: 0px !important; 
}

    .navbar .logo { 
    margin: 1px;
    }
    .navbar .close-btn { 
    margin-block: 37px 20px;
}
.float-section .float-word {
font-size: 20px;
line-height: 1;
} 
.float-section {
        top: 4rem;
        min-height: 340px;   /* was 360px */
}
.section.service .container ul{
    padding-left: 0rem !important;
}
    .stats-grid { 
        gap: 21px 0 !important;
    }
    .stats-top { 
    margin-bottom: 24px !important;
}
.float-section .float-word:nth-of-type(1)  { top: 18% !important; left: 12% !important; }
.float-section .float-word:nth-of-type(2)  { top: 3% !important; left: 38% !important; }
.float-section .float-word:nth-of-type(3)  { top: 6% !important; right: 10% !important; }
.float-section .float-word:nth-of-type(4)  { top: 27% !important; left: 3% !important; }
.float-section .float-word:nth-of-type(5)  { top: 34% !important; right: 10% !important; }
.float-section .float-word:nth-of-type(6)  { bottom: 26% !important; left: 3% !important; }
.float-section .float-word:nth-of-type(7)  { top: 24% !important; right: 8% !important; }
.float-section .float-word:nth-of-type(8)  { top: 6% !important; left: 3% !important; }
.float-section .float-word:nth-of-type(9)  { bottom: 50% !important; left: 12% !important; }
.float-section .float-word:nth-of-type(10) { bottom: 26% !important; right: 25% !important; }
.float-section .float-word:nth-of-type(11) { bottom: 35% !important; right: -9% !important; }
.float-section .float-word:nth-of-type(12) { bottom: 23% !important; left: 30% !important; }
.float-section .float-word:nth-of-type(13) { bottom: 13% !important; right: 12% !important; }
.float-section .float-word:nth-of-type(14) { bottom: 8% !important; right: 28% !important; }
.float-section .float-word:nth-of-type(15) { bottom: 8% !important; right: 5% !important; }
.float-section .float-word:nth-of-type(16) { bottom: -1% !important; left: 12% !important; } 

.reviews-section {
        margin-top: 4rem;
        padding: 35px 0;
}
#reviewCarousel {
        width: 100%;
}
[data-track] {
        gap: 20px;
        padding: 20px 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 10px;
        align-items: stretch;
}
[data-review] {
        flex: 0 0 calc(50% - 10px);        /* 2 visible, moves 1 at a time */
        width: calc(50% - 10px);
        height: auto;
        min-height: 290px;
        scroll-snap-align: start;
        scroll-snap-stop: always;          /* a swipe can't skip cards */
}
.rv-body {
        padding: 14px 12px 12px;
}
[data-date] {
        font-size: 11px;
        letter-spacing: 0.08em;
}
[data-stars] {
        gap: 2px;
}
[data-stars] .star-filled { font-size: 18px; }
[data-stars] .star-empty  { font-size: 17px; }
.rv-author {
        margin-bottom: 12px;
        padding-bottom: 12px;
}
.rv-avatar {
        width: 36px;
        height: 36px;
        margin-right: 0.7rem;
}
.rv-avatar svg {
        width: 18px;
        height: 18px;
}
[data-name] {
        font-size: 15px;
        align-self: center;
}
.rv-quote {
        margin-top: 1.6rem;
        font-size: 3rem;
}
[data-text] {
        font-size: 15px;
        line-height: 1.3;
        letter-spacing: 0.3px;
}
.reviews-controls {
        margin-top: 4px;
}
.rv-btn {
        width: 42px;
        height: 42px;
        font-size: 16px;
}


.swiper-wrapper {
    height: 100% !important; 
}
.gallery-item {
    height:54rem !important;
    width:60rem !important;
}
#franchiseModal .modal-box {
    height: 60rem !important;
    overflow:scroll ;
}

  .restaurant-header {
        padding: 14px 20px 18px;
    }
 .fixed-menu .menu-up {
       top: 140px; 
 }
 .category-slider a {
    min-width: 70px;
}
    .menu-up {
        display: flex;
        align-items: center;
        gap: 10px;
                 width: 90%;
    }
 
    .category-arrow {
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 1px solid var(--rh-border);
        background: var(--rh-surface);
        color: var(--rh-text);
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
 
    .category-slider {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;  
        gap: -6px;
        padding: 4px 16px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
    }
 
    .category-slider a {
        flex: 0 0 auto;
        width: 92px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        scroll-snap-align: start;
    }
 
    .category-slider a img {
        width: 76px;
        height: 76px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid transparent;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
 
    /* Deals: 2 x 2 grid on tablet, no scrolling needed */ 
    .deals {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
 
    .deal {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
        background: var(--rh-surface);
        border: 1px solid var(--rh-border);
        border-radius: 14px;
        min-width: 0;
    }
 
    .deal-icon {
        flex: 0 0 48px;
        height: 48px;
        border-radius: 12px;
        background: rgba(255, 231, 177, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    .deal-icon-glyph {
        font-size: 22px;
        line-height: 1;
        color: var(--rh-accent);
        font-weight: 700;
    }
 
    .deal-main {
        font-size: 16px;
        font-weight: 700;
        color: var(--rh-text);
        line-height: 1.25;
    }
 
    .deal-sub {
        margin-top: 2px;
        font-size: 13px;
        color: var(--rh-muted);
        line-height: 1.35;
    }
    .restaurant-header .menu-bar{
            position: absolute;
    top: 240px;
    left: 0px;
    }
    .header .contact-info {
        top: 131px;
    }
     .menu-container {
        padding: 18px 20px 28px;
    }
 
    .menu-container h3 {
        font-size: 24px;
        margin-bottom: 16px;
    }
 
    .menu-container .card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
        #searchItems .card {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
    #searchItems .food-card { padding: 12px; gap: 12px; }
    #searchItems .food-title { font-size: 16px; }
    #searchItems .food-price { font-size: 15px; }
    #searchItems .food-desc { font-size: 13px; }
    #searchItems .card,
    #searchItems :has(> .food-card) {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
        #searchItems {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
    .deals-wrapper {
        margin: 278px auto 30px;
    }
    .rating-stars i {
    font-size: 11px;
}
    #searchItems .rating-count { 
        font-size: 9px;
    }
    #searchItems .tag-item {
        gap: 18px;
        padding: 14px;
    }
 
    #searchItems .tag-img {
        width: 150px;
        height: 150px;
    }
 
    #searchItems .tag-title { font-size: 18px; }
    #searchItems .tag-desc  { font-size: 14px; }
    #searchItems .tag-offer { font-size: 15px; }
    .press-links {
    margin-top: 170px !important;
}

}
/*@media (min-width: 768px) and (max-width: 1024px) END*/




@media (max-width: 1024px) { 

    .category-arrow.right-arrow{
    display: block;
}
.category-arrow.left-arrow{
       display: block;
}
    :root {
        --rh-bg: #2a0f0f;          /* header background (deep maroon) */
        --rh-surface: #3a1717;     /* deal card background */
        --rh-border: rgba(255, 231, 177, 0.18);
        --rh-text: #ffe7b1;        /* matches your category label colour */
        --rh-muted: rgba(255, 231, 177, 0.7);
        --rh-accent: #f2a93b;      /* active category / highlights */
    }
 
    /* Hide scrollbars on both scrollers but keep them scrollable */
    .category-slider,
    .deals {
        -ms-overflow-style: none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .category-slider::-webkit-scrollbar,
    .deals::-webkit-scrollbar {
        display: none;
    }
 
    /* Category label: beats the inline style on the <span> */
    .category-slider a span {
        margin-top: 8px !important;
        font-size: 11.5px !important;
        line-height: 16px !important;
        color: var(--rh-text) !important;
        max-width: 84px;
        overflow: hidden;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
 
    /* Active category, set by setActiveCategory() */
    .category-slider a.active img,
    .category-slider a.active-category img {
        border-color: var(--rh-accent);
        box-shadow: 0 0 0 3px rgba(242, 169, 59, 0.25);
    }
    .category-slider a.active span,
    .category-slider a.active-category span {
        color: var(--rh-accent) !important;
    }
 
    .category-arrow:focus-visible,
    .category-slider a:focus-visible,
    .deal:focus-visible {
        outline: 2px solid var(--rh-accent);
        outline-offset: 2px;
    }
      .topbar-item.item-2 {
        box-sizing: border-box;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 20px;
    }
 
    .topbar-item.item-2 .item-2-flex,
    .topbar-item.item-2 .location-box {
        display: flex;
        flex-direction: row;          /* keeps icon and text on one line */
        align-items: center;
        gap: 6px;
        min-width: 0;
        margin: 0;
    }
 
    .topbar-item.item-2 ion-icon {
        flex: 0 0 auto;
        font-size: 18px;
    }
 
    .topbar-item.item-2 .span {
        line-height: 1.3;
        white-space: nowrap;
    }
 
    .topbar-item.item-2 .location-btn {
        margin: 0;
        padding: 6px 0;
        min-height: 36px;             /* comfortable tap target */
        font-size: inherit;
        line-height: 1.3;
        white-space: nowrap;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
     .category-slider .left-arrow {
    margin-left: 12px;
}
.category-slider .right-arrow {
    margin-right: 12px;
}
  /* Stray fire icon sits above "Hot deals" and pushes the text off-centre */
    .deal .fa-fire { display: none; }

    /* "2+1" is text, so it needs a smaller size than the single-character icons */
    .deal-icon-glyph.deal-bogo { font-size: 15px; letter-spacing: -0.5px; }

    /* Make clickable deals feel clickable */
    .deal[onclick] { cursor: pointer; }
     .menu-container {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        /* keeps the heading clear of any sticky header when you scroll to it */
        scroll-margin-top: 12px;
    }
 
    .menu-container h3 {
        margin: 0 0 14px;
        color: var(--rh-text, #ffe7b1);
        line-height: 1.25;
        letter-spacing: 0.2px;
    }
 
    /* Container that your JS fills with items */
    .menu-container .card {
        box-sizing: border-box;
        display: grid;
        width: 100%;
        min-width: 0;
    }
 
    /* Each rendered item */
    .menu-container .card > * {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
        background: var(--rh-surface, #3a1717);
        border: 1px solid var(--rh-border, rgba(255, 231, 177, 0.18));
        border-radius: 14px;
        overflow: hidden;
    }
 
    /* Images inside items never overflow */
    .menu-container .card img {
        max-width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }
 
    /* Long dish names and descriptions wrap instead of stretching the layout */
    .menu-container .card * {
        overflow-wrap: anywhere;
    }
    .deals {
    display: grid;
    grid-auto-flow: unset;
    } 
    /* ---------- Grid container ---------- */
    #searchItems .card {
        display: grid;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
 
    /* ---------- Card ---------- */
    #searchItems .food-card {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
        min-width: 0;
        height: 100%;
        margin: 0;
        padding: 10px;
        background: #fffbf2;                       /* light cream, change to match your theme */
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 14px;
        overflow: visible;                         /* ADD button overlaps the image edge */
    }
 
    /* ---------- Image block (moved to the top) ---------- */
    #searchItems .food-right {
        order: -1;
        display: flex;
        flex-direction: column;                    /* stacks image, then ADD button */
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 0;
        position: static;
    }
 
    #searchItems .food-img {
        width: 100%;
        max-width: none;
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0;
        border-radius: 12px;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.05);
    }
 
    #searchItems .food-image {
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
    }
 
    /* ADD button: centred under the image, overlapping its bottom edge */
    #searchItems .add-btn {
        position: relative;                        /* cancels any absolute positioning */
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        transform: none;
        z-index: 1;
        margin: -16px 0 0;
        min-width: 76px;
        height: 32px;
        padding: 0 14px;
        border: 1px solid #d9d2c3;
        border-radius: 8px;
        background: #fff;
        color: #2e7d32;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    #searchItems .add-btn:active { transform: scale(0.96); }
 
    /* ---------- Text block ---------- */
    #searchItems .food-left {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
    }
 
    #searchItems .veg-icon {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
        margin: 0 0 6px;
        border: 1.5px solid #2e9e4f;
        border-radius: 3px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #searchItems .veg-icon span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #2e9e4f;
        display: block;
    }
 
    /* Dark text: the old cream colour was invisible on a light card */
    #searchItems .food-title {
        margin: 0 0 4px;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.3;
        color: #2b1a12;                         /* aligns 1-line and 2-line names across a row */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
 
    #searchItems .food-price {
        margin: 0 0 4px;
        font-size: 14px;
        font-weight: 700;
        color: #e07b00;
    }
 
    #searchItems .food-desc {
        margin: 0 0 8px;
        font-size: 12px;
        line-height: 1.45;
        color: #5a4a3f;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    #searchItems .food-desc:empty { display: none; }
 
    /* ---------- Rating: wraps instead of overlapping ---------- */
    #searchItems .rating-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 6px;
        width: 100%;
        margin: auto 0 0;
    }
    #searchItems .rating-stars {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 1px;
        font-size: 12px;
        line-height: 1;
    }
    #searchItems .rating-stars svg,
    #searchItems .rating-stars img,
    #searchItems .rating-stars i {
        flex: 0 0 auto;
    }
    #searchItems .rating-count {
        flex: 0 1 auto;
        margin: 0;                                 /* cancels any negative margin that caused the overlap */
        font-size: 11px;
        white-space: nowrap;
    }
        #searchItems .food-card {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: none !important;
        margin: 0 !important;
    }
    .rating-stars i {
    font-size: 11px;
}
    #searchItems .rating-count { 
        font-size: 9px;
    }
        #searchItems .rating-row { 
        justify-content: space-between;
        }
        .aboutContainer {
                max-width: 100% !important;
    margin: auto !important;
        }
        .events-swiper .swiper-button-prev, .events-swiper .swiper-button-next {
           background: rgb(245 168 0 / 32%) !important;
           top:38% !important;
}

    /* Combo cards are wide, so each one takes a full row
       even when #searchItems is a 2 or 3 column grid */
    #searchItems .tag-item {
        grid-column: 1 / -1;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 10px;
        background: #fffbf2;                      /* light cream, change to match your theme */
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 14px;
        overflow: hidden;
    }
 
    #searchItems .tag-img {
        flex: 0 0 auto;
        margin: 0;
        border-radius: 12px;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.05);
    }
 
    #searchItems .tag-img img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
    }
 
    #searchItems .tag-content {
        flex: 1 1 auto;
        min-width: 0;                         
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        margin: 0;
        padding: 0;
    }
 
    #searchItems .tag-title {
        margin: 0;
        font-weight: 700;
        line-height: 1.3;
        color: #2b1a12;
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
 
    #searchItems .tag-desc {
        margin: 0;
        line-height: 1.45;
        color: #5a4a3f;
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
 
    #searchItems .tag-offer {
        margin: 2px 0 0;
        font-weight: 700;
        line-height: 1.35;
        color: #e07b00;
        overflow-wrap: anywhere;
    }
}
/* Mobile */
@media (max-width: 767px) {
    .aboutContainer {
        padding: 30px 27px;
    }
    .container.our-gallary-index{
    margin-top: 17rem !important;
} 
.float-section {
        height: 400px !important;      /* forces the shorter height */
        min-height: 0 !important;
        top:6rem;
            margin-bottom: 2rem !important;
}
.float-section .float-word {
        font-size: 14px !important;    /* fallback for words with no size class */
        line-height: 1 !important;
        white-space: nowrap;
}
.float-logo .logo {  
    width: 131px !important;
    height: 131px !important;
} 
.float-section .float-word.size-sm { font-size: 15px !important; }
.float-section .float-word.size-md { font-size: 17px !important; }
.float-section .float-word.size-lg { font-size: 19px !important; }
.float-section .float-word.size-xl { font-size: 21px !important; }

.float-section .float-word:nth-of-type(1)  { top: 16% !important; left: 9% !important; }
.float-section .float-word:nth-of-type(2)  { top: 3% !important; left: 38% !important; }
.float-section .float-word:nth-of-type(3)  { top: 19% !important; right: 8% !important; }
.float-section .float-word:nth-of-type(4)  { top: 30% !important; left: 3% !important; }
.float-section .float-word:nth-of-type(5)  { top: 19% !important; right: 29% !important; }
.float-section .float-word:nth-of-type(6)  { bottom: 26% !important; left: 2% !important; }
.float-section .float-word:nth-of-type(7)  { top: 33% !important; right: 5% !important; }
.float-section .float-word:nth-of-type(8)  { top: 6% !important; left: 2% !important; }
.float-section .float-word:nth-of-type(9)  { bottom: 48% !important; left: 11% !important; }
.float-section .float-word:nth-of-type(10) { bottom: 34% !important; right: 11% !important; }
.float-section .float-word:nth-of-type(11) { bottom: 50% !important; right: 5% !important; }
.float-section .float-word:nth-of-type(12) { bottom: 22% !important; left: 29% !important; }
.float-section .float-word:nth-of-type(13) { bottom: 22% !important; right: 22% !important; }
.float-section .float-word:nth-of-type(14) { bottom: 8% !important; right: 27% !important; }
.float-section .float-word:nth-of-type(15) { bottom: 8% !important; right: 4% !important; }
.float-section .float-word:nth-of-type(16) { bottom: 15% !important; left: 9% !important; } 


.reviews-section {
        margin-top: 6rem;
        padding: 45px 0;
}
#reviewCarousel {
        width: 94%;
}
[data-track] {
        gap: 14px;
        padding: 16px 18px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 18px;
        align-items: stretch;
}
[data-review] {
        flex: 0 0 100%;                    /* exactly 1 card per view */
        width: 100%;
        height: auto;
        min-height: 270px;
        scroll-snap-align: start;
        scroll-snap-stop: always;          /* a swipe can't skip cards */
}
.rv-body {
        padding: 16px 12px 12px;
}
[data-date] {
        font-size: 12px;
}
[data-stars] .star-filled { font-size: 20px; }
[data-stars] .star-empty  { font-size: 19px; }
.rv-avatar {
        width: 40px;
        height: 40px;
        margin-right: 0.8rem;
}
.rv-avatar svg {
        width: 20px;
        height: 20px;
}
[data-name] {
        font-size: 16px;
}
    .restaurant-header .menu-up {
        padding:8px 15px;
    }
.rv-quote {
        margin-top: 2rem;
        font-size: 3.5rem;
}
[data-text] {
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: 0.5px;
}
.rv-btn {
        width: 44px;
        height: 44px;
}
.topbar-item.item-2 {
        justify-content: space-between;
        padding: 0 14px;
        gap: 4px 12px;
    }
 
    .topbar-item.item-2 ion-icon {
        font-size: 16px;
    }
 
    .topbar-item.item-2 .span,
    .topbar-item.item-2 .location-btn {
        font-size: 12.5px;
    }
  .deals {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 4px 12px;
        overflow: visible;
        scroll-snap-type: none;
    }

    .deal {
        width: auto;              /* cancels the 245px swipe-card width */
        flex-direction: column;   /* icon on top, text below */
        align-items: flex-start;
        gap: 8px;
                padding:  12px;
        border-radius: 12px;
    }

    .deal-icon {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
    }

    .deal-icon-glyph { font-size: 18px; }
    .deal-icon-glyph.deal-bogo { font-size: 13px; letter-spacing: -0.5px; }

    .deal .fa-fire { display: none; }

    .deal-main {
        font-size: 14px;
        white-space: normal;      /* "Buy 2 Get 1 Free" can wrap */
    }

    .deal-sub {
        font-size: 11.5px;
        -webkit-line-clamp: 3;    /* room for the 10% discount line */
    }
      .menu-container {
        padding: 14px 16px 24px;
    }
 
    .menu-container h3 {
        font-size: 20px;
        margin-bottom: 12px;
    }
 
    .menu-container .card {
        grid-template-columns: 1fr;
        gap: 12px;
    }
 
    .menu-container .card > * {
        border-radius: 12px;
    }
        #searchItems .card,
    #searchItems :has(> .food-card) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
        #searchItems {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
     #searchItems .rating-count {              /* cancels any negative margin that caused the overlap */
        font-size: 9px; 
    }    #searchItems .food-desc { 
        font-size: 11px;
                margin: 0 0 5px;
                min-height: auto;
    }
    .rating-count.is-unrated::before { 
    width: 5px;
    height: 5px;
    }
        #searchItems .food-price { 
        font-size: 13px;
                 margin: 0 0 4px;
        }
            #searchItems .food-title { 
        font-size: 13px;
            }
            .rating-count { 
    padding: 3px 7px;
            font-size: 8px;
            }
            .rating-stars i {
    font-size: 6px;
}
    #searchItems .rating-row {   
        margin: auto 0 0;
        justify-content: space-between;
    }
        #searchItems .veg-icon { 
        width: 14px;
        height: 14px;
        }
            #searchItems .food-img { 
        height: 80%;
            }
                #searchItems .food-card {
                    gap:0px}
                    .events-swiper {
        max-width: 100%;
    }

    .events-swiper .swiper-button-prev,
    .events-swiper .swiper-button-next {
        width: 30px;
    }

    .events-swiper .swiper-button-prev::after,
    .events-swiper .swiper-button-next::after {
        font-size: 15px;
    }

    .events-menu-container {
        margin-top: 8rem !important;
    }
     #searchItems .tag-img {
        width: 100px;
        height: 100px;
    }
 
    #searchItems .tag-title { font-size: 15px; }
    #searchItems .tag-desc  { font-size: 12.5px; }
    #searchItems .tag-offer { font-size: 13px; }
}
/*@media screen and (max-width: 767px) END*/







@media screen and (max-width: 360px) {
    .deals { grid-template-columns: 1fr; }  /* very small phones: one per row */
    .deal { flex-direction: row; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
    .category-slider {
        scroll-behavior: auto;
    }
}