/*=========================================
        TYPOGRAPHY SYSTEM
=========================================*/

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {

    font-family: 'Cormorant Garamond', serif;

    font-weight: 700;

    color: var(--white);

    letter-spacing: .5px;

}

/* Hero */

.hero-content h1 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 78px;

    font-weight: 700;

}

.hero-subtitle {

    font-family: 'Cormorant Garamond', serif;

    font-size: 22px;

    font-style: italic;

}

/* Section */

.section-subtitle {

    font-family: 'Cormorant Garamond', serif;

    font-size: 22px;

    color: var(--gold);

    font-style: italic;

    letter-spacing: 2px;

}

.section-title {

    font-family: 'Cormorant Garamond', serif;

    font-size: 60px;

    font-weight: 700;

    line-height: 1.15;

}

/* About */

.experience-badge h3 {

    font-family: 'Cormorant Garamond', serif;

}

/* Room */

.room-title {

    font-family: 'Cormorant Garamond', serif;

    font-size: 48px;

}

.room-price {

    font-family: 'Cormorant Garamond', serif;

    font-size: 46px;

    font-weight: 700;

}

/* Testimonials */

.testimonial-name {

    font-family: 'Cormorant Garamond', serif;

    font-size: 28px;

}

/* Footer */

.footer h4,
.footer h5 {

    font-family: 'Cormorant Garamond', serif;

}

/* Buttons */

.theme-btn,
.book-btn {

    font-family: 'Poppins', sans-serif;

    font-weight: 600;

}

/* Body */

body {

    font-family: 'Poppins', sans-serif;

}

p,
span,
li,
a,
input,
textarea,
button {

    font-family: 'Poppins', sans-serif;

}


/*======================================================
    HOTEL LUXURY WEBSITE
    Theme : Black | Gold | White
======================================================*/

/*==============================
        GOOGLE FONTS
==============================*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');


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

:root {

    --black: #0B0B0B;
    --black-light: #171717;

    --gold: #D4AF37;
    --gold-light: #E6C65C;

    --white: #ffffff;

    --text: #cfcfcf;

    --border: rgba(255, 255, 255, .08);

    --shadow: 0 20px 50px rgba(0, 0, 0, .35);

    --radius: 20px;

    --transition: .4s ease;

}


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

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    background: var(--black);

    color: var(--white);

    font-family: 'Poppins', sans-serif;

    overflow-x: hidden;

    line-height: 1.7;

}

img {

    width: 100%;

    display: block;

}

a {

    text-decoration: none;

}

ul {

    list-style: none;

    margin: 0;
    padding: 0;

}

section {

    padding: 100px 0;

}

.container {

    max-width: 1320px;

}


/*==============================
        TYPOGRAPHY
==============================*/

h1,
h2,
h3,
h4,
h5,
h6 {

    font-family: 'Cormorant Garamond', serif;

    font-weight: 700;

    color: var(--white);

}

.section-subtitle {

    color: var(--gold);

    text-transform: uppercase;

    letter-spacing: 3px;

    font-size: 14px;

    margin-bottom: 10px;

}

.section-title {

    font-size: 54px;

    line-height: 1.2;

    margin-bottom: 25px;

}

.section-description {

    color: var(--text);

    font-size: 16px;

}


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

::-webkit-scrollbar {

    width: 8px;

}

::-webkit-scrollbar-track {

    background: #111;

}

::-webkit-scrollbar-thumb {

    background: var(--gold);

    border-radius: 20px;

}


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

.loader-wrapper {

    position: fixed;

    inset: 0;

    background: #fcfcfc;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 999999;

}

.loader {

    width: 70px;

    height: 70px;

    border-radius: 50%;

    border: 3px solid rgba(255, 255, 255, .08);

    border-top: 3px solid var(--gold);

    animation: spin 1s linear infinite;

}

@keyframes spin {

    100% {

        transform: rotate(360deg);

    }

}


/*==============================
        COMMON BUTTON
==============================*/

.theme-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    background: var(--gold);

    color: #000;

    padding: 16px 36px;

    border-radius: 50px;

    font-weight: 600;

    transition: var(--transition);

}

.theme-btn:hover {

    background: #fff;

    color: #000;

    transform: translateY(-5px);

}


/*==============================
        GLASS CARD
==============================*/

.glass-card {

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

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

    backdrop-filter: blur(18px);

    border-radius: var(--radius);

}


/*==============================
        SECTION SPACING
==============================*/

.py-120 {

    padding: 120px 0;

}


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

::selection {

    background: var(--gold);

    color: #000;

}


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

.custom-navbar {

    padding: 18px 0;

    transition: var(--transition);

    background: transparent;

}


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

.custom-navbar.scrolled {

    background: rgba(252, 252, 252, 0.95);

    backdrop-filter: blur(18px);

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

    padding: 8px 0;

}


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

.navbar-brand img {

    height: 80px;

    border-radius: 100px;

    transition: .35s;

}

.custom-navbar.scrolled .navbar-brand img {

    height: 68px;

}


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

.navbar-nav {

    gap: 18px;

}

.nav-link {

    color: #f9f6f6;

    font-size: 15px;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 1px;

    position: relative;

    transition: var(--transition);

}


/*======================================================*
            SCROLLED → BLACK TEXT
*======================================================*/

.custom-navbar.scrolled .nav-link {

    color: #000;

}


/*======================================================*
                    HOVER
*======================================================*/

.nav-link:hover {

    color: var(--gold);

}

.custom-navbar.scrolled .nav-link:hover {

    color: var(--gold);

}


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

.nav-link.active {

    color: var(--gold);

}

.custom-navbar.scrolled .nav-link.active {

    color: var(--gold);

}


/*======================================================*
                GOLD UNDERLINE
*======================================================*/

.nav-link::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -6px;

    width: 0;

    height: 2px;

    background: var(--gold);

    transition: .35s;

}

.nav-link:hover::after,

.nav-link.active::after {

    width: 100%;

}


/*======================================================*
                    BOOK BUTTON
*======================================================*/

.book-btn {

    background: var(--gold);

    color: #000;

    padding: 14px 34px;

    border-radius: 50px;

    font-weight: 600;

    transition: var(--transition);

}

.book-btn:hover {

    background: #fff;

    color: #000;

    transform: translateY(-4px);

}


/*======================================================*
            SCROLLED BOOK BUTTON
*======================================================*/

.custom-navbar.scrolled .book-btn {

    background: var(--gold);

    color: #000;

}

.custom-navbar.scrolled .book-btn:hover {

    background: #000;

    color: #fff;

}

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

.hero-section {

    position: relative;

    height: 100vh;

    overflow: hidden;

    display: flex;

    align-items: center;

}

.hero-bg {

    position: absolute;

    inset: 0;

}

.hero-bg img,
.hero-bg video {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.08);

}

.hero-overlay {

    position: absolute;

    inset: 0;

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

}

.hero-content {

    position: relative;

    z-index: 10;

    max-width: 700px;

}

.hero-subtitle {

    color: var(--gold);

    letter-spacing: 4px;

    text-transform: uppercase;

    font-size: 15px;

}

.hero-content h1 {

    font-size: 78px;

    line-height: 1.1;

    margin: 20px 0;

}

.hero-content h1 span {

    color: var(--gold);

}

.hero-content p {

    color: #ddd;

    font-size: 18px;

    max-width: 620px;

    margin-bottom: 40px;

}

.hero-buttons {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

}

.hero-outline-btn {

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

    color: var(--gold);

    padding: 16px 34px;

    border-radius: 50px;

    transition: .4s;

}

.hero-outline-btn:hover {

    background: var(--gold);

    color: #000;

}

.scroll-down {

    position: absolute;

    bottom: 30px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 20;

    color: #fff;

    text-align: center;

    animation: float 2s infinite;

}

.scroll-down span {

    display: block;

    font-size: 13px;

    letter-spacing: 2px;

    margin-bottom: 8px;

    text-transform: uppercase;

}

.scroll-down i {

    font-size: 24px;

    color: var(--gold);

}

@keyframes float {

    0%,
    100% {

        transform: translate(-50%, 0);

    }

    50% {

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

    }

}

.footer {

    background: #050505;

    padding: 90px 0 30px;

}

.footer h4 {

    font-size: 34px;

    margin-bottom: 25px;

}

.footer p,

.footer li {

    color: #bdbdbd;

    margin-bottom: 12px;

}

.footer ul {

    padding: 0;

    list-style: none;

}

.footer a {

    color: #bdbdbd;

    transition: .3s;

}

.footer a:hover {

    color: var(--gold);

    padding-left: 8px;

}

.footer-logo {

    height: 65px;

    width: auto;

}

.social-links {

    display: flex;

    gap: 15px;

    margin-top: 25px;

}

.social-links a {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

}

.social-links a:hover {

    background: var(--gold);

    color: #000;

}

.footer input {

    width: 100%;

    height: 55px;

    background: #111;

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

    padding: 15px;

    color: #fff;

    margin-bottom: 15px;

    border-radius: 12px;

}

.footer button {

    width: 100%;

    height: 55px;

    background: var(--gold);

    border: none;

    border-radius: 12px;

    font-weight: 600;

}

.copyright {

    text-align: center;

    color: #888;

    padding-top: 20px;

}

.whatsapp-btn {

    position: fixed;

    right: 30px;

    bottom: 30px;

    width: 65px;

    height: 65px;

    background: #25D366;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 32px;

    color: #fff;

    z-index: 999;

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

    animation: whatsappPulse 2s infinite;

}

@keyframes whatsappPulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.12);

    }

    100% {

        transform: scale(1);

    }

}

#scrollTop {

    position: fixed;

    right: 30px;

    bottom: 110px;

    width: 55px;

    height: 55px;

    border: none;

    border-radius: 50%;

    background: var(--gold);

    color: #000;

    display: none;

    z-index: 999;

    font-size: 22px;

    cursor: pointer;

}

.loader-wrapper {

    position: fixed;

    inset: 0;

    background: #ffffff;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 999999;

    transition: .6s;

}

.loader-logo img {

    height: 300px;
    border-radius: 1000px;
    animation: loaderZoom 1.8s infinite;

}

@keyframes loaderZoom {

    0% {

        transform: scale(.9);

        opacity: .5;

    }

    50% {

        transform: scale(1);

        opacity: 1;

    }

    100% {

        transform: scale(.9);

        opacity: .5;

    }

}

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

.about-section {

    background: #111;

    position: relative;

}

.about-images {

    position: relative;

    min-height: 620px;

}

.about-img-main {

    width: 82%;

    border-radius: 24px;

    overflow: hidden;

    box-shadow: var(--shadow);

}

.about-img-main img {

    height: 620px;

    object-fit: cover;

    transition: .5s;

}

.about-img-main:hover img {

    transform: scale(1.05);

}

.about-img-small {

    position: absolute;

    right: 0;

    bottom: 40px;

    width: 260px;

    border: 8px solid #111;

    border-radius: 22px;

    overflow: hidden;

    box-shadow: var(--shadow);

}

.about-img-small img {

    height: 300px;

    object-fit: cover;

}

.experience-badge {

    position: absolute;

    left: 40px;

    bottom: 20px;

    background: var(--gold);

    color: #000;

    padding: 18px 28px;

    border-radius: 18px;

    text-align: center;

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

}

.experience-badge h3 {

    margin: 0;

    font-size: 42px;

    color: #000;

    font-family: 'Cormorant Garamond', serif;

}

.experience-badge span {

    font-size: 14px;

    font-weight: 600;

}

.about-features {

    margin-top: 35px;

    display: grid;

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

    gap: 18px;

}

.feature-item {

    display: flex;

    align-items: center;

    gap: 12px;

    color: #ddd;

    font-size: 16px;

}

.feature-item i {

    color: var(--gold);

    font-size: 20px;

}

/*=============================
        FACILITIES
=============================*/

.experience-section {

    background: #ffffff;

}

