/* =========================================
   RESET
========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "DM Sans", sans-serif;
    background: #f5f0e6;
    color: #17251c;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================
   HERO
========================================= */

.hero {
    position: relative;
    height: 100vh;
    min-height: 700px;
    overflow: hidden;
    color: #fff;
    isolation: isolate;
}


/* Background image */

.hero-background {
    position: absolute;
    inset: 0;
    background-image:
        url("../images/banner.png");
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    z-index: -3;
    animation: heroZoom 12s ease-out forwards;
}


/* Dark gradient */

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(5, 20, 12, 0.86) 0%,
            rgba(5, 20, 12, 0.65) 38%,
            rgba(5, 20, 12, 0.20) 72%,
            rgba(5, 20, 12, 0.30) 100%),
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.45) 0%,
            transparent 35%,
            rgba(0, 0, 0, 0.35) 100%);
    z-index: -2;
}


/* =========================================
   NAVIGATION
========================================= */

.navbar {
    position: relative;
    width: min(1380px, calc(100% - 80px));
    margin: 0 auto;
    height: 105px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    z-index: 10;
}


/* Logo */

.logo {
    display: block;
    width: 135px;
}

.logo img {
    width: 100%;
    height: auto;
    /*
       The supplied logo has a white background.
       This blends it into the navigation.
    */
    mix-blend-mode: screen;
}


/* Navigation */

.nav-links {
    display: flex;
    align-items: center;
    gap: 38px;
    margin-left: auto;
    margin-right: 45px;
}

.nav-links a {
    position: relative;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.90);
    transition: color 0.3s ease;
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 1px;
    background: #e7b957;
    transition: width 0.3s ease;
}

.nav-links a:hover {
    color: #e7b957;
}

.nav-links a:hover::after {
    width: 100%;
}


/* Book button */

.nav-button {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 13px 22px;
    background: #e6b34f;
    color: #17251c;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.nav-button span {
    font-size: 18px;
    line-height: 0;
}

.nav-button:hover {
    transform: translateY(-2px);
    background: #f2c96d;
}


/* Mobile menu */

.menu-button {
    display: none;
    background: transparent;
    border: none;
    width: 38px;
    cursor: pointer;
}

.menu-button span {
    display: block;
    height: 2px;
    margin: 6px 0;
    background: #fff;
}


/* =========================================
   HERO CONTENT
========================================= */

.hero-content {
    position: relative;
    width: min(1380px, calc(100% - 80px));
    margin: 0 auto;
    padding-top: 125px;
}


.hero-eyebrow {
    margin-bottom: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.35em;
    color: #e9c875;
}


.hero h1 {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(58px, 6vw, 94px);
    font-weight: 500;
    line-height: 0.92;
    letter-spacing: -0.025em;
    max-width: 760px;
}

.hero h1 span {
    color: #fff;
}


.hero-script {
    margin-top: 8px;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(38px, 4vw, 62px);
    font-style: italic;
    color: #e6b34f;
    line-height: 1.1;
}


.hero-description {
    max-width: 510px;
    margin-top: 28px;
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.83);
}


/* =========================================
   HERO BUTTONS
========================================= */

.hero-actions {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 35px;
}


.primary-button {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 16px 25px;
    background: #e6b34f;
    color: #152219;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.primary-button span {
    font-size: 20px;
}

.primary-button:hover {
    background: #f4ca70;
    transform: translateY(-3px);
}


.video-button {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #fff;
    font-size: 14px;
}

.play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    font-size: 11px;
    transition: all 0.3s ease;
}

.video-button:hover .play-icon {
    background: #fff;
    color: #17251c;
}


/* =========================================
   HERO HIGHLIGHTS
========================================= */

.hero-highlights {
    position: absolute;
    bottom: 42px;
    right: max(40px, calc((100vw - 1380px) / 2));
    display: flex;
    align-items: center;
    gap: 35px;
}


.hero-highlight {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
}


.highlight-icon {
    color: #e6b34f;
    font-size: 20px;
}


/* =========================================
   SCROLL INDICATOR
========================================= */

.scroll-indicator {
    position: absolute;
    left: max(40px, calc((100vw - 1380px) / 2));
    bottom: 38px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}

.scroll-line {
    width: 55px;
    height: 1px;
    background: rgba(255, 255, 255, 0.55);
}


/* =========================================
   ANIMATION
========================================= */

@keyframes heroZoom {
    from {
        transform: scale(1.02);
    }

    to {
        transform: scale(1.08);
    }

}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {
    .navbar {
        width: calc(100% - 40px);
        height: 85px;
    }

    .nav-links,
    .nav-button {
        display: none;
    }

    .menu-button {
        display: block;
    }

    .hero-content {
        width: calc(100% - 40px);
        padding-top: 110px;
    }

    .hero h1 {
        font-size: clamp(52px, 11vw, 75px);
    }

    .hero-script {
        font-size: 40px;
    }

    .hero-description {
        font-size: 14px;
        max-width: 450px;
    }

    .hero-highlights {
        left: 20px;
        right: auto;
        bottom: 28px;
        gap: 18px;
    }

    .scroll-indicator {
        display: none;
    }

}


