/* =========================================================
   THE RAMILLA HEIGHTS
   STEP 1 - HEADER & NAVIGATION
========================================================= */


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

:root {

    --primary-bg: #f7f2e8;
    --secondary-bg: #eee6d6;

    --gold: #9a7b4f;
    --gold-light: #b29663;
    --gold-dark: #80633b;

    --dark: #3b2f2f;
    --text: #4a4138;

    --white: #ffffff;

    --border: rgba(154, 123, 79, 0.35);

    --heading-font: "Cormorant Garamond", serif;
    --body-font: "Jost", sans-serif;

    --transition: all 0.35s ease;

}


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

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


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background: var(--primary-bg);

    color: var(--text);

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

    font-size: 15px;

    font-weight: 400;

    line-height: 1.7;

}


a {

    color: inherit;

    text-decoration: none;

    transition: var(--transition);

}


button,
input {

    font-family: inherit;

}


button {

    border: none;

    background: none;

    cursor: pointer;

}


ul {

    list-style: none;

}


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

.site-header {

    position: relative;

    width: 100%;

    z-index: 1000;

    background: var(--primary-bg);

    transition: var(--transition);

}


.site-header.scrolled {

    position: fixed;

    top: 0;

    left: 0;

    box-shadow: 0 5px 25px rgba(59, 47, 47, 0.08);

}


/* =========================================================
   TOP BAR
========================================================= */

.top-bar {

    max-width: 1280px;
    height: 54px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 101;
    background: transparent;

}


.top-bar-left {

    display: flex;

    align-items: center;

    gap: 20px;

    font-size: 14px;

    font-weight: 400;

    letter-spacing: 0.2px;

}


.top-bar-left a {

    display: flex;

    align-items: center;

    gap: 9px;

    white-space: nowrap;

}


.top-bar-left a:hover {

    color: var(--gold);

}


.top-bar-left i {

    color: var(--gold);

    font-size: 13px;

}


.top-divider {

    width: 1px;

    height: 16px;

    background: var(--border);

}


.top-bar-right {

    display: flex;

    align-items: center;

    gap: 9px;

    font-size: 14px;

    font-weight: 400;

}


.top-bar-right a {

    white-space: nowrap;

}


.top-bar-right a:hover {

    color: var(--gold);

}


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

.main-navbar {

    max-width: 1280px;
    height: 105px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: transparent;
    border-bottom: 1px solid rgba(80, 65, 45, 0.15);

}


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

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

.hotel-logo {

    display: flex;

    align-items: center;

    flex: 0 0 220px;

}


.hotel-logo-image {

    display: block;

    width: 190px;

    height: auto;

    max-height: 90px;

    object-fit: contain;

}


.logo-mark {

    width: 27px;

    height: 49px;

    margin-right: 3px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    font-size: 48px;

    font-weight: 500;

    line-height: 1;

    color: var(--gold);

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

    border-radius: 50%;

}


.logo-content {

    display: flex;

    flex-direction: column;

    line-height: 1;

}


.logo-name {

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

    font-size: 30px;

    font-weight: 600;

    letter-spacing: -0.5px;

    color: var(--dark);

    white-space: nowrap;

}


.logo-subtitle {

    margin-top: 4px;

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

    font-size: 6px;

    font-weight: 500;

    letter-spacing: 2.5px;

    color: var(--gold);

    white-space: nowrap;

}


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

.desktop-navigation {

    height: 100%;

    display: flex;

    align-items: center;

    flex: 1;

    justify-content: center;

}


.nav-menu {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 19px;

    white-space: nowrap;

}


.nav-item {

    position: relative;

    height: 100%;

    display: flex;

    align-items: center;

}


.nav-item > a {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    height: 100%;

    color: var(--dark);

    font-size: 13px;

    font-weight: 500;

    letter-spacing: 0.8px;

    text-transform: uppercase;

    white-space: nowrap;

}


.nav-item > a::after {

    content: "";

    position: absolute;

    bottom: 28px;

    left: 0;

    width: 0;

    height: 1px;

    background: var(--gold);

    transition: var(--transition);

}


.nav-item:hover > a,

.nav-item.active > a {

    color: var(--gold);

}


.nav-item:hover > a::after,

.nav-item.active > a::after {

    width: 100%;

}


.nav-item > a i {

    font-size: 7px;

    transition: transform 0.3s ease;

}


.nav-item:hover > a i {

    transform: rotate(180deg);

}


/* =========================================================
   NAV ACTIONS
========================================================= */

.nav-actions {

    flex: 0 0 85px;

    min-width: 85px;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 20px;

}


.nav-icon {

    position: relative;

    width: 24px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--dark);

}


.nav-icon:hover {

    color: var(--gold);

}


.search-trigger i {

    font-size: 18px;

}


.side-panel-trigger {

    display: grid;

    grid-template-columns: repeat(2, 8px);

    grid-template-rows: repeat(2, 8px);

    gap: 4px;

}


.side-panel-trigger span {

    width: 8px;

    height: 8px;

    border: 1.5px solid currentColor;

    border-radius: 50%;

}


.side-panel-trigger:hover {

    transform: rotate(45deg);

}


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

.hotel-logo {

    display: flex;

    align-items: center;

    min-width: 190px;

}


.logo-mark {

    width: 28px;

    height: 49px;

    margin-right: 3px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    font-size: 48px;

    font-weight: 500;

    line-height: 1;

    color: var(--gold);

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

    border-radius: 50%;

}


.logo-content {

    display: flex;

    flex-direction: column;

    line-height: 1;

}


.logo-name {

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

    font-size: 30px;

    font-weight: 600;

    letter-spacing: -0.5px;

    color: var(--dark);

}


.logo-subtitle {

    margin-top: 3px;

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

    font-size: 6px;

    font-weight: 500;

    letter-spacing: 3px;

    color: var(--gold);

}


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

.desktop-navigation {

    height: 100%;

    display: flex;

    align-items: center;

}


.nav-menu {

    display: flex;

    align-items: center;

    gap: 30px;

}


.nav-item {

    position: relative;

    height: 100%;

    display: flex;

    align-items: center;

}


.nav-item > a {

    position: relative;

    display: flex;

    align-items: center;

    gap: 6px;

    height: 100%;

    color: var(--dark);

    font-size: 13px;

    font-weight: 500;

    letter-spacing: 1.2px;

    text-transform: uppercase;

}


.nav-item > a::after {

    content: "";

    position: absolute;

    bottom: 30px;

    left: 0;

    width: 0;

    height: 1px;

    background: var(--gold);

    transition: var(--transition);

}


.nav-item:hover > a,

.nav-item.active > a {

    color: var(--gold);

}


.nav-item:hover > a::after,

.nav-item.active > a::after {

    width: 100%;

}


.nav-item > a i {

    font-size: 8px;

    transition: transform 0.3s ease;

}


.nav-item:hover > a i {

    transform: rotate(180deg);

}


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

.dropdown-menu {

    position: absolute;

    top: calc(100% - 1px);

    left: 50%;

    min-width: 245px;

    padding: 13px 0;

    background: var(--primary-bg);

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

    box-shadow: 0 15px 35px rgba(59, 47, 47, 0.12);

    opacity: 0;

    visibility: hidden;

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

    transition:

        opacity 0.3s ease,

        visibility 0.3s ease,

        transform 0.3s ease;

}


.dropdown:hover .dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform: translate(-50%, 0);

}


.dropdown-menu li {

    position: relative;

}


.dropdown-menu li a {

    display: block;

    padding: 11px 24px;

    color: var(--dark);

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

    font-size: 17px;

    font-weight: 500;

    line-height: 1.2;

}


.dropdown-menu li a::before {

    content: "";

    display: inline-block;

    width: 0;

    height: 1px;

    margin-right: 0;

    vertical-align: middle;

    background: var(--gold);

    transition: var(--transition);

}


.dropdown-menu li a:hover {

    color: var(--gold);

    padding-left: 28px;

}


.dropdown-menu li a:hover::before {

    width: 15px;

    margin-right: 8px;

}


/* =========================================================
   NAV ACTIONS
========================================================= */

.nav-actions {

    min-width: 110px;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 25px;

}


.nav-icon {

    position: relative;

    width: 25px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--dark);

}


.nav-icon:hover {

    color: var(--gold);

}


/* SEARCH */

.search-trigger i {

    font-size: 18px;

}


/* FOUR DOT SIDE PANEL ICON */

.side-panel-trigger {

    display: grid;

    grid-template-columns: repeat(2, 8px);

    grid-template-rows: repeat(2, 8px);

    gap: 4px;

}


.side-panel-trigger span {

    width: 8px;

    height: 8px;

    border: 1.5px solid currentColor;

    border-radius: 50%;

}


.side-panel-trigger:hover {

    transform: rotate(45deg);

}


/* MOBILE BUTTON */

.mobile-menu-trigger {

    display: none;

    width: 30px;

    height: 25px;

    flex-direction: column;

    justify-content: space-between;

}


.mobile-menu-trigger span {

    display: block;

    width: 100%;

    height: 1px;

    background: var(--dark);

    transition: var(--transition);

}


.mobile-menu-trigger:hover span {

    background: var(--gold);

}


/* =========================================================
   SIDE CONTACT PANEL
========================================================= */

.side-contact-panel {

    position: fixed;

    top: 0;

    right: 0;

    width: 500px;

    max-width: 90vw;

    height: 100vh;

    padding: 70px 55px;

    overflow-y: auto;

    background: #fbf7ee;

    z-index: 2001;

    transform: translateX(100%);

    transition: transform 0.5s cubic-bezier(.77,0,.18,1);

}


.side-contact-panel.active {

    transform: translateX(0);

}


.side-panel-overlay {

    position: fixed;

    inset: 0;

    background: rgba(20, 16, 12, 0.55);

    z-index: 2000;

    opacity: 0;

    visibility: hidden;

    transition: var(--transition);

}


.side-panel-overlay.active {

    opacity: 1;

    visibility: visible;

}


.side-panel-close {

    position: absolute;

    top: 28px;

    right: 30px;

    width: 35px;

    height: 35px;

    color: var(--gold);

    font-size: 26px;

}


.side-panel-close:hover {

    transform: rotate(90deg);

}


.side-panel-logo {

    display: block;

    width: 210px;

    height: 65px;

    margin-bottom: 35px;

}
.side-panel-logo-image {

    display: block;

    width: 210px;

    height: 65px;

    object-fit: contain;

    object-position: left center;

}


.side-panel-description {

    max-width: 400px;

    margin-bottom: 25px;

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

    font-size: 19px;

    line-height: 1.55;

}


.side-social {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 32px;

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

    font-size: 16px;

}


.side-social a:hover {

    color: var(--gold);

}


.side-panel-line {

    width: 100%;

    height: 1px;

    margin: 25px 0 30px;

    background: var(--border);

}


.side-panel-content h3 {

    margin-bottom: 22px;

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

    font-size: 30px;

    font-weight: 500;

}


.side-contact-item {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-bottom: 20px;

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

    font-size: 18px;

    line-height: 1.45;

}


.side-contact-item i {

    width: 20px;

    margin-top: 5px;

    color: var(--gold);

}


.side-contact-item a:hover {

    color: var(--gold);

}


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

.side-panel-buttons {

    display: flex;

    gap: 18px;

}


.luxury-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 145px;

    min-height: 52px;

    padding: 12px 25px;

    background: var(--gold);

    color: var(--white);

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

    font-size: 17px;

    font-weight: 600;

    letter-spacing: 0.7px;

}


.luxury-button:hover {

    background: var(--gold-dark);

    color: var(--white);

}


.dark-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 125px;

    min-height: 52px;

    padding: 12px 25px;

    background: var(--dark);

    color: var(--white);

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

    font-size: 17px;

    font-weight: 600;

}


.dark-button:hover {

    background: #241e1e;

}


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

.search-overlay {

    position: fixed;

    inset: 0;

    z-index: 3000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    background: rgba(247, 242, 232, 0.98);

    opacity: 0;

    visibility: hidden;

    transition: var(--transition);

}


.search-overlay.active {

    opacity: 1;

    visibility: visible;

}


.search-close {

    position: absolute;

    top: 35px;

    right: 45px;

    font-size: 28px;

    color: var(--dark);

}


.search-close:hover {

    color: var(--gold);

    transform: rotate(90deg);

}


.search-box {

    width: min(850px, 90%);

}


.search-box > span {

    display: block;

    margin-bottom: 15px;

    color: var(--gold);

    font-size: 12px;

    letter-spacing: 4px;

    text-transform: uppercase;

}


.search-box form {

    position: relative;

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

}


.search-box input {

    width: 100%;

    padding: 15px 55px 15px 0;

    border: none;

    outline: none;

    background: transparent;

    color: var(--dark);

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

    font-size: 38px;

}


.search-box input::placeholder {

    color: #a99d8c;

}


.search-box form button {

    position: absolute;

    top: 50%;

    right: 0;

    transform: translateY(-50%);

    color: var(--gold);

    font-size: 20px;

}


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

.mobile-navigation {

    position: fixed;

    top: 0;

    right: 0;

    width: 420px;

    max-width: 90%;

    height: 100vh;

    padding: 30px;

    overflow-y: auto;

    background: var(--primary-bg);

    z-index: 2100;

    transform: translateX(100%);

    transition: transform 0.5s cubic-bezier(.77,0,.18,1);

}


.mobile-navigation.active {

    transform: translateX(0);

}


.mobile-menu-overlay {

    position: fixed;

    inset: 0;

    background: rgba(20, 16, 12, 0.55);

    z-index: 2050;

    opacity: 0;

    visibility: hidden;

    transition: var(--transition);

}


.mobile-menu-overlay.active {

    opacity: 1;

    visibility: visible;

}


.mobile-menu-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 25px;

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

}


.mobile-logo {

    display: flex;

    align-items: center;

}


.mobile-menu-close {

    width: 40px;

    height: 40px;

    color: var(--gold);

    font-size: 25px;

}


.mobile-menu-close:hover {

    transform: rotate(90deg);

}


.mobile-nav {

    padding: 25px 0;

}


.mobile-nav > ul > li {

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

}


.mobile-nav a {

    display: block;

    color: var(--dark);

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

    font-size: 20px;

    font-weight: 500;

}


.mobile-nav > ul > li > a {

    padding: 14px 0;

}


.mobile-nav a:hover {

    color: var(--gold);

}


.mobile-dropdown-title {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.mobile-dropdown-title > a {

    flex: 1;

    padding: 14px 0;

}


.mobile-dropdown-toggle {

    width: 45px;

    height: 45px;

    color: var(--gold);

}


.mobile-dropdown-toggle i {

    transition: transform 0.3s ease;

}


.mobile-dropdown.open
.mobile-dropdown-toggle i {

    transform: rotate(45deg);

}


.mobile-submenu {

    display: none;

    padding: 0 0 10px 18px;

}


.mobile-dropdown.open .mobile-submenu {

    display: block;

}


.mobile-submenu a {

    padding: 8px 0;

    font-size: 17px;

}


.mobile-booking {

    padding-top: 10px;

}


/* =========================================================
   TEMPORARY HOME
========================================================= */

.temporary-home {

    min-height: 65vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 80px 20px;

}


.temporary-home p:first-child {

    margin-bottom: 10px;

    color: var(--gold);

    font-size: 12px;

    letter-spacing: 5px;

}


.temporary-home h1 {

    margin-bottom: 15px;

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

    font-size: clamp(48px, 6vw, 85px);

    font-weight: 400;

    line-height: 1;

    color: var(--dark);

}


.temporary-home p:last-child {

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

    font-size: 20px;

}


/* =========================================================
   BODY LOCK WHEN OVERLAY OPEN
========================================================= */

body.menu-open,
body.panel-open,
body.search-open {

    overflow: hidden;

}
/* =========================================================
   PREVENT DESKTOP NAV TEXT WRAPPING
========================================================= */

@media (min-width: 1151px) {

    .desktop-navigation,
    .nav-menu,
    .nav-item,
    .nav-item > a {

        white-space: nowrap;

    }

}
/* =========================================================
   HERO SLIDER
========================================================= */

.hero-slider {

    position: relative;

    width: 100%;

    height: 100vh;

    min-height: 680px;

    overflow: hidden;

    background: #f5f0e6;
}


/* =========================================================
   SLIDES
========================================================= */

.hero-slides {

    position: relative;

    width: 100%;

    height: 100%;

}


.hero-slide {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    visibility: hidden;

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

}


.hero-slide.active {

    opacity: 1;

    visibility: visible;

    z-index: 1;

}


.hero-slide img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transform: scale(1.03);

    filter: brightness(1.08) saturate(0.85);

    transition:
        transform 7s ease,
        filter 0.5s ease;
}


.hero-slide.active img {

    transform: scale(1);

}


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

.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(250, 247, 239, 0.88) 0%,
            rgba(250, 247, 239, 0.72) 45%,
            rgba(250, 247, 239, 0.50) 100%
        );

}


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

.hero-content {

    position: absolute;

    z-index: 3;

    top: 54%;

    left: 50%;

    width: 90%;

    max-width: 1150px;

    text-align: center;

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

    color: #40372e;
}


.hero-subtitle {

    margin-bottom: 22px;

    font-size: 12px;

    font-weight: 500;

    letter-spacing: 5px;

    text-transform: uppercase;

    color: #8f7042;
}


.hero-content h1 {

    margin: 0 auto 28px;

    max-width: 1150px;

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

    font-size: clamp(48px, 5.2vw, 76px);

    font-weight: 400;

    line-height: 1.12;

    letter-spacing: -1px;

    color: #3d352e;
}


.hero-content p {

    margin: 0 auto 35px;

    max-width: 650px;

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

    font-size: 18px;

    line-height: 1.7;

    color: #5b5147;
}


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

.hero-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 195px;

    height: 52px;

    padding: 0 32px;

    background: #a48651;

    color: #fff;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

    transition: all 0.35s ease;
}
.hero-btn:hover {

    background: #0a0a0a;

    color: #f3f1ee;

    transform: translateY(-2px);

}


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

.hero-arrow {

    position: absolute;

    z-index: 5;

    top: 58%;

    width: 54px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(70, 60, 50, 0.45);

    border-radius: 50%;

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

    color: #40372e;

    cursor: pointer;

    transform: translateY(-50%);

    transition: all 0.3s ease;
}


.hero-arrow:hover {

    background: #a48651;

    border-color: #a48651;

    color: #fff;
}


.hero-prev {

    left: 35px;

}


.hero-next {

    right: 35px;

}


.hero-arrow i {

    font-size: 14px;

}


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

.hero-dots {

    position: absolute;

    z-index: 5;

    bottom: 40px;

    left: 50%;

    display: flex;

    align-items: center;

    gap: 10px;

    transform: translateX(-50%);

}


.hero-dot {

    width: 8px;

    height: 8px;

    padding: 0;

    border: 1px solid #766550;

    border-radius: 50%;

    background: transparent;

    cursor: pointer;

    transition: all 0.3s ease;
}


.hero-dot.active {

    width: 28px;

    border-radius: 20px;

    background: #a48651;

    border-color: #a48651;
}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.hero-scroll {

    position: absolute;

    z-index: 5;

    bottom: 35px;

    left: 35px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    color: #fff;

}


.hero-scroll span {

    font-size: 9px;

    letter-spacing: 3px;

    writing-mode: vertical-rl;

    text-transform: uppercase;

}


.scroll-line {

    width: 1px;

    height: 55px;

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

}
.main-navbar {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: transparent !important;
}
/* =========================================
   BOOKING / AVAILABILITY BAR
========================================= */

.booking-bar-section {
    position: relative;
    margin-top: -120px;
    z-index: 20;
    padding: 0 30px 40px;
}

.booking-bar {
    width: 100%;
    max-width: 1200px;
    min-height: 105px;

    margin: 0 auto;
    padding: 0;

    display: grid;

    /* 4 fields area + button */
    grid-template-columns: 1fr 1fr 1fr 1fr 220px;

    background: #fffdf7;

    box-shadow: 0 5px 25px rgba(70, 55, 35, 0.08);
}


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

.booking-field {
    position: relative;

    min-width: 0;
    min-height: 52px;

    padding: 10px 18px;

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

    gap: 6px;

    border-right: 1px solid #d8cdbd;
}


/* label */

.booking-label {
    font-family: Georgia, "Times New Roman", serif;

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

    color: #403a34;

    white-space: nowrap;
}


/* value */

.booking-value {
    font-family: Georgia, "Times New Roman", serif;

    font-size: 17px;

    color: #a78955;

    white-space: nowrap;
}


/* arrow */

.booking-arrow {
    font-size: 15px;

    color: #a78955;

    margin-left: 2px;

    position: relative;
    top: -1px;
}


/* =========================================
   CHECK AVAILABILITY BUTTON
========================================= */

.booking-action {
    grid-column: 5;
    grid-row: 1 / 3;

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

    padding: 14px 20px;
}


.booking-btn {
    width: 100%;
    height: 60px;

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

    background: #a78955;

    color: #fff;

    font-family: Georgia, "Times New Roman", serif;

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

    text-decoration: none;

    transition: all 0.3s ease;
}


.booking-btn:hover {
    background: #8f713f;
    color: #fff;
}
.booking-bar {
    width: 100%;
    max-width: 1200px;

    min-height: 104px;

    margin: 0 auto;
    padding: 0;

    display: grid;

    grid-template-columns: 1fr 1fr 1fr 1fr 220px;
    grid-template-rows: 1fr 1fr;

    background: #fffdf7;

    box-shadow: 0 5px 25px rgba(70, 55, 35, 0.08);
}


/* Check In */
.booking-field:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1;

    border-right: 1px solid #d8cdbd;
    border-bottom: 1px solid #d8cdbd;
}


/* Check Out */
.booking-field:nth-child(2) {
    grid-column: 3 / 5;
    grid-row: 1;

    border-bottom: 1px solid #d8cdbd;
}


/* Adults */
.booking-field:nth-child(3) {
    grid-column: 1 / 3;
    grid-row: 2;

    border-right: 1px solid #d8cdbd;
}


/* Children */
.booking-field:nth-child(4) {
    grid-column: 3 / 5;
    grid-row: 2;
}


/* Button */
.booking-action {
    grid-column: 5;
    grid-row: 1 / 3;

    padding: 14px 10px;

    display: flex;
    align-items: center;
    justify-content: center;
}
/* =========================================================
   STEP 5 - ROOMS & SUITES
========================================================= */

.rooms-section {
    position: relative;

    width: 100%;

    padding: 100px 30px 110px;

    background: #f7f2e8;

    overflow: hidden;
}


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

.rooms-container {
    width: 100%;

    max-width: 1280px;

    margin: 0 auto;
}


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

.rooms-heading {
    max-width: 760px;

    margin: 0 auto 55px;

    text-align: center;
}


.rooms-subtitle {
    margin-bottom: 12px;

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

    font-size: 11px;

    font-weight: 500;

    letter-spacing: 4px;

    text-transform: uppercase;

    color: #a18450;
}


.rooms-heading h2 {
    margin: 0 0 18px;

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

    font-size: 48px;

    font-weight: 400;

    line-height: 1.15;

    color: #40372e;
}


.rooms-heading p {
    max-width: 650px;

    margin: 0 auto;

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

    font-size: 16px;

    line-height: 1.8;

    color: #756b60;
}


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

.rooms-grid {
    display: grid;

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

    gap: 24px;

    align-items: start;
}


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

.room-card {
    position: relative;

    min-width: 0;

    background: #fffdf8;

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.room-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(70, 55, 35, 0.12);
}


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

.room-image {
    position: relative;

    width: 100%;

    height: 300px;

    overflow: hidden;

    background: #ddd;
}


.room-image img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.7s ease;
}


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


/* =========================================================
   PRICE
========================================================= */

.room-price {
    position: absolute;

    top: 16px;

    right: 16px;

    z-index: 3;

    padding: 9px 14px;

    background: #a78955;

    color: #fff;

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

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 0.5px;
}


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

.room-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(30, 25, 20, 0.72),
            rgba(30, 25, 20, 0.08) 55%,
            transparent 100%
        );

    opacity: 0;

    transition: opacity 0.35s ease;

    pointer-events: none;
}


.room-card:hover .room-image::after {
    opacity: 1;
}


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

.room-content {
    padding: 22px 22px 25px;

    background: #fffdf8;
}


.room-meta {
    margin-bottom: 9px;

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: #a18450;
}


.room-content h3 {
    margin: 0;

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

    font-size: 25px;

    font-weight: 400;

    line-height: 1.25;

    color: #40372e;
}


/* =========================================================
   VIEW DETAILS
========================================================= */

.room-details {
    display: inline-block;

    margin-top: 16px;

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

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: #806337;

    text-decoration: none;

    transition: color 0.3s ease;
}


.room-details:hover {
    color: #a78955;
}
/* =========================================
   ROOMS & SUITES SECTION
========================================= */

.rooms-section {
    width: 100%;
    padding: 105px 30px 115px;
    background: #f7f2e8;
}

.rooms-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.rooms-heading {
    max-width: 760px;
    margin: 0 auto 62px;
    text-align: center;
}

.rooms-subtitle {
    margin-bottom: 12px;
    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #a18450;
}

.rooms-heading h2 {
    margin: 0 0 17px;
    font-family: var(--heading-font);
    font-size: 45px;
    font-weight: 400;
    line-height: 1.2;
    color: #40372e;
}

.rooms-heading p {
    max-width: 650px;
    margin: 0 auto;
    font-family: var(--body-font);
    font-size: 14px;
    line-height: 1.8;
    color: #756b60;
}


/* =========================================
   ROOM GRID
========================================= */

.rooms-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}


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

.room-card {
    position: relative;
    width: 100%;
    background: #fffdf8;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.room-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(70, 55, 35, 0.13);
}


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

.room-image {
    position: relative;
    width: 100%;
    height: 235px;
    overflow: hidden;
    background: #e4e0da;
}

.room-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.7s ease;
}

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


/* =========================================
   PRICE
========================================= */

.room-price {
    position: absolute;
    top: 14px;
    right: 0;
    z-index: 3;

    padding: 9px 13px;

    background: #a78955;
    color: #ffffff;

    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
}


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

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

    background: linear-gradient(
        to top,
        rgba(35, 28, 20, 0.55),
        rgba(35, 28, 20, 0.05) 60%,
        transparent
    );

    opacity: 0;
    transition: opacity 0.35s ease;

    pointer-events: none;
}

.room-card:hover .room-image::after {
    opacity: 1;
}


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

.room-content {
    padding: 19px 20px 22px;
    background: #fffdf8;
}

.room-meta {
    margin-bottom: 8px;

    font-family: var(--body-font);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.5px;
    line-height: 1.4;

    text-transform: uppercase;
    color: #a18450;
}

.room-content h3 {
    margin: 0;

    font-family: var(--heading-font);
    font-size: 23px;
    font-weight: 400;
    line-height: 1.25;

    color: #40372e;
}

.room-details {
    display: inline-block;
    margin-top: 15px;

    font-family: var(--body-font);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.4px;

    text-transform: uppercase;
    text-decoration: none;

    color: #806337;

    transition: color 0.3s ease;
}

.room-details:hover {
    color: #a78955;
}


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

@media (max-width: 1100px) {

    .rooms-container {
        max-width: 950px;
    }

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

    .room-image {
        height: 280px;
    }
}


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

