/* Reset styles */
body,
h1,
p,
a,
img {
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: Arial, sans-serif;
}
body {
    font-family: "Poppins", serif;
    font-style: normal;
    background-color: #f8f5f0;
}
/* Header Styling */
.header {
    background-color: #042d31;
    /* padding: 15px 0; */
    color: #fff;
}

.container {
    max-width: 1200px;
    margin: 0 auto;

    /* justify-content: space-between; */
}
.navbar {
    display: flex;
    align-items: center;
}

/* Logo Styling (Left) */
.logo img {
    height: 80px;
    object-fit: contain;
}

/* Navigation Links (Right) */
.nav {
    display: flex;
}

.nav a {
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
    padding: 8px 2px; /* Clickable padding */
}

.nav a:hover {
    /* background-color: #d1b196;
    color: #012f34; */
    border-radius: 5px;
}
.banner {
    background-color: #e9e9e9; /* Light gray background */
    padding: 21px 0; /* Space around the banner */
}
.banner-text h1 {
    font-size: 54px;
    color: #012f34;
    margin-bottom: 20px;
}
.banner-text p {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
}
.banner-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* Rounded corners */
}
.banner h3 {
    margin-bottom: 0.5rem;
    font-weight: 400;
    line-height: 1.2;
}
.banner h1 {
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}
.banner p {
    margin-top: 3rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
}
/* Responsive Design */
@media screen and (max-width: 768px) {
    .container {
        flex-wrap: wrap;
    }

    .nav {
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
        margin-top: 10px; /* Add space below logo */
    }

    .logo img {
        height: 40px; /* Smaller logo for mobile */
    }
}
/* Section Styling */
.five-star-wrap {
    padding: 80px 0; /* Top and Bottom Padding */
    background-color: #fff; /* White Background */
}

/* Left Image Styling */
.five-star-wrap img {
    border-radius: 10px; /* Rounded Corners */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Subtle Shadow */
}

.position-relative {
    position: relative;
}

.vertical-text {
    position: absolute;
    left: -40px; /* Adjust for alignment */
    top: 50%;
    transform: rotate(-90deg) translateY(-50%);
    font-size: 14px;
    font-weight: bold;
    color: #8e8e8e; /* Light Gray */
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
    border-left: 2px solid #c69c81; /* Decorative border */
    padding-left: 10px; /* Space between border and text */
}

/* Right Content Styling */
.section-heading {
    font-size: 40px;
    font-weight: bold;
    color: #012f34; /* Dark Blue */
    margin-bottom: 20px;
}

.section-description {
    font-size: 18px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 30px;
}

.custom-button {
    background-color: #c69c81; /* Light Brown */
    .menu-image-section {
        background-image: url("../imgs/menu.jpg"); /* Replace with your image */
        background-size: cover;
        background-position: center;
        flex: 1; /* Takes equal space */
        height: 1200px; /* Increase for a bigger image */
    }
    color: #fff;
    padding: 12px 30px; /* Larger padding for premium feel */
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease; /* Smooth hover effect */
}

.custom-button:hover {
    background-color: #a87e67; /* Darker Brown */
    color: #fff;
    transform: translateY(-2px); /* Button Lift on Hover */
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .vertical-text {
        display: none; /* Hide vertical text on mobile */
    }

    .section-heading {
        font-size: 30px; /* Adjust heading size */
    }

    .section-description {
        font-size: 16px; /* Adjust paragraph size */
    }

    .custom-button {
        font-size: 14px;
        padding: 10px 20px; /* Smaller button on mobile */
    }
}
/* Section Styling */
.halal-food-wrap {
    padding: 0; /* No padding around section */
    background-color: #f8f8f8; /* Light gray background */
}
.royal-suit {
    background-color: #f8f8f8; /* Light gray background */
}

/* Left Side: Image */
.halal-image img {
    width: 100%; /* Full-width image */
    height: 100%; /* Full height to match the section */
    object-fit: cover; /* Ensures image maintains aspect ratio */
}
.royal-image img {
    width: 100%; /* Full-width image */
    height: 100%; /* Full height to match the section */
    object-fit: cover; /* Ensures image maintains aspect ratio */
}

