/* Define your color palette and fonts as CSS Variables */
:root {
    --primary-bg: #f8f8f8; /* Light background for general sections */
    --dark-bg: #1a1a1a; /* Dark background for footer/dark sections */
    --accent-gold: #c7923e; /* Your primary accent color - slightly richer gold */
    --accent-gold-dark: #a8792e; /* Darker gold for hover states */
    --text-dark: #222; /* Darker text for better contrast */
    --text-muted: #555;
    --text-light: #f8f9fa;
    --border-color-light: #e0e0e0; /* Light border color for inputs */

    --font-heading: 'Gilda Display', serif;
    --font-body: 'Barlow Condensed', sans-serif;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden; /* Prevent horizontal scroll issues */
    background-color: #f0f0f0; /* Soft background for the entire page */
}

/* --- General Section Styling --- */
.section-title {
    font-family: var(--font-heading);
    font-size: 3.0rem; /* Slightly larger titles */
    color: var(--text-dark);
    margin-bottom: 20px;
    text-align: center;
    position: relative;
    padding-bottom: 15px;
}

.section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: var(--accent-gold);
    border-radius: 5px;
}

.sub-section-title {
    font-family: var(--font-body);
    font-size: 2.2rem;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 40px;
    font-weight: 300;
}

.section-description {
    font-family: var(--font-body);
    font-size: 1.15rem; /* Slightly larger description text */
    color: var(--text-muted);
    max-width: 850px; /* Wider description area */
    line-height: 1.8;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: 60px;
}


/* --- Top Utility Bar --- */
.top-utility-bar {
    background-color: #f2f2f2 !important; /* Lighter utility bar */
    border-bottom: 1px solid #e0e0e0;
    font-size: 1rem; /* Slightly reduced font size for overall bar */
    padding-top: 0.5rem !important; /* Adjust padding for all screens */
    padding-bottom: 0.5rem !important; /* Adjust padding for all screens */
}
.top-utility-bar .contact-info .text-muted,
.top-utility-bar .social-partner-links .text-dark {
    color: var(--text-dark) !important; /* Ensure --text-dark is defined in :root */
}
.top-utility-bar .social-partner-links a {
    transition: color 0.3s ease;
    margin-right: 8px;
    border-right: 2px solid red; /* You had this, but it might look odd on mobile */
    text-decoration: none; /* Ensure links are not underlined by default */
}
.top-utility-bar .social-partner-links a:hover {
    color: var(--accent-color) !important; /* Ensure --accent-color is defined in :root */
}
/* Style for the optional language/currency select */
.top-utility-bar .form-select-sm {
    height: auto;
    padding: .25rem .5rem;
    font-size: .875rem;
}

/* --- Responsive Adjustments for Top Utility Bar (for screens smaller than 768px) --- */
@media (max-width: 767.98px) {
    .top-utility-bar .row {
        flex-direction: column; /* Stack contact info and social links vertically */
        text-align: center; /* Center align text for better mobile presentation */
        
    }

    .top-utility-bar .col-md-6 {
        width: 100%; /* Make columns full width */
        text-align: center !important; /* Override Bootstrap's text-start/end */
        margin-bottom: 0.5rem; /* Add some space between stacked sections */
    }

    .top-utility-bar .contact-info {
        margin-bottom: 0.5rem; /* Space between contact lines */
        font-size: 0.9rem; /* Slightly smaller font for contact info */
    }

    .top-utility-bar .contact-info span {
        display: block; /* Make each contact detail stack */
        margin-right: 0 !important; /* Remove horizontal margin */
        margin-bottom: 0.2rem; /* Small vertical spacing */
    }

    .top-utility-bar .social-partner-links {
        justify-content: center !important; /* Center the partner links */
        margin-top: 0.5rem; /* Space from contact info */
        flex-wrap: wrap; /* Allow links to wrap to the next line if too many */
    }

    .top-utility-bar .social-partner-links .btn {
        font-size: 0.65rem; /* Smaller buttons on mobile */
        padding: .1rem .3rem !important; /* Smaller padding */
        margin: 0.2rem; /* Add some margin around buttons */
    }
    
    .top-utility-bar .social-partner-links a {
        margin-right: 4px; /* Reduce margin between partner icons */
        margin-left: 4px; /* Add some margin to the left for centering */
    }
    
    .top-utility-bar .social-partner-links img {
        height: 1em !important; /* Make partner logos slightly smaller */
    }
}


/* --- Main Navigation Bar --- */
.navbar {
    background-color: #ffffff !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08); /* More subtle shadow */
    padding-top: 15px;
    padding-bottom: 15px;
    z-index: 100; /* Ensure navbar is above carousel */
    position: sticky; /* Make it sticky */
    top: 0; /* Stick to the top */
}

.navbar-logo, .navbar-logo-mobile {
    height: 60px; /* Adjust as per your logo size */
    transition: transform 0.3s ease;
}
.navbar-brand:hover .navbar-logo,
.navbar-brand:hover .navbar-logo-mobile {
    transform: scale(1.05);
}

.navbar-nav .nav-item {
    margin: 0 10px; /* Spacing between nav items */
}

.navbar-nav .nav-link {
    color: var(--text-dark);
    font-family: var(--font-body);
    font-weight: 600; /* Slightly bolder */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 0; /* Vertical padding */
    position: relative;
    transition: color 0.3s ease, transform 0.3s ease;
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 100%;
    height: 2px;
    background-color: var(--accent-gold);
    transition: transform 0.3s ease-out;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    transform: translateX(-50%) scaleX(1);
}

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

/* Navbar toggler for mobile */
.navbar-toggler {
    border: none; /* Remove border */
    padding: 0; /* Remove padding */
    font-size: 1.5rem; /* Adjust icon size */
}
.navbar-toggler:focus {
    box-shadow: none; /* Remove focus outline */
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    /* Use your text-dark color for the hamburger icon if needed. Example: */
    /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23222' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; */
}


/* Offcanvas Sidebar Menu for Mobile */
/* --- Basic JavaScript-Toggled Sidebar --- */
/* Change background color of the Offcanvas */
.offcanvas {
    background-color: #2c3e50; /* Darker blue-gray */
}

/* Change text color of the Offcanvas title */
.offcanvas-title {
    color: #ecf0f1 !important; /* Light gray, !important to override Bootstrap if needed */
}

/* Style for the close button (making it white) */
.offcanvas-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%); /* Makes the icon white */
    /* Or specifically color it if it's an SVG or font icon */
    /* color: white; */
}

/* Styling for the navigation links inside the Offcanvas */
.offcanvas-body .navbar-nav .nav-item .nav-link {
    color: #ecf0f1; /* Light gray text */
    padding: 15px 20px;
    font-size: 1.1em;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.offcanvas-body .navbar-nav .nav-item .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Subtle hover effect */
    color: #ffcc00; /* Yellow accent on hover */
}

/* Style for the active link */
.offcanvas-body .navbar-nav .nav-item .nav-link.active {
    background-color: rgba(255, 255, 255, 0.2); /* Darker background for active */
    color: #ffcc00; /* Active link text color */
    border-left: 5px solid #ffcc00; /* Left border highlight for active */
    padding-left: 15px; /* Adjust padding due to border */
}

/* Optional: Adjust padding or margin for the offcanvas body */
.offcanvas-body {
    padding: 20px;
}

/* Optional: If you want to apply a specific font */
.offcanvas-body {
    font-family: 'Arial', sans-serif; /* Example font */
}




/* --- Header Part with Slider (Hero Section) --- */
/* Custom CSS for Bootstrap Carousel */

/* Ensure images cover the entire carousel area without distortion */
.carousel-item img {
    height: 700px; /* Adjust this height as needed for your design */
    object-fit: cover; /* This makes sure the image covers the area, cropping if necessary */
    filter: brightness(70%); /* Darken images slightly for better text contrast */
}

/* Style for the caption text */
.carousel-caption {
    /* Semi-transparent dark background for readability */
  
    padding: 20px;
    bottom: 20%; /* Adjust vertical position if needed */
    left: 50%;
    transform: translateX(-50%);
    width: 80%; /* Adjust width of the caption box */
    max-width: 700px; /* Max width for larger screens */
    color: #fff; /* Ensure text is white for dark carousel */
     /* Add text shadow for pop */
}

.carousel-caption .slider-title {
    font-size: 2.5rem; /* Larger font size for the main heading */
    font-weight: 700;
    margin-bottom: 15px;
    color: #fff;
}

.carousel-caption .slider-text {
    font-size: 1.25rem; /* Larger font size for the paragraph */
    line-height: 1.6;
    color: #fff;
}

/* Adjust button styling within the caption */
.carousel-caption .btn {
    font-size: 1.1rem;
    padding: 10px 25px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.carousel-caption .btn-light:hover {
    background-color: #e0e0e0; /* Lighter hover effect */
    color: #333;
}

/* Media Queries for Responsiveness */
@media (max-width: 992px) { /* Medium devices (tablets) */
    .carousel-item img {
        height: 500px;
    }
    .carousel-caption {
        bottom: 15%;
        width: 90%;
        padding: 15px;
    }
    .carousel-caption .slider-title {
        font-size: 2rem;
    }
    .carousel-caption .slider-text {
        font-size: 1rem;
    }
    .carousel-caption .btn {
        font-size: 1rem;
        padding: 8px 20px;
    }
}

@media (max-width: 768px) { /* Small devices (phones) */
    .carousel-item img {
        height: 400px;
    }
    .carousel-caption {
        bottom: 10%;
        width: 95%;
        padding: 10px;
    }
    .carousel-caption .slider-title {
        font-size: 1.5rem;
    }
    .carousel-caption .slider-text {
        font-size: 0.9rem;
        margin-bottom: 10px; /* Reduce margin for small screens */
    }
    .carousel-caption .btn {
        font-size: 0.9rem;
        padding: 6px 15px;
    }
    /* Ensure the caption is visible on small screens (d-none d-md-block hides it on small by default) */
    .carousel-caption.d-none.d-md-block {
        display: block !important; /* Override Bootstrap's hiding for smaller screens */
    }
}

/* Adjust indicators for better visibility if needed */
.carousel-indicators button {
    background-color: #fff; /* White indicators */
    opacity: 0.6;
}

.carousel-indicators button.active {
    opacity: 1;
}

/* Adjust control icons for better visibility */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background for icons */
    border-radius: 20%;
    padding: 20px; /* Increase padding to make icons larger */
}


/* Booking Section */

/* --- Booking Section - Gold Accent Design --- */
.booking-section {
    background-color: #f8f9fa; /* A very light grey background for the section */
    padding: 80px 0; /* Generous padding top and bottom */
}

.booking-form-main {
    background-color: #ffffff; /* Crisp white background for the form container */
    padding: 30px 30px; /* Ample internal padding */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); /* Soft, subtle shadow */
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    justify-content: space-between;
    gap: 20px; /* Increased spacing between input groups */
    align-items: stretch; /* Ensures elements stretch to fill vertical space */
}

.booking-input-group {
    flex: 1 1 220px; /* Flex-grow, no shrink, min-width of 220px for each input group */
    background-color: transparent; /* No background color for individual input groups */
    border-bottom: 2px solid #e9ecef; /* A subtle bottom border as separator */
    padding: 10px 0; /* Vertical padding, no horizontal padding */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: border-color 0.3s ease; /* Smooth transition for border color */
    min-height: 75px; /* Ensure consistent minimum height */
}

.booking-input-group:hover {
    border-color: var(--accent-gold); /* Accent gold border on hover */
}

.booking-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.9em; /* Slightly larger label font */
    color: #777; /* Muted dark gray for labels */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    display: block; /* Ensures label takes full width */
    font-weight: 600; /* Medium font weight */
}

.booking-value-display {
    font-family: 'Gilda Display', serif;
    font-size: 1.6em; /* More prominent font for displayed value */
    color: #333; /* Dark text for displayed value */
    cursor: pointer;
    line-height: 1.2; /* Adjust line-height for better vertical alignment */
}

