/* =========================================================
   PARK HOTEL QUBA
   MAIN STYLE SHEET
   Premium Dark Navy + Gold
========================================================= */

/* =========================================================
   ROOT
========================================================= */

:root {
    --bg-main: #07111f;
    --bg-secondary: #0b1728;
    --bg-card: #0f1d30;
    --bg-card-hover: #14243a;

    --navy: #07111f;
    --navy-light: #10233a;

    --gold: #d4af37;
    --gold-light: #e6c65c;
    --gold-dark: #a98618;

    --white: #ffffff;
    --text-main: #f4f4f4;
    --text-secondary: #b8c1cc;
    --text-muted: #7f8b99;

    --border: rgba(212, 175, 55, 0.22);
    --border-light: rgba(255, 255, 255, 0.09);

    --shadow-sm: 0 8px 25px rgba(0, 0, 0, 0.20);
    --shadow-md: 0 15px 40px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 25px 70px rgba(0, 0, 0, 0.45);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;

    --container: 1200px;

    --transition: 0.3s ease;
}


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

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    font-family: "Montserrat", sans-serif;
    background: var(--bg-main);
    color: var(--text-main);
    line-height: 1.7;
    overflow-x: hidden;
}

body.modal-open {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}

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

button,
input,
select,
textarea {
    font: inherit;
}

button {
    border: 0;
    cursor: pointer;
}

ul {
    list-style: none;
}

::selection {
    background: var(--gold);
    color: #08111d;
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: #050d17;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(
            180deg,
            var(--gold),
            var(--gold-dark)
    );
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold-light);
}


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

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


/* =========================================================
   GENERAL SECTION
========================================================= */

.section {
    padding: 110px 0;
    position: relative;
}

.section:nth-of-type(even) {
    background: var(--bg-secondary);
}

.section-heading {
    margin-bottom: 60px;
    text-align: center;
}

.section-heading > span {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.section-heading h2 {
    color: var(--white);
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.15;
    font-weight: 600;
}

.section-heading h2 span {
    color: #fff !important;
}

.section-heading h2 strong {
    color: var(--gold);
    font-weight: 700;
}


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

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 82px;
    z-index: 1000;

    background: rgba(5, 15, 28, 0.88);
    border-bottom: 1px solid rgba(212, 175, 55, 0.12);

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

    transition:
            background var(--transition),
            box-shadow var(--transition),
            height var(--transition);
}

.navbar.scrolled {
    height: 72px;
    background: rgba(5, 13, 24, 0.97);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.navbar-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}


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

.logo {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    flex-shrink: 0;

    line-height: 1;
    letter-spacing: 2px;
}

.logo span:first-child {
    color: var(--white);
    font-size: 19px;
    font-weight: 800;
}

.logo span:last-child {
    margin-top: 5px;
    color: var(--gold);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 5px;
}


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

.nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
}

.nav-menu > a {
    position: relative;

    color: #dce2e9;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;

    transition: color var(--transition);
}

.nav-menu > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;

    width: 0;
    height: 2px;

    background: var(--gold);

    transition: width var(--transition);
}

.nav-menu > a:hover {
    color: var(--gold);
}

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


/* =========================================================
   LANGUAGE DROPDOWN
========================================================= */

.language-dropdown {
    position: relative;
    margin-left: 4px;
}

.language-current {
    min-width: 65px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 9px 11px;

    background: rgba(255, 255, 255, 0.05);
    color: var(--white);

    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 7px;

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

    transition: var(--transition);
}

.language-current:hover {
    background: rgba(212, 175, 55, 0.12);
    border-color: var(--gold);
    color: var(--gold);
}

.language-current i {
    font-size: 9px;
    transition: transform var(--transition);
}

.language-dropdown:hover .language-current i {
    transform: rotate(180deg);
}

.language-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;

    width: 190px;
    max-height: 420px;
    overflow-y: auto;

    padding: 8px;

    background: rgba(8, 18, 32, 0.98);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 12px;

    box-shadow: var(--shadow-lg);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);

    transition:
            opacity var(--transition),
            visibility var(--transition),
            transform var(--transition);
}

.language-dropdown:hover .language-menu,
.language-dropdown.active .language-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.language-menu button {
    width: 100%;

    display: block;
    text-align: left;

    padding: 10px 12px;

    background: transparent;
    color: #d7dde5;

    border-radius: 7px;

    font-size: 12px;
    font-weight: 500;

    transition: var(--transition);
}

.language-menu button:hover,
.language-menu button.active {
    background: rgba(212, 175, 55, 0.12);
    color: var(--gold);
}


/* =========================================================
   NAV RESERVATION
========================================================= */

.nav-reservation {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 11px 18px;

    color: #08111d;
    background: var(--gold);

    border-radius: 7px;

    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;

    transition:
            background var(--transition),
            transform var(--transition),
            box-shadow var(--transition);
}

.nav-reservation:hover {
    color: #08111d;
    background: var(--gold-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.25);
}

/* =====================================================
   MOBILE / TABLET NAVBAR
===================================================== */

.mobile-menu {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;

    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    position: relative;
    z-index: 10001;
}