@media (max-width: 576px) {

    .rooms-section {
        padding: 70px 16px 80px;
    }

    .rooms-heading {
        margin-bottom: 40px;
    }

    .rooms-subtitle {
        font-size: 9px;
        letter-spacing: 3px;
    }

    .rooms-heading h2 {
        font-size: 36px;
        margin-bottom: 14px;
    }

    .rooms-heading p {
        font-size: 13px;
        line-height: 1.7;
    }

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

    .room-image {
        height: 270px;
    }

    .room-content {
        padding: 20px;
    }

    .room-content h3 {
        font-size: 24px;
    }

    .room-price {
        top: 13px;
        right: 0;
        padding: 8px 12px;
        font-size: 10px;
    }
}
.rooms-icon {
    width: 110px;
    height: 85px;
    margin: 0 auto 20px;

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

.rooms-icon img {
    width: 140px;
    height: 120px;
    object-fit: contain;
    display: block;

    /* Dark premium gold */
    filter:
        brightness(0)
        saturate(100%)
        invert(49%)
        sepia(24%)
        saturate(700%)
        hue-rotate(355deg)
        brightness(82%)
        contrast(88%);
}
.rooms-icon {
    width: 130px;
    height: 100px;
    margin: 0 auto 18px;
}

.rooms-icon img {
    width: 125px;
    height: 95px;
}
.rooms-heading {
    max-width: 760px;
    margin: 0 auto 62px;
    text-align: center;
}

.rooms-heading h2 {
    margin: 0 0 17px;
    font-family: var(--heading-font);
    font-size: 45px;
    font-weight: 400;
    line-height: 1.2;
    color: #40372e;
}
.rooms-icon {
    width: 130px;
    height: 95px;
    margin: 0 auto 20px;

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

.rooms-icon img {
    width: 125px;
    height: 95px;
    object-fit: contain;
    display: block;

    /* GOLD */
    filter:
        sepia(1)
        saturate(5)
        hue-rotate(355deg)
        brightness(0.85)
        contrast(1.1);
}
.rooms-icon {
    width: 160px;
    height: 120px;
    margin: 0 auto 15px;
}

.rooms-icon img {
    width: 155px;
    height: 115px;
}
/* =========================================
   ROOMS HEADING ICON
========================================= */

.rooms-icon {
    width: 100%;
    height: auto;
    margin: 0 auto 18px;

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

.rooms-icon i {
    display: block;

    font-size: 52px !important;
    line-height: 1 !important;

    color: #b08a45 !important;

    margin: 0 !important;
    padding: 0 !important;
}
.rooms-section {
    width: 100%;
    padding: 55px 30px 100px;
    background: #f7f2e8;
}
.rooms-section {
    position: relative;
    width: 100%;
    padding: 55px 30px 100px;
    background: #f7f2e8;
    overflow: hidden;
}
.rooms-section {
    position: relative;
    width: 100%;
    padding: 55px 30px 100px;
    overflow: hidden;
    background: #f7f2e8;
}

.rooms-section::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: url("../images/room/design.avif");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    opacity: 0.08;
    pointer-events: none;
}

.rooms-container {
    position: relative;
    z-index: 2;
}
/* =========================================
   HEADER - TRANSPARENT ON HERO
========================================= */

.site-header {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;

    background: transparent !important;

    transition:
        background-color 0.35s ease,
        box-shadow 0.35s ease,
        backdrop-filter 0.35s ease;
}


/* =========================================
   HEADER - AFTER SCROLL
========================================= */

.site-header.header-scrolled {
    position: fixed !important;
    top: 0;
    left: 0;

    background: #f7f2e8 !important;

    box-shadow: 0 2px 18px rgba(50, 40, 30, 0.10);

    backdrop-filter: none !important;
}


/* Main navbar after scroll */
.site-header.header-scrolled .main-navbar {
    background: #f7f2e8 !important;
}


/* Top bar after scroll */
.site-header.header-scrolled .top-bar {
    background: #f7f2e8 !important;
}


/* Navigation text after scroll */
.site-header.header-scrolled .desktop-navigation a {
    color: #40372e !important;
}


/* Dropdown arrow */
.site-header.header-scrolled .desktop-navigation a i {
    color: #40372e !important;
}


/* Search icon */
.site-header.header-scrolled .nav-icon {
    color: #40372e !important;
}


/* Side panel dots */
.site-header.header-scrolled .side-panel-trigger span {
    background: #40372e !important;
}


/* Mobile hamburger */
.site-header.header-scrolled .mobile-menu-trigger span {
    background: #40372e !important;
}


/* Top bar text */
.site-header.header-scrolled .top-bar a,
.site-header.header-scrolled .top-bar span {
    color: #40372e !important;
}
/* yusuf */
/* =========================================
   HEADER FULL WIDTH
========================================= */

.site-header {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.site-header .top-bar,
.site-header .main-navbar {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}
/* =========================================
   SIDE PANEL - FULL SCREEN OVER HEADER
========================================= */

.side-panel-overlay {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    z-index: 10000 !important;
}


.side-contact-panel {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    height: 100vh !important;

    margin: 0 !important;

    z-index: 10001 !important;
}

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

.amenities-section {
    position: relative;
    width: 100%;
    padding: 95px 30px 70px;
    background: #f7f2e8;
    overflow: hidden;
}

.amenities-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}


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

.amenities-heading {
    max-width: 650px;
    margin: 0 auto 55px;
    text-align: center;
}

.amenities-subtitle {
    margin-bottom: 10px;

    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 4px;

    color: #a18450;
    text-transform: uppercase;
}

.amenities-heading h2 {
    margin: 0 0 15px;

    font-family: var(--heading-font);
    font-size: 44px;
    font-weight: 400;
    line-height: 1.2;

    color: #40372e;
}

.amenities-heading p {
    max-width: 560px;
    margin: 0 auto;

    font-family: var(--body-font);
    font-size: 13px;
    line-height: 1.7;

    color: #756b60;
}


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

.amenities-grid {
    display: grid;

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

    column-gap: 55px;
    row-gap: 48px;
}


/* =========================================
   AMENITY ITEM
========================================= */

.amenity-item {
    position: relative;

    min-height: 82px;

    display: grid;

    grid-template-columns: 65px 1fr;

    column-gap: 18px;

    align-items: center;
}


/* =========================================
   LARGE BACKGROUND NUMBER
========================================= */

.amenity-number {
    position: absolute;

    top: -8px;
    right: 0;

    z-index: 0;

    font-family: var(--heading-font);
    font-size: 58px;
    font-weight: 400;

    line-height: 1;

    color: rgba(170, 145, 100, 0.08);

    pointer-events: none;
}


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

.amenity-icon {
    position: relative;

    z-index: 2;

    width: 65px;
    height: 65px;

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

.amenity-icon i {
    display: block;

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

    font-size: 40px !important;
    line-height: 1 !important;

    color: #b08a45 !important;
}


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

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

.amenity-content h3 {
    margin: 0 0 7px;

    font-family: var(--heading-font);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;

    color: #40372e;
}

.amenity-content p {
    max-width: 230px;

    margin: 0;

    font-family: var(--body-font);
    font-size: 11px;
    line-height: 1.6;

    color: #756b60;
}


/* =========================================
   VIEW ALL BUTTON
========================================= */

.amenities-button-wrap {
    display: flex;
    justify-content: center;

    margin-top: 48px;
}

.amenities-button {
    display: inline-flex;

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

    min-width: 100px;
    height: 40px;

    padding: 0 22px;

    background: #a78955;
    color: #ffffff;

    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;

    text-decoration: none;
    text-transform: none;

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

.amenities-button:hover {
    background: #8f713d;
    transform: translateY(-2px);
}
/* =========================================
   AMENITIES SECTION
========================================= */

.amenities-section {
    position: relative;
    width: 100%;
    padding: 95px 30px 75px;
    background: #f7f2e8;
    overflow: hidden;
}

.amenities-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}


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

.amenities-heading {
    max-width: 700px;
    margin: 0 auto 58px;
    text-align: center;
}

.amenities-subtitle {
    display: block !important;
    margin-bottom: 12px;

    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 4px;
    line-height: 1.4;

    color: #a78955 !important;
    text-align: center;
    text-transform: uppercase;
}

.amenities-heading h2 {
    margin: 0 0 16px;

    font-family: var(--heading-font);
    font-size: 46px;
    font-weight: 400;
    line-height: 1.2;

    color: #40372e;
}

.amenities-heading p {
    max-width: 620px;
    margin: 0 auto;

    font-family: var(--body-font);
    font-size: 14px;
    line-height: 1.75;

    color: #756b60;
}


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

.amenities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    column-gap: 55px;
    row-gap: 50px;
}


/* =========================================
   AMENITY ITEM
========================================= */

.amenity-item {
    position: relative;

    min-height: 90px;

    display: grid;
    grid-template-columns: 75px 1fr;
    column-gap: 20px;

    align-items: center;
}


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

.amenity-number {
    position: absolute;

    top: -10px;
    right: 0;

    z-index: 0;

    font-family: var(--heading-font);
    font-size: 68px;
    font-weight: 400;
    line-height: 1;

    color: rgba(170, 145, 100, 0.08);

    pointer-events: none;
}


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

.amenity-icon {
    position: relative;
    z-index: 2;

    width: 75px;
    height: 75px;

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

.amenity-icon i {
    display: block;

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

    font-size: 48px !important;
    line-height: 1 !important;

    color: #b08a45 !important;
}


/* =========================================
   AMENITY CONTENT
========================================= */

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

.amenity-content h3 {
    margin: 0 0 9px;

    font-family: var(--heading-font);
    font-size: 27px;
    font-weight: 400;
    line-height: 1.2;

    color: #40372e;
}

.amenity-content p {
    max-width: 250px;

    margin: 0;

    font-family: var(--body-font);
    font-size: 13px;
    line-height: 1.65;

    color: #756b60;
}


/* =========================================
   VIEW ALL BUTTON
========================================= */

.amenities-button-wrap {
    display: flex;
    justify-content: center;

    margin-top: 52px;
}

.amenities-button {
    display: inline-flex;

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

    min-width: 105px;
    height: 42px;

    padding: 0 24px;

    background: #a78955;
    color: #ffffff;

    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;

    text-decoration: none;
    text-transform: none;

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

.amenities-button:hover {
    background: #8f713d;
    transform: translateY(-2px);
}
/* =========================================
   ABOUT PROPERTY SECTION
========================================= */

.about-property-section {
    position: relative;
    width: 100%;

    padding: 0;

    background: #f7f2e8;

    overflow: hidden;
}


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

.about-property-container {
    width: 100%;
    max-width: 1350px;

    min-height: 650px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 29% 42% 29%;

    align-items: stretch;
}


/* =========================================
   IMAGE COLUMNS
========================================= */

.about-property-left,
.about-property-right {
    position: relative;

    min-height: 650px;

    overflow: hidden;
}


.about-property-image {
    width: 100%;
    height: 100%;

    overflow: hidden;
}


.about-property-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.8s ease;
}


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


/* LEFT IMAGE */

.about-property-left .about-property-image {
    height: 650px;
}


/* RIGHT IMAGE */

.about-property-right .about-property-image {
    height: 350px;

    margin-top: 210px;
}


/* =========================================
   CENTER CONTENT
========================================= */

.about-property-center {
    position: relative;

    padding: 80px 70px 70px;

    background: #f7f2e8;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


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

.about-property-subtitle {
    margin-bottom: 14px;

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

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 4px;

    color: #a78955;

    text-transform: uppercase;
}


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

.about-property-center h2 {
    margin: 0 0 25px;

    max-width: 500px;

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

    font-size: 45px;

    font-weight: 400;

    line-height: 1.12;

    color: #40372e;
}


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

.about-property-description {
    max-width: 480px;

    margin: 0 0 40px;

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

    font-size: 13px;

    line-height: 1.8;

    color: #756b60;
}


/* =========================================
   STATS GRID
========================================= */

.about-property-stats {
    width: 100%;

    max-width: 440px;

    display: grid;

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

    gap: 1px;

    background: #e4dac9;
}


/* =========================================
   STAT BOX
========================================= */

.property-stat {
    min-height: 105px;

    padding: 20px;

    background: rgba(255, 253, 248, 0.55);

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;
}


.property-stat strong {
    margin-bottom: 7px;

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

    font-size: 35px;

    font-weight: 400;

    line-height: 1;

    color: #a78955;
}


.property-stat span {
    font-family: var(--body-font);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 2.5px;

    color: #51483f;

    text-transform: uppercase;
}
/* =========================================
   ABOUT PROPERTY SECTION
========================================= */

.about-property-section {
    position: relative;
    width: 100%;

    background: #f7f2e8;

    overflow: hidden;
}


.about-property-container {
    width: 100%;
    max-width: 1350px;

    min-height: 720px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 29% 42% 29%;

    align-items: stretch;
}


/* =========================================
   LEFT IMAGE
========================================= */

.about-property-left {
    position: relative;

    min-height: 720px;

    overflow: hidden;
}


.about-property-left .about-property-image {
    width: 100%;
    height: 720px;

    overflow: hidden;
}


.about-property-left img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.8s ease;
}


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


/* =========================================
   CENTER CONTENT
========================================= */

.about-property-center {
    position: relative;

    padding: 90px 65px 80px;

    background: #f7f2e8;

    display: flex;

    flex-direction: column;

    justify-content: center;

    overflow: hidden;
}


/* subtle decorative background */

.about-property-center::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 560px;
    height: 560px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(167, 137, 85, 0.045) 0%,
            rgba(167, 137, 85, 0.02) 48%,
            transparent 72%
        );

    pointer-events: none;
}


.about-property-center > * {
    position: relative;

    z-index: 2;
}


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

.about-property-subtitle {
    margin-bottom: 18px;

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

    font-size: 12px;

    font-weight: 500;

    letter-spacing: 5px;

    line-height: 1.4;

    color: #a78955;

    text-transform: uppercase;
}


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

.about-property-center h2 {
    max-width: 560px;

    margin: 0 0 28px;

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

    font-size: 56px;

    font-weight: 400;

    line-height: 1.08;

    color: #40372e;
}


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

.about-property-description {
    max-width: 510px;

    margin: 0 0 48px;

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

    font-size: 16px;

    font-weight: 400;

    line-height: 1.85;

    color: #756b60;
}


/* =========================================
   STATS
========================================= */

.about-property-stats {
    width: 100%;

    max-width: 500px;

    display: grid;

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

    gap: 1px;

    background: #dfd4c2;
}


.property-stat {
    min-height: 125px;

    padding: 22px 25px;

    background: rgba(255, 253, 248, 0.58);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;
}


.property-stat strong {
    margin-bottom: 9px;

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

    font-size: 43px;

    font-weight: 400;

    line-height: 1;

    color: #a78955;
}


.property-stat span {
    font-family: var(--body-font);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 3px;

    line-height: 1.4;

    color: #51483f;

    text-transform: uppercase;
}


/* =========================================
   RIGHT COLUMN
========================================= */

.about-property-right {
    position: relative;

    min-height: 720px;

    padding: 90px 0 0;

    background: #f7f2e8;

    overflow: hidden;
}


/* =========================================
   RIGHT TOP TEXT
========================================= */

.about-property-right-content {
    width: 100%;

    padding: 0 65px 0 0;
}


.right-property-text {
    max-width: 430px;

    margin: 0 0 32px;

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

    font-size: 16px;

    font-weight: 400;

    line-height: 1.85;

    color: #756b60;
}


/* =========================================
   RIGHT HIGHLIGHT
========================================= */

.right-property-highlight {
    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 48px;
}


.highlight-number {
    display: flex;

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

    width: 64px;
    height: 64px;

    border-radius: 50%;

    background: #a78955;

    color: #fff;

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

    font-size: 27px;

    font-weight: 400;
}


.highlight-text {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.highlight-text strong {
    font-family: var(--heading-font);

    font-size: 18px;

    font-weight: 400;

    line-height: 1.3;

    color: #40372e;
}


.highlight-text span {
    font-family: var(--body-font);

    font-size: 11px;

    letter-spacing: 1px;

    color: #8a7c6c;
}


/* =========================================
   RIGHT IMAGE
========================================= */

.about-property-right .right-image {
    width: 100%;

    height: 370px;

    overflow: hidden;
}


.about-property-right .right-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.8s ease;
}


.about-property-right:hover .right-image img {
    transform: scale(1.04);
}
/* =========================================
   RIGHT IMAGE GAP FIX
========================================= */


/* DESKTOP */

@media (min-width: 769px) {

    .about-property-right {
        height: 720px !important;
        min-height: 720px !important;

        padding-top: 45px !important;

        display: flex !important;
        flex-direction: column !important;

        justify-content: flex-start !important;
    }

    .about-property-right-content {
        flex-shrink: 0 !important;

        padding-right: 55px !important;

        margin-bottom: 25px !important;
    }

    .right-property-text {
        margin-bottom: 20px !important;
    }

    .right-property-highlight {
        margin-bottom: 0 !important;
    }

    .about-property-right .right-image {
        width: 100% !important;
        height: 390px !important;

        margin-top: 0 !important;

        flex-shrink: 0 !important;
    }
}


/* TABLET + MOBILE */

@media (max-width: 768px) {

    .about-property-right {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        padding-top: 45px !important;

        display: flex !important;
        flex-direction: column !important;

        justify-content: flex-start !important;
    }

    .about-property-right-content {
        width: 100% !important;

        padding: 0 30px !important;

        margin-bottom: 25px !important;
    }

    .right-property-text {
        margin-bottom: 20px !important;
    }

    .right-property-highlight {
        margin-bottom: 0 !important;
    }

    .about-property-right .right-image {
        width: 100% !important;

        height: 400px !important;

        margin-top: 0 !important;

        flex-shrink: 0 !important;
    }
}


/* MOBILE */

@media (max-width: 576px) {

    .about-property-right {
        height: auto !important;
        min-height: 0 !important;

        padding-top: 35px !important;
    }

    .about-property-right-content {
        padding: 0 20px !important;

        margin-bottom: 25px !important;
    }

    .right-property-text {
        margin-bottom: 18px !important;
    }

    .right-property-highlight {
        margin-bottom: 0 !important;
    }

    .about-property-right .right-image {
        height: 300px !important;

        margin-top: 0 !important;
    }
}
/* =========================================
   DESKTOP - RIGHT IMAGE BOTTOM ALIGNMENT
========================================= */

@media (min-width: 769px) {

    .about-property-right {
        position: relative !important;
        height: 720px !important;
        min-height: 720px !important;

        padding-top: 45px !important;

        display: block !important;
        overflow: hidden !important;
    }

    .about-property-right-content {
        position: relative !important;
        z-index: 2 !important;

        margin-bottom: 0 !important;
    }

    .about-property-right .right-image {
        position: absolute !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100% !important;
        height: 390px !important;

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

        overflow: hidden !important;
    }

    .about-property-right .right-image img {
        width: 100% !important;
        height: 100% !important;

        display: block !important;

        object-fit: cover !important;
    }
}
/* =========================================
   HIGHLIGHTED FACILITIES SECTION
========================================= */

.highlighted-section {
    position: relative;
    width: 100%;
    padding: 110px 30px 100px;
    background: #3e3a32;
    overflow: hidden;
}

.highlighted-container {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
}


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

.highlighted-heading {
    max-width: 850px;
    margin: 0 auto 55px;
    text-align: center;
}

.highlighted-subtitle {
    margin-bottom: 14px;

    font-family: var(--body-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;

    color: #c19a52;
}

.highlighted-heading h2 {
    margin: 0 0 18px;

    font-family: var(--heading-font);
    font-size: 52px;
    font-weight: 400;
    line-height: 1.15;

    color: #fffdf7;
}

.highlighted-heading p {
    max-width: 720px;
    margin: 0 auto;

    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.8;

    color: #ddd5c7;
}


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

.highlighted-cards {
    width: 100%;
    height: 430px;

    display: flex;
    gap: 10px;

    overflow: hidden;
}

.highlighted-card {
    position: relative;

    height: 430px;
    min-width: 0;

    flex: 1 1 0;

    overflow: hidden;
    cursor: pointer;

    transition:
        flex 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}


/* HOVER EXPAND */

.highlighted-card:hover {
    flex: 1.8 1 0;
}

.highlighted-cards:hover .highlighted-card:not(:hover) {
    flex: 0.85 1 0;
}


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

.highlighted-card img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.8s ease;
}

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


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

.highlighted-card .amenity-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            to top,
            rgba(25, 22, 18, 0.90) 0%,
            rgba(25, 22, 18, 0.35) 52%,
            rgba(25, 22, 18, 0.05) 100%
        );
}


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

.highlighted-card .amenity-number {
    position: absolute;

    top: 22px;
    right: 25px;

    z-index: 2;

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

    font-size: 58px;
    font-weight: 400;
    line-height: 1;

    color: rgba(255, 255, 255, 0.20);
}


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

.highlighted-card .amenity-content {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 28px;

    z-index: 3;
}

.highlighted-card .amenity-content h3 {
    margin: 0 0 10px;

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

    font-size: 28px;
    font-weight: 400;
    line-height: 1.2;

    color: #fff;
}

.highlighted-card .amenity-content p {
    max-width: 520px;

    margin: 0 0 18px;

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

    font-size: 14px;
    line-height: 1.7;

    color: #eee7dc;

    opacity: 0;
    transform: translateY(12px);

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

.highlighted-card:hover .amenity-content p {
    opacity: 1;
    transform: translateY(0);
}

.highlighted-card .amenity-content a {
    display: inline-block;

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

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

    letter-spacing: 1.8px;
    text-transform: uppercase;

    color: #d0ae70;
    text-decoration: none;

    opacity: 0;
    transform: translateY(10px);

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

.highlighted-card:hover .amenity-content a {
    opacity: 1;
    transform: translateY(0);
}
/* =========================================
   HIGHLIGHTED SECTION - MOBILE
========================================= */

@media (max-width: 768px) {

    .highlighted-section {
        padding: 75px 16px 70px;
    }

    .highlighted-heading {
        margin-bottom: 35px;
    }

    .highlighted-subtitle {
        font-size: 10px;
        letter-spacing: 3px;
    }

    .highlighted-heading h2 {
        font-size: 38px;
        line-height: 1.2;
    }

    .highlighted-heading p {
        font-size: 14px;
        line-height: 1.7;
    }

    .highlighted-cards {
        height: auto;

        display: flex;
        flex-direction: column;

        gap: 15px;

        overflow: visible;
    }

    .highlighted-card,
    .highlighted-card:hover,
    .highlighted-cards:hover .highlighted-card:not(:hover) {
        width: 100%;
        height: 330px;

        flex: none;
    }

    .highlighted-card .amenity-number {
        top: 18px;
        right: 20px;

        font-size: 48px;
    }

    .highlighted-card .amenity-content {
        left: 22px;
        right: 22px;
        bottom: 22px;
    }

    .highlighted-card .amenity-content h3 {
        font-size: 26px;
    }

    .highlighted-card .amenity-content p {
        font-size: 13px;

        opacity: 1;
        transform: none;
    }

    .highlighted-card .amenity-content a {
        opacity: 1;
        transform: none;
    }
}
/* =========================================
   NEARBY LOCATIONS
========================================= */

.nearby-section {
    position: relative;
    width: 100%;

    padding: 95px 35px 90px;

    background: #f8f3e8;

    overflow: hidden;
}


.nearby-container {
    width: 100%;
    max-width: 1320px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 48% 52%;

    align-items: center;

    gap: 20px;
}


/* =========================================
   LEFT CONTENT
========================================= */

.nearby-content {
    width: 100%;
}


.nearby-subtitle {
    margin-bottom: 10px;

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

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

    letter-spacing: 4px;

    text-transform: uppercase;

    color: #a78345;
}


.nearby-content h2 {
    margin: 0 0 12px;

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

    font-size: 48px;
    font-weight: 400;

    line-height: 1.15;

    color: #40372e;
}


.nearby-intro {
    max-width: 620px;

    margin: 0 0 28px;

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

    font-size: 15px;
    line-height: 1.7;

    color: #756b60;
}


/* =========================================
   LOCATION LIST
========================================= */

.nearby-list {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 12px;
}


.nearby-item {
    position: relative;

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

    display: grid;

    grid-template-columns: 120px 1fr;

    background: transparent;

    border: 1px solid transparent;

    transition:
        border-color 0.35s ease,
        background 0.35s ease,
        transform 0.35s ease;
}


.nearby-item:hover,
.nearby-item.active {
    border-color: #b08b4c;

    background: #fbf7ee;
}


.nearby-image {
    width: 120px;
    height: 110px;

    overflow: hidden;
}


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

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}


.nearby-item:hover .nearby-image img {
    transform: scale(1.06);
}


/* =========================================
   LOCATION INFO
========================================= */

.nearby-info {
    padding: 12px 18px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.nearby-distance {
    display: inline-block;

    width: fit-content;

    margin-bottom: 5px;

    padding: 3px 7px;

    background: #a78955;

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

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

    letter-spacing: 0.3px;

    color: #fff;
}


.nearby-info h3 {
    margin: 0 0 5px;

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

    font-size: 25px;
    font-weight: 400;

    line-height: 1.2;

    color: #40372e;
}


.nearby-info p {
    max-width: 430px;

    margin: 0;

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

    font-size: 12px;
    line-height: 1.55;

    color: #756b60;
}


/* =========================================
   RIGHT MAP
========================================= */

.nearby-map {
    width: 100%;

    min-height: 500px;

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


.nearby-map-circle {
    position: relative;

    width: 480px;
    height: 480px;

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

    border-radius: 50%;

    overflow: hidden;

    border: 1px solid rgba(167, 137, 85, 0.45);

    background:
        radial-gradient(
            circle at center,
            rgba(193, 168, 120, 0.20),
            rgba(248, 243, 232, 0.65) 65%,
            #f8f3e8 100%
        );

    box-shadow:
        inset 0 0 70px rgba(255,255,255,0.65);
}


/* subtle map-like pattern */

.map-pattern {
    position: absolute;

    inset: 0;

    opacity: 0.30;

    background-image:
        linear-gradient(
            30deg,
            transparent 46%,
            rgba(167,137,85,0.18) 47%,
            transparent 48%
        ),
        linear-gradient(
            120deg,
            transparent 46%,
            rgba(167,137,85,0.16) 47%,
            transparent 48%
        );

    background-size: 85px 85px;

    transform: rotate(12deg) scale(1.3);
}


/* map pin */

.map-pin {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 52px;
    height: 52px;

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

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

    border-radius: 50%;

    background: #a78955;

    color: #fff;

    box-shadow:
        0 8px 20px rgba(70,55,35,0.18);
}


.map-pin i {
    font-size: 20px;
}
/* =========================================
   NEARBY LOCATIONS - FINAL DESIGN
========================================= */

.nearby-section {
    position: relative;
    width: 100%;
    padding: 85px 50px 85px;
    background: #f8f3e8;
    overflow: hidden;
}

.nearby-container {
    position: relative;
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 50% 50%;
    align-items: center;
}


/* =========================================
   LEFT SIDE
========================================= */

.nearby-content {
    position: relative;
    width: 100%;
    padding-right: 48px;
}

.nearby-content::after {
    content: "";
    position: absolute;

    top: 70px;
    right: 0;

    width: 4px;
    height: 420px;

    background: #a78955;
}


/* HEADING */

.nearby-subtitle {
    margin-bottom: 10px;

    font-family: var(--body-font);
    font-size: 12px;
    font-weight: 600;

    letter-spacing: 4px;
    text-transform: uppercase;

    color: #a78955;
}

.nearby-content h2 {
    margin: 0 0 12px;

    font-family: var(--heading-font);
    font-size: 48px;
    font-weight: 400;
    line-height: 1.15;

    color: #40372e;
}

.nearby-intro {
    max-width: 600px;

    margin: 0 0 28px;

    font-family: var(--body-font);
    font-size: 15px;
    line-height: 1.7;

    color: #756b60;
}


/* =========================================
   LOCATION LIST
========================================= */

.nearby-list {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 32px;
}


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

.nearby-item {
    position: relative;

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

    display: grid;
    grid-template-columns: 220px 1fr;

    background: transparent;

    border: 1px solid transparent;

    transition:
        border-color 0.35s ease,
        background 0.35s ease,
        transform 0.35s ease;
}


/* ACTIVE / HOVER */

.nearby-item:hover,
.nearby-item.active {
    border: 1px solid #a78955;
    background: #fbf7ee;
}


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

.nearby-image {
    width: 220px;
    height: 185px;

    overflow: hidden;
}

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

    display: block;

    object-fit: cover;

    transition: transform 0.6s ease;
}

.nearby-item:hover .nearby-image img {
    transform: scale(1.06);
}


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

.nearby-info {
    padding: 25px 28px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.nearby-distance {
    display: inline-block;

    width: fit-content;

    margin-bottom: 12px;

    padding: 5px 9px;

    background: #a78955;

    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 600;

    line-height: 1;

    color: #fff;
}


.nearby-info h3 {
    margin: 0 0 12px;

    font-family: var(--heading-font);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.15;

    color: #40372e;
}


.nearby-info p {
    max-width: 360px;

    margin: 0;

    font-family: var(--body-font);
    font-size: 14px;
    line-height: 1.65;

    color: #756b60;
}


/* =========================================
   RIGHT MAP AREA
========================================= */

.nearby-map {
    width: 100%;
    min-height: 520px;

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

    padding-left: 40px;
}


.nearby-map-circle {
    position: relative;

    width: 470px;
    height: 470px;

    border-radius: 50%;

    overflow: hidden;

    border: 1px solid rgba(167, 137, 85, 0.5);

    background:
        radial-gradient(
            circle at center,
            rgba(184, 158, 108, 0.20) 0%,
            rgba(248, 243, 232, 0.72) 62%,
            #f8f3e8 100%
        );

    box-shadow:
        inset 0 0 75px rgba(255,255,255,0.7);
}


/* MAP PATTERN */

.map-pattern {
    position: absolute;

    inset: -20%;

    opacity: 0.32;

    background-image:
        linear-gradient(
            35deg,
            transparent 47%,
            rgba(167,137,85,0.18) 48%,
            transparent 49%
        ),
        linear-gradient(
            125deg,
            transparent 47%,
            rgba(167,137,85,0.16) 48%,
            transparent 49%
        );

    background-size: 90px 90px;

    transform: rotate(8deg);
}


/* MAP PIN */

.map-pin {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 54px;
    height: 54px;

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

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

    border-radius: 50%;

    background: #a78955;

    color: #fff;

    box-shadow:
        0 8px 22px rgba(70,55,35,0.20);
}

.map-pin i {
    font-size: 21px;
}
.nearby-map-circle {
    position: relative;
    width: 470px;
    height: 470px;

    border-radius: 50%;
    overflow: hidden;

    border: 1px solid rgba(167, 137, 85, 0.55);

    background: #f8f3e8;

    box-shadow:
        inset 0 0 75px rgba(255,255,255,0.65),
        0 8px 25px rgba(70,55,35,0.08);
}


/* REAL GOOGLE MAP */

.nearby-map-circle iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;

    transform: scale(1.02);
}


/* CLICKABLE LAYER */

.map-click-layer {
    position: absolute;

    inset: 0;

    z-index: 4;

    display: block;

    cursor: pointer;

    text-decoration: none;
}


/* GOLDEN PIN */

.map-pin {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 54px;
    height: 54px;

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

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

    border-radius: 50%;

    background: #a78955;

    color: #fff;

    box-shadow:
        0 8px 22px rgba(70,55,35,0.22);

    z-index: 5;

    pointer-events: none;
}

.map-pin i {
    font-size: 21px;
}
/* =========================================
   TESTIMONIAL SECTION
========================================= */

.testimonial-section {
    position: relative;

    width: 100%;

    min-height: 500px;

    padding: 90px 40px 85px;

    background: #f8f3e8;

    overflow: hidden;
}


/* =========================================
   BACKGROUND PATTERN
========================================= */

.testimonial-pattern {
    position: absolute;

    top: 0;
    left: 50%;

    width: 720px;
    height: 720px;

    transform: translateX(-50%);

    opacity: 0.055;

    pointer-events: none;

    background-image:
        radial-gradient(
            circle at center,
            transparent 0 22%,
            #a78955 22.5% 23%,
            transparent 23.5% 32%,
            #a78955 32.5% 33%,
            transparent 33.5% 43%,
            #a78955 43.5% 44%,
            transparent 44.5%
        );

    border-radius: 50%;
}


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

.testimonial-container {
    position: relative;

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    z-index: 2;
}


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

.testimonial-heading {
    text-align: center;

    margin-bottom: 45px;
}

.testimonial-subtitle {
    margin-bottom: 12px;

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

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

    letter-spacing: 5px;

    color: #a78955;
}

.testimonial-heading h2 {
    margin: 0;

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

    font-size: 52px;
    font-weight: 400;

    line-height: 1.15;

    color: #40372e;
}


/* =========================================
   SLIDER AREA
========================================= */

.testimonial-slider {
    position: relative;

    width: 100%;

    display: flex;

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


/* =========================================
   TESTIMONIAL CONTENT
========================================= */

.testimonial-content {
    width: 100%;
    max-width: 900px;

    text-align: center;

    padding: 0 70px;
}


/* =========================================
   STARS
========================================= */

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

    font-family: Arial, sans-serif;

    font-size: 22px;

    letter-spacing: 4px;

    color: #a78955;
}


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

.testimonial-text {
    max-width: 850px;

    margin: 0 auto 28px;

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

    font-size: 22px;

    font-weight: 400;

    line-height: 1.8;

    color: #40372e;
}


/* =========================================
   AUTHOR
========================================= */

.testimonial-author {
    display: flex;

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

    gap: 8px;

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

    font-size: 14px;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.testimonial-author strong {
    font-weight: 600;

    color: #40372e;
}

.testimonial-author span {
    color: #a78955;
}


/* =========================================
   ARROWS
========================================= */

.testimonial-arrow {
    position: absolute;

    top: 50%;

    width: 42px;
    height: 42px;

    transform: translateY(-50%);

    display: flex;

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

    border: none;

    background: transparent;

    color: #a78955;

    font-size: 22px;

    cursor: pointer;

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

.testimonial-arrow:hover {
    color: #806337;
}

.testimonial-prev {
    left: 15px;
}

.testimonial-next {
    right: 15px;
}

.testimonial-prev:hover {
    transform: translate(-4px, -50%);
}

.testimonial-next:hover {
    transform: translate(4px, -50%);
}
/* =========================================
   OFFER MARQUEE
========================================= */

.offer-marquee {
    position: relative;

    width: 100%;
    max-width: none;

    margin: 0;

    padding: 14px 0;

    overflow: hidden;

    background: #a78955;

    color: #fff;

    white-space: nowrap;
}

.offer-track {
    display: flex;
    align-items: center;

    width: max-content;

    animation: offerScroll 28s linear infinite;
}

.offer-item {
    display: flex;
    align-items: center;

    gap: 24px;

    margin-right: 38px;

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

    font-size: 20px;
    font-weight: 400;

    letter-spacing: 0.3px;

    color: #fff;
}

.offer-item span {
    font-family: Arial, sans-serif;

    font-size: 23px;

    color: #fff;
}


/* CONTINUOUS MOVEMENT */

@keyframes offerScroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}
/* =========================================
   TESTIMONIAL AUTHOR
========================================= */

.testimonial-author {
    display: flex;

    flex-direction: column;

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

    gap: 12px;
}


.testimonial-author-image {
    width: 64px;
    height: 64px;

    border-radius: 50%;

    overflow: hidden;

    border: 2px solid #a78955;

    background: #eee5d5;
}


.testimonial-author-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.testimonial-author-info {
    display: flex;

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

    gap: 7px;

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

    font-size: 14px;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.testimonial-author-info strong {
    font-weight: 600;

    color: #40372e;
}


.testimonial-author-info span {
    color: #a78955;
}
.testimonial-content {
    position: relative;
}

.testimonial-slide {
    display: none;
    width: 100%;
}

.testimonial-slide.active {
    display: block;
}
/* =====================================================
   EXPERIENCE SECTION
===================================================== */

.experience-section {
    width: 100%;
    padding: 0;
    margin: 0;
    background: #f7f2e8;
}

.experience-layout {
    width: 100%;
    height: 560px;
    display: grid;
    grid-template-columns: 70% 30%;
    overflow: hidden;
}


/* =====================================================
   LEFT MAIN IMAGE
===================================================== */

.experience-main {
    position: relative;
    width: 100%;
    height: 560px;
    overflow: hidden;
}

.experience-main img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.experience-main-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(20, 14, 9, 0.72),
        rgba(20, 14, 9, 0.18) 70%,
        rgba(20, 14, 9, 0.08)
    );
}

.experience-main-content {
    position: absolute;
    left: 14%;
    top: 50%;
    transform: translateY(-50%);
    width: 55%;
    z-index: 2;
    color: #ffffff;
}

.experience-label {
    display: block;
    margin-bottom: 14px;
    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #ffffff;
}

.experience-main-content h2 {
    margin: 0 0 25px;
    font-family: var(--heading-font);
    font-size: 48px;
    font-weight: 400;
    line-height: 1.12;
    color: #ffffff;
}

.experience-main-content p {
    max-width: 430px;
    margin: 0;
    font-family: var(--body-font);
    font-size: 15px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.92);
}


/* =====================================================
   RIGHT TILES
===================================================== */

.experience-tiles {
    width: 100%;
    height: 560px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
}

.experience-tile {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 25px;
    border-left: 1px solid rgba(255, 255, 255, 0.65);
    border-bottom: 1px solid rgba(255, 255, 255, 0.65);
    text-decoration: none;
}

.experience-tile:nth-child(1),
.experience-tile:nth-child(2) {
    border-top: none;
}

.experience-tile:nth-child(5),
.experience-tile:nth-child(6) {
    border-bottom: none;
}

.experience-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Reference jaisa subtle/blurred image */
    filter: blur(5px);
    transform: scale(1.08);

    opacity: 0.38;
    transition: opacity 0.4s ease, transform 0.6s ease;
}

