/* General Styling */
html {
    scroll-behavior: smooth; /* Enable smooth scrolling */
}
.carousel {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.carousel-inner {
    display: flex;
    width: 100%;
    height: 100%;
    animation: slide 108s infinite; /* Duration of the carousel rotation */
}

.carousel-image {
    width: 100%;
    flex-shrink: 0;
    object-fit: cover;
    display: none; /* Hide all images by default */
}

.desktop-image {
    display: block; /* Display desktop images by default */
}

.mobile-image {
    display: none; /* Hide mobile images by default */
}

/* Mobile responsive display */
@media (max-width: 768px) {
    .desktop-image {
        display: none;
    }
    .mobile-image {
        display: block;
    }
}

/* Animation for sliding effect */
@keyframes slide {
    0% { transform: translateX(0%); }
    8.33% { transform: translateX(-100%); } /* Moves to the next image */
    16.66% { transform: translateX(-200%); }
    25% { transform: translateX(-300%); }
    33.33% { transform: translateX(-400%); }
    41.66% { transform: translateX(-500%); }
    50% { transform: translateX(-600%); }
    58.33% { transform: translateX(-700%); }
    66.66% { transform: translateX(-800%); }
    75% { transform: translateX(-900%); }
    83.33% { transform: translateX(-1000%); }
    91.66% { transform: translateX(-1100%); }
    100% { transform: translateX(-1200%); } /* End of the loop */
}

/* Offer Image Styling */
#offer-image-container img {
    width: 100%; /* Full width of the container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    object-fit: contain; /* Ensure the full image is visible without cropping */
    display: block; /* Ensure proper alignment */
    margin: 0 auto; /* Center the image */
}

/* Offer Text Styling */
#offer-text-container {
    margin-top: 10px;
    font-size: 1em;
    text-align: center;
    color: #2a2a2a; /* Dark gray text */
}

/* Offer Video Styling */
#offer-video-container video {
    width: 100%;
    border-radius: 8px;
    margin-top: 10px;
}

body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background-color: #cce7f0; /* Soft Sky Blue */
    color: #2a2a2a; /* Dark gray text */
    display: flex;
    flex-direction: column;
    height: 100vh; /* Full viewport height */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}
.login-link {
    color: #083d5b; /* Deep Navy */
    font-weight: bold;
    text-decoration: none;
}

.login-link:hover {
    text-decoration: underline;
    color: #0056b3; /* Lighter shade for hover effect */
}
.room-links p {
    margin: 5px 0;
}

.room-links a {
    color: #083d5b; /* Deep Navy */
    font-weight: bold;
    text-decoration: none;
}

.room-links a:hover {
    text-decoration: underline;
    color: #0056b3; /* Lighter shade on hover */
}
/* Room Category Styling */
.room-category {
    margin-bottom: 20px;
}

.room-category p {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Room Images Layout */
.room-images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.room-images img {
    width: calc(50% - 5px); /* Two images per row */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.room-images img:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Slightly larger shadow */
}

/* Review-Specific Styles */
.review-link {
    color: #083d5b; /* Deep Navy */
    text-decoration: none;
    font-weight: bold;
}

.review-link:hover {
    text-decoration: underline; /* Optional underline on hover */
}
.cancel-link {
    color: #083d5b; /* Deep Navy to match the theme */
    text-decoration: none;
    font-weight: bold;
}

.cancel-link:hover {
    text-decoration: underline;
    color: #005f8d; /* Slightly lighter shade on hover */
}

/* Map-Specific Styles */
.map-link {
    color: #083d5b; /* Deep Navy */
    text-decoration: none;
    font-weight: bold;
}

.map-link:hover {
    text-decoration: underline; /* Optional: Underline on hover */
}

/* Navigation Menu Styling */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #083d5b; /* Deep Navy */
    padding: 10px 20px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Logo Styling */
.logo {
    width: 50px; /* Adjust as needed */
    height: auto;
    margin-right: 10px;
    vertical-align: middle; /* Align with text */
}

.hotel-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2em;
    color: #ffffff; /* White text */
    font-weight: 600;
    white-space: nowrap; /* Prevent wrapping */
}

