@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* =========================================
   1. BRAND VARIABLES & RESET
   ========================================= */
:root {
    --primary-bg: #eae3d2;
    /* Limestone/Sand 60% */
    --secondary-1: #d9cdae;
    /* Secondary 30% */
    --secondary-2: #b89a67;
    /* Secondary 30% */
    --accent: #94b4c1;
    /* Accent 10% */
    --hover: #547792;
    /* Highlights */
    --main-text: #213448;
    /* Deep Ocean */
    --white: #ffffff;
    --body-text: "Poppins", sans-serif;
    --headline-font: "Lexend Deca", sans-serif;
}

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

html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Locked initially for Hero reveal */
    scroll-behavior: smooth;
}

body {
    font-family: var(--body-text);
    font-weight: 400;
    color: var(--main-text);
    background-color: var(--primary-bg);
    line-height: 1.6;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Utility Classes */
.highlight-one {
    color: var(--accent);
}

.highlight-two {
    color: var(--secondary-1);
}

/* =========================================
   2. HEADER & NAVIGATION
   ========================================= */

/* --- TOP FADE MASK (The Soft Ceiling) --- */
.top-fade-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 15rem;
    /* How far down the fade goes */
    z-index: 90;
    /* Below Header (1000), Above Content (20) */
    pointer-events: none;
    /* Let clicks pass through to links underneath */

    /* DEFAULT STATE (Hidden/Transparent for Hero Video) */
    background: linear-gradient(to bottom,
            rgba(234, 227, 210, 0) 0%,
            rgba(234, 227, 210, 0) 100%);

    transition: background 0.5s ease;
    /* Smooth color switching */
}

/* --- MASK STATES (Controlled by JS) --- */

/* 1. Cream Mask (For Villa & Gallery) */
body.mask-cream .top-fade-mask {
    background: linear-gradient(to bottom,
            #eae3d2 25%,
            /* Solid Cream at top */
            rgba(234, 227, 210, 0) 80%);
    /* Fade to transparent */
}

/* 2. Sand Mask (For Experience & Location) */
body.mask-sand .top-fade-mask {
    background: linear-gradient(to bottom,
            #d9cdae 25%,
            /* Solid Sand at top */
            rgba(217, 205, 174, 0) 100%);
    /* Fade to transparent */
}

/* --- Main Header Container --- */
.main-header {
    position: fixed;
    top: 25px;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 0 5%;

    /* Hidden Initially */
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
    transition: opacity 1s ease 0.8s, transform 1s ease 0.8s;
}

body.reveal-active .main-header {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1600px;
    margin: 0 auto;
}

/* Header Pillars (Layout Alignment) */
.header-pillar {
    flex: 1;
    display: flex;
    align-items: center;
}

.pillar-left {
    justify-content: flex-start;
}

.pillar-middle {
    justify-content: center;
    flex: 2;
}

.pillar-right {
    justify-content: flex-end;
}

/* --- Logo --- */
.logo {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
}

.logo-swapper {
    display: grid;
    place-items: center;
    width: auto;
    height: 50px;
    position: relative;
}

.logo-swapper img {
    grid-area: 1 / 1;
    height: 50px;
    width: auto;
    transition: opacity 0.5s ease;
}

.logo-light {
    opacity: 1;
}

.logo-dark {
    opacity: 0;
}

.brand-name {
    font-family: var(--headline-font);
    font-weight: 500;
    color: var(--primary-bg);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 1rem;
    transition: color 0.5s ease;
}

/* --- Navigation Pill & Links --- */
.nav-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    /* Padding creates gap for the slider */

    /* Glass Effect */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    transition: background 0.5s ease, border-color 0.5s ease;
}

/* The Sliding Ghost Indicator */
.nav-indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 0;
    /* Set by JS */
    height: auto;
    border-radius: 40px;
    z-index: 1;

    /* Animation */
    transition:
        transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        background-color 0.5s ease,
        border-color 0.5s ease;

    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
}

.nav-links {
    position: relative;
    z-index: 2;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0;
}

.nav-links a {
    text-decoration: none;
    color: var(--primary-bg);
    font-family: var(--body-text);
    font-size: 0.9rem;

    /* Center Text */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;

    padding: 10px 20px;
    border-radius: 40px;
    transition: color 0.3s ease;
    background: transparent;
}

.nav-links a:hover {
    color: var(--secondary-2);
}

.nav-links a.active {
    color: var(--main-text);
}

/* --- CTA Buttons --- */
.btn-cta {
    font-family: var(--headline-font);
    font-weight: 700;
    color: var(--primary-bg);
    text-decoration: none;
    font-size: 0.75rem;
    text-transform: uppercase;
    padding: 12px 24px;
    border: 1.5px solid var(--primary-bg);
    border-radius: 50px;
    transition: 0.3s ease;
}

