/* =========================================================
   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;
}
       /* =========================================================
          PARK HOTEL QUBA
          NAVBAR + DARK / LIGHT THEME
       ========================================================= */


       /* =========================================================
          ROOT THEME VARIABLES
       ========================================================= */

   :root {

       --bg: #0b0b0b;
       --bg-secondary: #111111;

       --text: #ffffff;
       --text-soft: #b8b8b8;

       --gold: #d4af37;
       --gold-hover: #e5c354;

       --border: rgba(255, 255, 255, 0.12);

       --navbar-bg: rgba(11, 11, 11, 0.94);

       --menu-bg: #111111;

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

       --transition:
               0.3s ease;
   }


/* =========================================================
   LIGHT THEME
========================================================= */

body.light-theme {

    --bg: #f7f7f5;
    --bg-secondary: #ffffff;

    --text: #171717;
    --text-soft: #666666;

    --gold: #a78316;
    --gold-hover: #8f7010;

    --border: rgba(0, 0, 0, 0.12);

    --navbar-bg: rgba(255, 255, 255, 0.96);

    --menu-bg: #ffffff;

    --shadow:
            0 15px 40px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   GLOBAL THEME TRANSITION
========================================================= */

body {

    background: var(--bg);
    color: var(--text);

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


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

.navbar {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background:
            var(--navbar-bg);

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

    backdrop-filter:
            blur(18px);

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

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


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

.navbar-inner {

    min-height: 82px;

    display: flex;

    align-items: center;

    gap: 28px;
}


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

.logo {

    display: inline-flex;

    flex-direction: column;

    text-decoration: none;

    line-height: 1;

    flex-shrink: 0;
}


.logo-main {

    color: var(--text);

    font-family:
            "Montserrat",
            sans-serif;

    font-size: 18px;

    font-weight: 700;

    letter-spacing: 2px;

    transition:
            color var(--transition);
}


.logo-location {

    margin-top: 5px;

    color: var(--gold);

    font-family:
            "Montserrat",
            sans-serif;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 5px;

    transition:
            color var(--transition);
}


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

.nav-menu {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 24px;

    margin-left: auto;
}


.nav-menu > a {

    position: relative;

    color: var(--text-soft);

    text-decoration: none;

    font-family:
            "Montserrat",
            sans-serif;

    font-size: 13px;

    font-weight: 500;

    white-space: nowrap;

    transition:
            color var(--transition);
}


.nav-menu > a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 1px;

    background:
            var(--gold);

    transition:
            width var(--transition);
}


.nav-menu > a:hover {

    color: var(--text);
}


.nav-menu > a:hover::after {

    width: 100%;
}


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

.language-dropdown {

    position: relative;

    flex-shrink: 0;
}


.language-current {

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 8px 10px;

    border: 0;

    background: transparent;

    color: var(--text);

    cursor: pointer;

    font-family:
            "Montserrat",
            sans-serif;

    font-size: 12px;

    font-weight: 600;

    transition:
            color var(--transition);
}


.language-current i {

    font-size: 9px;

    transition:
            transform var(--transition);
}


.language-dropdown.active
.language-current i {

    transform:
            rotate(180deg);
}


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

.language-menu {

    position: absolute;

    top: calc(100% + 12px);

    right: 0;

    width: 190px;

    max-height: 360px;

    overflow-y: auto;

    padding: 8px;

    background:
            var(--menu-bg);

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

    border-radius: 10px;

    box-shadow:
            var(--shadow);

    opacity: 0;

    visibility: hidden;

    transform:
            translateY(-8px);

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

    z-index: 1100;
}


.language-dropdown.active
.language-menu {

    opacity: 1;

    visibility: visible;

    transform:
            translateY(0);
}


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

.language-menu button {

    width: 100%;

    display: block;

    padding: 10px 12px;

    border: 0;

    border-radius: 7px;

    background: transparent;

    color: var(--text-soft);

    text-align: left;

    cursor: pointer;

    font-family:
            "Montserrat",
            sans-serif;

    font-size: 12px;

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


.language-menu button:hover {

    background:
            rgba(212, 175, 55, 0.12);

    color:
            var(--gold);
}


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

.navbar-actions {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;
}


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

.nav-reservation {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 42px;

    padding: 0 18px;

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

    color: var(--gold);

    text-decoration: none;

    font-family:
            "Montserrat",
            sans-serif;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 0.4px;

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


.nav-reservation:hover {

    background:
            var(--gold);

    color:
            #111;
}


/* =========================================================
   THEME BUTTON
   YALNIZ 1 DƏNƏ
========================================================= */

.theme-toggle {

    width: 42px;

    height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0;

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

    border-radius: 50%;

    background:
            transparent;

    color:
            var(--text);

    cursor: pointer;

    flex-shrink: 0;

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


.theme-toggle:hover {

    background:
            rgba(212, 175, 55, 0.12);

    border-color:
            var(--gold);

    transform:
            rotate(12deg);
}


#themeIcon {

    display: block;

    font-size: 17px;

    line-height: 1;
}


/* =========================================================
   HAMBURGER
========================================================= */

.mobile-menu {

    display: none;

    width: 42px;

    height: 42px;

    padding: 0;

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

    border-radius: 8px;

    background:
            transparent;

    cursor: pointer;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 5px;
}


.mobile-menu span {

    display: block;

    width: 19px;

    height: 2px;

    background:
            var(--text);

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


/* =========================================================
   HAMBURGER ACTIVE
========================================================= */

.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);
}


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

@media (max-width: 1100px) {

    .navbar-inner {

        gap: 18px;
    }


    .nav-menu {

        gap: 16px;
    }


    .nav-menu > a {

        font-size: 12px;
    }


    .nav-reservation {

        padding: 0 14px;

        font-size: 11px;
    }

}


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

@media (max-width: 900px) {

    .navbar-inner {

        min-height: 72px;
    }


    /* ---------------------------------------------
       DESKTOP NAV
    --------------------------------------------- */

    .nav-menu {

        position: absolute;

        top: calc(100% + 10px);

        right: 15px;

        left: auto;

        width: max-content;

        min-width: 220px;

        max-width: calc(100vw - 30px);

        display: flex;

        flex-direction: column;

        align-items: stretch;

        justify-content: flex-start;

        gap: 0;

        margin: 0;

        padding: 10px;

        background:
                var(--menu-bg);

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

        border-radius: 12px;

        box-shadow:
                var(--shadow);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform:
                translateY(-8px);

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

        z-index: 1050;
    }


    /* ---------------------------------------------
       OPEN MENU
    --------------------------------------------- */

    .nav-menu.active {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
                translateY(0);
    }


    /* ---------------------------------------------
       NAV LINKS
    --------------------------------------------- */

    .nav-menu > a {

        display: block;

        width: 100%;

        padding: 11px 14px;

        border-radius: 7px;

        color: var(--text);

        font-size: 13px;
    }


    .nav-menu > a::after {

        display: none;
    }


    .nav-menu > a:hover {

        background:
                rgba(212, 175, 55, 0.10);

        color:
                var(--gold);
    }


    /* ---------------------------------------------
       LANGUAGE INSIDE SAME MENU
    --------------------------------------------- */

    .language-dropdown {

        width: 100%;

        margin-top: 3px;

        padding-top: 3px;

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


    .language-current {

        width: 100%;

        justify-content: space-between;

        padding: 11px 14px;
    }


    .language-menu {

        position: absolute;

        top: calc(100% + 8px);

        right: 0;

        width: 190px;
    }


    /* ---------------------------------------------
       RESERVATION
    --------------------------------------------- */

    .nav-reservation {

        display: none;
    }


    /* ---------------------------------------------
       THEME
       EYNİ DÜYMƏ
    --------------------------------------------- */

    .theme-toggle {

        width: 40px;

        height: 40px;
    }


    /* ---------------------------------------------
       HAMBURGER
    --------------------------------------------- */

    .mobile-menu {

        display: inline-flex;
    }

}


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

@media (max-width: 600px) {

    .navbar-inner {

        min-height: 68px;

        gap: 10px;
    }


    .logo-main {

        font-size: 15px;

        letter-spacing: 1.5px;
    }


    .logo-location {

        font-size: 8px;

        letter-spacing: 4px;
    }


    .navbar-actions {

        gap: 7px;

        margin-left: auto;
    }


    .theme-toggle,
    .mobile-menu {

        width: 38px;

        height: 38px;
    }


    .nav-menu {

        right: 10px;

        max-width:
                calc(100vw - 20px);

        min-width: 200px;

        padding: 8px;
    }


    .nav-menu > a {

        padding:
                10px 12px;

        font-size: 12px;
    }

}


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

@media (max-width: 380px) {

    .logo-main {

        font-size: 13px;
    }


    .logo-location {

        font-size: 7px;
    }


    .navbar-actions {

        gap: 5px;
    }


    .theme-toggle,
    .mobile-menu {

        width: 36px;

        height: 36px;
    }

}


/* =========================================================
   BODY TOP SPACE
   Fixed navbar üçün
========================================================= */

body {

    padding-top: 82px;
}


@media (max-width: 900px) {

    body {

        padding-top: 72px;
    }

}


@media (max-width: 600px) {

    body {

        padding-top: 68px;
    }

}


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

.hero {
    position: relative;
    overflow: hidden;
}

.hero-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

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

    width: 100%;
    height: 100%;

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

    opacity: 0;

    transform: scale(1.05);

    transition:
            opacity 1.2s ease-in-out,
            transform 6s ease-in-out;

    z-index: 0;
}

.hero-slide.active {
    opacity: 1;

    transform: scale(1);
}

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

    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-controls {
    position: absolute;

    left: 50%;
    bottom: 35px;

    transform: translateX(-50%);

    z-index: 10;

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

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

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

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

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

    color: #fff;

    cursor: pointer;

    border-radius: 50%;

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

.hero-controls button:hover {
    background: rgba(0,0,0,.65);

    transform: scale(1.08);
}

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

.hero-dot {
    display: block;

    width: 8px;
    height: 8px;

    border-radius: 50%;

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

    cursor: pointer;

    transition:
            width .3s ease,
            background .3s ease;
}

.hero-dot.active {
    width: 28px;

    border-radius: 20px;

    background: #D4AF37;
}


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

@media (max-width: 768px) {

    .hero-controls {
        bottom: 20px;

        gap: 12px;
    }

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

    .hero-dot {
        width: 7px;
        height: 7px;
    }

    .hero-dot.active {
        width: 22px;
    }

}


/* =========================================================
   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;
    }

}

/* =========================================================
   PARK HOTEL QUBA
   FINAL LIGHT THEME — BLACK + RED TEXT
   BU BLOK CSS-IN ƏN SONUNDA OLMALIDIR
========================================================= */

body.light-theme {

    /* Background */
    --bg-main: #f7f7f5;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f2f2f2;

    /* Text */
    --text-main: #111111;
    --text-secondary: #444444;
    --text-muted: #666666;

    --text: #111111;
    --text-soft: #444444;

    /* RED ACCENT */
    --gold: #c00000;
    --gold-light: #e00000;
    --gold-dark: #8f0000;

    --border: rgba(0, 0, 0, 0.12);
    --border-light: rgba(0, 0, 0, 0.10);

    --navbar-bg: rgba(255, 255, 255, 0.96);
    --menu-bg: #ffffff;
}


/* =========================================================
   BODY
========================================================= */

body.light-theme {
    background: #f7f7f5 !important;
    color: #111111 !important;
}


/* =========================================================
   ALL NORMAL TEXT
========================================================= */

body.light-theme p,
body.light-theme li,
body.light-theme label,
body.light-theme small,
body.light-theme td,
body.light-theme th,
body.light-theme span {
    color: #111111;
}


/* =========================================================
   HEADINGS
========================================================= */

body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme h4,
body.light-theme h5,
body.light-theme h6 {
    color: #111111 !important;
}


/* =========================================================
   LINKS
========================================================= */

body.light-theme a {
    color: #111111;
}

body.light-theme a:hover {
    color: #c00000;
}


/* =========================================================
   GOLD / ACCENT → RED
========================================================= */

body.light-theme .gold,
body.light-theme .accent,
body.light-theme .highlight,
body.light-theme .eyebrow,
body.light-theme .section-eyebrow,
body.light-theme .about-label,
body.light-theme .testimonials-subtitle,
body.light-theme .reservation-heading > span,
body.light-theme .modal-label,
body.light-theme .logo-location,
body.light-theme .creator-name {
    color: #c00000 !important;
}


/* =========================================================
   SECTION HEADINGS
========================================================= */

body.light-theme .section-heading > span {
    color: #c00000 !important;
}

body.light-theme .section-heading h2 {
    color: #111111 !important;
}

body.light-theme .section-heading h2 span {
    color: #111111 !important;
}

body.light-theme .section-heading h2 strong {
    color: #c00000 !important;
}


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

body.light-theme .about-content h3 {
    color: #111111 !important;
}

body.light-theme .about-content p {
    color: #444444 !important;
}

body.light-theme .about-features span {
    color: #111111 !important;
}

body.light-theme .about-features i {
    color: #c00000 !important;
}


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

body.light-theme .room-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.10);
}

body.light-theme .room-body h3 {
    color: #111111 !important;
}

body.light-theme .room-body p {
    color: #444444 !important;
}

body.light-theme .room-body li {
    color: #333333 !important;
}

body.light-theme .room-body li i {
    color: #c00000 !important;
}

body.light-theme .room-number {
    color: rgba(192, 0, 0, 0.14) !important;
}


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

body.light-theme .testimonials-section {
    background: #f4f4f2 !important;
}

body.light-theme .testimonials-heading h2 {
    color: #111111 !important;
}

body.light-theme .testimonials-heading p {
    color: #444444 !important;
}

body.light-theme .testimonial-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.10);
}