/* Style for actual hidden inputs/selects that will trigger pickers/dropdowns */
.booking-date-input,
.booking-select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Make them invisible */
    cursor: pointer;
    z-index: 5; /* Ensure they are clickable over the display span */
}

/* Hide default select arrow for custom icon */
.booking-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.booking-icon {
    position: absolute;
    right: 5px; /* Position icon slightly to the right */
    top: 50%;
    transform: translateY(-50%);
    color: #a0a0a0; /* Lighter gray for icons */
    font-size: 1.1em;
    pointer-events: none; /* Allows clicks to pass through to the underlying input/select */
    transition: color 0.3s ease;
}

.booking-input-group:hover .booking-icon {
    color: var(--accent-gold); /* Accent gold for icon on hover */
}

.booking-submit-wrapper {
    flex: 0 0 auto; /* Prevent growing/shrinking, take only necessary width */
    min-width: 250px; /* Minimum width for the button column to maintain proportion */
    display: flex;
    align-items: center; /* Vertically align button */
    justify-content: center;
    padding-top: 20px; /* Space above button for alignment with input groups */
}

.booking-submit-btn {
    width: 100%;
    background-color: var(--accent-gold); /* Gold background for the button */
    color: #fff; /* White text on gold for contrast */
    border: none;
    border-radius: 8px; /* Consistent border-radius */
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.35em; /* Larger font for button text */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 18px 25px; /* Generous padding to match height of input groups */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    cursor: pointer;
    /* Adjusted shadow color to match gold accent */
    box-shadow: 0 5px 15px rgba(199, 146, 62, 0.3);
}

.booking-submit-btn:hover {
    background-color: #b38237; /* Slightly darker gold on hover */
    transform: translateY(-2px); /* Slight lift on hover */
    /* More prominent gold shadow on hover */
    box-shadow: 0 8px 20px rgba(199, 146, 62, 0.5);
}

/* Responsive adjustments for Booking Section (remain the same) */
@media (max-width: 991.98px) {
    .booking-form-main {
        padding: 25px;
        gap: 15px;
    }
    .booking-input-group {
        flex: 1 1 calc(50% - 10px); /* Two columns on medium screens */
        min-height: 70px;
    }
    .booking-submit-wrapper {
        flex: 1 1 100%; /* Button takes full width on medium screens */
        margin-top: 10px; /* Space above button */
        padding-top: 0; /* Remove top padding if button is full width */
    }
    .booking-submit-btn {
        font-size: 1.25em;
        padding: 16px 20px;
    }
}

@media (max-width: 767.98px) {
    .booking-section {
        padding: 50px 0;
    }
    .booking-form-main {
        padding: 20px;
        border-radius: 6px;
        gap: 10px;
    }
    .booking-input-group {
        flex: 1 1 100%; /* Single column on small screens */
        min-height: 65px;
    }
    .booking-submit-wrapper {
        margin-top: 15px;
    }
    .booking-submit-btn {
        font-size: 1.15em;
        padding: 14px 15px;
    }
}

@media (max-width: 575.98px) {
    .booking-section {
        padding: 40px 0;
    }
    .booking-form-main {
        padding: 15px;
    }
    .booking-submit-btn {
        font-size: 1.05em;
        padding: 12px 10px;
    }
}


/* Styles for the simple list of available rooms */
.available-rooms-list {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin: 20px auto; /* Center the list */
    display: flex;
    flex-direction: column; /* Stack items vertically */
    gap: 10px; /* Space between list items */
    max-width: 400px; /* Constrain width for better readability */

    /* ----- ADD THESE STYLES FOR SCROLLING ----- */
    max-height: 300px; /* Set a maximum height for the list (adjust as needed) */
    overflow-y: auto; /* Enable vertical scrolling if content exceeds max-height */
    border: 1px solid #e9e9e9; /* Optional: add a subtle border to the scrollable area */
    padding-right: 5px; /* Optional: add some padding for the scrollbar on the right */
    box-sizing: border-box; /* Include padding in the element's total width and height */
    /* ------------------------------------------- */
}

.available-rooms-list li {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 12px 20px; /* Padding inside each list item */
    font-size: 1.1rem;
    color: var(--text-dark);
    font-weight: 500;
    text-align: left; /* Align text to the left within each item */
    transition: background-color 0.3s ease, border-color 0.3s ease;

    /* Add flexbox to align name and price on the same line */
    display: flex;
    justify-content: space-between; /* Puts space between room name and price */
    align-items: center; /* Vertically center them */
}

.available-rooms-list li:hover {
    background-color: #f0f0f0; /* Light highlight on hover */
    border-color: var(--primary-gold); /* Highlight border on hover */
}

.available-rooms-list .room-name-link {
    text-decoration: none; /* Remove underline */
    color: var(--text-dark); /* Inherit or set your desired text color */
    font-weight: 500; /* Inherit font weight from parent or set specifically */
    transition: color 0.3s ease; /* Smooth transition for hover effect */
}

.available-rooms-list .room-name-link:hover {
    color: var(--primary-gold); /* Change color on hover, use your brand's highlight color */
}

.available-rooms-list .room-price {
    font-weight: 600; /* Make price a bit bolder */
    color: var(--primary-gold); /* Use your primary gold color for price */
    margin-left: 15px; /* Add some space between room name and price */
    white-space: nowrap; /* Prevent price from wrapping */
}

/* --- Responsive Adjustments --- */
@media (max-width: 991.98px) { /* Tablet and smaller desktop */
    
    .navbar-collapse {
        display: none !important; /* Hide desktop menu on smaller screens */
    }
    .navbar-toggler {
        display: block !important; /* Show toggler */
    }

    /* Adjust slider for tablets */
    #heroCarousel {
        height: 65vh;
    }
    #heroCarousel .carousel-item {
        height: 65vh;
    }
    #heroCarousel .carousel-caption h1 {
        font-size: 3.5rem;
    }
    #heroCarousel .carousel-caption p {
        font-size: 1.4rem;
        max-width: 80%; /* Adjust max-width for better fit */
    }
    .custom-carousel-btn {
        padding: 12px 35px;
        font-size: 1.1rem;
    }

    /* Booking bar adjustments for tablets */
    .booking-bar-section {
        margin-top: -80px; /* Adjust overlap */
    }
    .booking-bar-unique {
        flex-wrap: wrap; /* Allow items to wrap */
        padding: 20px 20px;
        width: 95%;
    }
    .booking-bar-unique .custom-input-group {
        flex: 0 0 50%; /* Two columns */
        max-width: 50%;
        padding: 0 10px;
        border-right: none; /* Remove vertical separators on wrapped lines */
        border-bottom: 1px solid var(--border-color-light); /* Add horizontal separator */
        margin-bottom: 15px; /* Space between rows */
        padding-bottom: 15px; /* space between border and content */
    }
    .booking-bar-unique .custom-input-group:nth-child(odd) { /* Apply border-right to every odd item to separate columns */
        border-right: 1px solid var(--border-color-light);
    }
    /* Remove bottom border for the last row's items (if 2 items per row, this targets the third and fourth) */
    .booking-bar-unique .custom-input-group:nth-last-child(2),
    .booking-bar-unique .custom-input-group:last-child {
        border-bottom: none;
    }

    /* Ensure button column takes full width and centers button */
    .booking-bar-unique .col-12.text-md-end {
        flex: 0 0 100%; /* Button takes full width on tablets */
        max-width: 100%;
        text-align: center !important;
        padding-left: 10px;
        margin-top: 15px !important; /* Add space above button */
        justify-content: center; /* Center the button horizontally */
    }
    .btn-check-availability {
        margin-top: 0 !important; /* Reset margin */
        width: 100%; /* Full width button on tablets */
    }
}

@media (max-width: 767.98px) { /* Mobile */
    /* Adjust slider for mobile */
    #heroCarousel {
        height: 60vh;
    }
    #heroCarousel .carousel-item {
        height: 60vh;
    }
    #heroCarousel .carousel-caption h1 {
        font-size: 2.5rem; /* Smaller heading */
        margin-bottom: 15px;
    }
    #heroCarousel .carousel-caption p {
        font-size: 1.1rem; /* Smaller tagline */
        margin-bottom: 30px;
        max-width: 90%;
    }
    .custom-carousel-btn {
        padding: 10px 25px;
        font-size: 1rem;
    }
    .carousel-control-prev, .carousel-control-next {
        width: 10%; /* Larger tap area for controls */
    }
    .carousel-control-prev-icon, .carousel-control-next-icon {
        width: 40px; /* Smaller control icons */
        height: 40px;
        background-size: 35%;
    }
    .carousel-indicators {
        bottom: 10px; /* Move indicators up slightly */
    }

    /* Booking bar adjustments for mobile */
    .booking-bar-section {
        margin-top: -60px; /* Adjust overlap for smaller header */
    }
    .booking-bar-unique {
        padding: 15px; /* Reduced padding */
        width: 98%;
        flex-direction: column; /* Stack vertically */
        align-items: stretch; /* Stretch items to full width */
    }
    .booking-bar-unique .custom-input-group {
        flex: 0 0 100%; /* Each input takes full width */
        max-width: 100%;
        padding: 0;
        border-right: none !important; /* Remove all vertical borders */
        border-bottom: 1px solid var(--border-color-light); /* Horizontal separator */
        margin-bottom: 15px;
        padding-bottom: 15px;
    }
    .booking-bar-unique .custom-input-group:last-of-type {
        border-bottom: none; /* No bottom border for the last input group */
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .booking-bar-unique .col-12.text-md-end {
        margin-top: 15px !important; /* Add space above button */
        padding-left: 0;
        padding-right: 0;
    }
    .btn-check-availability {
        width: 100%;
        margin-top: 0 !important;
        padding: 12px 20px; /* Smaller button on mobile */
        font-size: 1em;
    }

    .booking-bar-unique .form-label {
        font-size: 0.8em;
    }
    .booking-bar-unique .form-control-custom,
    .booking-bar-unique .form-select-custom {
        font-size: 1.05em;
        height: 35px;
    }
    .booking-bar-unique .input-with-icon .icon,
    .booking-bar-unique .select-with-icon .icon {
        font-size: 1.05em;
    }
}



/* Amenities Section Specific Styles (NEW) */
.amenities-section {
    padding: 80px 0; /* Slightly increased padding for better section separation */
    text-align: center;
    background-color: var(--primary-bg); /* Use CSS variable */
}

.amenities-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px; /* Adjust container padding for smaller screens */
}

.amenities-section .section-title { /* Renamed from .section-title to align with common heading class if applicable */
    font-family: var(--font-heading); /* Use CSS variable */
    font-size: 3.2em; /* Slightly larger default */
    margin-bottom: 50px; /* More space below title */
    color: var(--text-dark); /* Use CSS variable */
}

/* Amenities Grid Icons (Visible by default) */
.amenities-grid-icons {
    display: grid;
    /* Adapts columns based on content width. Min 100px width per item. */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 30px 20px; /* Row gap, column gap */
    margin-bottom: 50px;
}

.amenity-item {
    text-align: center;
    padding: 15px;
    /* Optional: Add a subtle hover effect */
    transition: transform 0.2s ease;
}

.amenity-item:hover {
    transform: translateY(-5px);
}


.amenity-item i {
    font-size: 3.8em; /* Slightly larger icon size */
    color: var(--accent-gold); /* Use accent gold for icons for consistency */
    margin-bottom: 10px;
    display: block;
    line-height: 1; /* Ensure consistent vertical alignment */
}

.amenity-item p {
    font-size: 1em; /* Slightly larger text */
    color: var(--text-muted); /* Use muted text for descriptions */
    margin: 0;
    font-family: var(--font-body); /* Use CSS variable */
    font-weight: 500;
}

/* "All Amenities" Toggle Button */
.all-amenities-toggle {
    margin-top: 30px;
    margin-bottom: 40px; /* Space before the detailed section */
}

