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

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

html {

    scroll-behavior: smooth;

    scroll-padding-top: 120px;

    -webkit-text-size-adjust: 100%;

}

a:focus-visible,
button:focus-visible {

    outline: 3px solid var(--gold);

    outline-offset: 4px;

    border-radius: 8px;

}

/* =====================================
   Keyboard Focus
===================================== */

input:focus-visible,
textarea:focus-visible {

    outline: 3px solid var(--gold);

    outline-offset: 4px;

    border-radius: 6px;

}

:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 4px;
}

img {

    max-width: 100%;

    display: block;

    height: auto;

    user-select: none;

    -webkit-user-drag: none;

}


::selection {

    background: var(--gold);

    color: #fff;

}

section {

    position: relative;

    padding: var(--section-padding) 8%;

    scroll-margin-top: 110px;

}

body {
    font-family: var(--body-font);
    background: var(--secondary);
    color: var(--text);
    overflow-x: hidden;
    line-height: 1.6;
}

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

ul {
    list-style: none;
}

section:not(.hero)::before {

    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 140px;
    height: 2px;

    background: linear-gradient(90deg,

            transparent,

            #d4af37,

            transparent);

}

.container {
    width: min(100%, var(--container));
    margin: auto;
}

/* ==========================================
   ACCESSIBILITY SKIP LINK
========================================== */

.skip-link {

    position: absolute;

    top: 10px;
    left: 10px;

    transform: translateY(-200%);

    z-index: 10000;

    padding: 10px 16px;

    background: var(--dark);

    color: var(--light);

    text-decoration: none;

    border-radius: 8px;

    transition: transform .2s ease;

}

.skip-link:focus {

    transform: translateY(0);

}

/* ==========================================
   LOADER
========================================== */

#loader {
    position: fixed;
    inset: 0;
    background: var(--secondary);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: var(--loader);
    transition: .8s;
}

#loader img {
    width: 440px;
    animation: logoFloat 2s ease-in-out infinite;
    margin-bottom: -8%;
}

#loader h1 {
    margin-top: 25px;
    font-family: var(--title-font);
    font-size: 2.8rem;
    color: var(--accent);
    letter-spacing: 3px;
}

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

header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    min-height: 80px;

    z-index: 2000;

    padding: 6px 0;

    transition:
        background .4s ease,
        padding .4s ease,
        box-shadow .4s ease;
}

header.scrolled {

    padding: 4px 0;

    background: rgba(255, 255, 255, .96);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

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

    box-shadow:
        0 12px 35px rgba(0, 0, 0, .12);

}

/* ------------------------------------------
   NAV CONTAINER
------------------------------------------ */

.nav-container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    min-height: 70px;

}

nav a {
    font-weight: 600;
    color: #FFFFFF;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 1);
    transition: var(--transition);
}

nav a:hover {
    color: var(--accent);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}

/* ------------------------------------------
   LOGO
------------------------------------------ */

.logo {

    display: flex;

    align-items: center;

    flex-shrink: 0;

}

.logo img {

    width: 180px;

    height: auto;

    display: block;

    transition:
        transform .45s ease,
        filter .45s ease,
        width .35s ease;

    filter:
        drop-shadow(0 3px 8px rgba(0, 0, 0, .45));

}

.logo:hover img {

    transform: scale(1.05);

    filter:
        drop-shadow(0 12px 30px rgba(212, 175, 55, .35));

}

header.scrolled .logo img {

    width: 150px;

}

/* ------------------------------------------
   DESKTOP NAVIGATION
------------------------------------------ */

nav {

    display: flex;

    align-items: center;

}

.nav-links {

    display: flex;

    align-items: center;

    gap: 35px;

    margin: 0;

    padding: 0;

    list-style: none;

}

.nav-links a {

    position: relative;

    display: inline-block;

    padding: 8px 2px;

    color: white;

    font-size: .98rem;

    font-weight: 500;

    letter-spacing: 1px;

    text-transform: uppercase;

    transition:
        color .35s ease,
        transform .35s ease;

}