/* Right Side: Content */
.halal-content {
    padding: 40px 60px; /* Add spacing around the content */
    background-color: #e9e9e9; /* Matches section background */
}
.halal-content h2,
.halal-content p,
.halal-content .contact-button {
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    will-change: transform, opacity;
}
.banquet-wrap h2,
.banquet-wrap p {
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    will-change: transform, opacity;
}
.restaurant-content h2,
.restaurant-content p,
.restaurant-content .contact-button {
    /* Button bhi include */
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    will-change: transform, opacity;
}
.text-content .zoom-text {
    /* Applies to h2 & p */
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    will-change: transform, opacity;
}
.text-wrapper .zoom-text {
    /* Applies to h2 & p */
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    will-change: transform, opacity;
}
.royal-content h2,
.royal-content p,
.royal-content h6,
.royal-content .contact-button-gold {
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    will-change: transform, opacity;
    display: block; /* Prevent breaking layout */
    transform-origin: center; /* Ensures smooth scaling */
}
.imperial-wrap h2,
.imperial-wrap p,
.imperial-wrap h6,
.imperial-wrap .contact-button-gold {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    transform-origin: center;
}

.restaurant-image {
    width: 0; /* Start from 0 width */
    overflow: hidden;
    transition: width 1s ease-out;
}

/* Jab section viewport me aaye to original width ho jaye */
.restaurant-section.in-view .restaurant-image {
    width: 100%; /* Expand to full width */
}

.section-heading {
    font-size: 36px;
    font-weight: bold;
    color: #012f34; /* Dark blue text */
    line-height: 1.4;
    margin-bottom: 20px;
}

.section-description {
    font-size: 18px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 30px;
}

.halal-icon img {
    width: 80px; /* Size of the halal icon */
    height: auto;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .halal-content {
        padding: 20px; /* Reduce padding for smaller screens */
    }

    .section-heading {
        font-size: 31px; /* Adjust heading size for mobile */
    }

    .section-description {
        font-size: 10px; /* Smaller text for mobile */
    }

    .halal-icon img {
        width: 60px; /* Reduce icon size on mobile */
    }
    .halal-content .contact-button {
        width: 100% !important;
    }

    .main-dishes-sec {
        margin-top: 3rem;
    }
}
/* .main-banner {
    background-image: url("../imgs/main-bnner.jpg");
    background-repeat: no-repeat;
    background-position: right;
    background-size: 50%; 
} */

.main-banner {
    position: relative;
    overflow: hidden; /* Taake image overflow na kare */
}

.main-banner::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50%; /* Sirf right side cover kare */
    height: 100%;
    background-image: url("../imgs/main-bnner.jpg");
    background-repeat: no-repeat;
    background-size: 120%; /* Pehle bada */
    background-position: center;
    z-index: 1; /* Background mein rahe */
    animation: zoomOutBG 1.5s ease-out forwards;
}

@keyframes zoomOutBG {
    0% {
        background-size: 150%; /* Pehle bada ho */
        opacity: 0; /* Soft effect ke liye */
    }
    100% {
        background-size: 100%; /* Normal size pe aa jaye */
        opacity: 1;
    }
}

.main-banner-banquet {
    position: relative;
    overflow: hidden; /* Taake image doosre section par na jaye */
}

/* Right-side Background Animation */
.main-banner-banquet::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50%; /* Sirf right side cover kare */
    height: 100%;
    background-image: url("../imgs/banq-bg.jpeg");
    background-repeat: no-repeat;
    background-size: 130%; /* Pehle bada hoga */
    background-position: center;
    z-index: 1; /* Background ke andar rahe */
    animation: zoomOutBanquet 1.5s ease-out forwards;
}

/* Keyframes for Zoom-Out Effect */
@keyframes zoomOutBanquet {
    0% {
        background-size: 150%; /* Start zoomed in */
        opacity: 0.6; /* Soft fade-in effect */
    }
    100% {
        background-size: 100%; /* End at normal size */
        opacity: 1;
    }
}

.main-banner-reservations {
    position: relative;
    overflow: hidden; /* Taake image doosre section par na jaye */
}

/* Right-side Background Animation */
.main-banner-reservations::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-image: url("../imgs/reservation.jpeg");
    background-repeat: no-repeat;
    background-size: 130%;
    background-position: center;
    z-index: 1;
    animation: zoomOutReservations 1.5s ease-out forwards;
}

/* Keyframes for Zoom-Out Effect */
@keyframes zoomOutReservations {
    0% {
        background-size: 140%; /* Start zoomed in */
        opacity: 0.6; /* Soft fade-in effect */
    }
    100% {
        background-size: 100%; /* End at normal size */
        opacity: 1;
    }
}