.btn-all-amenities {
    background-color: var(--accent-gold); /* Use accent gold for primary button */
    border: 1px solid var(--accent-gold);
    color: var(--text-light); /* Light text on gold button */
    padding: 12px 25px;
    font-size: 1.1em; /* Slightly larger font */
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-all-amenities:hover {
    background-color: var(--accent-gold-dark); /* Darker gold on hover */
    border-color: var(--accent-gold-dark);
    transform: translateY(-2px); /* Lift button slightly */
}

.btn-all-amenities i {
    margin-left: 10px; /* More space for icon */
    transition: transform 0.3s ease;
}

/* Rotate arrow when active (JavaScript will add/remove a class) */
.btn-all-amenities.active i {
    transform: rotate(180deg);
}

/* Amenities Details (initially hidden) */
#amenitiesDetails {
    max-height: 0; /* Initially hide with 0 height */
    overflow: hidden;
    transition: max-height 0.7s ease-out, opacity 0.5s ease-out; /* Smooth transition */
    opacity: 0; /* Also hide with opacity */
    padding-top: 0; /* Ensures smooth collapse without visible padding */
}

/* Class to show the details */
#amenitiesDetails.amenities-details-visible {
    max-height: 1500px; /* Increased to accommodate more content, adjust if necessary */
    opacity: 1;
    padding-top: 40px; /* Add padding when visible */
}

/* Features Grid within details */
.amenities-features-grid {
    display: grid;
    /* Adjust minmax for detailed features. Min 200px. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    text-align: left; /* Align text within feature categories */
    /* Removed padding-top here as it's now handled by #amenitiesDetails.amenities-details-visible */
}

.feature-category {
    background-color: var(--bg-white); /* White background for feature cards */
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.feature-category:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.feature-category i {
    font-size: 2.5em; /* Slightly larger icon */
    color: var(--accent-gold); /* Use accent gold for consistency */
    margin-bottom: 15px;
    display: block;
}

.feature-category h3 {
    font-size: 1.5em; /* Slightly larger heading */
    color: var(--text-dark); /* Use text-dark for headings */
    margin-bottom: 15px;
    font-family: var(--font-heading); /* Use CSS variable */
}

.feature-category ul {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin: 0;
}

.feature-category ul li {
    font-size: 1em; /* Standard text size */
    color: var(--text-muted); /* Muted text for list items */
    margin-bottom: 8px;
    position: relative;
    padding-left: 25px; /* More space for custom bullet */
    font-family: var(--font-body); /* Use CSS variable */
}

.feature-category ul li::before {
    content: '\f058'; /* Font Awesome check-circle icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--accent-gold); /* Gold for the custom bullet */
    position: absolute;
    left: 0;
    top: 2px; /* Adjust vertical alignment if needed */
    font-size: 0.9em; /* Smaller icon size for bullet */
}


/* --- Responsive Adjustments for Amenities Section --- */

@media (max-width: 991.98px) {
    .amenities-section {
        padding: 60px 0;
    }
    .amenities-section .section-title {
        font-size: 2.8em;
        margin-bottom: 40px;
    }
    .amenities-grid-icons {
        gap: 25px 15px;
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); /* Allow slightly smaller icons */
    }
    .amenity-item i {
        font-size: 3em;
    }
    .amenity-item p {
        font-size: 0.9em;
    }
    .amenities-features-grid {
        gap: 30px;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Adjust min for fewer columns on smaller tablets */
    }
    .feature-category h3 {
        font-size: 1.3em;
    }
    .feature-category i {
        font-size: 2.2em;
    }
}

@media (max-width: 767.98px) {
    .amenities-section {
        padding: 40px 0;
    }
    .amenities-section .section-title {
        font-size: 2.2em;
        margin-bottom: 30px;
    }
    .amenities-grid-icons {
        gap: 20px 10px;
        grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); /* Allow more items per row on mobile */
    }
    .amenity-item i {
        font-size: 2.8em;
    }
    .amenity-item p {
        font-size: 0.85em;
    }
    .btn-all-amenities {
        font-size: 1em;
        padding: 10px 20px;
    }
    #amenitiesDetails.amenities-details-visible {
        padding-top: 30px;
    }
    .amenities-features-grid {
        grid-template-columns: 1fr; /* Stack categories on very small screens */
        gap: 20px;
    }
    .feature-category {
        padding: 20px;
    }
    .feature-category h3 {
        font-size: 1.2em;
    }
    .feature-category i {
        font-size: 2em;
    }
    .feature-category ul li {
        font-size: 0.9em;
        padding-left: 20px;
    }
    .feature-category ul li::before {
        font-size: 0.8em;
    }
}

@media (max-width: 575.98px) {
    .amenities-section {
        padding: 30px 0;
    }
    .amenities-section .section-title {
        font-size: 1.8em;
        margin-bottom: 25px;
    }
    .amenities-grid-icons {
        gap: 15px 5px;
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); /* Even smaller minimum for icon display */
    }
    .amenity-item i {
        font-size: 2.5em;
    }
    .amenity-item p {
        font-size: 0.8em;
    }
    .btn-all-amenities {
        font-size: 0.9em;
        padding: 8px 18px;
    }
    #amenitiesDetails.amenities-details-visible {
        padding-top: 20px;
    }
}

/* Top Rooms Section Style */

.top-rooms-section {
    padding: 80px 0;
    background-color: #f8f8f8; /* Contrast with previous section */
    text-align: center;
}

.top-rooms-section .section-title {
    font-family: 'Gilda Display', serif;
    font-size: 2.8em;
    color: #333;
    margin-bottom: 20px;
}

.top-rooms-section .section-description {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1em;
    color: #666;
    max-width: 900px;
    margin: 0 auto 60px auto;
    line-height: 1.6;
}

.room-showcase-wrapper {
    display: flex;
    flex-direction: column;
    gap: 80px; /* Space between each room showcase item */
}

.room-showcase-item {
    display: flex;
    align-items: center;
    gap: 40px; /* Space between image and content */
    margin-bottom: 40px;
    opacity: 0; /* Hidden by default for animate.css */
    /* Animate.css will handle initial visibility and animation */
}

.room-showcase-item.animate__animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

/* Specific Animate.css class for each item can be handled by JS for sequential reveal */
/* For now, they'll all fade in at once if not dynamically added */

.room-showcase-item:nth-child(odd) {
    flex-direction: row; /* Image left, content right */
}

.room-showcase-item:nth-child(even),
.room-showcase-item.reverse-layout {
    flex-direction: row-reverse; /* Image right, content left */
}


.room-image-col {
    flex: 1; /* Takes equal space */
    min-width: 45%; /* Ensure image doesn't get too small */
}

.room-image-col img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.room-content-col {
    flex: 1; /* Takes equal space */
    padding: 20px 0; /* Add some vertical padding */
}

.room-title {
    font-family: 'Gilda Display', serif;
    font-size: 2.5em;
    color: #333;
    margin-bottom: 10px;
}

.room-rating .stars-inline {
    color: #ffd700; /* Gold for stars */
    font-size: 1.2em;
}

.room-rating .text-muted {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.9em;
}

.room-description {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1em;
    color: #555;
    line-height: 1.6;
    margin-bottom: 25px;
}

.room-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.room-features-list li {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1em;
    color: #666;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.room-features-list li i {
    color: #a37b42; /* Accent color for icons */
    font-size: 1.2em;
    width: 25px; /* Fixed width for alignment */
    text-align: center;
}

.btn-view-room {
    background-color: #a37b42;
    color: #fff;
    padding: 12px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 1em;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: inline-block;
    border: 1px solid #a37b42;
}

.btn-view-room:hover {
    background-color: #8c6a38;
    border-color: #8c6a38;
    color: #fff;
    transform: translateY(-2px);
}

.btn-primary-alt {
    background-color: transparent; /* No fill */
    color: #a37b42; /* Text color */
    border: 2px solid #a37b42; /* Accent color border */
    padding: 12px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 1em;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.btn-primary-alt:hover {
    background-color: #a37b42; /* Fill with accent color on hover */
    color: #fff; /* Text color changes to white on hover */
    border-color: #a37b42; /* Border color remains accent */
    transform: translateY(-3px);
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .room-showcase-item {
        flex-direction: column; /* Stack on smaller screens */
        text-align: center !important; /* Center text when stacked */
        gap: 30px;
    }
    .room-showcase-item.reverse-layout {
        flex-direction: column; /* Also stack on smaller screens */
    }
    .room-content-col {
        padding: 0; /* Remove horizontal padding when stacked */
    }
    .room-features-list {
        text-align: left; /* Keep features list left-aligned even when card is centered */
        max-width: 400px; /* Constrain width for readability */
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .top-rooms-section .section-title {
        font-size: 2.2em;
    }
    .top-rooms-section .section-description {
        font-size: 1em;
    }
    .room-title {
        font-size: 2em;
    }
    .room-image-col {
        min-width: 100%; /* Image takes full width */
    }
}

@media (max-width: 575.98px) {
    .top-rooms-section {
        padding: 40px 0; /* Further reduce padding for small screens */
    }
    .top-rooms-section .section-title {
        font-size: 1.8em; /* Smaller title for very small screens */
        margin-bottom: 25px;
    }
    .top-rooms-section .section-description {
        font-size: 0.9em; /* Smaller description text */
        margin: 0 auto 30px auto; /* Adjust margin */
        padding: 0 15px; /* Add some horizontal padding to the description */
    }
    .room-showcase-wrapper {
        gap: 40px; /* Reduce space between room items */
    }
    .room-showcase-item {
        gap: 20px; /* Reduce space between image and content */
        margin-bottom: 20px; /* Smaller bottom margin */
    }
    .room-title {
        font-size: 1.8em; /* Smaller room title */
        margin-bottom: 5px;
    }
    .room-rating .stars-inline {
        font-size: 1.1em;
    }
    .room-rating .text-muted {
        font-size: 0.85em;
    }
    .room-description {
        font-size: 0.95em; /* Smaller room description */
        margin-bottom: 20px;
    }
    .room-features-list li {
        font-size: 0.9em; /* Smaller feature text */
        margin-bottom: 8px;
    }
    .room-features-list li i {
        font-size: 1.1em;
        width: 20px; /* Slightly narrower icon width */
    }
    .btn-view-room,
    .btn-primary-alt {
        padding: 10px 25px; /* Smaller padding for buttons */
        font-size: 0.9em; /* Smaller button text */
    }

}

/* Journey Section Style */
/* Alternative Grand Journey Section with Slider */
/* Alternative Grand Journey Section with Slider */
.grand-journey-section-slider {
    padding: 80px 0;
    background-color: #fcfcfc;
    text-align: center;
}

.grand-journey-section-slider .section-title {
    font-family: 'Gilda Display', serif;
    font-size: 2.8em;
    color: #333;
    margin-bottom: 20px;
}

.grand-journey-section-slider .section-description {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1em;
    color: #666;
    max-width: 900px;
    margin: 0 auto 60px auto;
    line-height: 1.6;
}

.journey-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden; /* Hide overflowing slides */
    padding-bottom: 50px; /* Space for pagination */
}

.journey-slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Smooth sliding transition */
}

.journey-slide-item {
    flex: 0 0 100%; /* Each slide takes full width of container */
    width: 100%; /* Ensure width for proper sliding */
    max-width: 700px; /* Max width for individual slide card */
    margin: 0 auto; /* Center the card within its 100% width slot */
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex; /* Make image and content side-by-side on desktop */
    flex-direction: column; /* Stack on mobile */
    align-items: center;
}

.moment-image-v2 {
    flex: 0 0 50%;
    max-height: 350px;
    overflow: hidden;
}

.moment-image-v2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 15px 15px 0 0; /* Top corners for mobile/stacked */
}

.moment-content-v2 {
    flex: 0 0 50%;
    padding: 30px; /* Adjusted padding for tighter look */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align content within card */
    text-align: center; /* Ensure text is centered by default */
}