.mobile-menu span {
    display: block;
    width: 26px;
    height: 2px;
    background: #D4AF37;
    border-radius: 2px;

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


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

@media (max-width: 1100px) {

    .navbar-inner {
        position: relative;
    }

    .nav-menu {
        display: none;

        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;

        width: 100%;

        padding: 20px;

        background: #0B0B0B;

        border: 1px solid rgba(212, 175, 55, 0.25);
        border-radius: 12px;

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

        flex-direction: column;
        align-items: stretch;
        gap: 0;

        z-index: 10000;
    }


    /* AÇILMIŞ MENU */

    .nav-menu.active {
        display: flex;
    }


    /* NAV LINK */

    .nav-menu > a {
        display: flex;
        align-items: center;

        width: 100%;
        min-height: 48px;

        padding: 12px 10px;

        color: #ffffff;
        text-decoration: none;

        border-bottom: 1px solid
        rgba(212, 175, 55, 0.12);

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


    .nav-menu > a:hover {
        color: #D4AF37;
        background: rgba(212, 175, 55, 0.06);
    }


    /* LANGUAGE */

    .language-dropdown {
        width: 100%;
        position: relative;
    }


    .language-current {
        width: 100%;
        min-height: 48px;

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

        padding: 12px 10px;

        background: transparent;
        color: #ffffff;

        border: 0;

        cursor: pointer;
    }


    .language-menu {
        position: static;

        display: none;

        width: 100%;

        margin-top: 5px;

        background: #111111;

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

        border-radius: 8px;

        overflow: hidden;
    }


    .language-dropdown.active .language-menu {
        display: block;
    }


    .language-menu button {
        width: 100%;

        padding: 11px 12px;

        text-align: left;

        background: transparent;
        color: #ffffff;

        border: 0;

        cursor: pointer;
    }


    .language-menu button:hover {
        background: rgba(212, 175, 55, 0.08);
        color: #D4AF37;
    }


    /* RESERVATION BUTTON */

    .nav-reservation {
        display: none;
    }


    /* HAMBURGER */

    .mobile-menu {
        display: flex;
    }


    /* HAMBURGER → X */

    .mobile-menu.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-menu.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}


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

@media (max-width: 768px) {

    .navbar-inner {
        min-height: 70px;
    }


    .nav-menu {
        top: calc(100% + 6px);
        left: 10px;
        right: 10px;

        width: auto;

        padding: 14px;

        max-height: calc(100vh - 90px);
        overflow-y: auto;

        -webkit-overflow-scrolling: touch;
    }


    .nav-menu > a {
        min-height: 46px;
        padding: 11px 8px;
    }


    .mobile-menu {
        width: 42px;
        height: 42px;
    }
}


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

@media (max-width: 480px) {

    .navbar-inner {
        min-height: 64px;
    }


    .nav-menu {
        left: 8px;
        right: 8px;

        padding: 12px;
    }


    .nav-menu > a {
        min-height: 44px;
    }


    .mobile-menu span {
        width: 24px;
    }
}


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

.hero {
    position: relative;
    min-height: 100vh;
    height: 800px;

    display: flex;
    align-items: center;

    overflow: hidden;
    background: #030912;
}

.hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    opacity: 0;
    transform: scale(1.04);

    transition:
            opacity 1.2s ease,
            transform 6s ease;
}

.hero-slide.active {
    opacity: 1;
    transform: scale(1);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
            linear-gradient(
                    90deg,
                    rgba(2, 9, 18, 0.92) 0%,
                    rgba(2, 9, 18, 0.66) 45%,
                    rgba(2, 9, 18, 0.30) 100%
            ),
            linear-gradient(
                    0deg,
                    rgba(2, 9, 18, 0.72),
                    transparent 50%,
                    rgba(2, 9, 18, 0.30)
            );
}

.hero-content {
    position: relative;
    z-index: 3;

    padding-top: 70px;
}

.hero-location {
    margin-bottom: 18px;

    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
}

.hero h1 {
    max-width: 800px;

    color: var(--white);
    font-size: clamp(48px, 7vw, 88px);
    line-height: 1.03;
    font-weight: 700;
    letter-spacing: -2px;
}

.hero h1 span:first-child {
    color: #fff !important;
}

.hero h1 span:last-child {
    display: block;
    color: var(--gold);
}

.hero-description {
    max-width: 650px;
    margin-top: 25px;

    color: #d0d7df;
    font-size: 16px;
    line-height: 1.9;
}

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-top: 35px;
}


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

.btn {
    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 0 25px;

    border-radius: 7px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;

    transition:
            transform var(--transition),
            background var(--transition),
            border-color var(--transition),
            color var(--transition),
            box-shadow var(--transition);
}

.btn-gold {
    color: #07111f;
    background: var(--gold);
}

.btn-gold:hover {
    color: #07111f;
    background: var(--gold-light);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(212, 175, 55, 0.28);
}

.btn-outline {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.03);
}

.btn-outline:hover {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(212, 175, 55, 0.07);
    transform: translateY(-3px);
}


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

.hero-controls {
    position: absolute;
    z-index: 5;

    left: 50%;
    bottom: 38px;

    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 18px;
}

.hero-controls button {
    width: 42px;
    height: 42px;

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

    color: #fff;
    background: rgba(4, 12, 22, 0.65);

    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;

    transition: var(--transition);
}

.hero-controls button:hover {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(212, 175, 55, 0.1);
}

.hero-dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.hero-dot {
    width: 8px;
    height: 8px;

    display: block;

    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;

    transition: var(--transition);
}

.hero-dot.active {
    width: 25px;
    border-radius: 20px;
    background: var(--gold);
}


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

