.about-section {
    background-image: url('https://bmdhotelandsuites.com/storage/general/banner2.jpg'); 
    background-size: cover; /* Scales the image to cover the section */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents repeating */
    background-attachment: fixed; /* Fixed background for desktop (optional) */
    color: #ffffff; /* Text color for readability, adjust as needed */
    padding: 60px 20px; /* Default padding */
    min-height: 500px; /* Default height for desktop */
    position: relative; /* For overlay positioning */
}

/* Overlay for better text readability */
.about-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3); /* White overlay with 70% opacity */
    z-index: 1;
}

/* Ensure content is above the overlay */
.about-section > * {
    position: relative;
    z-index: 2;
}

/* Media Query for Tablets (768px - 1024px) */
@media (max-width: 1024px) {
    .about-section {
        background-attachment: scroll; /* Fixed background may not work well on tablets */
        min-height: 400px; /* Slightly smaller height */
        padding: 40px 15px; /* Reduced padding */
        background-size: cover; /* Ensure image still covers */
    }
}

/* Media Query for Mobile Devices (up to 767px) */
@media (max-width: 767px) {
    .about-section {
        background-attachment: scroll; /* Scroll for mobile compatibility */
        min-height: 300px; /* Smaller height for mobile */
        padding: 30px 10px; /* Further reduced padding */
        background-size: contain; /* Adjust to contain for better mobile scaling */
        background-position: top center; /* Align to top for better focus */
    }
    .about-section::before {
        background: rgba(0, 0, 0, 0.6); /* Slightly darker overlay for mobile readability */
    }
}

/* Media Query for Very Small Screens (up to 480px) */
@media (max-width: 480px) {
    .about-section {
        min-height: 250px; /* Minimal height for small screens */
        padding: 20px 10px; /* Minimal padding */
        font-size: 0.9em; /* Slightly smaller text for better fit */
    }
}

.row.align-items-center {
    background-color: #f7f7f7; /* Light gray background, suitable for black text */
    border-radius: 20px; /* Subtle rounded corners */
    padding: 20px; /* Padding to prevent content from touching edges */
    color: #000000; /* Black text for maximum contrast */
    position: relative; /* Ensure proper stacking with other elements */
}

/* Media Query for Tablets (768px - 1024px) */
@media (max-width: 1024px) {
    .row.align-items-center {
        border-radius: 10px; /* Slightly smaller radius for tablets */
        padding: 15px; /* Reduced padding */
    }
}

/* Media Query for Mobile Devices (up to 767px) */
@media (max-width: 767px) {
    .row.align-items-center {
        border-radius: 8px; /* Smaller radius for mobile */
        padding: 10px; /* Further reduced padding */
    }
}

/* Media Query for Very Small Screens (up to 480px) */
@media (max-width: 480px) {
    .row.align-items-center {
        border-radius: 6px; /* Minimal radius for small screens */
        padding: 8px; /* Minimal padding */
        font-size: 0.9em; /* Slightly smaller text for better fit */
    }
}

.tab-content {
    background: rgba(0, 0, 0, 0.6); /* Semi-transparent dark background (60% opacity) */
    color: #ffffff; /* White text for contrast, adjust if black text is required */
    padding: 20px; /* Padding for content spacing */
    border-radius: 8px; /* Subtle rounded corners for modern look */
    position: relative; /* Ensure proper stacking */
}

/* Media Query for Tablets (768px - 1024px) */
@media (max-width: 1024px) {
    .tab-content {
        background: rgba(0, 0, 0, 0.55); /* Slightly more transparent for tablets */
        padding: 15px; /* Reduced padding */
        border-radius: 6px; /* Smaller radius */
    }
}

/* Media Query for Mobile Devices (up to 767px) */
@media (max-width: 767px) {
    .tab-content {
        background: rgba(0, 0, 0, 0.5); /* More transparent for mobile */
        padding: 10px; /* Further reduced padding */
        border-radius: 4px; /* Minimal radius */
    }
}