/* Re-using existing moment typography and button styles */
/* Note: moment-time-v2 and moment-text-v2 are now superseded by new classes,
   but kept here for existing general styles if they are used elsewhere. */
.moment-time-v2 { /* This class is no longer used in the new HTML, but retained for reference */
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1em;
    font-weight: 600;
    color: #a37b42;
    margin-bottom: 10px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.moment-title-v2 {
    font-family: 'Gilda Display', serif;
    font-size: 2em; /* This is the room/moment title */
    color: #333;
    margin-bottom: 10px; /* Adjusted margin */
    line-height: 1.3;
}

/* --- Styles for the New Content Look (like Room Cards) --- */

/* Price Display */
.journey-price-display {
    display: flex;
    align-items: baseline; /* Align text at the baseline */
    gap: 10px; /* Space between original and current price */
    margin-bottom: 15px; /* Space below price */
}

.journey-price-display .original-price {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1em;
    color: #999;
    text-decoration: line-through; /* Strikethrough for original price */
    font-weight: 500;
}

.journey-price-display .current-price {
    font-family: 'Gilda Display', serif; /* Use a more prominent font for current price */
    font-size: 1.8em; /* Larger font size */
    color: #a37b42; /* Accent color for current price */
    font-weight: 700;
}

.journey-price-display .price-unit {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.6em; /* Smaller for /Night or /Experience */
    color: #555;
    text-transform: uppercase;
    margin-left: 5px;
}

/* Short Description */
.moment-short-description {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1em; /* Adjusted font size */
    color: #444;
    line-height: 1.5;
    margin-bottom: 25px; /* Space above amenities */
    min-height: 45px; /* Ensure consistent height for description if short */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Amenities Grid */
/* Amenities Section */
.amenities-section {
    padding: 80px 0;
    background-color: #fff; /* White background for this section */
    text-align: center;
}

.amenities-section .section-title {
    font-family: 'Gilda Display', serif;
    font-size: 2.8em;
    color: #333;
    margin-bottom: 50px; /* Space below title */
}

/* Initial Grid of Icons */
.amenities-grid-icons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Responsive grid columns */
    gap: 30px; /* Space between grid items */
    max-width: 1200px; /* Max width for the grid */
    margin: 0 auto 50px auto; /* Center the grid and add space below */
}

.amenities-grid-icons .amenity-item {
    display: flex;
    flex-direction: column; /* Stack icon and text */
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: #f9f9f9; /* Light background for each item */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.amenities-grid-icons .amenity-item:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.amenities-grid-icons .amenity-item i {
    font-size: 2.5em; /* Large icons */
    color: #a37b42; /* Accent color for icons */
    margin-bottom: 15px;
}

.amenities-grid-icons .amenity-item p {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1em;
    color: #333;
    font-weight: 500;
    margin: 0;
    line-height: 1.2;
}

/* All Amenities Toggle Button */
.all-amenities-toggle {
    margin-bottom: 50px; /* Space above detailed amenities or bottom of section */
}

.btn-all-amenities {
    background-color: transparent; /* Transparent background */
    color: #a37b42; /* Accent color for text */
    border: 2px solid #a37b42; /* Accent color border */
    padding: 12px 30px;
    border-radius: 5px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 1.05em;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Space between text and icon */
    text-decoration: none; /* In case it's an anchor */
}

.btn-all-amenities:hover {
    background-color: #a37b42; /* Fill with accent color on hover */
    color: #fff; /* White text on hover */
    transform: translateY(-3px); /* Lift effect */
}

.btn-all-amenities i {
    font-size: 0.9em;
    transition: transform 0.3s ease;
}

.btn-all-amenities.active i {
    transform: rotate(180deg); /* Rotate arrow when active (content shown) */
}

/* Detailed Amenities Section (Initially Hidden) */
.amenities-details-hidden {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.7s ease-out, opacity 0.7s ease-out; /* Smooth transition for height and opacity */
    opacity: 0;
    visibility: hidden; /* Hide completely when not visible */
}

.amenities-details-visible {
    max-height: 1000px; /* Adjust this value to be greater than the content's max possible height */
    opacity: 1;
    visibility: visible;
    transition: max-height 0.7s ease-in, opacity 0.7s ease-in;
}


.amenities-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive columns for detailed features */
    gap: 40px; /* Space between feature categories */
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 20px; /* Space above the detailed grid itself */
    text-align: left; /* Align text within categories to left */
}

.feature-category {
    background-color: #fcfcfc;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align icon and heading to start */
}

.feature-category i {
    font-size: 2.2em;
    color: #a37b42;
    margin-bottom: 15px;
}

.feature-category h3 {
    font-family: 'Gilda Display', serif;
    font-size: 1.6em;
    color: #333;
    margin-bottom: 15px;
    border-bottom: 2px solid #f0f0f0; /* Subtle line under category title */
    padding-bottom: 10px;
    width: 100%; /* Make border extend full width */
}

.feature-category ul {
    list-style: none; /* Remove default list bullets */
    padding: 0;
    margin: 0;
    width: 100%;
}

.feature-category ul li {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1em;
    color: #555;
    margin-bottom: 10px;
    line-height: 1.4;
    position: relative;
    padding-left: 20px; /* Space for custom bullet */
}

.feature-category ul li:last-child {
    margin-bottom: 0;
}

.feature-category ul li::before {
    content: "\2022"; /* Unicode for a solid bullet point */
    color: #a37b42; /* Accent color for bullet */
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em; /* Pull bullet to the left */
    position: absolute;
    left: 0;
    top: 0;
}


/* Responsive Adjustments */
@media (max-width: 991px) {
    .amenities-grid-icons {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 20px;
    }
    .amenities-section .section-title {
        font-size: 2.4em;
        margin-bottom: 40px;
    }
}

@media (max-width: 767px) {
    .amenities-section {
        padding: 60px 0;
    }
    .amenities-section .section-title {
        font-size: 2em;
        margin-bottom: 30px;
    }
    .amenities-grid-icons {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 15px;
        margin-bottom: 40px;
    }
    .amenities-grid-icons .amenity-item i {
        font-size: 2em;
    }
    .amenities-grid-icons .amenity-item p {
        font-size: 0.95em;
    }
    .btn-all-amenities {
        font-size: 0.95em;
        padding: 10px 25px;
        margin-bottom: 30px;
    }
    .amenities-features-grid {
        grid-template-columns: 1fr; /* Stack categories on small screens */
        gap: 30px;
        padding: 0 15px; /* Add horizontal padding for mobile */
    }
    .feature-category {
        padding: 25px;
    }
    .feature-category h3 {
        font-size: 1.4em;
    }
    .feature-category ul li {
        font-size: 0.95em;
    }
}



/* Top Rooms Style  */

/* Alternative Grand Journey Section with Slider (Top Rooms) */
.grand-journey-section-slider {
    padding: 80px 0;
    background-color: #fcfcfc;
    text-align: center;
}

.grand-journey-section-slider .section-title {
    font-family: 'Gilda Display', serif;
    font-size: 2.8em;
    color: #333;
    margin-bottom: 20px;
}

.grand-journey-section-slider .section-description {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1em;
    color: #666;
    max-width: 900px;
    margin: 0 auto 60px auto;
    line-height: 1.6;
}

.journey-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden; /* Hide overflowing slides */
    padding-bottom: 50px; /* Space for pagination */
}

.journey-slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Smooth sliding transition */
}

.journey-slide-item {
    flex: 0 0 100%; /* Each slide takes full width of container */
    width: 100%; /* Ensure width for proper sliding */
    max-width: 700px; /* Max width for individual slide card */
    margin: 0 auto; /* Center the card within its 100% width slot */
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex; /* IMPORTANT: Keep this as flex */
    flex-direction: column; /* Default: Stack image on top for mobile */
    align-items: stretch; /* Allow children (image & content) to stretch to fill height */
    min-height: 480px; /* Increased min-height for consistent card size on mobile too, allows image to stretch more */
}

.moment-image-v2 {
    flex: 1; /* Allow image container to grow and shrink vertically on mobile */
    max-height: 350px; /* Cap height on smaller screens or when stacking, still allows stretching below this */
    overflow: hidden;
    display: flex; /* Use flex to control the image inside */
    align-items: center; /* Center image vertically */
    justify-content: center; /* Center image horizontally */
}

.moment-image-v2 img {
    width: 100%;
    height: 100%; /* Make image take full height of its container */
    object-fit: cover; /* Cover the area without distorting aspect ratio */
    display: block;
    border-radius: 15px 15px 0 0; /* Top corners for mobile/stacked */
}

.moment-content-v2 {
    flex: 1; /* Allow content to grow and shrink vertically on mobile */
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align content within card */
    text-align: center;
    justify-content: space-between; /* Distribute space between elements if needed */
}

.moment-title-v2 {
    font-family: 'Gilda Display', serif;
    font-size: 2em; /* This is the room/moment title */
    color: #333;
    margin-bottom: 10px; /* Adjusted margin */
    line-height: 1.3;
}

/* --- Styles for the New Content Look (like Room Cards) --- */

/* Price Display */
.journey-price-display {
    display: flex;
    align-items: baseline; /* Align text at the baseline */
    gap: 10px; /* Space between original and current price */
    margin-bottom: 15px; /* Space below price */
}

.journey-price-display .original-price {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1em;
    color: #999;
    text-decoration: line-through; /* Strikethrough for original price */
    font-weight: 500;
}

.journey-price-display .current-price {
    font-family: 'Gilda Display', serif; /* Use a more prominent font for current price */
    font-size: 1.8em; /* Larger font size */
    color: #a37b42; /* Accent color for current price */
    font-weight: 700;
}

.journey-price-display .price-unit {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.6em; /* Smaller for /Night or /Experience */
    color: #555;
    text-transform: uppercase;
    margin-left: 5px;
}