/* Navigation List */
.nav-list {
    display: flex; /* Horizontal for desktop */
    flex-direction: row;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item {
    margin: 0 10px;
}

/* Desktop Navigation Bar */
@media (min-width: 768px) {
    .nav-link {
        text-decoration: none; /* Remove underline */
        font-family: 'Montserrat', sans-serif;
        color: #ffffff; /* White text */
        font-size: 0.8em; /* Slightly smaller text for icons */
        display: flex; /* Align icon and text horizontally */
        align-items: center;
    }

    .nav-icon {
        width: 20px; /* Reduce icon size */
        height: 20px;
        margin-right: 5px;
    }
}

/* Mobile Navigation: Hamburger Menu */
@media (max-width: 768px) {
    .nav-list {
        display: none;
        position: absolute;
        top: 60px;
        right: 0;
        background-color: #083d5b; /* Deep Navy dropdown */
        width: 100%;
        flex-direction: column; /* Vertical layout */
        padding: 10px 0;
        z-index: 1000;
    }

    .hamburger-menu {
        display: flex;
        flex-direction: column;
        cursor: pointer;
    }

    .hamburger-menu span {
        background: #ffffff; /* White hamburger lines */
        height: 3px;
        width: 25px;
        margin: 4px 0;
    }

    .nav-list.show {
        display: flex; /* Show dropdown menu */
    }

    .nav-item {
        margin: 10px 0; /* Spacing for vertical menu items */
        text-align: left; /* Align dropdown items to the left */
        padding-left: 20px; /* Add some indentation for better readability */
    }

    .nav-link {
        font-size: 1em; /* Maintain original size for mobile */
        color: #ffffff; /* Keep text white */
        text-decoration: none; /* Remove underline */
    }

    .nav-link:hover {
        text-decoration: underline; /* Optional: Add underline on hover */
    }

    .nav-icon {
        width: 24px; /* Original icon size for mobile */
        height: 24px;
        margin-right: 10px; /* Add spacing between icon and text */
    }
}

/* Body Layout: Common for Mobile and Desktop */
.body-container {
    display: flex;
    flex-direction: column; /* Stack vertically on small screens */
    gap: 10px; /* Adjust space between sections */
    margin: 20px 0; /* Top and bottom margin */
    padding-left: 20px; /* Consistent left margin */
    padding-right: 20px; /* Consistent right margin */
}

/* Left and Central Windows */
.left-window,
.central-window {
    border-radius: 8px; /* Rounded corners */
    margin-bottom: 10px; /* Consistent gap between stacked sections */
}

.left-window {
    background-color: #e0f7fa; /* Powder Blue */
    color: #2a2a2a; /* Dark text */
    text-align: center;
}

.central-window {
    background-color: #dceaf4; /* Muted Cool Blue */
    color: #2a2a2a; /* Dark text */
    overflow-y: auto; /* Scrollable content */
}

/* Ensure Full Viewport Width and Margin Application */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #cce7f0; /* Soft Sky Blue */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Container Styling for Desktop */
@media (min-width: 769px) {
    .body-container {
        flex-direction: row; /* Align sections horizontally */
        justify-content: space-between; /* Distribute sections */
        gap: 10px; /* Space between sections */
    }

    .left-window {
        flex: 0 0 20%; /* Fixed width for the left section */
        border-radius: 8px; /* Rounded corners */
    }

    .central-window {
        flex: 1; /* Take up the remaining space */
        border-radius: 8px; /* Rounded corners */
    }
}

/* Ensure Mobile Layout is Optimized */
@media (max-width: 768px) {
    .body-container {
        flex-direction: column; /* Stack sections vertically */
        gap: 10px; /* Add space between stacked sections */
        padding: 10px; /* Provide some padding around the content */
    }

    .left-window,
    #offer-window {
        flex: 0 0 auto; /* Allow shrinking */
        padding: 5px; /* Adjust padding */
        overflow: hidden; /* Prevent scrolling */
        text-align: center; /* Center content */
        max-height: 150px; /* Restrict height for mobile */
        display: flex; /* Enable flexible alignment */
        flex-direction: column; /* Stack content vertically */
        border-radius: 0; /* Remove any rounding from container */
        box-shadow: none; /* Ensure no shadow is applied to container */
    }

    #offer-image-container {
        flex: 2; /* Allocate 2/3 of the height for the image */
        height: 100px; /* Explicitly set height */
        display: flex; /* Center the image inside this container */
        justify-content: center; /* Center image horizontally */
        align-items: center; /* Center image vertically */
        padding: 0; /* Remove padding */
        margin: 0; /* Remove margin */
        border-radius: 0; /* Remove rounded corners from container */
        box-shadow: none !important; /* Remove box-shadow from container */
    }

    #offer-image-container img {
        width: auto; /* Adjust width automatically */
        height: 100%; /* Fit image within container height */
        object-fit: contain; /* Ensure the full image is visible without cropping */
        border-radius: 0 !important; /* Remove rounded corners on mobile */
        box-shadow: none !important; /* Remove box-shadow on mobile */
        display: block; /* Ensure proper alignment */
        margin: 0; /* Remove unnecessary margin */
    }

    #offer-text-container {
        flex: 1; /* Allocate 1/3 of the height for the text */
        height: 50px; /* Explicitly set height */
        font-size: 0.9em; /* Slightly smaller text size for mobile */
        padding: 5px; /* Add padding for readability */
        white-space: normal; /* Allow text wrapping */
        overflow: hidden; /* Prevent text overflow */
        text-overflow: ellipsis; /* Add ellipsis for overflowing text */
        text-align: center; /* Center-align text */
        display: flex; /* Enable flexible alignment */
        justify-content: center; /* Center text horizontally */
        align-items: center; /* Center text vertically */
    }

    .left-window video,
    #offer-video-container {
        display: none; /* Hide video on mobile */
    }

    .central-window {
        flex: 1; /* Take up remaining space */
        padding: 10px; /* Add some padding */
        border-radius: 8px; /* Rounded corners */
        background-color: #dceaf4; /* Consistent background */
    }
}
#chatbot-animation-container {
    position: fixed; /* Fixes the position relative to the viewport */
    bottom: 20px; /* Distance from the bottom edge */
    right: 20px; /* Distance from the right edge */
    width: 150px; /* Adjust the size of the container */
    cursor: pointer; /* Make the container clickable */
    text-align: center; /* Center-align the content */
    z-index: 1000; /* Ensure it's on top of other elements */
}

#chatbot-animation {
    width: 100%; /* Ensure the animation fits the container width */
    height: 150px; /* Adjust height for animation */
}

#chatbot-animation-container p {
    font-size: 14px;
    color: #ffffff; /* White text */
    background-color: #083d5b; /* Deep Navy background */
    padding: 5px 10px; /* Padding for the badge */
    border-radius: 15px; /* Rounded badge style */
    display: inline-block; /* Adjust badge size to fit text */
    margin-top: -10px;
    position: relative; /* Ensure it positions relative to its container */
    z-index: 998; /* Place it below the chatbot widget (if overlapping) */
}