/* Media Query for Very Small Screens (up to 480px) */
@media (max-width: 480px) {
    .tab-content {
        background: rgba(0, 0, 0, 0.45); /* Most transparent for small screens */
        padding: 8px; /* Minimal padding */
        font-size: 0.9em; /* Slightly smaller text for better fit */
    }
}

.cta-inner {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.6) 0%, rgba(255, 215, 0, 0.5) 100%); /* Gradient gold background */
    border-radius: 25px; /* Rounded corners as specified */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(212, 175, 55, 0.2); /* Subtle shadow with gold tint */
    color: #ffffff; /* White text for contrast */
    padding: 30px; /* Generous padding for elegance */
    position: relative; /* For stacking */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth animation */
    overflow: hidden; /* Ensure effects stay within border radius */
}

/* Subtle hover effect for interactivity */
.cta-inner:hover {
    transform: scale(1.02); /* Slight scale-up on hover */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2), 0 6px 12px rgba(212, 175, 55, 0.3); /* Enhanced shadow */
}

/* Optional: Add a subtle sparkle effect with pseudo-element */
.cta-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.3) 0%, transparent 50%); /* Sparkle effect */
    opacity: 0.4;
    z-index: 1;
    pointer-events: none; /* Prevent interaction with pseudo-element */
}

/* Ensure content is above the sparkle effect */
.cta-inner > * {
    position: relative;
    z-index: 2;
}

/* Media Query for Tablets (768px - 1024px) */
@media (max-width: 1024px) {
    .cta-inner {
        background: linear-gradient(135deg, rgba(212, 175, 55, 0.55) 0%, rgba(255, 215, 0, 0.45) 100%);
        border-radius: 20px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(212, 175, 55, 0.15);
        padding: 20px;
    }
    .cta-inner:hover {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(212, 175, 55, 0.2);
    }
}

/* Media Query for Mobile Devices (up to 767px) */
@media (max-width: 767px) {
    .cta-inner {
        background: linear-gradient(135deg, rgba(212, 175, 55, 0.5) 0%, rgba(255, 215, 0, 0.4) 100%);
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(212, 175, 55, 0.1);
        padding: 15px;
    }
    .cta-inner:hover {
        transform: scale(1.01); /* Reduced scale for mobile */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(212, 175, 55, 0.15);
    }
    .cta-inner::before {
        opacity: 0.3; /* Reduced sparkle intensity */
    }
}

/* Media Query for Very Small Screens (up to 480px) */
@media (max-width: 480px) {
    .cta-inner {
        background: linear-gradient(135deg, rgba(212, 175, 55, 0.45) 0%, rgba(255, 215, 0, 0.35) 100%);
        border-radius: 10px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(212, 175, 55, 0.1);
        padding: 10px;
        font-size: 0.9em;
    }
    .cta-inner:hover {
        transform: scale(1.01);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(212, 175, 55, 0.15);
    }
    .cta-inner::before {
        opacity: 0.2; /* Minimal sparkle for small screens */
    }
}

.room-slider {
    position: relative;
    width: 100%;
    min-height: 600px; /* Taller for a grand look */
    background-size: cover; /* Ensure images cover the section */
    background-position: center; /* Center images */
    background-repeat: no-repeat;
    animation: slideDown 15s infinite; /* Slide-down animation */
    border-radius: 12px; /* Elegant rounded corners */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    padding: 50px; /* Spacious padding for content */
    color: #ffffff; /* White text for contrast */
    overflow: hidden; /* Keep content within bounds */
    transition: box-shadow 0.3s ease; /* Smooth shadow transition */
}

/* Gradient overlay for luxury and readability */
.room-slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(212, 175, 55, 0.3)); /* Dark to gold gradient */
    z-index: 1;
}

