/* =========================================
   AURELIA RESORT
   LUXURY DESIGN SYSTEM
========================================= */

:root {

    --black: #0b0b09;
    --black-soft: #151511;

    --cream: #eee8dc;
    --cream-dark: #cfc7b8;

    --gold: #c6a15b;
    --gold-light: #e2c98d;

    --white: #ffffff;

    --serif: "Cormorant Garamond", serif;
    --sans: "DM Sans", sans-serif;

}


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

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


html {
    scroll-behavior: smooth;
}


body {
    background: var(--black);
    color: var(--cream);
    font-family: var(--sans);
}


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


/* =========================================
   NAVBAR
========================================= */

.navbar {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    padding: 24px 5%;

    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.65),
        transparent
    );

}


.nav-container {

    max-width: 1400px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


/* LOGO */

.logo {

    display: flex;

    align-items: center;

    gap: 12px;

}


.logo-symbol {

    color: var(--gold);

    font-size: 24px;

}


.logo-text {

    font-family: var(--serif);

    font-size: 23px;

    letter-spacing: 4px;

}


.logo-text small {

    display: block;

    font-family: var(--sans);

    font-size: 7px;

    letter-spacing: 3px;

    color: var(--cream-dark);

    margin-top: 2px;

}


/* NAV LINKS */

.nav-links {

    display: flex;

    gap: 32px;

}


.nav-links a {

    font-size: 12px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: var(--cream-dark);

    transition: .3s;

}


.nav-links a:hover {

    color: var(--gold-light);

}


/* NAV BUTTON */

.nav-button {

    border: 1px solid var(--gold);

    padding: 13px 22px;

    font-size: 10px;

    letter-spacing: 2px;

    transition: .3s;

}


.nav-button:hover {

    background: var(--gold);

    color: var(--black);

}


/* MOBILE BUTTON */

.mobile-menu-button {

    display: none;

    background: none;

    border: none;

    cursor: pointer;

}


.mobile-menu-button span {

    display: block;

    width: 25px;

    height: 1px;

    background: var(--cream);

    margin: 6px;

}


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

.hero {

    min-height: 100vh;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:

        linear-gradient(
            rgba(0,0,0,.35),
            rgba(0,0,0,.75)
        ),

        url("https://images.unsplash.com/photo-1540541338287-41700207dee6?auto=format&fit=crop&w=2200&q=90")
        center / cover;

}


.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at center,
            transparent 20%,
            rgba(0,0,0,.55)
        );

}


.hero-content {

    position: relative;

    z-index: 2;

    max-width: 900px;

    padding: 30px;

}


.hero-eyebrow {

    color: var(--gold-light);

    letter-spacing: 5px;

    font-size: 11px;

    margin-bottom: 25px;

}


.hero h1 {

    font-family: var(--serif);

    font-size: clamp(60px, 9vw, 125px);

    font-weight: 400;

    line-height: .85;

}


.hero h1 span {

    display: block;

    color: var(--gold-light);

    font-style: italic;

}


.hero-description {

    max-width: 600px;

    margin: 35px auto;

    color: var(--cream-dark);

    line-height: 1.8;

    font-size: 15px;

}


/* HERO BUTTONS */

.hero-buttons {

    display: flex;

    justify-content: center;

    gap: 15px;

}


.button {

    padding: 16px 28px;

    font-size: 10px;

    letter-spacing: 2px;

    transition: .3s;

}


.button-primary {

    background: var(--gold);

    color: var(--black);

}


.button-primary:hover {

    background: var(--gold-light);

}


.button-outline {

    border: 1px solid rgba(255,255,255,.5);

}


.button-outline:hover {

    border-color: var(--gold);

    color: var(--gold-light);

}


/* SCROLL */

.hero-scroll {

    position: absolute;

    bottom: 30px;

    left: 50%;

    transform: translateX(-50%);

}


.hero-scroll span {

    display: block;

    width: 1px;

    height: 45px;

    background: var(--gold);

    margin: auto auto 10px;

}


.hero-scroll p {

    font-size: 8px;

    letter-spacing: 3px;

    color: var(--cream-dark);

}


/* =========================================
   INTRO
========================================= */

.intro {

    text-align: center;

    max-width: 800px;

    margin: auto;

    padding: 150px 25px;

}


.section-label {

    color: var(--gold);

    font-size: 10px;

    letter-spacing: 4px;

    margin-bottom: 30px;

}