.btn-cta:hover {
    background-color: var(--hover);
    border: 1.5px solid var(--hover);
    color: var(--primary-bg);
}

.btn-nav {
    font-family: var(--headline-font);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 50px;
    color: var(--primary-bg);
    border: 1.5px solid var(--primary-bg);
    background-color: transparent;
    transition: color 0.5s ease, border-color 0.5s ease, background-color 0.5s ease;
}

/* =========================================
   3. DARK MODE (NAV SCROLLED STATE)
   ========================================= */
/* These rules apply when scrolling over light backgrounds */

body.nav-dark .logo-light {
    opacity: 0;
}

body.nav-dark .logo-dark {
    opacity: 1;
}

body.nav-dark .brand-name {
    color: var(--main-text);
}

body.nav-dark .nav-pill {
    background: rgba(33, 52, 72, 0.05);
    border-color: rgba(33, 52, 72, 0.1);
}

body.nav-dark .nav-indicator {
    background: rgba(33, 52, 72, 0.1);
    border-color: rgba(33, 52, 72, 0.2);
    box-shadow: none;
}

body.nav-dark .nav-links a {
    color: var(--hover);
}

body.nav-dark .nav-links a:hover {
    color: var(--main-text);
}

/* FIX: Ensure active link text is dark but background is transparent */
body.nav-dark .nav-links a.active {
    color: var(--main-text);
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none;
}

body.nav-dark .btn-nav {
    color: var(--main-text);
    border-color: var(--main-text);
}

body.nav-dark .btn-nav:hover {
    background-color: var(--hover);
    border: 1.5px solid var(--hover);
    color: var(--primary-bg);
}

/* =========================================
   4. HERO SECTION
   ========================================= */
.hero-opener {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background-color: var(--primary-bg);
    overflow: hidden;
}

.hero-opener::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 250px;
    background: linear-gradient(to bottom, rgba(234, 227, 210, 0) 0%, rgba(234, 227, 210, 0.6) 60%, #eae3d2 100%);
    z-index: 6;
    pointer-events: none;
}

/* Intro Text */
.intro-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 10;
    transition: opacity 1s ease, transform 1s ease;
    will-change: transform, opacity;
}

.intro-brand {
    font-family: var(--headline-font);
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: var(--main-text);
    margin-bottom: 5px;
}

.intro-tagline {
    font-family: var(--body-text);
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--secondary-2);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Video Card Animation */
.video-card-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 350px;
    height: 450px;
    border-radius: 200px 200px 0 0;
    overflow: hidden;
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.2));
    z-index: 5;
    will-change: width, height, border-radius;
    transition: width 1s cubic-bezier(0.85, 0, 0.15, 1), height 1s cubic-bezier(0.85, 0, 0.15, 1), border-radius 1s cubic-bezier(0.85, 0, 0.15, 1);
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    backface-visibility: hidden;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 1s ease;
}

/* Explore Icon */
.explore-container {
    position: absolute;
    bottom: calc(50% - 320px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 10;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.explore-container i {
    font-size: 32px;
    color: var(--main-text);
    animation: luxuryFloat 3s ease-in-out infinite;
}

.explore-text {
    font-family: var(--headline-font);
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--main-text);
}

@keyframes luxuryFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

/* Final Content (After Reveal) */
.final-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    text-align: center;
    opacity: 0;
    pointer-events: none;
    z-index: 15;
    width: 90%;
    transition: all 1s ease 1s;
}

.final-headline {
    font-family: var(--headline-font);
    color: var(--white);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    margin-bottom: 10px;
}