@media (max-width: 600px) {
    .hero {
        min-height: 680px;
    }

    .logo {
        width: 110px;
    }

    .hero-content {
        padding-top: 100px;
    }

    .hero-eyebrow {
        font-size: 9px;
        letter-spacing: 0.22em;
    }

    .hero h1 {
        font-size: 52px;
        line-height: 0.95;
    }

    .hero-script {
        font-size: 34px;
    }

    .hero-description {
        margin-top: 20px;
        font-size: 13px;
        line-height: 1.65;
    }

    .hero-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .hero-highlights {
        display: none;
    }

}

/* =========================================
   FULL SCREEN HERO SLIDER
========================================= */

.hero-slider {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 700px;
    overflow: hidden;
    color: #fff;
}


/* =========================================
   SLIDES
========================================= */

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 1.2s ease,
        visibility 1.2s ease;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
}


/* =========================================
   IMAGE
========================================= */

.slide-image {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1.05);
    transition:
        transform 7s ease;
}


/*
   Slowly zoom the active slide
*/

.hero-slide.active .slide-image {
    transform: scale(1.12);
}


/* =========================================
   OVERLAY
========================================= */

.slide-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgb(5 18 10 / 93%) 0%, rgba(5, 18, 10, 0.62) 30%, rgba(5, 18, 10, 0.20) 70%, rgba(5, 18, 10, 0.20) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, transparent 40%, rgba(0, 0, 0, 0.35) 100%);
}


/* =========================================
   CONTENT
========================================= */

.hero-slide .hero-content {
    position: absolute;
    z-index: 5;
    top: 42%;
    left: max(40px, calc((100vw - 1380px) / 2));
    transform: translateY(-45%);
    width: min(650px, calc(100% - 80px));
}


/* Eyebrow */

.hero-eyebrow {
    margin-bottom: 20px;
    color: #e8bc5c;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.32em;
}


/* Main heading */

.hero-content h1 {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(60px, 6vw, 92px);
    line-height: 0.9;
    font-weight: 500;
    letter-spacing: -0.03em;
    margin: 0;
}

.hero-content h1 span {
    color: #fff;
}


/* Script line */

.hero-script {
    margin-top: 15px;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(38px, 4vw, 58px);
    font-style: italic;
    color: #e6b34f;
}


/* Description */

.hero-description {
    max-width: 520px;
    margin-top: 25px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 15px;
    line-height: 1.75;
}


/* =========================================
   BUTTONS
========================================= */

.hero-actions {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 32px;
}


.primary-button {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 16px 25px;
    background: #e6b34f;
    color: #17251c;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    transition: 0.3s ease;
}

.primary-button:hover {
    background: #f4ca70;
    transform: translateY(-3px);
}


.video-button {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-size: 14px;
}


.play-icon {
    width: 43px;
    height: 43px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}


/* =========================================
   SLIDER CONTROLS
========================================= */

.slider-controls {
    position: absolute;
    z-index: 20;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 25px;
}


.slider-arrow {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(0, 0, 0, 0.15);
    color: white;
    cursor: pointer;
    transition: 0.3s ease;
}

.slider-arrow:hover {
    background: #e6b34f;
    border-color: #e6b34f;
    color: #17251c;
}


/* Dots */

.slider-dots {
    display: flex;
    align-items: center;
    gap: 10px;
}


.slider-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: 0.4s ease;
}


.slider-dot.active {
    width: 30px;
    border-radius: 10px;
    background: #e6b34f;
}


/* =========================================
   BOTTOM FEATURES
========================================= */

.hero-highlights {
    position: absolute;
    z-index: 20;
    bottom: 45px;
    right: max(40px, calc((100vw - 1380px) / 2));
    display: flex;
    align-items: center;
    gap: 25px;
}


.hero-highlights div {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
}


.hero-highlights span {
    color: #e6b34f;
    font-size: 20px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {
    .hero-slider {
        min-height: 700px;
    }

    .hero-slide .hero-content {
        left: 30px;
        width: calc(100% - 60px);
    }

    .hero-content h1 {
        font-size: clamp(52px, 10vw, 75px);
    }

    .hero-script {
        font-size: 38px;
    }

    .hero-highlights {
        display: none;
    }

}


@media (max-width: 600px) {
    .hero-slide .hero-content {
        top: 47%;
        left: 20px;
        width: calc(100% - 40px);
    }

    .hero-eyebrow {
        font-size: 9px;
        letter-spacing: 0.2em;
    }

    .hero-content h1 {
        font-size: 50px;
    }

    .hero-script {
        font-size: 32px;
    }

    .hero-description {
        font-size: 13px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .slider-controls {
        bottom: 25px;
    }

}

/* =========================================
   NAVIGATION
========================================= */

.navbar {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: min(1380px, calc(100% - 80px));
    height: 105px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
}


/* =========================================
   LOGO
========================================= */

.site-logo {
    display: flex;
    align-items: center;
    width: 145px;
    flex-shrink: 0;
}

.site-logo img {
    display: block;
    width: 100%;
    height: auto;
    /*
       Your supplied logo has a white background.
       This helps it blend with the dark hero.
    */
    mix-blend-mode: screen;
}


/* =========================================
   MENU
========================================= */

.nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 38px;
    margin-left: auto;
    margin-right: 45px;
}


.nav-menu a {
    position: relative;
    padding: 10px 0;
    color: rgba(255, 255, 255, 0.90);
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.03em;
    transition:
        color 0.3s ease;
}


/* underline */

.nav-menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 1px;
    width: 0;
    height: 2px;
    background: #e6b34f;
    border-radius: 5px;
    transition:
        width 0.3s ease;
}