.about {
    background:
            radial-gradient(
                    circle at 10% 20%,
                    rgba(212, 175, 55, 0.035),
                    transparent 30%
            ),
            var(--bg-main);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 75px;
    align-items: center;
}

.about-image {
    position: relative;
    min-height: 540px;
    overflow: hidden;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-lg);
}

.about-image::after {
    content: "";
    position: absolute;
    inset: 0;

    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: inherit;

    pointer-events: none;
}

.about-image img {
    width: 100%;
    height: 100%;
    min-height: 540px;

    object-fit: cover;

    transition: transform 0.8s ease;
}

.about-image:hover img {
    transform: scale(1.04);
}

.about-content {
    padding: 10px 0;
}

.about-label {
    display: inline-block;
    margin-bottom: 15px;

    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

.about-content h3 {
    margin-bottom: 22px;

    color: var(--white);
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.2;
}

.about-content p {
    margin-bottom: 17px;

    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.9;
}

.about-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;

    margin-top: 30px;
}

.about-features > div {
    min-height: 100px;

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

    padding: 15px;

    text-align: center;

    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border-light);
    border-radius: 12px;

    transition: var(--transition);
}

.about-features > div:hover {
    transform: translateY(-5px);
    border-color: rgba(212, 175, 55, 0.35);
    background: rgba(212, 175, 55, 0.05);
}

.about-features i {
    margin-bottom: 9px;

    color: var(--gold);
    font-size: 22px;
}

.about-features span {
    color: #dbe1e8;
    font-size: 11px;
    font-weight: 600;
}


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

.rooms {
    background: var(--bg-secondary);
}

.rooms-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.room-card {
    overflow: hidden;

    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

    transition:
            transform var(--transition),
            border-color var(--transition),
            box-shadow var(--transition);
}

.room-card:hover {
    transform: translateY(-8px);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: var(--shadow-lg);
}

.room-image {
    position: relative;
    height: 290px;
    overflow: hidden;
}

.room-image::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
            180deg,
            transparent 50%,
            rgba(0, 0, 0, 0.35)
    );
}

.room-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.7s ease;
}

.room-card:hover .room-image img {
    transform: scale(1.06);
}

.room-body {
    position: relative;
    padding: 27px;
}

.room-number {
    position: absolute;
    top: 22px;
    right: 24px;

    color: rgba(212, 175, 55, 0.18);

    font-size: 42px;
    line-height: 1;
    font-weight: 800;
}

.room-body h3 {
    margin-bottom: 12px;

    color: var(--white);
    font-size: 22px;
}

.room-body p {
    min-height: 70px;
    margin-bottom: 18px;

    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.75;
}

.room-body ul {
    padding-top: 18px;
    border-top: 1px solid var(--border-light);
}

.room-body li {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 9px;

    color: #c6ced8;
    font-size: 11px;
}

.room-body li:last-child {
    margin-bottom: 0;
}

.room-body li i {
    width: 17px;
    color: var(--gold);
}


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

.gallery {
    background: var(--bg-main);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.gallery-item {
    position: relative;

    aspect-ratio: 1 / 0.78;

    overflow: hidden;

    background: var(--bg-card);
    border-radius: 9px;

    cursor: pointer;
}

.gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
            linear-gradient(
                    180deg,
                    transparent 55%,
                    rgba(0, 0, 0, 0.35)
            );

    opacity: 0;

    transition: opacity var(--transition);
}

.gallery-item::before {
    content: "\f00e";

    position: absolute;
    z-index: 2;

    top: 50%;
    left: 50%;

    width: 44px;
    height: 44px;

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

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

    color: #08111d;
    background: var(--gold);

    border-radius: 50%;

    font-family: "Font Awesome 6 Free";
    font-weight: 900;

    opacity: 0;

    transition: var(--transition);
}

.gallery-item:hover::after {
    opacity: 1;
}

.gallery-item:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.gallery-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.65s ease;
}

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


/* =========================================================
   GALLERY MODAL
========================================================= */

.gallery-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;

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

    padding: 50px;

    background: rgba(2, 7, 14, 0.96);

    opacity: 0;
    visibility: hidden;

    transition:
            opacity var(--transition),
            visibility var(--transition);
}