header.scrolled .nav-links a {

    color: var(--dark);

}

.nav-links a:hover {

    color: var(--gold);

    transform: translateY(-2px);

}

.nav-links a::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -6px;

    width: 0;

    height: 2px;

    border-radius: 20px;

    background:
        linear-gradient(90deg,
            #b8860b,
            #d4af37,
            #f3d77a);

    transform: translateX(-50%);

    transition: width .35s ease;

}

.nav-links a:hover::after,
.nav-links a.active::after {

    width: 100%;

}

.nav-links a.active {

    color: var(--gold);

}

/* ------------------------------------------
   LANGUAGE SWITCHER
------------------------------------------ */

.language-switcher {

    position: relative;

    display: flex;

    align-items: center;

    flex-shrink: 0;

    margin-left: auto;

    margin-top: 0;

}

.language-toggle {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 16px;

    border:
        1px solid rgba(212, 175, 55, .35);

    border-radius: 50px;

    background:
        rgba(255, 255, 255, .08);

    color: var(--gold);

    cursor: pointer;

    font-size: .9rem;

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

    backdrop-filter: blur(12px);

}

.language-toggle:hover {

    background:
        rgba(212, 175, 55, .15);

    transform: translateY(-2px);

}

.language-dropdown {

    position: absolute;

    top: calc(100% + 10px);

    right: 0;

    min-width: 170px;

    padding: 6px;

    background: white;

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .12);

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

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

    z-index: 2100;

}

.language-dropdown.show {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}

.language-dropdown button {

    width: 100%;

    border: none;

    background: transparent;

    padding: 12px 14px;

    text-align: left;

    cursor: pointer;

    font-family: inherit;

    font-size: .95rem;

    color: var(--dark);

    transition:
        background .25s ease,
        color .25s ease;

}

.language-dropdown button:hover {

    background: #f8f5ef;

    color: var(--gold);

}


/* ------------------------------------------
   MOBILE MENU BUTTON
------------------------------------------ */

.menu-btn {

    display: none;

    width: 48px;

    height: 48px;

    padding: 0;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 6px;

    background: transparent;

    border: none;

    cursor: pointer;

    z-index: 2100;


}

.menu-btn span {

    display: block;

    width: 28px;

    height: 2px;

    border-radius: 10px;

    background: currentColor;

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

}

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

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

}

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

    opacity: 0;

}

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

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

}


/* ------------------------------------------
   MOBILE MENU OVERLAY
------------------------------------------ */

.menu-overlay {

    position: fixed;

    inset: 0;

    background:
        rgba(0, 0, 0, .45);

    opacity: 0;

    visibility: hidden;

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

    z-index: 1400;

}

.menu-overlay.active {

    opacity: 1;

    visibility: visible;

}

body.menu-open {

    overflow: hidden;

}

button {

    cursor: pointer;

}

button:disabled {

    cursor: not-allowed;

    opacity: .6;

}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    background: black;

    padding: 0;

}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.48),
            rgba(0, 0, 0, 0.18),
            rgba(0, 0, 0, 0.38));
    z-index: 2;
}

.hero-content {

    position: relative;

    z-index: 5;

    max-width: 900px;

    margin: auto;

    text-align: center;

    padding: 0 20px;

    color: white;

    text-shadow:
        0 3px 12px rgba(0, 0, 0, 0.65),
        0 1px 3px rgba(0, 0, 0, 0.8);
}

.hero-content .btn-primary,
.hero-content .btn-secondary {
    text-shadow: none;
}

.hero-subtitle {

    display: block;

    letter-spacing: 8px;

    text-transform: uppercase;

    color: var(--gold);

    margin-bottom: 20px;

    font-size: 1.5rem;

    font-weight: 600;

    opacity: 0;

    animation: fadeUp .8s ease forwards;
    animation-delay: .3s;

}

.hero h1 {

    opacity: 0;

    animation: fadeUp 1s ease forwards;
    animation-delay: .8s;

    font-size: clamp(2.8rem, 6vw, 4.8rem);

    line-height: 1.08;

    font-weight: 700;

    margin-bottom: 28px;

    text-shadow:
        0 10px 30px rgba(0, 0, 0, .45);

}