.nav-menu a:hover,
.nav-menu a.active {
    color: #ffffff;
}


.nav-menu a:hover::after,
.nav-menu a.active::after {
    width: 100%;
}


/* =========================================
   BOOK NOW
========================================= */

.nav-book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-width: 125px;
    padding: 13px 20px;
    border-radius: 50px;
    background: #e6b34f;
    color: #17251c;
    font-size: 13px;
    font-weight: 600;
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


.nav-book:hover {
    background: #f3ca70;
    transform: translateY(-2px);
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.20);
}


.nav-arrow {
    font-size: 18px;
    line-height: 1;
}


/* =========================================
   MOBILE MENU
========================================= */

.mobile-menu-button {
    display: none;
    width: 42px;
    height: 42px;
    padding: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    cursor: pointer;
}


.mobile-menu-button span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 4px auto;
    background: #fff;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1050px) {
    .navbar {
        width: calc(100% - 50px);
    }

    .nav-menu {
        gap: 22px;
        margin-right: 25px;
    }

    .nav-menu a {
        font-size: 12px;
    }

    .site-logo {
        width: 125px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 800px) {
    .navbar {
        width: calc(100% - 40px);
        height: 85px;
    }

    .site-logo {
        width: 115px;
    }

    .nav-menu,
    .nav-book {
        display: none;
    }

    .mobile-menu-button {
        display: block;
    }

}

/* =========================================
   ABOUT SECTION
========================================= */

.about-section {
    position: relative;

    width: 100%;

    min-height: 760px;

    padding: 90px 0 70px;

    background: #f5f0e6;

    overflow: hidden;
}

.about-section {
    background:
        url("../images/about-background.png") center center / cover no-repeat;

    background-color: #f5f0e6;
}


/* =========================================
   BACKGROUND PALM WATERMARK
========================================= */

.about-palm {
    position: absolute;

    left: -100px;
    bottom: -120px;

    width: 520px;
    height: 650px;

    opacity: 0.055;

    pointer-events: none;

    background-image: url("images/palm-watermark.png");

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;

    transform: rotate(-12deg);
}


/* =========================================
   CONTAINER
========================================= */

.about-container {

    position: relative;

    z-index: 2;

    width: min(1630px, calc(100% - 120px));

    min-height: 650px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        43% 57%;

    align-items: center;
}


/* =========================================
   LEFT CONTENT
========================================= */

.about-content {

    position: relative;

    z-index: 5;

    padding-left: 0;

    padding-top: 5px;

    max-width: 650px;
}


/* =========================================
   EYEBROW
========================================= */

.about-eyebrow {

    margin-bottom: 27px;

    color: #a87520;

    font-family: "DM Sans", sans-serif;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.35em;

    text-transform: uppercase;
}


/* =========================================
   HEADING
========================================= */

.about-title {

    margin: 0;

    color: #18271d;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(65px, 5.1vw, 91px);

    font-weight: 500;

    line-height: 0.88;

    letter-spacing: -0.035em;
}


.about-title span {

    color: #234c37;
}


/* =========================================
   PARAGRAPHS
========================================= */

.about-copy {

    width: 600px;

    max-width: 100%;

    margin-top: 42px;

    color: #53615b;

    font-family: "DM Sans", sans-serif;

    font-size: 16px;

    line-height: 1.8;
}


.about-copy p {

    margin: 0 0 27px;
}


.about-copy p:last-child {

    margin-bottom: 0;
}


/* =========================================
   LEARN MORE
========================================= */

.learn-more-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 30px;

    min-width: 205px;

    height: 64px;

    margin-top: 15px;

    padding: 0 27px;

    border-radius: 50px;

    background: #173b2b;

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


.learn-more-btn:hover {

    background: #24543d;

    transform: translateY(-3px);
}


.btn-arrow {

    font-size: 22px;

    line-height: 1;

    color: #e4b75c;
}


/* =========================================
   FEATURES
========================================= */

.about-features {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 25px;

    width: 640px;

    max-width: 100%;

    margin-top: 68px;

    padding-top: 30px;

    border-top:
        1px solid rgba(24, 39, 29, 0.16);
}


/* =========================================
   FEATURE
========================================= */

.about-feature {

    position: relative;

    min-width: 0;
}


.feature-icon {

    width: 42px;

    height: 42px;

    margin-bottom: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid #d6ae63;

    border-radius: 50%;

    color: #a87520;

    font-size: 21px;

    font-family: serif;
}


.feature-title {

    color: #183526;

    font-size: 12px;

    font-weight: 600;

    line-height: 1.25;
}


.feature-subtitle {

    color: #747a75;

    font-size: 11px;

    line-height: 1.4;
}


/* =========================================
   RIGHT VISUAL
========================================= */

.about-visual {

    position: relative;

    height: 690px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-left: -45px;

    margin-right: -70px;

    z-index: 3;
}


/* =========================================
   CUTOUT
========================================= */

.about-cutout {

    display: block;

    width: 100%;

    max-width: 930px;

    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(0 20px 30px rgba(28, 43, 32, 0.06));

    transform: translateY(10px);

    transition:
        transform 0.6s ease;
}