body.light-theme .testimonial-text {
    color: #333333 !important;
}

body.light-theme .testimonial-author h4 {
    color: #111111 !important;
}

body.light-theme .testimonial-author span {
    color: #666666 !important;
}

body.light-theme .testimonial-stars {
    color: #c00000 !important;
}


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

body.light-theme .reservation {
    background: #f7f7f5 !important;
}

body.light-theme .reservation-box {
    background: #ffffff !important;
    border-color: rgba(192, 0, 0, 0.20);
}

body.light-theme .reservation-heading h2 {
    color: #111111 !important;
}

body.light-theme .reservation-heading h2 span {
    color: #111111 !important;
}

body.light-theme .reservation-heading h2 strong {
    color: #c00000 !important;
}

body.light-theme .reservation-heading p {
    color: #444444 !important;
}

body.light-theme .reservation-heading p span {
    color: #111111 !important;
}


/* =========================================================
   FORM
========================================================= */

body.light-theme .form-group label {
    color: #222222 !important;
}

body.light-theme .form-group input,
body.light-theme .form-group select,
body.light-theme .form-group textarea {
    color: #111111 !important;
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

body.light-theme .form-group input::placeholder,
body.light-theme .form-group textarea::placeholder {
    color: #777777 !important;
}

body.light-theme .form-group select option {
    color: #111111 !important;
    background: #ffffff !important;
}

body.light-theme .form-group input:focus,
body.light-theme .form-group select:focus,
body.light-theme .form-group textarea:focus {
    border-color: #c00000 !important;
    box-shadow: 0 0 0 3px rgba(192, 0, 0, 0.08) !important;
}


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

body.light-theme .reservation-submit {
    color: #ffffff !important;
    background: #c00000 !important;
}

body.light-theme .reservation-submit:hover {
    color: #ffffff !important;
    background: #a00000 !important;
}


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

body.light-theme .navbar {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom-color: rgba(0, 0, 0, 0.10) !important;
}

body.light-theme .logo-main {
    color: #111111 !important;
}

body.light-theme .logo-location {
    color: #c00000 !important;
}

body.light-theme .nav-menu > a {
    color: #111111 !important;
}

body.light-theme .nav-menu > a:hover {
    color: #c00000 !important;
}

body.light-theme .language-current {
    color: #111111 !important;
}

body.light-theme .language-menu {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

body.light-theme .language-menu button {
    color: #111111 !important;
}

body.light-theme .language-menu button:hover {
    color: #c00000 !important;
    background: rgba(192, 0, 0, 0.06) !important;
}

body.light-theme .theme-toggle {
    color: #111111 !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

body.light-theme .mobile-menu span {
    background: #c00000 !important;
}


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

body.light-theme .nav-reservation {
    color: #c00000 !important;
    border-color: #c00000 !important;
}

body.light-theme .nav-reservation:hover {
    color: #ffffff !important;
    background: #c00000 !important;
}


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

body.light-theme .contact {
    background: #ffffff !important;
}

body.light-theme .contact-item {
    background: #f8f8f8;
    border-color: rgba(0, 0, 0, 0.10);
}

body.light-theme .contact-item span {
    color: #666666 !important;
}

body.light-theme .contact-item strong {
    color: #111111 !important;
}

body.light-theme .contact-icon {
    color: #ffffff !important;
    background: #c00000 !important;
}


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

body.light-theme .footer {
    background: #eeeeec !important;
    border-top-color: rgba(192, 0, 0, 0.15);
}

body.light-theme .footer h4 {
    color: #111111 !important;
}

body.light-theme .footer-brand > p,
body.light-theme .footer-links a,
body.light-theme .footer-contact p {
    color: #555555 !important;
}

body.light-theme .footer-links a:hover {
    color: #c00000 !important;
}

body.light-theme .footer-contact p i {
    color: #c00000 !important;
}

body.light-theme .footer-bottom {
    color: #666666 !important;
    border-top-color: rgba(0, 0, 0, 0.10);
}

body.light-theme .creator-name {
    color: #c00000 !important;
}


/* =========================================================
   SOCIAL ICONS
========================================================= */

body.light-theme .socials a {
    color: #333333 !important;
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.10);
}

body.light-theme .socials a:hover {
    color: #ffffff !important;
    background: #c00000 !important;
    border-color: #c00000 !important;
}


/* =========================================================
   MODALS
========================================================= */

body.light-theme .modal-overlay {
    background: rgba(0, 0, 0, 0.55);
}

body.light-theme .modal-box {
    background: #ffffff !important;
    border-color: rgba(192, 0, 0, 0.20);
}

body.light-theme .modal-box h3 {
    color: #111111 !important;
}

body.light-theme .modal-close {
    color: #444444 !important;
    background: rgba(0, 0, 0, 0.05);
}

body.light-theme .modal-close:hover {
    color: #ffffff !important;
    background: #c00000 !important;
}

body.light-theme .reservation-summary > div {
    background: #f7f7f7;
    border-color: rgba(0, 0, 0, 0.08);
}

body.light-theme .reservation-summary span {
    color: #777777 !important;
}

body.light-theme .reservation-summary strong {
    color: #111111 !important;
}

body.light-theme .confirm-question {
    color: #444444 !important;
}

body.light-theme .modal-cancel {
    color: #333333 !important;
    background: #eeeeee;
    border-color: rgba(0, 0, 0, 0.12);
}

body.light-theme .modal-cancel:hover {
    color: #111111 !important;
    background: #e2e2e2;
}

body.light-theme .modal-confirm {
    color: #ffffff !important;
    background: #c00000 !important;
}

body.light-theme .modal-confirm:hover {
    color: #ffffff !important;
    background: #a00000 !important;
}

body.light-theme .success-box p {
    color: #444444 !important;
}


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

body.light-theme .gallery-modal {
    background: rgba(255, 255, 255, 0.96);
}

body.light-theme .gallery-close,
body.light-theme .gallery-prev,
body.light-theme .gallery-next {
    color: #111111 !important;
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.12);
}

body.light-theme .gallery-close:hover,
body.light-theme .gallery-prev:hover,
body.light-theme .gallery-next:hover {
    color: #ffffff !important;
    background: #c00000 !important;
    border-color: #c00000 !important;
}


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

body.light-theme .hero-controls button {
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.45);
}