.hero p {

    font-size: 1.2rem;

    margin-bottom: 40px;

    opacity: 0;

    animation: fadeUp 1s ease forwards;
    animation-delay: 1.3s;

}

.hero-buttons {

    display: flex;

    justify-content: center;

    gap: 28px;

    flex-wrap: wrap;

    opacity: 0;

    animation: fadeUp 1s ease forwards;
    animation-delay: 1.8s;

}




.btn-primary,
.btn-secondary {

    padding: 16px 38px;

    border-radius: 50px;

    text-decoration: none;

    transition: .35s;

    font-weight: 600;

}

.btn-primary {

    position: relative;
    overflow: hidden;

    background: linear-gradient(135deg,
            #b8860b,
            #d4af37,
            #f3d77a,
            #d4af37);

    color: #111;

    font-weight: 600;

    box-shadow:
        0 15px 40px rgba(212, 175, 55, .35),
        0 0 35px rgba(212, 175, 55, .18);

}

.btn-primary::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 60%;
    height: 100%;

    background: rgba(255, 255, 255, .4);

    transform: skewX(-25deg);

    transition: .8s;

}

.btn-primary:hover::before {

    left: 150%;

}

.btn-primary:hover,
.btn-secondary:hover {

    transform:

        translateY(-4px) scale(1.03);

}

.btn-secondary {

    border: 2px solid white;

    color: white;

}

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

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

.hero {

    opacity: 0;

    transform: scale(1.03);

    transition:
        opacity 1.2s ease,
        transform 1.8s ease;

}

.hero.hero-loaded {

    opacity: 1;

    transform: scale(1);

}

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

.about {

    padding: 120px 0;

    background: #f8f5ef;

}

.about-container {

    display: grid;

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

    gap: 80px;

    align-items: center;

}

.about-image {

    position: relative;

    overflow: hidden;

    border-radius: var(--radius);

    box-shadow: 0 25px 60px rgba(0, 0, 0, .15);

}

.about-image img {

    width: 100%;

    height: 100%;

    min-height: 600px;

    object-fit: cover;

    border-radius: inherit;

    display: block;

    transition: .7s;

}

.about-image:hover img {

    transform: scale(1.04);

}

/* ==========================================
   ABOUT SECTION — TYPOGRAPHY
========================================== */

.about-content .section-subtitle {
    font-size: 30px;
    font-weight: 600;
}

.about-content h2,
.about .section-title {
    font-size: 52px;
    line-height: 1.15;
}

.about-content p {
    font-size: 18px;
    line-height: 1.9;
}

.about-content {

    max-width: 650px;

}


.about-content h2 {

    margin-bottom: 25px;

    text-align: left;

}

.about-content>p {

    margin-bottom: 35px;

    color: var(--text);

    font-size: var(--text-size);

    line-height: 1.9;

}

.about-stats {

    display: grid;

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

    gap: 20px;

    margin-bottom: 40px;

}

.stat {

    padding: 25px 15px;

    text-align: center;

    background: var(--light);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

}

.stat h3 {

    margin-bottom: 8px;

    color: var(--gold);

    font-family: var(--title-font);

    font-size: 2rem;

}

.stat p {

    color: var(--text);

    font-size: var(--small);

}

.section-title {

    margin-bottom: 50px;

    color: var(--dark);

    font-family: var(--title-font);

    font-size: clamp(2.5rem,
            5vw,
            3.5rem);

    line-height: 1.1;

    text-align: center;

}

.section-subtitle {

    display: block;

    margin-bottom: 12px;

    color: var(--gold);

    font-size: .9rem;

    text-transform: uppercase;

    letter-spacing: 4px;

    font-weight: 600;

    text-align: center;

}

/* ===========================
   LUXURY GALLERY
=========================== */

.gallery {

    background: #f3e9e7;

}

.gallery-filters {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

    margin-bottom: 50px;

}