.final-subtext {
    font-family: var(--body-text);
    color: var(--white);
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.btn-hero {
    color: var(--white);
    border: 1.5px solid var(--white);
    text-decoration: none;
    font-family: var(--headline-font);
    font-weight: 700;
    border-radius: 50px;
    transition: 0.4s;
}

/* --- Reveal Animation States --- */
body.reveal-active .intro-content {
    opacity: 0;
    transform: translateY(-150px);
    pointer-events: none;
}

body.reveal-active .explore-container {
    opacity: 0;
    transform: translate(-50%, 50px);
    pointer-events: none;
}

body.reveal-active .video-card-wrapper {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    box-shadow: none;
}

body.reveal-active .video-overlay {
    opacity: 1;
}

body.reveal-active .final-content {
    opacity: 1;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

body.reveal-active,
html.reveal-active {
    height: auto;
    overflow-y: visible;
    overflow-x: clip;
}

/* =========================================
   5. VILLA SECTION
   ========================================= */
.villa-section {
    position: relative;
    padding: 120px 5%;
    background-color: #eae3d2;
    color: #213448;
    z-index: 20;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}

.villa-text {
    flex: 1;
    max-width: 600px;
}

.section-subtitle {
    font-family: var(--body-text);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.85rem;
    color: var(--secondary-2);
    font-weight: 600;
    display: block;
    margin-bottom: 15px;
}

.section-title {
    font-family: var(--headline-font);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    line-height: 1.1;
    margin-bottom: 25px;
    color: var(--main-text);
}

.section-desc {
    font-family: var(--body-text);
    font-size: 1.05rem;
    line-height: 1.6;
    color: #5a6c7c;
    margin-bottom: 40px;
}

/* Room Config */
.room-configuration {
    margin-bottom: 40px;
    border-left: 2px solid var(--secondary-2);
    padding-left: 25px;
}

.config-item {
    margin-bottom: 25px;
}

.config-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.config-header i {
    font-size: 22px;
    color: var(--main-text);
}

.config-header h3 {
    font-family: var(--headline-font);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

.config-item p {
    font-family: var(--body-text);
    font-size: 0.95rem;
    color: #5a6c7c;
    margin: 0;
}

/* Amenities */
.amenities-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.amenities-list li {
    font-family: var(--headline-font);
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.6);
    padding: 10px 20px;
    border-radius: 30px;
    border: 1px solid rgba(184, 154, 103, 0.2);
}

.amenities-list i {
    color: var(--secondary-2);
    font-size: 18px;
}

/* Villa Visuals */
.villa-visuals {
    flex: 1;
    position: relative;
    height: 600px;
}

.img-tall {
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    height: 90%;
    border-radius: 200px 200px 0 0;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.img-tall img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}

.img-small {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 45%;
    height: 250px;
    border: 6px solid var(--primary-bg);
    border-radius: 0 0 100px 100px;
    overflow: hidden;
}

.img-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.villa-visuals:hover .img-tall img {
    transform: scale(1.05);
}

/* =========================================
   6. EXPERIENCE SECTION
   ========================================= */
.experience-section {
    position: relative;
    padding: 150px 5%;
    background-color: var(--secondary-1);
    color: var(--main-text);
    z-index: 20;
}

.experience-section .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8%;
    max-width: 1400px;
    margin: 0 auto;
}

.exp-header {
    width: 35%;
    position: sticky;
    position: -webkit-sticky;
    top: 30vh;
    align-self: flex-start;
    height: fit-content;
    text-align: left;
}

.exp-grid {
    width: 55%;
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.exp-card {
    width: 100%;
    cursor: pointer;
}

.exp-img {
    width: 700px;
    height: 500px;
    border-radius: 200px 200px 0 0;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.exp-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.exp-card:hover .exp-img img {
    transform: scale(1.05);
}

.exp-content h3 {
    font-family: var(--headline-font);
    font-size: 2rem;
    margin-bottom: 12px;
    color: var(--main-text);
}

.exp-content p {
    font-family: var(--body-text);
    font-size: 1.1rem;
    color: #5a6c7c;
    max-width: 90%;
}

/* =========================================
   7. GALLERY SECTION
   ========================================= */
.gallery-section {
    padding: 120px 5%;
    background-color: var(--primary-bg);
    color: var(--main-text);
    z-index: 20;
    position: relative;
    min-height: 50vh;
}

.gallery-section .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 60px;
}

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

.gallery-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 280px;
    gap: 24px;
}

.g-item {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background-color: #d9cdae;
}

.g-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block;
}

.bedroom {
    object-position: bottom;
}

.g-item:hover img {
    transform: scale(1.08);
}

.g-tall {
    grid-row: span 2;
}

.g-wide {
    grid-column: span 2;
}

/* =========================================
   8. LOCATION SECTION
   ========================================= */
.location-section {
    position: relative;
    padding: 120px 5% 40px 5%;
    background-color: var(--secondary-1);
    color: var(--main-text);
    z-index: 20;
}

.location-section .container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
    margin-bottom: 80px;
}

.location-content {
    flex: 1;
    max-width: 500px;
}