body.light-theme .hero-dot.active {
    background: #c00000 !important;
}


/* =========================================================
   INLINE WHITE TEXT FIX
   HTML-də style="color:#fff" olanlar üçün
========================================================= */

body.light-theme [style*="color: #fff"],
body.light-theme [style*="color:#fff"],
body.light-theme [style*="color: #FFF"],
body.light-theme [style*="color:#FFF"],
body.light-theme [style*="color: white"],
body.light-theme [style*="color:white"] {
    color: #111111 !important;
}


/* =========================================================
   INLINE GOLD TEXT FIX
========================================================= */

body.light-theme [style*="color: #D4AF37"],
body.light-theme [style*="color:#D4AF37"],
body.light-theme [style*="color: #d4af37"],
body.light-theme [style*="color:#d4af37"] {
    color: #c00000 !important;
}


/* =========================================================
   HERO TEXT
   HERO ŞƏKİLİNİN ÜSTÜNDƏ QALSIN
========================================================= */

body.light-theme .hero h1,
body.light-theme .hero h1 span {
    color: #ffffff !important;
}

body.light-theme .hero h1 span:last-child {
    color: #ff3333 !important;
}

body.light-theme .hero p,
body.light-theme .hero-description {
    color: #ffffff !important;
}


/* =========================================================
   ICONS
========================================================= */