.gallery-modal.active,
.gallery-modal[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

.gallery-modal img {
    max-width: min(90vw, 1200px);
    max-height: 82vh;

    object-fit: contain;

    border-radius: 8px;

    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}

.gallery-close,
.gallery-prev,
.gallery-next {
    position: absolute;
    z-index: 5;

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

    color: #fff;
    background: rgba(255, 255, 255, 0.07);

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;

    transition: var(--transition);
}

.gallery-close {
    top: 25px;
    right: 28px;

    width: 48px;
    height: 48px;

    font-size: 18px;
}

.gallery-prev,
.gallery-next {
    top: 50%;

    width: 54px;
    height: 54px;

    transform: translateY(-50%);

    font-size: 17px;
}

.gallery-prev {
    left: 30px;
}

.gallery-next {
    right: 30px;
}

.gallery-close:hover,
.gallery-prev:hover,
.gallery-next:hover {
    color: #07111f;
    background: var(--gold);
    border-color: var(--gold);
}


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

.testimonials-section {
    position: relative;

    padding: 110px 0;

    background:
            radial-gradient(
                    circle at 50% 0%,
                    rgba(212, 175, 55, 0.06),
                    transparent 35%
            ),
            #081525;
}

.testimonials-heading {
    max-width: 750px;
    margin: 0 auto 55px;

    text-align: center;
}

.testimonials-subtitle {
    display: inline-block;
    margin-bottom: 12px;

    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
}

.testimonials-heading h2 {
    margin-bottom: 17px;

    color: #fff;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
}

.testimonials-heading p {
    color: var(--text-secondary);
    font-size: 14px;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.testimonial-card {
    position: relative;

    padding: 32px;

    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;

    transition:
            transform var(--transition),
            border-color var(--transition),
            background var(--transition);
}

.testimonial-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 30px;
    right: 30px;

    height: 2px;

    background: var(--gold);

    transform: scaleX(0);
    transform-origin: center;

    transition: transform var(--transition);
}

.testimonial-card:hover {
    transform: translateY(-7px);
    background: rgba(212, 175, 55, 0.035);
    border-color: rgba(212, 175, 55, 0.25);
}

.testimonial-card:hover::before {
    transform: scaleX(1);
}

.testimonial-stars {
    margin-bottom: 18px;

    color: var(--gold);
    font-size: 15px;
    letter-spacing: 3px;
}

.testimonial-text {
    min-height: 125px;

    color: #d4dbe3;
    font-size: 13px;
    line-height: 1.85;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 13px;

    padding-top: 20px;
    border-top: 1px solid var(--border-light);
}

.testimonial-avatar {
    width: 42px;
    height: 42px;

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

    flex-shrink: 0;

    color: #07111f;
    background: var(--gold);

    border-radius: 50%;

    font-weight: 800;
}

.testimonial-author h4 {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.testimonial-author span {
    color: var(--text-muted);
    font-size: 10px;
}


/* =========================================================
   RESERVATION
========================================================= */

.reservation {
    background:
            radial-gradient(
                    circle at 80% 50%,
                    rgba(212, 175, 55, 0.055),
                    transparent 35%
            ),
            var(--bg-main);
}

.reservation-box {
    position: relative;

    max-width: 1000px;
    margin: 0 auto;

    padding: 65px;

    background:
            linear-gradient(
                    145deg,
                    rgba(17, 34, 55, 0.98),
                    rgba(8, 20, 35, 0.98)
            );

    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 22px;

    box-shadow: var(--shadow-lg);
}

.reservation-box::before {
    content: "";
    position: absolute;

    top: 0;
    left: 50%;

    width: 120px;
    height: 2px;

    transform: translateX(-50%);

    background: var(--gold);
}

.reservation-heading {
    margin-bottom: 38px;
    text-align: center;
}

.reservation-heading > span {
    display: inline-block;
    margin-bottom: 10px;

    color: var(--gold);
    font-size: 11px;
    letter-spacing: 3px;
}

.reservation-heading h2 {
    margin-bottom: 15px;

    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.15;
}

.reservation-heading h2 span {
    color: #fff !important;
}

.reservation-heading h2 strong {
    color: var(--gold);
}

.reservation-heading p {
    max-width: 650px;
    margin: 0 auto;

    color: #bdc6d1;
    font-size: 13px;
    line-height: 1.8;
}

.reservation-heading p span {
    color: #fff !important;
}

.reservation-form {
    width: 100%;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;

    margin-bottom: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 9px;

    color: #dce2e9;
    font-size: 11px;
    font-weight: 600;
}

.form-group input,
.form-group select {
    width: 100%;
    height: 52px;

    padding: 0 15px;

    color: #fff;
    background: rgba(3, 12, 23, 0.75);

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;

    outline: none;

    transition:
            border-color var(--transition),
            box-shadow var(--transition),
            background var(--transition);
}

.form-group input::placeholder {
    color: #6f7c8a;
}

.form-group input:focus,
.form-group select:focus {
    border-color: var(--gold);
    background: rgba(3, 12, 23, 0.95);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.08);
}

.form-group select {
    cursor: pointer;
    appearance: none;

    background-image:
            linear-gradient(45deg, transparent 50%, var(--gold) 50%),
            linear-gradient(135deg, var(--gold) 50%, transparent 50%);

    background-position:
            calc(100% - 18px) 22px,
            calc(100% - 13px) 22px;

    background-size:
            5px 5px,
            5px 5px;

    background-repeat: no-repeat;
}

.form-group select option {
    color: #fff;
    background: #0a1727;
}

.reservation-submit {
    width: 100%;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin-top: 8px;

    color: #07111f;
    background: var(--gold);

    border-radius: 7px;

    font-size: 12px;
    font-weight: 800;

    transition:
            background var(--transition),
            transform var(--transition),
            box-shadow var(--transition);
}

.reservation-submit:hover {
    background: var(--gold-light);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(212, 175, 55, 0.22);
}


/* =========================================================
   FLATPICKR
========================================================= */

.flatpickr-calendar {
    background: #0b1728 !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    border-radius: 12px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45) !important;
    overflow: hidden;
}

.flatpickr-months {
    background: #081525 !important;
    padding: 7px 0;
}

.flatpickr-current-month {
    color: #fff !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    color: #fff !important;
    background: #081525 !important;
}

.flatpickr-weekdays {
    background: #081525 !important;
}

span.flatpickr-weekday {
    color: var(--gold) !important;
    font-size: 10px !important;
}

.flatpickr-day {
    color: #dce2e9 !important;
    border-radius: 7px !important;
}

.flatpickr-day:hover {
    color: #07111f !important;
    background: var(--gold) !important;
    border-color: var(--gold) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    color: #07111f !important;
    background: var(--gold) !important;
    border-color: var(--gold) !important;
}

.flatpickr-day.today {
    border-color: var(--gold) !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    color: var(--gold) !important;
    fill: var(--gold) !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    color: var(--gold-light) !important;
    fill: var(--gold-light) !important;
}


/* =========================================================
   GENERAL MODAL
========================================================= */

.modal {
    position: fixed;
    inset: 0;
    z-index: 4000;

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

    padding: 25px;

    opacity: 0;
    visibility: hidden;

    transition:
            opacity var(--transition),
            visibility var(--transition);
}

.modal.active,
.modal[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

.modal-overlay {
    position: absolute;
    inset: 0;

    background: rgba(2, 7, 14, 0.88);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.modal-box {
    position: relative;
    z-index: 2;

    width: min(100%, 560px);
    max-height: 90vh;
    overflow-y: auto;

    padding: 45px;

    text-align: center;

    background:
            linear-gradient(
                    145deg,
                    #102138,
                    #081423
            );

    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 18px;

    box-shadow: var(--shadow-lg);

    transform: translateY(25px) scale(0.98);

    transition: transform 0.35s ease;
}

.modal.active .modal-box,
.modal[aria-hidden="false"] .modal-box {
    transform: translateY(0) scale(1);
}

.modal-close {
    position: absolute;
    top: 17px;
    right: 17px;

    width: 38px;
    height: 38px;

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

    color: #b8c1cc;
    background: rgba(255, 255, 255, 0.05);

    border-radius: 50%;

    transition: var(--transition);
}

.modal-close:hover {
    color: #07111f;
    background: var(--gold);
}

.modal-icon,
.success-icon {
    width: 66px;
    height: 66px;

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

    margin: 0 auto 20px;

    color: #07111f;
    background: var(--gold);

    border-radius: 50%;

    font-size: 25px;
}

.modal-label {
    display: inline-block;
    margin-bottom: 9px;

    color: var(--gold);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
}

.modal-box h3 {
    margin-bottom: 28px;

    color: #fff;
    font-size: 24px;
    line-height: 1.3;
}


/* =========================================================
   RESERVATION SUMMARY
========================================================= */

.reservation-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;

    margin-bottom: 24px;
}

.reservation-summary > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    padding: 13px;

    text-align: left;

    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
}

.reservation-summary span {
    margin-bottom: 4px;

    color: #8290a0;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reservation-summary strong {
    color: #f2f4f6;
    font-size: 12px;
    font-weight: 600;
    word-break: break-word;
}

.confirm-question {
    margin-bottom: 20px;

    color: #c5ced8;
    font-size: 12px;
}


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

.modal-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.modal-cancel,
.modal-confirm {
    height: 48px;

    border-radius: 7px;

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

    transition: var(--transition);
}

.modal-cancel {
    color: #cbd3dc;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.modal-cancel:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.modal-confirm {
    color: #07111f;
    background: var(--gold);
}

.modal-confirm:hover {
    color: #07111f;
    background: var(--gold-light);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.2);
}