.gallery-grid {

    display: grid;

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

    grid-auto-rows: 260px;

    gap: 18px;

}

.gallery-item {

    position: relative;

    overflow: hidden;

    border-radius: var(--radius);

    cursor: pointer;

    background: #eee;

}

.gallery-item.hidden {
    display: none !important;
}

.gallery-item.large {

    grid-row: span 2;

}

.gallery-item.wide {

    grid-column: span 2;

}

.gallery-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
    transition:
        transform .7s ease,
        filter .7s ease;

}

.gallery-item:hover {

    transform: translateY(-8px);

}

.gallery-item:hover img {

    transform: scale(1.07);

    filter: brightness(.9);

}

.gallery-item::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(rgba(0, 0, 0, 0),
            rgba(0, 0, 0, .45));

    opacity: 0;

    transition: .35s;

    z-index: 1;
    pointer-events: none;
}

.gallery-item::after {

    content: "+";

    position: absolute;

    top: 50%;
    left: 50%;

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

    color: white;

    font-size: 42px;

    opacity: 0;

    transition: .35s;

    z-index: 2;
    pointer-events: none;
}

.gallery-item:hover::before,
.gallery-item:hover::after {

    opacity: 1;

}

.gallery .section-subtitle {
    font-size: 25px;
}

.filter-btn {

    padding: 11px 22px;

    border: 1px solid rgba(176, 141, 87, .35);

    border-radius: 50px;

    background: transparent;

    color: var(--dark);

    font-family: var(--body-font);

    font-size: .9rem;

    font-weight: 500;

    cursor: pointer;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;

}

.filter-btn:hover {

    transform: translateY(-2px);

    border-color: var(--gold);

    color: var(--gold);

}

.filter-btn.active {

    background: var(--gold);

    border-color: var(--gold);

    color: white;

}

/* ===========================
   BEFORE & AFTER
=========================== */

.before-after {

    padding: 120px 0;

    background: white;

}

.before-after .section-subtitle {
    font-size: larger;
}

.comparison-container {

    position: relative;

    width: min(100%, 1000px);

    aspect-ratio: 16 / 9;

    margin: 60px auto 0;

    overflow: hidden;

    border-radius: var(--radius);

    background: #ddd;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .15);

    user-select: none;

    -webkit-user-select: none;

}

.comparison-container .before-image,
.comparison-container .after-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}

.comparison-container .after-image {

    z-index: 2;

    clip-path: inset(0 0 0 50%);

}

.comparison-container img {

    position: absolute;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.comparison-slider {

    position: absolute;

    top: 0;

    left: 50%;

    width: 3px;

    height: 100%;

    background: white;

    cursor: ew-resize;

    z-index: 5;

    transform: translateX(-50%);

    pointer-events: none;

}

.slider-line {

    position: absolute;

    top: 0;

    left: 0;

    width: 3px;

    height: 100%;

    background: white;

    box-shadow:
        0 0 10px rgba(0, 0, 0, .25);

}

.slider-button {

    position: absolute;

    top: 50%;

    left: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 54px;

    height: 54px;

    border: 2px solid white;

    border-radius: 50%;

    background: var(--gold);

    color: white;

    font-size: 22px;

    cursor: grab;

    pointer-events: auto;

    touch-action: none;

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

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .25);

    transition:
        transform .25s ease,
        background .25s ease;

}

.slider-button:hover {

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

}

.slider-button:active {

    cursor: grabbing;

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

}

.slider-button:focus-visible {

    outline: 3px solid white;

    outline-offset: 4px;

}

/* ===========================
   TESTIMONIALS
=========================== */

.testimonials {

    padding: var(--section-padding) 8%;

    background: var(--secondary);

    overflow: hidden;

}

.testimonials .section-subtitle {
    font-size: larger;
}

.testimonial-slider {

    width: min(100%, 850px);

    margin: 60px auto 0;

    overflow: hidden;

}

.testimonial-track {

    display: flex;

    transition:
        transform .8s ease;

}