/* Short Description */
.moment-short-description {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1em; /* Adjusted font size */
    color: #444;
    line-height: 1.5;
    margin-bottom: 25px; /* Space above amenities */
    min-height: 45px; /* Ensure consistent height for description if short */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Amenities Grid */
.moment-amenities {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns */
    gap: 15px; /* Space between amenity items */
    width: 100%; /* Take full width of content area */
    margin-bottom: 30px; /* Space above button */
    padding: 0 10px; /* Slightly reduce padding on sides for amenities */
}

.amenity-item {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between icon and text */
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.95em;
    color: #555;
    font-weight: 500;
}

.amenity-item i {
    color: #a37b42; /* Accent color for icons */
    font-size: 1.2em; /* Slightly larger icons */
}

/* Button with Arrow */
.btn-moment-v2 {
    background-color: #a37b42;
    color: #fff;
    border: 2px solid #a37b42;
    padding: 10px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 0.95em;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    display: inline-flex; /* Use flex to align icon */
    align-items: center;
    gap: 8px; /* Space between text and arrow */
}

.btn-moment-v2:hover {
    background-color: #8c6a38;
    border-color: #8c6a38;
    transform: translateY(-3px);
}

.btn-moment-v2 i {
    font-size: 0.9em; /* Adjust arrow size */
    transition: transform 0.3s ease;
}

.btn-moment-v2:hover i {
    transform: translateX(3px); /* Slide arrow on hover */
}

/* Slider Navigation Buttons */
.journey-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    color: #fff;
    border: none;
    padding: 15px 10px;
    cursor: pointer;
    z-index: 10;
    font-size: 1.5em;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.journey-slider-nav:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.journey-slider-nav.prev {
    left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.journey-slider-nav.next {
    right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Slider Pagination Dots */
.journey-slider-pagination {
    position: absolute;
    bottom: 10px; /* Adjust based on your layout */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.journey-slider-dot {
    width: 10px;
    height: 10px;
    background-color: #bbb; /* Inactive dot color */
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.journey-slider-dot.active {
    background-color: #a37b42; /* Active dot color */
    transform: scale(1.2);
}

/* Responsive adjustments for slider */
@media (min-width: 768px) {
    .journey-slide-item {
        flex-direction: row; /* Side-by-side image and content on desktop */
        align-items: stretch; /* Make sure both image and content stretch to equal height */
        min-height: 550px; /* Adjusted: Increased min-height for the entire card for desktop view. This will make both image and content areas taller. */
    }

    .moment-image-v2 {
        flex: 0 0 50%; /* Image takes 50% width */
        max-height: none; /* Remove max-height when side-by-side */
        height: auto; /* Allow height to be determined by flex container */
        border-radius: 15px 0 0 15px; /* Left corners rounded for image */
    }

    .moment-image-v2 img {
        height: 100%; /* Ensure image fills the vertical space */
    }

    .moment-content-v2 {
        flex: 0 0 50%; /* Content takes 50% width */
        text-align: left; /* Align content left on desktop */
        align-items: flex-start; /* Align content to the start on desktop */
    }
}

@media (max-width: 767px) {
    .grand-journey-section-slider .section-title {
        font-size: 2.2em;
    }
    .grand-journey-section-slider .section-description {
        font-size: 1em;
        margin-bottom: 40px;
    }
    .journey-slide-item {
        max-width: 95%; /* Make cards slightly wider on small screens */
        margin: 0 auto;
        /* min-height: is already defined outside this media query for all devices */
    }
    .moment-image-v2 {
        max-height: 250px; /* Maintain a reasonable max height for stacked images on small screens */
    }
    .moment-content-v2 {
        padding: 25px; /* Slightly less padding on mobile */
    }
    .moment-title-v2 {
        font-size: 1.8em;
    }
    .journey-price-display .current-price {
        font-size: 1.5em; /* Smaller price on mobile */
    }
    .moment-short-description {
        font-size: 0.9em;
        margin-bottom: 20px;
    }
    .moment-amenities {
        grid-template-columns: 1fr; /* Stack amenities in single column on small mobile */
        gap: 10px;
        margin-bottom: 25px;
    }
    .btn-moment-v2 {
        font-size: 0.85em;
        padding: 8px 20px;
    }
    .journey-slider-nav {
        padding: 10px 8px; /* Smaller nav buttons on mobile */
        font-size: 1.2em;
    }
    .journey-slider-pagination {
        bottom: 5px; /* Adjust pagination for smaller screens */
    }
}

/* Footer Style */

.main-footer {
    background-color: #1a1a1a; /* Deep dark background */
    color: #e0e0e0; /* Light text color for contrast */
    padding: 70px 0 30px;
    font-family: 'Barlow Condensed', sans-serif;
    line-height: 1.6;
}

.main-footer .footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
    gap: 40px;
    margin-bottom: 50px;
}

.main-footer .footer-col {
    padding: 10px;
}

/* Footer Logo & Description */
.footer-logo {
    display: block;
    margin-bottom: 25px;
}

.footer-logo img {
    max-height: 50px; /* Adjust as needed */
    filter: brightness(1.2); /* Slightly brighten logo if needed */
}

.footer-description {
    font-size: 0.95em;
    color: #b0b0b0;
    margin-bottom: 30px;
}

/* Social Links */
.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    color: #e0e0e0;
    font-size: 1.5em;
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
    color: #a37b42; /* Accent color on hover */
    transform: translateY(-3px);
}

/* Footer Headings */
.footer-heading {
    font-family: 'Gilda Display', serif;
    font-size: 1.6em;
    color: #fff;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 10px;
}

.footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px; /* Underline effect */
    height: 3px;
    background-color: #a37b42; /* Accent color underline */
    border-radius: 2px;
}

.footer-subheading {
    font-family: 'Gilda Display', serif;
    font-size: 1.2em;
    color: #fff;
    margin-top: 25px;
    margin-bottom: 10px;
}

/* Quick Links */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #b0b0b0;
    text-decoration: none;
    font-size: 1em;
    transition: color 0.3s ease;
    display: flex; /* For icon alignment if added */
    align-items: center;
}

.footer-links a:hover {
    color: #a37b42; /* Accent color on hover */
}

/* Contact Information */
.contact-col p {
    margin-bottom: 12px;
    font-size: 0.95em;
    color: #b0b0b0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.contact-col p i {
    color: #a37b42; /* Accent color for icons */
    font-size: 1.1em;
    margin-top: 3px; /* Align icon better with text */
}

.footer-bottom .developed-by .smith-it-icon {
    width: 19px; /* Adjust icon size as needed */
    height: 19px;
    vertical-align: middle; /* Aligns the icon nicely with the text */
    margin-right: 2px; /* Adds a small space between the icon and the text */
    /* You might need to add 'filter: invert(1);' here if your icon is dark
       and the footer background is dark, making the icon invisible.
       Only uncomment/add if necessary based on your icon's color. */
    /* filter: invert(1); */
}

.btn-subscribe {
    background-color: #a37b42;
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.btn-subscribe:hover {
    background-color: #8c6a38;
}

/* Footer Bottom Section (Copyright & Legal Links) */
.footer-bottom {
    border-top: 1px solid #333; /* Subtle separator */
    padding-top: 30px;
    margin-top: 50px;
    text-align: center;
    font-size: 0.9em;
    color: #b0b0b0;
}

.footer-bottom p {
    margin-bottom: 10px;
}

.footer-bottom .bottom-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

.footer-bottom .bottom-links a {
    color: #b0b0b0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-bottom .bottom-links a:hover {
    color: #a37b42;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .main-footer .footer-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 30px;
    }
    .footer-heading {
        font-size: 1.5em;
        margin-bottom: 25px;
    }
}

@media (max-width: 768px) {
    .main-footer {
        padding: 50px 0 20px;
    }
    .main-footer .footer-grid {
        grid-template-columns: 1fr; /* Stack columns on mobile */
        text-align: center; /* Center content */
        gap: 40px;
    }
    .footer-heading {
        text-align: center; /* Center heading */
        font-size: 1.8em;
        padding-bottom: 15px;
    }
    .footer-heading::after {
        left: 50%; /* Center underline */
        transform: translateX(-50%);
    }
    .about-col, .links-col, .contact-col, .newsletter-col {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center content in columns */
    }
    .footer-logo {
        margin: 0 auto 20px;
    }
    .social-links {
        justify-content: center;
    }
    .footer-links, .contact-col p {
        text-align: center; /* Center list items and paragraphs */
        align-items: center; /* Center icons with text */
    }
    .newsletter-form {
        flex-direction: column; /* Stack input and button */
        width: 100%; /* Take full width */
        max-width: 300px; /* Limit overall form width */
        margin: 20px auto 0;
    }
    .newsletter-form input, .newsletter-form button {
        width: 100%;
    }
    .footer-bottom {
        text-align: center;
    }
    .footer-bottom .bottom-links {
        flex-direction: column; /* Stack bottom links */
        gap: 10px;
    }
}



/* =================================================================================
============================About Us Hero Section=================================== */
/* About Us Hero Section */
.about-hero {
    position: relative;
    width: 100%;
    height: 500px; /* Adjust height as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff; /* Text color */
    text-align: center; /* This centers the flex items horizontally */
    overflow: hidden; /* Ensure content doesn't spill out */
}

.about-hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the area without distortion */
    object-position: center; /* Centers the image within its container */
    z-index: 0; /* Place the image behind everything else */
}

.about-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay for text readability */
    z-index: 1; /* Place overlay above background image */
}

.about-hero-content {
    position: relative;
    z-index: 2; /* Place content above the overlay */
    max-width: 800px; /* NEW: Added max-width here as .container is removed */
    width: 100%; /* NEW: Ensure it takes full available width up to max-width */
    padding: 0 20px; /* NEW: Add horizontal padding to prevent text from touching edges on small screens */
    /* text-align: center; is good here for title/subtitle if they were inline-block */
    /* but flex centering on .about-hero handles the block itself. */
}

.about-hero-title {
    font-family: 'Gilda Display', serif; /* Or your chosen heading font */
    font-size: 3.8em;
    margin-bottom: 15px;
    font-weight: bold;
    color: #fff;
    text-align: center; /* Keep this to center the text within its own block */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* Subtle shadow for better contrast */
}

.about-hero-subtitle {
    font-family: 'Barlow Condensed', sans-serif; /* Or your chosen body font */
    font-size: 1.5em;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0;
    text-align: center; /* Keep this to center the text within its own block */
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .about-hero {
        height: 450px;
    }
    .about-hero-title {
        font-size: 3em;
    }
    .about-hero-subtitle {
        font-size: 1.3em;
    }
}

@media (max-width: 768px) {
    .about-hero {
        height: 400px;
    }
    .about-hero-title {
        font-size: 2.5em;
    }
    .about-hero-subtitle {
        font-size: 1.1em;
    }
    .about-hero-content {
        padding: 0 15px; /* Adjusted padding for smaller screens */
    }
}

@media (max-width: 576px) {
    .about-hero {
        height: 350px;
    }
    .about-hero-title {
        font-size: 2em;
    }
    .about-hero-subtitle {
        font-size: 1em;
    }
    .about-hero-content {
        padding: 0 10px; /* Even smaller padding for very small screens */
    }
}




/* lagacY Section Style */

.legacy-alt2-section {
    padding: 100px 0; /* Generous vertical padding */
    background-color: #ffffff; /* White background for the section */
}

.legacy-alt2-image-wrapper {
    position: relative;
    padding: 15px; /* Creates a subtle border effect with background */
    background-color: #f0f0f0; /* Light background behind the image */
    border-radius: 8px; /* Rounded corners for the wrapper */
    overflow: hidden; /* Ensures image respects border-radius */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* Subtle shadow for depth */
    margin-bottom: 30px; /* Space on small screens when columns stack */
}

.legacy-alt2-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 5px; /* Slightly rounded corners for the image itself */
}

.legacy-alt2-content {
    padding: 20px; /* Internal padding for the text content block */
    /* text-align: left; - Default for paragraphs, but good to be explicit */
}

.legacy-alt2-title {
    font-family: 'Gilda Display', serif;
    font-size: 2.8em;
    color: #1a1a1a;
    margin-bottom: 25px;
    line-height: 1.2;
    text-align: left; /* Ensure title is left-aligned */
    position: relative; /* For potential pseudo-elements */
}

/* Optional: Add a subtle underline or accent for the title */
.legacy-alt2-title::after {
    content: '';
    display: block;
    width: 60px; /* Length of the accent line */
    height: 3px; /* Thickness of the accent line */
    background-color: #a37b42; /* Your primary accent color */
    margin-top: 15px; /* Space between title and line */
    margin-left: 0; /* Align with left-aligned text */
}


.legacy-alt2-paragraph {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1em;
    color: #444;
    line-height: 1.7;
    margin-bottom: 18px;
    text-align: justify; /* Justify text for a clean block */
}

.legacy-alt2-paragraph:last-child {
    margin-bottom: 0;
}

/* Responsive Adjustments */
@media (min-width: 992px) {
    .legacy-alt2-section {
        padding: 120px 0;
    }
    .legacy-alt2-image-wrapper {
        margin-bottom: 0; /* No margin when columns are side-by-side */
    }
    .legacy-alt2-content {
        padding: 0 30px; /* Adjust horizontal padding between columns */
    }
    .legacy-alt2-title {
        font-size: 3.2em;
    }
}

@media (max-width: 767.98px) { /* Adjust for Bootstrap's md breakpoint */
    .legacy-alt2-section {
        padding: 60px 0;
    }
    .legacy-alt2-image-wrapper {
        margin-bottom: 30px; /* Restore margin when stacking */
    }
    .legacy-alt2-content {
        text-align: center; /* Center content when stacked */
        padding: 0 15px;
    }
    .legacy-alt2-title {
        font-size: 2.5em;
        text-align: center; /* Center title when stacked */
    }
    .legacy-alt2-title::after {
        margin-left: auto; /* Center accent line when title is centered */
        margin-right: auto;
    }
    .legacy-alt2-paragraph {
        text-align: left; /* Keep paragraphs left-aligned for readability even when main block is centered */
    }
}