.experience-tile-overlay {
    position: absolute;
    inset: 0;
    background: rgba(35, 28, 20, 0.58);
    z-index: 1;
    transition: background 0.4s ease;
}

.experience-tile h3 {
    position: relative;
    z-index: 2;

    margin: 0;

    font-family: var(--heading-font);
    font-size: 25px;
    font-weight: 400;
    line-height: 1.25;

    color: #ffffff;
}

.experience-tile:hover img {
    opacity: 0.48;
    transform: scale(1.1);
}

.experience-tile:hover .experience-tile-overlay {
    background: rgba(150, 115, 65, 0.42);
}

.experience-tile:hover .experience-tile-overlay {
    background: rgba(120, 90, 45, 0.48);
}

.experience-tile:hover h3 {
    transform: translateY(-2px);
}

.experience-tile h3 {
    transition: transform 0.35s ease;
}
/* =====================================================
   EXPERIENCE SECTION
===================================================== */

.experience-section {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.experience-layout {
    position: relative;
    width: 100%;
    height: 560px;
    overflow: hidden;
}


/* =====================================================
   FULL WIDTH IMAGE
===================================================== */

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

.experience-main img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}


/* Dark overlay mainly for text readability */

.experience-main-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(20, 14, 9, 0.58) 0%,
        rgba(20, 14, 9, 0.18) 55%,
        rgba(20, 14, 9, 0.08) 100%
    );
}


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

.experience-main-content {
    position: absolute;
    left: 18%;
    top: 50%;
    transform: translateY(-50%);
    width: 45%;
    z-index: 5;
    color: #ffffff;
}

.experience-label {
    display: block;
    margin-bottom: 12px;

    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;

    color: #ffffff;
}

.experience-main-content h2 {
    margin: 0 0 24px;

    font-family: var(--heading-font);
    font-size: 48px;
    font-weight: 400;
    line-height: 1.12;

    color: #ffffff;
}

.experience-main-content p {
    max-width: 440px;
    margin: 0;

    font-family: var(--body-font);
    font-size: 15px;
    line-height: 1.8;

    color: rgba(255, 255, 255, 0.94);
}


/* =====================================================
   RIGHT OVERLAY BOX AREA
===================================================== */

.experience-tiles {
    position: absolute;

    top: 0;
    right: 0;

    width: 30%;
    height: 100%;

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

    z-index: 10;
}


/* =====================================================
   RIGHT TEXT BOX
===================================================== */

.experience-tile {
    position: relative;

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

    padding: 22px 25px;

    min-width: 0;
    min-height: 0;

    background: rgba(30, 24, 18, 0.28);

    border-left: 1px solid rgba(255, 255, 255, 0.65);
    border-bottom: 1px solid rgba(255, 255, 255, 0.65);

    text-decoration: none;

    backdrop-filter: blur(2px);

    transition:
        background 0.35s ease,
        backdrop-filter 0.35s ease;
}


/* Top border */

.experience-tile:nth-child(1),
.experience-tile:nth-child(2) {
    border-top: none;
}


/* Bottom border */

.experience-tile:nth-child(5),
.experience-tile:nth-child(6) {
    border-bottom: none;
}


/* Text */

.experience-tile h3 {
    position: relative;
    z-index: 2;

    margin: 0;

    font-family: var(--heading-font);
    font-size: 25px;
    font-weight: 400;
    line-height: 1.2;

    color: #ffffff;

    transition: transform 0.35s ease;
}


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

.experience-tile:hover {
    background: rgba(150, 115, 65, 0.38);
    backdrop-filter: blur(3px);
}

.experience-tile:hover h3 {
    transform: translateY(-3px);
}
/* =========================================================
   EXPERIENCE SECTION
========================================================= */

.experience-section {
    width: 100%;
    background: #f7f2e8;
    overflow: hidden;
}

.experience-layout {
    position: relative;
    width: 100%;
    height: 560px;
    overflow: hidden;
}


/* =========================================================
   MAIN IMAGE
========================================================= */

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

.experience-main img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.experience-main-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(15, 12, 9, 0.55) 0%,
        rgba(15, 12, 9, 0.25) 45%,
        rgba(15, 12, 9, 0.08) 100%
    );
    z-index: 1;
}


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

.experience-main-content {
    position: absolute;
    left: 9.5%;
    bottom: 90px;
    width: 48%;
    z-index: 5;
    color: #fff;
}

.experience-label {
    display: block;
    margin-bottom: 14px;

    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;

    color: #ffffff;
}

.experience-main-content h2 {
    margin: 0 0 22px;

    font-family: var(--heading-font);
    font-size: 48px;
    font-weight: 400;
    line-height: 1.12;

    color: #ffffff;
}

.experience-main-content p {
    max-width: 560px;
    margin: 0;

    font-family: var(--body-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;

    color: #ffffff;
}


/* =========================================================
   RIGHT OVERLAY TILES
========================================================= */

.experience-tiles {
    position: absolute;
    top: 0;
    right: 0;

    width: 30%;
    height: 100%;

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

    z-index: 10;
}

.experience-tile {
    position: relative;

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

    padding: 22px 24px;

    text-decoration: none;

    background: rgba(55, 47, 39, 0.40);

    border-left: 1px solid rgba(255, 255, 255, 0.70);
    border-bottom: 1px solid rgba(255, 255, 255, 0.70);

    backdrop-filter: blur(4px);

    transition:
        background 0.35s ease,
        backdrop-filter 0.35s ease;
}

.experience-tile:nth-child(2),
.experience-tile:nth-child(4),
.experience-tile:nth-child(6) {
    border-left: 1px solid rgba(255, 255, 255, 0.70);
}

.experience-tile:nth-child(5),
.experience-tile:nth-child(6) {
    border-bottom: none;
}

.experience-tile:hover {
    background: rgba(70, 58, 46, 0.58);
    backdrop-filter: blur(7px);
}

.experience-tile h3 {
    margin: 0;

    font-family: var(--heading-font);
    font-size: 23px;
    font-weight: 400;
    line-height: 1.25;

    color: #ffffff;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .experience-layout {
        height: 560px;
    }

    .experience-main-content {
        left: 9.5%;
        bottom: 88px;
    }

    .experience-main-content h2 {
        font-size: 52px;
    }

    .experience-main-content p {
        font-size: 17px;
    }

    .experience-tile {
        padding: 24px 26px;
    }

    .experience-tile h3 {
        font-size: 24px;
    }
}


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

@media (max-width: 1100px) and (min-width: 769px) {

    .experience-layout {
        height: 520px;
    }

    .experience-tiles {
        width: 34%;
    }

    .experience-main-content {
        left: 7%;
        bottom: 75px;
        width: 52%;
    }

    .experience-main-content h2 {
        font-size: 42px;
    }

    .experience-main-content p {
        font-size: 15px;
    }

    .experience-tile {
        padding: 20px;
    }

    .experience-tile h3 {
        font-size: 21px;
    }
}


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

@media (max-width: 768px) {

    .experience-section {
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .experience-layout {
        position: relative;

        width: 100%;
        height: 650px;

        overflow: hidden;
    }


    /* FULL IMAGE */

    .experience-main {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;
    }

    .experience-main img {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;
    }


    /* IMAGE OVERLAY */

    .experience-main-overlay {
        background: linear-gradient(
            to bottom,
            rgba(15, 12, 9, 0.10) 0%,
            rgba(15, 12, 9, 0.18) 50%,
            rgba(15, 12, 9, 0.35) 100%
        );
    }


    /* TEXT - UPPER IMAGE */

    .experience-main-content {
        position: absolute;

        left: 0;
        top: 0;
        bottom: auto;

        width: 100%;

        padding: 75px 22px 260px;

        z-index: 5;
    }

    .experience-label {
        margin-bottom: 10px;

        font-size: 9px;
        letter-spacing: 3px;
    }

    .experience-main-content h2 {
        margin-bottom: 14px;

        font-size: 34px;
        line-height: 1.12;
    }

    .experience-main-content p {
        max-width: 90%;

        font-size: 14px;
        line-height: 1.65;
    }


    /* =====================================================
       TILES - BOTTOM OF IMAGE
    ===================================================== */

    .experience-tiles {
        position: absolute;

        left: 0;
        right: 0;
        bottom: 0;
        top: auto;

        width: 100%;
        height: 225px;

        display: grid;

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

        z-index: 10;
    }

    .experience-tile {
        min-width: 0;
        min-height: 0;

        padding: 15px 16px;

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

        background: rgba(45, 38, 31, 0.48);

        border-left: 1px solid rgba(255, 255, 255, 0.60);
        border-bottom: 1px solid rgba(255, 255, 255, 0.60);

        backdrop-filter: blur(4px);
    }

    .experience-tile:nth-child(odd) {
        border-left: none;
    }

    .experience-tile:nth-child(5),
    .experience-tile:nth-child(6) {
        border-bottom: none;
    }

    .experience-tile h3 {
        margin: 0;

        font-size: 19px;
        line-height: 1.2;

        color: #ffffff;
    }
}


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

@media (max-width: 576px) {

    .experience-layout {
        height: 620px;
    }

    .experience-main-content {
        padding: 60px 18px 240px;
    }

    .experience-main-content h2 {
        font-size: 31px;
    }

    .experience-main-content p {
        max-width: 92%;
        font-size: 13px;
        line-height: 1.6;
    }

    .experience-tiles {
        height: 210px;
    }

    .experience-tile {
        padding: 14px 14px;
    }

    .experience-tile h3 {
        font-size: 18px;
    }
}
 /* =========================================================
    BLOG SECTION
 ========================================================= */

.blog-section {
    position: relative;
    width: 100%;
    padding: 105px 40px 115px;
    background: #f7f2e8;
    overflow: hidden;
}

.blog-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}


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

.blog-heading {
    max-width: 760px;
    margin: 0 auto 58px;
    text-align: center;
}

.blog-subtitle {
    display: block;

    margin-bottom: 13px;

    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;

    letter-spacing: 4px;
    text-transform: uppercase;

    color: #a18450;
}

.blog-heading h2 {
    margin: 0 0 18px;

    font-family: var(--heading-font);
    font-size: 48px;
    font-weight: 400;
    line-height: 1.15;

    color: #40372e;
}

.blog-heading p {
    max-width: 650px;

    margin: 0 auto;

    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.8;

    color: #756b60;
}


/* =========================================================
   BLOG GRID
========================================================= */

.blog-grid {
    display: grid;

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

    gap: 30px;

    align-items: start;
}


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

.blog-card {
    width: 100%;
    min-width: 0;
}


/* =========================================================
   BLOG IMAGE
========================================================= */

.blog-image {
    position: relative;

    display: block;

    width: 100%;
    height: 300px;

    overflow: hidden;

    background: #ddd;

    text-decoration: none;
}

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

    display: block;

    object-fit: cover;

    transition: transform 0.7s ease;
}

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


/* =========================================================
   BLOG CONTENT
========================================================= */

.blog-content {
    padding: 20px 0 0;
}

.blog-meta {
    margin-bottom: 12px;

    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 2px;
    text-transform: uppercase;

    color: #a18450;
}

.blog-meta span {
    margin: 0 7px;

    color: #b5a58d;
}

.blog-content h3 {
    margin: 0 0 12px;

    font-family: var(--heading-font);
    font-size: 25px;
    font-weight: 400;
    line-height: 1.3;

    color: #40372e;
}

.blog-content p {
    max-width: 520px;

    margin: 0 0 17px;

    font-family: var(--body-font);
    font-size: 14px;
    line-height: 1.7;

    color: #756b60;
}

.blog-read-more {
    display: inline-block;

    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;

    letter-spacing: 1.7px;
    text-transform: uppercase;

    color: #806337;

    text-decoration: none;

    transition: color 0.3s ease;
}

.blog-read-more:hover {
    color: #a78955;
}
/* =========================================================
   BLOG SECTION - BIG TEXT
========================================================= */

.blog-subtitle {
    font-size: 13px !important;
    letter-spacing: 4px !important;
}

.blog-heading h2 {
    font-size: 58px !important;
    line-height: 1.15 !important;
}

.blog-heading p {
    font-size: 18px !important;
    line-height: 1.8 !important;
}

.blog-meta {
    font-size: 12px !important;
    letter-spacing: 2px !important;
}

.blog-content h3 {
    font-size: 30px !important;
    line-height: 1.3 !important;
}

.blog-content p {
    font-size: 16px !important;
    line-height: 1.8 !important;
}

.blog-read-more {
    font-size: 13px !important;
    letter-spacing: 1.8px !important;
}
/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    position: relative;
    width: 100%;

    background:
        linear-gradient(
            rgba(22, 18, 14, 0.93),
            rgba(12, 10, 8, 0.97)
        ),
        url("../images/room/living-space.jpeg") center / cover no-repeat;

    color: #ffffff;

    overflow: hidden;
}


/* =========================================================
   SUBSCRIBE
========================================================= */

.footer-subscribe {
    position: relative;

    width: calc(100% - 80px);
    max-width: 1100px;

    margin: 0 auto;

    transform: translateY(-1px);

    background: #a78955;

    overflow: hidden;
}

.footer-subscribe::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(255,255,255,0.08),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(255,255,255,0.06),
            transparent 35%
        );

    pointer-events: none;
}

.footer-subscribe-content {
    position: relative;
    z-index: 2;

    min-height: 130px;

    padding: 25px 58px;

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

    gap: 50px;
}

.footer-subscribe-text span {
    display: block;

    margin-bottom: 7px;

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

    letter-spacing: 3px;
    text-transform: uppercase;

    color: #ffffff;
}

.footer-subscribe-text h2 {
    margin: 0;

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

    font-size: 35px;
    font-weight: 400;

    line-height: 1.15;

    color: #ffffff;
}


/* FORM */

.footer-subscribe-form {
    display: flex;

    width: 390px;
    height: 48px;
}

.footer-subscribe-form input {
    flex: 1;

    min-width: 0;

    padding: 0 18px;

    border: 1px solid rgba(255,255,255,0.8);
    border-right: none;

    outline: none;

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

    color: #ffffff;

    font-family: var(--body-font);
    font-size: 13px;
}

.footer-subscribe-form input::placeholder {
    color: #ffffff;
    opacity: 0.9;
}

.footer-subscribe-form button {
    width: 105px;

    border: none;

    background: #fffdf7;

    color: #a78955;

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

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

    letter-spacing: 1px;

    cursor: pointer;
}


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

.footer-main {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    padding: 90px 40px 55px;

    display: grid;

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

    gap: 55px;
}


/* BRAND */

.footer-brand h2 {
    margin: 0 0 17px;

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

    font-size: 32px;
    font-weight: 400;

    color: #ffffff;
}

.footer-brand p {
    max-width: 300px;

    margin: 0 0 25px;

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

    font-size: 14px;
    line-height: 1.8;

    color: rgba(255,255,255,0.72);
}

.footer-contact {
    display: flex;

    flex-direction: column;

    gap: 11px;
}

.footer-contact a {
    display: flex;
    align-items: center;

    gap: 10px;

    color: rgba(255,255,255,0.78);

    font-family: var(--body-font);
    font-size: 12px;

    text-decoration: none;
}

.footer-contact i {
    width: 15px;

    color: #c09a5b;
}


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

.footer-column h3 {
    margin: 0 0 23px;

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

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

    letter-spacing: 1.5px;

    color: #ffffff;
}

.footer-column ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.footer-column li {
    margin-bottom: 14px;
}

.footer-column a {
    font-family: var(--body-font);

    font-size: 13px;
    line-height: 1.5;

    color: rgba(255,255,255,0.68);

    text-decoration: none;

    transition: color 0.3s ease;
}

.footer-column a:hover {
    color: #c09a5b;
}


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

.footer-bottom {
    width: calc(100% - 80px);
    max-width: 1100px;

    margin: 0 auto;

    padding: 20px 0 25px;

    border-top: 1px solid rgba(192,154,91,0.65);

    display: flex;

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

    gap: 20px;
}

.footer-bottom p {
    margin: 0;

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

    font-size: 12px;

    color: rgba(255,255,255,0.62);
}

.footer-developer {
    text-align: right;
}

.footer-developer a {
    color: #c09a5b;

    font-weight: 600;

    text-decoration: none;

    transition: color 0.3s ease;
}

.footer-developer a:hover {
    color: #ffffff;
}
/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    position: relative;
    width: 100%;
    margin-top: 95px;
    background:
        linear-gradient(
            rgba(15, 12, 9, 0.72),
            rgba(8, 7, 5, 0.94)
        ),
        url("../images/room/living-space.jpeg")
        center center / cover no-repeat;
    color: #ffffff;
    overflow: visible;
}


/* =========================================================
   SUBSCRIBE OVERLAPPING BOX
========================================================= */

.footer-subscribe {
    position: absolute;
    top: -95px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 80px);
    max-width: 820px;
    min-height: 132px;

    background:
        linear-gradient(
            rgba(157, 126, 73, 0.92),
            rgba(157, 126, 73, 0.92)
        ),
        url("../images/room/living-space.jpeg")
        center / cover no-repeat;

    z-index: 10;
}


.footer-subscribe-content {
    min-height: 132px;
    padding: 25px 58px;

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

    gap: 45px;
}


.footer-subscribe-text {
    flex: 1;
}


.footer-subscribe-text span {
    display: block;

    margin-bottom: 7px;

    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 3px;
    text-transform: uppercase;

    color: #ffffff;
}


.footer-subscribe-text h2 {
    margin: 0;

    font-family: var(--heading-font);
    font-size: 34px;
    font-weight: 400;
    line-height: 1.15;

    color: #ffffff;
}


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

.footer-subscribe-form {
    display: flex;

    width: 300px;
    height: 44px;

    flex-shrink: 0;
}


.footer-subscribe-form input {
    flex: 1;

    min-width: 0;

    padding: 0 16px;

    border: 1px solid rgba(255,255,255,0.9);
    border-right: none;

    outline: none;

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

    color: #ffffff;

    font-family: var(--body-font);
    font-size: 11px;
}


.footer-subscribe-form input::placeholder {
    color: #ffffff;
    opacity: 0.95;
}


.footer-subscribe-form button {
    width: 84px;

    border: none;

    background: #fffdf8;
    color: #a18450;

    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.8px;

    cursor: pointer;
}


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

.footer-content {
    width: 100%;
    max-width: 820px;

    margin: 0 auto;

    padding: 135px 0 45px;
}


/* =========================================================
   HOTEL INFO - CENTER
========================================================= */

.footer-hotel-info {
    text-align: center;

    max-width: 500px;

    margin: 0 auto 45px;
}


.footer-hotel-info h2 {
    margin: 0 0 15px;

    font-family: var(--heading-font);
    font-size: 30px;
    font-weight: 400;

    color: #ffffff;
}


.footer-hotel-info p {
    max-width: 500px;

    margin: 0 auto 20px;

    font-family: var(--body-font);
    font-size: 12px;
    line-height: 1.8;

    color: rgba(255,255,255,0.72);
}


.footer-hotel-contact {
    display: flex;

    justify-content: center;

    gap: 2px;
}


.footer-hotel-contact a {
    display: flex;

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

    gap: 9px;

    min-width: 180px;

    padding: 12px 15px;

    background: rgba(167,137,85,0.9);

    color: #ffffff;

    font-family: var(--body-font);
    font-size: 10px;

    text-decoration: none;
}


.footer-hotel-contact i {
    color: #ffffff;
}


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

.footer-columns {
    display: grid;

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

    gap: 35px;
}


.footer-column h3 {
    margin: 0 0 20px;

    font-family: var(--heading-font);
    font-size: 15px;
    font-weight: 400;

    letter-spacing: 0.5px;

    color: #ffffff;
}


.footer-column ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.footer-column li {
    margin-bottom: 12px;
}


.footer-column a {
    font-family: var(--body-font);
    font-size: 10px;
    line-height: 1.5;

    color: rgba(255,255,255,0.70);

    text-decoration: none;

    transition:
        color 0.3s ease;
}


.footer-column a:hover {
    color: #c09a5b;
}


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

.footer-bottom {
    width: 100%;
    max-width: 820px;

    margin: 0 auto;

    padding: 18px 0 22px;

    border-top:
        1px solid rgba(192,154,91,0.75);

    display: flex;

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

    gap: 20px;
}


.footer-bottom p {
    margin: 0;

    font-family: var(--body-font);
    font-size: 10px;

    color: rgba(255,255,255,0.65);
}


.footer-developer {
    text-align: right;
}


.footer-developer a {
    color: #c09a5b;

    font-weight: 600;

    text-decoration: none;

    transition: color 0.3s ease;
}


.footer-developer a:hover {
    color: #ffffff;
}
/* =========================================================
   ABOUT EXPERIENCE INTRO
========================================================= */

.about-experience-section {
    width: 100%;
    padding: 105px 40px 95px;
    background: #f7f2e8;
}

.about-experience-heading {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.about-experience-heading span {
    display: block;
    margin-bottom: 18px;

    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;

    color: #a18450;
}

.about-experience-heading h2 {
    margin: 0 0 22px;

    font-family: var(--heading-font);
    font-size: 54px;
    font-weight: 400;
    line-height: 1.15;

    color: #40372e;
}

.about-experience-heading p {
    max-width: 700px;
    margin: 0 auto;

    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.8;

    color: #756b60;
}
/* =========================================================
   ABOUT THE HOTEL
   HERITAGE STYLE
========================================================= */

.about-hotel-section {
    position: relative;

    width: 100%;

    padding: 110px 50px 115px;

    background: #fffdf8;

    overflow: hidden;
}


.about-hotel-container {
    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;

    align-items: center;
}


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

.about-hotel-image {
    position: relative;

    width: 100%;

    height: 610px;

    overflow: hidden;
}


.about-hotel-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.8s ease;
}


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


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

.about-hotel-content {
    max-width: 560px;
}


.about-hotel-subtitle {
    display: block;

    margin-bottom: 15px;

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

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 4px;

    text-transform: uppercase;

    color: #a18450;
}


.about-hotel-content h2 {
    margin: 0 0 25px;

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

    font-size: 49px;

    font-weight: 400;

    line-height: 1.18;

    color: #40372e;
}


.about-hotel-content p {
    margin: 0 0 18px;

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

    font-size: 15px;

    line-height: 1.85;

    color: #756b60;
}


/* =========================================================
   STATS
========================================================= */

.about-hotel-stats {
    width: 100%;

    margin-top: 35px;

    padding-top: 25px;

    border-top:
        1px solid #d8cdbd;

    display: grid;

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


.about-hotel-stat {
    padding: 0 18px;

    text-align: center;
}


.about-hotel-stat:first-child {
    padding-left: 0;

    text-align: left;
}


.about-hotel-stat:last-child {
    padding-right: 0;

    text-align: right;
}


.about-hotel-stat + .about-hotel-stat {
    border-left:
        1px solid #d8cdbd;
}


.about-hotel-stat strong {
    display: block;

    margin-bottom: 7px;

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

    font-size: 35px;

    font-weight: 400;

    line-height: 1;

    color: #a78955;
}


.about-hotel-stat span {
    font-family: var(--body-font);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1.5px;

    color: #756b60;
}


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

@media (min-width: 577px) and (max-width: 1100px) {

    .about-hotel-section {
        padding: 85px 30px 90px;
    }

    .about-hotel-container {
        gap: 45px;
    }

    .about-hotel-image {
        height: 520px;
    }

    .about-hotel-content h2 {
        font-size: 40px;
    }

    .about-hotel-content p {
        font-size: 14px;
        line-height: 1.8;
    }

    .about-hotel-stat strong {
        font-size: 30px;
    }

}


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

@media (max-width: 576px) {

    .about-hotel-section {
        padding: 70px 18px 75px;
    }

    .about-hotel-container {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    .about-hotel-image {
        height: 390px;
    }


    .about-hotel-content {
        max-width: 100%;
    }


    .about-hotel-subtitle {
        font-size: 9px;

        letter-spacing: 3px;
    }


    .about-hotel-content h2 {
        font-size: 37px;

        line-height: 1.2;
    }


    .about-hotel-content p {
        font-size: 14px;

        line-height: 1.75;
    }


    .about-hotel-stats {
        margin-top: 30px;

        padding-top: 20px;
    }


    .about-hotel-stat {
        padding: 0 8px;
    }


    .about-hotel-stat:first-child {
        text-align: left;
    }


    .about-hotel-stat:last-child {
        text-align: right;
    }


    .about-hotel-stat strong {
        font-size: 27px;
    }


    .about-hotel-stat span {
        font-size: 8px;

        letter-spacing: 1px;
    }

}
/* =========================================================
   OUR COMMITMENT
   HERITAGE EDITORIAL STYLE
========================================================= */

.about-commitment-section {
    position: relative;

    width: 100%;

    padding: 115px 50px 120px;

    background: #f7f2e8;

    overflow: hidden;
}


.about-commitment-container {
    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 95px;

    align-items: start;
}


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

.about-commitment-heading {
    position: sticky;

    top: 120px;
}


.about-commitment-heading > span {
    display: block;

    margin-bottom: 18px;

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

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 4px;

    text-transform: uppercase;

    color: #a18450;
}


.about-commitment-heading h2 {
    margin: 0;

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

    font-size: 54px;

    font-weight: 400;

    line-height: 1.12;

    color: #40372e;
}


.about-commitment-line {
    width: 55px;

    height: 1px;

    margin-top: 28px;

    background: #a78955;
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.about-commitment-content {
    width: 100%;
}


.about-commitment-intro {
    max-width: 680px;

    margin: 0 0 48px;

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

    font-size: 16px;

    line-height: 1.85;

    color: #756b60;
}


/* =========================================================
   COMMITMENT ITEM
========================================================= */

.commitment-item {
    display: grid;

    grid-template-columns: 55px 1fr;

    gap: 25px;

    padding: 30px 0;

    border-top:
        1px solid #d8cdbd;
}


.commitment-item:last-child {
    border-bottom:
        1px solid #d8cdbd;
}


/* NUMBER */

.commitment-number {
    padding-top: 5px;

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

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 2px;

    color: #a78955;
}


/* TEXT */

.commitment-text h3 {
    margin: 0 0 10px;

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

    font-size: 29px;

    font-weight: 400;

    line-height: 1.25;

    color: #40372e;
}


.commitment-text p {
    max-width: 620px;

    margin: 0;

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

    font-size: 14px;

    line-height: 1.8;

    color: #756b60;
}


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

.commitment-item {
    transition:
        padding-left 0.3s ease;
}


.commitment-item:hover {
    padding-left: 8px;
}


.commitment-item:hover .commitment-number {
    color: #806337;
}


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

@media (min-width: 577px) and (max-width: 1100px) {

    .about-commitment-section {
        padding: 90px 30px 100px;
    }

    .about-commitment-container {
        gap: 50px;
        grid-template-columns: 0.75fr 1.25fr;
    }

    .about-commitment-heading h2 {
        font-size: 44px;
    }

    .about-commitment-intro {
        font-size: 15px;
    }

    .commitment-text h3 {
        font-size: 25px;
    }

    .commitment-text p {
        font-size: 14px;
    }

}


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

@media (max-width: 576px) {

    .about-commitment-section {
        padding: 75px 18px 80px;
    }


    .about-commitment-container {
        display: block;
    }


    .about-commitment-heading {
        position: relative;

        top: auto;

        margin-bottom: 45px;
    }


    .about-commitment-heading > span {
        margin-bottom: 12px;

        font-size: 9px;

        letter-spacing: 3px;
    }


    .about-commitment-heading h2 {
        font-size: 40px;

        line-height: 1.15;
    }


    .about-commitment-line {
        margin-top: 20px;
    }


    .about-commitment-intro {
        margin-bottom: 30px;

        font-size: 14px;

        line-height: 1.75;
    }


    .commitment-item {
        grid-template-columns: 38px 1fr;

        gap: 16px;

        padding: 25px 0;
    }


    .commitment-number {
        font-size: 10px;

        letter-spacing: 1.5px;
    }


    .commitment-text h3 {
        margin-bottom: 9px;

        font-size: 25px;

        line-height: 1.25;
    }


    .commitment-text p {
        font-size: 14px;

        line-height: 1.75;
    }


    .commitment-item:hover {
        padding-left: 0;
    }

}
/* =========================================================
   OUR COMMITMENT - LUXURY EDITORIAL
   ========================================================= */

.commitment-luxury-section {
    width: 100%;
    padding: 120px 50px 125px;
    background: #fffdf8;
}


/* MAIN CONTAINER */

.commitment-luxury-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}


/* =========================================================
   TOP INTRO
   ========================================================= */

.commitment-luxury-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: end;

    padding-bottom: 70px;
}


/* TITLE */

.commitment-luxury-title span {
    display: block;
    margin-bottom: 18px;

    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;

    color: #a18450;
}


.commitment-luxury-title h2 {
    margin: 0;

    font-family: var(--heading-font);
    font-size: 64px;
    font-weight: 400;
    line-height: 1.08;

    color: #40372e;
}


/* DESCRIPTION */

.commitment-luxury-description {
    max-width: 570px;
    padding-bottom: 5px;
}


.commitment-luxury-description p {
    margin: 0;

    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.9;

    color: #756b60;
}


/* =========================================================
   MAIN AREA
   ========================================================= */

.commitment-luxury-main {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 70px;

    align-items: stretch;
}


/* IMAGE */

.commitment-luxury-image {
    width: 100%;
    height: 650px;

    overflow: hidden;
}


.commitment-luxury-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform 0.8s ease;
}


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


/* =========================================================
   COMMITMENT LIST
   ========================================================= */

.commitment-luxury-list {
    width: 100%;
    border-top: 1px solid #d8cdbd;
}


.commitment-luxury-item {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 25px;

    padding: 30px 0;

    border-bottom: 1px solid #d8cdbd;
}


/* NUMBER */

.commitment-luxury-number {
    padding-top: 5px;

    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;

    color: #a18450;
}


/* TEXT */

.commitment-luxury-text h3 {
    margin: 0 0 10px;

    font-family: var(--heading-font);
    font-size: 29px;
    font-weight: 400;
    line-height: 1.25;

    color: #40372e;
}


.commitment-luxury-text p {
    max-width: 600px;

    margin: 0;

    font-family: var(--body-font);
    font-size: 14px;
    line-height: 1.8;

    color: #756b60;
}


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

.commitment-luxury-item {
    transition: padding-left 0.3s ease;
}


.commitment-luxury-item:hover {
    padding-left: 10px;
}