.testimonial-card {

    min-width: 100%;

    flex: 0 0 100%;

    padding: 50px;

    background: var(--light);

    border-radius: var(--radius);

    text-align: center;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .12);

}

.stars {

    margin-bottom: 25px;

    color: var(--gold);

    font-size: 1.5rem;

    letter-spacing: 3px;

}

.testimonial-card p {

    max-width: 680px;

    margin: 0 auto 30px;

    color: var(--text);

    font-size: 1.1rem;

    line-height: 1.9;

}

.testimonial-card h4 {

    color: var(--dark);

    font-family: var(--title-font);

    font-size: 1.3rem;

}

@media (prefers-reduced-motion: reduce) {

    .testimonial-track {
        transition: none;
    }

}

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

.booking {

    padding: var(--section-padding) 8%;

    background: var(--light);

}

.booking-container {

    display: grid;

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

    gap: 60px;

    align-items: stretch;

}

.booking-info {

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.booking-info>.section-subtitle,
.booking-info>.section-title {

    text-align: left;

}

.booking-info>span {
    font-size: larger;
}

.booking-info>p {

    max-width: 650px;

    margin-bottom: 35px;

    color: var(--text);

    line-height: 1.8;

}

.contact-item {

    margin: 30px 0;

}

.contact-item strong {

    color: #222;

}

.whatsapp-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: fit-content;

    padding: 15px 28px;

    border-radius: 50px;

    background: #25D366;

    color: white;

    font-weight: 600;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}

.whatsapp-btn:hover {

    background: #20bd5a;

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(37, 211, 102, .25);

}

.booking-map {

    min-height: 100%;

    overflow: hidden;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

}

.booking-map iframe {

    display: block;

    width: 100%;

    height: 100%;

    min-height: 550px;

    border: 0;

}

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

.reveal {

    opacity: 0;

    transform: translateY(70px);

    transition:

        opacity .9s ease,

        transform .9s ease;

    will-change:

        opacity,

        transform;

}

.reveal.active {

    opacity: 1;

    transform: translateY(0);

}

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

footer {

    padding: 70px 8% 0;

    background: #222;

    color: white;

}

.footer-grid {

    display: grid;

    grid-template-columns:
        1.4fr 1fr 1.2fr auto;

    gap: 50px;

    padding-bottom: 50px;

}

.footer-brand {

    max-width: 350px;

}

.footer-logo {

    width: 180px;

    height: auto;

    margin-bottom: 20px;

}

.footer-brand p {

    color: rgba(255, 255, 255, .7);

    line-height: 1.8;

}

.footer-links h3,
.footer-contact h3 {

    margin-bottom: 20px;

    color: white;

    font-family: var(--title-font);

    font-size: 1.4rem;

}

.footer-links ul {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin: 0;

    padding: 0;

    list-style: none;

}

.footer-links a {

    color: rgba(255, 255, 255, .7);

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

}

.footer-links a:hover {

    color: var(--gold);

    transform: translateX(4px);

}

.footer-contact p {

    margin-bottom: 10px;

    color: rgba(255, 255, 255, .7);

    line-height: 1.6;

}


.footer h3 {

    color: var(--gold);

    margin-bottom: 22px;

    font-size: 1.2rem;

}

.footer p {

    color: #ddd;

    line-height: 1.8;

}

.footer ul {

    list-style: none;

    padding: 0;

}

.footer li {

    margin-bottom: 10px;

}

.footer a {

    color: #ddd;

    text-decoration: none;

    transition: .35s;

    display: inline-block;

    margin-bottom: 10px;
    margin-right: 10px;

}

.footer a:hover {

    color: var(--gold);

    transform: translateX(6px);

}

.footer-bottom {

    padding: 25px 0;

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

    color: rgba(255, 255, 255, .55);

    font-size: var(--small);

    text-align: center;

}

.footer-social-icons {

    display: flex;

    align-items: flex-start;

    gap: 12px;

}

.footer-social-icons a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    border:
        1px solid rgba(212, 175, 55, .35);

    border-radius: 50%;

    color: var(--gold);

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;

}