.intro h2 {

    font-family: var(--serif);

    font-size: clamp(45px, 6vw, 75px);

    font-weight: 400;

    line-height: 1;

}


.intro p {

    max-width: 600px;

    margin: 30px auto 0;

    color: var(--cream-dark);

    line-height: 1.8;

}


/* =========================================
   ROOMS
========================================= */

.rooms {

    padding: 100px 5%;

    background: var(--black-soft);

}


.section-heading {

    max-width: 1400px;

    margin: auto auto 60px;

}


.section-heading p {

    color: var(--gold);

    font-size: 10px;

    letter-spacing: 4px;

}


.section-heading h2 {

    font-family: var(--serif);

    font-size: 65px;

    font-weight: 400;

    margin-top: 10px;

}


.rooms-grid {

    max-width: 1400px;

    margin: auto;

    display: grid;

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

    gap: 25px;

}


.room-card {

    overflow: hidden;

    background: #11110e;

}


.room-image {

    height: 420px;

    background:

        linear-gradient(
            rgba(0,0,0,.1),
            rgba(0,0,0,.5)
        ),

        url("https://images.unsplash.com/photo-1564501049412-61c2a3083791?auto=format&fit=crop&w=1200&q=85")
        center / cover;

    transition: .6s;

}


.room-card:nth-child(2) .room-image {

    background-image:

        linear-gradient(
            rgba(0,0,0,.1),
            rgba(0,0,0,.5)
        ),

        url("https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?auto=format&fit=crop&w=1200&q=85");

}


.room-card:nth-child(3) .room-image {

    background-image:

        linear-gradient(
            rgba(0,0,0,.1),
            rgba(0,0,0,.5)
        ),

        url("https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=1200&q=85");

}


.room-card:hover .room-image {

    transform: scale(1.04);

}


.room-content {

    padding: 25px;

}


.room-content p {

    color: var(--gold);

    font-size: 10px;

}


.room-content h3 {

    font-family: var(--serif);

    font-size: 32px;

    font-weight: 400;

    margin: 5px 0;

}


.room-content span {

    color: var(--cream-dark);

    font-size: 11px;

}


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

footer {

    text-align: center;

    padding: 80px 20px;

}


.footer-logo {

    font-family: var(--serif);

    font-size: 35px;

    color: var(--gold-light);

}


footer p {

    font-size: 8px;

    letter-spacing: 4px;

    margin: 8px 0 30px;

}


footer small {

    color: var(--cream-dark);

    font-size: 10px;

}


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

@media (max-width: 900px) {

    .nav-links,
    .nav-button {

        display: none;

    }


    .mobile-menu-button {

        display: block;

    }


    .hero h1 {

        font-size: 65px;

    }


    .hero-buttons {

        flex-direction: column;

    }


    .rooms-grid {

        grid-template-columns: 1fr;

    }


    .section-heading h2 {

        font-size: 50px;

    }

}
/* =========================================
   EXPERIENCE SECTION
========================================= */

.experience {

    display: grid;

    grid-template-columns: 1fr 1fr;

    min-height: 800px;

    background: var(--cream);

    color: var(--black);

}


.experience-image {

    min-height: 700px;

    position: relative;

    background:

        linear-gradient(
            rgba(0,0,0,.08),
            rgba(0,0,0,.25)
        ),

        url("https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=1600&q=90")
        center / cover;

}


.experience-image-label {

    position: absolute;

    bottom: 35px;

    left: 35px;

    color: white;

    font-size: 9px;

    letter-spacing: 4px;

}


.experience-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 10%;

}


.experience-number {

    color: #9b7b42;

    font-size: 10px;

    letter-spacing: 3px;

    margin-bottom: 35px;

}


.experience-content h2 {

    font-family: var(--serif);

    font-size: clamp(50px, 5vw, 78px);

    line-height: .95;

    font-weight: 400;

    max-width: 600px;

}


.experience-content h2 em {

    color: #a7864d;

}


.experience-text {

    max-width: 500px;

    margin-top: 30px;

    color: #655f54;

    font-size: 14px;

    line-height: 1.9;

}


.experience-link {

    display: inline-flex;

    align-items: center;

    gap: 20px;

    margin-top: 40px;

    width: fit-content;

    color: #17150f;

    font-size: 10px;

    letter-spacing: 2px;

    border-bottom: 1px solid #a7864d;

    padding-bottom: 10px;

}