.commitment-luxury-item:hover
.commitment-luxury-number {
    color: #806337;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

    .commitment-luxury-section {
        padding-top: 140px;
        padding-bottom: 145px;
    }

    .commitment-luxury-container {
        max-width: 1380px;
    }

    .commitment-luxury-intro {
        gap: 140px;
    }

    .commitment-luxury-title h2 {
        font-size: 72px;
    }

    .commitment-luxury-image {
        height: 700px;
    }

    .commitment-luxury-text h3 {
        font-size: 32px;
    }
}


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

@media (min-width: 577px) and (max-width: 1100px) {

    .commitment-luxury-section {
        padding: 100px 35px 105px;
    }

    .commitment-luxury-intro {
        gap: 50px;
        padding-bottom: 55px;
    }

    .commitment-luxury-title h2 {
        font-size: 50px;
    }

    .commitment-luxury-description p {
        font-size: 15px;
    }

    .commitment-luxury-main {
        gap: 40px;
    }

    .commitment-luxury-image {
        height: 570px;
    }

    .commitment-luxury-item {
        grid-template-columns: 40px 1fr;
        gap: 15px;
        padding: 25px 0;
    }

    .commitment-luxury-text h3 {
        font-size: 25px;
    }

    .commitment-luxury-text p {
        font-size: 13px;
    }
}


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

@media (max-width: 576px) {

    .commitment-luxury-section {
        padding: 75px 18px 80px;
    }


    .commitment-luxury-intro {
        display: block;
        padding-bottom: 45px;
    }


    .commitment-luxury-title {
        margin-bottom: 30px;
    }


    .commitment-luxury-title span {
        margin-bottom: 15px;

        font-size: 9px;
        letter-spacing: 3px;
    }


    .commitment-luxury-title h2 {
        font-size: 40px;
        line-height: 1.15;
    }


    .commitment-luxury-description {
        max-width: 100%;
    }


    .commitment-luxury-description p {
        font-size: 14px;
        line-height: 1.75;
    }


    .commitment-luxury-main {
        display: block;
    }


    .commitment-luxury-image {
        height: 380px;
        margin-bottom: 45px;
    }


    .commitment-luxury-item {
        grid-template-columns: 38px 1fr;
        gap: 12px;

        padding: 25px 0;
    }


    .commitment-luxury-number {
        font-size: 9px;
        letter-spacing: 1.5px;
    }


    .commitment-luxury-text h3 {
        margin-bottom: 8px;
        font-size: 25px;
    }


    .commitment-luxury-text p {
        font-size: 13px;
        line-height: 1.75;
    }

}
.commitment-luxury-image {
    width: 100%;
    height: 100%;
    min-height: 100%;
    align-self: stretch;
    overflow: hidden;
}

.commitment-luxury-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.8s ease;
}

.commitment-luxury-image:hover img {
    transform: scale(1.04);
}
/* =========================================================
   ROOMS & SUITES - LUXURY EDITORIAL
   ========================================================= */

.about-rooms-section {
    width: 100%;
    padding: 125px 50px 130px;
    background: #f7f2e8;
}


.about-rooms-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 85px;

    align-items: stretch;
}


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

.about-rooms-image {
    width: 100%;
    height: 100%;
    min-height: 690px;

    overflow: hidden;
}


.about-rooms-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform 0.8s ease;
}


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


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

.about-rooms-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    max-width: 580px;
}


.about-rooms-subtitle {
    display: block;
    margin-bottom: 18px;

    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;

    color: #a18450;
}


.about-rooms-content h2 {
    margin: 0 0 27px;

    font-family: var(--heading-font);
    font-size: 58px;
    font-weight: 400;
    line-height: 1.1;

    color: #40372e;
}


.about-rooms-content > p {
    margin: 0 0 18px;

    font-family: var(--body-font);
    font-size: 15px;
    line-height: 1.85;

    color: #756b60;
}


/* =========================================================
   42 ROOMS HIGHLIGHT
   ========================================================= */

.about-rooms-highlight {
    display: flex;
    align-items: center;

    margin-top: 25px;
    padding: 25px 0;

    border-top: 1px solid #d5c8b6;
    border-bottom: 1px solid #d5c8b6;
}


.about-rooms-highlight-number {
    margin-right: 25px;

    font-family: var(--heading-font);
    font-size: 58px;
    font-weight: 400;
    line-height: 1;

    color: #a78955;
}


.about-rooms-highlight-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


.about-rooms-highlight-text strong {
    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;

    color: #40372e;
}


.about-rooms-highlight-text span {
    font-family: var(--body-font);
    font-size: 13px;
    line-height: 1.6;

    color: #756b60;
}


/* =========================================================
   ROOM CATEGORIES
   ========================================================= */

.about-room-categories {
    margin-top: 28px;
}


.about-room-category {
    display: grid;
    grid-template-columns: 45px 1fr;

    align-items: center;

    padding: 13px 0;

    border-bottom: 1px solid #ddd3c4;
}


.about-room-category:first-child {
    border-top: 1px solid #ddd3c4;
}


.about-room-category span {
    font-family: var(--body-font);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;

    color: #a78955;
}


.about-room-category strong {
    font-family: var(--heading-font);
    font-size: 21px;
    font-weight: 400;

    color: #40372e;
}


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

.about-room-category {
    transition: padding-left 0.3s ease;
}


.about-room-category:hover {
    padding-left: 8px;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

    .about-rooms-section {
        padding-top: 145px;
        padding-bottom: 150px;
    }

    .about-rooms-container {
        max-width: 1380px;
        gap: 105px;
    }

    .about-rooms-image {
        min-height: 750px;
    }

    .about-rooms-content h2 {
        font-size: 66px;
    }

    .about-room-category strong {
        font-size: 23px;
    }
}


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

@media (min-width: 577px) and (max-width: 1100px) {

    .about-rooms-section {
        padding: 100px 35px 110px;
    }

    .about-rooms-container {
        gap: 45px;
    }

    .about-rooms-image {
        min-height: 600px;
    }

    .about-rooms-content h2 {
        font-size: 47px;
    }

    .about-rooms-content > p {
        font-size: 14px;
        line-height: 1.75;
    }

    .about-rooms-highlight-number {
        font-size: 48px;
    }

    .about-room-category strong {
        font-size: 19px;
    }
}


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

@media (max-width: 576px) {

    .about-rooms-section {
        padding: 75px 18px 80px;
    }

    .about-rooms-container {
        display: block;
    }

    .about-rooms-image {
        height: 400px;
        min-height: 0;

        margin-bottom: 45px;
    }

    .about-rooms-content {
        max-width: 100%;
    }

    .about-rooms-subtitle {
        font-size: 9px;
        letter-spacing: 3px;
        margin-bottom: 15px;
    }

    .about-rooms-content h2 {
        font-size: 39px;
        line-height: 1.15;
        margin-bottom: 22px;
    }

    .about-rooms-content > p {
        font-size: 14px;
        line-height: 1.75;
    }

    .about-rooms-highlight {
        margin-top: 25px;
        padding: 22px 0;
    }

    .about-rooms-highlight-number {
        font-size: 48px;
        margin-right: 18px;
    }

    .about-rooms-highlight-text strong {
        font-size: 9px;
    }

    .about-rooms-highlight-text span {
        font-size: 12px;
    }

    .about-room-category {
        grid-template-columns: 38px 1fr;
        padding: 12px 0;
    }

    .about-room-category strong {
        font-size: 19px;
    }
}
/* =========================================================
   REVIEWS SECTION
   ========================================================= */

.about-reviews-section {
    width: 100%;
    padding-top: 120px;
    background: #f7f2e8;
    overflow: hidden;
}


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

.about-reviews-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}


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

.about-reviews-heading {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 65px;
}


.about-reviews-heading span {
    display: block;
    margin-bottom: 18px;

    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;

    color: #a18450;
}


.about-reviews-heading h2 {
    margin: 0 0 22px;

    font-family: var(--heading-font);
    font-size: 60px;
    font-weight: 400;
    line-height: 1.12;

    color: #40372e;
}


.about-reviews-heading p {
    max-width: 720px;
    margin: 0 auto;

    font-family: var(--body-font);
    font-size: 15px;
    line-height: 1.8;

    color: #756b60;
}


/* =========================================================
   REVIEWS GRID
   ========================================================= */

.about-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: start;
}


/* =========================================================
   REVIEW ITEM
   ========================================================= */

.about-review-item {
    min-width: 0;
}


/* =========================================================
   REVIEW BOX
   ========================================================= */

.about-review-box {
    position: relative;

    min-height: 275px;

    padding: 43px 36px 48px;

    background: #fbf7ed;
    border-radius: 2px;
}


.about-review-box p {
    position: relative;
    z-index: 2;

    margin: 0;

    font-family: var(--heading-font);
    font-size: 22px;
    line-height: 1.55;

    color: #40372e;
}


/* QUOTE */

.about-review-quote {
    position: absolute;

    right: 27px;
    bottom: 20px;

    font-family: Georgia, serif;
    font-size: 125px;
    font-weight: 400;
    line-height: 0.7;

    color: rgba(255, 255, 255, 0.85);
}


/* =========================================================
   AUTHOR
   ========================================================= */

.about-review-author {
    display: flex;
    align-items: center;

    margin-top: -45px;
    margin-left: 35px;

    position: relative;
    z-index: 5;
}


.about-review-author-image {
    width: 96px;
    height: 96px;

    flex: 0 0 96px;

    overflow: hidden;

    border-radius: 50%;
    border: 4px solid #f7f2e8;
}


.about-review-author-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* AUTHOR TEXT */

.about-review-author-info {
    display: flex;
    flex-direction: column;

    margin-left: 22px;
}


.about-review-stars {
    margin-bottom: 7px;

    font-family: Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 2px;

    color: #a78955;
}


.about-review-author-info strong {
    font-family: var(--body-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #40372e;
}


.about-review-author-info span {
    margin-top: 4px;

    font-family: var(--body-font);
    font-size: 11px;
    letter-spacing: 2px;

    color: #a78955;
}


/* =========================================================
   AUTOMATIC IMAGE GALLERY
   ========================================================= */

.about-review-gallery {
    width: 100%;

    margin-top: 100px;

    overflow: hidden;
}


.about-review-gallery-track {
    display: flex;
    width: max-content;

    gap: 18px;

    animation: reviewGalleryScroll 32s linear infinite;
}


.about-review-gallery-item {
    width: 250px;
    height: 250px;

    flex: 0 0 250px;

    overflow: hidden;

    border-radius: 12px;
}


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

    display: block;

    object-fit: cover;

    transition: transform 0.6s ease;
}


.about-review-gallery-item:hover img {
    transform: scale(1.05);
}


/* =========================================================
   INFINITE SCROLL
   ========================================================= */

@keyframes reviewGalleryScroll {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50% - 9px));
    }

}


/* =========================================================
   PAUSE ON HOVER
   ========================================================= */

.about-review-gallery:hover
.about-review-gallery-track {
    animation-play-state: paused;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

    .about-reviews-section {
        padding-top: 145px;
    }

    .about-reviews-container {
        max-width: 1380px;
    }

    .about-reviews-heading h2 {
        font-size: 68px;
    }

    .about-review-box {
        min-height: 290px;
        padding: 48px 40px 52px;
    }

    .about-review-box p {
        font-size: 23px;
    }

    .about-review-gallery {
        margin-top: 110px;
    }

    .about-review-gallery-item {
        width: 275px;
        height: 275px;
        flex-basis: 275px;
    }

}


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

@media (min-width: 577px) and (max-width: 1100px) {

    .about-reviews-section {
        padding-top: 100px;
    }

    .about-reviews-container {
        padding: 0 30px;
    }

    .about-reviews-heading h2 {
        font-size: 50px;
    }

    .about-reviews-grid {
        gap: 15px;
    }

    .about-review-box {
        min-height: 250px;
        padding: 32px 25px 40px;
    }

    .about-review-box p {
        font-size: 18px;
    }

    .about-review-author {
        margin-left: 20px;
    }

    .about-review-author-image {
        width: 78px;
        height: 78px;
        flex-basis: 78px;
    }

    .about-review-author-info {
        margin-left: 14px;
    }

    .about-review-gallery {
        margin-top: 80px;
    }

    .about-review-gallery-item {
        width: 210px;
        height: 210px;
        flex-basis: 210px;
    }

}


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

@media (max-width: 576px) {

    .about-reviews-section {
        padding-top: 75px;
    }

    .about-reviews-container {
        padding: 0 18px;
    }

    .about-reviews-heading {
        margin-bottom: 50px;
    }

    .about-reviews-heading span {
        font-size: 9px;
        letter-spacing: 3px;
        margin-bottom: 15px;
    }

    .about-reviews-heading h2 {
        font-size: 39px;
        line-height: 1.15;
        margin-bottom: 18px;
    }

    .about-reviews-heading p {
        font-size: 14px;
        line-height: 1.75;
    }


    .about-reviews-grid {
        display: block;
    }


    .about-review-item {
        margin-bottom: 45px;
    }


    .about-review-box {
        min-height: 0;
        padding: 32px 25px 42px;
    }


    .about-review-box p {
        font-size: 20px;
        line-height: 1.5;
    }


    .about-review-author {
        margin-top: -38px;
        margin-left: 20px;
    }


    .about-review-author-image {
        width: 76px;
        height: 76px;
        flex-basis: 76px;
    }


    .about-review-author-info {
        margin-left: 15px;
    }


    .about-review-stars {
        font-size: 12px;
    }


    .about-review-author-info strong {
        font-size: 10px;
    }


    .about-review-author-info span {
        font-size: 9px;
    }


    .about-review-gallery {
        margin-top: 60px;
    }


    .about-review-gallery-track {
        gap: 12px;
        animation-duration: 25s;
    }


    .about-review-gallery-item {
        width: 155px;
        height: 155px;
        flex-basis: 155px;

        border-radius: 8px;
    }

}
.about-reviews-section {
    width: 100%;
    padding-top: 70px;
    padding-bottom: 100px;
    background: #f7f2e8;
    overflow: hidden;
}
.about-rooms-section {
    width: 100%;
    padding: 125px 50px 55px;
    background: #f7f2e8;
}
/* =========================================================
   VISION & MISSION
   ========================================================= */

.about-vision-mission-section {
    width: 100%;
    padding: 120px 50px 125px;
    background: #fffdf8;
}


.about-vm-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}


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

.about-vm-heading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 100px;
    align-items: end;

    padding-bottom: 75px;
}


.about-vm-heading > span {
    grid-column: 1 / -1;

    display: block;
    margin-bottom: 20px;

    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;

    color: #a18450;
}


.about-vm-heading h2 {
    margin: 0;

    font-family: var(--heading-font);
    font-size: 62px;
    font-weight: 400;
    line-height: 1.1;

    color: #40372e;
}


.about-vm-heading p {
    max-width: 560px;

    margin: 0;

    font-family: var(--body-font);
    font-size: 15px;
    line-height: 1.9;

    color: #756b60;
}


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

.about-vm-content {
    display: grid;
    grid-template-columns: 1fr 1fr;

    border-top: 1px solid #d8cdbd;
}


/* =========================================================
   VISION / MISSION BLOCK
   ========================================================= */

.about-vm-block {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 25px;

    padding: 45px 45px 45px 0;
}


.about-vm-block + .about-vm-block {
    padding-left: 55px;
    border-left: 1px solid #d8cdbd;
}


.about-vm-number {
    padding-top: 6px;

    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;

    color: #a78955;
}


.about-vm-text > span {
    display: block;
    margin-bottom: 15px;

    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;

    color: #a18450;
}


.about-vm-text h3 {
    margin: 0 0 18px;

    font-family: var(--heading-font);
    font-size: 34px;
    font-weight: 400;
    line-height: 1.2;

    color: #40372e;
}


.about-vm-text p {
    max-width: 500px;

    margin: 0;

    font-family: var(--body-font);
    font-size: 14px;
    line-height: 1.85;

    color: #756b60;
}


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

.about-vm-content::after {
    content: "";
    display: block;
}


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

.about-vm-block {
    transition: background 0.3s ease;
}

.about-vm-block:hover .about-vm-number {
    color: #806337;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

    .about-vision-mission-section {
        padding-top: 145px;
        padding-bottom: 145px;
    }

    .about-vm-container {
        max-width: 1380px;
    }

    .about-vm-heading {
        column-gap: 140px;
        padding-bottom: 85px;
    }

    .about-vm-heading h2 {
        font-size: 70px;
    }

    .about-vm-text h3 {
        font-size: 38px;
    }

}


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

@media (min-width: 577px) and (max-width: 1100px) {

    .about-vision-mission-section {
        padding: 100px 35px 105px;
    }

    .about-vm-heading {
        column-gap: 50px;
        padding-bottom: 60px;
    }

    .about-vm-heading h2 {
        font-size: 48px;
    }

    .about-vm-heading p {
        font-size: 14px;
    }

    .about-vm-block {
        grid-template-columns: 40px 1fr;
        gap: 15px;
        padding: 35px 25px 35px 0;
    }

    .about-vm-block + .about-vm-block {
        padding-left: 30px;
    }

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

}


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

@media (max-width: 576px) {

    .about-vision-mission-section {
        padding: 75px 18px 80px;
    }

    .about-vm-heading {
        display: block;
        padding-bottom: 45px;
    }

    .about-vm-heading > span {
        margin-bottom: 15px;
        font-size: 9px;
        letter-spacing: 3px;
    }

    .about-vm-heading h2 {
        font-size: 39px;
        line-height: 1.15;
        margin-bottom: 22px;
    }

    .about-vm-heading p {
        font-size: 14px;
        line-height: 1.75;
    }


    .about-vm-content {
        display: block;
    }


    .about-vm-block {
        grid-template-columns: 38px 1fr;
        gap: 12px;

        padding: 30px 0;

        border-bottom: 1px solid #d8cdbd;
    }


    .about-vm-block + .about-vm-block {
        padding-left: 0;
        border-left: none;
    }


    .about-vm-number {
        font-size: 9px;
    }


    .about-vm-text > span {
        font-size: 9px;
        letter-spacing: 2.5px;
    }


    .about-vm-text h3 {
        font-size: 27px;
        line-height: 1.2;
    }


    .about-vm-text p {
        font-size: 13px;
        line-height: 1.75;
    }

}
/* room */
/* =========================================================
   ROOM PAGE HERO
   ========================================================= */

.room-page-hero {
    position: relative;

    width: 100%;
    height: 360px;

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

    background-image: url("../images/room/premium-room.jpeg");
    background-size: cover;
    background-position: center center;

    overflow: hidden;
}


/* LIGHT LUXURY OVERLAY */

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

    background: rgba(247, 242, 232, 0.78);

    z-index: 1;
}


/* CONTENT */

.room-page-hero-content {
    position: relative;

    z-index: 2;

    width: 100%;

    padding: 0 20px;

    text-align: center;

    transform: translateY(28px);
}


/* TITLE */

.room-page-hero-content h1 {
    margin: 0 0 18px;

    font-family: var(--heading-font);
    font-size: 62px;
    font-weight: 400;
    line-height: 1.1;

    color: #40372e;
}


/* BREADCRUMB */

.room-page-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 3px;
    text-transform: uppercase;

    color: #806337;
}


.room-page-breadcrumb a {
    color: #806337;

    text-decoration: none;

    transition: color 0.3s ease;
}


.room-page-breadcrumb a:hover {
    color: #40372e;
}


.room-page-breadcrumb span {
    color: #a78955;
}


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

@media (min-width: 577px) and (max-width: 1100px) {

    .room-page-hero {
        height: 330px;
    }

    .room-page-hero-content h1 {
        font-size: 52px;
    }

    .room-page-breadcrumb {
        font-size: 9px;
        letter-spacing: 2.5px;
    }

}


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

@media (max-width: 576px) {

    .room-page-hero {
        height: 300px;

        background-position: center center;
    }

    .room-page-hero-overlay {
        background: rgba(247, 242, 232, 0.82);
    }

    .room-page-hero-content {
        padding: 0 18px;

        transform: translateY(20px);
    }

    .room-page-hero-content h1 {
        margin-bottom: 15px;

        font-size: 42px;
        line-height: 1.15;
    }

    .room-page-breadcrumb {
        gap: 8px;

        font-size: 8px;
        letter-spacing: 2px;

        flex-wrap: wrap;
    }

}
/* =========================================================
   ROOM DETAILS
   ========================================================= */

.room-details-section {
    width: 100%;
    padding: 45px 50px 110px;
    background: #fffdf8;
}

.room-details-container {
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
}


/* =========================================================
   AVAILABILITY
   ========================================================= */

.room-availability-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 26px;
}

.room-availability-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 300px;
    height: 55px;

    padding: 0 28px;

    background: #a78955;
    color: #fff;

    text-decoration: none;

    font-family: var(--body-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;

    transition: background .3s ease;
}

.room-availability-btn:hover {
    background: #806337;
}


/* =========================================================
   MAIN IMAGE
   ========================================================= */

.room-main-image {
    width: 100%;
    height: 560px;
    overflow: hidden;
}

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

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   CONTENT LAYOUT
   ========================================================= */

.room-details-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 58px;

    margin-top: 48px;
}

.room-details-content {
    min-width: 0;
}


/* =========================================================
   TABS
   ========================================================= */

.room-tabs {
    display: flex;
    gap: 30px;

    border-bottom: 1px solid #d8cdbd;
}

.room-tab {
    position: relative;

    padding: 0 0 14px;

    border: 0;
    background: transparent;

    font-family: var(--heading-font);
    font-size: 18px;
    font-weight: 400;

    color: #756b60;

    cursor: pointer;
}

.room-tab.active {
    color: #a78955;
}

.room-tab.active::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -1px;

    width: 100%;
    height: 1px;

    background: #a78955;
}


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

.room-description {
    padding: 28px 0 35px;
}

.room-description p,
.room-cancellation p,
.room-house-rules p {
    margin: 0 0 8px;

    font-family: var(--body-font);
    font-size: 13px;
    line-height: 1.75;

    color: #756b60;
}


/* =========================================================
   CHECK IN / OUT
   ========================================================= */

.room-check-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 45px;

    margin: 10px 0 38px;
}

.room-check-item {
    display: flex;
    gap: 17px;
}

.room-check-icon {
    flex: 0 0 28px;

    padding-top: 3px;

    color: #806337;
    font-size: 20px;
}

.room-check-item h3 {
    margin: 0 0 8px;

    font-family: var(--heading-font);
    font-size: 20px;
    font-weight: 400;

    color: #40372e;
}

.room-check-item p {
    margin: 0;

    font-family: var(--body-font);
    font-size: 12px;
    line-height: 1.7;

    color: #756b60;
}


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

.room-amenities {
    margin-bottom: 55px;
}

.room-amenities h2,
.room-house-rules h2,
.room-cancellation h2 {
    margin: 0 0 22px;

    font-family: var(--heading-font);
    font-size: 23px;
    font-weight: 400;

    color: #40372e;
}

.room-amenities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 25px;
    row-gap: 15px;
}

.room-amenity {
    display: flex;
    align-items: center;
    gap: 9px;

    font-family: var(--body-font);
    font-size: 12px;

    color: #756b60;
}

.room-amenity i {
    width: 14px;
    height: 14px;

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

    border-radius: 50%;

    font-size: 8px;

    color: #fff;
    background: #36b557;
}

.room-amenity:nth-child(8) i {
    background: #e33d3d;
}


/* =========================================================
   HOUSE RULES
   ========================================================= */

.room-house-rules {
    display: grid;
    grid-template-columns: 1fr 285px;
    gap: 35px;

    align-items: center;

    margin-bottom: 45px;
}

.room-house-rules-image {
    height: 190px;
    overflow: hidden;
}

.room-house-rules-image img {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;
}


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

.room-faq {
    margin-bottom: 50px;
}

.room-faq-item {
    margin-bottom: 17px;

    border: 1px solid #c9a76c;
}

.room-faq-question {
    width: 100%;

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

    padding: 22px 25px;

    border: 0;
    background: transparent;

    font-family: var(--heading-font);
    font-size: 18px;
    font-weight: 400;

    text-align: left;

    color: #554c43;

    cursor: pointer;
}

.room-faq-question i {
    font-size: 11px;
    color: #a78955;
}

.room-faq-answer {
    display: none;

    padding: 0 25px 22px;
}

.room-faq-item.active .room-faq-answer {
    display: block;
}

.room-faq-answer p {
    margin: 0;

    font-family: var(--body-font);
    font-size: 13px;
    line-height: 1.75;

    color: #756b60;
}


/* =========================================================
   CANCELLATION
   ========================================================= */

.room-cancellation {
    padding-bottom: 30px;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.room-sidebar {
    align-self: start;
}

.room-booking-box {
    border: 1px solid #b9965d;
    padding: 3px;
}

.room-booking-title {
    padding: 20px;

    text-align: center;

    background: linear-gradient(
        135deg,
        #a78955,
        #705325
    );
}

.room-booking-title h2 {
    margin: 0;

    font-family: var(--heading-font);
    font-size: 20px;
    font-weight: 400;

    color: #fff;
}

.room-booking-body {
    padding: 25px 20px 22px;
    background: #fffdf8;
}

.room-booking-field {
    margin-bottom: 14px;
}

.room-booking-field label {
    display: block;
    margin-bottom: 7px;

    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;

    color: #554c43;
}

.room-booking-field input,
.room-booking-field select {
    width: 100%;
    height: 43px;

    padding: 0 12px;

    border: 1px solid #c9a76c;
    background: #fffdf8;

    font-family: var(--body-font);
    font-size: 12px;

    color: #756b60;
    outline: none;
}

.room-booking-button {
    width: 100%;
    height: 46px;

    margin-top: 5px;

    border: 0;

    background: #a78955;
    color: #fff;

    font-family: var(--body-font);
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    transition: background .3s ease;
}

.room-booking-button:hover {
    background: #806337;
}


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

.room-sidebar-amenities {
    padding: 35px 20px;
}

.room-sidebar-amenities h2 {
    margin: 0 0 25px;

    font-family: var(--heading-font);
    font-size: 23px;
    font-weight: 400;

    color: #40372e;
}

.sidebar-amenity {
    display: flex;
    align-items: center;

    gap: 15px;

    padding: 12px 0;

    font-family: var(--body-font);
    font-size: 13px;

    color: #756b60;
}

.sidebar-amenity i {
    width: 20px;

    text-align: center;

    color: #a78955;
}


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

@media (min-width: 577px) and (max-width: 1100px) {

    .room-details-section {
        padding-left: 30px;
        padding-right: 30px;
    }

    .room-main-image {
        height: 480px;
    }

    .room-details-layout {
        grid-template-columns: minmax(0, 1fr) 290px;
        gap: 35px;
    }

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

}


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

@media (max-width: 576px) {

    .room-details-section {
        padding: 30px 18px 75px;
    }

    .room-availability-row {
        justify-content: stretch;
        margin-bottom: 20px;
    }

    .room-availability-row > div {
        display: none;
    }

    .room-availability-btn {
        width: 100%;
        min-width: 0;
        height: 48px;
        font-size: 11px;
    }

    .room-main-image {
        height: 300px;
    }

    .room-details-layout {
        display: block;
        margin-top: 35px;
    }

    .room-tabs {
        gap: 22px;
    }

    .room-tab {
        font-size: 16px;
    }

    .room-description {
        padding-top: 23px;
    }

    .room-description p,
    .room-cancellation p,
    .room-house-rules p {
        font-size: 13px;
    }

    .room-check-info {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 35px;
    }

    .room-amenities-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px 10px;
    }

    .room-amenity {
        font-size: 11px;
    }

    .room-house-rules {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .room-house-rules-image {
        height: 220px;
    }

    .room-faq-question {
        padding: 18px 17px;
        font-size: 16px;
    }

    .room-faq-answer {
        padding: 0 17px 18px;
    }

    .room-sidebar {
        margin-top: 55px;
    }

}
/* =========================================================
   PREMIUM ROOM - TYPOGRAPHY UPDATE
   ========================================================= */

.room-description p,
.room-cancellation p,
.room-house-rules p {
    font-size: 15px;
    line-height: 1.85;
}


.room-check-item h3 {
    font-size: 23px;
}


.room-check-item p {
    font-size: 14px;
    line-height: 1.8;
}


.room-amenities h2,
.room-house-rules h2,
.room-cancellation h2 {
    font-size: 28px;
}


.room-amenity {
    font-size: 14px;
}


.room-amenity i {
    width: 16px;
    height: 16px;
    font-size: 9px;
}


.room-faq-question {
    font-size: 21px;
    padding: 24px 27px;
}


.room-faq-answer p {
    font-size: 14px;
    line-height: 1.8;
}


.room-sidebar-amenities h2 {
    font-size: 27px;
}


.sidebar-amenity {
    font-size: 14px;
    padding: 14px 0;
}


.room-booking-title h2 {
    font-size: 22px;
}
/* =========================================================
   SINGLE SIDEBAR BOX
   ========================================================= */

.room-sidebar-box {
    width: 100%;

    border: 1px solid #b9965d;
    padding: 3px;

    background: #fffdf8;
}


/* BOOKING */

.room-booking-title {
    padding: 22px 20px;

    text-align: center;

    background: linear-gradient(
        135deg,
        #a78955,
        #705325
    );
}


.room-booking-title h2 {
    margin: 0;

    font-family: var(--heading-font);
    font-size: 23px;
    font-weight: 400;

    color: #fff;
}


.room-booking-body {
    padding: 27px 20px 25px;
}


/* FORM */

.room-booking-field {
    margin-bottom: 15px;
}


.room-booking-field label {
    display: block;

    margin-bottom: 7px;

    font-family: var(--body-font);
    font-size: 12px;
    font-weight: 600;

    color: #554c43;
}


.room-booking-field input,
.room-booking-field select {
    width: 100%;
    height: 46px;

    padding: 0 12px;

    border: 1px solid #c9a76c;

    background: #fffdf8;

    font-family: var(--body-font);
    font-size: 13px;

    color: #756b60;

    outline: none;
}


.room-booking-button {
    width: 100%;
    height: 48px;

    margin-top: 6px;

    border: 0;

    background: #a78955;
    color: #fff;

    font-family: var(--body-font);
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition: background .3s ease;
}


.room-booking-button:hover {
    background: #806337;
}


/* =========================================================
   AMENITIES INSIDE SAME BOX
   ========================================================= */

.room-sidebar-amenities {
    padding: 30px 20px 25px;
}


.room-sidebar-amenities h2 {
    margin: 0 0 18px;

    font-family: var(--heading-font);
    font-size: 27px;
    font-weight: 400;

    color: #40372e;
}


.sidebar-amenity {
    display: flex;
    align-items: center;

    gap: 15px;

    padding: 13px 0;

    font-family: var(--body-font);
    font-size: 14px;

    color: #756b60;
}


.sidebar-amenity i {
    width: 20px;

    text-align: center;

    color: #a78955;

    font-size: 15px;
}


/* =========================================================
   IMAGE INSIDE SAME BOX
   ========================================================= */

.room-sidebar-image {
    width: 100%;

    padding: 0 17px 17px;
}


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

    display: block;

    object-fit: cover;
    object-position: center;
}
.room-details-layout {
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 60px;
}


.room-description {
    padding: 30px 0 40px;
}


.room-check-info {
    gap: 55px;
    margin: 15px 0 45px;
}


.room-amenities {
    margin-bottom: 60px;
}


.room-house-rules {
    margin-bottom: 50px;
}
/* =========================================================
   OTHER ROOMS
   ========================================================= */

.other-rooms-section {
    width: 100%;
    padding: 105px 50px 120px;
    background: #f7f2e8;
    overflow: hidden;
}


.other-rooms-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}


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

.other-rooms-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 48px;
}


.other-rooms-header h2 {
    margin: 0;

    font-family: var(--heading-font);
    font-size: 48px;
    font-weight: 400;
    line-height: 1.15;

    color: #40372e;
}


/* =========================================================
   ARROWS
   ========================================================= */

.other-rooms-arrows {
    display: flex;
    align-items: center;
    gap: 25px;
}