/* Subtle sparkle effect */
.room-slider::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
    opacity: 0.4;
    z-index: 2;
    pointer-events: none;
}

/* Ensure content is above overlays */
.room-slider > * {
    position: relative;
    z-index: 3;
}

/* Hover effect for interactivity */
.room-slider:hover {
    animation-play-state: paused; /* Pause animation on hover */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); /* Enhanced shadow */
}

/* Keyframes for slide-down animation */
@keyframes slideDown {
    0%, 33.33% {
        background-image: url('https://bmdhotelandsuites.com/storage/sliders/bmd-07-25-at-165909-1.jpeg');
        transform: translateY(0); /* Start at top */
    }
    33.34%, 66.66% {
        background-image: url('https://bmdhotelandsuites.com/storage/sliders/bmd-07-25-at-165906-2-1.jpeg');
        transform: translateY(0); /* Maintain position */
    }
    66.67%, 100% {
        background-image: url('https://bmdhotelandsuites.com/storage/sliders/bmd-07-25-at-165828.jpeg');
        transform: translateY(0); /* Maintain position */
    }
    /* Simulate slide-down with subtle transform */
    30%, 33.33% {
        transform: translateY(10px); /* Brief downward shift before image change */
    }
    63%, 66.66% {
        transform: translateY(10px); /* Brief downward shift */
    }
    96%, 100% {
        transform: translateY(10px); /* Brief downward shift */
    }
}

/* Media Query for Tablets (768px - 1024px) */
@media (max-width: 1024px) {
    .room-slider {
        min-height: 450px;
        padding: 35px;
        border-radius: 10px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }
    .room-slider::before {
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.65), rgba(212, 175, 55, 0.25));
    }
    .room-slider::after {
        opacity: 0.3;
    }
}

/* Media Query for Mobile Devices (up to 767px) */
@media (max-width: 767px) {
    .room-slider {
        min-height: 350px;
        padding: 25px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background-size: contain;
        background-position: top center;
    }
    .room-slider::before {
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(212, 175, 55, 0.2));
    }
    .room-slider::after {
        opacity: 0.25;
    }
}

/* Media Query for Very Small Screens (up to 480px) */
@media (max-width: 480px) {
    .room-slider {
        min-height: 250px;
        padding: 15px;
        border-radius: 6px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
        font-size: 0.9em;
    }
    .room-slider::before {
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.75), rgba(212, 175, 55, 0.15));
    }
    .room-slider::after {
        opacity: 0.2;
    }
}

.room-section {
    position: relative;
    width: 100%;
    min-height: 600px;
    background: #F5F0E6; /* Light cream for elegance and black text readability */
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(255, 245, 200, 0.2); /* Shadow with light gold tint */
    padding: 50px;
    overflow: hidden;
}

/* Subtle sparkle effect */
.room-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
    opacity: 0.3;
    z-index: 1;
    pointer-events: none;
}

/* Ensure grid cards are above sparkle */
.room-section > * {
    position: relative;
    z-index: 2;
}

/* Style grid cards */
.room-section .card {
    background: #ffffff;
    color: #000000;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

@media (max-width: 1024px) {
    .room-section {
        min-height: 500px;
        padding: 35px;
        border-radius: 12px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(255, 245, 200, 0.15);
    }
    .room-section::after {
        opacity: 0.25;
    }
    .room-section .card {
        border-radius: 8px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    }
}

@media (max-width: 767px) {
    .room-section {
        min-height: 400px;
        padding: 25px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(255, 245, 200, 0.1);
    }
    .room-section::after {
        opacity: 0.2;
    }
    .room-section .card {
        border-radius: 6px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
}

@media (max-width: 480px) {
    .room-section {
        min-height: 300px;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(255, 245, 200, 0.1);
        font-size: 0.9em;
    }
    .room-section::after {
        opacity: 0.15;
    }
    .room-section .card {
        border-radius: 4px;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }
}

.room-booking-form {
    position: relative;
    width: 100%;
    max-width: 700px; /* Slightly wider for elegance */
    margin: 40px auto; /* Increased outer margin for section separation */
    background: linear-gradient(135deg, #F5F0E6 0%, #E8D9C2 100%); /* Light cream to soft beige gradient */
    border-radius: 20px; /* More elegant rounded corners */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(255, 245, 200, 0.2); /* Enhanced shadow with light gold tint */
    padding: 50px; /* More spacious padding */
    color: #000000; /* Black text for readability */
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Smooth transitions */
}

/* Subtle overlay for depth */
.room-booking-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 245, 200, 0.1)); /* Softer light overlay */
    z-index: 1;
}