.about-visual:hover .about-cutout {

    transform:
        translateY(3px) scale(1.015);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1200px) {

    .about-container {

        width: calc(100% - 70px);

        grid-template-columns: 46% 54%;
    }


    .about-title {

        font-size: 70px;
    }


    .about-copy {

        width: 500px;

        font-size: 14px;
    }


    .about-visual {

        margin-left: -30px;

        margin-right: -40px;
    }


    .about-features {

        width: 100%;

        gap: 15px;
    }

}


@media (max-width: 900px) {

    .about-section {

        padding: 80px 0;
    }


    .about-container {

        width: calc(100% - 50px);

        grid-template-columns: 1fr;

        gap: 50px;
    }


    .about-content {

        max-width: 650px;
    }


    .about-title {

        font-size: 70px;
    }


    .about-copy {

        width: 100%;

        max-width: 600px;
    }


    .about-features {

        width: 100%;
    }


    .about-visual {

        height: auto;

        margin: 0;

        justify-content: center;
    }


    .about-cutout {

        width: 100%;

        max-width: 750px;
    }

}


@media (max-width: 600px) {

    .about-section {

        min-height: auto;

        padding: 70px 0 60px;
    }


    .about-container {

        width: calc(100% - 35px);
    }


    .about-eyebrow {

        font-size: 9px;

        letter-spacing: 0.25em;
    }


    .about-title {

        font-size: 53px;

        line-height: 0.9;
    }


    .about-copy {

        margin-top: 28px;

        font-size: 14px;

        line-height: 1.7;
    }


    .learn-more-btn {

        height: 55px;

        min-width: 175px;
    }


    .about-features {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 28px 15px;

        margin-top: 50px;
    }


    .about-visual {

        margin-top: 10px;
    }

}

/* =========================================
   STAYS SECTION
========================================= */

.stays-section {
    position: relative;

    background: #f5f0e6;
    background: url(../images/about-background.png) center / cover no-repeat;

    overflow: hidden;
}


/* =========================================
   DARK HEADER
========================================= */

.stays-header {

    position: relative;

    min-height: 275px;

    padding: 35px 5% 100px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    text-align: center;

    color: #fff;

    background:
        linear-gradient(rgba(8, 27, 17, 0.68),
            rgba(8, 27, 17, 0.78)),
        url("../images/green.png") center / cover no-repeat;

    background-size: cover;

    background-position: center;
}


/* heading */

.stays-header h2 {

    margin: 0;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(42px, 4vw, 58px);

    font-weight: 500;

    line-height: 1;

    color: #fff;
}


.stays-intro {

    margin-top: 8px;

    max-width: 600px;

    font-size: 13px;

    color: rgba(255, 255, 255, 0.9);

    line-height: 1.5;
}


/* =========================================
   EYEBROW
========================================= */

.section-eyebrow {

    margin-bottom: 8px;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.35em;

    color: #a87520;

    text-transform: uppercase;
}


.section-eyebrow.light {

    color: #e6b34f;
}


/* =========================================
   VIEW ROOMS BUTTON
========================================= */

.view-rooms-btn {

    position: absolute;

    right: 7%;

    bottom: 104px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 20px;

    border-radius: 50px;

    background: #e7b44e;

    color: #18271d;

    font-size: 11px;

    font-weight: 600;

    transition: 0.3s ease;
}


.view-rooms-btn:hover {

    background: #f3ca70;

    transform: translateY(-2px);
}


.view-rooms-btn span {

    font-size: 16px;
}


/* =========================================
   CARDS
========================================= */

.stays-cards-container {

    position: relative;

    z-index: 5;

    width: min(1240px, calc(100% - 70px));

    margin: -95px auto 0;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;
}


/* =========================================
   CARD
========================================= */

.stay-card {

    overflow: hidden;

    background: #fffdf8;

    border-radius: 4px;

    box-shadow:
        0 7px 20px rgba(24, 39, 29, 0.10);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.stay-card:hover {

    transform: translateY(-7px);

    box-shadow:
        0 16px 35px rgba(24, 39, 29, 0.15);
}


/* =========================================
   IMAGE
========================================= */

.stay-image {

    width: 100%;

    height: 260px;

    overflow: hidden;
}


.stay-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform 0.6s ease;
}


.stay-card:hover .stay-image img {

    transform: scale(1.05);
}


/* =========================================
   CARD CONTENT
========================================= */

.stay-card-content {

    min-height: 125px;

    padding: 13px 18px 15px;
}


.stay-card h3 {

    margin: 0;

    color: #18271d;

    font-family: "Cormorant Garamond", serif;

    font-size: 20px;

    font-weight: 600;
}


.stay-card p {

    margin: 4px 0 8px;

    max-width: 300px;

    color: #69716b;

    font-size: 11px;

    line-height: 1.45;
}


.details-link {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #a87520;

    font-size: 10px;

    font-weight: 600;
}


.details-link span {

    font-size: 14px;

    transition:
        transform 0.3s ease;
}


.details-link:hover span {

    transform:
        translateX(4px);
}


/* =========================================
   AMENITIES
========================================= */

.amenities-section {

    position: relative;

    padding: 42px 5% 48px;

    text-align: center;
}


.amenities-heading h2 {

    margin: 0;

    color: #18271d;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(38px, 3.5vw, 52px);

    font-weight: 500;

    line-height: 1;
}


/* =========================================
   AMENITIES GRID
========================================= */