.facility-card {

    background: #111;

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

    border-radius: 20px;

    padding: 45px 30px;

    text-align: center;

    transition: .4s;

    height: 100%;

}

.facility-card i {

    font-size: 50px;

    color: var(--gold);

    margin-bottom: 25px;

}

.facility-card h4 {

    margin-bottom: 18px;

}

.facility-card p {

    color: #bdbdbd;

}

.facility-card:hover {

    transform: translateY(-12px);

    border-color: var(--gold);

}

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

.rooms-section {
    background: #080808;
}

.room-card {

    position: relative;

    background: linear-gradient(135deg, #111, #181818);

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

    border-radius: 30px;

    overflow: hidden;

    margin-top: 60px;

    transition: .45s ease;

}

.room-card::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 30px;

    padding: 1px;

    background: linear-gradient(135deg,
            transparent,
            rgba(212, 175, 55, .7),
            transparent);

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    opacity: 0;

    transition: .45s;

}

.room-card:hover {

    transform: translateY(-10px);

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

}

.room-card:hover::before {

    opacity: 1;

}

.room-image {

    height: 520px;

    overflow: hidden;

}

.room-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .7s;

}

.room-card:hover .room-image img {

    transform: scale(1.08);

}

.room-content {

    padding: 55px;

}

.room-category {

    color: var(--gold);

    font-family: 'Cormorant Garamond', serif;

    font-size: 24px;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.room-title {

    font-size: 56px;

    margin: 12px 0;

    transition: .4s;

}

.room-card:hover .room-title {

    color: var(--gold);

}

.room-rating {

    color: var(--gold);

    margin-bottom: 25px;

}

.room-rating span {

    color: #aaa;

    margin-left: 12px;

}

.room-content p {

    color: #bdbdbd;

    margin-bottom: 35px;

    line-height: 1.9;

}

.room-features {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-bottom: 40px;

}

.room-features span {

    background: #1c1c1c;

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

    padding: 11px 18px;

    border-radius: 50px;

    transition: .35s;

}

.room-features span:hover {

    border-color: var(--gold);

    color: var(--gold);

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

}

.room-features i {

    color: var(--gold);

    margin-right: 8px;

}

.room-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 20px;

}

.room-price {

    color: var(--gold);

    font-size: 52px;

    margin: 0;

    text-shadow:
        0 0 10px rgba(212, 175, 55, .35);

}

.room-btn {

    position: relative;

    background: transparent;

    color: var(--gold);

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

    padding: 16px 36px;

    border-radius: 50px;

    transition: .4s;

    overflow: hidden;

}

.room-btn::before {

    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: var(--gold);

    transition: .45s;

    z-index: -1;

}

.room-btn:hover {

    color: #000;

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

}

.room-btn:hover::before {

    left: 0;

}

.room-btn i {

    margin-left: 10px;

    transition: .35s;

}

.room-btn:hover i {

    transform: translateX(6px);

}

/*=========================================
        WHY CHOOSE THE ARRIVALL
=========================================*/

.why-section {

    position: relative;

    background: #ffd68a;

    overflow: hidden;

}


/* Subtle background glow */

.why-section::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    top: -250px;

    left: -200px;

    background:

        radial-gradient(circle,
            rgba(212, 175, 55, .08),
            transparent 65%);

    pointer-events: none;

}

.why-section::after {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    right: -200px;

    bottom: -200px;

    background:

        radial-gradient(circle,
            rgba(212, 175, 55, .07),
            transparent 65%);

    pointer-events: none;

}


/*=========================================
        SECTION HEADING
=========================================*/

.why-section .section-subtitle {

    color: #b38a22;

    letter-spacing: 4px;

    font-size: 13px;

    font-weight: 600;

}

.why-section .section-title {

    color: #151515;

    font-family: 'Cormorant Garamond', serif;

    font-size: 68px;

    line-height: 1;

    margin: 15px 0 20px;

}

.why-section .section-description {

    color: #666;

    line-height: 1.9;

}


/*=========================================
        WHY CARD
=========================================*/

.why-card {

    position: relative;

    min-height: 365px;

    padding: 42px 30px;

    overflow: hidden;

    border-radius: 28px;

    background:

        linear-gradient(145deg,
            #ffffff,
            #faf9f5);

    border: 1px solid rgba(179, 138, 34, .18);

    box-shadow:

        0 12px 35px rgba(0, 0, 0, .055);

    transition:

        transform .5s ease,
        box-shadow .5s ease,
        border-color .5s ease;

}


/* Mouse Glow */

.why-card::before {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    left: var(--x, 50%);

    top: var(--y, 50%);

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

    background:

        radial-gradient(circle,
            rgba(212, 175, 55, .16),
            transparent 68%);

    opacity: 0;

    transition: opacity .4s;

    pointer-events: none;

}

.why-card:hover::before {

    opacity: 1;

}


/* Gold border */

.why-card::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 28px;

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

    opacity: 0;

    transition: .45s;

    pointer-events: none;

}

.why-card:hover::after {

    opacity: 1;

}


/*=========================================
        CARD HOVER
=========================================*/

.why-card:hover {

    transform: translateY(-10px);

    border-color: rgba(179, 138, 34, .4);

    box-shadow:

        0 0 18px rgba(212, 175, 55, .10),

        0 20px 55px rgba(0, 0, 0, .11);

}


/*=========================================
        NUMBER
=========================================*/

.why-number {

    position: absolute;

    top: 20px;

    right: 25px;

    font-family: 'Cormorant Garamond', serif;

    font-size: 24px;

    color: rgba(0, 0, 0, .13);

    transition: .4s;

}

.why-card:hover .why-number {

    color: #b38a22;

    text-shadow:

        0 0 12px rgba(212, 175, 55, .25);

}


/*=========================================
        ICON
=========================================*/

.why-icon {

    position: relative;

    width: 78px;

    height: 78px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    margin-bottom: 28px;

    background:

        linear-gradient(145deg,
            #ffffff,
            #f4eddd);

    border: 1px solid rgba(179, 138, 34, .3);

    transition: .45s;

}

.why-icon i {

    color: #b38a22;

    font-size: 30px;

    transition: .45s;

}


/* Icon Hover */

.why-card:hover .why-icon {

    background: #c49a2c;

    border-color: #c49a2c;

    transform:

        rotate(-8deg) scale(1.08);

    box-shadow:

        0 0 18px rgba(212, 175, 55, .4),

        0 0 35px rgba(212, 175, 55, .16);

}

.why-card:hover .why-icon i {

    color: #ffffff;

    transform: scale(1.12);

}


/*=========================================
        CARD TITLE
=========================================*/

.why-card h3 {

    position: relative;

    z-index: 2;

    font-family: 'Cormorant Garamond', serif;

    font-size: 32px;

    line-height: 1.1;

    color: #171717;

    margin-bottom: 16px;

    transition: .4s;

}

.why-card:hover h3 {

    color: #b38a22;

}


/*=========================================
        CARD TEXT
=========================================*/

.why-card p {

    position: relative;

    z-index: 2;

    color: #666;

    line-height: 1.85;

    margin: 0;

}


/*=========================================
        BOTTOM MESSAGE
=========================================*/

.why-bottom-text {

    position: relative;

    max-width: 900px;

    margin: 70px auto 0;

    padding: 30px 35px;

    text-align: center;

    border-top: 1px solid rgba(179, 138, 34, .22);

    border-bottom: 1px solid rgba(179, 138, 34, .22);

}

.why-bottom-text p {

    margin: 0;

    color: #555;

    line-height: 1.9;

    font-size: 16px;

}

.why-bottom-text strong {

    color: #a57b18;

    font-weight: 600;

}


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

@media (max-width: 991px) {

    .why-section .section-title {

        font-size: 55px;

    }

}

@media (max-width: 576px) {

    .why-section .section-title {

        font-size: 45px;

    }

    .why-card {

        min-height: auto;

        padding: 35px 28px;

    }

    .why-bottom-text {

        padding: 25px 15px;

    }

}

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

.gallery-section {

    position: relative;

    background: #000;

    overflow: hidden;

}


/*=========================================
        HEADING
=========================================*/

.gallery-heading {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 50px;

    margin-bottom: 55px;

}

.gallery-label {

    display: inline-block;

    color: #b18a2b;

    font-size: 13px;

    letter-spacing: 4px;

    font-weight: 600;

    margin-bottom: 15px;

}

.gallery-title {

    font-family: 'Cormorant Garamond', serif;

    font-size: 68px;

    line-height: .95;

    color: #fdfdfd;

    margin: 0;

}

.gallery-title span {

    color: #b18a2b;

    font-style: italic;

}

.gallery-intro {

    max-width: 400px;

    color: #fefcfc;

    line-height: 1.9;

    margin: 0;

}


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

.lg-backdrop {

    background: rgba(0, 0, 0, .96) !important;

}

.lg-outer {

    background: transparent !important;

}

.lg-content {

    height: 100vh !important;

}

.lg-current {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

}

.lg-image {

    max-width: 92vw !important;

    max-height: 88vh !important;

    width: auto !important;

    height: auto !important;

    object-fit: contain !important;

    border-radius: 8px;

    box-shadow:
        0 20px 80px rgba(0, 0, 0, .65);

}

.lg-toolbar {

    background: transparent !important;

}

.lg-toolbar .lg-icon {

    color: #fff !important;

}

.lg-actions .lg-next,
.lg-actions .lg-prev {

    background: rgba(255, 255, 255, .10) !important;

    border-radius: 50% !important;

    color: #fff !important;

    backdrop-filter: blur(10px);

}

.lg-actions .lg-next:hover,
.lg-actions .lg-prev:hover {

    background: #d4af37 !important;

    color: #000 !important;

}

/*=========================================
        FILTER
=========================================*/

.gallery-filter {

    display: flex;

    justify-content: flex-start;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

    margin-bottom: 40px;

}

.gallery-filter button {

    position: relative;

    padding: 11px 23px;

    border: 1px solid rgba(0, 0, 0, .12);

    border-radius: 50px;

    background: #fff;

    color: #555;

    font-size: 14px;

    cursor: pointer;

    transition: .35s;

}

.gallery-filter button:hover {

    color: #111;

    border-color: #b18a2b;

}

.gallery-filter button.active {

    background: #b18a2b;

    border-color: #b18a2b;

    color: #fff;

    box-shadow:

        0 8px 25px rgba(177, 138, 43, .22);

}


/*=========================================
        CREATIVE GRID
=========================================*/

.gallery-grid {

    display: grid;

    grid-template-columns:

        1.35fr .85fr .85fr;

    grid-template-rows:

        290px 290px 260px;

    gap: 18px;

}


/*=========================================
        ITEMS
=========================================*/

.gallery-item {

    position: relative;

    overflow: hidden;

    border-radius: 24px;

    cursor: pointer;

    background: #eee;

    border: 1px solid rgba(0, 0, 0, .08);

    transition:

        transform .5s ease,

        box-shadow .5s ease;

}

.gallery-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:

        transform .8s cubic-bezier(.2, .8, .2, 1);

}


/*=========================================
        GRID POSITIONS
=========================================*/

.gallery-feature {

    grid-column: 1;

    grid-row: 1 / 3;

}

.gallery-small:nth-child(2) {

    grid-column: 2;

    grid-row: 1;

}

.gallery-small:nth-child(3) {

    grid-column: 3;

    grid-row: 1;

}

.gallery-wide {

    grid-column: 2 / 4;

    grid-row: 2;

}

.gallery-small:nth-child(5) {

    grid-column: 1;

    grid-row: 3;

}

.gallery-small:nth-child(6) {

    grid-column: 2 / 4;

    grid-row: 3;

}


/*=========================================
        OVERLAY
=========================================*/

.gallery-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    padding: 25px;

    background:

        linear-gradient(to top,

            rgba(0, 0, 0, .78),

            rgba(0, 0, 0, .08) 65%,

            transparent);

    opacity: 0;

    transition: .45s;

}