.halal-food-wrap {
    margin-top: 3rem;
    background-image: url("../imgs/halal food 1.jpg");
    background-repeat: no-repeat;
    background-position: left;
    background-size: 55%; /* Initially bigger */
    transition: background-size 2s ease-out; /* Smooth zoom-out effect */
}

.halal-food-wrap.zoom-out {
    background-size: 50%; /* Zoom-out hoke final size */
}

.banquet-wrap {
    margin-top: 3rem;
    background-image: url("../imgs/banquit.jpg");
    background-repeat: no-repeat;
    background-position: right; /* Image ko right align karna */
    background-size: 53%; /* Pehle image badi hogi */
    transition: background-size 2s ease-out; /* Smooth zoom-out */
}

.banquet-wrap.zoom-out {
    background-size: 50%; /* Zoom-out hone ke baad image chhoti ho jayegi */
}

.royal-suit,
.imperial-wrap {
    margin-top: 3rem;
    background-repeat: no-repeat;
    background-size: 55% auto; /* Pehle image badi hogi */
    transition: background-size 2s ease-out; /* Smooth zoom-out effect */
}

.royal-suit {
    background-image: url("../imgs/royal-suit.jpeg");
    background-position: left center; /* Centered left */
}

.imperial-wrap {
    background-image: url("../imgs/imperial-suit.jpeg");
    background-position: right center; /* Centered right */
    margin-bottom: 3rem;
}

.royal-suit.zoom-out,
.imperial-wrap.zoom-out {
    background-size: 50% auto; /* Zoom-out hone ke baad size chhota hoga */
}

.halal-content {
    padding: 7rem;
}
.halal-content h2 {
    font-weight: 500;
}
.halal-content p {
    font-size: 14px;
}
.banner-text {
    background-image: url("../imgs/bg-bnner.svg");
    background-repeat: no-repeat;
    background-size: 100% auto; /* Image ka width poora, height auto */
    background-position: 45% center; /* Left se thoda adjust karne ke liye */
    padding-top: 10rem;
    padding-left: 11rem;
    padding-bottom: 2rem;
}
.banquet-text {
    background-image: url("../imgs/bg-bnner.svg");
    background-repeat: no-repeat;
    background-size: 100% auto; /* Image ka width poora, height auto */
    background-position: 45% center; /* Left se thoda adjust karne ke liye */
    padding-top: 14rem;
    padding-left: 11rem;
    padding-bottom: 2rem;
}

.banner-text {
    background-image: url("../imgs/bg-bnner.svg");
    background-repeat: no-repeat;
    background-size: 100% auto; /* Image ka width poora, height auto */
    background-position: 45% top; /* Background ko top ki taraf adjust karenge */
    padding-top: 5rem; /* Top padding kam karenge */
    padding-left: 11rem;
    padding-bottom: 7rem;
}

.banner-text h1 {
    font-size: 54px;
    color: #012f34;
    margin-bottom: 20px;
}

.banner-text p {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
}
/* Hide Background Image for Screens 767px and Smaller */
@media (max-width: 767px) {
    .banner-text {
        background-image: none; /* Background image ko remove karein */
        padding-left: 1rem; /* Extra left padding ko adjust karein */
        padding-top: 5rem; /* Padding adjust karein */
    }
    .banner-text h1 {
        color: #c49b84;
    }
    .banner-text p {
        display: none;
    }
    .image-label {
        position: absolute;
        right: -191px;
        bottom: 20px;
        transform: rotate(-89deg);
        transform-origin: left bottom;
        background-color: #f8f9fa;
        padding: 5px 10px;
        font-size: 14px;
        font-weight: 500;
        border-left: 3px solid #c5a880;
        color: #d2e1ec;
    }
}