.amenities-grid {

    width: min(1150px, 100%);

    margin: 35px auto 0;

    display: grid;

    grid-template-columns:
        repeat(8, 1fr);

    gap: 18px;
}


.amenity {

    display: flex;

    flex-direction: column;

    align-items: center;

    min-width: 0;
}


.amenity-icon {

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #a87520;

    font-size: 25px;

    margin-bottom: 8px;
}


.amenity h4 {

    margin: 0;

    color: #27372d;

    font-size: 10px;

    font-weight: 600;

    line-height: 1.25;
}


.amenity p {

    margin: 0;

    color: #6d746e;

    font-size: 9px;

    line-height: 1.3;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1000px) {

    .stays-header {

        padding-bottom: 90px;
    }


    .view-rooms-btn {

        right: 4%;

        bottom: 100px;
    }


    .stays-cards-container {

        grid-template-columns:
            repeat(3, 1fr);

        width: calc(100% - 40px);
    }


    .stay-image {

        height: 170px;
    }


    .amenities-grid {

        grid-template-columns:
            repeat(4, 1fr);

        row-gap: 30px;
    }

}


@media (max-width: 700px) {

    .stays-header {

        min-height: 320px;

        padding:
            35px 25px 120px;
    }


    .stays-header h2 {

        font-size: 40px;
    }


    .view-rooms-btn {

        position: static;

        margin-top: 18px;
    }


    .stays-cards-container {

        width: calc(100% - 35px);

        margin-top: -80px;

        grid-template-columns: 1fr;

        gap: 20px;
    }


    .stay-image {

        height: 210px;
    }


    .amenities-section {

        padding:
            55px 20px;
    }


    .amenities-heading h2 {

        font-size: 38px;
    }


    .amenities-grid {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 30px 10px;
    }

}


@media (max-width: 450px) {

    .stay-image {

        height: 190px;
    }

    .stay-card-content {

        padding: 15px;
    }

}
/* =========================================================
   PHOTO GALLERY
========================================================= */

.gallery-section {
    position: relative;

    min-height: 310px;

    padding: 35px 5% 38px;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(5, 27, 17, 0.96) 0%,
            rgba(8, 38, 24, 0.88) 45%,
            rgba(7, 32, 20, 0.78) 100%
        ),
        url("../images/stays-background.jpg");

    background-size: cover;

    background-position: center;

    color: #fff;
}


/* =========================================================
   OVERLAY
========================================================= */

.gallery-overlay {
    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(109, 148, 112, 0.12),
            transparent 35%
        );
        background-image: url(../images/bg.png);
        background-repeat: no-repeat;
        background-size: cover;

    pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.gallery-container {

    position: relative;

    z-index: 2;

    width: min(
        1450px,
        100%
    );

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        280px
        minmax(0, 1fr);

    gap: 45px;

    align-items: center;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.gallery-intro {
    padding-left: 5px;
}


.gallery-eyebrow {

    margin: 0 0 10px;

    color: #e4b24f;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.34em;
}


.gallery-intro h2 {

    margin: 0;

    color: #fff;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            37px,
            3.2vw,
            53px
        );

    font-weight: 500;

    line-height: 0.94;
}


.gallery-description {

    max-width: 260px;

    margin: 14px 0 17px;

    color:
        rgba(
            255,
            255,
            255,
            0.83
        );

    font-size: 11px;

    line-height: 1.55;
}


.gallery-button {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding:
        10px
        17px;

    border-radius: 30px;

    background: #e8b44e;

    color: #1b2e21;

    font-size: 10px;

    font-weight: 700;

    text-decoration: none;

    transition:
        0.3s ease;
}


.gallery-button:hover {

    background: #f3ca70;

    transform:
        translateY(-2px);
}


.gallery-button span {

    font-size: 15px;
}


/* =========================================================
   SLIDER WINDOW
========================================================= */

.gallery-slider {

    position: relative;

    min-width: 0;

    padding-bottom: 27px;

    overflow: hidden;
}


/* =========================================================
   MOVING TRACK
========================================================= */

.gallery-track {

    display: flex;

    gap: 8px;

    width: 100%;

    transition:
        transform
        0.65s
        cubic-bezier(
            0.22,
            0.61,
            0.36,
            1
        );

    will-change: transform;
}


/* =========================================================
   IMAGE CARD

   DESKTOP = 4 IMAGES
========================================================= */

.gallery-item {

    flex:
        0 0
        calc(
            (100% - 24px) / 4
        );

    min-width: 0;

    height: 165px;

    overflow: hidden;

    border:
        2px solid
        rgba(
            255,
            255,
            255,
            0.7
        );

    border-radius: 4px;

    background: #173326;
}


.gallery-item img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform
        0.5s ease;
}


.gallery-item:hover img {

    transform:
        scale(1.06);
}


/* =========================================================
   ARROWS
========================================================= */

.gallery-arrow {

    position: absolute;

    top: calc(
        50% - 13px
    );

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: none;

    border-radius: 50%;

    background: #fff;

    color: #183526;

    font-size: 25px;

    line-height: 1;

    cursor: pointer;

    z-index: 10;

    box-shadow:
        0 4px 12px
        rgba(
            0,
            0,
            0,
            0.15
        );

    transition:
        0.25s ease;
}


.gallery-prev {

    left: 5px;
}


.gallery-next {

    right: 5px;
}