.experience-link span {

    color: #a7864d;

    font-size: 18px;

    transition: .3s;

}


.experience-link:hover span {

    transform: translateX(8px);

}


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

@media (max-width: 900px) {

    .experience {

        grid-template-columns: 1fr;

    }


    .experience-image {

        min-height: 500px;

    }


    .experience-content {

        padding: 80px 25px;

    }

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

.amenities {

    padding: 140px 5%;

    background: var(--black);

}


.amenities-heading {

    max-width: 1400px;

    margin: 0 auto 80px;

}


.amenities-heading p {

    color: var(--gold);

    font-size: 10px;

    letter-spacing: 4px;

    margin-bottom: 25px;

}


.amenities-heading h2 {

    font-family: var(--serif);

    font-size: clamp(50px, 6vw, 80px);

    font-weight: 400;

    line-height: .95;

    max-width: 800px;

}


.amenities-heading h2 em {

    color: var(--gold-light);

}


/* GRID */

.amenities-grid {

    max-width: 1400px;

    margin: auto;

    display: grid;

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

    border-top: 1px solid rgba(198,161,91,.25);

    border-left: 1px solid rgba(198,161,91,.25);

}


/* CARD */

.amenity-card {

    position: relative;

    min-height: 350px;

    padding: 45px;

    border-right: 1px solid rgba(198,161,91,.25);

    border-bottom: 1px solid rgba(198,161,91,.25);

    transition: .4s;

}


.amenity-card:hover {

    background: #151510;

}


/* NUMBER */

.amenity-number {

    position: absolute;

    top: 30px;

    right: 30px;

    color: #6e644f;

    font-size: 10px;

    letter-spacing: 2px;

}


/* ICON */

.amenity-icon {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid var(--gold);

    border-radius: 50%;

    color: var(--gold-light);

    font-size: 22px;

    margin-bottom: 35px;

}


.amenity-card h3 {

    font-family: var(--serif);

    font-size: 34px;

    font-weight: 400;

}


.amenity-card p {

    max-width: 300px;

    margin-top: 15px;

    color: var(--cream-dark);

    font-size: 13px;

    line-height: 1.8;

}


.amenity-card a {

    display: inline-block;

    margin-top: 25px;

    color: var(--gold-light);

    font-size: 9px;

    letter-spacing: 2px;

}


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

@media (max-width: 900px) {

    .amenities {

        padding: 90px 20px;

    }


    .amenities-grid {

        grid-template-columns: 1fr;

    }


    .amenity-card {

        min-height: 300px;

        padding: 35px;

    }

}
/* =========================================
   DINING
========================================= */

.dining {

    display: grid;

    grid-template-columns: 1.15fr .85fr;

    min-height: 750px;

    background: #11110e;

}


/* IMAGE */

.dining-image {

    position: relative;

    min-height: 700px;

    background:

        url("https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?auto=format&fit=crop&w=1800&q=90")
        center / cover;

}


.dining-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to right,
            transparent 60%,
            rgba(11,11,9,.7)
        );

}


.dining-image-caption {

    position: absolute;

    bottom: 35px;

    left: 40px;

    color: white;

    font-size: 9px;

    letter-spacing: 4px;

}


/* CONTENT */

.dining-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 10%;

}


.dining-label {

    color: var(--gold);

    font-size: 10px;

    letter-spacing: 3px;

    margin-bottom: 30px;

}


.dining-content h2 {

    font-family: var(--serif);

    font-weight: 400;

    font-size: clamp(55px, 5vw, 80px);

    line-height: .9;

}


.dining-content h2 em {

    display: block;

    color: var(--gold-light);

}


.dining-description {

    max-width: 480px;

    margin-top: 35px;

    color: var(--cream-dark);

    font-size: 13px;

    line-height: 1.9;

}


/* DETAILS */

.dining-details {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;

    max-width: 500px;

    margin-top: 40px;

    padding-top: 25px;

    border-top: 1px solid rgba(198,161,91,.3);

}