.footer-social-icons a:hover {

    background: var(--gold);

    color: white;

    transform: translateY(-4px);

}

/* ===========================
   LIGHTBOX
=========================== */

.lightbox {

    position: fixed;

    inset: 0;

    z-index: var(--modal);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    background:
        rgba(0, 0, 0, .92);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

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

}

.lightbox.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}

.lightbox img {

    max-width: 90%;

    max-height: 90%;

    border-radius: 20px;

    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);

}

.lightbox-close {

    position: absolute;

    top: 25px;

    right: 30px;

    z-index: 2;

    background: transparent;
    border: none;
    padding: 0;

    color: white;

    font-size: 42px;

    line-height: 1;

    cursor: pointer;

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

}

.lightbox-close:hover {

    color: var(--gold);

    transform: scale(1.1);

}

.lightbox-image {

    display: block;

    max-width: min(90vw, 1200px);

    max-height: 85vh;

    width: auto;

    height: auto;

    object-fit: contain;

    border-radius: 12px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .45);

}

.lightbox.active .lightbox-image {

    transform: scale(1);

}

.lightbox-prev,
.lightbox-next {

    position: absolute;

    top: 50%;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 50px;

    height: 50px;

    border-radius: 50%;

    border: none;

    padding: 0;

    background:
        rgba(255, 255, 255, .12);

    color: white;

    font-size: 28px;

    cursor: pointer;

    transform: translateY(-50%);

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;

}

.lightbox-prev {

    left: 25px;

}

.lightbox-next {

    right: 25px;

}

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

    background: var(--gold);

    color: white;

}

.counter {

    color: var(--gold);

    font-size: 2.2rem;

    font-weight: 700;

    transition: .3s;

}

/* ===========================
   GOLD PARTICLES
=========================== */

.particles {

    position: absolute;

    inset: 0;

    pointer-events: none;

    overflow: hidden;

    z-index: 3;

}

.particles span {

    position: absolute;

    display: block;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: rgba(212, 175, 55, .95);

    box-shadow:
        0 0 18px rgba(212, 175, 55, .8);

    animation: floatParticle 8s linear infinite;

}

/* Position and timing */

.particles span:nth-child(1) {

    left: 10%;
    bottom: -30px;
    animation-duration: 14s;
    animation-delay: 0s;

}

.particles span:nth-child(2) {

    left: 22%;
    bottom: -50px;
    animation-duration: 18s;
    animation-delay: 2s;

}

.particles span:nth-child(3) {

    left: 35%;
    bottom: -20px;
    animation-duration: 16s;
    animation-delay: 1s;

}

.particles span:nth-child(4) {

    left: 48%;
    bottom: -60px;
    animation-duration: 20s;
    animation-delay: 4s;

}

.particles span:nth-child(5) {

    left: 60%;
    bottom: -30px;
    animation-duration: 17s;
    animation-delay: 3s;

}

.particles span:nth-child(6) {

    left: 72%;
    bottom: -40px;
    animation-duration: 19s;
    animation-delay: 1s;

}

.particles span:nth-child(7) {

    left: 84%;
    bottom: -25px;
    animation-duration: 15s;
    animation-delay: 5s;

}

.particles span:nth-child(8) {

    left: 93%;
    bottom: -35px;
    animation-duration: 18s;
    animation-delay: 2s;

}

@keyframes floatParticle {

    0% {

        transform:
            translateY(0) scale(.6);

        opacity: 0;

    }

    15% {

        opacity: 1;

    }

    100% {

        transform:
            translateY(-110vh) translateX(25px) scale(1.4);

        opacity: 0;

    }

}

/* ===========================
   SCROLL PROGRESS
=========================== */

#progress-bar {

    position: fixed;

    top: 0;

    left: 0;

    width: 0%;

    height: 4px;

    z-index: 99999;

    background: linear-gradient(90deg,
            #b8860b,
            #d4af37,
            #f3d77a);

    box-shadow:
        0 0 12px rgba(212, 175, 55, .8);

    transition: width .1s linear;

}

/* ===========================
   BACK TO TOP
=========================== */