body.light-theme i.fa-solid,
body.light-theme i.fa-regular,
body.light-theme i.fa-brands {
    color: inherit;
}


/* =========================================================
   SELECTION
========================================================= */

body.light-theme ::selection {
    background: #c00000;
    color: #ffffff;
}


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

.hero {
    height: 600px;
    min-height: 600px;
}

.hero-content {
    height: 600px;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* =====================================================
   HERO H1 — BIG
===================================================== */

.hero h1 {
    font-size: 80px !important;
    line-height: 1.05;
    font-weight: 800;
    margin: 15px 0 25px;
}

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

.hero h1 span:last-child {
    color: #c00000 !important;
}

/* =====================================================
   HERO P — WHITE
===================================================== */

.hero p,
.hero-location,
.hero-description {
    color: #ffffff !important;
}

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

.hero .btn-gold span {
    color: #c00000 !important;
}

.hero .btn-gold i {
    color: #ffffff !important;
}

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

@media (max-width: 991px) {

    .hero {
        height: 600px;
        min-height: 600px;
    }

    .hero-content {
        height: 600px;
        min-height: 600px;
    }

    .hero h1 {
        font-size: 64px !important;
    }
}

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

@media (max-width: 767px) {

    .hero {
        height: 600px;
        min-height: 600px;
    }

    .hero-content {
        height: 600px;
        min-height: 600px;
    }

    .hero h1 {
        font-size: 46px !important;
        line-height: 1.08;
    }

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

/* =====================================================
   HERO — RESERVATION BUTTON
===================================================== */

.hero .btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    background: #c00000 !important;
    color: #ffffff !important;

    padding: 16px 30px;
    border-radius: 6px;

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

    border: 1px solid #c00000;

    text-decoration: none;

    transition: all 0.3s ease;
}

/* Yazı ağ */
.hero .btn-gold span {
    color: #ffffff !important;
}

/* Ox ağ */
.hero .btn-gold i {
    color: #ffffff !important;
}

/* Hover */
.hero .btn-gold:hover {
    background: #e00000 !important;
    border-color: #e00000;
    transform: translateY(-2px);
}

.hero .btn-gold:hover span,
.hero .btn-gold:hover i {
    color: #ffffff !important;
}


/* HERO P — WHITE */
.hero p,
.hero p span {
    color: #ffffff !important;
}

.hero-slide {
    transition: opacity 0.25s ease, transform 0.3s ease;
}


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

#site-preloader {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100vh;

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

    background: #ffffff !important;

    z-index: 999999;

    overflow: hidden;

    opacity: 1;
    visibility: visible;

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


/* =====================================================
   PRELOADER CENTER
===================================================== */

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

    text-align: center;

    animation: preloaderCenter 1.2s ease forwards;
}


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

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

    gap: 16px;

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

    font-size: clamp(
            38px,
            6vw,
            76px
    );

    font-weight: 700;

    letter-spacing: 2px;

    line-height: 1;

    white-space: nowrap;
}


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