.dining-details div {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.dining-details span {

    color: var(--gold);

    font-size: 8px;

    letter-spacing: 2px;

}


.dining-details strong {

    color: var(--cream);

    font-size: 11px;

    font-weight: 400;

    line-height: 1.5;

}


/* BUTTON */

.dining-button {

    display: flex;

    align-items: center;

    gap: 20px;

    width: fit-content;

    margin-top: 40px;

    padding-bottom: 10px;

    border-bottom: 1px solid var(--gold);

    color: var(--cream);

    font-size: 9px;

    letter-spacing: 2px;

}


.dining-button span {

    color: var(--gold-light);

    font-size: 18px;

    transition: .3s;

}


.dining-button:hover span {

    transform: translateX(8px);

}


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

@media (max-width: 900px) {

    .dining {

        grid-template-columns: 1fr;

    }


    .dining-image {

        min-height: 500px;

    }


    .dining-content {

        padding: 80px 25px;

    }


    .dining-details {

        grid-template-columns: 1fr;

    }

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

.gallery {

    padding: 150px 5%;

    background: var(--cream);

    color: var(--black);

}


/* HEADING */

.gallery-heading {

    max-width: 1400px;

    margin: 0 auto 70px;

}


.gallery-heading p {

    color: #9b7b42;

    font-size: 10px;

    letter-spacing: 4px;

    margin-bottom: 25px;

}


.gallery-heading h2 {

    font-family: var(--serif);

    font-size: clamp(55px, 6vw, 85px);

    font-weight: 400;

    line-height: .9;

}


.gallery-heading h2 em {

    color: #a7864d;

}


.gallery-heading span {

    display: block;

    margin-top: 25px;

    color: #756e62;

    font-size: 13px;

}


/* =========================================
   GALLERY GRID
========================================= */

.gallery-grid {

    max-width: 1400px;

    margin: auto;

    display: grid;

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

    grid-auto-rows: 280px;

    gap: 15px;

}


.gallery-item {

    position: relative;

    overflow: hidden;

}


.gallery-item img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .8s ease;

}


.gallery-item:hover img {

    transform: scale(1.06);

}


/* LARGE IMAGE */

.gallery-large {

    grid-column: span 2;

    grid-row: span 2;

}


/* WIDE IMAGE */

.gallery-wide {

    grid-column: span 2;

}


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

.gallery-footer {

    max-width: 1400px;

    margin: 60px auto 0;

    display: flex;

    justify-content: flex-end;

}


.gallery-footer a {

    display: flex;

    align-items: center;

    gap: 20px;

    color: var(--black);

    font-size: 10px;

    letter-spacing: 2px;

    border-bottom: 1px solid #a7864d;

    padding-bottom: 10px;

}


.gallery-footer span {

    color: #a7864d;

    font-size: 18px;

    transition: .3s;

}


.gallery-footer a:hover span {

    transform: translateX(8px);

}


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

@media (max-width: 900px) {

    .gallery {

        padding: 90px 20px;

    }


    .gallery-grid {

        grid-template-columns: 1fr 1fr;

        grid-auto-rows: 220px;

    }


    .gallery-large {

        grid-column: span 2;

        grid-row: span 2;

    }


    .gallery-wide {

        grid-column: span 2;

    }

}


@media (max-width: 600px) {

    .gallery-grid {

        grid-template-columns: 1fr;

        grid-auto-rows: 280px;

    }


    .gallery-large,
    .gallery-wide {

        grid-column: span 1;

        grid-row: span 1;

    }

}
/* =========================================
   PACKAGES
========================================= */

.packages {

    padding: 150px 5%;

    background: var(--black);

}


.packages-heading {

    max-width: 1400px;

    margin: 0 auto 80px;

}


.packages-heading > p {

    color: var(--gold);

    font-size: 10px;

    letter-spacing: 4px;

    margin-bottom: 25px;

}


.packages-heading h2 {

    font-family: var(--serif);

    font-size: clamp(55px, 6vw, 85px);

    font-weight: 400;

    line-height: .9;

}


.packages-heading h2 em {

    color: var(--gold-light);

}


.packages-heading > span {

    display: block;

    margin-top: 25px;

    color: var(--cream-dark);

    font-size: 13px;

}


/* GRID */

.packages-grid {

    max-width: 1400px;

    margin: auto;

    display: grid;

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

    gap: 20px;

}


/* CARD */

.package-card {

    position: relative;

    min-height: 500px;

    padding: 45px;

    border: 1px solid rgba(198,161,91,.3);

    display: flex;

    flex-direction: column;

    transition: .4s;

}


.package-card:hover {

    border-color: var(--gold);

    transform: translateY(-5px);

}


/* FEATURED */

.package-featured {

    background: #171711;

    border-color: var(--gold);

}


/* TOP */

.package-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.package-top span {

    color: var(--gold);

    font-family: var(--serif);

    font-size: 25px;

}


.package-top p {

    color: var(--gold-light);

    font-size: 8px;

    letter-spacing: 2px;

}


/* TITLE */

.package-card h3 {

    font-family: var(--serif);

    font-size: 42px;

    font-weight: 400;

    margin-top: 70px;

    line-height: 1;

}


/* DESCRIPTION */

.package-description {

    color: var(--cream-dark);

    font-size: 13px;

    line-height: 1.8;

    max-width: 330px;

    margin-top: 20px;

}


/* PRICE */

.package-price {

    margin-top: auto;

    padding-top: 40px;

    border-top: 1px solid rgba(198,161,91,.2);

    display: flex;

    align-items: baseline;

    gap: 8px;

}


.package-price small {

    color: var(--gold);

    font-size: 8px;

    letter-spacing: 2px;

}


.package-price strong {

    font-family: var(--serif);

    font-size: 38px;

    font-weight: 400;

}


.package-price span {

    color: var(--cream-dark);

    font-size: 8px;

}


/* LINK */

.package-card > a {

    margin-top: 30px;

    color: var(--gold-light);

    font-size: 9px;

    letter-spacing: 2px;

}


.package-card > a span {

    margin-left: 15px;

    font-size: 16px;

    transition: .3s;

}


.package-card > a:hover span {

    margin-left: 22px;

}


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

@media (max-width: 900px) {

    .packages {

        padding: 90px 20px;

    }


    .packages-grid {

        grid-template-columns: 1fr;

    }


    .package-card {

        min-height: 450px;

    }

}
/* =========================================
   GUEST REVIEWS
========================================= */

.reviews {

    position: relative;

    min-height: 650px;

    padding: 100px 5%;

    background: #171711;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}


/* TOP */

.reviews-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.reviews-top p {

    color: var(--gold);

    font-size: 10px;

    letter-spacing: 4px;

}


.reviews-top span {

    color: var(--gold-light);

    font-size: 14px;

    letter-spacing: 5px;

}


/* REVIEW */

.review-content {

    max-width: 1000px;

    margin: 60px auto;

    text-align: center;

}


.review-mark {

    display: block;

    color: var(--gold);

    font-family: var(--serif);

    font-size: 100px;

    height: 80px;

    line-height: 1;

}


.review-content blockquote {

    font-family: var(--serif);

    font-size: clamp(38px, 5vw, 70px);

    font-weight: 400;

    line-height: 1;

    font-style: italic;

}


.review-author {

    margin-top: 45px;

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.review-author strong {

    font-size: 10px;

    letter-spacing: 3px;

    font-weight: 500;

}


.review-author span {

    color: var(--cream-dark);

    font-size: 9px;

    letter-spacing: 2px;

}


/* NAVIGATION */

.review-navigation {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 25px;

}


.review-navigation span {

    color: var(--cream-dark);

    font-size: 9px;

    letter-spacing: 2px;

}


.review-arrow {

    width: 45px;

    height: 45px;

    border: 1px solid rgba(198,161,91,.4);

    background: transparent;

    color: var(--cream);

    font-size: 18px;

    cursor: pointer;

    transition: .3s;

}


.review-arrow:hover {

    background: var(--gold);

    color: var(--black);

    border-color: var(--gold);

}


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

@media (max-width: 600px) {

    .reviews {

        min-height: 580px;

        padding: 70px 20px;

    }


    .review-content {

        margin: 40px auto;

    }


    .reviews-top {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

    }


    .review-mark {

        font-size: 80px;

    }

}
/* =========================================
   BOOKING
========================================= */

.booking {

    position: relative;

    min-height: 700px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    overflow: hidden;

}


.booking-background {

    position: absolute;

    inset: 0;

    background:

        url("https://images.unsplash.com/photo-1602002418082-a4443e081dd1?auto=format&fit=crop&w=2200&q=90")
        center / cover;

    transform: scale(1.02);

}


.booking-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            rgba(0,0,0,.45),
            rgba(0,0,0,.75)
        );

}


.booking-content {

    position: relative;

    z-index: 2;

    max-width: 900px;

    padding: 30px;

}


.booking-content > p {

    color: var(--gold-light);

    font-size: 10px;

    letter-spacing: 5px;

    margin-bottom: 30px;

}


.booking-content h2 {

    font-family: var(--serif);

    font-size: clamp(60px, 8vw, 110px);

    font-weight: 400;

    line-height: .85;

}


.booking-content h2 em {

    display: block;

    color: var(--gold-light);

}


.booking-content > span {

    display: block;

    max-width: 550px;

    margin: 35px auto;

    color: var(--cream-dark);

    font-size: 14px;

    line-height: 1.8;

}


/* BUTTONS */

.booking-buttons {

    display: flex;

    justify-content: center;

    gap: 15px;

    margin-top: 35px;

}


.booking-buttons a {

    padding: 17px 30px;

    font-size: 9px;

    letter-spacing: 2px;

    transition: .3s;

}


.booking-primary {

    background: var(--gold);

    color: var(--black);

}


.booking-primary:hover {

    background: var(--gold-light);

}


.booking-secondary {

    border: 1px solid rgba(255,255,255,.5);

    color: var(--white);

}


.booking-secondary:hover {

    border-color: var(--gold);

    color: var(--gold-light);

}


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

@media (max-width: 600px) {

    .booking {

        min-height: 650px;

    }


    .booking-content {

        padding: 25px;

    }


    .booking-buttons {

        flex-direction: column;

    }


    .booking-buttons a {

        width: 100%;

    }

}
/* =========================================
   CONTACT
========================================= */

.contact-section {

    display: grid;

    grid-template-columns: 1fr 1fr;

    min-height: 700px;

    background: var(--cream);

    color: var(--black);

}


.contact-info {

    padding: 10%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.contact-label {

    color: #9b7b42;

    font-size: 10px;

    letter-spacing: 4px;

    margin-bottom: 30px;

}


.contact-info h2 {

    font-family: var(--serif);

    font-size: clamp(55px, 5vw, 80px);

    font-weight: 400;

    line-height: .9;

}


.contact-info h2 em {

    display: block;

    color: #a7864d;

}


.contact-description {

    max-width: 500px;

    margin-top: 35px;

    color: #6d665b;

    font-size: 13px;

    line-height: 1.9;

}


/* DETAILS */

.contact-details {

    max-width: 500px;

    margin-top: 45px;

    display: grid;

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

    gap: 20px;

    padding-top: 25px;

    border-top: 1px solid rgba(0,0,0,.15);

}


.contact-detail {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.contact-detail span {

    color: #9b7b42;

    font-size: 8px;

    letter-spacing: 2px;

}


.contact-detail strong {

    font-size: 11px;

    font-weight: 500;

    line-height: 1.5;

}


/* BUTTON */

.contact-button {

    display: flex;

    align-items: center;

    gap: 20px;

    width: fit-content;

    margin-top: 40px;

    padding-bottom: 10px;

    border-bottom: 1px solid #a7864d;

    font-size: 9px;

    letter-spacing: 2px;

}


.contact-button span {

    color: #a7864d;

    font-size: 18px;

    transition: .3s;

}


.contact-button:hover span {

    transform: translateX(8px);

}


/* =========================================
   MAP
========================================= */

.contact-map {

    position: relative;

    min-height: 600px;

    background:

        linear-gradient(
            rgba(0,0,0,.25),
            rgba(0,0,0,.6)
        ),

        url("https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=1800&q=90")
        center / cover;

}


.map-overlay {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    width: 250px;

    padding: 35px 25px;

    text-align: center;

    background: rgba(11,11,9,.85);

    border: 1px solid rgba(198,161,91,.5);

    backdrop-filter: blur(10px);

}


.map-pin {

    color: var(--gold-light);

    font-size: 28px;

    margin-bottom: 15px;

}


.map-overlay p {

    color: var(--cream);

    font-family: var(--serif);

    font-size: 25px;

}


.map-overlay span {

    display: block;

    margin-top: 8px;

    color: var(--gold);

    font-size: 8px;

    letter-spacing: 3px;

}


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

@media (max-width: 900px) {

    .contact-section {

        grid-template-columns: 1fr;

    }


    .contact-info {

        padding: 80px 25px;

    }


    .contact-details {

        grid-template-columns: 1fr;

    }


    .contact-map {

        min-height: 500px;

    }

}
/* =========================================
   PROFESSIONAL NAVIGATION
========================================= */

.navbar {

    transition:
        background .4s ease,
        padding .4s ease;

}


.navbar-scrolled {

    background: rgba(11, 11, 9, .94);

    backdrop-filter: blur(15px);

    padding-top: 16px;

    padding-bottom: 16px;

}


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

@media (max-width: 900px) {

    .nav-links {

        position: fixed;

        inset: 0;

        width: 100%;

        height: 100vh;

        background: rgba(11, 11, 9, .98);

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 30px;

        opacity: 0;

        visibility: hidden;

        transform: translateY(-20px);

        transition:
            opacity .35s ease,
            visibility .35s ease,
            transform .35s ease;

    }


    .nav-links.mobile-open {

        opacity: 1;

        visibility: visible;

        transform: translateY(0);

    }


    .nav-links a {

        font-family: var(--serif);

        font-size: 32px;

        letter-spacing: 2px;

    }


    .mobile-menu-button {

        position: relative;

        z-index: 1100;

        width: 40px;

        height: 40px;

        padding: 5px;

    }


    .mobile-menu-button span {

        transition:
            transform .3s ease,
            opacity .3s ease;

    }


    .mobile-menu-button.active span:nth-child(1) {

        transform:
            translateY(7px)
            rotate(45deg);

    }


    .mobile-menu-button.active span:nth-child(2) {

        opacity: 0;

    }


    .mobile-menu-button.active span:nth-child(3) {

        transform:
            translateY(-7px)
            rotate(-45deg);

    }

}
/* =========================================
   SCROLL REVEAL
========================================= */

.reveal {

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}


.reveal.revealed {

    opacity: 1;

    transform: translateY(0);

}


/* =========================================
   REVIEW TRANSITION
========================================= */

.review-content blockquote {

    transition: opacity .25s ease;

}
/* =========================================
   BOOKING FORM
========================================= */

.booking {

    position: relative;

    padding: 140px 5%;

    min-height: 900px;

    display: flex;

    justify-content: center;

    overflow: hidden;

}


.booking-background {

    position: absolute;

    inset: 0;

    background:
        url("https://images.unsplash.com/photo-1602002418082-a4443e081dd1?auto=format&fit=crop&w=2200&q=90")
        center / cover;

}


.booking-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            rgba(5,5,4,.72),
            rgba(5,5,4,.88)
        );

}


.booking-container {

    position: relative;

    z-index: 2;

    width: min(900px, 100%);

}


/* HEADING */

.booking-heading {

    text-align: center;

    margin-bottom: 60px;

}


.booking-heading p {

    color: var(--gold-light);

    font-size: 10px;

    letter-spacing: 5px;

    margin-bottom: 25px;

}


.booking-heading h2 {

    font-family: var(--serif);

    font-size: clamp(55px, 7vw, 90px);

    font-weight: 400;

    line-height: .9;

}


.booking-heading h2 em {

    display: block;

    color: var(--gold-light);

}


.booking-heading > span {

    display: block;

    max-width: 550px;

    margin: 30px auto 0;

    color: var(--cream-dark);

    font-size: 13px;

    line-height: 1.8;

}


/* FORM */

.booking-form {

    padding: 50px;

    background: rgba(11,11,9,.78);

    border: 1px solid rgba(198,161,91,.35);

    backdrop-filter: blur(18px);

}


.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;

}