/* Subtle sparkle effect for hotel elegance */
.room-booking-form::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
    opacity: 0.25;
    z-index: 2;
    pointer-events: none;
}

/* Ensure form content is above overlays */
.room-booking-form > * {
    position: relative;
    z-index: 3;
}

/* Style form labels */
.room-booking-form label {
    color: #000000;
    font-size: 1.2em; /* Slightly larger for clarity */
    font-weight: 500;
    margin-bottom: 12px; /* Increased spacing */
    display: block;
    line-height: 1.4;
}

/* Style form inputs, selects, and textareas */
.room-booking-form input,
.room-booking-form select,
.room-booking-form textarea {
    width: 100%;
    padding: 14px; /* More padding for comfort */
    margin-bottom: 25px; /* Increased spacing to prevent crowding */
    border: 1px solid rgba(212, 175, 55, 0.5); /* Gold border */
    border-radius: 10px; /* Softer corners */
    background: rgba(255, 255, 255, 0.95); /* Slightly more opaque for clarity */
    color: #000000;
    font-size: 1.05em;
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

/* Focus state for form elements */
.room-booking-form input:focus,
.room-booking-form select:focus,
.room-booking-form textarea:focus {
    outline: none;
    border-color: #D4AF37; /* Bright gold */
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.3); /* Subtle glow on focus */
}

/* Style buttons */
.room-booking-form button,
.room-booking-form input[type="submit"] {
    background: #D4AF37; /* Gold button */
    color: #2E2A27; /* Dark text */
    padding: 14px 30px; /* More padding for elegance */
    border: none;
    border-radius: 10px; /* Softer corners */
    font-size: 1.15em; /* Slightly larger */
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    margin-top: 15px; /* Added spacing above button */
}

/* Button hover effect */
.room-booking-form button:hover,
.room-booking-form input[type="submit"]:hover {
    background: #FFD700; /* Brighter gold */
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4); /* Glow effect */
}

/* Hover effect for form container */
.room-booking-form:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 6px 12px rgba(255, 245, 200, 0.3);
    transform: translateY(-3px); /* Slight lift for elegance */
}

/* Media Query for Tablets (768px - 1024px) */
@media (max-width: 1024px) {
    .room-booking-form {
        max-width: 600px;
        margin: 30px auto;
        padding: 40px;
        border-radius: 16px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(255, 245, 200, 0.15);
    }
    .room-booking-form::before {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 245, 200, 0.1));
    }
    .room-booking-form::after {
        opacity: 0.2;
    }
    .room-booking-form label {
        font-size: 1.15em;
        margin-bottom: 10px;
    }
    .room-booking-form input,
    .room-booking-form select,
    .room-booking-form textarea {
        padding: 12px;
        margin-bottom: 20px;
        font-size: 1em;
    }
    .room-booking-form button,
    .room-booking-form input[type="submit"] {
        padding: 12px 25px;
        font-size: 1.1em;
        margin-top: 12px;
    }
}