.other-rooms-arrows button {
    width: 28px;
    height: 35px;

    padding: 0;

    border: 0;
    background: transparent;

    color: #a78955;

    font-size: 17px;

    cursor: pointer;

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


.other-rooms-arrows button:hover {
    color: #40372e;
}


.other-room-prev:hover {
    transform: translateX(-3px);
}


.other-room-next:hover {
    transform: translateX(3px);
}


/* =========================================================
   SLIDER
   ========================================================= */

.other-rooms-slider {
    width: 100%;
    overflow: hidden;
}


.other-rooms-track {
    display: flex;
    gap: 30px;

    will-change: transform;

    transition: transform 0.7s ease;
}


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

.other-room-card {
    flex: 0 0 calc((100% - 60px) / 3);

    min-width: 0;
}


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

.other-room-image {
    display: block;

    width: 100%;
    height: 300px;

    overflow: hidden;

    text-decoration: none;
}


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

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform 0.7s ease;
}


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


/* =========================================================
   ROOM INFORMATION
   ========================================================= */

.other-room-info {
    padding-top: 27px;
}


.other-room-info > span {
    display: block;

    margin-bottom: 11px;

    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 2.5px;
    text-transform: uppercase;

    color: #a18450;
}


.other-room-info h3 {
    margin: 0;
}


.other-room-info h3 a {
    font-family: var(--heading-font);
    font-size: 34px;
    font-weight: 400;
    line-height: 1.15;

    color: #40372e;

    text-decoration: none;

    transition: color 0.3s ease;
}


.other-room-info h3 a:hover {
    color: #a18450;
}


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

@media (min-width: 577px) and (max-width: 1100px) {

    .other-rooms-section {
        padding: 90px 35px 100px;
    }


    .other-rooms-header h2 {
        font-size: 43px;
    }


    .other-rooms-track {
        gap: 20px;
    }


    .other-room-card {
        flex: 0 0 calc((100% - 20px) / 2);
    }


    .other-room-image {
        height: 290px;
    }


    .other-room-info h3 a {
        font-size: 29px;
    }

}


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

@media (max-width: 576px) {

    .other-rooms-section {
        padding: 70px 18px 80px;
    }


    .other-rooms-header {
        margin-bottom: 32px;
    }


    .other-rooms-header h2 {
        font-size: 39px;
    }


    .other-rooms-arrows {
        gap: 12px;
    }


    .other-rooms-arrows button {
        width: 25px;
        font-size: 14px;
    }


    .other-rooms-track {
        gap: 18px;
    }


    .other-room-card {
        flex: 0 0 100%;
    }


    .other-room-image {
        height: 300px;
    }


    .other-room-info {
        padding-top: 22px;
    }


    .other-room-info > span {
        font-size: 9px;
        letter-spacing: 2px;
    }


    .other-room-info h3 a {
        font-size: 30px;
    }

}
/* =========================================================
   OTHER ROOMS - HOVER OVERLAY
   ========================================================= */

.other-room-image {
    position: relative;
    display: block;
    overflow: hidden;
}


/* DARK OVERLAY */

.other-room-hover {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    min-height: 85px;

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

    padding: 25px 22px 20px;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.90),
        rgba(0, 0, 0, 0.55),
        transparent
    );

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;

    z-index: 2;
}


/* SHOW ON HOVER */

.other-room-card:hover .other-room-hover {
    opacity: 1;
    transform: translateY(0);
}


/* ICONS */

.other-room-icons {
    display: flex;
    align-items: center;

    gap: 18px;
}


.other-room-icons i {
    font-size: 16px;
    color: #ffffff;

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


.other-room-icons i:hover {
    color: #c5a66d;
    transform: translateY(-2px);
}


/* VIEW DETAILS */

.other-room-view {
    font-family: var(--body-font);

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

    color: #ffffff;

    text-decoration: underline;
    text-underline-offset: 4px;

    white-space: nowrap;
}


.other-room-view:hover {
    color: #c5a66d;
}
/* =========================================================
   PRESIDENTIAL SUITE HERO
   ========================================================= */

.presidential-room-page-hero {
    position: relative;

    width: 100%;
    height: 360px;

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

    background-image: url("../images/room/Presidential-Suites.jpeg");
    background-size: cover;
    background-position: center center;

    overflow: hidden;
}


.presidential-room-page-hero-overlay {
    position: absolute;
    inset: 0;

    background: rgba(247, 242, 232, 0.78);

    z-index: 1;
}


.presidential-room-page-hero-content {
    position: relative;

    z-index: 2;

    width: 100%;

    padding: 0 20px;

    text-align: center;

    transform: translateY(28px);
}


.presidential-room-page-hero-content h1 {
    margin: 0 0 18px;

    font-family: var(--heading-font);
    font-size: 62px;
    font-weight: 400;
    line-height: 1.1;

    color: #40372e;
}


.presidential-room-page-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 3px;
    text-transform: uppercase;

    color: #806337;
}


.presidential-room-page-breadcrumb a {
    color: #806337;
    text-decoration: none;

    transition: color 0.3s ease;
}


.presidential-room-page-breadcrumb a:hover {
    color: #40372e;
}


.presidential-room-page-breadcrumb span {
    color: #a78955;
}


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

@media (min-width: 577px) and (max-width: 1100px) {

    .presidential-room-page-hero {
        height: 330px;
    }

    .presidential-room-page-hero-content h1 {
        font-size: 52px;
    }

    .presidential-room-page-breadcrumb {
        font-size: 9px;
        letter-spacing: 2.5px;
    }

}


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

@media (max-width: 576px) {

    .presidential-room-page-hero {
        height: 300px;

        background-position: center center;
    }

    .presidential-room-page-hero-overlay {
        background: rgba(247, 242, 232, 0.82);
    }

    .presidential-room-page-hero-content {
        padding: 0 18px;

        transform: translateY(20px);
    }

    .presidential-room-page-hero-content h1 {
        margin-bottom: 15px;

        font-size: 42px;
        line-height: 1.15;
    }

    .presidential-room-page-breadcrumb {
        gap: 8px;

        font-size: 8px;
        letter-spacing: 2px;

        flex-wrap: wrap;
    }

}
.club-room-page-hero {
    position: relative;
    width: 100%;
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("../images/room/Club-room.jpeg");
    background-size: cover;
    background-position: center center;
    overflow: hidden;
}

.club-room-page-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(247, 242, 232, 0.78);
    z-index: 1;
}

.club-room-page-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 20px;
    text-align: center;
    transform: translateY(28px);
}

.club-room-page-hero-content h1 {
    margin: 0 0 18px;
    font-family: var(--heading-font);
    font-size: 62px;
    font-weight: 400;
    line-height: 1.1;
    color: #40372e;
}

.club-room-page-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #806337;
}

.club-room-page-breadcrumb a {
    color: #806337;
    text-decoration: none;
}

.club-room-page-breadcrumb span {
    color: #a18450;
}
.executive-room-page-hero {
    position: relative;
    width: 100%;
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("../images/room/executive-room.jpeg");
    background-size: cover;
    background-position: center center;
    overflow: hidden;
}

.executive-room-page-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(247, 242, 232, 0.78);
    z-index: 1;
}

.executive-room-page-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 20px;
    text-align: center;
    transform: translateY(28px);
}

.executive-room-page-hero-content h1 {
    margin: 0 0 18px;
    font-family: var(--heading-font);
    font-size: 62px;
    font-weight: 400;
    line-height: 1.1;
    color: #40372e;
}

.executive-room-page-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #806337;
}

.executive-room-page-breadcrumb a {
    color: #806337;
    text-decoration: none;
}

.executive-room-page-breadcrumb span {
    color: #a18450;
}
.contact-page-hero {
    position: relative;
    width: 100%;
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("../images/room/16.png");
    background-size: cover;
    background-position: center center;
    overflow: hidden;
}

.contact-page-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(247, 242, 232, 0.78);
    z-index: 1;
}

.contact-page-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 20px;
    text-align: center;
    transform: translateY(28px);
}

.contact-page-hero-content h1 {
    margin: 0 0 18px;
    font-family: var(--heading-font);
    font-size: 62px;
    font-weight: 400;
    line-height: 1.1;
    color: #40372e;
}

.contact-page-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #806337;
}

.contact-page-breadcrumb a {
    color: #806337;
    text-decoration: none;
}

.contact-page-breadcrumb span {
    color: #a18450;
}
/* =========================================
   CONTACT LOCATION SECTION
========================================= */

.contact-location-section {
    width: 100%;
    padding: 70px 50px 100px;
    background: #fffaf0;
    overflow: hidden;
}

.contact-location-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}


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

.contact-location-heading {
    max-width: 760px;
    margin: 0 auto 70px;
    text-align: center;
}

.contact-location-heading > span {
    display: block;

    margin-bottom: 14px;

    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;

    color: #a18450;
}

.contact-location-heading h2 {
    margin: 0 0 20px;

    font-family: var(--heading-font);
    font-size: 56px;
    font-weight: 400;
    line-height: 1.1;

    color: #40372e;
}

.contact-location-heading p {
    max-width: 680px;
    margin: 0 auto;

    font-family: var(--body-font);
    font-size: 14px;
    line-height: 1.8;

    color: #62584e;
}


/* =========================================
   THREE CARD GRID
========================================= */

.contact-location-grid {
    display: grid;

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

    gap: 45px;

    align-items: center;
}


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

.contact-location-card {
    position: relative;

    min-height: 295px;

    padding: 48px 35px;

    background: transparent;

    border: 1px solid transparent;

    box-sizing: border-box;

    transition:
        background 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}


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

.contact-location-card h3 {
    position: relative;
    z-index: 4;

    margin: 0 0 32px;

    font-family: var(--heading-font);
    font-size: 25px;
    font-weight: 400;
    line-height: 1.2;

    color: #a17d43;

    transition: color 0.35s ease;
}


/* =========================================
   FAINT BACKGROUND NUMBER
========================================= */

.contact-location-number {
    position: absolute;

    right: 5px;
    bottom: 0;

    z-index: 1;

    font-family: var(--heading-font);
    font-size: 170px;
    font-weight: 400;
    line-height: 1;

    color: rgba(164, 132, 76, 0.055);

    pointer-events: none;

    transition: opacity 0.35s ease;
}


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

.contact-location-info {
    position: relative;
    z-index: 4;
}

.contact-info-row {
    display: flex;
    align-items: flex-start;

    gap: 18px;

    margin-bottom: 23px;
}

.contact-info-row:last-child {
    margin-bottom: 0;
}

.contact-info-row i {
    width: 18px;
    min-width: 18px;

    padding-top: 3px;

    font-size: 14px;

    color: #a18450;

    transition: transform 0.3s ease;
}

.contact-info-row span {
    font-family: var(--body-font);
    font-size: 13px;
    line-height: 1.7;

    color: #40372e;
}


/* =========================================
   HOVER DECORATIVE FRAME
   HIDDEN BY DEFAULT
========================================= */

.contact-card-frame {
    position: absolute;

    inset: 17px;

    z-index: 2;

    border: 1px solid #b9965d;

    opacity: 0;

    transform: scale(0.97);

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;

    pointer-events: none;
}


/* Inner border */

.contact-card-frame::before {
    content: "";

    position: absolute;

    inset: 5px;

    border: 1px solid rgba(185, 150, 93, 0.45);
}


/* =========================================
   CORNER ORNAMENTS
========================================= */

.frame-corner {
    position: absolute;

    width: 28px;
    height: 28px;

    z-index: 3;

    border-color: #b9965d;

    border-style: solid;

    background: #fffaf0;
}


/* Top Left */

.frame-top-left {
    top: -7px;
    left: -7px;

    border-width: 1px 0 0 1px;

    border-radius: 12px 0 0 0;
}


/* Top Right */

.frame-top-right {
    top: -7px;
    right: -7px;

    border-width: 1px 1px 0 0;

    border-radius: 0 12px 0 0;
}


/* Bottom Left */

.frame-bottom-left {
    bottom: -7px;
    left: -7px;

    border-width: 0 0 1px 1px;

    border-radius: 0 0 0 12px;
}


/* Bottom Right */

.frame-bottom-right {
    right: -7px;
    bottom: -7px;

    border-width: 0 1px 1px 0;

    border-radius: 0 0 12px 0;
}


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

.contact-location-card:hover {
    background: #fffaf0;

    border-color: #b9965d;

    box-shadow: 0 12px 30px rgba(64, 55, 46, 0.08);
}

.contact-location-card:hover .contact-card-frame {
    opacity: 1;

    transform: scale(1);
}

.contact-location-card:hover .contact-info-row i {
    transform: translateX(2px);
}


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

@media (max-width: 1000px) {

    .contact-location-section {
        padding: 70px 30px 90px;
    }

    .contact-location-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 25px;
    }

    .contact-location-card:last-child {
        grid-column: span 2;

        max-width: 520px;
        width: 100%;

        margin: 0 auto;
    }

}


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

@media (max-width: 576px) {

    .contact-location-section {
        padding: 60px 18px 75px;
    }


    .contact-location-heading {
        margin-bottom: 45px;
    }


    .contact-location-heading > span {
        font-size: 9px;
        letter-spacing: 3px;
    }


    .contact-location-heading h2 {
        font-size: 40px;
        line-height: 1.15;
    }


    .contact-location-heading p {
        font-size: 13px;
        line-height: 1.75;
    }


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

        gap: 12px;
    }


    .contact-location-card {
        min-height: 285px;

        padding: 42px 28px;
    }


    .contact-location-card:last-child {
        grid-column: auto;

        max-width: none;
    }


    .contact-location-card h3 {
        font-size: 24px;

        margin-bottom: 28px;
    }


    .contact-location-number {
        font-size: 130px;

        right: 0;
    }


    .contact-info-row {
        gap: 15px;

        margin-bottom: 20px;
    }


    .contact-info-row span {
        font-size: 13px;
    }


    .contact-card-frame {
        inset: 14px;
    }

}
/* Main Heading */
.contact-location-heading h2 {
    font-size: 60px;
}

/* Description */
.contact-location-heading p {
    font-size: 16px;
    line-height: 1.8;
}

/* Card Heading */
.contact-location-card h3 {
    font-size: 28px;
}

/* Card Information */
.contact-info-row span {
    font-size: 15px;
    line-height: 1.75;
}

/* Icons */
.contact-info-row i {
    font-size: 16px;
}
/* =========================================
   CONTACT FORM SECTION
========================================= */

.contact-form-section {
    width: 100%;
    padding: 90px 50px 110px;
    background: #fffaf0;
    overflow: hidden;
}

.contact-form-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 440px 1fr;
    gap: 100px;

    align-items: center;
}


/* =========================================
   LEFT IMAGE
========================================= */

.contact-form-image-box {
    position: relative;

    width: 100%;
    height: 485px;

    padding: 7px;

    border: 1px solid #b9965d;

    box-sizing: border-box;
}


.contact-form-image-box img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


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

.contact-form-image-overlay {
    position: absolute;

    top: 7px;
    right: 7px;
    bottom: 7px;
    left: 7px;

    background: rgba(35, 30, 25, 0.57);

    z-index: 1;
}


/* =========================================
   IMAGE CONTENT
========================================= */

.contact-form-image-content {
    position: absolute;

    top: 7px;
    right: 7px;
    bottom: 7px;
    left: 7px;

    z-index: 2;

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

    text-align: center;
}


.contact-form-image-ornament {
    margin-bottom: 20px;

    font-size: 35px;

    color: #b9965d;

    line-height: 1;
}


.contact-form-image-content h2 {
    margin: 0 0 35px;

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

    font-size: 34px;
    font-weight: 400;
    line-height: 1.2;

    color: #ffffff;
}


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

.contact-reservation-btn {
    display: inline-flex;

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

    min-width: 245px;
    height: 46px;

    padding: 0 25px;

    background: #ad8b50;

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

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

    letter-spacing: 1.2px;

    color: #ffffff;

    text-decoration: none;

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


.contact-reservation-btn:hover {
    background: #94743e;

    transform: translateY(-2px);
}


/* =========================================
   RIGHT CONTENT
========================================= */

.contact-form-content {
    width: 100%;
    max-width: 770px;
}


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

.contact-form-heading {
    margin-bottom: 50px;
}


.contact-form-heading > span {
    display: block;

    margin-bottom: 13px;

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

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

    letter-spacing: 4px;

    color: #a18450;
}


.contact-form-heading h2 {
    margin: 0 0 20px;

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

    font-size: 58px;
    font-weight: 400;

    line-height: 1.1;

    color: #40372e;
}


.contact-form-heading p {
    max-width: 650px;

    margin: 0;

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

    font-size: 15px;
    line-height: 1.8;

    color: #62584e;
}


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

.hotel-contact-form {
    width: 100%;
}


.contact-form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;

    margin-bottom: 26px;
}


.contact-form-field {
    width: 100%;
}


.contact-form-field input,
.contact-form-message textarea {

    width: 100%;

    box-sizing: border-box;

    border: 1px solid #b9965d;

    border-radius: 0;

    outline: none;

    background: transparent;

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

    font-size: 15px;

    color: #40372e;

    transition:
        border-color 0.3s ease,
        background 0.3s ease;
}


.contact-form-field input {

    height: 58px;

    padding: 0 20px;
}


.contact-form-message textarea {

    height: 115px;

    padding: 17px 20px;

    resize: vertical;

    margin-bottom: 26px;
}


/* =========================================
   PLACEHOLDER
========================================= */

.contact-form-field input::placeholder,
.contact-form-message textarea::placeholder {

    color: #62584e;

    opacity: 1;
}


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

.contact-form-field input:focus,
.contact-form-message textarea:focus {

    border-color: #806337;

    background: rgba(255, 255, 255, 0.25);
}


/* =========================================
   SEND BUTTON
========================================= */