.form-group {

    display: flex;

    flex-direction: column;

    margin-bottom: 25px;

}


.form-group label {

    color: var(--gold-light);

    font-size: 8px;

    letter-spacing: 2px;

    margin-bottom: 10px;

}


.form-group input,
.form-group select,
.form-group textarea {

    width: 100%;

    padding: 15px 0;

    border: none;

    border-bottom: 1px solid rgba(255,255,255,.25);

    outline: none;

    background: transparent;

    color: var(--cream);

    font-family: var(--sans);

    font-size: 13px;

    transition: .3s;

}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    border-bottom-color: var(--gold);

}


.form-group input::placeholder,
.form-group textarea::placeholder {

    color: #777267;

}


.form-group select {

    cursor: pointer;

}


.form-group select option {

    background: #11110e;

    color: var(--cream);

}


.form-group textarea {

    resize: vertical;

    min-height: 100px;

}


/* SUBMIT */

.booking-submit {

    width: 100%;

    margin-top: 15px;

    padding: 18px 25px;

    border: 1px solid var(--gold);

    background: var(--gold);

    color: var(--black);

    font-family: var(--sans);

    font-size: 9px;

    letter-spacing: 2px;

    cursor: pointer;

    transition: .3s;

}


.booking-submit span {

    margin-left: 15px;

    font-size: 17px;

    transition: .3s;

}