.logo-word {
    display: inline-flex;
}


/* =====================================================
   LETTER
===================================================== */

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

    opacity: 0;

    transform:
            translateY(35px)
            scale(0.7);

    filter: blur(8px);

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

    animation-delay: var(--delay);
}


/* =====================================================
   PARK HOTEL
===================================================== */

.park-hotel span {
    color: #ffffff;

    text-shadow:
            0 0 12px rgba(255,255,255,.20),
            0 0 35px rgba(255,255,255,.08);
}


/* =====================================================
   QUBA
===================================================== */

.quba span {
    color: #d4af37;

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


/* =====================================================
   SUBTITLE
===================================================== */

.preloader-subtitle {
    margin-top: 22px;

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

    font-size: 12px;

    font-weight: 400;

    letter-spacing: 5px;

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

    text-transform: uppercase;

    opacity: 0;

    animation:
            preloaderSubtitle
            0.8s
            ease
            1.1s
            forwards;
}


/* =====================================================
   LINE
===================================================== */

.preloader-line {
    width: 0;

    height: 1px;

    margin-top: 20px;

    background: #d4af37;

    animation:
            preloaderLine
            1s
            ease
            1.1s
            forwards;
}


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

@keyframes preloaderLetter {

    0% {
        opacity: 0;

        transform:
                translateY(35px)
                scale(0.7);

        filter: blur(8px);
    }

    60% {
        opacity: 1;

        transform:
                translateY(-5px)
                scale(1.05);

        filter: blur(0);
    }

    100% {
        opacity: 1;

        transform:
                translateY(0)
                scale(1);

        filter: blur(0);
    }
}


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

@keyframes preloaderCenter {

    0% {
        opacity: 0;

        transform:
                scale(.96);
    }

    100% {
        opacity: 1;

        transform:
                scale(1);
    }
}


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

@keyframes preloaderSubtitle {

    0% {
        opacity: 0;

        transform:
                translateY(10px);
    }

    100% {
        opacity: 1;

        transform:
                translateY(0);
    }
}


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

@keyframes preloaderLine {

    0% {
        width: 0;
    }

    100% {
        width: 120px;
    }
}


/* =====================================================
   HIDE
===================================================== */

#site-preloader.hide {
    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


/* =====================================================
   PRELOADER — LIGHT THEME
===================================================== */

body.light-theme #site-preloader {
    background: #ffffff !important;
}