/* =========================================================
   SUCCESS MODAL
========================================================= */

.success-box {
    max-width: 500px;
}

.success-icon {
    background: var(--gold);
}

.success-box h3 {
    margin-bottom: 15px;
}

.success-box p {
    margin-bottom: 28px;

    color: #c1cad4;
    font-size: 13px;
    line-height: 1.8;
}

.success-box .modal-confirm {
    width: 100%;
}


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

.contact {
    background: var(--bg-secondary);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: 35px;
    align-items: stretch;
}

.contact-map {
    min-height: 500px;
    overflow: hidden;

    background: #0a1727;
    border: 1px solid var(--border-light);
    border-radius: 16px;

    box-shadow: var(--shadow-md);
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    min-height: 500px;

    display: block;

    border: 0 !important;
}

.contact-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 13px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 17px;

    padding: 21px;

    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border-light);
    border-radius: 12px;

    transition: var(--transition);
}

.contact-item:hover {
    transform: translateX(5px);
    border-color: rgba(212, 175, 55, 0.28);
    background: rgba(212, 175, 55, 0.035);
}

.contact-icon {
    width: 44px;
    height: 44px;

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

    flex-shrink: 0;

    color: #07111f;
    background: var(--gold);

    border-radius: 9px;
}

.contact-item > div:last-child {
    min-width: 0;
}

.contact-item span {
    display: block;
    margin-bottom: 3px;

    color: #7f8c9b;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.contact-item strong {
    display: block;

    color: #e8ebef;
    font-size: 12px;
    line-height: 1.6;
    word-break: break-word;
}


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

.footer {
    padding: 75px 0 0;

    background: #040b14;

    border-top: 1px solid rgba(212, 175, 55, 0.12);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 1fr;
    gap: 70px;

    padding-bottom: 55px;
}

.footer-brand .logo {
    margin-bottom: 22px;
}

.footer-brand > p {
    max-width: 360px;

    color: #8995a4;
    font-size: 12px;
    line-height: 1.9;
}

.socials {
    display: flex;
    gap: 9px;

    margin-top: 23px;
}