.contact-details {
    margin: 40px 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.contact-item i {
    font-size: 24px;
    color: var(--main-text);
    margin-top: 4px;
}

.contact-item h4 {
    font-family: var(--headline-font);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.contact-item p {
    font-family: var(--body-text);
    font-size: 1rem;
    line-height: 1.5;
    color: #5a6c7c;
    margin: 0;
}

.contact-item a {
    color: #5a6c7c;
    text-decoration: none;
    transition: color 0.3s;
}

.contact-item a:hover {
    color: var(--main-text);
}

.btn-dark {
    border-color: var(--main-text);
    color: var(--main-text);
}

.btn-dark:hover {
    background-color: var(--main-text);
    color: var(--secondary-1);
}

.location-map-wrapper {
    flex: 1;
    height: 500px;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.location-map-wrapper iframe {
    filter: sepia(20%) contrast(0.9);
    transition: filter 0.5s ease;
}

.location-map-wrapper:hover iframe {
    filter: none;
}

/* =========================================
   9. FOOTER
   ========================================= */
.main-footer {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 40px;
}

.footer-line {
    width: 100%;
    height: 1px;
    background-color: rgba(33, 52, 72, 0.15);
}

.footer-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
    margin-bottom: 25px;
}

/* Left: Brand */
.footer-brand {
    flex: 1;
    max-width: 400px;
}

.footer-logo-link {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    margin-bottom: 15px;
}

.footer-logo-link img {
    height: 40px;
    width: auto;
}

.brand-name-footer {
    font-family: var(--headline-font);
    font-weight: 700;
    color: var(--main-text);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 1.1rem;
}

.footer-tagline {
    font-family: var(--body-text);
    font-size: 0.95rem;
    color: #5a6c7c;
    line-height: 1.5;
    margin-left: 5px;
}

/* Right: Content */
.footer-nav-group {
    display: flex;
    gap: 80px;
}

.footer-row {
    display: flex;
    gap: 100px;
    align-items: flex-start;
    max-width: max-content;
}

.footer-heading {
    font-family: var(--headline-font);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--secondary-2);
    margin-bottom: 12px;
}

/* Footer Links Row */
.footer-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 25px;
    align-items: center;
}

.footer-links a {
    text-decoration: none;
    color: var(--main-text);
    font-family: var(--body-text);
    font-size: 0.95rem;
    white-space: nowrap;
    transition: transform 0.3s ease, color 0.3s ease;
}

.footer-links a:hover {
    transform: translateY(-1px);
    color: #5a6c7c;
}

/* Footer Contact */
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-decoration: none;
    color: var(--main-text);
    font-family: var(--body-text);
    font-size: 0.95rem;
    line-height: 1.5;
    transition: opacity 0.3s ease;
}

.contact-link i {
    font-size: 18px;
    margin-top: 3px;
    color: var(--main-text);
}

.contact-link:hover {
    opacity: 0.7;
}

/* Footer Socials */
.footer-socials {
    display: flex;
    gap: 48px;
    margin-top: 24px;
}

.footer-socials a {
    color: var(--main-text);
    font-size: 24px;
    text-decoration: none;
    border: none;
    display: inline-block;
    transition: transform 0.3s ease;
}

.footer-socials a:hover {
    transform: translateY(-1px);
}

/* Footer Bottom */
.footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(33, 52, 72, 0.05);
    padding-top: 25px;
    padding-bottom: 25px;
}

.copyright {
    font-family: var(--body-text);
    font-size: 0.8rem;
    color: #5a6c7c;
    opacity: 0.9;
}

/* =========================================
   10. RESPONSIVE MEDIA QUERIES
   ========================================= */

/* (Max Width: 1440px) */
@media screen and (max-width: 1440px) {

    .villa-section,
    .experience-section,
    .gallery-section,
    .location-section,
    .main-footer {
        padding-right: 5%;
        padding-left: 5%;
    }

}

