/* ============================================================
   HOME HERO SLIDER (editorial card style SwiperJS)
   ============================================================ */
.home-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    height: 100vh;
    background: var(--color-neutral-950);
}

.home-hero__swiper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.home-hero__slide {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.home-hero__media {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.home-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    filter: saturate(1.06) contrast(1.05);
    transition: transform 1400ms ease;
    will-change: transform;
}

.swiper-slide-active .home-hero__image {
    transform: scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
    .home-hero__image {
        transform: none;
        transition: none;
    }
}

.home-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: #000;
    opacity: 0.3;
}

.home-hero__static-panel-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(1.25rem, 3vw, 2.25rem);
    z-index: 6;
    pointer-events: none;
}

.home-hero__static-panel {
    width: min(34em, 92%);
    pointer-events: auto;
    display: grid;
    gap: var(--space-4, 1em);
    padding: var(--space-7, 1.75em);
    border-radius: var(--radius-sm, 0.5em);
    border: 1px solid color-mix(in srgb, var(--border-subtle) 80%, transparent);
    background: var(--primary-contrast);
    box-shadow: 0 var(--space-3, 0.75em) var(--space-12, 3em) color-mix(in srgb, var(--color-neutral-950) 30%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.home-hero__eyebrow {
    margin: 0;
    color: var(--color-neutral-700);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: var(--font-semibold);
}

.home-hero__static-title {
    margin: 0;
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    font-size: clamp(1.5em, 1.15em + 1.8vw, 3em);
    line-height: 1.05;
    letter-spacing: 0.01em;
    max-width: 18ch;
}

.home-hero__cta {
    justify-self: start;
}

.home-hero__nav {
    position: absolute;
    bottom: clamp(1.25rem, 3vw, 2.25rem);
    z-index: 5;
    width: 2.8rem;
    height: 2.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--surface-base) 90%, transparent);
    color: var(--text-primary);
    border: 1px solid color-mix(in srgb, var(--border-subtle) 80%, transparent);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.home-hero__nav svg {
    width: 1.1rem;
    height: 1.1rem;
}

.home-hero__nav:hover,
.home-hero__nav:focus-visible {
    background: var(--primary-solid);
    border-color: var(--primary-solid);
    color: var(--text-on-brand);
    transform: translateY(calc(var(--space-1, 0.25em) * -1));
    outline: none;
}

.home-hero__nav:focus-visible {
    box-shadow: 0 0 0 var(--space-1, 0.25em) var(--primary-alpha-40);
}

.home-hero__nav--prev {
    right: 140px;
}

.home-hero__nav--next {
    right: 90px;
}

.home-hero__nav.swiper-button-disabled {
    opacity: 0.35;
    pointer-events: none;
}


/* ============================================================
   BOOKING WIDGET — own section beneath the hero
   ============================================================ */
.booking-widget-section {
    padding: var(--space-8) 0;
    background-color: var(--color-neutral-0);
    position: relative;
    z-index: 1;
}

.booking-widget-section__inner {
    display: flex;
    justify-content: center;
}



.booking-widget-section__widget {
    width: 100%;
}

.Configure-quickBook-Widget .MbsSearchWidget.dayUseSearch {
    background-color: transparent !important;
}

/* High-contrast mode tweaks */
body.high-contrast .home-hero__nav {
    background: var(--bg-primary);
    border-color: var(--button-color);
    color: var(--button-color);
}

body.high-contrast .booking-widget-section__wrapper {
    background: #000000;
    border-color: #ffff00;
    box-shadow: 0 0 0 1px #ffff00;
}

/* About us section css starts  */
.home-about {
    position: relative;
    padding: var(--space-16, 4em) var(--space-4, 1em);
    min-height: 50vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--color-sky-50);
}

/* Soft gradient blob background */
.about-cta-blobs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.about-cta-blobs .cta-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
}

.cta-blob-1 {
    width: min(60vw, 520px);
    height: min(60vw, 520px);
    right: -15%;
    top: -20%;
    background: radial-gradient(circle, rgba(18, 33, 47, 0.4) 0%, transparent 70%);
    background-color: rgba(94, 129, 172, 0.5);
    background: radial-gradient(circle, rgba(18, 33, 47, 0.35) 0%, transparent 70%);
    background-color: var(--color-warm-500) !important;
}

.cta-blob-2 {
    width: min(50vw, 400px);
    height: min(50vw, 400px);
    left: -10%;
    bottom: -15%;
    background: radial-gradient(circle, rgba(18, 33, 47, 0.35) 0%, transparent 70%);
    background-color: rgba(61, 90, 128, 0.8);
    background: radial-gradient(circle, rgba(18, 33, 47, 0.35) 0%, transparent 70%);
    background-color: var(--color-neutral-400) !important;
}

.cta-blob-3 {
    width: min(50vw, 280px);
    height: min(50vw, 280px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(229, 99, 99, 0.12) 0%, transparent 70%);
    background-color: rgba(229, 99, 99, 0.3);
}

/* Floating glow shapes */
.about-glow-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.about-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.35;
}

.about-glow-1 {
    width: 120px;
    height: 120px;
    left: 8%;
    top: 25%;
    background: rgba(229, 99, 99, 0.25);
}