.gallery-arrow:hover {

    background: #e7b44e;

    transform:
        translateY(-50%)
        scale(1.05);
}


.gallery-arrow:disabled {

    opacity: 0.35;

    cursor: default;

    transform:
        translateY(-50%);
}


/* =========================================================
   DOTS
========================================================= */

.gallery-dots {

    position: absolute;

    bottom: 0;

    left: 50%;

    display: flex;

    align-items: center;

    gap: 8px;

    transform:
        translateX(-50%);
}


.gallery-dot {

    width: 6px;

    height: 6px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.45
        );

    cursor: pointer;

    transition:
        width
        0.25s ease,
        background
        0.25s ease;
}


.gallery-dot.active {

    width: 20px;

    border-radius: 10px;

    background: #fff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .gallery-container {

        grid-template-columns:
            240px
            minmax(0, 1fr);

        gap: 25px;
    }


    .gallery-item {

        flex:
            0 0
            calc(
                (100% - 8px) / 2
            );

        height: 175px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 750px) {

    .gallery-section {

        padding:
            35px
            20px
            38px;
    }


    .gallery-container {

        grid-template-columns: 1fr;

        gap: 25px;
    }


    .gallery-intro {

        text-align: center;
    }


    .gallery-description {

        margin-left: auto;

        margin-right: auto;
    }


    .gallery-item {

        flex:
            0 0 100%;

        height: 190px;
    }


    .gallery-prev {

        left: 7px;
    }


    .gallery-next {

        right: 7px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .gallery-intro h2 {

        font-size: 38px;
    }


    .gallery-item {

        height: 180px;
    }

}
/* =========================================================
   TESTIMONIAL SECTION
========================================================= */

.testimonials-section {
    position: relative;
    padding: 32px 0 22px;

    overflow: hidden;

    background:
        #f5f0e6 url("../images/about-background.png") center / cover no-repeat;
}


.testimonials-container {
    position: relative;
    z-index: 2;

    width: min(1500px, calc(100% - 120px));

    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.testimonials-heading {
    text-align: center;

    margin-bottom: 25px;
}

.testimonials-heading .section-eyebrow {
    margin: 0 0 7px;

    color: #a86a12;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.35em;
}

.testimonials-heading h2 {
    margin: 0;

    color: #17291f;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(42px, 4vw, 60px);

    font-weight: 500;

    line-height: 0.95;
}


/* =========================================================
   SLIDER WINDOW
========================================================= */

.testimonial-slider {
    width: 100%;

    overflow: hidden;
}


/* =========================================================
   MOVING TRACK
========================================================= */

.testimonial-track {
    display: flex;

    gap: 25px;

    width: 100%;

    transition:
        transform 0.65s cubic-bezier(0.22,
            0.61,
            0.36,
            1);

    will-change: transform;
}


/* =========================================================
   TESTIMONIAL CARD
========================================================= */

.testimonial-card {

    /*
       3 cards visible at once.
       25px is the gap.
    */

    flex: 0 0 calc((100% - 50px) / 3);

    min-width: 0;

    height: 168px;

    box-sizing: border-box;

    padding: 20px 26px 16px;

    position: relative;

    border-radius: 6px;

    background:
        rgba(255, 253, 247, 0.94);

    border:
        1px solid rgba(120,
            100,
            60,
            0.08);

    box-shadow:
        0 5px 20px rgba(39, 46, 37, 0.07);
}


/* =========================================================
   QUOTE
========================================================= */

.quote-mark {
    position: absolute;

    top: 7px;
    left: 17px;

    color: #173526;

    font-family: Georgia, serif;

    font-size: 27px;

    line-height: 1;
}


/* =========================================================
   REVIEW TEXT
========================================================= */

.testimonial-text {

    margin: 3px 0 10px;

    padding-left: 1px;

    color: #26372e;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size: 12px;

    line-height: 1.5;
}


/* =========================================================
   STARS
========================================================= */

.stars {
    margin-bottom: 10px;

    color: #b87813;

    font-size: 11px;

    letter-spacing: 2px;
}


/* =========================================================
   GUEST
========================================================= */

.guest-info {
    display: flex;

    align-items: center;

    gap: 10px;
}


.guest-avatar {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    overflow: hidden;

    border-radius: 50%;

    background: #ddd7c9;
}


.guest-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.guest-info h4 {
    margin: 0;

    color: #1d3026;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size: 11px;

    font-weight: 700;
}


.guest-info p {
    margin: 2px 0 0;

    color: #7b7d76;

    font-size: 9px;
}


/* =========================================================
   NAVIGATION
========================================================= */

.testimonial-navigation {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    margin-top: 18px;
}


/* =========================================================
   ARROWS
========================================================= */

.testimonial-prev,
.testimonial-next {

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: none;

    border-radius: 50%;

    background: #fff;

    color: #173526;

    font-size: 25px;

    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.08);

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}


.testimonial-prev:hover,
.testimonial-next:hover {

    background: #e7b34c;

    transform: scale(1.05);
}


/* =========================================================
   DOTS
========================================================= */

.testimonial-dots {

    display: flex;

    align-items: center;

    gap: 7px;
}


.testimonial-dot {

    width: 6px;
    height: 6px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: #c9c7bd;

    cursor: pointer;

    transition:
        width 0.25s ease,
        background 0.25s ease;
}


.testimonial-dot.active {

    width: 19px;

    border-radius: 10px;

    background: #173526;
}


/* =========================================================
   DISABLED ARROWS
========================================================= */

.testimonial-prev:disabled,
.testimonial-next:disabled {

    opacity: 0.35;

    cursor: default;

    transform: none;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 750px) {

    .testimonials-container {

        width:
            calc(100% - 35px);

    }


    .testimonials-heading {

        margin-bottom: 20px;

    }


    .testimonials-heading h2 {

        font-size: 42px;

    }


    .testimonial-track {

        gap: 0;

    }


    .testimonial-card {

        flex: 0 0 100%;

        height: auto;

        min-height: 175px;

        padding: 22px;

    }

}

/* =========================================================
   BEACH CTA
========================================================= */

.beach-cta {
    position: relative;

    min-height: 165px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        linear-gradient(rgba(14, 34, 23, 0.18),
            rgba(14, 34, 23, 0.18)),
        url("../images/cta.png");

    background-size: cover;
    background-position: center 55%;

    color: #fff;
}

.beach-cta-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(13, 39, 25, 0.35),
            transparent 50%,
            rgba(13, 39, 25, 0.25));
}