.contact-form-submit {

    height: 50px;

    min-width: 95px;

    padding: 0 28px;

    border: 0;

    border-radius: 0;

    background: #a18450;

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

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 1px;

    color: #ffffff;

    cursor: pointer;

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


.contact-form-submit:hover {

    background: #896b3e;

    transform: translateY(-2px);
}


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

@media (max-width: 1050px) {

    .contact-form-section {
        padding: 80px 35px 95px;
    }


    .contact-form-container {

        grid-template-columns: 380px 1fr;

        gap: 55px;
    }


    .contact-form-image-box {
        height: 450px;
    }


    .contact-form-heading h2 {
        font-size: 50px;
    }

}


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

@media (max-width: 768px) {

    .contact-form-section {

        padding: 70px 20px 80px;
    }


    .contact-form-container {

        grid-template-columns: 1fr;

        gap: 55px;
    }


    .contact-form-image-box {

        max-width: 500px;

        height: 470px;

        margin: 0 auto;
    }


    .contact-form-content {

        max-width: 100%;
    }


    .contact-form-heading {

        margin-bottom: 38px;
    }


    .contact-form-heading h2 {

        font-size: 46px;
    }


    .contact-form-heading p {

        font-size: 15px;
    }


    .contact-form-row {

        grid-template-columns: 1fr;

        gap: 20px;

        margin-bottom: 20px;
    }


    .contact-form-field input {

        height: 56px;
    }

}


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

@media (max-width: 576px) {

    .contact-form-section {

        padding: 55px 18px 70px;
    }


    .contact-form-image-box {

        height: 400px;
    }


    .contact-form-image-content h2 {

        font-size: 30px;
    }


    .contact-form-image-ornament {

        font-size: 30px;

        margin-bottom: 16px;
    }


    .contact-reservation-btn {

        min-width: 210px;

        font-size: 13px;
    }


    .contact-form-heading > span {

        font-size: 10px;

        letter-spacing: 3px;
    }


    .contact-form-heading h2 {

        font-size: 40px;
    }


    .contact-form-heading p {

        font-size: 14px;
    }


    .contact-form-field input,
    .contact-form-message textarea {

        font-size: 14px;
    }

}
.contact-form-message-box {
    margin-top: 20px;
    padding: 14px 18px;

    font-family: var(--body-font);
    font-size: 14px;
    line-height: 1.5;

    border: 1px solid #b9965d;

    opacity: 1;
    transform: translateY(0);

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

.contact-form-message-box.success {
    background: rgba(185, 150, 93, 0.08);
    color: #66502f;
}

.contact-form-message-box.error {
    background: rgba(166, 75, 60, 0.06);
    border-color: #a64b3c;
    color: #8b3d32;
}

.contact-form-message-box.hide {
    opacity: 0;
    transform: translateY(-5px);
}


.contact-form-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}
.blog-page-hero {
    position: relative;

    width: 100%;
    height: 360px;

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

    background-image: url("../images/room/17.png");
    background-size: cover;
    background-position: center center;

    overflow: hidden;
}


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

.blog-page-hero-overlay {
    position: absolute;

    inset: 0;

    background: rgba(247, 242, 232, 0.78);

    z-index: 1;
}


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

.blog-page-hero-content {
    position: relative;

    z-index: 2;

    width: 100%;

    padding: 0 20px;

    text-align: center;

    transform: translateY(28px);
}


.blog-page-hero-content h1 {
    margin: 0 0 18px;

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

    font-size: 62px;
    font-weight: 400;

    line-height: 1.1;

    color: #40372e;
}


/* =========================================
   BREADCRUMB
========================================= */

.blog-page-breadcrumb {
    display: flex;

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

    gap: 12px;

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

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

    letter-spacing: 3px;

    text-transform: uppercase;

    color: #806337;
}


.blog-page-breadcrumb a {
    color: #806337;

    text-decoration: none;

    transition: color 0.3s ease;
}


.blog-page-breadcrumb a:hover {
    color: #40372e;
}


.blog-page-breadcrumb span {
    color: #a18450;
}


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

@media (max-width: 1100px) {

    .blog-page-hero {
        height: 330px;
    }


    .blog-page-hero-content h1 {
        font-size: 52px;
    }

}


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

@media (max-width: 576px) {

    .blog-page-hero {
        height: 300px;
    }


    .blog-page-hero-content {
        transform: translateY(25px);
    }


    .blog-page-hero-content h1 {
        font-size: 42px;

        margin-bottom: 15px;
    }


    .blog-page-breadcrumb {
        font-size: 9px;

        letter-spacing: 2.5px;

        gap: 9px;
    }

}
/* =========================================
   BLOG SINGLE SECTION
========================================= */

.blog-single-section {
    width: 100%;
    padding: 90px 50px 110px;

    background: #fffaf0;

    overflow: hidden;
}


.blog-single-container {
    width: 100%;
    max-width: 1165px;

    margin: 0 auto;

    display: grid;

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

    gap: 64px;

    align-items: start;
}


/* =========================================
   MAIN CONTENT
========================================= */

.blog-single-content {
    width: 100%;
}


.blog-single-main-image {
    width: 100%;
    height: 410px;

    overflow: hidden;

    margin-bottom: 30px;
}


.blog-single-main-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================
   META
========================================= */

.blog-single-meta {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 28px;
}


.blog-single-meta span {
    font-family: var(--body-font);

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

    letter-spacing: 3px;

    color: #a18450;
}


.blog-single-meta i {
    font-size: 12px;

    color: #a18450;
}


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

.blog-single-text p {
    margin: 0 0 25px;

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

    font-size: 15px;

    line-height: 1.85;

    color: #40372e;
}


.blog-single-text h2 {
    margin: 45px 0 20px;

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

    font-size: 30px;
    font-weight: 400;

    line-height: 1.3;

    color: #40372e;
}


/* =========================================
   TWO IMAGES
========================================= */

.blog-single-two-images {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

    margin: 35px 0 45px;
}


.blog-single-two-images img {
    width: 100%;
    height: 170px;

    display: block;

    object-fit: cover;
}


/* =========================================
   FEATURE LIST
========================================= */

.blog-feature-list {
    display: grid;

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

    column-gap: 30px;
    row-gap: 20px;

    margin: 30px 0 35px;
}


.blog-feature-item {
    display: flex;

    align-items: flex-start;

    gap: 12px;
}


.blog-feature-item > span {
    margin-top: 2px;

    font-size: 20px;

    color: #a18450;
}


.blog-feature-item p {
    margin: 0;

    font-size: 14px;

    line-height: 1.65;
}


/* =========================================
   QUOTE
========================================= */

.blog-single-quote {
    margin: 45px 0 55px;

    padding: 0;

    background: #ae9465;
}


.blog-quote-frame {
    position: relative;

    margin: 8px;

    padding: 35px 45px;

    border: 1px solid rgba(255, 255, 255, 0.8);
}


.blog-quote-frame::before {
    content: "";

    position: absolute;

    inset: 5px;

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

    pointer-events: none;
}


.blog-quote-frame p {
    position: relative;

    z-index: 2;

    margin: 0 0 15px;

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

    font-size: 23px;

    line-height: 1.65;

    color: #ffffff;
}


.quote-author {
    position: relative;

    z-index: 2;

    display: block;

    text-align: right;

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

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

    letter-spacing: 3px;

    color: #ffffff;
}


/* =========================================
   SOCIAL + CATEGORY
========================================= */

.blog-single-bottom-meta {
    display: flex;

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

    margin-bottom: 55px;
}


.blog-social-links {
    display: flex;

    align-items: center;

    gap: 8px;
}


.blog-social-links a {
    width: 26px;
    height: 26px;

    display: flex;

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

    border-radius: 50%;

    background: #a18450;

    color: #ffffff;

    font-size: 12px;

    text-decoration: none;

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


.blog-social-links a:hover {
    background: #806337;

    transform: translateY(-2px);
}


.blog-category {
    padding: 8px 18px;

    border: 1px solid #a18450;

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

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 3px;

    color: #806337;

    text-decoration: none;
}


/* =========================================
   COMMENTS
========================================= */

.blog-comments {
    width: 100%;
}


.blog-comments h3 {
    margin: 0 0 35px;

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

    font-size: 25px;
    font-weight: 400;

    color: #40372e;
}


.blog-comment {
    display: flex;

    align-items: flex-start;

    gap: 18px;

    padding-bottom: 30px;

    border-bottom: 1px solid rgba(64, 55, 46, 0.15);
}


.blog-comment-avatar {
    width: 48px;
    min-width: 48px;
    height: 48px;

    display: flex;

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

    border-radius: 50%;

    background: #d5d5d5;

    color: #ffffff;

    font-size: 21px;
}


.blog-comment-content strong {
    display: block;

    margin-bottom: 5px;

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

    font-size: 14px;

    color: #40372e;
}


.blog-comment-content > span {
    display: block;

    margin-bottom: 14px;

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

    font-size: 11px;

    color: #a18450;
}


.blog-comment-content p {
    margin: 0;

    font-size: 14px;

    line-height: 1.8;
}


.blog-comments-closed {
    padding-top: 22px;

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

    font-size: 14px;

    color: #40372e;
}


/* =========================================
   PREVIOUS / NEXT
========================================= */

.blog-story-navigation {
    display: flex;

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

    margin-top: 45px;

    padding-top: 30px;

    border-top: 1px solid rgba(64, 55, 46, 0.15);
}


.blog-story-navigation a {
    display: flex;

    align-items: center;

    gap: 8px;

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

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

    letter-spacing: 3px;

    color: #806337;

    text-decoration: none;

    transition: color 0.3s ease;
}


.blog-story-navigation a:hover {
    color: #40372e;
}


/* =========================================
   SIDEBAR
========================================= */

.blog-sidebar {
    width: 100%;
}


.blog-sidebar-box {
    padding: 45px 28px 30px;

    border: 1px solid #b9965d;

    box-shadow:
        inset 0 0 0 5px #fffaf0,
        inset 0 0 0 6px rgba(185, 150, 93, 0.65);
}


/* =========================================
   SIDEBAR SECTION
========================================= */

.blog-sidebar-section {
    margin-bottom: 42px;
}


.blog-sidebar-section h3 {
    margin: 0 0 28px;

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

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

    color: #a17d43;
}


/* =========================================
   RECENT POSTS
========================================= */

.recent-post {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    margin-bottom: 25px;

    text-decoration: none;
}


.recent-post-image {
    width: 88px;
    min-width: 88px;
    height: 88px;

    overflow: hidden;
}


.recent-post-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.recent-post-content span {
    display: block;

    margin-bottom: 8px;

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

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

    letter-spacing: 2px;

    color: #a18450;
}


.recent-post-content h4 {
    margin: 0;

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

    font-size: 15px;
    font-weight: 400;

    line-height: 1.35;

    color: #40372e;
}


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

.blog-instagram-grid {
    display: grid;

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

    gap: 8px;
}


.blog-instagram-grid a {
    display: block;

    aspect-ratio: 1 / 1;

    overflow: hidden;
}


.blog-instagram-grid img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}


.blog-instagram-grid a:hover img {
    transform: scale(1.06);
}


/* =========================================
   TAGS
========================================= */

.blog-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


.blog-tags a {
    padding: 8px 13px;

    border: 1px solid #b9965d;

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

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2px;

    color: #806337;

    text-decoration: none;

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


.blog-tags a:hover {
    background: #a18450;

    color: #ffffff;
}


/* =========================================
   SIDEBAR AD
========================================= */

.blog-sidebar-ad {
    width: 100%;

    margin-top: 10px;
}


.blog-sidebar-ad img {
    width: 100%;

    height: auto;

    display: block;
}


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

@media (max-width: 1050px) {

    .blog-single-section {
        padding: 75px 30px 90px;
    }


    .blog-single-container {
        grid-template-columns: minmax(0, 1fr) 330px;

        gap: 40px;
    }


    .blog-single-main-image {
        height: 360px;
    }


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

}


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

@media (max-width: 768px) {

    .blog-single-section {
        padding: 60px 20px 75px;
    }


    .blog-single-container {
        grid-template-columns: 1fr;

        gap: 60px;
    }


    .blog-single-main-image {
        height: 330px;
    }


    .blog-single-text p {
        font-size: 15px;
    }


    .blog-single-text h2 {
        font-size: 28px;
    }


    .blog-single-two-images {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .blog-single-two-images img {
        height: 230px;
    }


    .blog-feature-list {
        grid-template-columns: 1fr;
    }


    .blog-quote-frame {
        padding: 30px 25px;
    }


    .blog-quote-frame p {
        font-size: 20px;
    }


    .blog-sidebar {
        max-width: 600px;

        margin: 0 auto;
    }

}


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

@media (max-width: 576px) {

    .blog-single-section {
        padding: 50px 18px 65px;
    }


    .blog-single-main-image {
        height: 250px;
    }


    .blog-single-meta span {
        font-size: 10px;

        letter-spacing: 2px;
    }


    .blog-single-text p {
        font-size: 14px;
    }


    .blog-single-text h2 {
        font-size: 25px;
    }


    .blog-single-bottom-meta {
        align-items: flex-start;

        gap: 20px;
    }


    .blog-story-navigation a {
        font-size: 9px;

        letter-spacing: 2px;
    }


    .blog-sidebar-box {
        padding: 35px 20px 25px;
    }

}
.rasa-multicusine-page-hero {
    position: relative;

    width: 100%;
    height: 360px;

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

    background-image: url("../images/room/17.png");
    background-size: cover;
    background-position: center center;

    overflow: hidden;
}


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

.rasa-multicusine-page-hero-overlay {
    position: absolute;

    inset: 0;

    background: rgba(247, 242, 232, 0.72);

    z-index: 1;
}


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

.rasa-multicusine-page-hero-content {
    position: relative;

    z-index: 2;

    width: 100%;

    padding: 0 20px;

    text-align: center;

    transform: translateY(28px);
}


.rasa-multicusine-page-hero-content h1 {
    margin: 0 0 20px;

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

    font-size: 74px;
    font-weight: 400;

    line-height: 1.05;

    color: #40372e;
}


/* =========================================
   BREADCRUMB
========================================= */

.rasa-multicusine-page-breadcrumb {
    display: flex;

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

    gap: 12px;

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

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

    letter-spacing: 3px;

    text-transform: uppercase;

    color: #806337;
}


.rasa-multicusine-page-breadcrumb a {
    color: #806337;

    text-decoration: none;

    transition: color 0.3s ease;
}


.rasa-multicusine-page-breadcrumb a:hover {
    color: #40372e;
}


.rasa-multicusine-page-breadcrumb span {
    color: #a18450;
}


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

@media (max-width: 1100px) {

    .rasa-multicusine-page-hero {
        height: 330px;
    }

    .rasa-multicusine-page-hero-content h1 {
        font-size: 60px;
    }

}


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

@media (max-width: 576px) {

    .rasa-multicusine-page-hero {
        height: 300px;
    }

    .rasa-multicusine-page-hero-content {
        transform: translateY(25px);
    }

    .rasa-multicusine-page-hero-content h1 {
        font-size: 44px;

        margin-bottom: 16px;
    }

    .rasa-multicusine-page-breadcrumb {
        font-size: 9px;

        letter-spacing: 2.5px;

        gap: 8px;
    }

}
/* =========================================
   RASA INTRO SECTION
========================================= */

.rasa-intro-section {
    width: 100%;
    padding: 115px 50px 55px;
    background: #fffaf0;
    overflow: hidden;
}


.rasa-intro-container {
    width: 100%;
    max-width: 1250px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 80px;

    align-items: center;
}


/* =========================================
   LEFT CONTENT
========================================= */

.rasa-intro-content {
    position: relative;

    padding: 15px 20px 15px 10px;

    color: #ffffff;
}


.rasa-logo-wrap {
    width: 100%;

    margin-bottom: 28px;

    display: flex;

    align-items: center;
}


.rasa-logo {
    width: 280px;
    max-width: 100%;

    height: auto;

    display: block;
}


/* =========================================
   CAPACITY
========================================= */

.rasa-intro-capacity {
    display: flex;

    align-items: baseline;

    gap: 12px;

    margin-bottom: 20px;
}


.rasa-intro-capacity span {
    font-family: var(--heading-font);

    font-size: 48px;
    font-weight: 400;

    line-height: 1;

     color: #a18450;
}


.rasa-intro-capacity small {
    font-family: var(--body-font);

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

    letter-spacing: 3px;

    color: #806337;
}


.rasa-intro-line {
    width: 75px;

    height: 1px;

    margin-bottom: 30px;

    background: #b9965d;
}


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

.rasa-intro-content p {
    margin: 0 0 20px;

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

    font-size: 16px;

    line-height: 1.85;

    letter-spacing: 0.2px;

    color: #40372e;
}


.rasa-intro-content p:last-child {
    margin-bottom: 0;
}


/* =========================================
   RIGHT IMAGE AREA
========================================= */

.rasa-intro-images {
    position: relative;

    width: 100%;

    min-height: 590px;

    padding: 15px 15px 80px 0;
}


/* =========================================
   GOLD FRAME
========================================= */

.rasa-intro-images::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 88%;
    height: 88%;

    border: 1px solid #b9965d;

    pointer-events: none;
}


/* =========================================
   MAIN IMAGE
========================================= */

.rasa-main-image {
    position: relative;

    z-index: 2;

    width: 88%;
    height: 510px;

    margin-left: auto;

    overflow: hidden;
}


.rasa-main-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.7s ease;
}


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


/* =========================================
   SMALL IMAGE
========================================= */

.rasa-small-image {
    position: absolute;

    left: 0;
    bottom: 0;

    z-index: 3;

    width: 48%;
    height: 245px;

    padding: 7px;

    background: #fffaf0;

    border: 1px solid #b9965d;
}


.rasa-small-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


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

@media (max-width: 1050px) {

    .rasa-intro-section {
        padding: 90px 35px 105px;
    }


    .rasa-intro-container {
        grid-template-columns: 1fr 1fr;

        gap: 45px;
    }


    .rasa-logo {
        width: 240px;
    }


    .rasa-intro-content p {
        font-size: 15px;
    }


    .rasa-intro-images {
        min-height: 500px;
    }


    .rasa-main-image {
        height: 430px;
    }


    .rasa-small-image {
        height: 205px;
    }

}


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

@media (max-width: 768px) {

    .rasa-intro-section {
        padding: 75px 20px 85px;
    }


    .rasa-intro-container {
        grid-template-columns: 1fr;

        gap: 65px;
    }


    .rasa-intro-content {
        padding: 0;
    }


    .rasa-logo {
        width: 240px;
    }


    .rasa-intro-capacity span {
        font-size: 42px;
    }


    .rasa-intro-content p {
        font-size: 15px;

        line-height: 1.8;
    }


    .rasa-intro-images {
        min-height: 500px;

        padding-right: 8px;
    }


    .rasa-main-image {
        width: 88%;

        height: 430px;
    }


    .rasa-small-image {
        width: 50%;

        height: 200px;
    }

}


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

@media (max-width: 576px) {

    .rasa-intro-section {
        padding: 65px 18px 75px;
    }


    .rasa-intro-container {
        gap: 50px;
    }


    .rasa-logo {
        width: 210px;
    }


    .rasa-intro-capacity {
        margin-bottom: 15px;
    }


    .rasa-intro-capacity span {
        font-size: 38px;
    }


    .rasa-intro-capacity small {
        font-size: 10px;

        letter-spacing: 2px;
    }


    .rasa-intro-content p {
        font-size: 14px;

        line-height: 1.8;
    }


    .rasa-intro-images {
        min-height: 390px;

        padding-top: 10px;
    }


    .rasa-main-image {
        width: 90%;

        height: 330px;
    }


    .rasa-small-image {
        width: 52%;

        height: 155px;
    }

}
/* =========================================
   RASA DINING EXPERIENCE
========================================= */

.rasa-dining-section {
    width: 100%;

    padding: 55px 50px 125px;

    background: #fffaf0;

    overflow: hidden;
}


.rasa-dining-container {
    width: 100%;
    max-width: 1250px;

    margin: 0 auto;
}


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

.rasa-dining-heading {
    max-width: 850px;

    margin: 0 auto 75px;

    text-align: center;
}


.rasa-dining-heading > span {
    display: block;

    margin-bottom: 15px;

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

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

    letter-spacing: 4px;

    color: #a18450;
}


.rasa-dining-heading h2 {
    margin: 0 0 25px;

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

    font-size: 56px;
    font-weight: 400;

    line-height: 1.15;

    color: #40372e;
}


.rasa-dining-heading p {
    max-width: 760px;

    margin: 0 auto;

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

    font-size: 16px;

    line-height: 1.85;

    color: #62584e;
}


/* =========================================
   MAIN CONTENT
========================================= */

.rasa-dining-content {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 75px;

    align-items: center;
}


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

.rasa-dining-image {
    position: relative;

    width: 100%;

    padding: 8px;

    border: 1px solid #b9965d;
}


.rasa-dining-image::before {
    content: "";

    position: absolute;

    top: 18px;
    left: 18px;

    width: 100%;
    height: 100%;

    border: 1px solid rgba(185, 150, 93, 0.45);

    z-index: 0;
}


.rasa-dining-image img {
    position: relative;

    z-index: 1;

    width: 100%;
    height: 500px;

    display: block;

    object-fit: cover;
}


/* =========================================
   DETAILS
========================================= */

.rasa-dining-details {
    width: 100%;
}


.rasa-dining-item {
    display: grid;

    grid-template-columns: 55px 1fr;

    gap: 20px;

    padding: 0 0 30px;

    margin-bottom: 30px;

    border-bottom: 1px solid rgba(185, 150, 93, 0.45);
}


.rasa-dining-item:last-child {
    margin-bottom: 0;
}


.rasa-dining-item > span {
    font-family: var(--heading-font);

    font-size: 28px;

    line-height: 1;

    color: #a18450;
}


.rasa-dining-item h3 {
    margin: 0 0 10px;

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

    font-size: 28px;
    font-weight: 400;

    line-height: 1.2;

    color: #40372e;
}


.rasa-dining-item p {
    margin: 0;

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

    font-size: 15px;

    line-height: 1.8;

    color: #62584e;
}


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

@media (max-width: 1050px) {

    .rasa-dining-section {
        padding: 90px 35px 105px;
    }


    .rasa-dining-heading {
        margin-bottom: 60px;
    }


    .rasa-dining-heading h2 {
        font-size: 48px;
    }


    .rasa-dining-content {
        gap: 45px;
    }


    .rasa-dining-image img {
        height: 430px;
    }


    .rasa-dining-item h3 {
        font-size: 24px;
    }

}


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

@media (max-width: 768px) {

    .rasa-dining-section {
        padding: 75px 20px 85px;
    }


    .rasa-dining-heading {
        margin-bottom: 50px;
    }


    .rasa-dining-heading h2 {
        font-size: 42px;
    }


    .rasa-dining-heading p {
        font-size: 15px;
    }


    .rasa-dining-content {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .rasa-dining-image img {
        height: 400px;
    }

}


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

@media (max-width: 576px) {

    .rasa-dining-section {
        padding: 65px 18px 75px;
    }


    .rasa-dining-heading > span {
        font-size: 10px;

        letter-spacing: 3px;
    }


    .rasa-dining-heading h2 {
        font-size: 36px;
    }


    .rasa-dining-heading p {
        font-size: 14px;
    }


    .rasa-dining-image img {
        height: 300px;
    }


    .rasa-dining-item {
        grid-template-columns: 42px 1fr;

        gap: 14px;

        padding-bottom: 24px;

        margin-bottom: 24px;
    }


    .rasa-dining-item > span {
        font-size: 24px;
    }


    .rasa-dining-item h3 {
        font-size: 23px;
    }


    .rasa-dining-item p {
        font-size: 14px;
    }

}
/* =========================================
   RASA FINAL SECTION
========================================= */

.rasa-final-section {
    width: 100%;

    padding: 75px 50px 105px;

    background: #fffaf0;

    overflow: hidden;
}


.rasa-final-container {
    width: 100%;
    max-width: 1250px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 0.9fr;

    gap: 80px;

    align-items: center;
}


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

.rasa-final-content {
    max-width: 650px;
}


.rasa-final-content > span {
    display: block;

    margin-bottom: 14px;

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

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

    letter-spacing: 4px;

    color: #a18450;
}


.rasa-final-content h2 {
    margin: 0 0 25px;

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

    font-size: 56px;
    font-weight: 400;

    line-height: 1.15;

    color: #40372e;
}


.rasa-final-content > p {
    margin: 0 0 35px;

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

    font-size: 16px;

    line-height: 1.85;

    color: #62584e;
}


/* =========================================
   DETAILS
========================================= */

.rasa-final-details {
    display: flex;

    flex-wrap: wrap;

    gap: 35px;

    margin-bottom: 38px;

    padding-top: 28px;

    border-top: 1px solid rgba(185, 150, 93, 0.45);
}


.rasa-final-detail {
    display: flex;

    align-items: center;

    gap: 13px;
}


.rasa-final-detail i {
    font-size: 19px;

    color: #a18450;
}


.rasa-final-detail strong {
    display: block;

    margin-bottom: 5px;

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

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

    letter-spacing: 2px;

    color: #806337;
}


.rasa-final-detail span {
    display: block;

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

    font-size: 14px;

    color: #40372e;
}


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

.rasa-final-button {
    display: inline-flex;

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

    min-width: 210px;

    height: 52px;

    padding: 0 28px;

    background: #a18450;

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

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

    letter-spacing: 1.5px;

    color: #ffffff;

    text-decoration: none;

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


.rasa-final-button:hover {
    background: #806337;

    transform: translateY(-2px);
}


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

.rasa-final-image {
    position: relative;

    width: 100%;

    padding: 8px;

    border: 1px solid #b9965d;
}


.rasa-final-image::after {
    content: "";

    position: absolute;

    top: 18px;
    left: 18px;

    width: 100%;
    height: 100%;

    border: 1px solid rgba(185, 150, 93, 0.45);

    z-index: 0;
}


.rasa-final-image img {
    position: relative;

    z-index: 1;

    width: 100%;
    height: 490px;

    display: block;

    object-fit: cover;
}


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

@media (max-width: 1050px) {

    .rasa-final-section {
        padding: 65px 35px 90px;
    }


    .rasa-final-container {
        gap: 45px;
    }


    .rasa-final-content h2 {
        font-size: 48px;
    }


    .rasa-final-content > p {
        font-size: 15px;
    }


    .rasa-final-image img {
        height: 420px;
    }

}


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

@media (max-width: 768px) {

    .rasa-final-section {
        padding: 60px 20px 80px;
    }


    .rasa-final-container {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .rasa-final-content {
        max-width: 100%;
    }


    .rasa-final-content h2 {
        font-size: 42px;
    }


    .rasa-final-details {
        gap: 25px;
    }


    .rasa-final-image img {
        height: 390px;
    }

}


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

@media (max-width: 576px) {

    .rasa-final-section {
        padding: 50px 18px 70px;
    }


    .rasa-final-content h2 {
        font-size: 36px;
    }


    .rasa-final-content > p {
        font-size: 14px;
    }


    .rasa-final-details {
        flex-direction: column;

        gap: 18px;
    }


    .rasa-final-image img {
        height: 310px;
    }


    .rasa-final-button {
        width: 100%;
    }

}
.shivsanju-rooftop-page-hero {
    position: relative;

    width: 100%;
    height: 360px;

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

    background-image: url("../images/room/19.png");
    background-size: cover;
    background-position: center center;

    overflow: hidden;
}


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

.shivsanju-rooftop-page-hero-overlay {
    position: absolute;

    inset: 0;

    background: rgba(247, 242, 232, 0.72);

    z-index: 1;
}


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

.shivsanju-rooftop-page-hero-content {
    position: relative;

    z-index: 2;

    width: 100%;

    padding: 0 20px;

    text-align: center;

    transform: translateY(28px);
}


.shivsanju-rooftop-page-hero-content h1 {
    margin: 0 0 20px;

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

    font-size: 74px;
    font-weight: 400;

    line-height: 1.05;

    color: #40372e;
}


/* =========================================
   BREADCRUMB
========================================= */

.shivsanju-rooftop-page-breadcrumb {
    display: flex;

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

    gap: 12px;

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

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

    letter-spacing: 3px;

    text-transform: uppercase;

    color: #806337;
}


.shivsanju-rooftop-page-breadcrumb a {
    color: #806337;

    text-decoration: none;

    transition: color 0.3s ease;
}


.shivsanju-rooftop-page-breadcrumb a:hover {
    color: #40372e;
}


.shivsanju-rooftop-page-breadcrumb span {
    color: #a18450;
}


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

@media (max-width: 1100px) {

    .shivsanju-rooftop-page-hero {
        height: 330px;
    }

    .shivsanju-rooftop-page-hero-content h1 {
        font-size: 60px;
    }

}


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

@media (max-width: 576px) {

    .shivsanju-rooftop-page-hero {
        height: 300px;
    }

    .shivsanju-rooftop-page-hero-content {
        transform: translateY(25px);
    }

    .shivsanju-rooftop-page-hero-content h1 {
        font-size: 44px;

        margin-bottom: 16px;
    }

    .shivsanju-rooftop-page-breadcrumb {
        font-size: 9px;

        letter-spacing: 2.5px;

        gap: 8px;
    }

}
/* =========================================================
   FITNESS PAGE HERO
========================================================= */

.fitness-page-hero {
    position: relative;
    width: 100%;
    height: 360px;

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

    background-image: url("../images/room/gym2.avif");
    background-size: cover;
    background-position: center center;

    overflow: hidden;
}

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

    background: rgba(247, 242, 232, 0.72);

    z-index: 1;
}

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

    width: 100%;
    padding: 0 20px;

    text-align: center;

    transform: translateY(28px);
}

.fitness-page-hero-content h1 {
    margin: 0 0 20px;

    font-family: var(--heading-font);
    font-size: 74px;
    font-weight: 400;
    line-height: 1.05;

    color: #40372e;
}

.fitness-page-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;

    color: #806337;
}

.fitness-page-breadcrumb a {
    color: #806337;
    text-decoration: none;

    transition: color 0.3s ease;
}

.fitness-page-breadcrumb a:hover {
    color: #40372e;
}

.fitness-page-breadcrumb span {
    color: #a18450;
}


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

@media (max-width: 1100px) {

    .fitness-page-hero {
        height: 330px;
    }

    .fitness-page-hero-content h1 {
        font-size: 60px;
    }

}


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

@media (max-width: 576px) {

    .fitness-page-hero {
        height: 300px;
    }

    .fitness-page-hero-content {
        transform: translateY(25px);
    }

    .fitness-page-hero-content h1 {
        font-size: 44px;
        margin-bottom: 16px;
    }

    .fitness-page-breadcrumb {
        font-size: 9px;
        letter-spacing: 2.5px;
        gap: 8px;
    }

}
/* =========================================================
   FITNESS INTRO SECTION
========================================================= */

.fitness-intro-section {
    width: 100%;
    padding: 115px 50px 120px;
    background: #fffaf0;
    overflow: hidden;
}

.fitness-intro-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 0.92fr;
    gap: 90px;

    align-items: center;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.fitness-intro-content {
    max-width: 650px;
}

.fitness-logo-wrap {
    width: 235px;
    margin-bottom: 38px;
}

.fitness-logo {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.fitness-intro-line {
    width: 65px;
    height: 1px;
    margin-bottom: 32px;
    background: #b9965d;
}

.fitness-intro-content p {
    margin: 0 0 21px;

    font-family: var(--body-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.9;

    color: #40372e;
}

.fitness-intro-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   RIGHT IMAGE
========================================================= */

.fitness-intro-image {
    width: 100%;
}

.fitness-image-frame {
    position: relative;

    width: 100%;
    height: 490px;

    padding: 10px;

    border: 1px solid #b9965d;

    background: #f7f2e8;

    box-sizing: border-box;
}


/* INNER GOLD FRAME */

.fitness-image-frame::before {
    content: "";

    position: absolute;
    inset: 10px;

    border: 1px solid rgba(185, 150, 93, 0.55);

    z-index: 3;

    pointer-events: none;
}


/* IMAGE */

.fitness-image-frame img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 0.7s ease;
}


/* IMAGE OVERLAY */

.fitness-image-overlay {
    position: absolute;

    left: 10px;
    right: 10px;
    bottom: 10px;

    z-index: 4;

    padding: 85px 35px 35px;

    background: linear-gradient(
        to top,
        rgba(35, 29, 24, 0.88),
        rgba(35, 29, 24, 0.45),
        transparent
    );

    box-sizing: border-box;
}

.fitness-image-overlay span {
    display: block;

    margin-bottom: 12px;

    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 3px;
    text-transform: uppercase;

    color: #d0b174;
}

.fitness-image-overlay h2 {
    margin: 0;

    font-family: var(--heading-font);
    font-size: 42px;
    font-weight: 400;
    line-height: 1.08;

    color: #fffaf0;
}


/* NUMBER */

.fitness-image-number {
    position: absolute;

    top: 28px;
    right: 30px;

    z-index: 5;

    font-family: var(--heading-font);
    font-size: 18px;

    color: #d0b174;
}


/* IMAGE HOVER */

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


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

@media (max-width: 1050px) {

    .fitness-intro-section {
        padding: 90px 35px 100px;
    }

    .fitness-intro-container {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
    }

    .fitness-logo-wrap {
        width: 210px;
    }

    .fitness-image-frame {
        height: 430px;
    }

    .fitness-image-overlay h2 {
        font-size: 36px;
    }

}


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

@media (max-width: 768px) {

    .fitness-intro-section {
        padding: 75px 20px 90px;
    }

    .fitness-intro-container {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .fitness-intro-content {
        max-width: 100%;
    }

    .fitness-logo-wrap {
        width: 205px;
        margin-bottom: 30px;
    }

    .fitness-intro-content p {
        font-size: 15px;
        line-height: 1.85;
    }

    .fitness-image-frame {
        height: 450px;
    }

}


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

@media (max-width: 576px) {

    .fitness-intro-section {
        padding: 65px 18px 75px;
    }

    .fitness-intro-container {
        gap: 42px;
    }

    .fitness-logo-wrap {
        width: 180px;
    }

    .fitness-intro-line {
        width: 50px;
        margin-bottom: 25px;
    }

    .fitness-intro-content p {
        font-size: 14px;
        line-height: 1.8;
    }

    .fitness-image-frame {
        height: 380px;
        padding: 8px;
    }

    .fitness-image-frame::before {
        inset: 8px;
    }

    .fitness-image-overlay {
        left: 8px;
        right: 8px;
        bottom: 8px;

        padding: 70px 25px 25px;
    }

    .fitness-image-overlay span {
        font-size: 9px;
        letter-spacing: 2.5px;
    }

    .fitness-image-overlay h2 {
        font-size: 32px;
    }

    .fitness-image-number {
        top: 22px;
        right: 23px;
        font-size: 16px;
    }

}
/* =========================================================
   FITNESS FACILITIES SECTION
========================================================= */

.fitness-facilities-section {
    width: 100%;
    padding: 120px 50px 125px;
    background: #f7f2e8;
    overflow: hidden;
}

.fitness-facilities-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}


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

.fitness-facilities-heading {
    display: grid;
    grid-template-columns: 1fr 0.75fr;
    gap: 100px;

    align-items: end;

    margin-bottom: 75px;
}

.fitness-facilities-title > span {
    display: block;

    margin-bottom: 20px;

    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;

    color: #a18450;
}

.fitness-facilities-title h2 {
    margin: 0;

    font-family: var(--heading-font);
    font-size: 58px;
    font-weight: 400;
    line-height: 1.08;

    color: #40372e;
}

.fitness-facilities-title h2 em {
    color: #a18450;
    font-style: italic;
}

.fitness-facilities-intro {
    padding-bottom: 5px;
}

.fitness-facilities-intro p {
    max-width: 450px;
    margin: 0;

    font-family: var(--body-font);
    font-size: 15px;
    line-height: 1.9;

    color: #5b5045;
}


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

.fitness-facilities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid #c9b487;
    border-bottom: 1px solid #c9b487;
}

.fitness-facility-item {
    position: relative;

    min-height: 330px;
    padding: 42px 38px 40px;

    box-sizing: border-box;

    transition:
        background 0.4s ease,
        transform 0.4s ease;
}

.fitness-facility-item + .fitness-facility-item {
    border-left: 1px solid #c9b487;
}

.fitness-facility-item:hover {
    background: #fffaf0;
}


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

.fitness-facility-number {
    position: absolute;
    top: 35px;
    right: 35px;

    font-family: var(--heading-font);
    font-size: 16px;

    color: #a18450;
}


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

.fitness-facility-icon {
    width: 52px;
    height: 52px;

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

    margin-bottom: 35px;

    border: 1px solid #b9965d;

    color: #a18450;

    font-size: 20px;

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

.fitness-facility-item:hover .fitness-facility-icon {
    background: #a18450;
    color: #fffaf0;
}


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

.fitness-facility-item h3 {
    margin: 0 0 16px;

    font-family: var(--heading-font);
    font-size: 34px;
    font-weight: 400;
    line-height: 1.15;

    color: #40372e;
}

.fitness-facility-item p {
    max-width: 310px;
    margin: 0;

    font-family: var(--body-font);
    font-size: 14px;
    line-height: 1.85;

    color: #5b5045;
}


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

.fitness-facility-line {
    width: 45px;
    height: 1px;

    margin-top: 28px;

    background: #b9965d;

    transition: width 0.4s ease;
}

.fitness-facility-item:hover .fitness-facility-line {
    width: 75px;
}


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

@media (max-width: 1050px) {

    .fitness-facilities-section {
        padding: 90px 35px 100px;
    }

    .fitness-facilities-heading {
        gap: 50px;
        margin-bottom: 60px;
    }

    .fitness-facilities-title h2 {
        font-size: 48px;
    }

    .fitness-facility-item {
        padding: 35px 28px;
    }

    .fitness-facility-item h3 {
        font-size: 30px;
    }

}


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

@media (max-width: 768px) {

    .fitness-facilities-section {
        padding: 75px 20px 85px;
    }

    .fitness-facilities-heading {
        grid-template-columns: 1fr;
        gap: 25px;

        margin-bottom: 50px;
    }

    .fitness-facilities-title h2 {
        font-size: 44px;
    }

    .fitness-facilities-intro p {
        font-size: 14px;
    }

    .fitness-facilities-grid {
        grid-template-columns: 1fr;
    }

    .fitness-facility-item {
        min-height: auto;
        padding: 38px 25px 40px;
    }

    .fitness-facility-item + .fitness-facility-item {
        border-left: 0;
        border-top: 1px solid #c9b487;
    }

}


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

@media (max-width: 576px) {

    .fitness-facilities-section {
        padding: 65px 18px 75px;
    }

    .fitness-facilities-title h2 {
        font-size: 38px;
    }

    .fitness-facility-item {
        padding: 32px 20px 35px;
    }

    .fitness-facility-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 28px;
        font-size: 18px;
    }

    .fitness-facility-item h3 {
        font-size: 29px;
    }

    .fitness-facility-item p {
        font-size: 13px;
    }

}
/* =========================================================
   FITNESS WELLNESS SECTION
========================================================= */

.fitness-wellness-section {
    width: 100%;
    padding: 120px 50px 125px;
    background: #fffaf0;
    overflow: hidden;
}

.fitness-wellness-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 95px;

    align-items: center;
}


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

.fitness-wellness-image {
    width: 100%;
}

.fitness-wellness-image-frame {
    position: relative;

    width: 100%;
    height: 560px;

    padding: 10px;

    border: 1px solid #b9965d;
    background: #f7f2e8;

    box-sizing: border-box;
}

.fitness-wellness-image-frame::before {
    content: "";

    position: absolute;
    inset: 10px;

    border: 1px solid rgba(185, 150, 93, 0.55);

    z-index: 2;

    pointer-events: none;
}

.fitness-wellness-image-frame img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform 0.7s ease;
}

.fitness-wellness-image-frame:hover img {
    transform: scale(1.035);
}


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

.fitness-wellness-content {
    max-width: 570px;
}

.fitness-wellness-label {
    display: block;

    margin-bottom: 20px;

    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 3px;
    text-transform: uppercase;

    color: #a18450;
}

.fitness-wellness-content h2 {
    margin: 0 0 28px;

    font-family: var(--heading-font);
    font-size: 58px;
    font-weight: 400;
    line-height: 1.08;

    color: #40372e;
}

.fitness-wellness-content h2 em {
    color: #a18450;
    font-style: italic;
}

.fitness-wellness-content > p {
    margin: 0 0 19px;

    font-family: var(--body-font);
    font-size: 15px;
    line-height: 1.9;

    color: #5b5045;
}


/* =========================================================
   POINTS
========================================================= */

.fitness-wellness-points {
    margin-top: 35px;

    border-top: 1px solid #c9b487;
}

.fitness-wellness-point {
    display: grid;
    grid-template-columns: 45px 1fr;
    gap: 15px;

    padding: 22px 0;

    border-bottom: 1px solid #c9b487;
}

.fitness-wellness-point > span {
    font-family: var(--heading-font);
    font-size: 15px;

    color: #a18450;
}

.fitness-wellness-point strong {
    display: block;

    margin-bottom: 5px;

    font-family: var(--heading-font);
    font-size: 23px;
    font-weight: 400;

    color: #40372e;
}

.fitness-wellness-point p {
    margin: 0;

    font-family: var(--body-font);
    font-size: 13px;
    line-height: 1.7;

    color: #6b5d50;
}


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

@media (max-width: 1050px) {

    .fitness-wellness-section {
        padding: 90px 35px 100px;
    }

    .fitness-wellness-container {
        gap: 55px;
    }

    .fitness-wellness-image-frame {
        height: 480px;
    }

    .fitness-wellness-content h2 {
        font-size: 48px;
    }

}


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

@media (max-width: 768px) {

    .fitness-wellness-section {
        padding: 75px 20px 90px;
    }

    .fitness-wellness-container {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .fitness-wellness-image-frame {
        height: 430px;
    }

    .fitness-wellness-content {
        max-width: 100%;
    }

    .fitness-wellness-content h2 {
        font-size: 44px;
    }

}


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

@media (max-width: 576px) {

    .fitness-wellness-section {
        padding: 65px 18px 75px;
    }

    .fitness-wellness-container {
        gap: 42px;
    }

    .fitness-wellness-image-frame {
        height: 370px;
        padding: 8px;
    }

    .fitness-wellness-image-frame::before {
        inset: 8px;
    }

    .fitness-wellness-content h2 {
        font-size: 38px;
    }

    .fitness-wellness-content > p {
        font-size: 14px;
        line-height: 1.8;
    }

    .fitness-wellness-point strong {
        font-size: 21px;
    }

}
/* =========================================================
   SPA PAGE HERO
========================================================= */

.spa-page-hero {
    position: relative;
    width: 100%;
    height: 360px;

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

    background-image: url("../images/room/spa1.jpg");
    background-size: cover;
    background-position: center center;

    overflow: hidden;
}

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

    background: rgba(247, 242, 232, 0.72);

    z-index: 1;
}

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

    width: 100%;
    padding: 0 20px;

    text-align: center;

    transform: translateY(28px);
}

.spa-page-hero-content h1 {
    margin: 0 0 20px;

    font-family: var(--heading-font);
    font-size: 74px;
    font-weight: 400;
    line-height: 1.05;

    color: #40372e;
}

.spa-page-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;

    color: #806337;
}

.spa-page-breadcrumb a {
    color: #806337;
    text-decoration: none;

    transition: color 0.3s ease;
}

.spa-page-breadcrumb a:hover {
    color: #40372e;
}

.spa-page-breadcrumb span {
    color: #a18450;
}


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

@media (max-width: 1100px) {

    .spa-page-hero {
        height: 330px;
    }

    .spa-page-hero-content h1 {
        font-size: 60px;
    }

}


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

@media (max-width: 576px) {

    .spa-page-hero {
        height: 300px;
    }

    .spa-page-hero-content {
        transform: translateY(25px);
    }

    .spa-page-hero-content h1 {
        font-size: 44px;
        margin-bottom: 16px;
    }

    .spa-page-breadcrumb {
        font-size: 9px;
        letter-spacing: 2.5px;
        gap: 8px;
    }

}
/* =========================================================
   SPA INTRODUCTION SECTION
========================================================= */

.spa-intro-section {
    width: 100%;
    padding: 115px 50px 120px;

    background: #fffaf0;

    overflow: hidden;
}

.spa-intro-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 0.92fr;
    gap: 90px;

    align-items: center;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.spa-intro-content {
    max-width: 650px;
}

.spa-intro-label {
    display: block;

    margin-bottom: 20px;

    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;

    letter-spacing: 3px;
    text-transform: uppercase;

    color: #a18450;
}

.spa-intro-content h2 {
    margin: 0 0 28px;

    font-family: var(--heading-font);
    font-size: 58px;
    font-weight: 400;
    line-height: 1.08;

    color: #40372e;
}

.spa-intro-content h2 em {
    color: #a18450;
    font-style: italic;
}

.spa-intro-line {
    width: 65px;
    height: 1px;

    margin-bottom: 30px;

    background: #b9965d;
}

.spa-intro-content p {
    margin: 0 0 20px;

    font-family: var(--body-font);
    font-size: 15px;
    line-height: 1.9;

    color: #40372e;
}

.spa-intro-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   RIGHT IMAGE
========================================================= */

.spa-intro-image {
    width: 100%;
}

.spa-image-frame {
    position: relative;

    width: 100%;
    height: 500px;

    padding: 10px;

    border: 1px solid #b9965d;

    background: #f7f2e8;

    box-sizing: border-box;
}

.spa-image-frame::before {
    content: "";

    position: absolute;
    inset: 10px;

    border: 1px solid rgba(185, 150, 93, 0.55);

    z-index: 3;

    pointer-events: none;
}

.spa-image-frame img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform 0.7s ease;
}

.spa-image-frame:hover img {
    transform: scale(1.035);
}


/* =========================================================
   IMAGE CAPTION
========================================================= */

.spa-image-caption {
    position: absolute;

    left: 10px;
    right: 10px;
    bottom: 10px;

    z-index: 4;

    padding: 85px 35px 32px;

    background: linear-gradient(
        to top,
        rgba(40, 33, 27, 0.88),
        rgba(40, 33, 27, 0.42),
        transparent
    );

    box-sizing: border-box;
}