/* PARK HOTEL — QARA */
body.light-theme #site-preloader .park-hotel span {
    color: #000000 !important;

    text-shadow:
            0 0 12px rgba(0, 0, 0, 0.08),
            0 0 30px rgba(0, 0, 0, 0.04);
}

/* QUBA — QIRMIZI */
body.light-theme #site-preloader .quba span {
    color: #c00000 !important;

    text-shadow:
            0 0 12px rgba(192, 0, 0, 0.20),
            0 0 30px rgba(192, 0, 0, 0.08);
}

/* QUBA • AZERBAIJAN */
body.light-theme #site-preloader .preloader-subtitle {
    color: #000000 !important;
}

/* ALT XƏTT */
body.light-theme #site-preloader .preloader-line {
    background: #c00000 !important;
}

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

@media (max-width: 600px) {

    .preloader-logo {
        flex-direction: column;

        gap: 8px;

        font-size: 38px;

        letter-spacing: 1.5px;
    }

    .preloader-subtitle {
        margin-top: 18px;

        font-size: 9px;

        letter-spacing: 3px;
    }

    .preloader-line {
        margin-top: 16px;
    }
}


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

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

    .logo-word span,
    .preloader-center,
    .preloader-subtitle,
    .preloader-line {

        animation: none !important;

        opacity: 1;

        transform: none;

        filter: none;
    }

    .preloader-line {
        width: 120px;
    }
}
#site-preloader {
    background: #000000 !important;
}