/* Hover */

.gallery-item:hover {

    transform: translateY(-6px);

    box-shadow:

        0 20px 45px rgba(0, 0, 0, .16);

}

.gallery-item:hover img {

    transform: scale(1.08);

}

.gallery-item:hover .gallery-overlay {

    opacity: 1;

}


/*=========================================
        TEXT
=========================================*/

.gallery-overlay span {

    display: block;

    color: #d7b85b;

    font-size: 11px;

    letter-spacing: 3px;

    margin-bottom: 6px;

}

.gallery-overlay h3 {

    margin: 0;

    color: #fff;

    font-family: 'Cormorant Garamond', serif;

    font-size: 30px;

    line-height: 1;

}


/*=========================================
        ARROW BUTTON
=========================================*/

.gallery-plus {

    width: 52px;

    height: 52px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

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

    backdrop-filter: blur(10px);

    color: #fff;

    transition: .4s;

}

.gallery-plus i {

    font-size: 19px;

}

.gallery-item:hover .gallery-plus {

    background: #d4af37;

    border-color: #d4af37;

    color: #000;

    transform: rotate(45deg);

}


/*=========================================
        FEATURED ITEM
=========================================*/

.gallery-feature .gallery-overlay h3 {

    font-size: 42px;

}

.gallery-feature .gallery-overlay {

    padding: 35px;

}


/*=========================================
        FILTER ANIMATION
=========================================*/

.gallery-item.gallery-hidden {

    display: none;

}


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

@media (max-width: 991px) {

    .gallery-heading {

        align-items: flex-start;

        flex-direction: column;

    }

    .gallery-title {

        font-size: 55px;

    }

    .gallery-grid {

        grid-template-columns: 1fr 1fr;

        grid-template-rows:

            350px 240px 240px 280px;

    }

    .gallery-feature {

        grid-column: 1 / 3;

        grid-row: 1;

    }

    .gallery-small:nth-child(2) {

        grid-column: 1;

        grid-row: 2;

    }

    .gallery-small:nth-child(3) {

        grid-column: 2;

        grid-row: 2;

    }

    .gallery-wide {

        grid-column: 1 / 3;

        grid-row: 3;

    }

    .gallery-small:nth-child(5) {

        grid-column: 1;

        grid-row: 4;

    }

    .gallery-small:nth-child(6) {

        grid-column: 2;

        grid-row: 4;

    }

}


@media (max-width: 576px) {

    .gallery-title {

        font-size: 45px;

    }

    .gallery-intro {

        font-size: 14px;

    }

    .gallery-grid {

        display: flex;

        flex-direction: column;

        gap: 15px;

    }

    .gallery-item {

        height: 280px;

    }

    .gallery-feature {

        height: 380px;

    }

    .gallery-overlay {

        opacity: 1;

    }

    .gallery-overlay h3 {

        font-size: 25px;

    }

    .gallery-feature .gallery-overlay h3 {

        font-size: 32px;

    }

}

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

.testimonial-section {

    background: #111;

}

.testimonial-card {

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

    backdrop-filter: blur(18px);

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

    padding: 45px;

    border-radius: 25px;

    transition: .4s;

}

.testimonial-card:hover {

    transform: translateY(-8px);

    border-color: var(--gold);

}

.quote-icon {

    font-size: 55px;

    color: var(--gold);

    margin-bottom: 20px;

}

.stars {

    color: var(--gold);

    font-size: 20px;

    margin-bottom: 20px;

}

.testimonial-card p {

    color: #cfcfcf;

    font-size: 17px;

    line-height: 1.8;

}

.guest {

    display: flex;

    align-items: center;

    margin-top: 35px;

    gap: 18px;

}

.guest img {

    width: 70px;

    height: 70px;

    border-radius: 50%;

    object-fit: cover;

}

.guest h4 {

    margin: 0;

    font-size: 28px;

}

.guest span {

    color: #aaa;

}

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

.booking-banner {

    position: relative;

    padding: 170px 0;

    background: url('../images/backgrounds/booking-banner.jpg') center center/cover no-repeat;

    background-attachment: fixed;

    overflow: hidden;

}

.booking-overlay {

    position: absolute;

    inset: 0;

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

}

.booking-content {

    position: relative;

    z-index: 5;

    text-align: center;

    max-width: 900px;

    margin: auto;

}

.booking-content h2 {

    font-size: 70px;

    margin: 20px 0;

}

.booking-content p {

    max-width: 700px;

    margin: auto;

    color: #ddd;

    font-size: 18px;

    line-height: 1.8;

    margin-bottom: 45px;

}

.booking-buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

}

.outline-btn {

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

    color: #fff;

    padding: 16px 38px;

    border-radius: 50px;

    transition: .4s;

}

.outline-btn:hover {

    background: var(--gold);

    color: #000;

}

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

.contact-section {

    background: #111;

}

.contact-box {

    display: flex;

    align-items: center;

    gap: 25px;

    margin-bottom: 30px;

    padding: 25px;

    border-radius: 20px;

    background: #181818;

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

    transition: .4s;

}

.contact-box:hover {

    border-color: var(--gold);

    transform: translateX(8px);

}

.contact-icon {

    width: 70px;

    height: 70px;

    border-radius: 50%;

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

    display: flex;

    align-items: center;

    justify-content: center;

}

.contact-icon i {

    font-size: 30px;

    color: var(--gold);

}

.contact-box h4 {

    font-size: 30px;

    margin-bottom: 5px;

}

.contact-box p {

    margin: 0;

    color: #bbb;

}

.contact-form {

    background: #181818;

    padding: 45px;

    border-radius: 25px;

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

}

.contact-form .form-control {

    background: #111;

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

    height: 58px;

    color: #fff;

    border-radius: 15px;

}

.contact-form textarea {

    height: auto !important;

    padding-top: 15px;

    resize: none;

}

.contact-form .form-control:focus {

    border-color: var(--gold);

    box-shadow: none;

    background: #111;

    color: #fff;

}

.contact-form ::placeholder {

    color: #999;

}


/*=========================================
            PAGE BANNER
=========================================*/

.page-banner {

    position: relative;

    height: 70vh;

    display: flex;

    align-items: center;

    overflow: hidden;

}

.page-banner img {

    position: absolute;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.banner-overlay {

    position: absolute;

    inset: 0;

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

}

.banner-content {

    position: relative;

    z-index: 5;

    max-width: 700px;

}

.banner-content h1 {

    font-size: 75px;

    margin: 20px 0;

}

.banner-content p {

    max-width: 600px;

    color: #ddd;

    font-size: 18px;

}

.breadcrumb-box {

    margin-top: 30px;

    display: flex;

    gap: 15px;

    font-size: 16px;

}

.breadcrumb-box a {

    color: var(--gold);

}

.room-filter-section {

    padding: 60px 0;

    background: #111;

}

.room-filter {

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

}

.room-filter button {

    padding: 15px 35px;

    background: #181818;

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

    color: #fff;

    border-radius: 50px;

    transition: .4s;

}

.room-filter button.active,

.room-filter button:hover {

    background: var(--gold);

    color: #000;

}

/*=========================================
        ROOM CARD - BASE
=========================================*/

.listing-card {

    position: relative;

    display: grid;

    grid-template-columns: 430px 1fr;

    align-items: center;

    background: linear-gradient(135deg,
            #0b0b0b 0%,
            #111111 40%,
            #171717 100%);

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

    border-radius: 30px;

    overflow: hidden;

    margin-bottom: 55px;

    transition: .45s ease;

    isolation: isolate;

}

/* Gold Border */

.listing-card::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 30px;

    padding: 1px;

    background: linear-gradient(135deg,
            rgba(255, 255, 255, .05),
            rgba(212, 175, 55, .55),
            rgba(255, 255, 255, .05));

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    opacity: 0;

    transition: .5s;

}

/* White Ambient Glow */

.listing-card::after {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    border-radius: 50%;

    background: radial-gradient(rgba(255, 255, 255, .08),
            transparent 70%);

    top: -170px;

    right: -170px;

    transition: .5s;

    z-index: -1;

}

/* Hover */

.listing-card:hover {

    transform: translateY(-10px);

    border-color: rgba(212, 175, 55, .25);

    box-shadow:

        0 25px 70px rgba(0, 0, 0, .65),

        0 0 20px rgba(212, 175, 55, .12),

        inset 0 0 0 1px rgba(255, 255, 255, .04);

}

.listing-card:hover::before {

    opacity: 1;

}

.listing-card:hover::after {

    transform: scale(1.25);

}

/*=========================================
        ROOM IMAGE
=========================================*/

.listing-image {

    position: relative;

    height: 360px;

    overflow: hidden;

    background: #000;

}

/* Curved Shape */

.listing-image::before {

    content: "";

    position: absolute;

    top: 0;

    right: -70px;

    width: 150px;

    height: 100%;

    background: #111;

    border-radius: 100px 0 0 100px;

    z-index: 3;

}

/* Dark Luxury Overlay */

.listing-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(to top,

            rgba(0, 0, 0, .65),

            rgba(0, 0, 0, .10),

            transparent);

    z-index: 1;

}

.listing-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 1s cubic-bezier(.2, .8, .2, 1);

}

/* Hover */

.listing-card:hover .listing-image img {

    transform: scale(1.12);

}

/*=========================================
        IMAGE OVERLAY
=========================================*/

.room-badge {

    position: absolute;

    top: 25px;

    left: 25px;

    z-index: 5;

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

    backdrop-filter: blur(18px);

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

    color: #fff;

    padding: 10px 18px;

    border-radius: 50px;

    font-size: 13px;

    letter-spacing: 1px;

}

.room-overlay {

    position: absolute;

    left: 30px;

    bottom: 30px;

    z-index: 5;

    transition: .45s;

}

.room-overlay h4 {

    color: #fff;

    font-size: 34px;

    margin-bottom: 5px;

}

.room-overlay span {

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

    letter-spacing: 2px;

    text-transform: uppercase;

    font-size: 13px;

}

.listing-card:hover .room-overlay {

    transform: translateY(-8px);

}

/*=========================================
        ROOM CONTENT
=========================================*/

.listing-content {

    position: relative;

    padding: 50px 60px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

/* Small Category */

.listing-category {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    width: max-content;

    color: var(--gold);

    font-family: 'Cormorant Garamond', serif;

    font-size: 22px;

    letter-spacing: 3px;

    text-transform: uppercase;

    margin-bottom: 12px;

}

.listing-category::before {

    content: "";

    width: 50px;

    height: 2px;

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

}

/* Title */

.listing-title {

    font-family: 'Cormorant Garamond', serif;

    font-size: 58px;

    font-weight: 700;

    color: #fff;

    line-height: 1.05;

    margin-bottom: 18px;

    transition: .4s;

}

.listing-card:hover .listing-title {

    color: #fff;

    text-shadow:

        0 0 8px rgba(255, 255, 255, .15),

        0 0 18px rgba(212, 175, 55, .18);

}

/* Description */

.listing-desc {

    max-width: 620px;

    color: #b8b8b8;

    font-size: 16px;

    line-height: 1.9;

    margin-bottom: 30px;

}

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

.listing-features {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 35px;

}

.listing-features span {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 12px 18px;

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

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

    border-radius: 50px;

    color: #ddd;

    transition: .35s;

}

.listing-features span:hover {

    transform: translateY(-3px);

    border-color: rgba(212, 175, 55, .45);

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

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

}

.listing-features i {

    color: var(--gold);

    font-size: 16px;

}

/*=========================================
        PRICE & BUTTON
=========================================*/

.listing-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: 25px;

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

}

.listing-bottom small {

    color: #8e8e8e;

    text-transform: uppercase;

    letter-spacing: 2px;

}

.listing-price {

    font-family: 'Cormorant Garamond', serif;

    font-size: 54px;

    color: #fff;

    margin-top: 6px;

}