#backToTop {

    position: fixed;

    right: 30px;

    bottom: 30px;

    width: 56px;

    height: 56px;

    border: none;

    border-radius: 50%;

    background: #d4af37;

    color: #111;

    font-size: 22px;

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transform: translateY(20px);

    transition: all .3s ease;

    box-shadow: 0 15px 35px rgba(212, 175, 55, .35);

    z-index: 3000;

}

#backToTop.show {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}

#backToTop:hover {

    transform: translateY(-5px);

}

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

.hero-slider {

    position: absolute;

    inset: 0;

    z-index: 1;

    overflow: hidden;

}

.hero-slide {

    position: absolute;

    inset: 0;

    opacity: 0;

    transition: opacity 2s ease;

}

.hero-slide.active {

    opacity: 1;

}

.hero-slide img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    animation: heroKenBurns 12s ease-in-out infinite;

}

@keyframes heroKenBurns {

    0% {

        transform: scale(1);

    }

    100% {

        transform: scale(1.12);

    }

}

@media (max-width: 991px) {

    .menu-btn {
        display: flex;
    }

    .language-switcher {
        margin-left: auto;
        margin-top: 0;
    }

    body.menu-open {
        overflow: hidden;
    }

}

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

@media (max-width:991px) {

    section {
        padding: 90px 6%;
    }

    .hero {
        height: 100vh;
    }

    .hero h1 {
        font-size: 2.8rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .about-container,
    .booking-container {

        grid-template-columns: 1fr;
        gap: 50px;

    }

    .about-content {

        text-align: center;

    }

    .about-stats {

        justify-content: center;

    }

    .comparison-container {

        height: 450px;

    }

}

@media (max-width:768px) {

    .hero h1 {

        font-size: 2.2rem;

    }

    .section-title {

        font-size: 2.2rem;

    }

    .testimonial-card {

        padding: 35px 25px;

    }

    .comparison-container {

        height: 320px;

    }

    .booking-map iframe {

        height: 320px;
        min-height: 320px;

    }

    #backToTop {

        right: 18px;
        bottom: 18px;

    }

}

@media (max-width:480px) {

    .hero h1 {

        font-size: 1.9rem;

    }

    .hero-subtitle {

        letter-spacing: 3px;

        font-size: .8rem;

    }

    .btn-primary,
    .btn-secondary {

        width: 100%;

        text-align: center;

    }

    .nav-links {

        width: 100%;

    }

    .logo img {
        width: 130px;
        height: auto;
    }

}

.floating-whatsapp {

    width: 58px;

    height: 58px;

    left: 16px;

    bottom: 16px;

}


/*===========================
    FLOATING WHATSAPP
===========================*/

.floating-whatsapp {

    position: fixed;

    left: 28px;

    bottom: 28px;

    width: 68px;

    height: 68px;

    border-radius: 50%;

    background: #25D366;

    display: flex;

    justify-content: center;

    align-items: center;

    box-shadow:
        0 18px 45px rgba(37, 211, 102, .45);

    z-index: 3000;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

    animation: whatsappFloat 2.8s ease-in-out infinite;

}

.floating-whatsapp:hover {

    transform: scale(1.12);

    box-shadow:
        0 25px 55px rgba(37, 211, 102, .6);

}

@keyframes whatsappFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

    100% {

        transform: translateY(0);

    }

}

/*===========================
    CURSOR GLOW
===========================*/

.cursor-glow {

    position: fixed;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    pointer-events: none;

    background: radial-gradient(circle,
            rgba(212, 175, 55, .18),
            rgba(212, 175, 55, .05),
            transparent 70%);

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

    z-index: 1;

    transition:
        left .08s linear,
        top .08s linear;

    mix-blend-mode: screen;

}


.lazy-img {

    opacity: 0;

    transition:

        opacity .5s ease,

        transform .3s ease;

}

.lazy-img.loaded {

    opacity: 1;

}

::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background: #f1eee8;

}

::-webkit-scrollbar-thumb {

    background: #d4af37;

    border-radius: 20px;

}