body.light-theme #site-preloader {
    background: #ffffff !important;
}

/* =====================================================
   SCROLL TO TOP
===================================================== */

.scroll-to-top {
    position: fixed;

    right: 30px;
    bottom: 30px;

    width: 52px;
    height: 52px;

    border: none;
    border-radius: 50%;

    background: #D4AF37;
    color: #ffffff;

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

    font-size: 20px;

    cursor: pointer;

    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);

    transition:
            opacity 0.3s ease,
            visibility 0.3s ease,
            transform 0.3s ease,
            background 0.3s ease,
            box-shadow 0.3s ease;

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

.scroll-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    transform: translateY(-4px);
    box-shadow:
            0 12px 30px rgba(0, 0, 0, 0.35);
}

.scroll-to-top i {
    color: #ffffff;
    pointer-events: none;
}

/* =====================================================
   LIGHT THEME
===================================================== */

body.light-theme .scroll-to-top {
    background: #c00000;
    color: #ffffff;
}

body.light-theme .scroll-to-top i {
    color: #ffffff;
}

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

@media (max-width: 768px) {

    .scroll-to-top {
        width: 46px;
        height: 46px;

        right: 20px;
        bottom: 20px;

        font-size: 17px;
    }
}

@media (max-width: 480px) {

    .scroll-to-top {
        width: 44px;
        height: 44px;

        right: 16px;
        bottom: 16px;

        font-size: 16px;
    }
}

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

.mobile-menu {
    display: none;

    width: 44px;
    height: 44px;

    border: none;
    background: transparent;

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

    gap: 5px;

    cursor: pointer;

    padding: 0;
}

.mobile-menu span {
    display: block;

    width: 24px;
    height: 2px;

    background: #ffffff;

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


/* =====================================================
   TABLET + MOBILE
===================================================== */

@media (max-width: 992px) {

    .mobile-menu {
        display: flex;
    }

    .nav-menu {
        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        width: 100%;

        display: flex;
        flex-direction: column;

        gap: 0;

        background: #0B0B0B;

        padding: 20px;

        opacity: 0;
        visibility: hidden;

        transform: translateY(-10px);

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

        z-index: 9998;
    }

    .nav-menu.active {
        opacity: 1;
        visibility: visible;

        transform: translateY(0);
    }

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

        padding: 15px 10px;

        text-align: center;
    }

    .nav-menu .language-dropdown {
        width: 100%;
        margin-top: 10px;
    }

    .nav-menu .language-current {
        width: 100%;
        justify-content: center;
    }

    /* 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);
    }

    /* Light theme */

    body.light-theme .nav-menu {
        background: #ffffff;
    }

    body.light-theme .mobile-menu span {
        background: #c00000;
    }

}