/* --- SMALL LAPTOPS (Max Width: 1024px) --- */
@media screen and (max-width: 1024px) {

    .villa-section,
    .experience-section,
    .gallery-section,
    .location-section,
    .main-footer {
        padding: 80px 5%;
    }

    /* typography scaling */
    .section-title {
        font-size: 2.5rem;
    }

    /* 1. Header & Nav Fixes (Fit everything on one line) */
    .header-container {
        padding: 0 2%;
        /* Reduce side padding to give more room */
    }

    .logo-swapper img {
        height: 35px;
        /* Make logo slightly smaller */
    }

    .brand-name {
        font-size: 0.85rem;
        /* Scale down brand text */
        letter-spacing: 0.5px;
    }

    .nav-links {
        gap: 0px;
        /* Remove gap between links */
    }

    .nav-links a {
        font-size: 0.8rem;
        /* Smaller text size */
        padding: 8px 12px;
        /* Reduce padding so pill fits "The Villa" */
        white-space: nowrap;
        /* Force "The Villa" to stay on one line */
    }

    .btn-cta {
        padding: 10px 18px;
        /* Compact button */
        font-size: 0.7rem;
    }

    /* 2. Villa Section: Amenities in Two Lines */
    .amenities-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Force 2 columns */
        gap: 15px;
    }

    .amenities-list li {
        width: 100%;
        justify-content: center;
        /* Center the text in the bubble */
        padding: 4%;
    }

    /* --- REVISED GALLERY BENTO LAYOUT (1024px) --- */
    .gallery-grid {
        /* Define 2 columns */
        grid-template-columns: 1fr 1fr;
        /* Define fixed height rows for consistency */
        grid-auto-rows: 300px;
        gap: 20px;

        /* The Bento Map: We define named areas for a 2-column, 4-row grid */
        grid-template-areas:
            "living living"
            /* Row 1: Wide Living Room spans top */
            "food   room"
            /* Row 2: Two small items side-by-side */
            "night  night"
            /* Row 3: Wide Eve Shot spans middle */
            "walk   sitout";
        /* Row 4: The original Tall image (walk) next to bottom image (sitout) */
    }

    /* Reset existing spans so they don't conflict with the new map */
    .g-tall,
    .g-wide {
        grid-row: auto;
        grid-column: auto;
    }

    /* Assign HTML elements to grid areas based on their initial order */

    /* 1. Walkway (Original Top Tall Image) -> Moves to BOTTOM LEFT area */
    .gallery-grid .g-item:nth-child(1) {
        grid-area: walk;
    }

    /* 2. Living Room (Top Wide) -> Top Wide area */
    .gallery-grid .g-item:nth-child(2) {
        grid-area: living;
    }

    /* 3. Rice & Curry -> Middle Left area */
    .gallery-grid .g-item:nth-child(3) {
        grid-area: food;
    }

    /* 4. Bedroom -> Middle Right area */
    .gallery-grid .g-item:nth-child(4) {
        grid-area: room;
    }

    /* 5. Eve Shot (Bottom Wide) -> Below middle area */
    .gallery-grid .g-item:nth-child(5) {
        grid-area: night;
    }

    /* 6. Verandha (Original Bottom Right) -> BOTTOM RIGHT area */
    .gallery-grid .g-item:nth-child(6) {
        grid-area: sitout;
    }

    /* experience section - squeeze layout */
    .exp-img {
        width: 100%;
        height: 400px;
    }

    .container {
        gap: 40px;
    }

    /* 4. Location Section: Equal Top/Bottom Gaps */
    .location-section {
        /* Sets top and bottom padding to 80px for perfect balance */
        padding: 80px 5% 80px 5%;
    }

    .location-section .container {
        margin-bottom: 0;
        /* Remove extra margin that causes uneven gaps */
    }

    /* 2. FOOTER CONTAINER: Equal Gaps */
    .main-footer {
        padding-top: 40px;
        padding-bottom: 0px;
    }

    /* 3. GRID LAYOUT: Side-by-Side */
    .footer-grid {
        display: flex;
        flex-direction: row;
        /* Horizontal Layout */
        justify-content: space-between;
        /* Push Left & Right */
        align-items: flex-start;
        gap: 40px;
        margin-bottom: 40px;
        text-align: left;
    }

    /* 4. BRAND SECTION (Left Side) */
    .footer-brand {
        flex: 0 0 35%;
        /* Fixed width */
        max-width: 35%;
        margin-right: auto;
        /* Push neighbors away */
    }

    .footer-logo-link {
        justify-content: flex-start;
    }

    .brand-name-footer {
        font-size: 1rem;
    }

    .footer-tagline {
        font-size: 0.85rem;
        margin-left: 0;
    }

    /* 5. LINKS SECTION (Right Side) */
    .footer-nav-group {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        /* Align group to right */
        gap: 60px;
    }

    .footer-col {
        text-align: left;
    }

    /* 6. TEXT RESIZING */
    .footer-heading {
        font-size: 0.8rem;
        letter-spacing: 1px;
        margin-bottom: 15px;
    }

    .footer-links {
        gap: 20px;
    }

    .footer-links a {
        font-size: 0.85rem;
        line-height: 0.5;
    }

    .contact-link {
        font-size: 0.85rem;
        line-height: 1.8;
    }

    .contact-link i {
        margin-top: 2px;
    }

    /* Social Icons */
    .footer-socials {
        justify-content: flex-start;
        gap: 25px;
        margin-top: 20px;
    }

    .footer-socials a {
        font-size: 20px;
    }

    /* 7. COPYRIGHT BAR */
    .footer-bottom {
        padding-top: 25px;
    }

    .copyright {
        font-size: 0.75rem;
    }
}

/* Tablets (Max Width: 768px) */