.listing-price span {

    color: var(--gold);

}

/* Button */

.listing-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 16px 36px;

    border-radius: 60px;

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

    color: #000;

    font-weight: 600;

    overflow: hidden;

    transition: .4s;

}

.listing-btn::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 70%;

    height: 100%;

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

    transform: skewX(-25deg);

    transition: .6s;

}

.listing-btn:hover::before {

    left: 150%;

}

.listing-btn:hover {

    transform: translateY(-3px);

    box-shadow:

        0 0 18px rgba(212, 175, 55, .25),

        0 15px 35px rgba(212, 175, 55, .15);

}

/*=========================================
        PREMIUM FINISH
=========================================*/

/* Huge Background Number */

.room-number {

    position: absolute;

    top: 15px;

    right: 45px;

    font-size: 150px;

    font-family: 'Cormorant Garamond', serif;

    font-weight: 700;

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

    line-height: 1;

    pointer-events: none;

    user-select: none;

    transition: .45s;

}

/* Hover */

.listing-card:hover .room-number {

    color: rgba(212, 175, 55, .08);

    transform: scale(1.05);

}

/* Light Sweep */

.listing-card {

    overflow: hidden;

}

.listing-card::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 30px;

    pointer-events: none;

    opacity: 0;

    transition: .35s;

    background:
        radial-gradient(400px circle at var(--x) var(--y),

            rgba(255, 255, 255, .08),

            transparent 45%);

}

.listing-card:hover::after {

    opacity: 1;

}

.listing-card::before {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 3px;

    background: linear-gradient(90deg,

            var(--gold),

            #fff,

            var(--gold));

    transition: .55s;

}

.listing-card:hover::before {

    width: 100%;

}

.listing-content {

    backdrop-filter: blur(10px);

}

/*=========================================
        ROOM DETAILS HERO
=========================================*/

.rd-hero {

    position: relative;

    height: 100vh;

    display: flex;

    align-items: flex-end;

    overflow: hidden;

    background: #000;

}

.rd-bg {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform: scale(1.08);

    animation: rdZoom 18s ease-in-out infinite alternate;

}

@keyframes rdZoom {

    from {

        transform: scale(1.08);

    }

    to {

        transform: scale(1.18);

    }

}

.rd-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, .20) 0%,
            rgba(0, 0, 0, .45) 35%,
            rgba(0, 0, 0, .92) 100%);

}

.rd-overlay::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    right: -200px;

    top: -250px;

    border-radius: 50%;

    background: radial-gradient(rgba(255, 255, 255, .08),
            transparent 70%);

}

.rd-content {

    position: relative;

    z-index: 5;

    /* max-width: 760px; */

    padding-bottom: 90px;
    margin-bottom: -150px;
}

.rd-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 24px;

    border-radius: 50px;

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

    backdrop-filter: blur(18px);

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

    color: var(--gold);

    letter-spacing: 2px;

    text-transform: uppercase;

    font-size: 13px;

}

.rd-title {

    font-family: 'Cormorant Garamond', serif;

    font-size: 60px;

    line-height: .95;

    color: #fff;

    margin: 25px 0;

    text-shadow:

        0 0 15px rgba(255, 255, 255, .08);

}

.rd-desc {

    max-width: 650px;

    color: #d7d7d7;

    font-size: 18px;

    line-height: 2;

    margin-bottom: 40px;

}

.rd-meta {

    display: flex;

    gap: 18px;

    flex-wrap: wrap;

    margin-bottom: 40px;

}

.rd-meta span {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px 24px;

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

    backdrop-filter: blur(14px);

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

    border-radius: 50px;

    color: #fff;

    transition: .35s;

}

.rd-meta span:hover {

    transform: translateY(-3px);

    border-color: rgba(212, 175, 55, .45);

    box-shadow:

        0 0 18px rgba(212, 175, 55, .15);

}

.rd-meta i {

    color: var(--gold);

}

.rd-price-box {

    display: flex;

    align-items: flex-end;

    gap: 18px;

}

.rd-price {

    font-family: 'Cormorant Garamond', serif;

    font-size: 72px;

    color: #fff;

    margin: 0;

    line-height: 1;

}

.rd-price-box span {

    color: var(--gold);

    font-size: 15px;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 12px;

}

/* Premium White Light */

.rd-hero::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    left: -200px;

    bottom: -220px;

    border-radius: 50%;

    background: radial-gradient(rgba(255, 255, 255, .06),

            transparent 70%);

    z-index: 1;

}

/* Bottom Gold Line */

.rd-hero::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 2px;

    background: linear-gradient(90deg,

            transparent,

            var(--gold),

            #fff,

            var(--gold),

            transparent);

}

/*=============================
        Responsive
==============================*/

@media(max-width:991px) {

    .rd-hero {

        height: 85vh;

    }

    .rd-title {

        font-size: 58px;

    }

    .rd-desc {

        font-size: 16px;

        line-height: 1.8;

    }

    .rd-price {

        font-size: 52px;

    }

    .rd-content {

        padding-bottom: 60px;

    }

}

@media(max-width:576px) {

    .rd-title {

        font-size: 42px;

    }

    .rd-meta {

        gap: 10px;

    }

    .rd-meta span {

        padding: 10px 18px;

        font-size: 14px;

    }

    .rd-price {

        font-size: 42px;

    }

    .rd-content {

        padding-bottom: 40px;

    }

}

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

.rd-gallery-section {

    background: #090909;

}

.rd-gallery-main {

    position: relative;

    height: 620px;

    overflow: hidden;

    border-radius: 28px;

    background: #111;

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

}

.rd-gallery-main img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .7s;

}

.rd-gallery-main:hover img {

    transform: scale(1.05);

}

/* Right Grid */

.rd-gallery-grid {

    display: grid;

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

    gap: 18px;

}

.rd-thumb,

.rd-thumb-more {

    height: 300px;

    border-radius: 22px;

    overflow: hidden;

    cursor: pointer;

    position: relative;

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

    transition: .4s;

}

.rd-thumb img,

.rd-thumb-more img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .6s;

}

.rd-thumb:hover,

.rd-thumb.active,

.rd-thumb-more:hover {

    border-color: var(--gold);

    box-shadow:

        0 0 18px rgba(212, 175, 55, .18);

}

.rd-thumb:hover img,

.rd-thumb-more:hover img {

    transform: scale(1.08);

}

.rd-thumb-more::after {

    content: "";

    position: absolute;

    inset: 0;

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

}

.rd-thumb-more span {

    position: absolute;

    top: 50%;

    left: 50%;

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

    color: #fff;

    z-index: 5;

    font-size: 26px;

    font-family: 'Cormorant Garamond', serif;

    letter-spacing: 2px;

}

/* Floating Shine */

.rd-gallery-main::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 60%;

    height: 100%;

    background: linear-gradient(90deg,

            transparent,

            rgba(255, 255, 255, .15),

            transparent);

    transform: skewX(-25deg);

    transition: 1s;

    z-index: 2;

}

.rd-gallery-main:hover::before {

    left: 170%;

}

/*=========================================
        ROOM INFO
=========================================*/

.rd-info-title {

    font-family: 'Cormorant Garamond', serif;

    font-size: 60px;

    margin: 20px 0;

}

.rd-info p {

    color: #bdbdbd;

    line-height: 2;

    margin-bottom: 25px;

}

.rd-info-tag {

    color: var(--gold);

    text-transform: uppercase;

    letter-spacing: 3px;

}

/*=========================================
        BOOK CARD
=========================================*/

/*=========================================
        ROOM BOOKING CARD
=========================================*/

.rd-book-card {

    position: relative;

    padding: 32px;

    border-radius: 28px;

    background:

        linear-gradient(145deg,
            #111,
            #181818);

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

    box-shadow:

        0 20px 60px rgba(0, 0, 0, .35),

        0 0 30px rgba(212, 175, 55, .04);

    overflow: hidden;

}


/* Top Glow */

.rd-book-card::before {

    content: "";

    position: absolute;

    width: 240px;

    height: 240px;

    top: -120px;

    right: -100px;

    background:

        radial-gradient(circle,
            rgba(212, 175, 55, .18),
            transparent 68%);

    pointer-events: none;

}


/* Bottom Glow */

.rd-book-card::after {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    bottom: -130px;

    left: -100px;

    background:

        radial-gradient(circle,
            rgba(255, 255, 255, .07),
            transparent 68%);

    pointer-events: none;

}


/*=========================================
        HEADING
=========================================*/

.rd-book-heading {

    position: relative;

    z-index: 2;

    margin-bottom: 25px;

}

.rd-book-label {

    display: block;

    color: var(--gold);

    font-size: 11px;

    letter-spacing: 3px;

    font-weight: 600;

    margin-bottom: 8px;

}

.rd-book-heading h3 {

    color: #fff;

    font-family: 'Cormorant Garamond', serif;

    font-size: 34px;

    margin: 0 0 8px;

}

.rd-book-heading p {

    color: #999;

    font-size: 13px;

    line-height: 1.7;

    margin: 0;

}


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

.rd-form-group {

    position: relative;

    z-index: 2;

    margin-bottom: 16px;

}

.rd-form-group label {

    display: block;

    color: #d5d5d5;

    font-size: 12px;

    margin-bottom: 7px;

}

.rd-form-group label small {

    color: #777;

}


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

    width: 100%;

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

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

    border-radius: 12px;

    color: #fff;

    padding: 12px 14px;

    font-size: 13px;

    transition: .35s;

}


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

    height: 46px;

}


.rd-form-group textarea {

    resize: vertical;

    min-height: 75px;

}


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

    color: #666;

}


/* Focus */

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

    outline: none;

    border-color: var(--gold);

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

    box-shadow:

        0 0 0 3px rgba(212, 175, 55, .06),

        0 0 18px rgba(212, 175, 55, .08);

}


/* Select */

.rd-form-group select option {

    background: #111;

    color: #fff;

}


/* Date icon */

.rd-form-group input[type="date"]::-webkit-calendar-picker-indicator {

    filter: invert(1);

    opacity: .7;

}


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

.rd-book-actions {

    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-top: 8px;

}


.rd-whatsapp-btn,
.rd-email-btn {

    height: 50px;

    border-radius: 50px;

    border: 1px solid;

    font-size: 13px;

    font-weight: 600;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    cursor: pointer;

    transition: .4s;

}


/* WhatsApp */

.rd-whatsapp-btn {

    background: rgba(37, 211, 102, .08);

    border-color: rgba(37, 211, 102, .45);

    color: #4ee889;

}


.rd-whatsapp-btn:hover {

    background: #25d366;

    border-color: #25d366;

    color: #000;

    box-shadow:

        0 0 15px rgba(37, 211, 102, .35),

        0 0 35px rgba(37, 211, 102, .15);

    transform: translateY(-3px);

}


/* Email */

.rd-email-btn {

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

    border-color: rgba(212, 175, 55, .45);

    color: var(--gold);

}


.rd-email-btn:hover {

    background: var(--gold);

    border-color: var(--gold);

    color: #000;

    box-shadow:

        0 0 15px rgba(212, 175, 55, .35),

        0 0 35px rgba(212, 175, 55, .15);

    transform: translateY(-3px);

}


/*=========================================
        SECURE NOTE
=========================================*/

.rd-secure-note {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    color: #777;

    font-size: 11px;

    text-align: center;

    margin-top: 17px;

}


.rd-secure-note i {

    color: #a9a9a9;

    font-size: 14px;

}


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

@media (max-width: 576px) {

    .rd-book-card {

        padding: 25px 20px;

    }

    .rd-book-heading h3 {

        font-size: 30px;

    }

    .rd-book-actions {

        grid-template-columns: 1fr;

    }

}

/*=========================================
        BOOKING SUCCESS POPUP
=========================================*/