/* Media Query for Mobile Devices (up to 767px) */
@media (max-width: 767px) {
    .room-booking-form {
        max-width: 100%;
        margin: 20px auto;
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(255, 245, 200, 0.1);
    }
    .room-booking-form::before {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 245, 200, 0.05));
    }
    .room-booking-form::after {
        opacity: 0.15;
    }
    .room-booking-form label {
        font-size: 1.1em;
        margin-bottom: 8px;
    }
    .room-booking-form input,
    .room-booking-form select,
    .room-booking-form textarea {
        padding: 10px;
        margin-bottom: 15px;
        font-size: 0.95em;
    }
    .room-booking-form button,
    .room-booking-form input[type="submit"] {
        padding: 10px 20px;
        font-size: 1em;
        margin-top: 10px;
    }
}

/* Media Query for Very Small Screens (up to 480px) */
@media (max-width: 480px) {
    .room-booking-form {
        margin: 15px auto;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(255, 245, 200, 0.1);
        font-size: 0.9em;
    }
    .room-booking-form::before {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 245, 200, 0.05));
    }
    .room-booking-form::after {
        opacity: 0.1;
    }
    .room-booking-form label {
        font-size: 1em;
        margin-bottom: 6px;
    }
    .room-booking-form input,
    .room-booking-form select,
    .room-booking-form textarea {
        padding: 8px;
        margin-bottom: 12px;
        font-size: 0.9em;
    }
    .room-booking-form button,
    .room-booking-form input[type="submit"] {
        padding: 8px 16px;
        font-size: 0.9em;
        margin-top: 8px;
    }
}
.room-features,
.room-rules,
.cancellation-box {
    position: relative;
    width: 100%;
    max-width: 600px; /* Consistent with room-booking-form for balance */
    margin: 20px auto; /* Center with spacing */
    background: linear-gradient(135deg, #F5F0E6 0%, #E8D9C2 100%); /* Light cream to soft beige gradient */
    border-radius: 15px; /* Elegant rounded corners */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(255, 245, 200, 0.2); /* Subtle shadow with light gold tint */
    padding: 40px; /* Spacious padding for content */
    color: #000000; /* Black text for readability */
    overflow: hidden; /* Keep content within bounds */
    transition: box-shadow 0.3s ease; /* Smooth shadow transition */
}

/* Subtle overlay for depth */
.room-features::before,
.room-rules::before,
.cancellation-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 245, 200, 0.1)); /* Light overlay */
    z-index: 1;
}

/* Subtle sparkle effect for hotel elegance */
.room-features::after,
.room-rules::after,
.cancellation-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
    opacity: 0.3;
    z-index: 2;
    pointer-events: none;
}

/* Ensure content is above overlays */
.room-features > *,
.room-rules > *,
.cancellation-box > * {
    position: relative;
    z-index: 3;
}

/* Style headings and text for consistency */
.room-features h1,
.room-features h2,
.room-features h3,
.room-rules h1,
.room-rules h2,
.room-rules h3,
.cancellation-box h1,
.cancellation-box h2,
.cancellation-box h3 {
    color: #000000;
    font-weight: 600;
    margin-bottom: 15px;
}

.room-features p,
.room-features li,
.room-rules p,
.room-rules li,
.cancellation-box p,
.cancellation-box li {
    color: #000000;
    font-size: 1em;
    line-height: 1.6;
}

/* Hover effect for interactivity */
.room-features:hover,
.room-rules:hover,
.cancellation-box:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), 0 6px 12px rgba(255, 245, 200, 0.3);
}

/* Media Query for Tablets (768px - 1024px) */
@media (max-width: 1024px) {
    .room-features,
    .room-rules,
    .cancellation-box {
        max-width: 500px;
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(255, 245, 200, 0.15);
        margin: 15px auto;
    }
    .room-features::before,
    .room-rules::before,
    .cancellation-box::before {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 245, 200, 0.1));
    }
    .room-features::after,
    .room-rules::after,
    .cancellation-box::after {
        opacity: 0.25;
    }
}