.socials a {
    width: 40px;
    height: 40px;

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

    color: #b6c0cb;

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

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;

    transition: var(--transition);
}

.socials a:hover {
    color: #07111f;
    background: var(--gold);
    border-color: var(--gold);
    transform: translateY(-3px);
}

.footer h4 {
    margin-bottom: 20px;

    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-links a {
    display: inline-block;
    margin-bottom: 10px;

    color: #8995a4;
    font-size: 11px;

    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--gold);
    transform: translateX(4px);
}

.footer-contact p {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-bottom: 13px;

    color: #8995a4;
    font-size: 11px;
    line-height: 1.7;
}

.footer-contact p i {
    width: 17px;
    flex-shrink: 0;

    margin-top: 3px;

    color: var(--gold);
}

.footer-bottom {
    min-height: 75px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 20px 0;

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

    color: #687585;
    font-size: 10px;
}

.footer-bottom p {
    margin: 0;
}

.created-by {
    text-align: right;
}

.creator-name {
    color: var(--gold);
    font-weight: 700;

    transition: color var(--transition);
}

.creator-name:hover {
    color: var(--gold-light);
}


/* =========================================================
   FOCUS STATES
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}


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

@media (max-width: 1200px) {

    .container {
        width: min(94%, 1100px);
    }

    .nav-menu {
        gap: 18px;
    }

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

    .rooms-grid {
        gap: 18px;
    }

    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .footer-grid {
        gap: 40px;
    }
}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 992px) {

    .navbar {
        height: 74px;
    }

    .nav-menu {
        position: fixed;

        top: 74px;
        left: 0;

        width: 100%;

        max-height: 0;
        overflow: hidden;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;

        padding: 0 5%;

        background: rgba(5, 13, 24, 0.98);
        border-bottom: 1px solid rgba(212, 175, 55, 0.15);

        transition:
                max-height 0.4s ease,
                padding 0.4s ease;
    }

    .nav-menu.active {
        max-height: calc(100vh - 74px);
        overflow-y: auto;
        padding-top: 15px;
        padding-bottom: 20px;
    }

    .nav-menu > a {
        width: 100%;
        padding: 13px 0;

        font-size: 13px;

        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .nav-menu > a::after {
        display: none;
    }

    .language-dropdown {
        margin: 10px 0 0;
    }

    .language-current {
        width: 100%;
    }

    .language-menu {
        position: static;

        width: 100%;
        max-height: 280px;

        margin-top: 8px;

        opacity: 1;
        visibility: visible;
        transform: none;

        display: none;
    }

    .language-dropdown.active .language-menu {
        display: block;
    }

    .nav-reservation {
        display: none;
    }

    .mobile-menu {
        display: block;
    }

    .hero {
        height: 760px;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .about-image,
    .about-image img {
        min-height: 450px;
    }

    .rooms-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rooms-grid .room-card:last-child {
        grid-column: 1 / -1;
        max-width: calc(50% - 9px);
        margin: 0 auto;
    }

    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .testimonial-text {
        min-height: auto;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-map,
    .contact-map iframe {
        min-height: 420px;
    }

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

    .footer-brand {
        grid-column: 1 / -1;
    }
}


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

@media (max-width: 768px) {

    html {
        scroll-padding-top: 74px;
    }

    .section {
        padding: 80px 0;
    }

    .section-heading {
        margin-bottom: 42px;
    }

    .section-heading > span {
        font-size: 10px;
        letter-spacing: 3px;
    }

    .section-heading h2 {
        font-size: 32px;
    }

    .hero {
        min-height: 700px;
        height: 100vh;
        max-height: 820px;
    }

    .hero-overlay {
        background:
                linear-gradient(
                        90deg,
                        rgba(2, 9, 18, 0.87),
                        rgba(2, 9, 18, 0.55)
                ),
                linear-gradient(
                        0deg,
                        rgba(2, 9, 18, 0.82),
                        transparent
                );
    }

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

    .hero-location {
        font-size: 10px;
        letter-spacing: 2.5px;
    }

    .hero h1 {
        font-size: clamp(42px, 12vw, 62px);
        letter-spacing: -1.5px;
    }

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

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

        max-width: 300px;
    }

    .btn {
        width: 100%;
    }

    .hero-controls {
        bottom: 24px;
    }

    .hero-controls button {
        width: 38px;
        height: 38px;
    }

    .about-features {
        grid-template-columns: 1fr;
    }

    .about-image,
    .about-image img {
        min-height: 350px;
    }

    .rooms-grid {
        grid-template-columns: 1fr;
    }

    .rooms-grid .room-card:last-child {
        grid-column: auto;
        max-width: none;
        margin: 0;
    }

    .room-image {
        height: 260px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .gallery-item {
        aspect-ratio: 1 / 0.85;
    }

    .gallery-modal {
        padding: 30px 15px;
    }

    .gallery-modal img {
        max-width: 95vw;
        max-height: 75vh;
    }

    .gallery-prev,
    .gallery-next {
        width: 42px;
        height: 42px;
    }

    .gallery-prev {
        left: 10px;
    }

    .gallery-next {
        right: 10px;
    }

    .gallery-close {
        top: 15px;
        right: 15px;

        width: 42px;
        height: 42px;
    }

    .reservation-box {
        padding: 42px 25px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .reservation-summary {
        grid-template-columns: 1fr;
    }

    .modal {
        padding: 15px;
    }

    .modal-box {
        padding: 40px 22px 25px;
        max-height: 92vh;
    }

    .contact-map,
    .contact-map iframe {
        min-height: 350px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .created-by {
        text-align: left;
    }
}


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

@media (max-width: 480px) {

    .container {
        width: 91%;
    }

    .logo span:first-child {
        font-size: 16px;
    }

    .logo span:last-child {
        font-size: 8px;
        letter-spacing: 4px;
    }

    .mobile-menu {
        width: 40px;
        height: 40px;
    }

    .hero {
        min-height: 650px;
    }

    .hero h1 {
        font-size: 41px;
    }

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

    .hero-buttons {
        max-width: 100%;
    }

    .section {
        padding: 70px 0;
    }

    .section-heading h2 {
        font-size: 29px;
    }

    .about-content h3 {
        font-size: 27px;
    }

    .about-content p {
        font-size: 12px;
    }

    .about-image,
    .about-image img {
        min-height: 280px;
    }

    .gallery-grid {
        grid-template-columns: 1fr 1fr;
    }

    .testimonial-card {
        padding: 25px 20px;
    }

    .reservation-box {
        padding: 35px 17px;
        border-radius: 15px;
    }

    .reservation-heading h2 {
        font-size: 28px;
    }

    .reservation-heading p {
        font-size: 11px;
    }

    .form-group input,
    .form-group select {
        height: 49px;
        font-size: 12px;
    }

    .modal-buttons {
        grid-template-columns: 1fr;
    }

    .modal-box h3 {
        font-size: 21px;
    }

    .contact-item {
        padding: 16px;
        gap: 12px;
    }

    .contact-icon {
        width: 39px;
        height: 39px;
    }

    .contact-item strong {
        font-size: 11px;
    }
}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
========================================================= */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* =========================================================
   PRINT