.rd-success-popup {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

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

    backdrop-filter: blur(12px);

    opacity: 0;

    visibility: hidden;

    transition: .4s;

}

.rd-success-popup.active {

    opacity: 1;

    visibility: visible;

}


/* Box */

.rd-success-box {

    position: relative;

    width: 100%;

    max-width: 430px;

    padding: 45px 35px;

    text-align: center;

    border-radius: 30px;

    background:

        linear-gradient(145deg,
            #171717,
            #0d0d0d);

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

    box-shadow:

        0 0 25px rgba(212, 175, 55, .12),

        0 0 70px rgba(212, 175, 55, .08),

        0 30px 100px rgba(0, 0, 0, .65);

    transform: translateY(20px) scale(.95);

    transition: .45s;

}

.rd-success-popup.active .rd-success-box {

    transform: translateY(0) scale(1);

}


/* Close */

.rd-success-close {

    position: absolute;

    top: 18px;

    right: 18px;

    width: 35px;

    height: 35px;

    border-radius: 50%;

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

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

    color: #aaa;

    cursor: pointer;

    transition: .3s;

}

.rd-success-close:hover {

    background: var(--gold);

    color: #000;

}


/* Success Icon */

.rd-success-icon {

    width: 85px;

    height: 85px;

    margin: 0 auto 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

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

    color: var(--gold);

    font-size: 38px;

    box-shadow:

        0 0 20px rgba(212, 175, 55, .20),

        0 0 45px rgba(212, 175, 55, .10);

    animation: rdSuccessPulse 2s infinite;

}


@keyframes rdSuccessPulse {

    0% {

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

    }

    50% {

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

    }

    100% {

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

    }

}


/* Text */

.rd-success-label {

    color: var(--gold);

    font-size: 11px;

    letter-spacing: 3px;

}

.rd-success-box h3 {

    color: #fff;

    font-family: 'Cormorant Garamond', serif;

    font-size: 38px;

    margin: 10px 0;

}

.rd-success-box p {

    color: #aaa;

    line-height: 1.8;

    margin-bottom: 25px;

}


/* Button */

.rd-success-ok {

    padding: 12px 32px;

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

    border-radius: 50px;

    background: var(--gold);

    color: #000;

    font-weight: 600;

    cursor: pointer;

    transition: .35s;

}

.rd-success-ok:hover {

    background: #fff;

    border-color: #fff;

}

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

.bk-action-buttons {

    display: grid;

    grid-template-columns: 1.4fr 1fr;

    gap: 12px;

}


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

.bk-submit-btn {

    height: 60px;

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

    border-radius: 50px;

    background: var(--gold);

    color: #000;

    font-weight: 600;

    font-size: 14px;

    cursor: pointer;

    transition: .4s;

}

.bk-submit-btn i {

    margin-right: 8px;

}


.bk-submit-btn:hover {

    background: #fff;

    border-color: #fff;

    transform: translateY(-3px);

    box-shadow:

        0 0 20px rgba(212, 175, 55, .25);

}


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

.bk-whatsapp-btn {

    height: 60px;

    border-radius: 50px;

    background: rgba(37, 211, 102, .08);

    border: 1px solid rgba(37, 211, 102, .45);

    color: #35dc73;

    font-weight: 600;

    cursor: pointer;

    transition: .4s;

}

.bk-whatsapp-btn i {

    margin-right: 8px;

}

.bk-whatsapp-btn:hover {

    background: #25d366;

    color: #000;

    border-color: #25d366;

    transform: translateY(-3px);

    box-shadow:

        0 0 20px rgba(37, 211, 102, .3);

}


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

.bk-form-note {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    color: #888;

    font-size: 12px;

    margin-top: 16px;

}

.bk-form-note i {

    color: var(--gold);

}


/*=========================================
        SUMMARY LABEL
=========================================*/

.bk-summary-label {

    color: var(--gold);

    letter-spacing: 3px;

    font-size: 11px;

}


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

.bk-summary {

    position: sticky;

    top: 120px;

    padding: 40px;

    border-radius: 30px;

    background:

        linear-gradient(145deg,
            #111,
            #181818);

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

    box-shadow:

        0 20px 60px rgba(0, 0, 0, .35);

    overflow: hidden;

}


.bk-summary::before {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    top: -120px;

    right: -100px;

    background:

        radial-gradient(circle,
            rgba(212, 175, 55, .16),
            transparent 70%);

}


.bk-summary h3 {

    position: relative;

    color: #fff;

    font-family: 'Cormorant Garamond', serif;

    font-size: 42px;

    margin: 10px 0 35px;

}


/*=========================================
        SUMMARY ITEMS
=========================================*/

.bk-summary-item {

    position: relative;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 20px;

    margin-bottom: 20px;

    color: #999;

    font-size: 13px;

}

.bk-summary-item strong {

    color: #fff;

    text-align: right;

    max-width: 180px;

}


.bk-summary hr {

    border-color: rgba(255, 255, 255, .08);

    margin: 25px 0;

}


/*=========================================
        TOTAL
=========================================*/

.bk-total {

    text-align: center;

    position: relative;

}


.bk-total span {

    color: #888;

    font-size: 13px;

}


.bk-total h2 {

    color: var(--gold);

    font-family: 'Cormorant Garamond', serif;

    font-size: 55px;

    margin: 5px 0 25px;

    text-shadow:

        0 0 15px rgba(212, 175, 55, .18);

}


/*=========================================
        BENEFITS
=========================================*/

.bk-benefits {

    list-style: none;

    padding: 0;

    margin: 0;

}


.bk-benefits li {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px 0;

    color: #aaa;

    font-size: 13px;

    border-bottom:

        1px solid rgba(255, 255, 255, .05);

}


.bk-benefits i {

    color: var(--gold);

}


/*=========================================
        DESCRIPTION
=========================================*/

.bk-form-description {

    color: #888;

    max-width: 650px;

    line-height: 1.8;

    margin-bottom: 35px;

}


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

@media (max-width: 767px) {

    .bk-action-buttons {

        grid-template-columns: 1fr;

    }

    .bk-summary {

        position: static;

        padding: 30px 25px;

    }

}

/*=========================================
        BOOKING STATUS POPUP
=========================================*/

.bk-status-popup {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

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

    backdrop-filter: blur(14px);

    opacity: 0;

    visibility: hidden;

    transition: .4s;

}

.bk-status-popup.active {

    opacity: 1;

    visibility: visible;

}


.bk-status-box {

    position: relative;

    width: 100%;

    max-width: 460px;

    padding: 45px 35px;

    text-align: center;

    border-radius: 30px;

    background:

        linear-gradient(145deg,
            #171717,
            #0c0c0c);

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

    box-shadow:

        0 0 30px rgba(212, 175, 55, .12),

        0 30px 100px rgba(0, 0, 0, .7);

    transform: translateY(25px) scale(.94);

    transition: .45s;

}

.bk-status-popup.active .bk-status-box {

    transform:
        translateY(0) scale(1);

}


/* Close */

.bk-status-close {

    position: absolute;

    top: 18px;

    right: 18px;

    width: 36px;

    height: 36px;

    border-radius: 50%;

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

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

    color: #aaa;

    cursor: pointer;

    transition: .3s;

}

.bk-status-close:hover {

    background: var(--gold);

    color: #000;

}


/* Icon */

.bk-status-icon {

    width: 85px;

    height: 85px;

    margin: 0 auto 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: var(--gold);

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

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

    font-size: 40px;

    box-shadow:

        0 0 20px rgba(212, 175, 55, .2),

        0 0 50px rgba(212, 175, 55, .08);

    animation: bookingPulse 2s infinite;

}


.bk-status-icon.error {

    color: #ff6b6b;

    border-color: #ff6b6b;

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

    box-shadow:

        0 0 20px rgba(255, 80, 80, .2);

}


@keyframes bookingPulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.06);

    }

    100% {

        transform: scale(1);

    }

}


/* Text */

.bk-status-label {

    color: var(--gold);

    font-size: 11px;

    letter-spacing: 3px;

}


.bk-status-box h3 {

    color: #fff;

    font-family: 'Cormorant Garamond', serif;

    font-size: 38px;

    margin: 10px 0;

}


.bk-status-box p {

    color: #999;

    line-height: 1.8;

    margin-bottom: 25px;

}


/* Button */

.bk-status-ok {

    padding: 13px 35px;

    border-radius: 50px;

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

    background: var(--gold);

    color: #000;

    font-weight: 600;

    cursor: pointer;

    transition: .35s;

}

.bk-status-ok:hover {

    background: #fff;

    border-color: #fff;

}


@media (max-width: 576px) {

    .bk-status-box {

        padding: 40px 25px;

    }

    .bk-status-box h3 {

        font-size: 32px;

    }

}

/*=========================================
        ROOM AMENITIES
=========================================*/

.rd-amenities {

    background: #0b0b0b;

}

.rd-sec-subtitle {

    color: var(--gold);

    letter-spacing: 3px;

    text-transform: uppercase;

}

.rd-sec-title {

    font-family: 'Cormorant Garamond', serif;

    font-size: 62px;

    margin-top: 15px;

}

.rd-amenity-card {

    position: relative;

    padding: 40px 30px;

    text-align: center;

    border-radius: 26px;

    background: linear-gradient(135deg,
            rgba(255, 255, 255, .03),
            rgba(255, 255, 255, .01));

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

    backdrop-filter: blur(20px);

    transition: .45s;

    overflow: hidden;

}

.rd-amenity-card::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 0;

    width: 0;

    height: 2px;

    transform: translateX(-50%);

    background: linear-gradient(90deg,
            transparent,
            var(--gold),
            #fff,
            var(--gold),
            transparent);

    transition: .45s;

}

.rd-amenity-card:hover::after {

    width: 100%;

}

.rd-amenity-card:hover i {

    color: #fff;

    text-shadow:

        0 0 12px rgba(212, 175, 55, .45),

        0 0 30px rgba(212, 175, 55, .25);

}

.rd-amenity-card::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 26px;

    pointer-events: none;

    opacity: 0;

    transition: .35s;

    background:

        radial-gradient(220px circle at var(--x) var(--y),

            rgba(255, 255, 255, .12),

            transparent 55%);

}

.rd-amenity-card:hover {

    transform: translateY(-10px);

    border-color: rgba(212, 175, 55, .45);

    box-shadow:

        0 0 25px rgba(212, 175, 55, .12),

        0 20px 45px rgba(0, 0, 0, .45);

}

.rd-amenity-card:hover::before {

    opacity: 1;

}

.rd-amenity-card i {

    font-size: 52px;

    color: var(--gold);

    margin-bottom: 20px;

    transition: .35s;

}

.rd-amenity-card:hover i {

    transform: scale(1.15) rotate(5deg);

}

.rd-amenity-card h4 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 30px;

    color: #fff;

    margin-bottom: 15px;

}

.rd-amenity-card p {

    color: #bdbdbd;

    line-height: 1.8;

    margin: 0;

}

/*=========================================
        PREMIUM TITLE LINE
=========================================*/

.rd-title-line {

    width: 90px;

    height: 2px;

    margin: 0 auto 25px;

    border-radius: 10px;

    background: linear-gradient(90deg,
            transparent,
            var(--gold),
            #fff,
            var(--gold),
            transparent);

    background-size: 300%;

    animation: goldFlow 5s linear infinite;

}

@keyframes goldFlow {

    0% {

        background-position: 0%;

    }

    100% {

        background-position: 300%;

    }

}

/*=========================================
        HOTEL POLICIES
=========================================*/

.rd-policy-section {

    background: #080808;

}

.rd-policy-card {

    position: relative;

    text-align: center;

    padding: 45px 30px;

    background: linear-gradient(135deg, #101010, #171717);

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

    border-radius: 24px;

    transition: .45s;

    overflow: hidden;

}

.rd-policy-card::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: 0;

    transition: .4s;

    background:

        radial-gradient(240px circle at var(--x) var(--y),

            rgba(255, 255, 255, .08),

            transparent 60%);

}