.beach-cta-content {
    position: relative;
    z-index: 2;

    text-align: center;
}

.beach-cta h2 {
    margin: 0;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(36px, 4vw, 52px);

    font-weight: 500;

    line-height: 0.95;

    text-shadow:
        0 2px 15px rgba(0, 0, 0, 0.35);
}

.beach-cta p {
    margin: 8px 0 10px;

    font-size: 11px;

    line-height: 1.35;

    color: rgba(255, 255, 255, 0.92);
}

.cta-book-button {
    display: inline-flex;

    align-items: center;
    gap: 13px;

    padding: 9px 20px;

    border-radius: 30px;

    background: #e9b54f;

    color: #183526;

    font-size: 10px;
    font-weight: 700;

    transition: 0.3s ease;
}

.cta-book-button:hover {
    background: #f5cd77;

    transform: translateY(-2px);
}

.cta-book-button span {
    font-size: 16px;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    position: relative;

    overflow: hidden;

    padding: 32px 5% 10px;

    background:
        linear-gradient(rgba(8, 27, 17, 0.68),
            rgba(8, 27, 17, 0.78)),
        url("../images/green.png") center / cover no-repeat;

    color: #fff;
}

.footer-container {
    position: relative;
    z-index: 2;

    width: min(1220px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.3fr 0.8fr 1.05fr 1.05fr;

    gap: 55px;
}


/* ---------------------------------------------------------
   FOOTER BRAND
--------------------------------------------------------- */

.footer-brand {
    max-width: 250px;
}

.footer-logo {
    position: relative;

    display: inline-flex;

    flex-direction: column;

    color: #fff;

    font-family: "Cormorant Garamond", serif;

    font-weight: 600;

    line-height: 0.78;
}

.footer-logo span {
    font-size: 30px;
}

.footer-logo small {
    align-self: center;

    margin-top: 7px;

    font-family: cursive;

    font-size: 18px;

    font-weight: 400;
}

.footer-brand>p {
    margin: 18px 0 15px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 10px;

    line-height: 1.5;
}


/* ---------------------------------------------------------
   SOCIAL
--------------------------------------------------------- */

.social-links {
    display: flex;
    gap: 10px;
}

.social-links a {
    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.4);

    border-radius: 50%;

    color: #fff;

    font-size: 11px;

    transition: 0.25s ease;
}

.social-links a:hover {
    border-color: #e5b24e;

    background: #e5b24e;

    color: #183526;
}


/* ---------------------------------------------------------
   FOOTER COLUMNS
--------------------------------------------------------- */

.footer-column h3 {
    margin: 3px 0 15px;

    color: #fff;

    font-size: 12px;

    font-weight: 600;
}

.footer-column ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.footer-column li {
    margin-bottom: 7px;
}

.footer-column a {
    color: rgba(255, 255, 255, 0.72);

    font-size: 10px;

    transition: 0.2s ease;
}

.footer-column a:hover {
    color: #e6b44e;
}


/* ---------------------------------------------------------
   CONTACT
--------------------------------------------------------- */

.contact-list li {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin-bottom: 11px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 10px;

    line-height: 1.4;
}

.contact-icon {
    width: 14px;

    color: #e6b44e;

    flex-shrink: 0;

    text-align: center;
}


/* ---------------------------------------------------------
   NEWSLETTER
--------------------------------------------------------- */

.newsletter p {
    margin: 0 0 12px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 9px;
}

.newsletter-form {
    display: flex;

    width: 100%;

    max-width: 240px;

    height: 34px;

    border:
        1px solid rgba(255, 255, 255, 0.4);

    border-radius: 3px;

    overflow: hidden;
}

.newsletter-form input {
    min-width: 0;

    flex: 1;

    padding: 0 10px;

    border: none;
    outline: none;

    background: transparent;

    color: #fff;

    font-size: 9px;
}

.newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.62);
}

.newsletter-form button {
    width: 35px;

    border: none;

    background: #e7b44e;

    color: #183526;

    cursor: pointer;

    font-size: 14px;
}


/* ---------------------------------------------------------
   FOOTER BOTTOM
--------------------------------------------------------- */