@media screen and (max-width: 768px) {

    /* 1. HEADER CONTAINER: Force Row & Maximize Width */
    .header-container {
        flex-direction: row;
        /* KEEP IT HORIZONTAL */
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        /* Tiny gap to squeeze everything in */
        padding: 0 10px;
        /* Reduce container padding */
    }

    /* 2. PILLARS: Adjust space allocation */
    .header-pillar {
        flex: 0 1 auto;
        /* Don't force them to grow evenly */
    }

    .pillar-left {
        margin-right: auto;
        /* Push Logo to far left */
    }

    .pillar-right {
        margin-left: auto;
        /* Push Button to far right */
    }

    .pillar-middle {
        flex: 1;
        /* Nav takes all remaining space */
        justify-content: center;
        min-width: 0;
        /* Critical: Allows flex child (nav) to shrink/scroll */
    }

    /* 3. LOGO: Shrink it down */
    .logo {
        gap: 8px;
    }

    .logo-swapper img {
        height: 32px;
        /* Smaller Logo Icon */
    }

    .brand-name {
        font-size: 0.65rem;
        /* Smaller Brand Text */
        letter-spacing: 0.4px;
    }

    /* 4. NAV PILL: The "Instagram Story" Scroll Mode */
    /* This allows the menu to stay horizontal even if it's too wide */
    .nav-pill {
        display: flex;
        overflow-x: auto;
        /* Enable horizontal scroll */
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        /* Constrain to available middle space */
        padding: 4px;

        /* Hide Scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .nav-pill::-webkit-scrollbar {
        display: none;
    }

    .nav-links {
        gap: 0;
        /* Remove gap, use padding instead */
        padding-right: 10px;
        /* buffer for scroll end */
    }

    .nav-links a {
        font-size: 0.7rem;
        /* Tiny but readable text */
        padding: 6px 12px;
        /* Tighter buttons */
        white-space: nowrap;
        /* Never break lines */
    }

    /* 5. CTA BUTTON: Compact Version */
    .btn-cta {
        padding: 8px 14px;
        font-size: 0.6rem;
        white-space: nowrap;
    }

    /* The Villa Section */
    .villa-section .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 50px;
    }

    .villa-text {
        width: 100%;
        max-width: 100%;
    }

    /* 2. AMENITIES: Grid Layout (Clean 2x2) */
    .amenities-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Two equal columns */
        gap: 15px;
        margin-top: 20px;
    }

    .amenities-list li {
        width: 100%;
        justify-content: flex-start;
        padding: 12px 15px;
    }

    .villa-visuals {
        display: flex;
        flex-direction: row;
        /* Side by Side */
        align-items: flex-end;
        /* Align bottoms */
        justify-content: center;
        /* Center the group */
        width: 100%;
        height: auto;
        /* Grows with content */
        margin-top: 40px;
        position: relative;
    }

    /* 2. Tall Arch Image (Background) */
    .img-tall {
        position: relative;
        width: 55%;
        /* Width of the arch */
        height: 400px;
        /* Height of the arch */
        border-radius: 200px 200px 0 0;
        z-index: 1;
        /* Sit behind */
        top: auto;
        right: auto;
        /* Reset positions */
    }

    /* 3. Small Bowl Image (Foreground) */
    .img-small {
        position: relative;
        width: 50%;
        /* Wide enough to cover part of the arch */
        height: 260px;
        /* Height of the bowl */
        border-radius: 0 0 100px 100px;
        z-index: 2;
        /* Sit on top */
        /* THE KEY: Pull it left to create the overlap */
        margin-left: -50px;
        /* Create a "Cutout" effect with a border matching the background */
        border: 2px solid var(--primary-bg);
        left: auto;
        bottom: auto;
        /* Reset positions */
    }

    .footer-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
}

/* 12. MOBILE LARGE (Max Width: 425px) */

/* Default: Hide Mobile Overlay & Toggle on Desktop */
.mobile-menu-overlay,
.menu-toggle {
    display: none;
}