.rd-policy-card:hover::before {

    opacity: 1;

}

.rd-policy-card:hover {

    transform: translateY(-8px);

    border-color: rgba(212, 175, 55, .35);

    box-shadow:

        0 0 25px rgba(212, 175, 55, .15),

        0 20px 45px rgba(0, 0, 0, .45);

}

.rd-policy-card i {

    font-size: 55px;

    color: var(--gold);

    margin-bottom: 20px;

    transition: .35s;

}

.rd-policy-card:hover i {

    transform: scale(1.15);

    color: #fff;

}

.rd-policy-card h4 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 32px;

    color: #fff;

    margin-bottom: 12px;

}

.rd-policy-card p {

    color: #bcbcbc;

    margin: 0;

    line-height: 1.8;

}

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

.rd-related-section {

    background: #090909;

}

.rd-slider {

    display: flex;

    gap: 30px;

    overflow-x: auto;

    scroll-behavior: smooth;

    scrollbar-width: none;

}

.rd-slider::-webkit-scrollbar {

    display: none;

}

.rd-room-card {

    position: relative;

    min-width: 420px;

    height: 540px;

    border-radius: 28px;

    overflow: hidden;

    flex-shrink: 0;

    cursor: pointer;

}

.rd-room-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .8s;

}

.rd-room-card:hover img {

    transform: scale(1.12);

}

.rd-room-overlay {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    padding: 35px;

    background: linear-gradient(to top,

            rgba(0, 0, 0, .90),

            transparent);

}

.rd-room-overlay span {

    color: var(--gold);

    letter-spacing: 2px;

    text-transform: uppercase;

}

.rd-room-overlay h3 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 42px;

    color: #fff;

    margin: 12px 0 20px;

}

.rd-room-overlay a {

    color: #fff;

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

    padding-bottom: 6px;

}

.rd-slider-nav {

    display: flex;

    gap: 12px;

}

.rd-slider-nav button {

    width: 58px;

    height: 58px;

    border: none;

    border-radius: 50%;

    background: #181818;

    color: #fff;

    transition: .35s;

}

.rd-slider-nav button:hover {

    background: var(--gold);

    color: #000;

}

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

.rd-final-cta {

    position: relative;

    overflow: hidden;

    height: 75vh;

    display: flex;

    align-items: center;

}

.rd-final-bg {

    position: absolute;

    inset: 0;

}

.rd-final-bg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform: scale(1.08);

    transition: 8s;

}

.rd-final-cta:hover .rd-final-bg img {

    transform: scale(1.16);

}

.rd-final-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(rgba(0, 0, 0, .65),

            rgba(0, 0, 0, .82));

}

.rd-final-content {

    position: relative;

    z-index: 5;

    text-align: center;

    max-width: 850px;

    margin: auto;

}

.rd-final-tag {

    color: var(--gold);

    letter-spacing: 4px;

    text-transform: uppercase;

}

.rd-final-content h2 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 78px;

    margin: 20px 0;

}

.rd-final-content p {

    color: #d6d6d6;

    max-width: 650px;

    margin: 0 auto 45px;

    line-height: 2;

}

.rd-final-btns {

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

}

.rd-wa-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 16px 34px;

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

    border-radius: 60px;

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

    backdrop-filter: blur(15px);

    color: #fff;

    transition: .4s;

}

.rd-wa-btn:hover {

    background: #25D366;

    border-color: #25D366;

    color: #fff;

    transform: translateY(-4px);

}

/*=========================================
        HOTEL HIGHLIGHTS
        LIGHT LUXURY VERSION
=========================================*/

.hotel-highlights {

    position: relative;

    background: #ffffff;

    overflow: hidden;

}


/*=========================================
        SECTION HEADING
=========================================*/

.highlight-label {

    color: #b38a22;

    font-size: 13px;

    letter-spacing: 4px;

    font-weight: 600;

}

.highlight-title {

    font-family: 'Cormorant Garamond', serif;

    font-size: 68px;

    color: #111;

    margin: 15px 0;

}

.highlight-desc {

    max-width: 650px;

    margin: auto;

    color: #666;

    line-height: 1.9;

}


/*=========================================
        CARD
=========================================*/

.highlight-card {

    position: relative;

    min-height: 330px;

    padding: 45px 35px;

    border-radius: 28px;

    overflow: hidden;

    background:

        linear-gradient(145deg,
            #ffffff,
            #fafafa);

    border: 1px solid rgba(179, 138, 34, .18);

    box-shadow:

        0 10px 35px rgba(0, 0, 0, .06);

    transition:
        transform .5s ease,
        border-color .5s ease,
        box-shadow .5s ease;

}


/*=========================================
        MOUSE GOLD GLOW
=========================================*/

.highlight-card::before {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    left: var(--x, 50%);

    top: var(--y, 50%);

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

    background:

        radial-gradient(circle,
            rgba(212, 175, 55, .16),
            transparent 65%);

    opacity: 0;

    pointer-events: none;

    transition: opacity .4s;

}

.highlight-card:hover::before {

    opacity: 1;

}


/*=========================================
        PREMIUM GOLD BORDER
=========================================*/

.highlight-card::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 28px;

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

    box-shadow:

        inset 0 0 25px rgba(212, 175, 55, .06);

    opacity: 0;

    transition: .45s;

    pointer-events: none;

}

.highlight-card:hover::after {

    opacity: 1;

}


/*=========================================
        CARD HOVER
=========================================*/

.highlight-card:hover {

    transform: translateY(-10px);

    border-color: rgba(179, 138, 34, .45);

    box-shadow:

        0 0 15px rgba(212, 175, 55, .12),

        0 0 35px rgba(212, 175, 55, .08),

        0 25px 60px rgba(0, 0, 0, .12);

}


/*=========================================
        NUMBER
=========================================*/

.highlight-number {

    position: absolute;

    top: 22px;

    right: 25px;

    color: rgba(0, 0, 0, .15);

    font-family: 'Cormorant Garamond', serif;

    font-size: 24px;

    transition: .4s;

}

.highlight-card:hover .highlight-number {

    color: #b38a22;

    text-shadow:

        0 0 12px rgba(212, 175, 55, .25);

}


/*=========================================
        ICON
=========================================*/

.highlight-icon {

    position: relative;

    width: 78px;

    height: 78px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:

        linear-gradient(145deg,
            #fff,
            #f6f1e4);

    border: 1px solid rgba(179, 138, 34, .35);

    margin-bottom: 25px;

    transition: .45s;

}

.highlight-icon i {

    color: #b38a22;

    font-size: 30px;

    transition: .45s;

}


/* Icon Hover */

.highlight-card:hover .highlight-icon {

    background: #c49a2c;

    border-color: #c49a2c;

    box-shadow:

        0 0 15px rgba(212, 175, 55, .35),

        0 0 35px rgba(212, 175, 55, .15);

    transform:

        rotate(-8deg) scale(1.08);

}

.highlight-card:hover .highlight-icon i {

    color: #fff;

    transform: scale(1.12);

}


/*=========================================
        TITLE
=========================================*/

.highlight-card h3 {

    position: relative;

    z-index: 2;

    font-family: 'Cormorant Garamond', serif;

    font-size: 34px;

    color: #171717;

    margin-bottom: 14px;

    transition: .4s;

}

.highlight-card:hover h3 {

    color: #b38a22;

    text-shadow:

        0 0 12px rgba(212, 175, 55, .18);

}


/*=========================================
        DESCRIPTION
=========================================*/

.highlight-card p {

    position: relative;

    z-index: 2;

    color: #666;

    line-height: 1.85;

    margin: 0;

}


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

@media (max-width: 991px) {

    .highlight-title {

        font-size: 55px;

    }

}


@media (max-width: 576px) {

    .highlight-title {

        font-size: 45px;

    }

    .highlight-card {

        min-height: auto;

        padding: 35px 28px;

    }

}

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

.ab-hero {

    position: relative;

    height: 100vh;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: #000;

}

.ab-bg {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform: scale(1.08);

    animation: abZoom 10s ease-in-out infinite alternate;

}

@keyframes abZoom {

    from {

        transform: scale(1.08);

    }

    to {

        transform: scale(1.16);

    }

}

.ab-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, .82) 20%,
            rgba(0, 0, 0, .45) 55%,
            rgba(0, 0, 0, .70) 100%);

}

/* White Ambient Glow */

.ab-overlay::before {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    top: -220px;

    right: -180px;

    border-radius: 50%;

    background:

        radial-gradient(rgba(255, 255, 255, .08),

            transparent 70%);

}

.ab-content {

    position: relative;

    z-index: 5;

    max-width: 760px;

}

.ab-label {

    display: inline-flex;

    align-items: center;

    padding: 12px 24px;

    border-radius: 50px;

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

    backdrop-filter: blur(18px);

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

    color: var(--gold);

    letter-spacing: 2px;

    text-transform: uppercase;

    font-size: 13px;

}

.ab-title {

    font-family: 'Cormorant Garamond', serif;

    font-size: 92px;

    line-height: .95;

    color: #fff;

    margin: 28px 0;

}

.ab-desc {

    color: #d5d5d5;

    font-size: 18px;

    line-height: 2;

    max-width: 620px;

    margin-bottom: 40px;

}

/* Breadcrumb */

.ab-breadcrumb {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding: 16px 28px;

    border-radius: 60px;

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

    backdrop-filter: blur(20px);

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

}

.ab-breadcrumb a {

    color: #fff;

    transition: .35s;

}

.ab-breadcrumb a:hover {

    color: var(--gold);

}

.ab-breadcrumb span {

    color: var(--gold);

}

/* Floating Rating */

.ab-rating {

    position: absolute;

    right: 100px;

    bottom: 100px;

    width: 170px;

    height: 170px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

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

    backdrop-filter: blur(18px);

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

    z-index: 10;

}

.ab-rating h2 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 64px;

    color: #fff;

    margin: 0;

}

.ab-rating span {

    color: var(--gold);

    letter-spacing: 2px;

    text-transform: uppercase;

    font-size: 12px;

}

/* Gold Bottom Line */

.ab-hero::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 2px;

    background:

        linear-gradient(90deg,

            transparent,

            var(--gold),

            #fff,

            var(--gold),

            transparent);

}

/*=========================
      Responsive
=========================*/

@media(max-width:991px) {

    .ab-title {

        font-size: 60px;

    }

    .ab-rating {

        display: none;

    }

}

@media(max-width:576px) {

    .ab-title {

        font-size: 42px;

    }

    .ab-desc {

        font-size: 16px;

        line-height: 1.8;

    }

    .ab-breadcrumb {

        padding: 12px 20px;

        font-size: 14px;

    }

}

/*=========================================
        OUR STORY
=========================================*/

.ab-story {

    background: #090909;

}

/* Gallery */

.ab-story-gallery {

    position: relative;

    height: 650px;

}

.ab-story-main {

    width: 78%;

    height: 520px;

    overflow: hidden;

    border-radius: 30px;

}

.ab-story-main img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .8s;

}

.ab-story-main:hover img {

    transform: scale(1.08);

}

/* Floating Image */

.ab-story-small {

    position: absolute;

    right: 0;

    bottom: 20px;

    width: 280px;

    height: 320px;

    border-radius: 26px;

    overflow: hidden;

    border: 8px solid #090909;

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

}

.ab-story-small img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .7s;

}

.ab-story-small:hover img {

    transform: scale(1.08);

}

/* Experience Card */

.ab-exp-card {

    position: absolute;

    top: 40px;

    right: 30px;

    width: 170px;

    height: 170px;

    border-radius: 50%;

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

    backdrop-filter: blur(20px);

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

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}

.ab-exp-card h2 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 62px;

    color: #fff;

    margin: 0;

}