.booking-submit:hover {

    background: var(--gold-light);

}


.booking-submit:hover span {

    margin-left: 22px;

}


.booking-note {

    margin-top: 20px;

    text-align: center;

    color: #777267;

    font-size: 9px;

}


/* MOBILE */

@media (max-width: 700px) {

    .booking {

        padding: 90px 20px;

    }


    .booking-form {

        padding: 30px 20px;

    }


    .form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }

}
/* =========================================
   LUXURY FOOTER
========================================= */

.site-footer {

    background: #0b0b09;

    color: var(--cream);

    border-top: 1px solid rgba(198,161,91,.25);

}


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

.footer-main {

    max-width: 1400px;

    margin: auto;

    padding: 90px 5%;

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1.3fr;

    gap: 60px;

}


/* =========================================
   BRAND
========================================= */

.footer-brand {

    max-width: 350px;

}


.footer-logo {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: var(--cream);

    font-family: var(--serif);

    font-size: 34px;

    letter-spacing: 3px;

}


.footer-logo span {

    color: var(--gold-light);

    font-size: 20px;

}


.footer-brand p {

    margin-top: 25px;

    max-width: 300px;

    color: #777267;

    font-size: 12px;

    line-height: 1.9;

}


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

.footer-column {

    display: flex;

    flex-direction: column;

    gap: 13px;

}