@media (max-width: 575.98px) { /* Adjust for Bootstrap's sm breakpoint */
    .legacy-alt2-section {
        padding: 40px 0;
    }
    .legacy-alt2-image-wrapper {
        padding: 10px;
    }
    .legacy-alt2-title {
        font-size: 2em;
        margin-bottom: 15px;
    }
    .legacy-alt2-title::after {
        margin-top: 10px;
    }
    .legacy-alt2-paragraph {
        font-size: 0.95em;
    }
}





/* --- Pillars of Excellence Section Style--- */

.pillars-section {
    background-color: #f8f9fa; /* Light background for the section */
    padding: 80px 0;
}

.pillars-section .section-title {
    margin-bottom: 5rem; /* More space below the heading */
}

/* Pillar Card Styling */
.pillar-card {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px; /* Slightly more rounded corners */
    padding: 40px 25px; /* Increased padding */
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother transition */
    display: flex;
    flex-direction: column; /* For equal height content */
    height: 100%;
    position: relative;
    overflow: hidden; /* To ensure nothing overflows the rounded corners */
}

.pillar-card:hover {
    transform: translateY(-15px); /* Lift significantly on hover */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18); /* Deeper shadow on hover */
    background-color: #ffffff; /* Ensure background stays white */
}

/* Icon Wrapper Styling */
.pillar-icon-wrapper {
    width: 80px; /* Larger circular icon background */
    height: 80px;
    border-radius: 50%;
    background-color: #eaf7f8; /* Light teal background for icon */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px auto; /* Center and space below icon */
    transition: all 0.4s ease;
    flex-shrink: 0; /* Prevent it from shrinking */
}

.pillar-card:hover .pillar-icon-wrapper {
    background-color: #007B8A; /* Deep Teal background on hover */
    transform: scale(1.00); /* Slight scale effect on hover */
}

/* Icon (the Font Awesome icon) */
.pillar-card .pillar-icon { /* Targeting the i element inside the wrapper */
    font-size: 2em; /* Larger icon size */
    color: #007B8A; /* Deep Teal color for the icon */
    transition: color 0.4s ease;
}

.pillar-card:hover .pillar-icon {
    color: #fff; /* White icon on hover */
}

/* Heading for the Pillar Card */
.pillar-card h3 {
    font-family: 'Gilda Display', serif;
    font-size: 1.6em; /* More prominent heading */
    color: #333;
    margin-bottom: 15px;
    line-height: 1.3;
    flex-shrink: 0; /* Prevent title from shrinking */
}

/* Paragraph Text for the Pillar Card */
.pillar-card p {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.05em; /* Slightly larger text */
    color: #666;
    line-height: 1.7;
    flex-grow: 1; /* Allows text to grow for equal card height */
    margin-bottom: 0; /* Remove default paragraph margin-bottom if needed */
}

/* Responsive Adjustments for Pillars Section */
@media (max-width: 991.98px) {
    .pillars-section {
        padding: 60px 0;
    }
    .pillar-card {
        padding: 30px 20px;
    }
    .pillar-icon-wrapper {
        width: 70px;
        height: 70px;
        font-size: 2.5em;
        margin-bottom: 20px;
    }
    .pillar-card h3 {
        font-size: 1.4em;
    }
    .pillar-card p {
        font-size: 1em;
    }
}

@media (max-width: 767.98px) {
    .pillars-section {
        padding: 50px 0;
    }
    .pillars-section .section-title {
        margin-bottom: 3rem;
    }
    .pillar-card {
        padding: 25px 15px;
        margin-bottom: 1.5rem; /* Add spacing between cards on smaller screens */
    }
    .pillar-icon-wrapper {
        width: 60px;
        height: 60px;
        font-size: 2em;
        margin-bottom: 15px;
    }
    .pillar-card h3 {
        font-size: 1.3em;
    }
    .pillar-card p {
        font-size: 0.95em;
    }
}

@media (max-width: 575.98px) {
    .pillars-section .section-title {
        font-size: 1.8em;
    }
    .pillar-card {
        padding: 20px 15px;
    }
    .pillar-icon-wrapper {
        width: 55px;
        height: 55px;
        font-size: 1.8em;
    }
    .pillar-card h3 {
        font-size: 1.2em;
    }
    .pillar-card p {
        font-size: 0.9em;
    }
}


/* Guest review Style */

/* Guest Reviews Section */
.guest-reviews-section {
    padding: 80px 0;
    background-color: #F8F8F8; /* A slightly off-white background */
}

/* Re-using .section-title from previous sections for consistency */
/* .section-title is already defined in previous CSS, so ensure it's loaded */

/* Swiper Container for Reviews */
.review-swiper {
    width: 100%;
    padding-bottom: 50px; /* Space for pagination dots */
    /* Ensure no row class here, Swiper handles its own layout */
}

.swiper-slide {
    display: flex; /* Ensures content within slide is centered if needed */
    justify-content: center;
    align-items: stretch; /* Make cards stretch to same height within slide */
}

.review-card {
    background-color: #fff;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* --- Key for Equal Height Cards --- */
    display: flex; /* Make review-card a flex container */
    flex-direction: column; /* Stack its children vertically */
    height: 100%; /* Ensure the card takes full height of its slide */
    /* --- End Key for Equal Height Cards --- */
}

.review-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
}

.review-rating {
    color: #FFD700; /* Gold color for stars */
    font-size: 1.3em;
    margin-bottom: 15px;
}

.review-rating .fas {
    margin: 0 2px;
}

.review-rating i {
    margin-right: 2px;
}

.review-quote {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1em;
    font-style: italic;
    color: #444;
    line-height: 1.6;
    margin-bottom: 20px;
    
    /* --- Key for Equal Height Cards --- */
    flex-grow: 1; /* Allow the quote to grow and fill available space */
    display: flex; /* Make it a flex container to center text vertically if needed */
    align-items: center; /* Vertically align text within its space */
    justify-content: center; /* Horizontally align text within its space */
    /* --- End Key for Equal Height Cards --- */
}

.reviewer-info {
    border-top: 1px solid #eee; /* Separator for reviewer info */
    padding-top: 15px;
}

.reviewer-name {
    font-family: 'Gilda Display', serif;
    font-size: 1.2em;
    color: #007B8A; /* Deep Teal */
    margin-bottom: 5px;
}

.review-date {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.9em;
    color: #888;
}


/* Swiper Navigation Arrows (re-using styles from Rooms carousel if applicable) */
.swiper-button-next,
.swiper-button-prev {
    color: #007B8A; /* Deep Teal accent */
    font-size: 1.8em;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Swiper Pagination Customization */
.guest-reviews-section .swiper-pagination {
    position: relative; /* Make it relative to stay below content */
    margin-top: 40px; /* Space from the reviews */
    bottom: auto !important; /* Override Swiper's default bottom positioning */
}



/* Swiper Pagination Dots (re-using styles) */
.swiper-pagination-bullet {
    background: #ccc;
    opacity: 0.7;
}

.swiper-pagination-bullet-active {
    background: #007B8A; /* Deep Teal accent */
    opacity: 1;
}




/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .guest-reviews-section {
        padding: 60px 0;
    }
    .review-card {
        padding: 25px;
    }
    .review-quote {
        font-size: 1em;
    }
    .swiper-button-next,
    .swiper-button-prev {
        width: 40px;
        height: 40px;
        font-size: 1.5em;
    }
}

@media (max-width: 767.98px) {
    .guest-reviews-section {
        padding: 40px 0;
    }
    .review-card {
        margin-bottom: 0; /* No external margin needed for stacked cards within swiper */
    }
    .review-rating {
        font-size: 1.1em;
    }
    .review-quote {
        font-size: 0.95em;
    }
    .reviewer-name {
        font-size: 1em;
    }
    .btn-secondary-alt {
        font-size: 1em;
        padding: 8px 18px;
    }
    .swiper-button-next,
    .swiper-button-prev {
        display: none; /* Hide arrows on smaller screens, rely on touch */
    }
    .review-swiper {
        padding-bottom: 40px; /* Adjust pagination space */
    }
}

@media (max-width: 575.98px) {
    .review-card {
        padding: 20px;
    }
    .review-quote {
        font-size: 0.9em;
    }
    .reviewer-name {
        font-size: 0.9em;
    }
    .review-date {
        font-size: 0.8em;
    }
}






/* ===============================================================================================================
==========================================Rooms & Suites Page Styles============================================== */

/* Hero Section */
.rooms-hero-section {
    background: 
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), /* Dark overlay for text readability */
        url('https://images.pexels.com/photos/1838640/pexels-photo-1838640.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') /* Your background image */
        center center / cover /* Position and size: centered, covers the element */
        no-repeat; /* Do not repeat the image */
    color: #fff; /* White text color */
    padding: 150px 0; /* Increased top/bottom padding for more vertical space */
    text-align: center; /* Center align text */
    background-attachment: fixed; /* Optional: Creates a parallax scroll effect */
}

.rooms-hero-section .hero-title {
    font-family: 'Gilda Display', serif;
    font-size: 4.5em;
    margin-bottom: 15px;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}

.rooms-hero-section .hero-subtitle {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.5em;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}

/* Individual Room Type Sections */
.room-type-section {
    padding: 80px 0;
}

.room-type-alt-bg {
    background-color: #F8F8F8; /* Light background for alternating sections */
}

.room-image-wrapper {
    /* Optional: if you want to add padding around the image, or a border effect */
    padding: 10px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.room-image-wrapper img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px; /* Slightly smaller radius inside wrapper */
}

.room-details-content {
    padding-left: 30px; /* Space from image when on left */
    padding-right: 0; /* No padding on right by default */
}

.room-type-section .flex-row-reverse .room-details-content {
    padding-left: 0; /* Remove padding when image is on right */
    padding-right: 30px; /* Add padding on right */
    text-align: right; /* Align text right for this layout */
}


.room-type-section .flex-row-reverse .room-amenities {
    text-align: right; /* Align amenities right */
}
.room-type-section .flex-row-reverse .room-amenities li {
    justify-content: flex-end; /* Align icon and text to right */
}

.room-heading {
    font-family: 'Gilda Display', serif;
    font-size: 3em;
    color: #2C3E50; /* Dark Navy/Charcoal */
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}



.room-price-lg {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 2.2em;
    font-weight: bold;
    color: #007B8A; /* Deep Teal accent */
    margin-bottom: 20px;
}

.room-price-lg .old-price-lg {
    font-size: 0.7em;
    color: #888;
    text-decoration: line-through;
    margin-right: 10px;
}

.room-description {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1em;
    color: #5F6C7E; /* Medium Gray/Blue-Gray */
    line-height: 1.8;
    margin-bottom: 30px;
}

.room-amenities {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 2 columns for amenities */
    gap: 15px 20px;
    margin-bottom: 40px;
    padding-left: 0; /* Remove default padding for list */
}

.room-amenities li {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1em;
    color: #5F6C7E;
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none; /* Remove default list style */
}

.room-amenities li i {
    color: #007B8A; /* Deep Teal accent for icons */
    font-size: 1.2em;
}

.btn-primary-room {
    background-color: var(--accent-gold);
    color: #FFFFFF;
    padding: 12px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1em;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: inline-flex; /* Keep inline-flex for icon + text */
    align-items: center;
    gap: 10px;
    border: none;
    /* Optional: If you want to explicitly center it when it's not 100% width,
       and its parent is text-align: center; (like your room-details-content on mobile)
       you might need 'margin: 0 auto;' if its parent is NOT text-align: center */
}

.btn-primary-room:hover {
    background-color: var(--accent-gold); /* Darker Teal on hover */
    transform: translateY(-3px);
    color: #fff;
}

/* Call to Action / Explore More Section */
.explore-more-cta {
    background-color: #EBEFF3; /* Light blue-gray background */
    color: #2C3E50; /* Dark text */
    padding: 60px 0;
}