.ab-exp-card span {

    color: var(--gold);

    font-size: 13px;

    letter-spacing: 2px;

    text-transform: uppercase;

}

/* Content */

.ab-sec-tag {

    color: var(--gold);

    letter-spacing: 3px;

    text-transform: uppercase;

}

.ab-story-content h2 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 68px;

    line-height: 1;

    margin: 20px 0;

}

.ab-story-content p {

    color: #bdbdbd;

    line-height: 2;

    margin-bottom: 22px;

}

/* Quote */

.ab-quote {

    margin: 35px 0;

    padding: 28px;

    border-left: 4px solid var(--gold);

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

    border-radius: 0 18px 18px 0;

    color: #fff;

    font-size: 20px;

    font-family: 'Cormorant Garamond', serif;

    font-style: italic;

}

/* Founder */

.ab-founder {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 30px;

}

.ab-founder h4 {

    margin: 0;

    color: #fff;

    font-size: 26px;

    font-family: 'Cormorant Garamond', serif;

}

.ab-founder span {

    color: var(--gold);

    letter-spacing: 2px;

    text-transform: uppercase;

    font-size: 13px;

}

/*=========================================
        WHY CHOOSE US
=========================================*/

.ab-choose {

    background: #080808;

}

.ab-sec-title {

    font-family: 'Cormorant Garamond', serif;

    font-size: 68px;

    margin-top: 15px;

}

.ab-feature-card {

    position: relative;

    height: 420px;

    overflow: hidden;

    border-radius: 30px;

    cursor: pointer;

}

.ab-feature-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 1s;

}

.ab-feature-card:hover img {

    transform: scale(1.12);

}

.ab-feature-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(to top,

            rgba(0, 0, 0, .90),

            rgba(0, 0, 0, .25),

            transparent);

    z-index: 1;

}

/* Glass Content */

.ab-feature-overlay {

    position: absolute;

    left: 35px;

    right: 35px;

    bottom: 35px;

    z-index: 5;

    padding: 30px;

    border-radius: 24px;

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

    backdrop-filter: blur(18px);

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

    transition: .45s;

}

.ab-feature-card:hover .ab-feature-overlay {

    transform: translateY(-10px);

    border-color: rgba(212, 175, 55, .45);

}

.ab-feature-overlay i {

    font-size: 48px;

    color: var(--gold);

    margin-bottom: 15px;

    transition: .35s;

}

.ab-feature-card:hover i {

    color: #fff;

    transform: scale(1.1);

}

.ab-feature-overlay h3 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 38px;

    color: #fff;

    margin-bottom: 12px;

}

.ab-feature-overlay p {

    color: #d3d3d3;

    line-height: 1.8;

    margin: 0;

}

/* Gold Bottom Accent */

.ab-feature-overlay::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 0;

    width: 0;

    height: 2px;

    transform: translateX(-50%);

    background: linear-gradient(90deg,

            transparent,

            var(--gold),

            #fff,

            var(--gold),

            transparent);

    transition: .45s;

}

.ab-feature-card:hover .ab-feature-overlay::after {

    width: 100%;

}

/*=========================================
        FOUNDER MESSAGE
=========================================*/

.ab-founder-section {

    background: #0a0a0a;

}

/* Image */

.ab-founder-image {

    position: relative;

    overflow: hidden;

    border-radius: 30px;

}

.ab-founder-image img {

    width: 100%;

    border-radius: 30px;

    filter: grayscale(100%);

    transition: .8s;

}

.ab-founder-image:hover img {

    filter: grayscale(0);

    transform: scale(1.05);

}

/* Badge */

.ab-founder-badge {

    position: absolute;

    right: 25px;

    bottom: 25px;

    width: 160px;

    height: 160px;

    border-radius: 50%;

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

    backdrop-filter: blur(20px);

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

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}

.ab-founder-badge h3 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 56px;

    color: #fff;

    margin: 0;

}

.ab-founder-badge span {

    color: var(--gold);

    font-size: 12px;

    letter-spacing: 2px;

    text-transform: uppercase;

    text-align: center;

}

/* Content */

.ab-founder-content h2 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 68px;

    margin: 20px 0 30px;

    line-height: 1;

}

.ab-founder-content p {

    color: #cfcfcf;

    line-height: 2;

}

/* Quote */

.ab-founder-quote {

    position: relative;

    padding: 35px;

    margin-bottom: 35px;

    border-radius: 24px;

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

    border-left: 4px solid var(--gold);

}

.ab-founder-quote i {

    font-size: 45px;

    color: var(--gold);

    margin-bottom: 15px;

}

.ab-founder-quote p {

    margin: 0;

    font-size: 20px;

    font-family: 'Cormorant Garamond', serif;

    color: #fff;

}

/* Signature */

.ab-founder-sign {

    margin-top: 40px;

}

.ab-founder-sign img {

    height: 60px;

    margin-bottom: 15px;

}

.ab-founder-sign h4 {

    margin: 0;

    color: #fff;

    font-family: 'Cormorant Garamond', serif;

    font-size: 30px;

}

.ab-founder-sign span {

    color: var(--gold);

    letter-spacing: 2px;

    text-transform: uppercase;

    font-size: 13px;

}

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

.gl-hero {

    position: relative;

    height: 95vh;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: #000;

}

.gl-bg {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform: scale(1.08);

    animation: glZoom 18s ease-in-out infinite alternate;

}

@keyframes glZoom {

    from {

        transform: scale(1.08);

    }

    to {

        transform: scale(1.16);

    }

}

.gl-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, .82) 15%,
            rgba(0, 0, 0, .35) 55%,
            rgba(0, 0, 0, .78) 100%);

}

.gl-overlay::before {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    right: -220px;

    top: -220px;

    border-radius: 50%;

    background:

        radial-gradient(rgba(255, 255, 255, .08),

            transparent 70%);

}

.gl-content {

    position: relative;

    z-index: 5;

    max-width: 760px;

}

.gl-label {

    display: inline-flex;

    padding: 12px 24px;

    border-radius: 50px;

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

    backdrop-filter: blur(18px);

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

    color: var(--gold);

    letter-spacing: 3px;

    text-transform: uppercase;

    font-size: 13px;

}

.gl-title {

    font-family: 'Cormorant Garamond', serif;

    font-size: 92px;

    line-height: .95;

    color: #fff;

    margin: 28px 0;

}

.gl-desc {

    color: #d7d7d7;

    font-size: 18px;

    line-height: 2;

    max-width: 620px;

    margin-bottom: 40px;

}

.gl-breadcrumb {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding: 16px 28px;

    border-radius: 60px;

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

    backdrop-filter: blur(20px);

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

}

.gl-breadcrumb a {

    color: #fff;

}

.gl-breadcrumb a:hover {

    color: var(--gold);

}

.gl-breadcrumb span {

    color: var(--gold);

}

/* Floating Counter */

.gl-counter {

    position: absolute;

    right: 90px;

    bottom: 90px;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

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

    backdrop-filter: blur(20px);

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

    z-index: 5;

}

.gl-counter h2 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 64px;

    color: #fff;

    margin: 0;

}

.gl-counter span {

    color: var(--gold);

    letter-spacing: 2px;

    text-transform: uppercase;

    font-size: 12px;

    text-align: center;

}

/* Gold Bottom Line */

.gl-hero::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 2px;

    background: linear-gradient(90deg,

            transparent,

            var(--gold),

            #fff,

            var(--gold),

            transparent);

}

/*=========================
      Responsive
=========================*/

@media(max-width:991px) {

    .gl-title {

        font-size: 60px;

    }

    .gl-counter {

        display: none;

    }

}

@media(max-width:576px) {

    .gl-title {

        font-size: 42px;

    }

    .gl-desc {

        font-size: 16px;

        line-height: 1.8;

    }

    .gl-breadcrumb {

        padding: 12px 20px;

        font-size: 14px;

    }

}

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

.gl-filter-section {

    background: #090909;

    padding: 70px 0 50px;

}

.gl-filter {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 40px;

}

.gl-filter button {

    position: relative;

    background: none;

    border: none;

    color: #bdbdbd;

    font-size: 18px;

    font-weight: 500;

    letter-spacing: 1px;

    padding: 12px 0;

    transition: .35s;

}

.gl-filter button::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 2px;

    background: linear-gradient(90deg,

            var(--gold),

            #fff,

            var(--gold));

    transition: .4s;

}

.gl-filter button:hover {

    color: #fff;

}

.gl-filter button.active {

    color: #fff;

}

.gl-filter button.active::after,

.gl-filter button:hover::after {

    width: 100%;

}

/* Luxury Glow */

.gl-filter button.active {

    text-shadow:

        0 0 12px rgba(212, 175, 55, .25);

}

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

.gl-gallery {

    display: grid;

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

    gap: 22px;

    grid-auto-flow: dense;

}

.gl-item {

    position: relative;

    overflow: hidden;

    border-radius: 26px;

    cursor: pointer;

    min-height: 320px;

    background: #111;

}

.gl-item.tall {

    grid-row: span 2;

    min-height: 660px;

}

.gl-item.wide {

    grid-column: span 2;

}

.gl-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .8s;

}

.gl-item:hover img {

    transform: scale(1.12);

}

/* Overlay */

.gl-item-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

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

    backdrop-filter: blur(4px);

    opacity: 0;

    transition: .45s;

}

.gl-item:hover .gl-item-overlay {

    opacity: 1;

}

.gl-item-overlay i {

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

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

    color: #fff;

    font-size: 28px;

    margin-bottom: 20px;

    transition: .35s;

}

.gl-item:hover i {

    transform: rotate(90deg) scale(1.1);

    background: var(--gold);

    color: #000;

}

.gl-item-overlay h4 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 34px;

    color: #fff;

    margin: 0;

}

/* Gold Border */

.gl-item::before {

    content: "";

    position: absolute;

    inset: 0;

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

    border-radius: 26px;

    z-index: 2;

    transition: .35s;

}

.gl-item:hover::before {

    border-color: rgba(212, 175, 55, .45);

    box-shadow:

        inset 0 0 25px rgba(212, 175, 55, .15),

        0 0 25px rgba(212, 175, 55, .15);

}

/*=========================================
        PREMIUM VIEWER
=========================================*/

.gl-viewer {

    position: fixed;

    inset: 0;

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

    backdrop-filter: blur(10px);

    display: flex;

    justify-content: center;

    align-items: center;

    opacity: 0;

    visibility: hidden;

    transition: .45s;

    z-index: 99999;

}

.gl-viewer.active {

    opacity: 1;

    visibility: visible;

}

.gl-view-image {

    width: 80%;

    max-width: 1400px;

    max-height: 82vh;

    object-fit: contain;

    border-radius: 18px;

    transform: scale(.92);

    transition: .45s;

}

.gl-viewer.active .gl-view-image {

    transform: scale(1);

}

/* Close */

.gl-close {

    position: absolute;

    top: 35px;

    right: 40px;

    width: 60px;

    height: 60px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

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

    color: #fff;

    font-size: 24px;

    cursor: pointer;

    transition: .35s;

}

.gl-close:hover {

    background: var(--gold);

    color: #000;

}

/* Navigation */

.gl-prev,

.gl-next {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 70px;

    height: 70px;

    border: none;

    border-radius: 50%;

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

    color: #fff;

    font-size: 26px;

    transition: .35s;

}

.gl-prev {

    left: 35px;

}

.gl-next {

    right: 35px;

}

.gl-prev:hover,

.gl-next:hover {

    background: var(--gold);

    color: #000;

}

/* Counter */

.gl-counter-box {

    position: absolute;

    bottom: 40px;

    left: 50%;

    transform: translateX(-50%);

    padding: 14px 28px;

    border-radius: 50px;

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

    backdrop-filter: blur(15px);

    color: #fff;

    letter-spacing: 2px;

}

.gl-item-overlay {

    pointer-events: none;

}

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

.ct-info {

    background: #090909;

}