.footer-column h4 {

    margin-bottom: 15px;

    color: var(--gold-light);

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 3px;

}


.footer-column a,
.footer-column span {

    width: fit-content;

    color: #9a9488;

    font-size: 11px;

    line-height: 1.6;

    transition: .3s;

}


.footer-column a:hover {

    color: var(--gold-light);

    transform: translateX(4px);

}


/* CONTACT */

.footer-contact a:last-child {

    margin-top: 8px;

    color: var(--gold-light);

}


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

.footer-bottom {

    max-width: 1400px;

    margin: auto;

    padding: 25px 5%;

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

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

}


.footer-bottom > span {

    color: #5f5b53;

    font-size: 8px;

    letter-spacing: 1px;

}


/* SOCIAL */

.footer-socials {

    display: flex;

    gap: 15px;

}


.footer-socials a {

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(198,161,91,.25);

    color: #9a9488;

    font-size: 8px;

    letter-spacing: 1px;

    transition: .3s;

}


.footer-socials a:hover {

    border-color: var(--gold);

    color: var(--gold-light);

}


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

@media (max-width: 900px) {

    .footer-main {

        grid-template-columns: 1fr 1fr;

        gap: 50px 30px;

        padding: 70px 25px;

    }


    .footer-brand {

        grid-column: span 2;

    }


    .footer-bottom {

        padding: 25px;

        flex-direction: column;

        text-align: center;

    }

}