.spa-image-caption span {
    display: block;

    margin-bottom: 12px;

    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 3px;
    text-transform: uppercase;

    color: #d0b174;
}

.spa-image-caption h3 {
    margin: 0;

    font-family: var(--heading-font);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.08;

    color: #fffaf0;
}


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

.spa-image-number {
    position: absolute;

    top: 28px;
    right: 30px;

    z-index: 5;

    font-family: var(--heading-font);
    font-size: 18px;

    color: #d0b174;
}


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

@media (max-width: 1050px) {

    .spa-intro-section {
        padding: 90px 35px 100px;
    }

    .spa-intro-container {
        gap: 55px;
    }

    .spa-intro-content h2 {
        font-size: 48px;
    }

    .spa-image-frame {
        height: 450px;
    }

    .spa-image-caption h3 {
        font-size: 35px;
    }

}


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

@media (max-width: 768px) {

    .spa-intro-section {
        padding: 75px 20px 90px;
    }

    .spa-intro-container {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .spa-intro-content {
        max-width: 100%;
    }

    .spa-intro-content h2 {
        font-size: 46px;
    }

    .spa-intro-content p {
        font-size: 15px;
    }

    .spa-image-frame {
        height: 440px;
    }

}


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

@media (max-width: 576px) {

    .spa-intro-section {
        padding: 65px 18px 75px;
    }

    .spa-intro-container {
        gap: 42px;
    }

    .spa-intro-label {
        font-size: 9px;
        letter-spacing: 2.5px;
    }

    .spa-intro-content h2 {
        font-size: 39px;
    }

    .spa-intro-content p {
        font-size: 14px;
        line-height: 1.8;
    }

    .spa-image-frame {
        height: 380px;
        padding: 8px;
    }

    .spa-image-frame::before {
        inset: 8px;
    }

    .spa-image-caption {
        left: 8px;
        right: 8px;
        bottom: 8px;

        padding: 65px 25px 25px;
    }

    .spa-image-caption span {
        font-size: 9px;
        letter-spacing: 2.5px;
    }

    .spa-image-caption h3 {
        font-size: 32px;
    }

    .spa-image-number {
        top: 22px;
        right: 23px;
        font-size: 16px;
    }

}
/* =========================================================
   SPA EXPERIENCES SECTION
========================================================= */

.spa-experiences-section {
    width: 100%;
    padding: 120px 50px 125px;

    background: #f7f2e8;

    overflow: hidden;
}

.spa-experiences-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}


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

.spa-experiences-heading {
    max-width: 760px;
    margin-bottom: 70px;
}

.spa-experiences-heading > span {
    display: block;

    margin-bottom: 20px;

    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;

    letter-spacing: 3px;
    text-transform: uppercase;

    color: #a18450;
}

.spa-experiences-heading h2 {
    margin: 0 0 25px;

    font-family: var(--heading-font);
    font-size: 60px;
    font-weight: 400;
    line-height: 1.08;

    color: #40372e;
}

.spa-experiences-heading h2 em {
    color: #a18450;
    font-style: italic;
}

.spa-experiences-heading p {
    max-width: 620px;
    margin: 0;

    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.9;

    color: #5b5045;
}


/* =========================================================
   EXPERIENCE GRID
========================================================= */

.spa-experiences-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid #c9b487;
    border-bottom: 1px solid #c9b487;
}

.spa-experience-item {
    position: relative;

    min-height: 350px;

    padding: 42px 38px 40px;

    box-sizing: border-box;

    transition:
        background 0.4s ease,
        transform 0.4s ease;
}

.spa-experience-item + .spa-experience-item {
    border-left: 1px solid #c9b487;
}

.spa-experience-item:hover {
    background: #fffaf0;
}


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

.spa-experience-number {
    position: absolute;

    top: 35px;
    right: 35px;

    font-family: var(--heading-font);
    font-size: 17px;

    color: #a18450;
}


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

.spa-experience-icon {
    width: 54px;
    height: 54px;

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

    margin-bottom: 35px;

    border: 1px solid #b9965d;

    color: #a18450;

    font-size: 20px;

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

.spa-experience-item:hover .spa-experience-icon {
    background: #a18450;
    color: #fffaf0;
}


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

.spa-experience-item h3 {
    margin: 0 0 16px;

    font-family: var(--heading-font);
    font-size: 35px;
    font-weight: 400;
    line-height: 1.15;

    color: #40372e;
}

.spa-experience-item p {
    max-width: 320px;
    margin: 0;

    font-family: var(--body-font);
    font-size: 15px;
    line-height: 1.85;

    color: #5b5045;
}


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

.spa-experience-line {
    width: 45px;
    height: 1px;

    margin-top: 28px;

    background: #b9965d;

    transition: width 0.4s ease;
}

.spa-experience-item:hover .spa-experience-line {
    width: 75px;
}


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

@media (max-width: 1050px) {

    .spa-experiences-section {
        padding: 90px 35px 100px;
    }

    .spa-experiences-heading {
        margin-bottom: 60px;
    }

    .spa-experiences-heading h2 {
        font-size: 50px;
    }

    .spa-experience-item {
        padding: 35px 28px;
    }

    .spa-experience-item h3 {
        font-size: 30px;
    }

}


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

@media (max-width: 768px) {

    .spa-experiences-section {
        padding: 75px 20px 85px;
    }

    .spa-experiences-heading {
        margin-bottom: 50px;
    }

    .spa-experiences-heading h2 {
        font-size: 45px;
    }

    .spa-experiences-heading p {
        font-size: 15px;
    }

    .spa-experiences-grid {
        grid-template-columns: 1fr;
    }

    .spa-experience-item {
        min-height: auto;
        padding: 38px 25px 40px;
    }

    .spa-experience-item + .spa-experience-item {
        border-left: 0;
        border-top: 1px solid #c9b487;
    }

}


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

@media (max-width: 576px) {

    .spa-experiences-section {
        padding: 65px 18px 75px;
    }

    .spa-experiences-heading h2 {
        font-size: 39px;
    }

    .spa-experiences-heading p {
        font-size: 14px;
        line-height: 1.8;
    }

    .spa-experience-item {
        padding: 32px 20px 35px;
    }

    .spa-experience-icon {
        width: 48px;
        height: 48px;

        margin-bottom: 28px;

        font-size: 18px;
    }

    .spa-experience-item h3 {
        font-size: 30px;
    }

    .spa-experience-item p {
        font-size: 14px;
    }

}
/* =========================================================
   SPA FINAL CTA SECTION
========================================================= */

.spa-final-section {
    width: 100%;
    padding: 120px 50px 125px;

    background: #fffaf0;

    overflow: hidden;
}

.spa-final-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 90px;

    align-items: center;
}


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

.spa-final-image {
    position: relative;

    width: 100%;
    height: 520px;

    padding: 10px;

    border: 1px solid #b9965d;

    background: #f7f2e8;

    box-sizing: border-box;
}

.spa-final-image::before {
    content: "";

    position: absolute;
    inset: 10px;

    border: 1px solid rgba(185, 150, 93, 0.55);

    z-index: 2;

    pointer-events: none;
}

.spa-final-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform 0.7s ease;
}

.spa-final-image:hover img {
    transform: scale(1.035);
}


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

.spa-final-content {
    max-width: 560px;
}

.spa-final-content > span {
    display: block;

    margin-bottom: 20px;

    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;

    letter-spacing: 3px;
    text-transform: uppercase;

    color: #a18450;
}

.spa-final-content h2 {
    margin: 0 0 28px;

    font-family: var(--heading-font);
    font-size: 62px;
    font-weight: 400;
    line-height: 1.06;

    color: #40372e;
}

.spa-final-content h2 em {
    color: #a18450;
    font-style: italic;
}

.spa-final-content > p {
    margin: 0;

    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.9;

    color: #5b5045;
}


/* =========================================================
   DETAILS
========================================================= */

.spa-final-details {
    margin-top: 35px;

    border-top: 1px solid #c9b487;
    border-bottom: 1px solid #c9b487;
}

.spa-final-detail {
    display: flex;
    align-items: center;
    gap: 18px;

    padding: 20px 0;
}

.spa-final-detail + .spa-final-detail {
    border-top: 1px solid #d5c6a6;
}

.spa-final-detail > i {
    width: 45px;
    height: 45px;

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

    border: 1px solid #b9965d;

    font-size: 17px;

    color: #a18450;
}

.spa-final-detail strong {
    display: block;

    margin-bottom: 4px;

    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 2px;

    color: #a18450;
}

.spa-final-detail span {
    display: block;

    font-family: var(--body-font);
    font-size: 14px;

    color: #40372e;
}


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

.spa-final-button {
    display: inline-flex;
    align-items: center;
    gap: 15px;

    margin-top: 35px;

    min-height: 52px;
    padding: 0 25px;

    border: 1px solid #b9965d;

    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;

    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;

    color: #40372e;
    background: transparent;

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

.spa-final-button i {
    font-size: 11px;

    transition: transform 0.35s ease;
}

.spa-final-button:hover {
    background: #a18450;
    color: #fffaf0;
}

.spa-final-button:hover i {
    transform: translateX(4px);
}


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

@media (max-width: 1050px) {

    .spa-final-section {
        padding: 90px 35px 100px;
    }

    .spa-final-container {
        gap: 55px;
    }

    .spa-final-image {
        height: 450px;
    }

    .spa-final-content h2 {
        font-size: 50px;
    }

}


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

@media (max-width: 768px) {

    .spa-final-section {
        padding: 75px 20px 90px;
    }

    .spa-final-container {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .spa-final-image {
        height: 440px;
    }

    .spa-final-content {
        max-width: 100%;
    }

    .spa-final-content h2 {
        font-size: 46px;
    }

    .spa-final-content > p {
        font-size: 15px;
    }

}


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

@media (max-width: 576px) {

    .spa-final-section {
        padding: 65px 18px 75px;
    }

    .spa-final-container {
        gap: 42px;
    }

    .spa-final-image {
        height: 380px;
        padding: 8px;
    }

    .spa-final-image::before {
        inset: 8px;
    }

    .spa-final-content > span {
        font-size: 9px;
        letter-spacing: 2.5px;
    }

    .spa-final-content h2 {
        font-size: 40px;
    }

    .spa-final-content > p {
        font-size: 14px;
        line-height: 1.8;
    }

    .spa-final-detail span {
        font-size: 13px;
    }

}
/* =========================================================
   SWIMMING POOL PAGE HERO
========================================================= */

.swimming-pool-page-hero {
    position: relative;
    width: 100%;
    height: 360px;

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

    background-image: url("../images/room/swimming.jpg");
    background-size: cover;
    background-position: center center;

    overflow: hidden;
}

.swimming-pool-page-hero-overlay {
    position: absolute;
    inset: 0;

    background: rgba(247, 242, 232, 0.72);

    z-index: 1;
}

.swimming-pool-page-hero-content {
    position: relative;
    z-index: 2;

    width: 100%;
    padding: 0 20px;

    text-align: center;

    transform: translateY(28px);
}

.swimming-pool-page-hero-content h1 {
    max-width: 1000px;

    margin: 0 auto 20px;

    font-family: var(--heading-font);
    font-size: 70px;
    font-weight: 400;
    line-height: 1.08;

    color: #40372e;
}

.swimming-pool-page-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;

    letter-spacing: 3px;
    text-transform: uppercase;

    color: #806337;
}

.swimming-pool-page-breadcrumb a {
    color: #806337;
    text-decoration: none;

    transition: color 0.3s ease;
}

.swimming-pool-page-breadcrumb a:hover {
    color: #40372e;
}

.swimming-pool-page-breadcrumb span {
    color: #a18450;
}


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

@media (max-width: 1100px) {

    .swimming-pool-page-hero {
        height: 330px;
    }

    .swimming-pool-page-hero-content h1 {
        font-size: 58px;
    }

}


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

@media (max-width: 576px) {

    .swimming-pool-page-hero {
        height: 300px;
    }

    .swimming-pool-page-hero-content {
        transform: translateY(25px);
    }

    .swimming-pool-page-hero-content h1 {
        font-size: 42px;
        line-height: 1.08;
        margin-bottom: 16px;
    }

    .swimming-pool-page-breadcrumb {
        font-size: 9px;
        letter-spacing: 2.5px;
        gap: 8px;
    }

}
/* =========================================================
   SWIMMING POOL HERO - HEIGHT FIX
========================================================= */

.swimming-pool-page-hero {
    height: 450px;
}

.swimming-pool-page-hero-content {
    padding-top: 45px;
}

.swimming-pool-page-hero-content h1 {
    max-width: 1050px;
    font-size: 68px;
    line-height: 1.08;
}


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

@media (max-width: 1100px) {

    .swimming-pool-page-hero {
        height: 400px;
    }

    .swimming-pool-page-hero-content {
        padding-top: 35px;
    }

    .swimming-pool-page-hero-content h1 {
        font-size: 56px;
    }

}


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

@media (max-width: 576px) {

    .swimming-pool-page-hero {
        height: 360px;
    }

    .swimming-pool-page-hero-content {
        padding-top: 30px;
        transform: translateY(20px);
    }

    .swimming-pool-page-hero-content h1 {
        font-size: 40px;
        line-height: 1.1;
        margin-bottom: 18px;
    }

}
/* =========================================================
   SWIMMING POOL INTRO SECTION
========================================================= */

.swimming-pool-intro-section {
    width: 100%;
    padding: 120px 50px 110px;
    background: #fffaf0;
    overflow: hidden;
}

.swimming-pool-intro-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 90px;

    align-items: center;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.swimming-pool-intro-content {
    width: 100%;
}

.swimming-pool-intro-label {
    display: block;
    margin-bottom: 22px;

    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;

    letter-spacing: 3.5px;
    text-transform: uppercase;

    color: #a18450;
}

.swimming-pool-intro-content h2 {
    margin: 0 0 28px;

    font-family: var(--heading-font);
    font-size: 58px;
    font-weight: 400;
    line-height: 1.1;

    color: #40372e;
}

.swimming-pool-intro-content h2 em {
    font-style: italic;
    color: #a18450;
}

.swimming-pool-intro-line {
    width: 65px;
    height: 1px;

    background: #b9965d;

    margin-bottom: 30px;
}

.swimming-pool-intro-content p {
    margin: 0 0 22px;

    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.9;
    font-weight: 400;

    color: #665c50;
}


/* =========================================================
   RIGHT IMAGE
========================================================= */

.swimming-pool-intro-image {
    width: 100%;
}

.swimming-pool-image-frame {
    position: relative;

    width: 100%;
    height: 560px;

    padding: 12px;

    box-sizing: border-box;

    background: #fffdf8;
    border: 1px solid #b9965d;

    overflow: hidden;
}

.swimming-pool-image-frame::before {
    content: "";

    position: absolute;
    inset: 5px;

    border: 1px solid rgba(185, 150, 93, 0.45);

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

.swimming-pool-image-frame img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform 0.7s ease;
}

.swimming-pool-image-frame:hover img {
    transform: scale(1.03);
}


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

.swimming-pool-image-overlay {
    position: absolute;

    left: 12px;
    right: 12px;
    bottom: 12px;

    padding: 55px 35px 30px;

    background: linear-gradient(
        to top,
        rgba(45, 38, 30, 0.90),
        rgba(45, 38, 30, 0.40),
        transparent
    );

    z-index: 3;
}

.swimming-pool-image-overlay span {
    display: block;

    margin-bottom: 10px;

    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 3px;
    text-transform: uppercase;

    color: #e2c58d;
}

.swimming-pool-image-overlay h3 {
    margin: 0;

    font-family: var(--heading-font);
    font-size: 42px;
    font-weight: 400;
    line-height: 1.12;

    color: #ffffff;
}


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

.swimming-pool-image-number {
    position: absolute;

    top: 25px;
    right: 28px;

    z-index: 4;

    font-family: var(--heading-font);
    font-size: 24px;
    font-weight: 400;

    color: #ffffff;
}


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

@media (max-width: 1050px) {

    .swimming-pool-intro-section {
        padding: 90px 35px;
    }

    .swimming-pool-intro-container {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
    }

    .swimming-pool-intro-content h2 {
        font-size: 48px;
    }

    .swimming-pool-image-frame {
        height: 480px;
    }

    .swimming-pool-image-overlay h3 {
        font-size: 36px;
    }

}


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

@media (max-width: 768px) {

    .swimming-pool-intro-section {
        padding: 75px 20px;
    }

    .swimming-pool-intro-container {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .swimming-pool-intro-content h2 {
        font-size: 48px;
    }

    .swimming-pool-image-frame {
        height: 450px;
    }

}


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

@media (max-width: 576px) {

    .swimming-pool-intro-section {
        padding: 65px 18px;
    }

    .swimming-pool-intro-container {
        gap: 40px;
    }

    .swimming-pool-intro-label {
        font-size: 10px;
        letter-spacing: 2.5px;
    }

    .swimming-pool-intro-content h2 {
        font-size: 40px;
        line-height: 1.1;
    }

    .swimming-pool-intro-content p {
        font-size: 14px;
        line-height: 1.85;
    }

    .swimming-pool-image-frame {
        height: 380px;
        padding: 9px;
    }

    .swimming-pool-image-overlay {
        left: 9px;
        right: 9px;
        bottom: 9px;

        padding: 40px 22px 22px;
    }

    .swimming-pool-image-overlay h3 {
        font-size: 32px;
    }

    .swimming-pool-image-number {
        top: 18px;
        right: 20px;
        font-size: 20px;
    }

}
/* =========================================================
   SWIMMING POOL EXPERIENCE SECTION
========================================================= */

.swimming-pool-experience-section {
    width: 100%;
    padding: 115px 50px 125px;
    background: #f7f2e8;
    overflow: hidden;
}

.swimming-pool-experience-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}


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

.swimming-pool-experience-heading {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 100px;

    align-items: end;

    margin-bottom: 75px;
}

.swimming-pool-experience-title span {
    display: block;

    margin-bottom: 20px;

    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;

    letter-spacing: 3.5px;
    text-transform: uppercase;

    color: #a18450;
}

.swimming-pool-experience-title h2 {
    margin: 0;

    font-family: var(--heading-font);
    font-size: 58px;
    font-weight: 400;
    line-height: 1.1;

    color: #40372e;
}

.swimming-pool-experience-title h2 em {
    font-style: italic;
    color: #a18450;
}

.swimming-pool-experience-intro {
    padding-bottom: 5px;
}

.swimming-pool-experience-intro p {
    margin: 0;

    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.9;

    color: #665c50;
}


/* =========================================================
   EXPERIENCE GRID
========================================================= */

.swimming-pool-experience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid rgba(185, 150, 93, 0.55);
}


/* =========================================================
   EXPERIENCE ITEM
========================================================= */

.swimming-pool-experience-item {
    position: relative;

    min-height: 310px;

    padding: 45px 38px 35px;

    border-right: 1px solid rgba(185, 150, 93, 0.55);

    transition:
        background 0.4s ease,
        transform 0.4s ease;
}

.swimming-pool-experience-item:first-child {
    border-left: 1px solid rgba(185, 150, 93, 0.55);
}

.swimming-pool-experience-item:hover {
    background: #fffaf0;
}


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

.swimming-pool-experience-number {
    position: absolute;

    top: 25px;
    right: 30px;

    font-family: var(--heading-font);
    font-size: 20px;
    font-weight: 400;

    color: #a18450;
}


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

.swimming-pool-experience-icon {
    width: 58px;
    height: 58px;

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

    margin-bottom: 32px;

    border: 1px solid #b9965d;

    color: #a18450;

    font-size: 21px;

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

.swimming-pool-experience-item:hover
.swimming-pool-experience-icon {
    background: #a18450;
    color: #fffaf0;
}


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

.swimming-pool-experience-item h3 {
    margin: 0 0 17px;

    font-family: var(--heading-font);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;

    color: #40372e;
}


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

.swimming-pool-experience-item p {
    max-width: 330px;

    margin: 0;

    font-family: var(--body-font);
    font-size: 15px;
    line-height: 1.85;

    color: #665c50;
}


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

@media (max-width: 1050px) {

    .swimming-pool-experience-section {
        padding: 90px 35px 100px;
    }

    .swimming-pool-experience-heading {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
        margin-bottom: 60px;
    }

    .swimming-pool-experience-title h2 {
        font-size: 48px;
    }

    .swimming-pool-experience-item {
        padding: 40px 25px 30px;
    }

    .swimming-pool-experience-item h3 {
        font-size: 26px;
    }

}


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

@media (max-width: 768px) {

    .swimming-pool-experience-section {
        padding: 75px 20px 85px;
    }

    .swimming-pool-experience-heading {
        grid-template-columns: 1fr;
        gap: 25px;

        margin-bottom: 50px;
    }

    .swimming-pool-experience-title h2 {
        font-size: 46px;
    }

    .swimming-pool-experience-grid {
        grid-template-columns: 1fr;
    }

    .swimming-pool-experience-item {
        min-height: auto;

        border-left: 1px solid rgba(185, 150, 93, 0.55);
        border-right: 1px solid rgba(185, 150, 93, 0.55);
        border-bottom: 1px solid rgba(185, 150, 93, 0.55);
    }

    .swimming-pool-experience-item:first-child {
        border-bottom: 1px solid rgba(185, 150, 93, 0.55);
    }

}


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

@media (max-width: 576px) {

    .swimming-pool-experience-section {
        padding: 65px 18px 75px;
    }

    .swimming-pool-experience-title span {
        font-size: 10px;
        letter-spacing: 2.5px;
    }

    .swimming-pool-experience-title h2 {
        font-size: 39px;
        line-height: 1.1;
    }

    .swimming-pool-experience-intro p {
        font-size: 14px;
        line-height: 1.85;
    }

    .swimming-pool-experience-item {
        padding: 35px 25px 32px;
    }

    .swimming-pool-experience-item h3 {
        font-size: 25px;
    }

    .swimming-pool-experience-item p {
        font-size: 14px;
        line-height: 1.8;
    }

}
/* =========================================================
   SWIMMING POOL FINAL SECTION
========================================================= */

.swimming-pool-final-section {
    width: 100%;
    padding: 120px 50px 130px;
    background: #fffaf0;
    overflow: hidden;
}

.swimming-pool-final-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 90px;

    align-items: center;
}


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

.swimming-pool-final-image {
    width: 100%;
}

.swimming-pool-final-image-frame {
    position: relative;

    width: 100%;
    height: 600px;

    padding: 12px;

    box-sizing: border-box;

    background: #fffdf8;
    border: 1px solid #b9965d;

    overflow: hidden;
}

.swimming-pool-final-image-frame::before {
    content: "";

    position: absolute;
    inset: 5px;

    border: 1px solid rgba(185, 150, 93, 0.45);

    pointer-events: none;

    z-index: 2;
}

.swimming-pool-final-image-frame img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform 0.7s ease;
}

.swimming-pool-final-image-frame:hover img {
    transform: scale(1.03);
}


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

.swimming-pool-final-image-number {
    position: absolute;

    top: 28px;
    right: 30px;

    z-index: 3;

    font-family: var(--heading-font);
    font-size: 25px;
    font-weight: 400;

    color: #ffffff;
}


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

.swimming-pool-final-content {
    width: 100%;
}

.swimming-pool-final-label {
    display: block;

    margin-bottom: 20px;

    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;

    letter-spacing: 3.5px;
    text-transform: uppercase;

    color: #a18450;
}

.swimming-pool-final-content h2 {
    margin: 0 0 30px;

    font-family: var(--heading-font);
    font-size: 66px;
    font-weight: 400;
    line-height: 1.07;

    color: #40372e;
}

.swimming-pool-final-content h2 em {
    font-style: italic;
    color: #a18450;
}

.swimming-pool-final-content > p {
    margin: 0 0 20px;

    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.9;

    color: #665c50;
}


/* =========================================================
   DETAILS
========================================================= */

.swimming-pool-final-details {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 25px;

    margin-top: 35px;
    margin-bottom: 38px;

    padding-top: 28px;

    border-top: 1px solid rgba(185, 150, 93, 0.55);
}

.swimming-pool-final-detail {
    display: flex;
    align-items: center;

    gap: 17px;
}

.swimming-pool-final-detail i {
    width: 46px;
    height: 46px;

    flex-shrink: 0;

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

    border: 1px solid #b9965d;

    font-size: 17px;

    color: #a18450;
}

.swimming-pool-final-detail div {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.swimming-pool-final-detail strong {
    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 2px;

    color: #a18450;
}

.swimming-pool-final-detail span {
    font-family: var(--body-font);
    font-size: 14px;
    line-height: 1.5;

    color: #40372e;
}


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

.swimming-pool-final-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    min-width: 220px;

    padding: 16px 25px;

    border: 1px solid #a18450;

    background: #a18450;

    font-family: var(--body-font);
    font-size: 12px;
    font-weight: 600;

    letter-spacing: 1.5px;
    text-transform: uppercase;

    text-decoration: none;

    color: #ffffff;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.swimming-pool-final-button i {
    font-size: 12px;

    transition: transform 0.3s ease;
}

.swimming-pool-final-button:hover {
    background: transparent;
    color: #a18450;
}

.swimming-pool-final-button:hover i {
    transform: translateX(5px);
}


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

@media (max-width: 1050px) {

    .swimming-pool-final-section {
        padding: 90px 35px 105px;
    }

    .swimming-pool-final-container {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
    }

    .swimming-pool-final-image-frame {
        height: 500px;
    }

    .swimming-pool-final-content h2 {
        font-size: 54px;
    }

    .swimming-pool-final-content > p {
        font-size: 15px;
    }

    .swimming-pool-final-details {
        grid-template-columns: 1fr;
        gap: 18px;
    }

}


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