.ct-sec-tag {

    color: var(--gold);

    letter-spacing: 3px;

    text-transform: uppercase;

}

.ct-sec-title {

    font-family: 'Cormorant Garamond', serif;

    font-size: 68px;

    margin-top: 15px;

}

.ct-card {

    position: relative;

    padding: 45px 30px;

    text-align: center;

    border-radius: 28px;

    overflow: hidden;

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

    backdrop-filter: blur(18px);

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

    transition: .45s;

}

.ct-card::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: 0;

    transition: .4s;

    background:

        radial-gradient(260px circle at var(--x) var(--y),

            rgba(255, 255, 255, .10),

            transparent 60%);

}

.ct-card:hover::before {

    opacity: 1;

}

.ct-card:hover {

    transform: translateY(-10px);

    border-color: rgba(212, 175, 55, .40);

    box-shadow:

        0 0 30px rgba(212, 175, 55, .15),

        0 25px 60px rgba(0, 0, 0, .45);

}

.ct-icon {

    width: 85px;

    height: 85px;

    margin: auto;

    margin-bottom: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #111;

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

    transition: .4s;

}

.ct-icon i {

    font-size: 34px;

    color: var(--gold);

    transition: .35s;

}

.ct-card:hover .ct-icon {

    background: var(--gold);

}

.ct-card:hover .ct-icon i {

    color: #000;

    transform: scale(1.15);

}

.ct-card h3 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 34px;

    color: #fff;

    margin-bottom: 15px;

}

.ct-card p {

    color: #cfcfcf;

    line-height: 2;

    margin: 0;

}

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

.ct-form-section {

    background: #080808;

}

.ct-form-box {

    padding: 50px;

    border-radius: 30px;

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

    backdrop-filter: blur(18px);

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

}

.ct-input {

    width: 100%;

    height: 60px;

    padding: 0 22px;

    background: #111;

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

    border-radius: 14px;

    color: #fff;

    transition: .35s;

}

.ct-input:focus {

    outline: none;

    border-color: var(--gold);

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

}

.ct-input::placeholder {

    color: #9c9c9c;

}

.ct-textarea {

    height: 180px;

    padding: 20px;

    resize: none;

}

/* Right Card */

.ct-side-card {

    position: relative;

    height: 100%;

    min-height: 650px;

    border-radius: 30px;

    overflow: hidden;

}

.ct-side-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .8s;

}

.ct-side-card:hover img {

    transform: scale(1.08);

}

.ct-side-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 45px;

    background: linear-gradient(to top,

            rgba(0, 0, 0, .92),

            rgba(0, 0, 0, .25));

}

.ct-side-overlay h3 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 52px;

    color: #fff;

}

.ct-side-overlay p {

    color: #d3d3d3;

    line-height: 1.9;

    margin: 20px 0 35px;

}

.ct-side-btn,

.ct-wa-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    height: 56px;

    border-radius: 50px;

    margin-bottom: 15px;

    transition: .35s;

    font-weight: 600;

}

.ct-side-btn {

    background: var(--gold);

    color: #000;

}

.ct-side-btn:hover {

    transform: translateY(-4px);

}

.ct-wa-btn {

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

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

    color: #fff;

}

.ct-wa-btn:hover {

    background: #25D366;

    border-color: #25D366;

    color: #fff;

}

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

.ct-map {

    background: #090909;

    padding-bottom: 120px;

}

.ct-map-wrapper {

    position: relative;

    border-radius: 30px;

    overflow: hidden;

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

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

}

.ct-map-wrapper iframe {

    width: 100%;

    height: 620px;

    border: 0;

    filter: grayscale(100%) invert(92%) contrast(90%);

}

/* Floating Card */

.ct-map-card {

    position: absolute;

    left: 40px;

    top: 40px;

    width: 360px;

    padding: 35px;

    border-radius: 24px;

    background: rgba(15, 15, 15, .82);

    backdrop-filter: blur(18px);

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

}

.ct-map-card h3 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 42px;

    color: #fff;

    margin: 18px 0;

}

.ct-map-card p {

    color: #d4d4d4;

    line-height: 2;

    margin-bottom: 30px;

}

/* Responsive */

@media(max-width:768px) {

    .ct-map-card {

        position: static;

        width: 100%;

        border-radius: 0;

    }

    .ct-map-wrapper iframe {

        height: 420px;

    }

}

/*=========================================
        FAQ
=========================================*/

.ct-faq {

    background: #080808;

}

.ct-faq-wrap {

    max-width: 900px;

    margin: auto;

}

.ct-faq-item {

    margin-bottom: 20px;

    border-radius: 22px;

    overflow: hidden;

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

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

    transition: .35s;

}

.ct-faq-item.active {

    border-color: rgba(212, 175, 55, .35);

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

}

.ct-faq-question {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 28px 30px;

    cursor: pointer;

}

.ct-faq-question h4 {

    margin: 0;

    color: #fff;

    font-family: 'Cormorant Garamond', serif;

    font-size: 34px;

}

.ct-faq-question i {

    color: var(--gold);

    font-size: 22px;

    transition: .35s;

}

.ct-faq-item.active .ct-faq-question i {

    transform: rotate(45deg);

}

.ct-faq-answer {

    max-height: 0;

    overflow: hidden;

    transition: max-height .45s ease;

}

.ct-faq-item.active .ct-faq-answer {

    max-height: 250px;

}

.ct-faq-answer p {

    color: #cfcfcf;

    line-height: 2;

    padding: 0 30px 30px;

    margin: 0;

}

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

.ct-cta {

    position: relative;

    height: 80vh;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

}

.ct-cta-bg {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform: scale(1.08);

    transition: 8s;

}

.ct-cta:hover .ct-cta-bg {

    transform: scale(1.16);

}

.ct-cta-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(rgba(0, 0, 0, .72),

            rgba(0, 0, 0, .88));

}

.ct-cta-content {

    position: relative;

    z-index: 5;

    max-width: 900px;

    text-align: center;

}

.ct-cta-tag {

    color: var(--gold);

    letter-spacing: 4px;

    text-transform: uppercase;

    font-size: 13px;

}

.ct-cta-content h2 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 78px;

    color: #fff;

    margin: 25px 0;

    line-height: 1;

}

.ct-cta-content p {

    max-width: 700px;

    margin: 0 auto 45px;

    color: #d7d7d7;

    line-height: 2;

}

.ct-cta-buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

}

.ct-cta-whatsapp {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 16px 34px;

    border-radius: 60px;

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

    backdrop-filter: blur(18px);

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

    color: #fff;

    transition: .35s;

}

.ct-cta-whatsapp:hover {

    background: #25D366;

    border-color: #25D366;

    color: #fff;

    transform: translateY(-4px);

}

.ct-cta-buttons a i {

    margin-right: 8px;

}

/* Mobile */

@media(max-width:768px) {

    .ct-cta {

        height: auto;

        padding: 120px 0;

    }

    .ct-cta-content h2 {

        font-size: 48px;

    }

    .ct-cta-content p {

        font-size: 15px;

    }

}

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

.bk-hero {

    position: relative;

    height: 95vh;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: #000;

}

.bk-bg {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform: scale(1.08);

    animation: bkZoom 18s ease-in-out infinite alternate;

}

@keyframes bkZoom {

    from {

        transform: scale(1.08);

    }

    to {

        transform: scale(1.15);

    }

}

.bk-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(90deg,

            rgba(0, 0, 0, .82),

            rgba(0, 0, 0, .45),

            rgba(0, 0, 0, .78));

}

.bk-content {

    position: relative;

    z-index: 5;

    max-width: 760px;

}

.bk-label {

    display: inline-block;

    padding: 12px 26px;

    border-radius: 50px;

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

    backdrop-filter: blur(20px);

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

    color: var(--gold);

    letter-spacing: 3px;

    text-transform: uppercase;

}

.bk-title {

    font-family: 'Cormorant Garamond', serif;

    font-size: 92px;

    color: #fff;

    line-height: .95;

    margin: 28px 0;

}

.bk-desc {

    color: #d6d6d6;

    font-size: 18px;

    line-height: 2;

    max-width: 620px;

    margin-bottom: 40px;

}

.bk-breadcrumb {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding: 15px 28px;

    border-radius: 50px;

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

    backdrop-filter: blur(18px);

}

.bk-breadcrumb a {

    color: #fff;

}

.bk-breadcrumb span {

    color: var(--gold);

}

.bk-badge {

    position: absolute;

    right: 90px;

    bottom: 90px;

    width: 180px;

    height: 180px;

    border-radius: 50%;

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

    backdrop-filter: blur(20px);

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

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}

.bk-badge h2 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 60px;

    color: #fff;

    margin: 0;

}

.bk-badge span {

    color: var(--gold);

    text-align: center;

    text-transform: uppercase;

    font-size: 12px;

    letter-spacing: 2px;

}

.bk-hero::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 2px;

    background: linear-gradient(90deg,

            transparent,

            var(--gold),

            #fff,

            var(--gold),

            transparent);

}

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

.bk-booking-section {

    background: #080808;

}

.bk-form-box {

    padding: 50px;

    border-radius: 30px;

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

    backdrop-filter: blur(20px);

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

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

}

.bk-form-tag {

    color: var(--gold);

    letter-spacing: 3px;

    text-transform: uppercase;

}

.bk-form-title {

    font-family: 'Cormorant Garamond', serif;

    font-size: 64px;

    color: #fff;

    margin: 15px 0 40px;

}

.bk-form-box label {

    color: #d5d5d5;

    margin-bottom: 10px;

    display: block;

    font-size: 15px;

}

.bk-input {

    width: 100%;

    height: 60px;

    padding: 0 20px;

    background: #111;

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

    border-radius: 14px;

    color: #fff;

    transition: .35s;

}

.bk-input:focus {

    outline: none;

    border-color: var(--gold);

    box-shadow:

        0 0 20px rgba(212, 175, 55, .15);

}

.bk-input::placeholder {

    color: #888;

}

.bk-textarea {

    height: 180px;

    resize: none;

    padding: 20px;

}

.bk-form-box .theme-btn {

    width: 100%;

    height: 62px;

    font-size: 17px;

    margin-top: 10px;

}

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

.bk-summary {

    position: sticky;

    top: 120px;

    padding: 40px;

    border-radius: 30px;

    background: linear-gradient(180deg, #111, #181818);

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

    box-shadow:

        0 20px 60px rgba(0, 0, 0, .35);

}

.bk-summary h3 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 42px;

    color: #fff;

    margin-bottom: 35px;

}

.bk-summary-item {

    display: flex;

    justify-content: space-between;

    margin-bottom: 18px;

    color: #d5d5d5;

}

.bk-summary-item strong {

    color: #fff;

}

.bk-summary hr {

    border-color: rgba(255, 255, 255, .08);

    margin: 25px 0;

}

.bk-total {

    text-align: center;

    margin-bottom: 30px;

}

.bk-total span {

    color: #bdbdbd;

}

.bk-total h2 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 56px;

    color: var(--gold);

    margin-top: 10px;

}

.bk-benefits {

    list-style: none;

    padding: 0;

    margin: 0;

}

.bk-benefits li {

    padding: 14px 0;

    color: #d4d4d4;

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

}

/*=========================================
        BOOK DIRECT BENEFITS
=========================================*/

.bk-benefits-section {

    background: #090909;

}

.bk-benefit-card {

    text-align: center;

    padding: 45px 30px;

    border-radius: 26px;

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

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

    transition: .4s;

}

.bk-benefit-card:hover {

    transform: translateY(-8px);

    border-color: rgba(212, 175, 55, .35);

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

}

.bk-benefit-card i {

    font-size: 52px;

    color: var(--gold);

    margin-bottom: 20px;

}

.bk-benefit-card h3 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 34px;

    color: #fff;

}

.bk-benefit-card p {

    color: #cfcfcf;

    line-height: 1.8;

}