.about-glow-2 {
    width: 80px;
    height: 80px;
    right: 12%;
    top: 30%;
    background: rgba(77, 144, 142, 0.3);
}

.about-glow-3 {
    width: 100px;
    height: 100px;
    left: 15%;
    bottom: 20%;
    background: rgba(94, 129, 172, 0.25);
}

.about-glow-4 {
    width: 60px;
    height: 60px;
    right: 20%;
    bottom: 30%;
    background: rgba(229, 99, 99, 0.2);
}

.home-about-title {
    display: inline-block;
    margin: 0 0 var(--space-2);
    font-family: var(--font-cormorant);
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    letter-spacing: 0.01em;
    position: relative;
    line-height: normal;
}

.home-about-title:after,
.home-about-title:before {
    content: '';
}

.home-about-title:after {
    width: 100%;
    height: 1px;
    display: block;
    content: "";
    position: relative;
    margin-top: var(--space-1);
    background-color: var(--color-black);
}

.home-about-title:before {
    width: 28px;
    height: 5px;
    display: block;
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -14px;
    background-color: var(--primary-solid);
}

.home-about-text {
    color: var(--color-neutral-900);
}

/* About us section css ends  */

/* ============================================================
   OUR ROOMS — alternating media/content rows
   ============================================================ */
.our-rooms.section-pad {
    background: var(--primary-contrast);
    padding: var(--space-20) 0;
}

.our-rooms__head {
    margin-bottom: var(--space-8);
}

.our-rooms .title-main {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-cormorant);
    font-size: var(--text-4xl);
    font-weight: var(--font-regular);
    line-height: 1.05;
}

.our-rooms__list {
    display: grid;
    gap: var(--space-8);
}

.our-rooms__item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-8);
    box-shadow: var(--bs-box-shadow);
}

.our-rooms__item:nth-child(even) .our-rooms__media-link {
    order: 2;
}

.our-rooms__item:nth-child(even) .our-rooms__content {
    order: 1;
}

.our-rooms__media-link {
    display: block;
    text-decoration: none;
    height: 100%;
}

.our-rooms__media-link:focus-visible {
    outline: var(--space-1) solid var(--a11y-focus-ring);
    outline-offset: var(--space-1);
}

.our-rooms__media {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: var(--surface-elevated);
}

.our-rooms__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.01);
    aspect-ratio: 16 / 9;
    transition: transform 0.45s ease;
}

.our-rooms__media-link:hover .our-rooms__image,
.our-rooms__media-link:focus-visible .our-rooms__image {
    transform: scale(1.06);
}

.our-rooms__placeholder {
    min-height: 200px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    color: var(--text-on-brand);
    background:
        radial-gradient(120% 120% at 100% 50%,
            color-mix(in srgb, var(--primary-dark) 75%, var(--color-neutral-700) 25%) var(--space-0),
            color-mix(in srgb, var(--primary-darker) 80%, var(--color-neutral-900) 20%) 100%),
        var(--primary-darker);
    font-family: var(--font-sora);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
}

.our-rooms__placeholder svg {
    width: var(--space-12);
    height: var(--space-12);
    stroke: var(--text-on-brand);
}

.our-rooms__read-more {
    position: absolute;
    right: var(--space-0);
    bottom: var(--space-0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-6);
    background: var(--primary-solid);
    color: var(--text-on-brand);
    font-family: var(--font-sora);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    line-height: 1;
}

.our-rooms__content {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-3);
}

.our-rooms__title {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-sora);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: 1.15;
}

.our-rooms__desc {
    margin: 0;
    color: var(--color-neutral-800);
    font-family: var(--font-hind);
    line-height: 1.45;
    font-size: var(--text-base);
}

.our-rooms__cta {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--primary-solid);
    color: var(--text-on-brand);
    text-decoration: none;
    font-family: var(--font-sora);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    line-height: 1;
    transition: background-color 0.25s ease, transform 0.25s ease;
    border-radius: 4px;
}

.our-rooms__cta:hover,
.our-rooms__cta:focus-visible {
    background: var(--primary-dark);
    color: var(--text-on-brand);
    transform: translateY(calc(var(--space-1) * -1));
}

.our-rooms__cta:focus-visible {
    outline: var(--space-1) solid var(--a11y-focus-ring);
    outline-offset: var(--space-1);
}

.our-rooms__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-8);
}

@media (max-width: 991px) {
    .our-rooms__item {
        gap: var(--space-6);
    }

    .our-rooms__title {
        font-size: var(--text-2xl);
    }

    .our-rooms__desc {
        font-size: var(--text-base);
    }
}

@media (max-width: 767px) {
    .our-rooms__item {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .our-rooms__item:nth-child(even) .our-rooms__media-link,
    .our-rooms__item:nth-child(even) .our-rooms__content {
        order: initial;
    }

    .our-rooms__footer {
        justify-content: center;
    }

    .our-rooms__footer .btn-arrow {
        padding: var(--space-2);
        font-size: var(--text-xs);
        line-height: normal;
    }

    .our-rooms__desc {
        font-size: var(--text-sm);
    }

    .our-rooms__title {
        font-size: var(--text-xl);
    }
}