.navbar {
    position: relative;
}

.navbar-inner {
    position: relative;
}

/* =====================================================
   MOBILE / TABLET NAVBAR - FINAL
===================================================== */

@media (max-width: 992px) {

    .navbar {
        position: relative;
        z-index: 10000;
    }

    .navbar-inner {
        position: relative;
    }

    .nav-menu {
        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        width: 100%;

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

        background: #0B0B0B;

        padding: 20px 25px;

        gap: 0;

        opacity: 0;
        visibility: hidden;

        transform: translateY(-10px);

        pointer-events: none;

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

        z-index: 99999;
    }

    /* MENU AÇIQ */

    .nav-menu.active {
        opacity: 1;
        visibility: visible;

        transform: translateY(0);

        pointer-events: auto;
    }

    /* NAV LINKLƏR */

    .nav-menu > a {
        display: block;

        width: 100%;

        padding: 14px 10px;

        color: #ffffff !important;

        text-decoration: none;

        text-align: center;

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

        opacity: 1 !important;

        visibility: visible !important;
    }

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

    /* LANGUAGE */

    .nav-menu .language-dropdown {
        display: flex;

        width: 100%;

        flex-direction: column;
        align-items: center;

        margin-top: 8px;
    }

    .nav-menu .language-current {
        display: flex;

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

        gap: 8px;

        color: #ffffff !important;

        background: transparent;

        border: none;

        font-size: 16px;

        cursor: pointer;
    }

    .nav-menu .language-current i {
        color: #ffffff !important;
    }

    /* LANGUAGE MENU */

    .nav-menu .language-menu {
        position: relative;

        width: 100%;

        max-height: 220px;

        overflow-y: auto;

        background: #111111;

        z-index: 100000;
    }

    .nav-menu .language-menu button {
        color: #ffffff !important;
    }


    /* =================================================
       HAMBURGER
    ================================================= */

    .mobile-menu {
        display: flex;

        position: relative;

        z-index: 100001;

        width: 44px;
        height: 44px;

        padding: 0;

        border: none;

        background: transparent;

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

        gap: 5px;

        cursor: pointer;
    }

    .mobile-menu span {
        width: 24px;
        height: 2px;

        background: #ffffff !important;

        display: block;

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


    /* =================================================
     LIGHT THEME — NAVBAR
  ================================================= */

    body.light-theme .nav-menu {
        background: #ffffff !important;
    }

    body.light-theme .nav-menu > a {
        color: #222222 !important;
    }

    body.light-theme .nav-menu > a:hover {
        color: #c00000 !important;
    }

    body.light-theme .nav-menu .language-current {
        color: #222222 !important;
    }

    body.light-theme .nav-menu .language-current i {
        color: #222222 !important;
    }

    body.light-theme .nav-menu .language-menu {
        background: #f5f5f5 !important;
    }

    body.light-theme .nav-menu .language-menu button {
        color: #222222 !important;
    }

    body.light-theme .mobile-menu span {
        background: #c00000 !important;
    }


    /* =================================================
       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);
    }
}

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

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.hero-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 28px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* REZERVASIYA ET */
.hero-buttons .btn-gold {
    background: #D4AF37;
    color: #ffffff;
    border: 1px solid #D4AF37;
}

.hero-buttons .btn-gold:hover {
    background: #b8941f;
    border-color: #b8941f;
}

/* OTAQLARIMIZA BAX */
.hero-buttons .btn-outline {
    background: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
}

.hero-buttons .btn-outline:hover {
    background: #ffffff;
    color: #0B0B0B;
}

/* Light Theme */
body.light-theme .hero-buttons .btn-outline {
    background: #ffffff;
    color: #222222;
    border-color: #222222;
}

body.light-theme .hero-buttons .btn-outline:hover {
    background: #c00000;
    color: #ffffff;
    border-color: #c00000;
}

/* Arrow */
.hero-buttons .btn i {
    margin-left: 10px;
}

/* MOBILE */
@media (max-width: 576px) {

    .hero-buttons {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .hero-buttons .btn {
        width: 100%;
        min-height: 50px;
    }
}v