.footer-bottom {
    position: relative;
    z-index: 2;

    width: min(1220px, 100%);

    margin: 28px auto 0;

    padding-top: 10px;

    border-top:
        1px solid rgba(255, 255, 255, 0.16);

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.footer-bottom p {
    margin: 0;

    color: rgba(255, 255, 255, 0.6);

    font-size: 8px;
}

.footer-legal {
    display: flex;

    align-items: center;

    gap: 10px;
}

.footer-legal a,
.footer-legal span {
    color: rgba(255, 255, 255, 0.6);

    font-size: 8px;
}


/* =========================================================
   DECORATIVE FOOTER LEAVES
========================================================= */

.footer-leaf {
    position: absolute;

    width: 300px;
    height: 350px;

    opacity: 0.055;

    pointer-events: none;

    background:
        url("../images/palm-watermark.png") center / contain no-repeat;
}

.footer-leaf-left {
    left: -100px;
    bottom: -150px;

    transform: rotate(20deg);
}

.footer-leaf-right {
    right: -100px;
    bottom: -150px;

    transform: scaleX(-1) rotate(20deg);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .gallery-container {
        grid-template-columns: 240px 1fr;
        gap: 25px;
    }

    .gallery-item {
        flex-basis: calc(33.333% - 6px);
    }

    .footer-container {
        grid-template-columns:
            repeat(2, 1fr);

        row-gap: 35px;
    }

}


@media (max-width: 750px) {

    /* Gallery */

    .gallery-section {
        padding: 35px 20px;
    }

    .gallery-container {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .gallery-intro {
        text-align: center;
    }

    .gallery-description {
        margin-left: auto;
        margin-right: auto;
    }

    .gallery-item {
        flex-basis: calc(50% - 4px);
        height: 180px;
    }


    /* Testimonials */

    .testimonials-container {
        width: calc(100% - 30px);
    }

    .testimonial-grid {
        grid-template-columns: 1fr;

        max-width: 500px;

        margin-left: auto;
        margin-right: auto;
    }

    .testimonial-card:not(:first-child) {
        display: none;
    }


    /* CTA */

    .beach-cta {
        min-height: 190px;

        padding: 25px 20px;
    }

    .beach-cta h2 {
        font-size: 39px;
    }


    /* Footer */

    .footer-container {
        grid-template-columns: 1fr 1fr;

        gap: 35px 25px;
    }

    .footer-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 8px;
    }

}


@media (max-width: 480px) {

    .gallery-item {
        flex-basis: 100%;
        height: 190px;
    }

    .gallery-item:not(:first-child) {
        display: none;
    }

    .gallery-arrow {
        width: 27px;
        height: 27px;
    }

    .gallery-prev {
        left: -8px;
    }

    .gallery-next {
        right: -8px;
    }


    .footer-container {
        grid-template-columns: 1fr;
    }

    .footer-brand {
        max-width: 100%;
    }

    .newsletter-form {
        max-width: 100%;
    }

}

/* Header Book Now button */
.header-book-btn {
  background: #d89b35;
  color: #0d2d20;
  border: none;
  padding: 12px 24px;
  border-radius: 28px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.header-book-btn:hover {
  background: #f0b84e;
  transform: translateY(-2px);
}

/* Modal backdrop */
.booking-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(4, 20, 13, 0.75);
  backdrop-filter: blur(6px);
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.booking-modal.active {
  display: flex;
}

/* Modal box */
.booking-modal-content {
  position: relative;
  background: #f8f5ed;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  animation: modalAppear 0.3s ease;
}

@keyframes modalAppear {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  color: #0d2d20;
  font-size: 30px;
  cursor: pointer;
}

.modal-eyebrow {
  color: #b17b25;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.booking-modal-content h2 {
  color: #0d2d20;
  font-family: Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  margin: 0 0 10px;
}

.modal-description {
  color: #6c716b;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 25px;
}

.booking-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.form-group label {
  color: #263e30;
  font-size: 13px;
  font-weight: 600;
}

.form-group input,
.form-group select {
  width: 100%;
  box-sizing: border-box;
  padding: 13px;
  border: 1px solid #d8d7cc;
  border-radius: 4px;
  background: #fff;
  color: #263e30;
  font: inherit;
  font-size: 14px;
  outline: none;
}

.form-group input:focus,
.form-group select:focus {
  border-color: #b17b25;
  box-shadow: 0 0 0 2px rgba(177, 123, 37, 0.12);
}

.booking-submit {
  width: 100%;
  background: #0d2d20;
  color: #fff;
  border: none;
  padding: 15px 20px;
  margin-top: 5px;
  border-radius: 4px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

.booking-submit:hover {
  background: #174832;
}

.booking-submit span {
  margin-left: 8px;
}

@media (max-width: 520px) {
  .booking-modal-content {
    padding: 32px 22px;
  }

  .booking-modal-content h2 {
    font-size: 27px;
  }

  .booking-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
.booking-contacts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 25px;
}

.booking-contacts a {
  display: block;
  padding: 15px 20px;
  background: #0d2d20;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.booking-contacts a:hover {
  background: #d89b35;
  color: #0d2d20;
  transform: translateY(-2px);
}
.booking-offers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 22px 0;
}

.booking-offers p {
  margin: 0;
  padding: 11px 15px;
  background: rgba(13, 45, 32, 0.07);
  border-left: 3px solid #d89b35;
  color: #0d2d20;
  font-family: Georgia, serif;
  font-size: 16px;
  text-align: left;
}