.explore-more-cta .cta-heading {
    font-family: 'Gilda Display', serif;
    font-size: 2.5em;
    margin-bottom: 15px;
    color: #2C3E50;
}

.explore-more-cta .cta-text {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.2em;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .rooms-hero-section {
        padding: 80px 0;
    }
    .rooms-hero-section .hero-title {
        font-size: 3.5em;
    }
    .rooms-hero-section .hero-subtitle {
        font-size: 1.2em;
    }
    .room-type-section {
        padding: 60px 0;
    }
    .room-details-content {
        padding-left: 0; /* Remove padding when stacked */
        padding-right: 0;
        text-align: center; /* Center text when stacked */
        margin-top: 30px; /* Space between image and text */
    }
    .room-type-section .flex-row-reverse .room-details-content {
        padding-right: 0; /* Remove padding when stacked */
        text-align: center; /* Center text when stacked */
    }
    .room-heading {
        font-size: 2.5em;
        margin-bottom: 15px;
    }



    .room-amenities {
        grid-template-columns: 1fr; /* Stack amenities on mobile */
        text-align: left; /* Keep text left-aligned even if heading is centered */
        max-width: 400px; /* Constrain width of amenities list */
        margin-left: auto;
        margin-right: auto;
    }
    .room-type-section .flex-row-reverse .room-amenities {
        text-align: left; /* Align amenities left when stacked */
    }
    .room-type-section .flex-row-reverse .room-amenities li {
        justify-content: flex-start; /* Align icon and text to left */
    }
    .btn-primary-room {
        width: 100%; /* Make button full width of its parent */
        /* Re-consider this max-width. 300px or even 250px is often better.
           If you want it to always be full width when stacked, remove max-width entirely here. */
        max-width: 300px; /* Changed from 100px to a more reasonable size */
        margin: 0 auto; /* Center the button when it's less than 100% width and its parent is centered */
    }

    .explore-more-cta .cta-heading {
        font-size: 2em;
    }
    .explore-more-cta .cta-text {
        font-size: 1.1em;
    }
}

@media (max-width: 767.98px) {
    .rooms-hero-section {
        padding: 60px 0;
    }
    .rooms-hero-section .hero-title {
        font-size: 3em;
    }
    .rooms-hero-section .hero-subtitle {
        font-size: 1.1em;
    }
    .room-type-section {
        padding: 40px 0;
    }
    .room-heading {
        font-size: 2em;
    }
    .room-price-lg {
        font-size: 1.8em;
    }
    .room-description {
        font-size: 1em;
    }
    .room-amenities li {
        font-size: 0.95em;
    }
    .btn-primary-room {
        padding: 10px 25px; /* Slightly reduce padding */
        font-size: 1em; /* Slightly reduce font size */
    }
    .explore-more-cta {
        padding: 40px 0;
    }
    .explore-more-cta .cta-heading {
        font-size: 1.8em;
    }
    .explore-more-cta .cta-text {
        font-size: 1em;
    }
}

@media (max-width: 575.98px) {
    .rooms-hero-section .hero-title {
        font-size: 2.5em;
    }
    .rooms-hero-section .hero-subtitle {
        font-size: 1em;
    }
    .room-heading {
        font-size: 1.8em;
    }
    .room-price-lg {
        font-size: 1.5em;
    }
    .room-image-wrapper {
        padding: 5px;
    }
    .btn-primary-room {
        padding: 10px 25px;
        font-size: 0.9em;
    }
}


/* Policy Section Style */

.policies-section {
    background-color: #fcfcfc; /* A light, clean background color */
    color: #495057;
}

.policies-accordion {
    max-width: 600px;
    margin: auto;
}

.policies-item {
    padding: 0;
}

.policies-button {
    font-family: 'Gilda Display', serif; /* Or another serif font */
    font-size: 28px;
    color: #333;
    background-color: transparent;
    border: none;
    padding: 0;
    text-align: left;
    width: 100%;
    cursor: pointer;
    position: relative;
    padding-right: 30px; /* Space for the chevron icon */
    font-weight: 400;
}

/* Override Bootstrap's default button styles */
.accordion-button:focus {
    box-shadow: none;
    border: none;
}

.accordion-button:not(.collapsed) {
    background-color: transparent;
    color: #333;
    box-shadow: none;
}

/* Style for the chevron icon */
.accordion-button::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f078"; /* FontAwesome chevron-down icon */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease-in-out;
    background-image: none; /* Remove Bootstrap's default chevron image */
    font-size: 18px;
}



.accordion-button.collapsed::after {
    transform: translateY(-50%) rotate(0deg);
}

.accordion-button:not(.collapsed)::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Accordion body content */
.policies-body {
    padding: 20px 0 0 0;
}

.policy-list {
    list-style-type: none;
    padding-left: 0;
    line-height: 1.8;
}

.policy-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    font-size: 16px;
    color: #555;
}

.policy-list li::before {
    content: "\2022"; /* Unicode for a bullet point */
    color: #c4002f; /* Adjust to your brand color */
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

.policy-title {
    font-weight: bold;
}

.sub-policy-list {
    list-style-type: none;
    padding-left: 20px;
    line-height: 1.6;
}

.sub-policy-list li {
    padding-left: 15px;
}

.sub-policy-list li::before {
    content: "\2022";
    color: #777;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .policies-button {
        font-size: 24px;
        margin-bottom: 20px;
    }
}




/* Gallery Section */

/* Gallery Hero Section */
.gallery-hero-section {
    position: relative;
    padding: 150px 0; /* Adjust padding as needed */
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    min-height: 600px; /* Ensures a decent height */
}