========================================================= */

@media print {

    .navbar,
    .hero-controls,
    .nav-reservation,
    .mobile-menu,
    .gallery-modal,
    .modal,
    .socials {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .section,
    .footer,
    .testimonials-section {
        background: #fff !important;
        color: #000;
    }
}

/* =====================================================
   MOBILE / TABLET NAVBAR — FINAL FIX
===================================================== */

@media (max-width: 1024px) {

    /* HEADER */
    .navbar {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 99999 !important;
    }

    .navbar-inner {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* DESKTOP RESERVATION BUTTON */
    .nav-reservation {
        display: none !important;
    }

    /* HAMBURGER */
    .mobile-menu {
        display: flex !important;
        position: relative !important;
        z-index: 100001 !important;

        width: 44px !important;
        height: 44px !important;

        padding: 0 !important;
        margin: 0 !important;

        border: 0 !important;
        background: transparent !important;

        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;

        cursor: pointer !important;

        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    .mobile-menu span {
        display: block !important;

        width: 26px !important;
        height: 2px !important;

        background: #D4AF37 !important;

        border-radius: 2px !important;

        transition:
                transform 0.3s ease,
                opacity 0.3s ease !important;
    }

    /* HAMBURGER → X */
    .mobile-menu.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg) !important;
    }

    .mobile-menu.active span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg) !important;
    }


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

    .nav-menu {
        position: fixed !important;

        top: 70px !important;
        left: 0 !important;

        width: 100% !important;

        height: auto !important;
        max-height: calc(100vh - 70px) !important;

        padding: 20px !important;
        margin: 0 !important;

        background: #0B0B0B !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        gap: 0 !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        z-index: 100000 !important;

        /* CLOSED */
        visibility: hidden !important;
        opacity: 0 !important;

        transform: translateY(-20px) !important;

        pointer-events: none !important;

        transition:
                opacity 0.25s ease,
                transform 0.25s ease,
                visibility 0.25s ease !important;
    }


    /* OPEN */
    .nav-menu.active {
        visibility: visible !important;
        opacity: 1 !important;

        transform: translateY(0) !important;

        pointer-events: auto !important;
    }


    /* NAV LINKS */
    .nav-menu > a {
        display: flex !important;

        width: 100% !important;

        min-height: 48px !important;

        padding: 12px 10px !important;

        align-items: center !important;

        color: #ffffff !important;

        text-decoration: none !important;

        border-bottom: 1px solid rgba(212, 175, 55, 0.15) !important;

        cursor: pointer !important;

        pointer-events: auto !important;
    }

    .nav-menu > a:hover {
        color: #D4AF37 !important;
    }


    /* =================================================
       LANGUAGE DROPDOWN
    ================================================= */

    .language-dropdown {
        position: relative !important;

        width: 100% !important;

        margin-top: 10px !important;
    }

    .language-current {
        width: 100% !important;

        min-height: 48px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        background: transparent !important;

        color: #ffffff !important;

        border: 1px solid rgba(212, 175, 55, 0.3) !important;

        cursor: pointer !important;
    }

    .language-menu {
        position: static !important;

        width: 100% !important;

        max-height: none !important;

        background: #111111 !important;
    }

    .language-menu button {
        width: 100% !important;

        min-height: 42px !important;

        text-align: left !important;

        cursor: pointer !important;
    }
}


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