/* Media Query for Mobile Devices (up to 767px) */
@media (max-width: 767px) {
    .room-features,
    .room-rules,
    .cancellation-box {
        max-width: 100%;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(255, 245, 200, 0.1);
        margin: 10px auto;
    }
    .room-features::before,
    .room-rules::before,
    .cancellation-box::before {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 245, 200, 0.05));
    }
    .room-features::after,
    .room-rules::after,
    .cancellation-box::after {
        opacity: 0.2;
    }
    .room-features p,
    .room-features li,
    .room-rules p,
    .room-rules li,
    .cancellation-box p,
    .cancellation-box li {
        font-size: 0.95em;
    }
}

/* Media Query for Very Small Screens (up to 480px) */
@media (max-width: 480px) {
    .room-features,
    .room-rules,
    .cancellation-box {
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(255, 245, 200, 0.1);
        margin: 8px auto;
        font-size: 0.9em;
    }
    .room-features::before,
    .room-rules::before,
    .cancellation-box::before {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.45), rgba(255, 245, 200, 0.05));
    }
    .room-features::after,
    .room-rules::after,
    .cancellation-box::after {
        opacity: 0.15;
    }
    .room-features h1,
    .room-features h2,
    .room-features h3,
    .room-rules h1,
    .room-rules h2,
    .room-rules h3,
    .cancellation-box h1,
    .cancellation-box h2,
    .cancellation-box h3 {
        font-size: 1.2em;
    }
    .room-features p,
    .room-features li,
    .room-rules p,
    .room-rules li,
    .cancellation-box p,
    .cancellation-box li {
        font-size: 0.9em;
    }
}

.related-room {
    position: relative;
    width: 100%;
    max-width: 1200px; /* Wide enough for two cards */
    margin: 20px auto; /* Center with spacing */
    background: linear-gradient(135deg, #F5F0E6 0%, #E8D9C2 100%); /* Light cream to soft beige gradient */
    border-radius: 15px; /* Elegant rounded corners */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(255, 245, 200, 0.2); /* Subtle shadow with light gold tint */
    padding: 40px; /* Spacious padding around grid */
    color: #000000; /* Black text for readability */
    overflow: hidden; /* Keep content within bounds */
    transition: box-shadow 0.3s ease; /* Smooth shadow transition */
}

/* Subtle overlay for depth */
.related-room::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 245, 200, 0.1)); /* Light overlay */
    z-index: 1;
}

/* Subtle sparkle effect for hotel elegance */
.related-room::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
    opacity: 0.3;
    z-index: 2;
    pointer-events: none;
}

/* Ensure content is above overlays */
.related-room > * {
    position: relative;
    z-index: 3;
}

/* Grid layout for two room cards */
.related-room .room-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 20px; /* Spacing between cards */
}

/* Style individual room cards */
.related-room .card {
    background: #ffffff; /* White background for contrast */
    color: #000000; /* Black text for readability */
    border-radius: 10px; /* Subtle card rounding */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Card shadow for depth */
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Card hover effect */
.related-room .card:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Style card content */
.related-room .card h3 {
    color: #000000;
    font-size: 1.5em;
    font-weight: 600;
    margin-bottom: 10px;
}

.related-room .card p {
    color: #000000;
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 15px;
}

.related-room .card img {
    width: 100%;
    height: 200px; /* Fixed height for consistency */
    object-fit: cover; /* Ensure images fit well */
    border-radius: 8px;
    margin-bottom: 15px;
}

/* Optional button/link styling in cards */
.related-room .card a,
.related-room .card button {
    background: #D4AF37; /* Gold button */
    color: #2E2A27; /* Dark text */
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: background 0.3s ease, transform 0.2s ease;
}

.related-room .card a:hover,
.related-room .card button:hover {
    background: #FFD700; /* Brighter gold on hover */
    transform: scale(1.05);
}

/* Hover effect for the entire section */
.related-room:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), 0 6px 12px rgba(255, 245, 200, 0.3);
}