.gallery-hero-section .hero-title {
    font-family: 'Gilda Display', serif;
    font-size: 3.5em;
    font-weight: 400;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.gallery-hero-section .hero-subtitle {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.3em;
    font-weight: 300;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

/* Gallery Content Section */
.gallery-content-section {
    background-color: #f8f9fa; /* Light background for the section */
}

/* Gallery Filter Buttons */
.gallery-filters {
    gap: 15px; /* Space between buttons */
}

.gallery-filter-btn {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1em;
    font-weight: 600;
    padding: 10px 25px;
    border: 1px solid #007B8A; /* Deep Teal border */
    color: #007B8A; /* Deep Teal text */
    background-color: transparent;
    border-radius: 5px;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.gallery-filter-btn:hover,
.gallery-filter-btn.active {
    background-color: #007B8A; /* Deep Teal background on hover/active */
    color: #fff; /* White text on hover/active */
    border-color: #007B8A;
    box-shadow: 0 4px 8px rgba(0, 123, 138, 0.2); /* Subtle shadow */
}

/* Gallery Grid & Items */
.gallery-grid {
    overflow: hidden; /* Important for filter transitions if not using Isotope */
}

.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Smooth transition for show/hide and hover */
}

.gallery-item img {
    display: block;
    width: 100%;
    height: 280px; /* Fixed height for consistent grid */
    object-fit: cover; /* Ensures images cover the area */
    transition: transform 0.3s ease;
}

/* Only keep the image zoom on hover, remove overlay specific styles */
.gallery-item:hover img {
    transform: scale(1.05); /* Slight zoom on image hover */
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .gallery-hero-section {
        padding: 120px 0;
        min-height: 350px;
    }
    .gallery-hero-section .hero-title {
        font-size: 2.8em;
    }
    .gallery-hero-section .hero-subtitle {
        font-size: 1.1em;
    }
    .gallery-filter-btn {
        font-size: 1em;
        padding: 8px 20px;
    }
    .gallery-item img {
        height: 250px;
    }
}

@media (max-width: 767.98px) {
    .gallery-hero-section {
        padding: 80px 0;
        min-height: 300px;
    }
    .gallery-hero-section .hero-title {
        font-size: 2.2em;
    }
    .gallery-hero-section .hero-subtitle {
        font-size: 1em;
    }
    .gallery-filters {
        gap: 10px;
        margin-bottom: 40px !important;
    }
    .gallery-filter-btn {
        font-size: 0.9em;
        padding: 7px 15px;
    }
    .gallery-item img {
        height: 220px;
    }
}

@media (max-width: 575.98px) {
    .gallery-hero-section {
        padding: 60px 0;
        min-height: 250px;
    }
    .gallery-hero-section .hero-title {
        font-size: 1.8em;
    }
    .gallery-hero-section .hero-subtitle {
        font-size: 0.9em;
    }
    .gallery-filter-btn {
        font-size: 0.85em;
        padding: 6px 12px;
    }
    .gallery-item img {
        height: 200px;
    }
}



/* =============================================Hall Room Page++++++++++++++++++++++
====================================================================================
==================================================================================== */

/* Hall Room Hero Section */
.hallroom-hero-section {
    position: relative;
    padding: 150px 0; /* Adjust padding as needed */
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    min-height: 400px; /* Ensures a decent height */
}

.hallroom-hero-section .hero-title {
    font-family: 'Gilda Display', serif;
    font-size: 3.5em;
    font-weight: 400;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.hallroom-hero-section .hero-subtitle {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.3em;
    font-weight: 300;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

/* Hall Overview Section */
.hall-overview-section {
    background-color: #ffffff; /* White background for overview */
}
.hall-overview-section .section-title,
.hall-features-section .section-title,
.capacity-section .section-title {
    font-family: 'Gilda Display', serif;
    font-size: 2.5em;
    color: #333; /* Darker text for main titles */
}
.hall-overview-section p {
    color: #555;
    line-height: 1.7;
}

/* Custom Button Style (for consistency) */
.custom-btn {
    background-color: #007B8A; /* Deep Teal */
    border-color: #007B8A;
    color: #fff;
    padding: 12px 30px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 1.1em;
    transition: all 0.3s ease;
    text-transform: uppercase;
}
.custom-btn:hover {
    background-color: #005f6b; /* Darker Teal on hover */
    border-color: #005f6b;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Hall Features Section */
.hall-features-section {
    background-color: #f8f9fa; /* Light grey background */
}
.feature-card {
    background-color: #fff;
    border: 1px solid #eee;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
}
.feature-icon {
    font-size: 3em;
    color: #007B8A; /* Deep Teal icon color */
    margin-bottom: 15px;
}
.feature-title {
    font-family: 'Gilda Display', serif;
    font-size: 1.5em;
    color: #333;
    margin-bottom: 10px;
}
.feature-description {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 300;
    color: #666;
    line-height: 1.6;
}

.hall-rooms-overview {
    background-color: #f8f9fa; /* Light background for the section */
}

/* Individual Hall Room Card */
.hall-room-card {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure cards are same height */
}

.hall-room-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
}

.hall-room-card img {
    width: 100%;
    height: 220px; /* Fixed height for consistent images */
    object-fit: cover;
    display: block;
    border-bottom: 1px solid #eee;
}

.hall-room-card .p-4 {
    flex-grow: 1; /* Allows content area to expand */
    display: flex;
    flex-direction: column;
}

.hall-room-title {
    font-family: 'Gilda Display', serif;
    font-size: 1.6em;
    color: #007B8A; /* Deep Teal */
    margin-bottom: 0.5rem;
}

.hall-room-description {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 300;
    color: #555;
    line-height: 1.6;
    margin-bottom: 1rem;
    flex-grow: 1; /* Allows description to take available space */
}

.hall-room-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1rem;
}

.hall-room-features .feature-item {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 400;
    font-size: 0.95em;
    color: #666;
    background-color: #f0f0f0;
    padding: 5px 10px;
    border-radius: 3px;
    white-space: nowrap; /* Prevent breaking feature text */
}

.hall-room-features .feature-item i {
    color: #007B8A; /* Deep Teal icon */
    margin-right: 5px;
}

.hall-room-price {
    font-family: 'Barlow Condensed', sans-serif;
    text-align: right; /* Align price to the right */
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.hall-room-price .price-label {
    font-weight: 300;
    font-size: 0.95em;
    color: #888;
    margin-right: 5px;
}

.hall-room-price .price-amount {
    font-weight: 700;
    font-size: 1.8em;
    color: #d9534f; /* A bold color for the price, like red */
}

.hall-room-price .currency {
    font-size: 0.7em;
    vertical-align: super;
}

.hall-room-price .per-unit {
    font-weight: 400;
    font-size: 0.8em;
    color: #666;
    margin-left: 5px;
}

/* Responsive adjustments for new Hall Room Cards */
@media (max-width: 991.98px) {
    .hall-room-card img {
        height: 200px;
    }
    .hall-room-title {
        font-size: 1.5em;
    }
    .hall-room-price .price-amount {
        font-size: 1.6em;
    }
}

@media (max-width: 767.98px) {
    .hall-rooms-overview .section-title {
        font-size: 2em;
    }
    .hall-room-card img {
        height: 180px;
    }
    .hall-room-title {
        font-size: 1.4em;
    }
    .hall-room-price .price-amount {
        font-size: 1.5em;
    }
    .hall-room-card {
        margin-bottom: 20px; /* Add some space between cards on smaller screens */
    }
}

@media (max-width: 575.98px) {
    .hall-rooms-overview .section-title {
        font-size: 1.8em;
    }
    .hall-room-card img {
        height: 160px;
    }
    .hall-room-title {
        font-size: 1.3em;
    }
    .hall-room-description {
        font-size: 0.9em;
    }
    .hall-room-features .feature-item {
        font-size: 0.85em;
        padding: 4px 8px;
    }
    .hall-room-price .price-amount {
        font-size: 1.3em;
    }
}




    /*======================== ===============================================
    =======================Contact Page =====================================
    =========================================================================*/


    /* Contact Hero Section (Reuses hallroom-hero-section styles) */
.contact-hero-section {
    position: relative;
    padding: 150px 0; /* Adjust padding as needed */
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    min-height: 600px; /* Ensures a decent height */
}

/* Contact Content Section */
.contact-content-section {
    background-color: #ffffff;
}

.contact-info-item {
    padding: 15px 0;
    border-bottom: 1px solid #eee; /* Subtle separator for info items */
}

.contact-info-item:last-child {
    border-bottom: none;
}

.contact-info-item .icon-wrapper {
    background-color: #eaf7f8; /* Light teal background */
    color: #007B8A; /* Deep Teal icon color */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    flex-shrink: 0; /* Prevent icon from shrinking */
}

.contact-info-item .info-title {
    font-family: 'Gilda Display', serif;
    font-size: 1.3em;
    color: #333;
    margin-bottom: 5px;
}

.contact-info-item .info-text {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 300;
    color: #555;
    line-height: 1.5;
}

/* Social Icon Buttons */
.social-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #007B8A; /* Deep Teal */
    color: #fff;
    font-size: 1.2em;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-icon-btn:hover {
    background-color: #005f6b; /* Darker Teal */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Contact Form Card */
.contact-form-card {
    background-color: #fff;
    border: 1px solid #e0e0e0;
}

.contact-form-card .form-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
}

.contact-form-card .form-control {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 400;
    border-color: #ddd;
    padding: 10px 15px;
    border-radius: 5px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form-card .form-control:focus {
    border-color: #007B8A;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 138, 0.25);
}

/* Map Section */
.map-section {
    background-color: #f8f9fa; /* Light grey background */
}

.map-container {
    overflow: hidden;
    border: 1px solid #ddd;
}

.map-container iframe {
    display: block; /* Remove extra space below iframe */
}


/* Responsive adjustments */
@media (max-width: 991.98px) {
    .contact-hero-section {
        padding: 120px 0;
        min-height: 350px;
    }
    .contact-hero-section .hero-title {
        font-size: 2.8em;
    }
    .contact-hero-section .hero-subtitle {
        font-size: 1.1em;
    }
    .contact-content-section .section-title,
    .map-section .section-title {
        font-size: 2em;
    }
    .contact-info-item .info-title {
        font-size: 1.2em;
    }
}

@media (max-width: 767.98px) {
    .contact-hero-section {
        padding: 80px 0;
        min-height: 300px;
    }
    .contact-hero-section .hero-title {
        font-size: 2.2em;
    }
    .contact-hero-section .hero-subtitle {
        font-size: 1em;
    }
    .contact-content-section .section-title,
    .map-section .section-title {
        font-size: 1.8em;
    }
    .contact-info-item .icon-wrapper {
        width: 45px;
        height: 45px;
        font-size: 1.3em;
    }
    .contact-info-item .info-title {
        font-size: 1.1em;
    }
    .map-container iframe {
        height: 400px;
    }
}

@media (max-width: 575.98px) {
    .contact-hero-section {
        padding: 60px 0;
        min-height: 250px;
    }
    .contact-hero-section .hero-title {
        font-size: 1.8em;
    }
    .contact-hero-section .hero-subtitle {
        font-size: 0.9em;
    }
    .contact-content-section .section-title,
    .map-section .section-title {
        font-size: 1.6em;
    }
    .contact-info-item .icon-wrapper {
        width: 40px;
        height: 40px;
        font-size: 1.2em;
    }
    .contact-info-item .info-title {
        font-size: 1em;
    }
    .contact-info-item .info-text {
        font-size: 0.9em;
    }
    .social-icon-btn {
        width: 35px;
        height: 35px;
        font-size: 1em;
    }
    .contact-form-card {
        padding: 30px !important;
    }
    .map-container iframe {
        height: 300px;
    }
}

/* =========================================================================================
=============================Restaurant Page Design ========================================
============================================================================================*/
.lead {
    font-family: var(--font-heading); /* Use Gilda Display for lead paragraphs */
    font-size: 1.5em;
    color: var(--text-dark);
}

.section-heading {
    font-size: 3.5em;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1.5em;
    color: var(--text-dark);
}

/* --- Buttons (General) --- */
.btn-primary {
    background-color: var(--accent-gold);
    border-color: var(--accent-gold);
    color: var(--text-light); /* Light text on gold button */
    padding: 12px 30px;
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 5px;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--accent-gold-dark);
    border-color: var(--accent-gold-dark);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* --- Header / Navigation (Basic Styling - adjust as per your main site header) --- */
.main-header .navbar {
    background-color: var(--bg-white) !important; /* Assuming you want white navbar */
    border-bottom: 1px solid var(--border-color-light);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.main-header .navbar-brand {
    font-family: var(--font-heading);
    font-size: 1.8em;
    color: var(--text-dark) !important;
}

.main-header .nav-link {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1.1em;
    text-transform: uppercase;
    color: var(--text-dark) !important;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.main-header .nav-link:hover,
.main-header .nav-link.active {
    color: var(--accent-gold) !important;
}

/* --- Restaurant Hero Section --- */
.restaurant-hero-section {
    min-height: 600px; /* Adjust as needed */
    position: relative;
    color: var(--text-light); /* Light text on hero */
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); /* Text shadow for readability */
}

.restaurant-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Dark overlay for better text contrast */
    z-index: 1;
}

.restaurant-hero-section > .container {
    position: relative;
    z-index: 2;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: 2.5em; /* Large, impressive title */
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-light);
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.8em;
    font-weight: 400;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.9);
}

.hero-btn {
    font-size: 1.2em;
    padding: 15px 40px;
}

/* --- About Restaurant Section --- */
.about-restaurant-section {
    background-color: var(--bg-white); /* White background for this section */
    padding: 100px 0;
}

.about-restaurant-section .section-heading {
    text-align: left; /* Align heading to left within its column */
    margin-bottom: 30px;
    font-size: 3em; /* Slightly smaller for internal section */
    color: var(--text-dark);
}

.about-restaurant-section img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.restaurant-features li {
    font-size: 1.1em;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.restaurant-features li i {
    color: var(--accent-gold); /* Gold checkmarks */
    font-size: 1.2em;
}

/* --- Our Menu Section --- */
.menu-section {
    background-color: var(--primary-bg); /* Light background for menu section */
    padding: 80px 0;
}

.menu-section .section-heading {
    margin-bottom: 60px;
    color: var(--text-dark);
}

.menu-section .nav-pills .nav-link {
    font-family: var(--font-body);
    font-size: 1.3em;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-dark);
    background-color: transparent;
    border-radius: 0;
    padding: 10px 25px;
    margin: 0 5px;
    transition: all 0.3s ease;
   
}

.menu-section .nav-pills .nav-link:hover {
    color: var(--accent-gold);
    border-color: rgba(199, 146, 62, 0.5); /* Lighter gold underline on hover */
}

.menu-section .nav-pills .nav-link.active {
    color: var(--accent-gold);
    background-color: transparent; /* No background on active */
    border-color: var(--accent-gold); /* Solid gold underline on active */
    font-weight: 700;
}

.menu-item {
    background-color: var(--bg-white); /* White background for menu items */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex; /* Ensure flex behavior */
    align-items: center; /* Align items vertically */
    justify-content: space-between; /* Space out title/desc and price */
    min-height: 100px; /* Ensure consistent height for menu items */
}

.menu-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.menu-item-title {
    font-family: var(--font-heading);
    font-size: 1.5em;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.menu-item-desc {
    font-size: 0.95em;
    color: var(--text-muted);
}

.menu-item-price {
    font-family: var(--font-heading);
    font-size: 1.6em;
    font-weight: 600;
    color: var(--accent-gold); /* Gold price */
    white-space: nowrap; /* Prevent price from wrapping */
    margin-left: 15px; /* Space from description */
}









/* --- Responsive Adjustments --- */
@media (max-width: 1200px) {
    .hero-title {
        font-size: 4.5em;
    }
    .hero-subtitle {
        font-size: 1.6em;
    }
    .section-heading {
        font-size: 3em;
    }
    .about-restaurant-section .section-heading {
        font-size: 2.8em;
    }
}

@media (max-width: 991.98px) {
    .restaurant-hero-section {
        min-height: 500px;
    }
    .hero-title {
        font-size: 3.8em;
    }
    .hero-subtitle {
        font-size: 1.4em;
    }
    .about-restaurant-section .section-heading {
        text-align: center;
        margin-bottom: 40px;
    }
    .about-restaurant-section img {
        margin-top: 30px;
    }
    .menu-section .nav-pills .nav-link {
        font-size: 1.1em;
        padding: 8px 15px;
    }
    .menu-item-title {
        font-size: 1.3em;
    }
    .menu-item-price {
        font-size: 1.4em;
    }

    /* Reservation form responsiveness handled by its existing CSS */
}

@media (max-width: 767.98px) {
    .restaurant-hero-section {
        min-height: 400px;
    }
    .hero-title {
        font-size: 3em;
    }
    .hero-subtitle {
        font-size: 1.2em;
    }
    .hero-btn {
        padding: 10px 25px;
        font-size: 1.1em;
    }
    .section-heading {
        font-size: 2.5em;
        margin-bottom: 40px;
    }
    .about-restaurant-section {
        padding: 70px 0;
    }
    .about-restaurant-section .section-heading {
        font-size: 2.2em;
    }
    .menu-section {
        padding: 60px 0;
    }
    .menu-section .nav-pills {
        flex-wrap: wrap;
    }
    .menu-section .nav-pills .nav-item {
        flex: 1 1 50%; /* Two columns for tabs on small screens */
        text-align: center;
        margin-bottom: 5px;
    }
    .menu-section .nav-pills .nav-link {
        display: block;
        width: 100%;
        margin: 0; /* Remove horizontal margin */
    }
    .menu-item {
        flex-direction: column; /* Stack title/desc and price */
        align-items: flex-start;
    }
    .menu-item-price {
        margin-left: 0;
        margin-top: 10px; /* Space between content and price */
    }

}

@media (max-width: 575.98px) {
    .restaurant-hero-section {
        min-height: 350px;
    }
    .hero-title {
        font-size: 2.5em;
    }
    .hero-subtitle {
        font-size: 1em;
    }
    .section-heading {
        font-size: 2em;
    }
    .about-restaurant-section {
        padding: 50px 0;
    }
    .menu-section {
        padding: 40px 0;
    }
    .main-footer {
        padding: 30px 0;
    }
}