@media (max-width: 480px) {

    .navbar-inner {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .nav-menu {
        top: 64px !important;
        max-height: calc(100vh - 64px) !important;
    }

    .mobile-menu {
        width: 42px !important;
        height: 42px !important;
    }

}

/* =====================================================
   PARK HOTEL QUBA — PREMIUM PRELOADER
===================================================== */

#site-preloader {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background:
            radial-gradient(
                    circle at center,
                    #101c35 0%,
                    #071225 45%,
                    #030914 100%
            );

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

    z-index: 999999;

    overflow: hidden;

    transition:
            opacity 1s ease,
            visibility 1s ease;
}


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

.preloader-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    perspective: 1200px;

    transform-style: preserve-3d;
}


/* -----------------------------------------------------
   WORDS
----------------------------------------------------- */

.logo-word {
    display: flex;
    align-items: center;

    transform-style: preserve-3d;
}


/* -----------------------------------------------------
   LETTERS
----------------------------------------------------- */

.logo-word span {
    display: inline-block;

    font-family:
            "Poppins",
            Arial,
            sans-serif;

    font-size: clamp(
            32px,
            5vw,
            72px
    );

    font-weight: 600;

    letter-spacing: 1px;

    opacity: 0;

    transform:
            translate3d(
                    var(--x),
                    var(--y),
                    var(--z)
            )
            rotateX(var(--rx))
            rotateY(var(--ry))
            rotateZ(var(--rz))
            scale(0.3);

    filter: blur(8px);

    animation:
            preloaderLetter
            1.8s
            cubic-bezier(.16,1,.3,1)
            forwards;

    animation-delay: var(--delay);

    backface-visibility: hidden;
}


/* -----------------------------------------------------
   PARK HOTEL — WHITE
----------------------------------------------------- */

.park-hotel span {
    color: #ffffff;

    text-shadow:
            0 0 10px rgba(255,255,255,.15),
            0 0 30px rgba(255,255,255,.05);
}


/* -----------------------------------------------------
   QUBA — GOLD
----------------------------------------------------- */

.quba span {
    color: #D4AF37;

    text-shadow:
            0 0 10px rgba(212,175,55,.25),
            0 0 30px rgba(212,175,55,.12);
}


/* -----------------------------------------------------
   LETTER ANIMATION
----------------------------------------------------- */

@keyframes preloaderLetter {

    0% {

        opacity: 0;

        transform:
                translate3d(
                        var(--x),
                        var(--y),
                        var(--z)
                )
                rotateX(var(--rx))
                rotateY(var(--ry))
                rotateZ(var(--rz))
                scale(.3);

        filter: blur(10px);
    }

    35% {

        opacity: 1;

        transform:
                translate3d(
                        calc(var(--x) * .45),
                        calc(var(--y) * .45),
                        calc(var(--z) * .45)
                )
                rotateX(180deg)
                rotateY(180deg)
                rotateZ(8deg)
                scale(.85);

        filter: blur(2px);
    }

    65% {

        opacity: 1;

        transform:
                translate3d(
                        calc(var(--x) * .12),
                        calc(var(--y) * .12),
                        0
                )
                rotateX(360deg)
                rotateY(360deg)
                rotateZ(-5deg)
                scale(1.08);

        filter: blur(0);
    }

    100% {

        opacity: 1;

        transform:
                translate3d(0,0,0)
                rotateX(0deg)
                rotateY(0deg)
                rotateZ(0deg)
                scale(1);

        filter: blur(0);
    }
}


/* -----------------------------------------------------
   PRELOADER EXIT
----------------------------------------------------- */

#site-preloader.hide {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


/* -----------------------------------------------------
   MOBILE
----------------------------------------------------- */

@media (max-width: 600px) {

    .preloader-logo {

        flex-direction: column;

        gap: 4px;

    }

    .logo-word span {

        font-size: 34px;

    }

}


/* -----------------------------------------------------
   REDUCED MOTION
----------------------------------------------------- */

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

    .logo-word span {

        animation: none;

        opacity: 1;

        transform:
                translate3d(0,0,0)
                rotateX(0)
                rotateY(0)
                rotateZ(0)
                scale(1);

        filter: none;
    }

}

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

#backToTopBtn {

    position: fixed;

    right: 30px;
    bottom: 30px;

    width: 52px;
    height: 52px;

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

    border-radius: 50%;

    background: rgba(11, 11, 11, 0.92);

    color: #D4AF37;

    font-size: 26px;
    font-weight: 600;

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

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform: translateY(20px);

    transition:
            opacity 0.3s ease,
            visibility 0.3s ease,
            transform 0.3s ease,
            background 0.3s ease;

    z-index: 9999;

    box-shadow:
            0 8px 30px rgba(0, 0, 0, 0.35);
}


/* ACTIVE */

#backToTopBtn.show {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


/* HOVER */

#backToTopBtn:hover {

    background: #D4AF37;

    color: #0B0B0B;

    transform: translateY(-4px);

    box-shadow:
            0 12px 35px rgba(212, 175, 55, 0.25);

}


/* MOBILE */

@media (max-width: 768px) {

    #backToTopBtn {

        right: 18px;

        bottom: 20px;

        width: 46px;

        height: 46px;

        font-size: 23px;

    }

}

.preloader-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.preloader-contact {
    text-align: center;
    line-height: 1.8;
    margin-top: 25px;
}

.preloader-contact p {
    margin: 0 0 5px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.preloader-contact strong {
    display: block;
    font-size: 17px;
    color: #D4AF37;
    font-weight: 600;
}

@keyframes preloaderContactFade {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}