/* Media Query for Tablets (768px - 1024px) */
@media (max-width: 1024px) {
    .related-room {
        max-width: 100%;
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(255, 245, 200, 0.15);
        margin: 15px auto;
    }
    .related-room::before {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 245, 200, 0.1));
    }
    .related-room::after {
        opacity: 0.25;
    }
    .related-room .room-grid {
        gap: 15px;
    }
    .related-room .card {
        border-radius: 8px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    }
    .related-room .card img {
        height: 180px;
    }
}

/* Media Query for Mobile Devices (up to 767px) */
@media (max-width: 767px) {
    .related-room {
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(255, 245, 200, 0.1);
        margin: 10px auto;
    }
    .related-room::before {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 245, 200, 0.05));
    }
    .related-room::after {
        opacity: 0.2;
    }
    .related-room .room-grid {
        grid-template-columns: 1fr; /* Stack cards vertically */
        gap: 10px;
    }
    .related-room .card {
        border-radius: 6px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .related-room .card h3 {
        font-size: 1.3em;
    }
    .related-room .card p {
        font-size: 0.95em;
    }
    .related-room .card img {
        height: 150px;
    }
    .related-room .card a,
    .related-room .card button {
        padding: 8px 16px;
        font-size: 0.95em;
    }
}

/* Media Query for Very Small Screens (up to 480px) */
@media (max-width: 480px) {
    .related-room {
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(255, 245, 200, 0.1);
        margin: 8px auto;
        font-size: 0.9em;
    }
    .related-room::before {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.45), rgba(255, 245, 200, 0.05));
    }
    .related-room::after {
        opacity: 0.15;
    }
    .related-room .room-grid {
        gap: 8px;
    }
    .related-room .card {
        border-radius: 4px;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
        padding: 15px;
    }
    .related-room .card h3 {
        font-size: 1.2em;
    }
    .related-room .card p {
        font-size: 0.9em;
    }
    .related-room .card img {
        height: 120px;
    }
    .related-room .card a,
    .related-room .card button {
        padding: 6px 12px;
        font-size: 0.9em;
    }
}

.title-wrap {
    position: relative;
    width: 100%;
    max-width: 600px; /* Consistent with related-room and room-booking-form */
    margin: 20px auto; /* Center with spacing */
    background: linear-gradient(135deg, #F5F0E6 0%, #E8D9C2 100%); /* Light cream to soft beige gradient */
    border-radius: 12px; /* Elegant rounded corners */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(255, 245, 200, 0.2); /* Subtle shadow with light gold tint */
    padding: 20px 30px; /* Compact padding for title and price */
    color: #000000; /* Black text for readability */
    text-align: center; /* Center-align for prominence */
    overflow: hidden; /* Keep content within bounds */
    transition: box-shadow 0.3s ease, transform 0.2s ease; /* Smooth transitions */
}

/* Subtle overlay for depth */
.title-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 245, 200, 0.1)); /* Light overlay */
    z-index: 1;
}

/* Subtle sparkle effect for hotel elegance */
.title-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
    opacity: 0.25;
    z-index: 2;
    pointer-events: none;
}

/* Ensure content is above overlays */
.title-wrap > * {
    position: relative;
    z-index: 3;
}

/* Style room name (assuming h2 or h3) */
.title-wrap h2,
.title-wrap h3 {
    color: #000000;
    font-size: 1.8em; /* Prominent room name */
    font-weight: 700;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

/* Style price (assuming p or span) */
.title-wrap p,
.title-wrap span {
    color: #D4AF37; /* Gold for price to stand out */
    font-size: 1.4em;
    font-weight: 500;
    margin: 0;
}

/* Hover effect for interactivity */
.title-wrap:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25), 0 4px 8px rgba(255, 245, 200, 0.3);
    transform: translateY(-3px); /* Slight lift on hover */
}

/* Media Query for Tablets (768px -