::-webkit-scrollbar-thumb:hover {

    background: #b8860b;

}

/*===========================
    INSTAGRAM
===========================*/

.instagram {

    padding: var(--section-padding) 8%;

    background:
        linear-gradient(135deg,
            #f8f5ef,
            #c18997);

    text-align: center;

}

.instagram .section-subtitle {
    font-size: larger;
}

.instagram-container {

    max-width: 850px;

    margin: 0 auto;

}

.instagram-container p {

    max-width: 700px;

    margin: 0 auto 35px;

    color: var(--text);

    font-size: var(--text-size);

    line-height: 1.8;

}

.instagram p {

    margin: 30px 0;

    color: #434242;

    line-height: 1.9;

    font-size: large;

    margin-left: 70px;

}

.hours-grid {

    display: grid;

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

    gap: 18px;

    margin-bottom: 30px;

}

.hour-card {

    padding: 22px;


    border-radius: var(--radius);

    background: var(--secondary);

    box-shadow: var(--shadow);

}

.hour-card strong {

    display: block;

    margin-bottom: 12px;

    color: var(--gold);

    font-size: .9rem;

}

.hour-card h4 {

    margin-bottom: 5px;

    color: var(--dark);

    font-family: var(--title-font);

    font-size: 1.2rem;

}

.hour-card p {

    color: var(--text);

}

.contact-cards {

    display: grid;

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

    gap: 18px;

    margin-bottom: 25px;

}

.contact-card {

    padding: 25px;

    background: var(--secondary);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.contact-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, .12);

}

.contact-card h3 {

    margin: 10px 0 8px;

    color: var(--dark);

    font-family: var(--title-font);

    font-size: 1.4rem;

}

.contact-card p {

    color: var(--text);

    line-height: 1.6;

}

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

.cta {

    padding: 110px 8%;

    background:
        linear-gradient(135deg,
            #6e3c43,
            #4e292f);

    color: white;

    text-align: center;

}

.cta .container {

    max-width: 850px;

    margin: 0 auto;

}

.cta h2 {

    margin-bottom: 20px;

    color: white;

    font-family: var(--title-font);

    font-size: clamp(2.4rem,
            5vw,
            3.8rem);

}

.cta p {

    max-width: 700px;

    margin: 0 auto 30px;

    color: rgba(255, 255, 255, .85);

    line-height: 1.8;

}

.footer-bottom::before {

    content: "";

    display: block;

    width: 100px;

    height: 2px;

    margin: 0 auto 25px;

    background: linear-gradient(to right,
            transparent,
            var(--gold),
            transparent);

}

h1 {

    font-size: clamp(2.8rem, 5vw, 5rem);

}

h2 {

    font-size: clamp(2rem, 4vw, 3.5rem);

}

h3 {

    font-size: 1.4rem;

}

p {

    font-size: 1.05rem;

    line-height: 1.9;

}

.hover-lift {

    transition: var(--transition);

}

.hover-lift:hover {

    transform:

        translateY(-8px);

}

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 16px 36px;

    border-radius: 50px;

    transition: var(--transition);

    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

}

.card {

    background: white;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    transition: var(--transition);

}

.card:hover {

    transform: translateY(-8px);

}

@media (prefers-reduced-motion: reduce) {

    * {

        animation: none !important;

        transition: none !important;

        scroll-behavior: auto !important;

    }

}

.btn:hover {

    transform: translateY(-3px);

    box-shadow: 0 12px 30px rgba(0, 0, 0, .15);

}

.nav-links a.active {

    color: var(--gold);

}

.nav-links a.active::after {

    width: 100%;

}

.reveal,
.team-card,
.gallery-item {

    will-change: transform, opacity;

}

button,
.btn,
a {

    -webkit-tap-highlight-color: transparent;

}

.delay-1 {
    transition-delay: .2s;
}

.delay-2 {
    transition-delay: .4s;
}

.delay-3 {
    transition-delay: .6s;
}

.delay-4 {
    transition-delay: .8s;
}

.delay-5 {
    transition-delay: 1s;
}