/* Responsive for Screens 767px and Smaller */
@media (max-width: 1235px) {
    .main-banner::after {
        background-image: none; /* Background ko hatayein */
        padding: 0px;
    }

    /* Add image as a separate block above text */
    /* Add image as a separate block above text */
    .main-banner::before {
        content: "";
        display: block;
        background-image: url("../imgs/main-bnner.jpg");
        background-repeat: no-repeat;
        background-size: 120%; /* Start with a larger image */
        background-position: center;
        height: 282px; /* Adjust height as needed */
        width: 100%;
        animation: zoomOutImage 1.5s ease-out forwards;
    }

    /* Keyframes for Zoom-Out Effect */
    @keyframes zoomOutImage {
        0% {
            background-size: 140%; /* Start with more zoom */
            opacity: 0.6; /* Slight fade-in effect */
        }
        100% {
            background-size: 100%; /* End at normal size */
            opacity: 1;
        }
    }
    .banner {
        background-color: #e9e9e9; /* Light gray background */
        padding: 0 0; /* Space around the banner */
    }
    .banner-text {
        text-align: center; /* Text ko center align karein */
        padding: 2rem; /* Padding ko adjust karein */
    }
    .main-banner-banquet::after {
        background-image: none; /* Background ko hatayein */
        padding: 0px;
    }

    /* Add image as a separate block above text */
    .main-banner-banquet::before {
        content: "";
        display: block;
        background-image: url("../imgs/banq-bg.jpeg");
        background-repeat: no-repeat;
        background-size: 120%; /* Start with a larger image */
        background-position: center;
        height: 261px; /* Adjust height as needed */
        width: 100%;
        animation: zoomOutBanquet 1.5s ease-out forwards;
    }

    /* Keyframes for Zoom-Out Effect */
    @keyframes zoomOutBanquet {
        0% {
            background-size: 140%; /* Start zoomed in */
            opacity: 0.6; /* Soft fade-in effect */
        }
        100% {
            background-size: 100%; /* End at normal size */
            opacity: 1;
        }
    }

    .main-banner-reservations::after {
        background-image: none; /* Background ko hatayein */
        padding: 0px;
    }

    /* Add image as a separate block above text */
    .main-banner-reservations::before {
        content: "";
        display: block;
        background-image: url("../imgs/reservation.jpeg");
        background-repeat: no-repeat;
        background-size: 120%; /* Start with a larger image */
        background-position: center;
        height: 257px; /* Adjust height as needed */
        width: 100%;
        animation: zoomOutReservation 1.5s ease-out forwards;
    }

    /* Keyframes for Zoom-Out Effect */
    @keyframes zoomOutReservation {
        0% {
            background-size: 140%; /* Start zoomed in */
            opacity: 0.6; /* Soft fade-in effect */
        }
        100% {
            background-size: 100%; /* End at normal size */
            opacity: 1;
        }
    }
}
.bufe-age {
    padding-top: 1rem;
}
.agee {
    margin-bottom: 2rem !important;
}
.gold {
    color: #c49b84;
}
.agee h6 {
    font-weight: 400;
    margin-bottom: 1rem !important;
}
.agee span {
    font-weight: bold;
}
/* Responsive Design for 767px and Below */
@media (max-width: 767px) {
    .halal-image {
        order: -1; /* Bring image to the top */
        text-align: center; /* Center align image */
    }

    .halal-content {
        text-align: center; /* Center align text for small screens */
        padding: 1rem; /* Adjust padding for smaller screens */
    }

    .halal-content .halal-icon img {
        margin-top: 1rem;
        width: 80px; /* Resize the halal certification icon */
    }
}
/* Responsive Design for Screens 767px and Smaller */
@media (max-width: 767px) {
    .halal-food-wrap {
        background-color: #fff; /* Background color for better readability */
        padding: 0;
    }
    .halal-food-wrap {
        background-image: none; /* Remove background image */
    }
    /* Halal Food Wrap Animation */
    .halal-food-wrap {
        position: relative;
        overflow: hidden;
    }

    .halal-food-wrap::before {
        content: "";
        display: block;
        background-image: url("../imgs/halal food 1.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: 300px; /* Adjust as needed */
        width: 100%;
        transform: scale(1.2); /* Initially bigger */
        transition: transform 2s ease-out; /* Smooth animation */
    }

    .halal-food-wrap.zoom-out::before {
        transform: scale(1); /* Zoom-out effect */
    }

    .halal-image {
        display: none; /* Hide original image on small screens */
    }

    .halal-content {
        text-align: center; /* Center text for smaller screens */
        padding: 1rem; /* Adjust padding */
        position: relative;
        z-index: 1;
    }

    .royal-suit {
        background-color: #fff; /* Background color for better readability */
        padding: 0;
        background-image: none;
    }

    .royal-suit {
        position: relative; /* Ensure parent has position */
        overflow: hidden; /* Prevents unwanted overflow */
    }

    .royal-suit::before {
        content: "";
        display: block;
        background-image: url("../imgs/royal-suit.jpeg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: 300px; /* Adjust as needed */
        width: 100%;
        transform: scale(1.2); /* Initially bigger */
        transition: transform 2s ease-out; /* Smooth animation */
    }

    .royal-suit.zoom-out::before {
        transform: scale(1); /* Zoom-out effect */
    }

    .royal-image {
        display: none; /* Hide original image on small screens */
    }
    .banquet-wrap {
        background-color: #fff; /* Background color for better readability */
        padding: 0;
        margin-top: 7rem;
    }

    /* Banquet Wrap Animation */
    .banquet-wrap {
        position: relative;
        overflow: hidden;
    }

    .banquet-wrap::before {
        content: "";
        display: block;
        background-image: url("../imgs/banquit.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: 300px; /* Adjust as needed */
        width: 100%;
        transform: scale(1.2); /* Initially bigger */
        transition: transform 2s ease-out; /* Smooth zoom-out animation */
    }

    .banquet-wrap.zoom-out::before {
        transform: scale(1); /* Zoom-out effect */
    }

    /* Imperial Wrap Animation */
    .imperial-wrap {
        position: relative;
        overflow: hidden;
        background-image: none;
    }

    .imperial-wrap::before {
        content: "";
        display: block;
        background-image: url("../imgs/imperial-suit.jpeg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: 300px;
        width: 100%;
        transform: scale(1.2); /* Initially bigger */
        transition: transform 2s ease-out;
    }

    .imperial-wrap.zoom-out::before {
        transform: scale(1); /* Zoom-out effect */
    }

    .halal-content {
        text-align: center;
        padding: 1rem;
        margin: -4rem 1rem;
        width: 92%;
        padding-bottom: 8rem;
        padding-top: 4rem;
    }
    .halal-food-wrap {
        margin-bottom: 3rem;
    }
}
.restaurant-section {
    padding: 4rem 0;
    background-color: white !important; /* Light background */
}

.restaurant-image {
    position: relative; /* Position for the label */
}

.restaurant-image img {
    width: 100%; /* Image full width le */
    max-width: 500px; /* Set maximum width */
    height: auto; /* Maintain aspect ratio */
    display: block;
    margin: 0 auto; /* Center align image horizontally */
    border-radius: 8px; /* Optional: Add rounded corners */
}

.image-label {
    position: absolute;
    right: -154px;
    bottom: 20px;
    transform: rotate(-90deg); /* Rotate the label */
    transform-origin: left bottom;
    background-color: white;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 500;
    border-left: 3px solid #c5a880; /* Add a border for style */
    color: #d2e1ec;
}

.restaurant-content {
    text-align: left; /* Align content to the left */
    padding: 2rem;
}

.restaurant-content .section-heading {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.restaurant-content .section-description {
    font-size: 1rem;
    color: #666;
    margin-bottom: 1.5rem;
}

.restaurant-content .btn {
    background-color: #c49b84;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 1px;
    width: 50%;
    font-weight: bold;
    text-decoration: none;
}

.restaurant-content .btn:hover {
    background-color: #c49b84;
    color: #fff;
    text-decoration: none;
}

/* Responsive Design for Smaller Screens */
@media (max-width: 767px) {
    .restaurant-content {
        text-align: center; /* Center align content on small screens */
        padding: 1rem;
    }

    .image-label {
        transform: none; /* Remove rotation for small screens */
        position: static;
        margin-top: 10px;
        text-align: center;
    }
}
.banquet-sec-text {
    text-align: center;
    margin-top: 14rem;
    padding-bottom: 7rem;
}
.banquet-sec-text p {
    padding-bottom: 3rem;
    font-weight: 500;
    line-height: 2.25rem;
    color: #333333;
    font-family: Arial, Helvetica, sans-serif;
}
.banquet-sec-text h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2rem;
    padding-bottom: 1rem;
}
.car-text {
    font-size: 0.8rem;
}

/* General Header Styles */
.header {
    background-color: #042d31;
    color: #fff;
    padding: 10px 0;
}

/* Logo Styling */
.navbar-brand img {
    height: 80px;
}

/* Desktop Navbar Links */
.nav-link {
    color: #fff;
    transition: color 0.3s;
}

.nav-link:hover {
    color: #d1b196;
}

/* Call Icon for Desktop */
.call-icon {
    font-size: 20px;
    color: #fff;
}

/* Full-Screen Overlay Menu (Hidden by Default) */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(4, 45, 49, 0.95);
    z-index: 9999;
    display: none;
    /* Initially hidden */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}

.overlay.active {
    display: flex;
    /* Show the overlay when active */
}

.overlay a {
    font-size: 20px;
    margin: 10px 0;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

.overlay a:hover {
    color: #d1b196;
}

.overlay .address {
    margin-top: 20px;
    font-size: 14px;
    color: #ddd;
}

.overlay .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 24px;
    color: #fff;
    cursor: pointer;
}
.ret-divider {
    padding-top: 5rem;
}
/* Responsive Styles (Apply only for small screens) */
@media (max-width: 786px) {
    .navbar-collapse {
        display: none;
        /* Hide desktop links */
    }

    .navbar-toggler {
        display: inline-block;
        /* Show hamburger menu */
        border: 1px solid #c49b84;
        border-radius: 1px;
        color: #fff;
    }

    .call-icon {
        font-size: 24px;
        display: inline-block;
    }
    .image-label {
        /* transform: none; */
        /* position: static; */
        margin-top: 10px;
        text-align: center;
    }
    .image-label {
        position: absolute;
        right: -191px;
        bottom: 20px;
        transform: rotate(-89deg);
        transform-origin: left bottom;
        background-color: #f8f9fa;
        padding: 5px 10px;
        font-size: 14px;
        font-weight: 500;
        border-left: 3px solid #c5a880;
        color: #d2e1ec;
    }
}
.contact-button-card {
    width: 50%;
}
@media (max-width: 776px) {
    .contact-button-card {
        width: 100% !important;
    }
    .contact-button-gold {
        width: 100% !important;
        margin-bottom: 1rem;
    }
}
.banquet-text h1 {
    font-size: 3.5rem !important;
}
@media (min-width: 786px) {
    .navbar-toggler {
        display: none;
        /* Hide hamburger on desktop */
    }

    .call-icon {
        display: none;
        /* Hide call icon on desktop */
    }
}
@media (max-width: 776px) {
    .banquet-text h1 {
        font-size: 30px !important;
    }
}
.booking-sec {
    margin-top: 3rem;
    margin-bottom: 3rem;
}
.contact-button-card {
    display: inline-block;
    padding: 15px 30px;
    margin-bottom: 1rem;
    font-size: 1rem;
    color: #0a2a31;
    background-color: #fff;
    border: 2px solid #c8a97e;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.contact-button-card:hover {
    color: #0a2a31;
    background-color: #fff;
}
@media (max-width: 1310px) {
    .halal-food-wrap {
        background-size: 50% 100%;
    }
    .banquet-wrap {
        background-size: 50% 100%;
    }
}
@media (max-width: 767px) {
    .banner-text h1 {
        font-size: 35px !important;
    }
    .divider {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    .visit-content h2 {
        font-size: 1.76rem;
    }
    .visit-content p {
        font-size: 1rem;
    }
    .visit-content h3 {
        font-size: 1rem;
    }
    .opening-hours {
        margin: 47px 0 30px;
    }
}
@media (max-width: 557px) {
    .banquet-sec-text {
        margin-top: 4rem;
        padding-bottom: 0rem;
    }
    .banquet-sec-text h3 {
        font-size: 2rem;
        font-weight: 500;
    }

    .imperial-wrap {
        margin-top: 7rem;
    }

    .navbar-brand img {
        height: 73px;
    }
    .header {
        padding: 0 0;
    }
}
.contact-button-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30%;
    text-align: center;
    background-color: #25d366; /* WhatsApp Green */
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s ease-in-out;
}

.contact-button-whatsapp i {
    font-size: 25px;
    margin-right: 8px; /* Space between icon & text */
}

.contact-button-whatsapp:hover {
    background-color: #1ebe5d; /* Slightly darker green on hover */
}
.fa-whatsapp {
    padding-right: 7px;
}
.carosul-wrap .car1 {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: url("{{ asset('assets/video/v1.mp4') }}") no-repeat center
        center;
    background-size: cover;
}

/* Video as background using pseudo-element */
.carosul-wrap .car2 {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("{{ asset('assets/video/v1.mp4') }}") no-repeat center
        center;
    background-size: cover;
    background-attachment: fixed;
    filter: brightness(
        50%
    ); /* Optional: Darkens the background for better text visibility */
    z-index: -1;
}

/* Foreground Content */
.content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.4); /* Optional Overlay */
    padding: 20px;
    border-radius: 10px;
}