@media screen and (max-width: 480px) {

    .intro-content {
        top: 0 !important;
        /* Change from 100px to 60px to move text up */
        padding-top: 60px !important; 
    }

    /* 2. REDUCE VIDEO CARD SIZE */
    /* Add this new rule inside the media query */
    .video-card-wrapper {
        /* Reduce width to fit inside small screens (was 350px) */
        width: 260px !important; 
        /* Reduce height to stop overlapping text (was 450px) */
        height: 360px !important; 
    }

    body.reveal-active .video-card-wrapper {
        width: 100vw !important;
        height: 100vh !important;
        border-radius: 0 !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate3d(-50%, -50%, 0) !important;
    }

    /* Optional: Slightly reduce font size so it doesn't look crowded */
    .intro-brand {
        font-size: 2.2rem !important; 
    }

    .intro-tagline {
        font-size: 0.75rem !important;
        letter-spacing: 2px;
    }

    /* 1. HIDE DESKTOP ELEMENTS */
    .header-pillar.pillar-middle,
    .desktop-only-btn {
        display: none !important;
    }

    /* --- F. MOBILE TYPOGRAPHY & SPACING --- */

    /* 1. Main Section Title ("A Tropical Home...") */
    .section-title {
        font-size: 2rem !important;
        /* Reduced from 2.5rem */
        line-height: 1.3 !important;
        margin-bottom: 20px !important;
    }

    /* 2. Section Subtitle ("THE SANCTUARY") */
    .section-subtitle {
        font-size: 0.75rem !important;
        letter-spacing: 2px !important;
        margin-bottom: 10px !important;
    }

    /* 3. Main Description Paragraph */
    .section-desc {
        font-size: 0.9rem !important;
        /* Smaller font (was 1.05rem) */
        line-height: 1.9 !important;
        /* Increased spacing (was 1.6) */
        margin-bottom: 35px !important;
    }

    /* 4. Room Config Headers ("The Main House") */
    .config-header h3 {
        font-size: 1rem !important;
        /* Slightly smaller */
        margin-bottom: 5px !important;
    }

    /* 5. Room Config Descriptions */
    .config-item p {
        font-size: 0.85rem !important;
        /* Smaller for details */
        line-height: 1.8 !important;
        /* More breathing room */
        opacity: 0.9;
    }

    /* 2. MENU TOGGLE BUTTON (Dynamic Theme) */
    .menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        font-size: 24px;
        cursor: pointer;
        z-index: 1005 !important;
        position: relative;
        border-radius: 50%;

        /* DEFAULT STATE (For Dark Backgrounds like Hero) */
        /* Use Sand/Primary Color */
        color: var(--primary-bg);

        /* Smooth Color Swap Animation */
        transition: all 0.3s ease;
    }

    body.nav-dark .menu-toggle {
        color: var(--main-text);
    }

    /* 3. HEADER LAYOUT FIXES */
    .header-container {
        padding: 0 15px;
    }

    .header-pillar.pillar-right {
        flex: 0 0 auto;
        z-index: 1002;
    }

    .pillar-left {
        z-index: 1002;
    }

    .pillar-left .logo-swapper img {
        height: 40px;
    }

    .pillar-left .brand-name {
        font-size: 0.8rem;
        letter-spacing: 1px;
    }

    /* 4. THE MOBILE OVERLAY (Glass Effect) */
    .mobile-menu-overlay {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;

        /* Glass Background */
        background: rgba(234, 227, 210, 0.285);
        /* High opacity for readability */
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);

        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 999;

        /* Animation States */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all 0.4s ease;
    }

    /* OPEN STATE */
    body.menu-open .mobile-menu-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* 5. CONTENT STYLING */
    .mobile-links {
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 30px;
        margin-bottom: 100px;
    }

    .mobile-links a {
        font-family: var(--headline-font);
        font-size: 1.8rem;
        color: var(--primary-bg);
        text-decoration: none;
        font-weight: 500;

        /* Slide Up Animation */
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.3s ease;
    }

    body.menu-open .mobile-links a {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
    }

    .btn-mobile-menu {
        border: 1px solid var(--primary-bg);
        color: var(--primary-bg);
        font-size: 1rem;
        padding: 16px 40px;
        border-radius: 50px;
        /* Ensure rounded corners */
        text-decoration: none;

        /* Slide Up Animation */
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.3s ease;
    }

    body.nav-dark .btn-mobile-menu {
        color: var(--main-text);
        border-color: var(--main-text);
    }

    body.nav-dark .mobile-links a {
        color: var(--main-text);
    }

    body.menu-open .btn-mobile-menu {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s;
    }

    /* 2. VILLA SECTION LAYOUT */
    .villa-section {
        padding-top: 60px !important;
        /* Reduce top padding for mobile */
        padding-bottom: 60px !important;
    }

    /* Stack Container Vertically */
    .villa-section .container {
        flex-direction: column !important;
        gap: 40px !important;
    }

    /* Full Width Text */
    .villa-text {
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 0 !important;
    }

    /* 3. VILLA IMAGES (Clean Vertical Stack) */
    .villa-visuals {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        /* Allow it to grow */
        margin-top: 10px !important;
        gap: 0 !important;
        /* No gap, let them touch or overlap slightly */
    }

    .amenities-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Two equal columns */
        gap: 15px;
        margin-top: 20px;
    }

    .amenities-list li {
        width: 100%;
        justify-content: flex-start;
        font-size: 0.79rem;
        padding: 10px 8px;
    }

    /* Top Image (Arch) */
    .img-tall {
        position: relative !important;
        width: 100% !important;
        height: 300px !important;
        top: auto !important;
        right: auto !important;
        border-radius: 150px 150px 0 0 !important;
        /* Maintain Arch shape */
        z-index: 1;
    }

    /* Bottom Image (Bowl/Rectangle) */
    .img-small {
        position: relative !important;
        width: 100% !important;
        height: 250px !important;
        left: auto !important;
        bottom: auto !important;

        /* Slight negative margin to pull it up nicely */
        margin-top: -2px !important;
        margin-left: 0 !important;

        border: none !important;
        border-top: 3px solid var(--primary-bg) !important;
        border-radius: 0 !important;
        /* Soft bottom corners */
        z-index: 2;
    }

    /* --- G. EXPERIENCE SECTION (Mobile Layout) --- */

    .experience-section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    /* 1. Stack Elements Vertically */
    .experience-section .container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 40px !important;
    }

    /* 2. Header (Text) on Top */
    .exp-header {
        width: 100% !important;
        position: relative !important;
        /* Disable sticky */
        top: auto !important;
        height: auto !important;
        margin-bottom: -20px !important;
        text-align: center !important;
    }

    /* 3. Grid (Images) on Bottom */
    .exp-grid {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 50px !important;
        /* Space between each experience card */
    }

    /* 4. Card Styling */
    .exp-card {
        width: 100% !important;
    }

    /* 5. Image Size for Mobile */
    .exp-img {
        width: 100% !important;
        height: 280px !important;
        /* Reduced height for mobile screens */
        border-radius: 150px 150px 0 0 !important;
        /* Keep the signature arch */
        margin-bottom: 20px !important;
    }

    /* Content below image */
    .exp-content h3 {
        text-align: center !important;
        font-size: 1.5rem !important;
        margin-bottom: 10px !important;
    }

    .exp-content p {
        text-align: center !important;
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }

    /* --- H. GALLERY SECTION (Custom Mobile Heights) --- */
    .gallery-grid {
        grid-template-rows: 260px 400px 260px 400px !important;
        grid-auto-rows: 450px !important;
    }

    /* Ensure images stretch to fill the new height */
    .g-item {
        height: 100% !important;
    }

    .g-item img {
        height: 100% !important;
        object-fit: cover !important;
    }

    .bedroom {
        object-position: left !important;
    }

    /* --- I. LOCATION SECTION (Mobile Layout) --- */

    .location-section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    /* 1. Stack Vertically (Text Top, Map Bottom) */
    .location-section .container {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 40px !important;
    }

    /* 2. Text Content Full Width */
    .location-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
    }

    /* 3. Map Styling */
    .location-map-wrapper {
        width: 100% !important;
        height: 300px !important;
        min-height: 300px !important; /* Forces the box open */
        flex: 0 0 300px !important;
        border-radius: 20px !important;
        /* Keep rounded corners */
        margin-top: 10px !important;
    }

    /* --- J. FOOTER SECTION (Vertical Stack) --- */

    .main-footer {
        padding-top: 60px !important;
        padding-bottom: 0px !important;
    }

    /* 1. Master Stack */
    .footer-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
        align-items: center !important;
        text-align: center !important;
        margin-bottom: 30px !important;
    }

    /* 2. Brand Section (Force Center) */
    .footer-brand {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .footer-logo-link {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        /* Crucial for centering */
    }

    .brand-name-footer {
        font-size: 1.1rem !important;
        align-items: center !important;
        text-align: center !important;
    }

    .footer-tagline {
        /* REMOVED: margin-left: auto !important; */
        margin-left: auto !important;
        margin-right: auto !important;
        /* ADD THIS (or just use margin: 0 auto) */

        margin-top: 15px !important;
        font-size: 0.9rem !important;
        text-align: center !important;

        display: flex !important;
        justify-content: center !important;
        /* ADD THIS to center flex items */

        width: 100% !important;
        white-space: nowrap !important;
    }

    /* 3. Navigation Group */
    .footer-nav-group {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 40px !important;
        align-items: center !important;
    }

    .footer-col {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .footer-heading {
        text-align: center !important;
        margin-bottom: 20px !important;
        display: block !important;
    }

    /* 4. Links List (Increased Gap) */
    .footer-links {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 20px !important;
        /* INCREASED GAP */
        width: 100% !important;
    }

    .footer-links a {
        font-size: 0.8rem !important;
    }

    /* 5. Contact Info (Decreased Gap) */
    .footer-contact {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        /* DECREASED GAP (Tighter) */
        width: 100% !important;
    }

    .contact-link {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* 6. Social Icons */
    .footer-socials {
        margin-top: 30px !important;
        justify-content: center !important;
        gap: 30px !important;
        display: flex !important;
        width: 100% !important;
    }

    /* 7. Bottom Copyright */
    .footer-bottom {
        text-align: center !important;
        padding-top: 20px !important;
        padding-bottom: 30px !important;
        width: 100% !important;
        border-top: 1px solid rgba(33, 52, 72, 0.1) !important;
    }
}