@media (max-width: 550px) {

    .footer-main {

        grid-template-columns: 1fr;

    }


    .footer-brand {

        grid-column: span 1;

    }

}
/* =========================================
   FINAL MOBILE POLISH
========================================= */

@media (max-width: 900px) {

    html {
        overflow-x: hidden;
    }

    body {
        overflow-x: hidden;
    }

    /* Headings */

    .experience-content h2,
    .dining-content h2,
    .gallery-heading h2,
    .packages-heading h2,
    .booking-heading h2,
    .contact-info h2 {

        letter-spacing: -0.5px;

    }


    /* Buttons */

    .booking-submit,
    .booking-primary,
    .booking-secondary,
    .contact-button {

        min-height: 52px;

        display: flex;

        align-items: center;

        justify-content: center;

    }


    /* Cards */

    .amenity-card,
    .package-card {

        transform: none !important;

    }


    /* Images */

    .gallery-item img {

        transition: transform .5s ease;

    }


    /* Prevent text overflow */

    .experience-content,
    .dining-content,
    .booking-content,
    .contact-info {

        overflow-wrap: break-word;

    }

}


/* =========================================
   SMALL PHONES
========================================= */

@media (max-width: 480px) {

    .experience-image {

        min-height: 420px;

    }


    .dining-image {

        min-height: 420px;

    }


    .contact-map {

        min-height: 420px;

    }


    .amenity-card {

        min-height: 270px;

    }


    .package-card {

        min-height: 420px;

    }


    .review-content blockquote {

        font-size: 34px;

    }


    .booking-heading h2 {

        font-size: 55px;

    }

}