@media (max-width: 768px) {

    .swimming-pool-final-section {
        padding: 75px 20px 85px;
    }

    .swimming-pool-final-container {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .swimming-pool-final-image-frame {
        height: 500px;
    }

    .swimming-pool-final-content h2 {
        font-size: 50px;
    }

}


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

@media (max-width: 576px) {

    .swimming-pool-final-section {
        padding: 65px 18px 75px;
    }

    .swimming-pool-final-container {
        gap: 40px;
    }

    .swimming-pool-final-image-frame {
        height: 390px;
        padding: 9px;
    }

    .swimming-pool-final-image-frame::before {
        inset: 4px;
    }

    .swimming-pool-final-image-number {
        top: 18px;
        right: 20px;
        font-size: 20px;
    }

    .swimming-pool-final-label {
        font-size: 10px;
        letter-spacing: 2.5px;
    }

    .swimming-pool-final-content h2 {
        font-size: 40px;
        line-height: 1.1;
    }

    .swimming-pool-final-content > p {
        font-size: 14px;
        line-height: 1.85;
    }

    .swimming-pool-final-details {
        grid-template-columns: 1fr;
        gap: 18px;

        margin-top: 30px;
        margin-bottom: 32px;
    }

    .swimming-pool-final-button {
        width: 100%;
        box-sizing: border-box;
    }

}
/* =========================================================
   THE RETREAT BANQUET HALL HERO
========================================================= */

.retreat-banquet-page-hero {
    position: relative;

    width: 100%;
    height: 470px;

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

    background-image: url("../images/room/15.png");
    background-size: cover;
    background-position: center center;

    overflow: hidden;
}


/* =========================================================
   LIGHT / WHITE TRANSPARENT OVERLAY
========================================================= */

.retreat-banquet-page-hero-overlay {
    position: absolute;
    inset: 0;

    background: rgba(255, 250, 240, 0.78);

    z-index: 1;
}


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

.retreat-banquet-page-hero-content {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 1100px;

    padding: 0 25px;

    text-align: center;

    transform: translateY(25px);
}


/* =========================================================
   SMALL LABEL
========================================================= */

.retreat-banquet-hero-label {
    display: block;

    margin-bottom: 18px;

    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;

    letter-spacing: 4px;
    text-transform: uppercase;

    color: #a18450;
}


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

.retreat-banquet-page-hero-content h1 {
    margin: 0;

    font-family: var(--heading-font);
    font-size: 72px;
    font-weight: 400;

    line-height: 1.05;

    color: #40372e;
}


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

.retreat-banquet-hero-line {
    width: 70px;
    height: 1px;

    margin: 25px auto 20px;

    background: #b9965d;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.retreat-banquet-page-breadcrumb {
    display: flex;

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

    gap: 12px;

    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 3px;
    text-transform: uppercase;

    color: #806337;
}

.retreat-banquet-page-breadcrumb a {
    color: #806337;

    text-decoration: none;

    transition: color 0.3s ease;
}

.retreat-banquet-page-breadcrumb a:hover {
    color: #40372e;
}

.retreat-banquet-page-breadcrumb span {
    color: #a18450;
}


/* =========================================================
   CAPACITY BADGE
========================================================= */

.retreat-banquet-capacity {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    margin-top: 27px;

    padding: 10px 22px;

    background: rgba(255, 253, 248, 0.82);

    border: 1px solid rgba(185, 150, 93, 0.75);

    box-shadow: 0 5px 20px rgba(64, 55, 46, 0.06);

    text-align: left;
}

.retreat-banquet-capacity > i {
    font-size: 18px;

    color: #a18450;
}

.retreat-banquet-capacity > div {
    display: flex;

    align-items: baseline;

    gap: 9px;
}

.retreat-banquet-capacity strong {
    font-family: var(--heading-font);
    font-size: 25px;
    font-weight: 400;

    color: #40372e;
}

.retreat-banquet-capacity span {
    font-family: var(--body-font);
    font-size: 9px;
    font-weight: 600;

    letter-spacing: 2px;

    color: #806337;
}


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

@media (max-width: 1100px) {

    .retreat-banquet-page-hero {
        height: 420px;
    }

    .retreat-banquet-page-hero-content h1 {
        font-size: 60px;
    }

}


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

@media (max-width: 576px) {

    .retreat-banquet-page-hero {
        height: 370px;

        background-position: center center;
    }

    .retreat-banquet-page-hero-content {
        padding: 0 18px;

        transform: translateY(20px);
    }

    .retreat-banquet-hero-label {
        margin-bottom: 15px;

        font-size: 9px;
        letter-spacing: 2.8px;
    }

    .retreat-banquet-page-hero-content h1 {
        font-size: 43px;
        line-height: 1.08;
    }

    .retreat-banquet-hero-line {
        width: 55px;

        margin: 20px auto 17px;
    }

    .retreat-banquet-page-breadcrumb {
        gap: 7px;

        font-size: 8px;
        letter-spacing: 2px;
    }

    .retreat-banquet-capacity {
        margin-top: 22px;

        padding: 9px 17px;
    }

    .retreat-banquet-capacity > i {
        font-size: 15px;
    }

    .retreat-banquet-capacity strong {
        font-size: 21px;
    }

    .retreat-banquet-capacity span {
        font-size: 8px;
        letter-spacing: 1.5px;
    }

}
/* =========================================================
   THE RETREAT HERO - HEIGHT FIX
========================================================= */

.retreat-banquet-page-hero {
    height: 560px;
}

.retreat-banquet-page-hero-content {
    transform: translateY(35px);
}

.retreat-banquet-page-hero-content h1 {
    font-size: 72px;
    line-height: 1.08;
}


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

@media (max-width: 1100px) {

    .retreat-banquet-page-hero {
        height: 500px;
    }

    .retreat-banquet-page-hero-content h1 {
        font-size: 60px;
    }

}


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

@media (max-width: 576px) {

    .retreat-banquet-page-hero {
        height: 430px;
    }

    .retreat-banquet-page-hero-content {
        transform: translateY(25px);
    }

    .retreat-banquet-page-hero-content h1 {
        font-size: 43px;
        line-height: 1.08;
    }

}
/* =========================================================
   THE RETREAT INTRO SECTION
========================================================= */

.retreat-intro-section {
    width: 100%;
    padding: 115px 50px 120px;

    background: #fffaf0;

    overflow: hidden;
}

.retreat-intro-container {
    width: 100%;
    max-width: 1250px;

    margin: 0 auto;
}


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

.retreat-intro-brand {
    display: flex;

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

    gap: 25px;

    margin-bottom: 70px;

    text-align: center;
}

.retreat-intro-logo {
    width: 145px;
}

.retreat-intro-logo img {
    width: 100%;
    height: auto;

    display: block;

    object-fit: contain;
}

.retreat-intro-label {
    padding-left: 25px;

    border-left: 1px solid #b9965d;

    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;

    letter-spacing: 3.5px;
    text-transform: uppercase;

    color: #a18450;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.retreat-intro-main {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    padding-bottom: 75px;

    border-bottom: 1px solid rgba(185, 150, 93, 0.55);
}


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

.retreat-intro-heading span {
    display: block;

    margin-bottom: 22px;

    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;

    letter-spacing: 3.5px;
    text-transform: uppercase;

    color: #a18450;
}

.retreat-intro-heading h2 {
    margin: 0;

    font-family: var(--heading-font);
    font-size: 58px;
    font-weight: 400;

    line-height: 1.1;

    color: #40372e;
}

.retreat-intro-heading h2 em {
    font-style: italic;

    color: #a18450;
}


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

.retreat-intro-description {
    padding-top: 38px;
}

.retreat-intro-description p {
    margin: 0 0 24px;

    font-family: var(--body-font);
    font-size: 16px;

    line-height: 1.9;

    color: #665c50;
}

.retreat-intro-description p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.retreat-intro-highlights {
    display: grid;

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

    padding-top: 45px;
}

.retreat-highlight {
    position: relative;

    min-height: 135px;

    padding: 10px 35px 10px 25px;

    border-right: 1px solid rgba(185, 150, 93, 0.45);
}

.retreat-highlight:first-child {
    padding-left: 0;
}

.retreat-highlight:last-child {
    border-right: 0;
}

.retreat-highlight-number {
    position: absolute;

    top: 5px;
    right: 25px;

    font-family: var(--heading-font);
    font-size: 18px;

    color: #b9965d;
}

.retreat-highlight:first-child .retreat-highlight-number {
    right: 25px;
}

.retreat-highlight > div {
    padding-top: 8px;
}

.retreat-highlight i {
    display: block;

    margin-bottom: 18px;

    font-size: 20px;

    color: #a18450;
}

.retreat-highlight h3 {
    margin: 0 0 5px;

    font-family: var(--heading-font);
    font-size: 27px;
    font-weight: 400;

    line-height: 1.2;

    color: #40372e;
}

.retreat-highlight p {
    margin: 0;

    font-family: var(--body-font);
    font-size: 12px;
    line-height: 1.6;

    color: #806f5d;

    text-transform: uppercase;
    letter-spacing: 1px;
}


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

.retreat-highlight {
    transition:
        transform 0.35s ease,
        background 0.35s ease;
}

.retreat-highlight:hover {
    transform: translateY(-5px);
}

.retreat-highlight:hover i {
    color: #806337;
}


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

@media (max-width: 1050px) {

    .retreat-intro-section {
        padding: 90px 35px 100px;
    }

    .retreat-intro-brand {
        margin-bottom: 55px;
    }

    .retreat-intro-main {
        gap: 55px;
    }

    .retreat-intro-heading h2 {
        font-size: 48px;
    }

    .retreat-intro-description {
        padding-top: 30px;
    }

    .retreat-intro-description p {
        font-size: 15px;
    }

    .retreat-intro-highlights {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 30px;
    }

    .retreat-highlight:nth-child(2) {
        border-right: 0;
    }

    .retreat-highlight:nth-child(3),
    .retreat-highlight:nth-child(4) {
        padding-top: 25px;

        border-top: 1px solid rgba(185, 150, 93, 0.35);
    }

}


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

@media (max-width: 768px) {

    .retreat-intro-section {
        padding: 75px 20px 85px;
    }

    .retreat-intro-brand {
        flex-direction: column;

        gap: 18px;

        margin-bottom: 50px;
    }

    .retreat-intro-label {
        padding-left: 0;

        padding-top: 15px;

        border-left: 0;

        border-top: 1px solid #b9965d;
    }

    .retreat-intro-main {
        grid-template-columns: 1fr;

        gap: 20px;

        padding-bottom: 55px;
    }

    .retreat-intro-description {
        padding-top: 0;
    }

    .retreat-intro-highlights {
        grid-template-columns: 1fr 1fr;
    }

    .retreat-highlight {
        padding-left: 20px;
    }

}


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

@media (max-width: 576px) {

    .retreat-intro-section {
        padding: 65px 18px 75px;
    }

    .retreat-intro-logo {
        width: 125px;
    }

    .retreat-intro-label {
        font-size: 9px;
        letter-spacing: 2.5px;
    }

    .retreat-intro-heading span {
        font-size: 9px;
        letter-spacing: 2.5px;
    }

    .retreat-intro-heading h2 {
        font-size: 40px;
        line-height: 1.1;
    }

    .retreat-intro-description p {
        font-size: 14px;
        line-height: 1.85;
    }

    .retreat-intro-highlights {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .retreat-highlight,
    .retreat-highlight:nth-child(3),
    .retreat-highlight:nth-child(4) {
        min-height: auto;

        padding: 28px 15px;

        border-right: 0;
        border-top: 1px solid rgba(185, 150, 93, 0.35);
    }

    .retreat-highlight:first-child {
        padding-left: 15px;

        border-top: 0;
    }

    .retreat-highlight-number {
        right: 15px;
    }

    .retreat-highlight h3 {
        font-size: 25px;
    }

    .retreat-highlight p {
        font-size: 11px;
    }

}
/* =========================================================
   RETREAT LOGO - SIZE INCREASE
========================================================= */

.retreat-intro-logo {
    width: 240px;
}

.retreat-intro-logo img {
    width: 100%;
    height: auto;
    display: block;
}


/* Desktop spacing */
.retreat-intro-brand {
    gap: 32px;
    margin-bottom: 75px;
}


/* Tablet */
@media (max-width: 1050px) {

    .retreat-intro-logo {
        width: 210px;
    }

}


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

    .retreat-intro-logo {
        width: 180px;
    }

    .retreat-intro-brand {
        gap: 18px;
        margin-bottom: 50px;
    }

}
/* =========================================================
   THE RETREAT - SPACE SECTION
   CLEAN FINAL LAYOUT
========================================================= */

.retreat-space-section {
    width: 100%;
    padding: 120px 50px 130px;
    background: #f7f2e8;
    overflow: hidden;
    box-sizing: border-box;
}

.retreat-space-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.08fr 0.92fr;

    align-items: stretch;

    box-sizing: border-box;
}


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

.retreat-space-image-wrap {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.retreat-space-image {
    position: relative;

    width: 100%;
    height: 610px;

    padding: 10px;

    box-sizing: border-box;

    background: #fffdf8;
    border: 1px solid #b9965d;

    overflow: hidden;
}

.retreat-space-image::before {
    content: "";

    position: absolute;
    inset: 5px;

    border: 1px solid rgba(185, 150, 93, 0.45);

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

.retreat-space-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform 0.7s ease;
}

.retreat-space-image:hover img {
    transform: scale(1.025);
}


/* =========================================================
   IMAGE LABEL
========================================================= */

.retreat-space-image-label {
    position: absolute;

    left: 10px;
    right: 10px;
    bottom: 10px;

    z-index: 3;

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

    padding: 70px 30px 22px;

    background: linear-gradient(
        to top,
        rgba(48, 40, 31, 0.88),
        rgba(48, 40, 31, 0.35),
        transparent
    );

    box-sizing: border-box;
}

.retreat-space-image-label span {
    font-family: var(--body-font);

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

    letter-spacing: 3px;

    color: #ffffff;
}

.retreat-space-image-label strong {
    font-family: var(--heading-font);

    font-size: 25px;
    font-weight: 400;

    color: #e1c388;
}


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

.retreat-space-content {
    width: 100%;
    min-width: 0;

    padding: 65px 55px;

    box-sizing: border-box;

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

    background: #fffaf0;

    border-top: 1px solid rgba(185, 150, 93, 0.65);
    border-right: 1px solid rgba(185, 150, 93, 0.65);
    border-bottom: 1px solid rgba(185, 150, 93, 0.65);

    box-shadow: 12px 18px 35px rgba(64, 55, 46, 0.06);
}


/* =========================================================
   EYEBROW
========================================================= */

.retreat-space-eyebrow {
    display: block;

    margin-bottom: 18px;

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

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

    letter-spacing: 3.5px;
    text-transform: uppercase;

    color: #a18450;
}


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

.retreat-space-content h2 {
    margin: 0 0 25px;

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

    font-size: 52px;
    font-weight: 400;

    line-height: 1.08;

    color: #40372e;
}

.retreat-space-content h2 em {
    font-style: italic;
    color: #a18450;
}


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

.retreat-space-line {
    width: 60px;
    height: 1px;

    margin-bottom: 27px;

    background: #b9965d;
}


/* =========================================================
   PARAGRAPHS
========================================================= */

.retreat-space-content > p {
    margin: 0 0 19px;

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

    font-size: 15px;
    line-height: 1.85;

    color: #665c50;
}


/* =========================================================
   FEATURES
========================================================= */

.retreat-space-features {
    width: 100%;

    margin-top: 18px;
    padding-top: 18px;

    border-top: 1px solid rgba(185, 150, 93, 0.45);

    box-sizing: border-box;
}

.retreat-space-feature {
    display: flex;
    align-items: center;

    gap: 15px;

    padding: 15px 0;

    border-bottom: 1px solid rgba(185, 150, 93, 0.28);

    box-sizing: border-box;
}

.retreat-space-feature:last-child {
    border-bottom: 0;
}

.retreat-space-feature-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    border: 1px solid #b9965d;

    color: #a18450;

    font-size: 16px;
}

.retreat-space-feature div:last-child {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.retreat-space-feature strong {
    font-family: var(--heading-font);

    font-size: 19px;
    font-weight: 400;

    color: #40372e;
}

.retreat-space-feature span {
    font-family: var(--body-font);

    font-size: 11px;
    line-height: 1.5;

    color: #806f5d;
}


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

.retreat-space-button {
    align-self: flex-start;

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

    gap: 12px;

    margin-top: 25px;

    padding: 15px 22px;

    background: #a18450;

    border: 1px solid #a18450;

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

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

    letter-spacing: 1.4px;
    text-transform: uppercase;

    color: #ffffff;

    text-decoration: none;

    transition: all 0.3s ease;
}

.retreat-space-button:hover {
    background: transparent;
    color: #a18450;
}

.retreat-space-button i {
    transition: transform 0.3s ease;
}

.retreat-space-button:hover i {
    transform: translateX(5px);
}


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

@media (max-width: 1050px) {

    .retreat-space-section {
        padding: 90px 35px 100px;
    }

    .retreat-space-container {
        grid-template-columns: 1fr 0.9fr;
    }

    .retreat-space-image {
        height: 540px;
    }

    .retreat-space-content {
        padding: 50px 35px;
    }

    .retreat-space-content h2 {
        font-size: 44px;
    }

    .retreat-space-content > p {
        font-size: 14px;
    }

}


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

@media (max-width: 768px) {

    .retreat-space-section {
        padding: 75px 20px 85px;
    }

    .retreat-space-container {
        display: block;
    }

    .retreat-space-image {
        height: 500px;
    }

    .retreat-space-content {
        width: 100%;

        padding: 50px 35px;

        border-left: 1px solid rgba(185, 150, 93, 0.65);
        border-top: 0;

        box-shadow: 0 15px 35px rgba(64, 55, 46, 0.06);
    }

    .retreat-space-content h2 {
        font-size: 48px;
    }

}


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

@media (max-width: 576px) {

    .retreat-space-section {
        padding: 65px 18px 75px;
    }

    .retreat-space-image {
        height: 390px;
        padding: 8px;
    }

    .retreat-space-image::before {
        inset: 4px;
    }

    .retreat-space-image-label {
        left: 8px;
        right: 8px;
        bottom: 8px;

        padding: 50px 20px 18px;
    }

    .retreat-space-image-label span {
        font-size: 9px;
        letter-spacing: 2.5px;
    }

    .retreat-space-image-label strong {
        font-size: 20px;
    }

    .retreat-space-content {
        padding: 40px 23px;
    }

    .retreat-space-eyebrow {
        font-size: 9px;
        letter-spacing: 2.5px;
    }

    .retreat-space-content h2 {
        font-size: 39px;
        line-height: 1.1;
    }

    .retreat-space-content > p {
        font-size: 14px;
        line-height: 1.85;
    }

    .retreat-space-feature strong {
        font-size: 18px;
    }

    .retreat-space-feature span {
        font-size: 11px;
    }

    .retreat-space-button {
        width: 100%;
    }

}
/* =========================================================
   THE RETREAT - BOTTOM ALIGNMENT FIX
========================================================= */

.retreat-space-container {
    align-items: stretch !important;
}


/* Image wrapper should stretch with content */
.retreat-space-image-wrap {
    height: 100%;
    display: flex;
    align-items: stretch;
}


/* Image frame takes full row height */
.retreat-space-image {
    width: 100%;
    height: auto !important;
    min-height: 610px;

    display: flex;

    box-sizing: border-box;
}


/* Actual image fills the complete frame */
.retreat-space-image img {
    width: 100%;
    height: 100%;

    min-height: 100%;

    object-fit: cover;
}


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

@media (max-width: 1050px) {

    .retreat-space-image {
        min-height: 540px;
    }

}


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

@media (max-width: 768px) {

    .retreat-space-image-wrap {
        height: auto;
    }

    .retreat-space-image {
        height: 500px !important;
        min-height: 0;
    }

}


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

@media (max-width: 576px) {

    .retreat-space-image {
        height: 390px !important;
        min-height: 0;
    }

}
/* =========================================================
   THE RETREAT FINAL FEATURES SECTION
========================================================= */

.retreat-final-section {
    position: relative;

    width: 100%;

    padding: 120px 50px 110px;

    background: #fffaf0;

    overflow: hidden;

    box-sizing: border-box;
}


/* =========================================================
   SUBTLE LOGO WATERMARK
========================================================= */

.retreat-final-section::before {
    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    left: 27%;
    top: 50%;

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

    background-image: url("../images/banquet/the-retreat-logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    opacity: 0.035;

    pointer-events: none;
}


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

.retreat-final-container {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 1250px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 0.95fr 1.05fr;

    gap: 90px;

    align-items: start;
}


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

.retreat-final-heading {
    padding-top: 5px;
}

.retreat-final-heading > span {
    display: block;

    margin-bottom: 20px;

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

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

    letter-spacing: 3.5px;

    text-transform: uppercase;

    color: #a18450;
}

.retreat-final-heading h2 {
    margin: 0;

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

    font-size: 58px;
    font-weight: 400;

    line-height: 1.1;

    color: #40372e;
}

.retreat-final-heading h2 em {
    font-style: normal;

    color: #a18450;
}


/* =========================================================
   FEATURES GRID
========================================================= */

.retreat-final-features {
    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 45px;
    row-gap: 0;
}


/* =========================================================
   FEATURE ITEM
========================================================= */

.retreat-final-feature {
    position: relative;

    min-height: 280px;

    padding: 0 0 35px;

    box-sizing: border-box;

    border-bottom: 1px solid rgba(185, 150, 93, 0.30);
}

.retreat-final-feature:nth-child(3),
.retreat-final-feature:nth-child(4) {
    padding-top: 45px;
    padding-bottom: 0;

    border-bottom: 0;
}

.retreat-final-feature:nth-child(odd) {
    padding-right: 25px;
}

.retreat-final-feature:nth-child(even) {
    padding-left: 25px;

    border-left: 1px solid rgba(185, 150, 93, 0.25);
}


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

.retreat-final-icon {
    width: 62px;
    height: 62px;

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

    margin-bottom: 25px;

    color: #a18450;

    font-size: 27px;
}

.retreat-final-icon i {
    font-weight: 400;
}


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

.retreat-final-feature h3 {
    margin: 0 0 15px;

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

    font-size: 29px;
    font-weight: 400;

    line-height: 1.2;

    color: #40372e;
}


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

.retreat-final-feature p {
    max-width: 330px;

    margin: 0;

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

    font-size: 15px;

    line-height: 1.75;

    color: #665c50;
}


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

.retreat-final-button {
    display: inline-flex;

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

    gap: 13px;

    margin-top: 45px;

    padding: 16px 27px;

    background: #a18450;

    border: 1px solid #a18450;

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

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

    letter-spacing: 1.7px;

    text-transform: uppercase;

    text-decoration: none;

    color: #ffffff;

    transition: all 0.3s ease;
}

.retreat-final-button:hover {
    background: transparent;

    color: #a18450;
}

.retreat-final-button i {
    transition: transform 0.3s ease;
}

.retreat-final-button:hover i {
    transform: translateX(5px);
}


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

@media (max-width: 1050px) {

    .retreat-final-section {
        padding: 90px 35px 95px;
    }

    .retreat-final-container {
        grid-template-columns: 0.9fr 1.1fr;

        gap: 55px;
    }

    .retreat-final-heading h2 {
        font-size: 48px;
    }

    .retreat-final-feature {
        min-height: 260px;
    }

    .retreat-final-feature h3 {
        font-size: 25px;
    }

    .retreat-final-feature p {
        font-size: 14px;
    }

}


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

@media (max-width: 768px) {

    .retreat-final-section {
        padding: 75px 20px 85px;
    }

    .retreat-final-container {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .retreat-final-heading h2 {
        font-size: 48px;
    }

    .retreat-final-features {
        column-gap: 30px;
    }

    .retreat-final-feature {
        min-height: 250px;
    }

}


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

@media (max-width: 576px) {

    .retreat-final-section {
        padding: 65px 18px 75px;
    }

    .retreat-final-section::before {
        width: 450px;
        height: 450px;

        left: 50%;
    }

    .retreat-final-heading > span {
        font-size: 10px;

        letter-spacing: 2.5px;
    }

    .retreat-final-heading h2 {
        font-size: 40px;

        line-height: 1.1;
    }

    .retreat-final-button {
        width: 100%;

        box-sizing: border-box;

        margin-top: 32px;
    }

    .retreat-final-features {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .retreat-final-feature,
    .retreat-final-feature:nth-child(3),
    .retreat-final-feature:nth-child(4) {
        min-height: auto;

        padding: 30px 0 !important;

        border-left: 0 !important;

        border-bottom: 1px solid rgba(185, 150, 93, 0.30);
    }

    .retreat-final-feature:last-child {
        border-bottom: 0;
    }

    .retreat-final-icon {
        width: 52px;
        height: 52px;

        margin-bottom: 18px;

        font-size: 23px;
    }

    .retreat-final-feature h3 {
        font-size: 25px;

        margin-bottom: 12px;
    }

    .retreat-final-feature p {
        font-size: 14px;

        line-height: 1.8;
    }

}
/* =========================================================
   THE RETREAT FINAL SECTION
   TYPOGRAPHY + ICON SIZE INCREASE
========================================================= */


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

.retreat-final-heading > span {
    font-size: 13px;
    letter-spacing: 4px;
}

.retreat-final-heading h2 {
    font-size: 66px;
    line-height: 1.08;
}


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

.retreat-final-icon {
    width: 78px;
    height: 78px;

    margin-bottom: 28px;

    font-size: 38px;
}

.retreat-final-icon i {
    font-size: 38px;
}


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

.retreat-final-feature h3 {
    font-size: 34px;
    line-height: 1.2;

    margin-bottom: 18px;
}


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

.retreat-final-feature p {
    max-width: 380px;

    font-size: 17px;
    line-height: 1.85;
}


/* =========================================================
   FEATURE SPACING
========================================================= */

.retreat-final-feature {
    min-height: 315px;
}

.retreat-final-feature:nth-child(3),
.retreat-final-feature:nth-child(4) {
    padding-top: 55px;
}


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

.retreat-final-button {
    padding: 18px 30px;

    margin-top: 50px;

    font-size: 12px;
    letter-spacing: 1.8px;
}

.retreat-final-button i {
    font-size: 14px;
}


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

@media (max-width: 1050px) {

    .retreat-final-heading h2 {
        font-size: 54px;
    }

    .retreat-final-icon {
        width: 68px;
        height: 68px;

        font-size: 32px;
    }

    .retreat-final-icon i {
        font-size: 32px;
    }

    .retreat-final-feature h3 {
        font-size: 29px;
    }

    .retreat-final-feature p {
        font-size: 15px;
    }

}


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

@media (max-width: 768px) {

    .retreat-final-heading h2 {
        font-size: 50px;
    }

    .retreat-final-icon {
        width: 65px;
        height: 65px;
    }

    .retreat-final-feature h3 {
        font-size: 28px;
    }

    .retreat-final-feature p {
        font-size: 15px;
    }

}


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

@media (max-width: 576px) {

    .retreat-final-heading > span {
        font-size: 10px;
        letter-spacing: 2.8px;
    }

    .retreat-final-heading h2 {
        font-size: 41px;
        line-height: 1.1;
    }

    .retreat-final-icon {
        width: 58px;
        height: 58px;

        margin-bottom: 18px;

        font-size: 27px;
    }

    .retreat-final-icon i {
        font-size: 27px;
    }

    .retreat-final-feature h3 {
        font-size: 26px;
        margin-bottom: 12px;
    }

    .retreat-final-feature p {
        font-size: 14px;
        line-height: 1.8;
    }

}
.retreat-final-icon {
    width: 78px;
    height: 78px;

    margin-bottom: 28px;

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

    color: #a18450;
}

.retreat-final-icon svg {
    width: 48px;
    height: 48px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;

    display: block;
}
@media (max-width: 576px) {

    .retreat-final-icon {
        width: 62px;
        height: 62px;

        margin-bottom: 18px;
    }

    .retreat-final-icon svg {
        width: 40px;
        height: 40px;
    }

}
/* =========================================================
   REGENTA BANQUET HALL HERO
========================================================= */

.regenta-banquet-page-hero {
    position: relative;

    width: 100%;
    height: 560px;

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

    background-image: url("../images/room/1.png");
    background-size: cover;
    background-position: center center;

    overflow: hidden;
    box-sizing: border-box;
}


/* =========================================================
   LIGHT TRANSPARENT OVERLAY
========================================================= */

.regenta-banquet-page-hero-overlay {
    position: absolute;

    inset: 0;

    background: rgba(255, 250, 240, 0.78);

    z-index: 1;
}


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

.regenta-banquet-page-hero-content {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 1100px;

    padding: 0 25px;

    text-align: center;

    transform: translateY(35px);

    box-sizing: border-box;
}


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

.regenta-banquet-page-hero-content h1 {
    margin: 0;

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

    font-size: 72px;
    font-weight: 400;

    line-height: 1.08;

    color: #40372e;
}


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

.regenta-banquet-hero-line {
    width: 70px;
    height: 1px;

    margin: 25px auto 20px;

    background: #b9965d;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.regenta-banquet-page-breadcrumb {
    display: flex;

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

    gap: 12px;

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

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

    letter-spacing: 3px;

    text-transform: uppercase;

    color: #806337;
}

.regenta-banquet-page-breadcrumb a {
    color: #806337;

    text-decoration: none;

    transition: color 0.3s ease;
}

.regenta-banquet-page-breadcrumb a:hover {
    color: #40372e;
}

.regenta-banquet-page-breadcrumb span {
    color: #a18450;
}


/* =========================================================
   CAPACITY
========================================================= */

.regenta-banquet-capacity {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    margin-top: 27px;

    padding: 10px 22px;

    background: rgba(255, 253, 248, 0.85);

    border: 1px solid rgba(185, 150, 93, 0.75);

    box-shadow: 0 5px 20px rgba(64, 55, 46, 0.06);

    text-align: left;

    box-sizing: border-box;
}

.regenta-banquet-capacity > i {
    font-size: 18px;

    color: #a18450;
}

.regenta-banquet-capacity > div {
    display: flex;

    align-items: baseline;

    gap: 9px;
}

.regenta-banquet-capacity strong {
    font-family: var(--heading-font);

    font-size: 27px;
    font-weight: 400;

    color: #40372e;
}

.regenta-banquet-capacity span {
    font-family: var(--body-font);

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

    letter-spacing: 2px;

    color: #806337;
}


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

@media (max-width: 1100px) {

    .regenta-banquet-page-hero {
        height: 500px;
    }

    .regenta-banquet-page-hero-content h1 {
        font-size: 60px;
    }

}


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

@media (max-width: 576px) {

    .regenta-banquet-page-hero {
        height: 430px;

        background-position: center center;
    }

    .regenta-banquet-page-hero-content {
        padding: 0 18px;

        transform: translateY(25px);
    }

    .regenta-banquet-page-hero-content h1 {
        font-size: 43px;

        line-height: 1.08;
    }

    .regenta-banquet-hero-line {
        width: 55px;

        margin: 20px auto 17px;
    }

    .regenta-banquet-page-breadcrumb {
        gap: 7px;

        font-size: 8px;

        letter-spacing: 2px;
    }

    .regenta-banquet-capacity {
        margin-top: 22px;

        padding: 9px 17px;
    }

    .regenta-banquet-capacity > i {
        font-size: 15px;
    }

    .regenta-banquet-capacity strong {
        font-size: 22px;
    }

    .regenta-banquet-capacity span {
        font-size: 8px;

        letter-spacing: 1.5px;
    }

}
/* =========================================================
   REGENCY BANQUET HALL HERO
========================================================= */

.regency-banquet-page-hero {
    position: relative;
    width: 100%;
    height: 560px;

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

    background-image: url("../images/room/14.png");
    background-size: cover;
    background-position: center center;

    overflow: hidden;
    box-sizing: border-box;
}


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

.regency-banquet-page-hero-overlay {
    position: absolute;
    inset: 0;

    background: rgba(255, 250, 240, 0.78);

    z-index: 1;
}


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

.regency-banquet-page-hero-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1100px;

    padding: 0 25px;

    text-align: center;

    transform: translateY(35px);

    box-sizing: border-box;
}


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

.regency-banquet-page-hero-content h1 {
    margin: 0;

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

    font-size: 72px;
    font-weight: 400;

    line-height: 1.08;

    color: #40372e;
}


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

.regency-banquet-hero-line {
    width: 70px;
    height: 1px;

    margin: 25px auto 20px;

    background: #b9965d;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.regency-banquet-page-breadcrumb {
    display: flex;

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

    gap: 12px;

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

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

    letter-spacing: 3px;

    text-transform: uppercase;

    color: #806337;
}

.regency-banquet-page-breadcrumb a {
    color: #806337;

    text-decoration: none;

    transition: color 0.3s ease;
}

.regency-banquet-page-breadcrumb a:hover {
    color: #40372e;
}

.regency-banquet-page-breadcrumb span {
    color: #a18450;
}


/* =========================================================
   GUEST CAPACITY
========================================================= */

.regency-banquet-capacity {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    margin-top: 27px;

    padding: 10px 22px;

    background: rgba(255, 253, 248, 0.85);

    border: 1px solid rgba(185, 150, 93, 0.75);

    box-shadow: 0 5px 20px rgba(64, 55, 46, 0.06);

    text-align: left;

    box-sizing: border-box;
}

.regency-banquet-capacity > i {
    font-size: 18px;
    color: #a18450;
}

.regency-banquet-capacity > div {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.regency-banquet-capacity strong {
    font-family: var(--heading-font);

    font-size: 27px;
    font-weight: 400;

    color: #40372e;
}

.regency-banquet-capacity span {
    font-family: var(--body-font);

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

    letter-spacing: 2px;

    color: #806337;
}


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

@media (max-width: 1100px) {

    .regency-banquet-page-hero {
        height: 500px;
    }

    .regency-banquet-page-hero-content h1 {
        font-size: 60px;
    }

}


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

@media (max-width: 576px) {

    .regency-banquet-page-hero {
        height: 430px;

        background-position: center center;
    }

    .regency-banquet-page-hero-content {
        padding: 0 18px;

        transform: translateY(25px);
    }

    .regency-banquet-page-hero-content h1 {
        font-size: 43px;
        line-height: 1.08;
    }

    .regency-banquet-hero-line {
        width: 55px;

        margin: 20px auto 17px;
    }

    .regency-banquet-page-breadcrumb {
        gap: 7px;

        font-size: 8px;

        letter-spacing: 2px;
    }

    .regency-banquet-capacity {
        margin-top: 22px;

        padding: 9px 17px;
    }

    .regency-banquet-capacity > i {
        font-size: 15px;
    }

    .regency-banquet-capacity strong {
        font-size: 22px;
    }

    .regency-banquet-capacity span {
        font-size: 8px;

        letter-spacing: 1.5px;
    }

}
/* =========================================================
   THE REGAL BOARD ROOM HERO
========================================================= */

.regal-board-room-page-hero {
    position: relative;
    width: 100%;
    height: 560px;

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

    background-image: url("../images/room/13.png");
    background-size: cover;
    background-position: center center;

    overflow: hidden;
    box-sizing: border-box;
}


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

.regal-board-room-page-hero-overlay {
    position: absolute;
    inset: 0;

    background: rgba(255, 250, 240, 0.78);

    z-index: 1;
}


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

.regal-board-room-page-hero-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1100px;

    padding: 0 25px;

    text-align: center;

    transform: translateY(35px);

    box-sizing: border-box;
}


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

.regal-board-room-page-hero-content h1 {
    margin: 0;

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

    font-size: 72px;
    font-weight: 400;

    line-height: 1.08;

    color: #40372e;
}


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

.regal-board-room-hero-line {
    width: 70px;
    height: 1px;

    margin: 25px auto 20px;

    background: #b9965d;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.regal-board-room-page-breadcrumb {
    display: flex;

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

    gap: 12px;

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

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

    letter-spacing: 3px;

    text-transform: uppercase;

    color: #806337;
}

.regal-board-room-page-breadcrumb a {
    color: #806337;

    text-decoration: none;

    transition: color 0.3s ease;
}

.regal-board-room-page-breadcrumb a:hover {
    color: #40372e;
}

.regal-board-room-page-breadcrumb span {
    color: #a18450;
}


/* =========================================================
   GUEST CAPACITY
========================================================= */

.regal-board-room-capacity {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    margin-top: 27px;

    padding: 10px 22px;

    background: rgba(255, 253, 248, 0.85);

    border: 1px solid rgba(185, 150, 93, 0.75);

    box-shadow: 0 5px 20px rgba(64, 55, 46, 0.06);

    text-align: left;

    box-sizing: border-box;
}

.regal-board-room-capacity > i {
    font-size: 18px;

    color: #a18450;
}

.regal-board-room-capacity > div {
    display: flex;

    align-items: baseline;

    gap: 9px;
}

.regal-board-room-capacity strong {
    font-family: var(--heading-font);

    font-size: 27px;
    font-weight: 400;

    color: #40372e;
}

.regal-board-room-capacity span {
    font-family: var(--body-font);

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

    letter-spacing: 2px;

    color: #806337;
}


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

@media (max-width: 1100px) {

    .regal-board-room-page-hero {
        height: 500px;
    }

    .regal-board-room-page-hero-content h1 {
        font-size: 60px;
    }

}


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

@media (max-width: 576px) {

    .regal-board-room-page-hero {
        height: 430px;

        background-position: center center;
    }

    .regal-board-room-page-hero-content {
        padding: 0 18px;

        transform: translateY(25px);
    }

    .regal-board-room-page-hero-content h1 {
        font-size: 43px;

        line-height: 1.08;
    }

    .regal-board-room-hero-line {
        width: 55px;

        margin: 20px auto 17px;
    }

    .regal-board-room-page-breadcrumb {
        gap: 7px;

        font-size: 8px;

        letter-spacing: 2px;
    }

    .regal-board-room-capacity {
        margin-top: 22px;

        padding: 9px 17px;
    }

    .regal-board-room-capacity > i {
        font-size: 15px;
    }

    .regal-board-room-capacity strong {
        font-size: 22px;
    }

    .regal-board-room-capacity span {
        font-size: 8px;

        letter-spacing: 1.5px;
    }

}