/*
Theme Name: Mellow - Hotel HTML Website Template
Theme URI: https://templatesjungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: Mellow is specially designed for Hotel Website by TemplatesJungle.
Version: 1.1
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:

1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Background Color
  2.3 Section
    - Section Paddings
    - Section Margins
    - Section Title
  2.4 Buttons
    - Primary Buttons
    - Outline Buttons
    - Button Hover Effects

3. CONTENT ELEMENTS
  - Dropdown
  - Form
  - Svg Color
  - Swiper
  - Modal Video
  - Preloader

4. SITE STRUCTURE
  4.1 Header
  4.2 Billboard
  4.3 Rooms Section
  4.4 Services Section

5. PAGES STYLE
  5.1 About page
  5.2 Blog page 
  5.3 Booking page 
  5.4 Gallery page
  5.5 Reviews page 
  5.5 FAQs page 


  
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
  --primary-color: #B88E68;
  --secondary-color: #F4E2D8;
  --black-color: #1A1A1A;
  --dark-color: #353535;
  --primary-color-200: #F4E2D8;
  --primary-color-400: #E8C8B5;
  --gray-color: #777F81;
  --light-color: #fdfdfd;

  /* bootstrap color-scheme */
  --bs-dark-rgb: 80, 80, 80;
  --bs-gray-100: #F4E2D8;
  --bs-gray-300: #DCDCDC;
  --bs-light-rgb: rgba(255, 255, 255, 1);
  --bs-body-color-rgb: 53, 53, 53;
  --bs-primary-rgb: 184, 142, 104;
  --bs-secondary-rgb: 244, 226, 216;
}

/* Fonts */
:root {
  --heading-font: "Cormorant Upright", serif;
  --body-font: "Plus Jakarta Sans", sans-serif;
}

/*----------------------------------------------*/
/* 2 GENERAL TYPOGRAPHY
/*----------------------------------------------*/

/* 2.1 General Styles
/*----------------------------------------------*/
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
}


body {
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 164%;
  letter-spacing: 0.32px;
  color: var(--dark-color);
  margin: 0;
  padding: 0;
  max-width: 100%;
  width: 100%;
  position: relative;
}

#form1 {
  max-width: 100%;
  width: 100%;
}

p {
  color: var(--dark-color);
}

a {
  color: inherit;
  text-decoration: none;
  transition: 0.3s ease-in-out;
}

a:hover {
  color: var(--primary-color);
}

.text-light {
  color: var(--light-color) !important;
}

.text-primary {
  color: var(--primary-color) !important;
}

.text-black {
  color: var(--black-color) !important;
}

/* 2.2 Background Color
/*----------------------------------------------*/
.bg-light {
  background-color: var(--light-color) !important;
}

.bg-primary {
  background-color: var(--primary-color) !important;
}

.bg-gray {
  background-color: var(--bs-gray-100) !important;
}

/*--------------------------------------------------------------
/** 2.3 Section
--------------------------------------------------------------*/
/* - Section Padding
--------------------------------------------------------------*/
.padding-small {
  padding-top: 5em;
  padding-bottom: 5em;
}

.padding-medium {
  padding-top: 8em;
  padding-bottom: 8em;
}

.padding-large {
  padding-top: 8em;
  padding-bottom: 8em;
}

.padding-side {
  padding-left: 6rem;
  padding-right: 6rem;
}

@media (max-width: 1400px) {
  .padding-side {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

@media (max-width: 1200px) {
  .padding-side {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

@media (max-width: 992px) {
  .padding-side {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media (max-width: 768px) {
  .padding-side {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .padding-large {
    padding-top: 15em;
  }
}

@media (max-width: 576px) {
  .padding-side {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .padding-large {
    padding-top: 18em;
  }
}

/* - Section Margin
--------------------------------------------------------------*/
.margin-small {
  margin-top: 8.125em;
  margin-bottom: 8.125em;
}

.margin-medium {
  margin-top: 10em;
  margin-bottom: 10em;
}

.margin-large {
  margin-top: 12em;
  margin-bottom: 12em;
}


/* - Section Title
--------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--black-color);
  font-family: var(--heading-font);
  text-transform: capitalize;
  font-weight: 400;
}

/* Animation */
@media (min-width: 200px) {
  .animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}

/* Animate Slide */
@keyframes slide {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }

  100% {
    transform: translateY(0rem);
    opacity: 1;
  }
}

@-webkit-keyframes slide {
  0% {
    -webkit-transform: translateY(1rem);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    opacity: 1;
  }
}

.slide {
  -webkit-animation-name: slide;
  animation-name: slide;
}

/*--------------------------------------------------------------
/** 2.4 Buttons
--------------------------------------------------------------*/
.btn {
  --bs-btn-padding-x: 2.4rem;
  --bs-btn-padding-y: 1rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 400;
  text-transform: capitalize;
  border-radius: 10px;
  transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

/* - Primary Buttons
--------------------------------------------------------------*/
.btn-primary {
  --bs-btn-color: var(--dark-color);
  --bs-btn-bg: var(--secondary-color);
  --bs-btn-border-color: var(--secondary-color);
  --bs-btn-hover-color: var(--dark-color);
  --bs-btn-hover-bg: var(--secondary-color);
  --bs-btn-hover-border-color: var(--secondary-color);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--dark-color);
  --bs-btn-active-bg: var(--secondary-color);
  --bs-btn-active-border-color: var(--secondary-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--dark-color);
  --bs-btn-disabled-bg: var(--secondary-color);
  --bs-btn-disabled-border-color: var(--secondary-color);
}

/* - Outline Buttons
--------------------------------------------------------------*/
.btn-outline-primary {
  --bs-btn-color: var(--secondary-color);
  --bs-btn-border-color: var(--secondary-color);
  --bs-btn-hover-color: var(--dark-color);
  --bs-btn-hover-bg: var(--secondary-color);
  --bs-btn-hover-border-color: var(--secondary-color);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: var(--dark-color);
  --bs-btn-active-bg: var(--secondary-color);
  --bs-btn-active-border-color: var(--secondary-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--secondary-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--secondary-color);
  --bs-gradient: none;
}

/* - Button Hover Effects
------------------------------------------------------------- */
.btn-arrow {
  position: relative;
  transition: background-color 300ms ease-out;
}

.btn-arrow span {
  display: inline-block;
  position: relative;
  transition: all 300ms ease-out;
  will-change: transform;
}

.btn-arrow:hover span {
  transform: translate3d(-0.7rem, 0, 0);
}

.btn-arrow svg {
  position: absolute;
  right: 0;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 300ms ease-out;
  will-change: right, opacity;
}

.btn-arrow:hover svg {
  opacity: 1;
  right: -1.6rem;
}


/*--------------------------------------------------------------
/** 3.CONTENT ELEMENTS
--------------------------------------------------------------*/

/* Dropdown
------------------------------------------------------------- */
.dropdown-item {
  color: var(--dark-color);
  text-transform: capitalize;
}

.dropdown-item.active,
.dropdown-item:hover,
.dropdown-item:active {
  color: var(--dark-color);
  background-color: var(--secondary-color);
}

/* Form
------------------------------------------------------------- */
.form-control:focus,
.form-select:focus {
  border-color: var(--dark-color);
  outline: 0;
  box-shadow: none;
}

input,
select,
textarea {
  border-color: var(--dark-color);
  outline: 0;
  box-shadow: none;
}

select:focus {
  box-shadow: none;
}

/* Svg Color
------------------------------------------------------------- */
svg.light-color {
  color: var(--light-color);
}

svg.dark-color {
  color: var(--dark-color);
}

svg.color {
  color: #ECB27B;
}

svg.primary-color {
  color: var(--primary-color);
}

svg.social {
  color: #ECB27B;
}

svg.social:hover {
  color: var(--primary-color);
}



/* Swiper
------------------------------------------------------------- */

/* room */
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 5px;
}

.room-pagination .swiper-pagination-bullet {
  width: 18px;
  height: 18px;
  background-color: var(--primary-color);
}

.room-pagination .swiper-pagination-bullet-active {
  background-color: var(--primary-color);
}

/* gallery */
.main-slider-button-next.swiper-button-disabled,
.main-slider-button-prev.swiper-button-disabled {
  opacity: .35;
  cursor: auto;
  pointer-events: none;
}


/* modal video override
------------------------------------------------------------- */
.modal-dialog {
  max-width: 800px;
  margin: auto;
  height: 100vh;
  display: flex;
  align-items: center;
}

.modal-content {
  padding: 0;
  background-color: #f5f3ef;
  border: none;
  border-radius: 0
}


/* ==========================================
   LUXURY HOTEL PRELOADER (CUSTOM DIAMOND DESIGN)
   ========================================== */
body.preloader-site {
  overflow: hidden !important;
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: 100%;
  background-color: #ffffff;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.luxury-loader {
  position: relative;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
}

.loader-diamond {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2.5px solid #9A724E;
  border-radius: 4px;
  transform: rotate(45deg);
  animation: spinDiamond 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
  box-shadow: 0 0 25px rgba(154, 114, 78, 0.25);
}

.loader-diamond::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 7px;
  right: 7px;
  bottom: 7px;
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%);
  border-radius: 3px;
  animation: pulseInner 2s ease-in-out infinite alternate;
}

@keyframes spinDiamond {
  0% {
    transform: rotate(45deg);
  }

  100% {
    transform: rotate(405deg);
  }
}

@keyframes pulseInner {
  0% {
    transform: scale(0.75);
    opacity: 0.65;
  }

  100% {
    transform: scale(1.15);
    opacity: 1;
  }
}

.luxury-loader-text {
  text-align: center;
  max-width: 90vw;
  padding: 0 10px;
  box-sizing: border-box;
}

.luxury-loader-text .hotel-title {
  display: block;
  font-family: "Cormorant Upright", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: #442305;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 2px;
  line-height: 1.2;
}

.luxury-loader-text .hotel-tagline {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  color: #9A724E;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Mobile & Tablet Responsive Adjustments for Luxury Preloader */
@media (max-width: 768px) {
  .preloader {
    gap: 16px;
    padding: 15px;
  }

  .luxury-loader {
    width: 48px;
    height: 48px;
  }

  .loader-diamond {
    border-width: 2px;
    box-shadow: 0 0 18px rgba(154, 114, 78, 0.22);
  }

  .loader-diamond::after {
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
  }

  .luxury-loader-text .hotel-title {
    font-size: 1.3rem;
    letter-spacing: 1.5px;
  }

  .luxury-loader-text .hotel-tagline {
    font-size: 0.68rem;
    letter-spacing: 2px;
  }
}

@media (max-width: 480px) {
  .preloader {
    gap: 12px;
    padding: 10px;
  }

  .luxury-loader {
    width: 40px;
    height: 40px;
  }

  .loader-diamond {
    border-width: 2px;
    box-shadow: 0 0 14px rgba(154, 114, 78, 0.2);
  }

  .loader-diamond::after {
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
  }

  .luxury-loader-text .hotel-title {
    font-size: 1.15rem;
    letter-spacing: 1.2px;
  }

  .luxury-loader-text .hotel-tagline {
    font-size: 0.6rem;
    letter-spacing: 1.5px;
  }
}


/*----------------------------------------------*/
/* 4 SITE STRUCTURE */
/*----------------------------------------------*/

/* 4.1 Header
/*----------------------------------------------*/

/* Sticky Fixed Navbar Header */
#header,
header#header,
.sticky-top {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1040 !important;
  background-color: #ffffff !important;
  width: 100% !important;
}

#primary-header {
  background-color: #ffffff !important;
  width: 100% !important;
  transition: all 0.3s ease;
}

#primary-header.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

a.nav-link {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.8px !important;
  color: #442305 !important;
  position: relative;
  padding: 8px 12px !important;
  transition: all 0.3s ease;
}

a.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #442305, #9A724E);
  border-radius: 2px;
  transition: width 0.35s ease;
}

a.nav-link:focus {
  color: #442305 !important;
}

a.nav-link.active,
a.nav-link:hover {
  color: #9A724E !important;
  outline: none;
}

a.nav-link.active::after,
a.nav-link:hover::after {
  width: 70%;
}

#primary-header .dropdown .search::after {
  content: none;
}

#primary-header .search-dropdown .dropdown-menu {
  width: 260px;
}

#primary-header .search-dropdown .dropdown-menu input {
  min-width: 100%;
}

#primary-header .search-dropdown .dropdown-menu button {
  padding: 0 12px;
  min-height: -webkit-fill-available;
  border-radius: 0.25rem;
}

@media (max-width: 999px) {
  a.nav-link {
    font-size: 1.1rem;
    font-weight: 500;
    padding: 10px 0 !important;
  }
}


/* 4.2 Billboard
/*----------------------------------------------*/

/* date */
div.datetime-container,
div.datetime-container * {
  box-sizing: border-box;
  font-family: var(--body-font);
}

div.datetime-container button.date,
div.datetime-container button.time {
  background-color: transparent;
  border: 1px solid #E9E9E9;
  border-radius: 8px;
  text-transform: capitalize;
  text-align: start;
  padding: 8px 20px;
  color: var(--gray-color);
  letter-spacing: 0.1rem;
}

div.datetime-container button>span {
  display: inline-block;
  margin: 0 -6px;
}

div.datetime-container button span.week-day {
  font-size: 16px;
  text-align: right;
}

div.datetime-container button span.week-day::after {
  content: ",";
  display: inline-block;
}

div.datetime-container button span.month {
  font-size: 16px;
  text-align: right;
}

div.datetime-container button span.hours,
div.datetime-container button span.month-day {
  font-size: 16px;
  text-align: center;
  width: 45px;
}

.month br {
  display: none;
}

@media (max-width: 1500px) {
  div.picker {
    width: max-content;
  }
}


/* 4.3 Rooms Section
/*----------------------------------------------*/
.room-item img.post-image {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.room-item:hover img.post-image {
  opacity: 0.5;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.product-description {
  opacity: 0;
  bottom: -125px;
  transition: all 0.5s ease-in-out;
}

.room-item:hover .product-description {
  opacity: 1;
  bottom: 20px;
}

@media only screen and (min-width:770px) and (max-width: 1400px) {
  .product-description {
    bottom: -180px;
  }
}


/* 4.4 Services Section
/*----------------------------------------------*/

.service {
  border: 1px solid #F4E2D8;
  transition: all 0.3s ease-in-out;
}

.service:hover {
  border: 1px solid var(--primary-color);
}


/* 4.5 Blog Section
/*----------------------------------------------*/

.blog-post img.blog-img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.blog-post:hover img.blog-img {
  opacity: 0.5;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}


/*----------------------------------------------*/
/* 5 PAGES STYLE */
/*----------------------------------------------*/

/*--------------------------------------------------------------
5.1 About page 
--------------------------------------------------------------*/

.breadcrumb-item+.breadcrumb-item::before {
  color: var(--dark-color);
}

svg.play-icon {
  animation: play 1.5s alternate infinite ease-in;
}

@keyframes play {
  0% {
    transform: scale(.8);
  }

  100% {
    transform: scale(1.1);
  }

}

/*--------------------------------------------------------------
  5.2 Blog page 
  --------------------------------------------------------------*/
.pagination {
  --bs-pagination-color: var(--black-color);
  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-bg: var(--primary-color);
  --bs-pagination-hover-border-color: var(--primary-color);
  --bs-pagination-focus-color: #fff;
  --bs-pagination-focus-bg: var(--primary-color);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-bg: var(--primary-color);
  --bs-pagination-active-border-color: var(--primary-color);
}


/*--------------------------------------------------------------
 5.3 Booking page 
  --------------------------------------------------------------*/
.form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.form-check-input:focus {
  box-shadow: none;
}

/*--------------------------------------------------------------
 5.4 Gallery page 
  --------------------------------------------------------------*/
button.filter-button {
  border: 0;
  background: transparent;
  text-transform: uppercase;
  transition: all 0.5s ease-in-out;
  border-radius: 20px;
}

button.filter-button.active,
button.filter-button:hover {
  color: var(--bs-light);
  background: var(--primary-color);
}


/*--------------------------------------------------------------
 5.5 Reviews page
--------------------------------------------------------------*/

.reviews-components {
  box-shadow: 0px 12px 90px rgba(12, 12, 12, 0.06);
}

iconify-icon.quote {
  font-size: 60px;
  color: var(--primary-color);
}

.rate {
  color: var(--primary-color);
}



/*--------------------------------------------------------------
5.6 FAQs page 
--------------------------------------------------------------*/

/* accordian style override  */

.accordion {
  --bs-accordion-border-color: var(--primary-color);
  --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
  --bs-accordion-btn-icon: url('https://api.iconify.design/ion/caret-down.svg?color=%23d06051&width=30');
  --bs-accordion-btn-active-icon: url('https://api.iconify.design/ion/caret-down.svg?color=%23d06051&width=30');
  --bs-accordion-border-radius: 0px;
}

.accordion-header {
  margin-bottom: 0;
  border-top: 1px solid var(--primary-color);
}

.accordion-button {
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  color: var(--heading-color);
  line-height: var(--heading-line-height);
  letter-spacing: 0.065rem;
  text-transform: uppercase;
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  color: var(--heading-color);
  background-color: transparent;
  box-shadow: none;
}

/* ==========================================================================
   EXACT SCREENSHOT MATCHING LUXURY HERO & BOOKING CARD STYLES
   ========================================================================== */

/* Fonts */
.font-serif {
  font-family: "Cormorant Upright", "Playfair Display", serif !important;
}

/* Top Bar Info Styling matching Logo Champagne Palette */
.top-bar-info {
  background-color: #1e1e1e !important;
  font-family: "Plus Jakarta Sans", var(--body-font);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.top-bar-icon {
  color: #C59B7A !important;
  font-size: 0.95rem;
  vertical-align: middle;
}

.top-bar-info a {
  color: #e2e8f0;
  transition: color 0.25s ease;
}

.top-bar-info a:hover {
  color: #F4E2D8 !important;
}

.badge-concierge {
  background-color: #F4E2D8 !important;
  color: #7A5332 !important;
  border: 1px solid rgba(184, 142, 104, 0.45) !important;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
}

/* Larger Logo */
.main-logo-img {
  height: 85px !important;
  max-height: 90px !important;
  width: auto;
  object-fit: contain;
}

/* ==========================================================================
   LUXURY STATS & HIGHLIGHTS BAR STYLES
   ========================================================================== */
.stats-section {
  background-color: #161616;
  position: relative;
  z-index: 3;
}

.stats-bar-card {
  background: linear-gradient(135deg, #222222 0%, #171717 100%);
  border: 1px solid rgba(184, 142, 104, 0.28);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.text-champagne-gold {
  color: #C59B7A !important;
}

.stat-number {
  font-family: "Playfair Display", "Plus Jakarta Sans", serif !important;
  color: #F4E2D8 !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px;
}

.stat-label {
  font-family: "Plus Jakarta Sans", var(--body-font) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  color: #cbd5e1 !important;
}

@media (min-width: 768px) {
  .border-end-md {
    border-right: 1px solid rgba(184, 142, 104, 0.22) !important;
  }
}

/* Full Width & Height Hero Section */
.hero-full-width-wrapper {
  position: relative;
  width: 100%;
  min-height: 85vh;
  background-color: #f8f9fa;
  overflow: hidden;
}

.hero-img-overlay-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-img-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.25) 45%, rgba(0, 0, 0, 0.1) 100%);
  pointer-events: none;
}

.min-vh-85 {
  min-height: 85vh;
}

/* Custom Explore Rooms Button matching User Screenshot */
.btn-explore-custom {
  display: inline-block;
  background-color: #442305;
  color: #333333;
  font-family: var(--body-font);
  font-size: 1.05rem;
  font-weight: 600;
  padding: 16px 36px;
  border-radius: 14px;
  text-decoration: none;
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.btn-explore-custom:hover {
  background-color: #ffffff;
  color: #000000;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Compact Check Availability Card matching User Request (Sleeker & Smaller Size) */
.booking-compact-card {
  max-width: 340px !important;
  margin-left: auto;
  padding: 22px 20px !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.booking-compact-card .card-title {
  font-family: "Cormorant Upright", "Playfair Display", serif !important;
  font-size: 1.85rem !important;
  font-weight: 400 !important;
  color: #111111 !important;
  margin-bottom: 16px !important;
}

.booking-compact-card .form-label {
  font-family: var(--body-font) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  color: #555555 !important;
  margin-bottom: 4px !important;
}

.compact-input {
  background-color: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  height: 38px !important;
  font-size: 0.85rem !important;
  color: #667085 !important;
  font-weight: 400 !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.compact-input:focus {
  border-color: #B88E68 !important;
  box-shadow: 0 0 0 3px rgba(184, 142, 104, 0.15) !important;
}

.btn-compact-check {
  background-color: #f7f4ee !important;
  color: #333333 !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
  transition: all 0.25s ease !important;
  margin-top: 4px !important;
}

.btn-compact-check:hover {
  background-color: #efebe2 !important;
  color: #000000 !important;
}

/* ==========================================================================
   ANIMATED HERO TEXT & LUXURY CHECK AVAILABILITY CARD STYLES
   ========================================================================== */

/* Hero Text Animation */
/* Hero Text & Card Side Animations */
.animate-slide-left {
  animation: heroSlideFromLeft 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes heroSlideFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-70px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slide-right {
  animation: cardSlideFromRight 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cardSlideFromRight {
  0% {
    opacity: 0;
    transform: translateX(70px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.text-gradient-gold {
  background: linear-gradient(135deg, #B88E68 0%, #D5AC90 50%, #8C5E38 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  position: relative;
}

.hero-animated-word {
  animation: shimmerGold 3.5s ease-in-out infinite alternate;
}

@keyframes shimmerGold {
  0% {
    filter: drop-shadow(0 0 2px rgba(184, 142, 104, 0.25));
  }

  100% {
    filter: drop-shadow(0 0 12px rgba(244, 226, 216, 0.8));
  }
}

.hero-btn-animate {
  animation: heroFadeSlideUp 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Luxury Booking Card Styling */
.shadow-luxury {
  background: #ffffff !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.shadow-luxury:hover {
  transform: translateY(-5px);
  box-shadow: 0 38px 85px rgba(0, 0, 0, 0.16), 0 10px 28px rgba(0, 0, 0, 0.06) !important;
}

.bg-gold-subtle {
  background-color: #F4E2D8 !important;
  border: 1px solid rgba(184, 142, 104, 0.3) !important;
}

.text-warning-dark {
  color: #7A5332 !important;
}

.letter-spacing-1 {
  letter-spacing: 1px;
}

.booking-hero-card .card-title {
  font-family: "Playfair Display", "Cormorant Upright", serif !important;
  font-weight: 700 !important;
  font-size: 1.75rem !important;
  color: #0f172a !important;
  letter-spacing: -0.4px;
}

.booking-hero-card .form-label {
  font-family: "Plus Jakarta Sans", var(--body-font) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  color: #334155 !important;
  margin-bottom: 3px;
}

.luxury-input-group .form-control,
.luxury-input-group .form-select {
  background-color: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 10px !important;
  min-height: 46px !important;
  height: 46px !important;
  line-height: 1.5 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-left: 14px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  font-family: "Plus Jakarta Sans", var(--body-font) !important;
  transition: all 0.25s ease;
}

.luxury-input-group .form-select {
  padding-right: 2.5rem !important;
}

.luxury-input-group .form-control:focus,
.luxury-input-group .form-select:focus {
  border-color: #B88E68 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(184, 142, 104, 0.2) !important;
}

/* Navbar Theme Button matching Logo Champagne Gold */
.top-bar-info {
  font-family: "Plus Jakarta Sans", sans-serif !important;
}

.btn-navbar-theme {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  background: #442305 !important;
  color: #ffffff !important;
  border: 1px solid #B88E68 !important;
  border-radius: 0 !important;
  transition: all 0.3s ease;
  letter-spacing: 0.8px;
}

.btn-navbar-theme:hover {
  background: #9A724E !important;
  border-color: #9A724E !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(184, 142, 104, 0.4) !important;
  transform: translateY(-1px);
}

.btn-navbar-login {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  background: #442305 !important;
  color: #ffffff !important;
  border: 1px solid #B88E68 !important;
  border-radius: 4px !important;
  transition: all 0.3s ease;
  letter-spacing: 0.8px;
  font-size: 0.85rem;
}

.btn-navbar-login:hover {
  background: #9A724E !important;
  border-color: #9A724E !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(184, 142, 104, 0.4) !important;
  transform: translateY(-1px);
}

/* Luxury Check Availability Action Button matching Logo Champagne Palette */
.btn-luxury-check {
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%) !important;
  color: #ffffff !important;
  border: none;
  font-size: 0.88rem !important;
  letter-spacing: 0.8px;
  border-radius: 10px !important;
  height: 46px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-luxury-check:hover {
  background: linear-gradient(135deg, #1e1e24 0%, #000000 100%) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
}

.hero-subtitle-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(209, 104, 6, 0.1);
  border: 1px solid rgba(209, 104, 6, 0.3);
  color: var(--primary-color);
  padding: 6px 18px;
  border-radius: 30px;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
}

.hero-title {
  font-family: "Cormorant Upright", "Playfair Display", serif;
  font-size: clamp(2rem, 6.5vw, 3.8rem);
  font-weight: 600;
  line-height: 1.15;
  color: #1a1a1a;
  letter-spacing: -0.5px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

@media (max-width: 767.98px) {
  .hero-title {
    font-size: 2.2rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.2px !important;
  }
}

@media (max-width: 420px) {
  .hero-title {
    font-size: 1.95rem !important;
    line-height: 1.2 !important;
  }
}

.hero-content-box {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  padding: 0;
}

/* Floating White Check Availability Card (Right Side) */
.booking-hero-card {
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.booking-hero-card .card-title {
  font-family: "Cormorant Upright", "Playfair Display", serif;
  font-size: 2.2rem;
  color: #1a1a1a;
}

.booking-hero-card .form-control,
.booking-hero-card .form-select {
  border-radius: 10px;
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  font-size: 0.95rem;
  font-weight: 500;
  color: #1a1a1a;
  background-color: #f8fafc;
  transition: all 0.3s ease;
}

.booking-hero-card .form-control:focus,
.booking-hero-card .form-select:focus {
  border-color: var(--primary-color);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(209, 104, 6, 0.15);
}

/* Stat Box */
.stat-box {
  background: #ffffff;
  border-radius: 16px;
  padding: 25px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  border-bottom: 4px solid var(--primary-color);
  transition: all 0.3s ease;
}

.stat-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.stat-box .stat-number {
  font-family: "Cormorant Upright", serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1;
}

/* Room Cards */
.luxury-room-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.35s ease;
  border: 1px solid #f0f0f0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.luxury-room-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
}

.luxury-room-img-wrap {
  position: relative;
  overflow: hidden;
  height: 240px;
}

.luxury-room-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.luxury-room-card:hover .luxury-room-img-wrap img {
  transform: scale(1.08);
}

.room-badge-ribbon {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgba(26, 26, 26, 0.85);
  backdrop-filter: blur(5px);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
}

.room-price-pill {
  position: absolute;
  bottom: 15px;
  right: 15px;
  background: var(--primary-color);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
}

.luxury-room-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.room-title {
  font-family: "Cormorant Upright", serif;
  font-size: 1.65rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #1a1a1a;
}

.room-amenities-icons {
  display: flex;
  gap: 15px;
  padding: 12px 0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  margin: 12px 0 18px 0;
  color: #64748b;
  font-size: 0.85rem;
}

.room-amenities-icons i {
  color: var(--primary-color);
  margin-right: 4px;
}

/* Amenity Cards */
.amenity-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  transition: all 0.35s ease;
  border: 1px solid #eaeaea;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
}

.amenity-card:hover {
  background: #1a1a1a;
  color: #ffffff;
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  border-color: #1a1a1a;
}

.amenity-card:hover h4,
.amenity-card:hover p {
  color: #ffffff;
}

.amenity-icon-box {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(209, 104, 6, 0.1);
  color: var(--primary-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 20px;
  transition: all 0.35s ease;
}

.amenity-card:hover .amenity-icon-box {
  background: var(--primary-color);
  color: #ffffff;
  transform: scale(1.1);
}

/* Testimonial Cards */
.testimonial-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  border-left: 4px solid var(--primary-color);
}

.testimonial-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary-color);
}

/* CTA Banner */
.cta-banner {
  background: linear-gradient(135deg, #1a1a1a 0%, #353535 100%);
  border-radius: 20px;
  padding: 60px 40px;
  color: #ffffff;
}

/* Modern Luxury Footer */
#footer {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  background-color: #ffffff;
  color: #5C4A3E;
  padding-top: 10px;
}

#footer h4 {
  font-family: "Cormorant Upright", "Playfair Display", serif !important;
  color: #442305 !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  margin-bottom: 20px;
}

#footer h4::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #442305, #9A724E);
  border-radius: 4px;
  margin-top: 8px;
}

#footer p,
#footer .small {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 0.92rem;
  color: #5C4A3E !important;
}

#footer a {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 0.92rem;
  font-weight: 500;
  color: #5C4A3E !important;
  transition: all 0.3s ease;
  display: inline-block;
}

#footer a:hover {
  color: #9A724E !important;
  padding-left: 6px;
  transform: translateX(2px);
}

#footer .input-group .form-control {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 0.9rem;
  border: 1.5px solid rgba(154, 114, 78, 0.25) !important;
  border-radius: 10px 0 0 10px !important;
  background-color: #FAF9F6;
}

#footer .input-group .form-control:focus {
  border-color: #9A724E !important;
  box-shadow: 0 0 0 3px rgba(154, 114, 78, 0.15) !important;
}

#footer .input-group .btn {
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%) !important;
  border: 1.5px solid #9A724E !important;
  border-radius: 0 10px 10px 0 !important;
  color: #ffffff !important;
  transition: all 0.3s ease;
}

#footer .input-group .btn:hover {
  background: linear-gradient(135deg, #0f172a 0%, #442305 100%) !important;
  border-color: #B88E68 !important;
}

@media (max-width: 768px) {
  #footer h4 {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
  }

  #footer p,
  #footer ul li a,
  #footer .small {
    font-size: 0.88rem !important;
    font-weight: 500 !important;
  }
}

#footer .footer-social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(68, 35, 5, 0.08);
  border: 1px solid rgba(154, 114, 78, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #442305 !important;
  font-size: 1.1rem;
  transition: all 0.35s ease;
  text-decoration: none;
}

#footer .footer-social-icon:hover {
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%);
  color: #ffffff !important;
  border-color: #9A724E;
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(184, 142, 104, 0.35);
}

/* Floating Back-to-Top Button */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #442305;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.back-to-top.active {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background: #1a1a1a;
  color: var(--primary-color);
  transform: translateY(-3px);
}

/* ==========================================
   WELCOME / ABOUT LUXURY SECTION STYLING & ANIMATIONS
   ========================================== */
.welcome-desc-text {
  color: #1e293b !important;
  font-family: "Plus Jakarta Sans", var(--body-font) !important;
  font-size: 1.12rem !important;
  font-weight: 500 !important;
  line-height: 1.85 !important;
  letter-spacing: 0.15px;
}

.btn-welcome-about,
.btn-explore-custom {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%) !important;
  color: #ffffff !important;
  padding: 14px 34px !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 10px 25px rgba(184, 142, 104, 0.35) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
}

.btn-welcome-about i,
.btn-explore-custom i {
  transition: transform 0.3s ease;
  color: #F4E2D8;
}

.btn-welcome-about:hover,
.btn-explore-custom:hover {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.3) !important;
  border-color: #B88E68 !important;
}

.btn-welcome-about:hover i,
.btn-explore-custom:hover i {
  transform: translateX(5px);
  color: #B88E68;
}

/* Luxury Image Card with Floating & Smooth Zoom Animation */
.welcome-img-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08), 0 4px 14px rgba(184, 142, 104, 0.08) !important;
  border: 2px solid rgba(244, 226, 216, 0.7) !important;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background: #ffffff;
}

.welcome-img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1), filter 0.6s ease !important;
  display: block;
}

.welcome-img-card:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.16), 0 8px 24px rgba(184, 142, 104, 0.22) !important;
  border-color: #B88E68 !important;
}

.welcome-img-card:hover img {
  transform: scale(1.07);
}

/* Luxury Floating Glass Badge on Welcome Images */
.img-glass-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  border: 1px solid rgba(244, 226, 216, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  z-index: 2;
}

.img-glass-badge i {
  color: #F4E2D8;
}

.welcome-img-card:hover .img-glass-badge {
  background: rgba(184, 142, 104, 0.9);
  color: #ffffff;
  border-color: #ffffff;
}

/* Bigger Sizing for Welcome Image Cards */
.welcome-img-primary {
  height: 480px !important;
  border-radius: 26px !important;
}

.welcome-img-secondary {
  height: 340px !important;
  border-radius: 24px !important;
}

@media (max-width: 991.98px) {
  .welcome-img-primary {
    height: 380px !important;
  }

  .welcome-img-secondary {
    height: 280px !important;
  }
}

@media (max-width: 575.98px) {
  .welcome-img-primary {
    height: 280px !important;
  }

  .welcome-img-secondary {
    height: 220px !important;
  }
}

/* ==========================================
   WELCOME SECTION TITLE & SUBTITLE ANIMATIONS
   ========================================== */
/* ==========================================
   TRANSPARENT GLASSMORPHISM AESTHETIC BADGES
   ========================================== */
.glass-luxury-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(244, 226, 216, 0.35) 100%) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 10px 30px rgba(184, 142, 104, 0.14), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
  padding: 8px 24px;
  border-radius: 50px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-luxury-badge:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(244, 226, 216, 0.55) 100%) !important;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 40px rgba(184, 142, 104, 0.25), inset 0 1px 2px rgba(255, 255, 255, 1) !important;
  border-color: #B88E68 !important;
}

.welcome-subtitle-anim {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(244, 226, 216, 0.35) 100%) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
  color: #8C5E35 !important;
  padding: 8px 24px;
  border-radius: 50px;
  font-family: var(--heading-font), "Cormorant Upright", serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase;
  margin-bottom: 16px;
  animation: subtitleFloat 4s ease-in-out infinite alternate;
  box-shadow: 0 10px 30px rgba(184, 142, 104, 0.14), inset 0 1px 1px rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
}

.welcome-subtitle-anim:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(244, 226, 216, 0.55) 100%) !important;
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(184, 142, 104, 0.25);
  border-color: #B88E68 !important;
}

@keyframes subtitleFloat {
  0% {
    transform: translateY(0);
    box-shadow: 0 8px 25px rgba(184, 142, 104, 0.12);
  }

  100% {
    transform: translateY(-4px);
    box-shadow: 0 14px 35px rgba(184, 142, 104, 0.22);
  }
}

.welcome-title-anim {
  font-family: var(--heading-font), "Cormorant Upright", serif !important;
  font-size: 3.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--black-color);
  letter-spacing: -0.3px;
  transition: transform 0.4s ease;
}

@media (max-width: 767.98px) {
  .welcome-title-anim {
    font-size: 2.5rem !important;
  }
}

.welcome-title-gold {
  background: linear-gradient(100deg, #0f172a 0%, #B88E68 25%, #F4E2D8 50%, #B88E68 75%, #0f172a 100%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: titleShimmer 5s linear infinite;
  display: inline-block;
  font-weight: 800;
}

@keyframes titleShimmer {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

/* Animated Golden Luxury Divider */
.welcome-decor-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}

.welcome-decor-line .line {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #B88E68);
  border-radius: 2px;
}

.welcome-decor-line .line.right {
  background: linear-gradient(90deg, #B88E68, transparent);
}

.welcome-decor-line .diamond {
  color: #B88E68;
  font-size: 0.95rem;
  animation: diamondPulse 2.8s ease-in-out infinite;
  display: inline-block;
}

@keyframes diamondPulse {

  0%,
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.85;
    filter: drop-shadow(0 0 2px rgba(184, 142, 104, 0.4));
  }

  50% {
    transform: scale(1.35) rotate(45deg);
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(184, 142, 104, 0.8));
  }
}

/* ==========================================
   WELCOME PARAGRAPH CARD & TEXT ANIMATION
   ========================================== */
.welcome-text-card {
  position: relative;
  padding: 26px 30px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 226, 216, 0.28) 100%);
  border-radius: 20px;
  border-left: 5px solid #B88E68;
  border-top: 1px solid rgba(184, 142, 104, 0.25);
  border-right: 1px solid rgba(184, 142, 104, 0.15);
  border-bottom: 1px solid rgba(184, 142, 104, 0.2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(184, 142, 104, 0.06);
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  margin-bottom: 28px;
}

.welcome-text-card:hover {
  transform: translateY(-5px) translateX(3px);
  background: linear-gradient(135deg, #ffffff 0%, rgba(244, 226, 216, 0.45) 100%);
  box-shadow: 0 20px 48px rgba(184, 142, 104, 0.22);
  border-left-color: #9A724E;
}

.welcome-quote-icon {
  position: absolute;
  top: 14px;
  right: 20px;
  font-size: 2.2rem;
  color: rgba(184, 142, 104, 0.2);
  transition: all 0.4s ease;
  pointer-events: none;
}

.welcome-text-card:hover .welcome-quote-icon {
  color: rgba(184, 142, 104, 0.5);
  transform: rotate(8deg) scale(1.15);
}

.welcome-highlight-word {
  color: #7A5332;
  font-weight: 700;
  position: relative;
  display: inline-block;
  transition: all 0.3s ease;
}

.welcome-highlight-word::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #B88E68, transparent);
  border-radius: 2px;
  opacity: 0.7;
}

.welcome-text-card:hover .welcome-highlight-word {
  color: #5C3D24;
  text-shadow: 0 0 10px rgba(184, 142, 104, 0.35);
}

/* ==========================================
   LUXURY ROOMS SECTION (SCREENSHOT LAYOUT)
   ========================================== */
.section-watermark-wrap {
  position: relative;
  text-align: center;
  margin-bottom: 50px;
}

.watermark-bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -65%);
  font-size: 5.5rem;
  font-weight: 900;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: rgba(15, 23, 42, 0.04);
  letter-spacing: 12px;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

@media (max-width: 767.98px) {
  .watermark-bg-text {
    font-size: 3.5rem;
    letter-spacing: 6px;
  }
}

.watermark-main-title {
  position: relative;
  font-size: 2.3rem;
  font-weight: 800;
  font-family: "Plus Jakarta Sans", var(--heading-font), sans-serif;
  color: #0f172a;
  letter-spacing: 3px;
  text-transform: uppercase;
  z-index: 1;
  margin-bottom: 8px;
}

.watermark-subtitle {
  position: relative;
  color: #64748b;
  font-size: 1rem;
  max-width: 650px;
  margin: 0 auto;
  z-index: 1;
  line-height: 1.6;
}

/* Left Featured Grand Presidential Suite Card */
.featured-suite-card {
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.06);
  border: 1px solid #edf2f7;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.featured-suite-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
  border-color: #B88E68;
}

.featured-suite-img-wrap {
  position: relative;
  height: 380px;
  overflow: hidden;
}

.featured-suite-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}

.featured-suite-card:hover .featured-suite-img-wrap img {
  transform: scale(1.06);
}

.badge-presidential-pill {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #442305 !important;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
  z-index: 2;
}

.suite-overlay-pills {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.suite-overlay-pill {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.featured-suite-body {
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.suite-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.suite-title {
  font-family: var(--heading-font), "Cormorant Upright", serif;
  font-size: 2.3rem;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.3px;
  line-height: 1.2;
  margin-bottom: 0;
}

.suite-rating-box {
  text-align: right;
}

.suite-rating-stars {
  color: #f59e0b;
  font-size: 0.95rem;
  letter-spacing: 2px;
}

.suite-rating-text {
  font-size: 0.78rem;
  color: #64748b;
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
  font-weight: 600;
  margin-top: 2px;
}

.suite-desc {
  color: #334155;
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.8;
  margin-bottom: 22px;
}

.suite-amenities-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 24px;
}

.suite-amenity-item {
  color: #334155;
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.suite-amenity-item i {
  color: #B88E68;
  font-size: 1.1rem;
}

.suite-price-action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.suite-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.suite-price-wrap .currency {
  font-size: 1.3rem;
  font-weight: 600;
  color: #B88E68;
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
}

.suite-price-wrap .amount {
  font-size: 2.6rem;
  font-weight: 700;
  font-family: var(--heading-font), "Cormorant Upright", serif;
  color: #0f172a;
  line-height: 1;
}

.suite-price-wrap .period {
  font-size: 0.88rem;
  color: #64748b;
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
}

.btn-reserve-suite {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%);
  color: #ffffff !important;
  padding: 13px 32px;
  border-radius: 50px;
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 25px rgba(184, 142, 104, 0.35);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.btn-reserve-suite:hover {
  background: linear-gradient(135deg, #9A724E 0%, #7d5939 100%);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(154, 114, 78, 0.45);
}

.btn-reserve-suite i {
  transition: transform 0.3s ease;
}

.btn-reserve-suite:hover i {
  transform: translateX(4px);
}

/* Right Stacked Mini Room Cards */
.mini-room-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
  border: 1px solid #edf2f7;
  transition: all 0.35s ease;
  display: flex;
  flex-direction: row;
  height: 200px;
  margin-bottom: 22px;
}

.mini-room-card:last-child {
  margin-bottom: 0;
}

.mini-room-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.09);
  border-color: #B88E68;
}

.mini-room-img-wrap {
  width: 175px;
  min-width: 175px;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.mini-room-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.mini-room-card:hover .mini-room-img-wrap img {
  transform: scale(1.08);
}

.mini-room-body {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

.mini-room-title {
  font-family: var(--heading-font), "Cormorant Upright", serif;
  font-size: 1.45rem;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.3px;
  line-height: 1.25;
  margin-bottom: 4px;
}

.mini-room-desc {
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
  font-size: 0.86rem;
  font-weight: 400;
  color: #64748b;
  line-height: 1.55;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mini-room-tags {
  display: flex;
  gap: 14px;
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
  font-size: 0.78rem;
  color: #475569;
  font-weight: 600;
  margin-bottom: 8px;
}

.mini-room-tags i {
  color: #B88E68;
  margin-right: 4px;
}

.mini-room-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mini-room-price {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f172a;
  font-family: var(--heading-font), "Cormorant Upright", serif;
}

.mini-room-price .currency {
  font-size: 1.15rem;
  font-weight: 600;
  color: #B88E68;
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
  margin-right: 2px;
}

.mini-room-price small {
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
}

.btn-book-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid #B88E68;
  color: #9A724E;
  background: rgba(184, 142, 104, 0.08);
  padding: 6px 18px;
  border-radius: 50px;
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-book-mini:hover {
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%);
  border-color: #9A724E;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(184, 142, 104, 0.35);
}

.btn-book-mini i {
  transition: transform 0.3s ease;
}

.btn-book-mini:hover i {
  transform: translateX(3px);
}

@media (max-width: 575.98px) {
  .mini-room-card {
    flex-direction: column;
    height: auto;
  }

  .mini-room-img-wrap {
    width: 100%;
    min-width: 100%;
    height: 180px;
  }
}

/* ==========================================
   ACCOMMODATIONS GRID SECTION (MATCHING USER SCREENSHOT)
   ========================================== */
.accommodations-grid-section {
  padding: 4rem 0 3rem;
  background-color: #ffffff;
}

.accommodations-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.accommodations-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(154, 114, 78, 0.15);
  border-color: rgba(154, 114, 78, 0.25);
}

.accommodations-card-img-wrap {
  width: 100%;
  height: 210px;
  overflow: hidden;
  position: relative;
}

.accommodations-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.accommodations-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(52, 138, 219, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  text-decoration: none;
  z-index: 2;
}

.accommodations-card-overlay i {
  color: #ffffff;
  font-size: 2.2rem;
  transform: scale(0.6);
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.accommodations-card:hover .accommodations-card-overlay {
  opacity: 1;
  visibility: visible;
}

.accommodations-card:hover .accommodations-card-overlay i {
  transform: scale(1);
}

.accommodations-card:hover .accommodations-card-img-wrap img {
  transform: scale(1.08);
}

.accommodations-card-body {
  padding: 1.5rem 1.25rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
}

.accommodations-card-title {
  font-family: var(--heading-font), "Playfair Display", serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 0.4rem;
  letter-spacing: 0.2px;
}

.accommodations-card-price {
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #9a724e;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}

.accommodations-card-price .period {
  font-size: 0.85rem;
  font-weight: 400;
  color: #888888;
}

.accommodations-card-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  color: #9a724e;
  font-size: 1.15rem;
}

.accommodations-card-icons i {
  transition: transform 0.3s ease, color 0.3s ease;
}

.accommodations-card:hover .accommodations-card-icons i {
  transform: translateY(-2px);
  color: #442305;
}

.btn-explore-accommodations {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  color: #2c2c2c;
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 8px 20px;
  border-radius: 30px;
}

.btn-explore-accommodations i {
  transition: transform 0.3s ease;
  font-size: 1.1rem;
}

.btn-explore-accommodations:hover {
  color: #9a724e;
  transform: translateX(4px);
}

.btn-explore-accommodations:hover i {
  transform: translateX(4px);
}

/* ==========================================
   TESTIMONIALS SECTION (MATCHING WEBSITE LUXURY THEME)
   ========================================== */
.testimonials-section {
  padding: 5.5rem 0;
  background: linear-gradient(180deg, #ffffff 0%, #fdfbf7 50%, #f7f1eb 100%);
  position: relative;
  overflow: hidden;
}

.testimonials-header-wrap {
  position: relative;
  text-align: center;
  margin-bottom: 3.5rem;
}

.testimonials-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -75%);
  font-family: var(--heading-font), "Cormorant Upright", serif;
  font-size: 5.5rem;
  font-weight: 700;
  color: rgba(184, 142, 104, 0.08);
  letter-spacing: 12px;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  width: 100%;
}

.testimonials-main-title {
  position: relative;
  z-index: 2;
  font-family: var(--heading-font), "Cormorant Upright", "Playfair Display", serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}

.testimonials-subtitle {
  position: relative;
  z-index: 2;
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
  font-size: 0.95rem;
  color: #64748b;
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.6;
}

.testimonial-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 2.25rem 2rem 2rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(184, 142, 104, 0.18);
  border-left: 4px solid #B88E68;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(154, 114, 78, 0.18);
  border-left-color: #9A724E;
  background: linear-gradient(135deg, #ffffff 0%, rgba(244, 226, 216, 0.25) 100%);
}

.testimonial-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.testimonial-quote-icon {
  font-size: 2rem;
  color: #B88E68;
  line-height: 1;
}

.testimonial-stars {
  color: #f59e0b;
  font-size: 0.88rem;
  display: flex;
  gap: 3px;
}

.testimonial-quote-text {
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
  font-size: 0.95rem;
  color: #4a4a4a;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.testimonial-author-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(184, 142, 104, 0.15);
}

.testimonial-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #B88E68;
  box-shadow: 0 4px 12px rgba(184, 142, 104, 0.25);
  transition: transform 0.3s ease;
}

.testimonial-card:hover .testimonial-avatar {
  transform: scale(1.08);
  border-color: #9A724E;
}

.testimonial-author-name {
  font-family: var(--heading-font), "Cormorant Upright", "Playfair Display", serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 2px;
  line-height: 1.2;
}

.testimonial-author-role {
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
  font-size: 0.8rem;
  color: #777F81;
  font-weight: 500;
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .testimonials-watermark {
    font-size: 3.2rem;
    letter-spacing: 4px;
  }

  .testimonials-main-title {
    font-size: 1.8rem;
  }
}

/* ==========================================
   LUXURY SITE FOOTER (MATCHING MAIN HEADER NAVBAR)
   ========================================== */
footer#footer {
  background: #ffffff;
  color: #555555;
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
  position: relative;
  border-top: 1px solid rgba(184, 142, 104, 0.25);
  box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.03);
}

.footer-heading {
  font-family: var(--heading-font), "Cormorant Upright", "Playfair Display", serif;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 1.25rem;
  position: relative;
  display: inline-block;
  letter-spacing: 0.5px;
}

.footer-heading::after {
  content: '';
  display: block;
  width: 40px;
  height: 2.5px;
  background: linear-gradient(90deg, #9A724E 0%, #B88E68 100%) !important;
  margin-top: 8px;
  border-radius: 2px;
}

.footer-text {
  color: #475569 !important;
  font-size: 0.94rem !important;
  line-height: 1.75;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links a {
  color: #334155 !important;
  text-decoration: none !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  display: inline-flex;
  align-items: center;
}

.footer-links a i {
  color: #9A724E !important;
  font-size: 0.85rem !important;
  margin-right: 8px !important;
  display: inline-block !important;
  transition: transform 0.3s ease, color 0.3s ease !important;
}

.footer-links a:hover {
  color: #9A724E !important;
  font-weight: 700 !important;
  transform: translateX(5px);
}

.footer-links a:hover i {
  color: #442305 !important;
  transform: translateX(3px);
}

.footer-social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #F4E2D8 !important;
  border: 1.5px solid #B88E68 !important;
  color: #9A724E !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.35s ease;
  text-decoration: none;
}

.footer-social-icon i {
  color: #9A724E !important;
  font-size: 1.15rem !important;
  line-height: 1 !important;
  transition: color 0.35s ease !important;
}

.footer-social-icon:hover {
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%) !important;
  border-color: #9A724E !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(184, 142, 104, 0.4);
}

.footer-social-icon:hover i {
  color: #ffffff !important;
}

.footer-newsletter-input {
  background: #f8fafc !important;
  border: 1.5px solid rgba(184, 142, 104, 0.4) !important;
  color: #1a1a1a !important;
  border-radius: 8px 0 0 8px !important;
  padding: 10px 16px !important;
  font-size: 0.9rem !important;
}

.footer-newsletter-input::placeholder {
  color: #94a3b8 !important;
}

.footer-newsletter-btn {
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%) !important;
  border: 1.5px solid #9A724E !important;
  color: #ffffff !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 10px 18px !important;
  transition: all 0.3s ease !important;
}

.footer-newsletter-btn i {
  color: #ffffff !important;
  font-size: 1.05rem !important;
}

.footer-newsletter-btn:hover {
  background: linear-gradient(135deg, #9A724E 0%, #442305 100%) !important;
  box-shadow: 0 4px 12px rgba(184, 142, 104, 0.4) !important;
}

.footer-contact-item {
  color: #475569;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

.footer-contact-item i {
  color: #9A724E !important;
  font-size: 1.15rem !important;
  display: inline-block !important;
}

.footer-bottom {
  border-top: 1px solid rgba(184, 142, 104, 0.18);
  padding: 1.5rem 0;
  color: #64748b;
  font-size: 0.85rem;
  background: #fcfaf8;
}

.footer-bottom a {
  color: #555555;
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: 500;
}

.footer-bottom a:hover {
  color: #9A724E;
}

/* ==========================================
   5-IMAGE GALLERY SHOWCASE SECTION (INFINITE AUTO-SCROLL & EYE OVERLAY)
   ========================================== */
.gallery-showcase-section {
  background: linear-gradient(180deg, #fdfbf7 0%, #ffffff 100%);
  padding: 60px 0 60px 0;
  position: relative;
  overflow: hidden;
}

/* Continuous Horizontal Auto-Scrolling Track Container */
.gallery-marquee-container {
  overflow: hidden;
  width: 100%;
  position: relative;
  padding: 10px 0;
  user-select: none;
}

.gallery-marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: galleryInfiniteScroll 28s linear infinite;
  will-change: transform;
}

.gallery-marquee-container:hover .gallery-marquee-track {
  animation-play-state: paused;
}

@keyframes galleryInfiniteScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-50% - 10px));
  }
}

.gallery-card-item {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(184, 142, 104, 0.22);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  width: 270px;
  height: 270px;
  flex-shrink: 0;
  background-color: #f7f1eb;
}

@media (max-width: 768px) {
  .gallery-card-item {
    width: 210px;
    height: 210px;
  }
}

.gallery-card-item:hover {
  transform: translateY(-6px);
  border-color: #9A724E;
  box-shadow: 0 16px 32px rgba(154, 114, 78, 0.22);
}

.gallery-card-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 18px;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

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

/* Eye Symbol Overlay on Hover */
.gallery-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(68, 35, 5, 0.62);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  text-decoration: none !important;
  z-index: 3;
  border-radius: 18px;
}

.gallery-card-overlay i {
  color: #ffffff !important;
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  transform: scale(0.65);
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.gallery-card-item:hover .gallery-card-overlay {
  opacity: 1;
  visibility: visible;
}

.gallery-card-item:hover .gallery-card-overlay i {
  transform: scale(1);
}

/* Centered Luxury Theme Pill Button matching website primary gold/brown palette */
.btn-discover-gallery {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%) !important;
  border: 1.5px solid #9A724E !important;
  color: #ffffff !important;
  font-family: 'Plus Jakarta Sans', var(--bs-font-sans-serif), sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  padding: 14px 36px;
  border-radius: 50px;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(154, 114, 78, 0.3);
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  letter-spacing: 0.3px;
}

.btn-discover-gallery i {
  font-size: 1.25rem;
  margin-right: 10px;
  color: #fce8d5 !important;
  transition: transform 0.3s ease, color 0.3s ease;
}

.btn-discover-gallery:hover {
  background: linear-gradient(135deg, #9A724E 0%, #442305 100%) !important;
  color: #ffffff !important;
  border-color: #B88E68 !important;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 30px rgba(154, 114, 78, 0.45) !important;
}

.btn-discover-gallery:hover i {
  color: #ffffff !important;
  transform: scale(1.1);
}

/* ==========================================
   DEDICATED HOTEL MANAGEMENT ABOUT PAGE STYLING
   ========================================== */
.about-hero-section {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.32) 100%), url('images/hero-bg-luxury.jpg') center/cover no-repeat;
  padding: 130px 0 110px 0;
  position: relative;
  border-bottom: 3px solid #9A724E;
}

.about-intro-badge {
  background: rgba(184, 142, 104, 0.15);
  border: 1px solid rgba(184, 142, 104, 0.35);
  color: #f3e8d7;
  padding: 8px 22px;
  border-radius: 30px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: inline-block;
}

/* Counter Strip */
.about-counter-section {
  margin-top: -55px;
  position: relative;
  z-index: 10;
}

.about-counter-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 30px 24px;
  border: 1px solid rgba(184, 142, 104, 0.25);
  box-shadow: 0 12px 35px rgba(154, 114, 78, 0.14);
  text-align: center;
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  height: 100%;
}

.about-counter-card:hover {
  transform: translateY(-8px);
  border-color: #9A724E;
  box-shadow: 0 20px 40px rgba(154, 114, 78, 0.24);
  background: linear-gradient(180deg, #ffffff 0%, #fdfbf7 100%);
}

.about-counter-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  margin-bottom: 16px;
  box-shadow: 0 8px 20px rgba(154, 114, 78, 0.35);
}

.about-counter-num {
  font-family: var(--heading-font), "Cormorant Upright", serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1;
  margin-bottom: 6px;
}

.about-counter-txt {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* History Timeline Section */
.about-timeline-wrap {
  position: relative;
  padding-left: 30px;
  border-left: 3px solid rgba(184, 142, 104, 0.3);
}

.about-timeline-item {
  position: relative;
  margin-bottom: 35px;
}

.about-timeline-item:last-child {
  margin-bottom: 0;
}

.about-timeline-dot {
  position: absolute;
  left: -43px;
  top: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%);
  border: 4px solid #ffffff;
  box-shadow: 0 0 0 3px rgba(154, 114, 78, 0.3);
}

.about-timeline-year {
  font-family: var(--heading-font), "Cormorant Upright", serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #9A724E;
  margin-bottom: 4px;
}

.about-timeline-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 6px;
}

.about-timeline-desc {
  font-size: 0.92rem;
  color: #555555;
  line-height: 1.6;
  margin: 0;
}

/* Mission & Vision Cards */
.about-mission-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 36px 30px;
  border: 1px solid rgba(184, 142, 104, 0.22);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  transition: all 0.35s ease;
  height: 100%;
}

.about-mission-card:hover {
  transform: translateY(-8px);
  border-color: #9A724E;
  box-shadow: 0 18px 40px rgba(154, 114, 78, 0.2);
}

.about-mission-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.about-mission-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(184, 142, 104, 0.12);
  color: #9A724E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.about-mission-card:hover .about-mission-icon {
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%);
  color: #ffffff;
}

.about-mission-title {
  font-family: var(--heading-font), "Cormorant Upright", serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}

/* Awards Badges Grid */
.award-badge-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px 20px;
  border: 1.5px dashed rgba(184, 142, 104, 0.35);
  text-align: center;
  transition: all 0.3s ease;
  height: 100%;
}

.award-badge-card:hover {
  border-style: solid;
  border-color: #9A724E;
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(154, 114, 78, 0.18);
  background: #fdfbf7;
}

.award-icon {
  font-size: 2.2rem;
  color: #9A724E;
  margin-bottom: 10px;
  display: inline-block;
}

.award-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.award-org {
  font-size: 0.85rem;
  color: #717171;
  font-weight: 500;
}

/* Team Profile Cards */
.team-profile-card {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(184, 142, 104, 0.22);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.35s ease;
}

.team-profile-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(154, 114, 78, 0.22);
  border-color: #9A724E;
}

.team-profile-img-wrap {
  width: 100%;
  height: 340px;
  overflow: hidden;
  position: relative;
  border-radius: 20px 20px 0 0;
  background-color: #f7f1eb;
}

.team-profile-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 5% !important;
  display: block !important;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}



.team-profile-card:hover .team-profile-img-wrap img {
  transform: scale(1.08);
}

.team-profile-body {
  padding: 24px 20px;
  text-align: center;
}

.team-profile-name {
  font-family: var(--heading-font), "Cormorant Upright", serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.team-profile-role {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #9A724E;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.team-social-bar {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.team-social-bar a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(184, 142, 104, 0.12);
  color: #9A724E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  text-decoration: none !important;
  transition: all 0.3s ease;
}

.team-social-bar a:hover {
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%);
  color: #ffffff !important;
  transform: translateY(-3px);
}

/* Compact Room Hero Banner */
.room-compact-hero {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.55) 100%), url('images/room-hero-banner.jpg') center/cover no-repeat;
  padding: 65px 0 75px 0;
  position: relative;
  border-bottom: 3px solid #9A724E;
}

.filter-fade-enter {
  animation: filterFadeIn 0.4s ease-in-out;
}

@keyframes filterFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

/* ==========================================
   ROOM SEARCH & CHECK-IN / CHECK-OUT CARD STRIP
   ========================================== */
.room-search-wrapper {
  margin-top: -42px;
  position: relative;
  z-index: 10;
}

.room-search-box {
  background: #ffffff;
  border-radius: 28px;
  padding: 32px 38px;
  border: 1.5px solid rgba(184, 142, 104, 0.35);
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.1), 0 8px 24px rgba(184, 142, 104, 0.12);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  margin: 0 auto;
}

.room-search-box:hover {
  box-shadow: 0 25px 55px rgba(15, 23, 42, 0.15), 0 10px 30px rgba(184, 142, 104, 0.2);
  border-color: rgba(184, 142, 104, 0.6);
}

.room-search-box .form-label {
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
  font-size: 0.78rem;
  letter-spacing: 1px;
  color: #475569;
  font-weight: 700;
  margin-bottom: 6px;
}

.room-input-field {
  border-radius: 50px !important;
  border: 1.5px solid #cbd5e1 !important;
  padding: 10px 20px !important;
  height: 48px !important;
  font-size: 0.95rem !important;
  color: #0f172a !important;
  background-color: #f8fafc !important;
  transition: all 0.3s ease !important;
}

.room-input-field:focus {
  background-color: #ffffff !important;
  border-color: #9A724E !important;
  box-shadow: 0 0 0 4px rgba(154, 114, 78, 0.18) !important;
}

.btn-room-search {
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%);
  color: #ffffff !important;
  height: 48px;
  border-radius: 50px;
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 22px rgba(154, 114, 78, 0.35);
  transition: all 0.35s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-room-search:hover {
  background: linear-gradient(135deg, #9A724E 0%, #7d5939 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(154, 114, 78, 0.5);
  color: #ffffff !important;
}

/* ==========================================
   CHECK-IN & CHECK-OUT INPUT FIELDS (MATCHING IMAGE MOCKUP)
   ========================================== */
.cin-cout-field-box {
  position: relative;
  width: 100%;
}

.cin-cout-label {
  position: absolute;
  top: -9px;
  left: 12px;
  background: #ffffff;
  padding: 0 6px;
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: #374151;
  line-height: 1;
  z-index: 4;
  pointer-events: none;
  letter-spacing: 0.1px;
}

.cin-cout-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 14px;
  background: #ffffff;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cin-cout-field-box:hover .cin-cout-input-wrap,
.cin-cout-field-box:focus-within .cin-cout-input-wrap {
  border-color: #8c582c;
  box-shadow: 0 0 0 3px rgba(140, 88, 44, 0.12);
}

.cin-cout-val {
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

.cin-cout-native-date {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.cin-cout-native-date::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.cin-cout-icon {
  font-size: 1.05rem;
  color: #4b5563;
  pointer-events: none;
  flex-shrink: 0;
  margin-left: 8px;
}

.cin-cout-chevron {
  font-size: 0.85rem;
  color: #4b5563;
  pointer-events: none;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

.cin-cout-select {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: #111827;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 24px;
  z-index: 2;
}

.btn-cin-cout-search {
  background: #8c582c;
  color: #ffffff !important;
  height: 48px;
  border-radius: 8px;
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid #7c4a22;
  box-shadow: 0 4px 12px rgba(140, 88, 44, 0.25);
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-cin-cout-search:hover {
  background: #75451e;
  border-color: #633816;
  box-shadow: 0 6px 16px rgba(140, 88, 44, 0.35);
  transform: translateY(-1px);
}

@media (max-width: 991.98px) {
  .room-search-wrapper {
    margin-top: -25px;
  }

  .room-search-box {
    padding: 24px 20px;
    border-radius: 20px;
  }
}

/* ==========================================
   ROOM PAGE FILTER TABS & LUXURY ROOM CARDS
   ========================================== */
.room-filter-bar {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  background: rgba(248, 250, 252, 0.8);
  padding: 8px 16px;
  border-radius: 50px;
  border: 1px solid rgba(184, 142, 104, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.room-filter-btn {
  background: #ffffff;
  border: 1.5px solid rgba(184, 142, 104, 0.25);
  color: #475569;
  padding: 8px 22px;
  border-radius: 50px;
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  transition: all 0.35s ease;
  cursor: pointer;
}

.room-filter-btn:hover,
.room-filter-btn.active {
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%);
  color: #ffffff !important;
  border-color: #9A724E;
  box-shadow: 0 6px 18px rgba(154, 114, 78, 0.35);
  transform: translateY(-2px);
}

/* Full Room Card Container - Horizontal Layout */
.room-card-full {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(184, 142, 104, 0.18);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: row;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

.room-card-full:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(154, 114, 78, 0.18);
  border-color: rgba(184, 142, 104, 0.5);
}

.room-card-full-img {
  width: 340px;
  min-width: 280px;
  max-width: 38%;
  height: auto;
  min-height: 260px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

@media (max-width: 991.98px) {
  .room-card-full {
    flex-direction: column;
    max-width: 100%;
  }

  .room-card-full-img {
    width: 100%;
    max-width: 100%;
    height: 240px;
    min-height: unset;
  }
}

.room-card-full-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 1, 0.3, 1);
}

.room-card-full:hover .room-card-full-img img {
  transform: scale(1.08);
}

.room-card-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #F4E2D8;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.room-card-price-tag {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #0f172a;
  font-family: var(--heading-font), "Cormorant Upright", serif;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 5px 16px;
  border-radius: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(184, 142, 104, 0.3);
}

.room-card-price-tag small {
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.room-card-full-body {
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.room-card-full-title {
  font-family: var(--heading-font), "Cormorant Upright", serif;
  font-size: 1.45rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 10px;
  letter-spacing: -0.2px;
  transition: color 0.3s ease;
}

.room-card-full:hover .room-card-full-title {
  color: #9A724E;
}

.room-card-full-desc {
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.room-specs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.room-spec-pill {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.room-spec-pill i {
  color: #9A724E;
  font-size: 0.85rem;
}

.room-amenities-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  padding-top: 12px;
  border-top: 1px dashed #e2e8f0;
}

.room-amenity-tag {
  color: #64748b;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.room-amenity-tag i {
  color: #9A724E;
  font-size: 0.85rem;
}

.room-card-full-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.room-card-stars {
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.room-card-stars .rating-num {
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 600;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.badge-verified {
  font-size: 0.72rem;
  font-weight: 700;
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 2px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
}

.badge-room-avail {
  font-size: 0.75rem;
  font-weight: 700;
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.2px;
}

.badge-room-booked {
  font-size: 0.75rem;
  font-weight: 700;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.2px;
}

.btn-room-details {
  background: transparent;
  border: 1.5px solid #cbd5e1;
  color: #475569;
  padding: 8px 18px;
  border-radius: 50px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
}

.btn-room-details:hover {
  border-color: #9A724E;
  color: #9A724E;
  background: rgba(184, 142, 104, 0.08);
}

.btn-room-book {
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #ffffff !important;
  padding: 9px 22px;
  border-radius: 50px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 18px rgba(154, 114, 78, 0.3);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-room-book:hover {
  background: linear-gradient(135deg, #9A724E 0%, #7d5939 100%);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(154, 114, 78, 0.45);
}

.btn-room-book i {
  transition: transform 0.3s ease;
}

.btn-room-book:hover i {
  transform: translateX(4px);
}

/* ==========================================
   SIDEBAR ROOM FILTER CARD (MATCHING USER MOCKUP)
   ========================================== */
.filter-sidebar-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

@media (min-width: 768px) {
  .filter-sidebar-box {
    position: -webkit-sticky;
    position: sticky;
    top: 90px;
    z-index: 20;
  }
}

.filter-sidebar-header {
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
}

.filter-sidebar-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.btn-filter-clear {
  background: none;
  border: none;
  color: #9A724E;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.btn-filter-clear:hover {
  color: #b91c1c;
  text-decoration: underline;
}

.filter-sidebar-section {
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
}

.filter-section-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 12px;
  letter-spacing: -0.1px;
}

.filter-options-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.filter-check-row .form-check-input {
  width: 18px;
  height: 18px;
  margin-top: 0;
  cursor: pointer;
  border: 1.5px solid #cbd5e1;
  border-radius: 4px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.filter-check-row .form-check-input:checked {
  background-color: #9A724E;
  border-color: #9A724E;
}

.filter-check-row .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(154, 114, 78, 0.15);
  border-color: #9A724E;
}

.filter-check-text {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.88rem;
  color: #334155;
  font-weight: 500;
  line-height: 1.3;
}

.filter-check-row:hover .filter-check-text {
  color: #0f172a;
}

/* Promo Banners at bottom of filter */
.filter-promo-banner {
  padding: 14px 18px;
}


.filter-promo-blue {
  background: linear-gradient(180deg, #442305 0%, #251201 100%);
  color: #ffffff;
  text-align: center;
  padding: 16px 14px;
  border-top: 1px solid rgba(184, 142, 104, 0.25);
}

.filter-promo-blue-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 2px;
  color: #ffffff;
}

.filter-promo-blue-sub {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.75rem;
  color: #F4E2D8;
  margin-bottom: 12px;
}

.filter-promo-icons-row {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.promo-mini-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(184, 142, 104, 0.22);
  border: 1px solid rgba(184, 142, 104, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  color: #F4E2D8;
  transition: all 0.25s ease;
}

.promo-mini-icon:hover {
  background: #9A724E;
  color: #ffffff;
  border-color: #F4E2D8;
}

/* ==========================================
   ROOM DETAILS PAGE LUXURY STYLING
   ========================================== */
.room-details-section {
  padding: 50px 0 80px;
  background-color: #fdfdfd;
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
}

/* 1. Header Section */
.room-header-image {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(184, 142, 104, 0.25);
}

.room-header-image img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.room-header-image:hover img {
  transform: scale(1.03);
}

.room-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%);
  color: #ffffff;
  padding: 6px 18px;
  border-radius: 30px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.room-header-content {
  padding-left: 20px;
}

@media (max-width: 991px) {
  .room-header-content {
    padding-left: 0;
    margin-top: 30px;
  }
}

.room-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rating-score {
  background: #9A724E;
  color: #ffffff;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.stars i {
  color: #9A724E;
  font-size: 0.95rem;
}

.reviews-count {
  color: #64748b;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.room-title {
  font-family: var(--heading-font), "Cormorant Upright", serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
  line-height: 1.2;
  letter-spacing: -0.3px;
}

.room-tagline {
  color: #64748b;
  font-size: 1.02rem;
  margin-bottom: 24px;
  line-height: 1.6;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.room-capacity {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 16px 20px;
  background: #ffffff;
  border: 1px solid rgba(184, 142, 104, 0.25);
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.capacity-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #334155;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.capacity-item i {
  color: #9A724E;
  font-size: 1.15rem;
}

.room-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 24px;
}

.price-amount {
  font-family: var(--heading-font), "Cormorant Upright", serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: #442305;
}

.price-period {
  color: #64748b;
  font-weight: 500;
  font-size: 0.95rem;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.btn-book-now {
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%);
  color: #ffffff !important;
  padding: 12px 35px;
  border-radius: 50px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(154, 114, 78, 0.35);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
}

.btn-book-now:hover {
  background: linear-gradient(135deg, #9A724E 0%, #7d5939 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(154, 114, 78, 0.45);
  color: #ffffff !important;
}

/* 2. Gallery Section */
.section-subtitle {
  font-family: var(--heading-font), "Cormorant Upright", serif;
  font-size: 2.1rem;
  font-weight: 700;
  color: #0f172a;
  position: relative;
  padding-bottom: 10px;
}

.section-subtitle::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 55px;
  height: 3px;
  background: linear-gradient(90deg, #442305, #9A724E);
  border-radius: 3px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 15px;
  border-radius: 20px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

.gallery-main img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.4s ease;
}

.gallery-thumbnails {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  grid-column: span 2;
}

@media (max-width: 768px) {
  .gallery-thumbnails {
    grid-column: span 1;
  }
}

.gallery-thumbnails img {
  width: 100%;
  height: 172px;
  object-fit: cover;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.gallery-thumbnails img:hover,
.gallery-main img:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: #9A724E;
}

/* 3. Description & Quote Box */
.room-description p {
  color: #475569;
  font-size: 0.98rem;
  line-height: 1.8;
  margin-bottom: 18px;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.highlight-box {
  background: linear-gradient(135deg, #ffffff 0%, #fdfbf7 100%);
  border: 1px solid rgba(184, 142, 104, 0.3);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  position: relative;
}

.highlight-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(184, 142, 104, 0.12);
  color: #9A724E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 16px;
}

.highlight-box h4 {
  font-family: var(--heading-font), "Cormorant Upright", serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: #442305;
  margin-bottom: 12px;
}

.highlight-box p {
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 15px;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.quote-author {
  font-weight: 700;
  font-size: 0.85rem;
  color: #9A724E;
  font-family: "Plus Jakarta Sans", sans-serif;
}

/* 4. Categorized Amenities */
.amenity-category {
  background: #ffffff;
  border: 1px solid rgba(184, 142, 104, 0.2);
  border-radius: 18px;
  padding: 24px;
  height: 100%;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.amenity-category:hover {
  border-color: #9A724E;
  box-shadow: 0 8px 25px rgba(154, 114, 78, 0.12);
  transform: translateY(-2px);
}

.amenity-category h5 {
  font-family: var(--heading-font), "Cormorant Upright", serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #442305;
  margin-bottom: 16px;
  border-bottom: 1px dashed rgba(184, 142, 104, 0.3);
  padding-bottom: 8px;
}

.amenity-category ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.amenity-category ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: #475569;
  margin-bottom: 10px;
  font-weight: 600;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.amenity-category ul li i {
  color: #9A724E;
  font-size: 1.1rem;
}

/* 5. Tabs Styling */
.room-tabs .nav-tabs {
  border-bottom: 2px solid #e2e8f0;
  gap: 10px;
}

.room-tabs .nav-link {
  font-family: var(--heading-font), "Cormorant Upright", serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #64748b;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 25px;
  background: transparent;
  transition: all 0.3s ease;
}

.room-tabs .nav-link:hover,
.room-tabs .nav-link.active {
  color: #442305;
  border-bottom-color: #9A724E;
  background: transparent;
}

.tab-content-wrapper {
  background: #ffffff;
  border: 1px solid rgba(184, 142, 104, 0.2);
  border-top: none;
  border-radius: 0 0 18px 18px;
  padding: 30px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
}

.tab-content-wrapper h6 {
  font-family: var(--heading-font), "Cormorant Upright", serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #442305;
  margin-bottom: 8px;
}

.tab-content-wrapper p,
.tab-content-wrapper ul {
  color: #64748b;
  font-size: 0.92rem;
  margin-bottom: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
}

/* 6. Optional Addons */
.addon-card {
  background: #ffffff;
  border: 1px solid rgba(184, 142, 104, 0.2);
  border-radius: 18px;
  padding: 25px;
  height: 100%;
  transition: all 0.3s ease;
}

.addon-card:hover {
  border-color: #9A724E;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(154, 114, 78, 0.12);
}

.addon-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(184, 142, 104, 0.12);
  color: #9A724E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 16px;
}

.addon-card h5 {
  font-family: var(--heading-font), "Cormorant Upright", serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
}

.addon-card p {
  color: #64748b;
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 16px;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.addon-price {
  font-weight: 700;
  color: #442305;
  font-size: 1.05rem;
  font-family: "Plus Jakarta Sans", sans-serif;
}

/* 7. Booking CTA Card */
.booking-card {
  background: linear-gradient(135deg, #1e293b 0%, #442305 100%);
  border-radius: 24px;
  padding: 40px 45px;
  color: #ffffff;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.booking-card h4 {
  font-family: var(--heading-font), "Cormorant Upright", serif;
  font-size: 2.3rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 10px;
}

.booking-card p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.98rem;
  margin-bottom: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.price-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
}

@media (min-width: 992px) {
  .price-display {
    align-items: flex-end;
  }
}

.price-display .price {
  font-family: var(--heading-font), "Cormorant Upright", serif;
  font-size: 2.9rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}

.price-display .period {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  font-family: "Plus Jakarta Sans", sans-serif;
}

.btn-theme-gold {
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-theme-gold:hover {
  background: linear-gradient(135deg, #9A724E 0%, #7d5939 100%);
  color: #ffffff !important;
}

/* ==========================================
   COMPACT ULTRA-LUXURY HERO BANNER (.page-title)
   ========================================== */
.page-title {
  position: relative;
  padding: 45px 0 40px;
  /* Sleek, compact height */
  background-image: linear-gradient(180deg, rgba(15, 12, 10, 0.45) 0%, rgba(45, 23, 5, 0.35) 50%, rgba(15, 12, 10, 0.75) 100%),
    url('images/hero-bg-luxury.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  border-bottom: 2px solid rgba(184, 142, 104, 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  z-index: 1;
}

.page-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #442305 20%, #9A724E 50%, #F4E2D8 75%, transparent 100%);
  z-index: 2;
}

.page-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212, 163, 115, 0.6) 50%, transparent 100%);
  z-index: 2;
}

.page-title .relative-z {
  position: relative;
  z-index: 3;
}

.page-title-badge {
  background: rgba(15, 12, 10, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(212, 163, 115, 0.4);
  padding: 5px 20px;
  border-radius: 50px;
  color: #F4E2D8;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  transition: all 0.35s ease;
}

.page-title-badge:hover {
  border-color: #9A724E;
  box-shadow: 0 4px 20px rgba(154, 114, 78, 0.4);
  transform: translateY(-1px);
}

.text-gold {
  color: #D4A373 !important;
}

.page-title-heading {
  font-family: "Cormorant Upright", var(--heading-font), serif;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.15;
  margin-top: 8px;
  margin-bottom: 6px;
  background: linear-gradient(135deg, #FFFFFF 20%, #F5E6DA 60%, #D4A373 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.8));
  letter-spacing: -0.5px;
}

.page-title-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 8px 0 14px;
}

.page-title-divider .divider-line {
  width: 45px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 163, 115, 0.9));
}

.page-title-divider .divider-line:last-child {
  background: linear-gradient(90deg, rgba(212, 163, 115, 0.9), transparent);
}

.page-title-divider .divider-diamond {
  color: #D4A373;
  font-size: 0.72rem;
  display: inline-block;
}

.page-title-subtitle {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.90);
  max-width: 600px;
  margin: 0 auto 16px;
  line-height: 1.5;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

.page-title-breadcrumb {
  background: rgba(15, 12, 10, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 163, 115, 0.3);
  border-radius: 50px;
  padding: 7px 22px;
  display: inline-flex !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.page-title-breadcrumb .breadcrumb-item {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.page-title-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
  color: rgba(212, 163, 115, 0.7);
  content: "•";
  padding: 0 8px;
}

.page-title-breadcrumb .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: all 0.3s ease;
}

.page-title-breadcrumb .breadcrumb-item a:hover {
  color: #D4A373;
  text-shadow: 0 0 8px rgba(212, 163, 115, 0.5);
}

.page-title-breadcrumb .breadcrumb-item.active {
  color: #D4A373;
  font-weight: 700;
}

@media (max-width: 768px) {
  .page-title {
    padding: 35px 0 30px;
  }

  .page-title-heading {
    font-size: 1.9rem;
  }

  .page-title-subtitle {
    font-size: 0.88rem;
  }

  .page-title-breadcrumb {
    padding: 6px 16px;
  }
}

/* Booking Section Luxury Styling */
/* Booking Section Luxury Styling - Tall Height & Zero Border Radius */
.booking-section-wrapper {
  padding: 70px 0 100px;
  background-color: #fdfbf7;
  font-family: "Plus Jakarta Sans", var(--body-font), sans-serif;
}

.booking-form-card {
  background: #ffffff;
  border-radius: 0 !important;
  /* Zero border radius per user directive */
  border: 1px solid rgba(68, 35, 5, 0.2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
  padding: 55px 50px;
  /* Generous height and padding */
}

.booking-form-card .form-control,
.booking-form-card .form-select,
.booking-form-card .btn,
.booking-summary-card,
.booking-summary-card .badge,
.booking-summary-card div {
  border-radius: 0 !important;
  /* Zero border radius throughout */
}

.booking-form-card .form-control,
.booking-form-card .form-select {
  height: 52px;
  padding: 12px 18px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.95rem;
  color: #1a1a1a;
  background-color: #fcfbf9;
  border: 1px solid #dcd6cd;
  transition: all 0.3s ease;
}

.booking-form-card textarea.form-control {
  height: auto !important;
  min-height: 120px;
}

.booking-form-card .form-control:focus,
.booking-form-card .form-select:focus {
  background-color: #ffffff;
  border-color: #9A724E;
  box-shadow: 0 0 0 3px rgba(154, 114, 78, 0.15);
  outline: none;
}

.booking-form-card label.form-label {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #442305;
  margin-bottom: 8px;
}

.booking-form-header-title {
  font-family: "Cormorant Upright", serif;
  font-size: 2.3rem;
  font-weight: 700;
  color: #442305;
  margin-bottom: 5px;
}

.booking-form-section-heading {
  font-family: "Cormorant Upright", serif;
  font-size: 1.65rem;
  font-weight: 700;
  color: #442305;
  border-left: 3px solid #9A724E;
  padding-left: 14px;
  margin-top: 35px;
  margin-bottom: 22px;
}

.btn-submit-reservation {
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%);
  color: #ffffff !important;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 16px 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0 !important;
  transition: all 0.35s ease;
  width: 100%;
}

.btn-submit-reservation:hover {
  background: linear-gradient(135deg, #9A724E 0%, #442305 100%);
  color: #ffffff !important;
  box-shadow: 0 10px 25px rgba(68, 35, 5, 0.3);
  transform: translateY(-2px);
}

.booking-summary-card {
  background: linear-gradient(135deg, #1e293b 0%, #442305 100%);
  border-radius: 0 !important;
  padding: 40px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  position: sticky;
  top: 90px;
}

.booking-summary-card h4 {
  font-family: var(--heading-font), "Cormorant Upright", serif;
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 15px;
}

/* Right Column: Hotel Building Image & Why Choose Card Styling */
.hotel-building-img-box {
  position: relative;
  overflow: hidden;
  border-radius: 0 !important;
  border: 1px solid rgba(184, 142, 104, 0.4);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.hotel-building-img-box img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 0 !important;
  transition: transform 0.5s ease;
}

.hotel-building-img-box:hover img {
  transform: scale(1.04);
}

.hotel-building-img-box .img-caption-badge {
  position: absolute;
  bottom: 15px;
  left: 15px;
  background: rgba(15, 12, 10, 0.75);
  backdrop-filter: blur(8px);
  color: #F4E2D8;
  padding: 6px 16px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px solid rgba(212, 163, 115, 0.3);
  border-radius: 0 !important;
}

/* Why Choose Our Hotel Card */
.why-choose-card {
  background: #ffffff;
  border-radius: 0 !important;
  border: 1px solid rgba(68, 35, 5, 0.18);
  padding: 35px 30px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
}

.why-choose-title {
  font-family: "Cormorant Upright", serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #442305;
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(154, 114, 78, 0.2);
}

.why-choose-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.why-choose-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.why-choose-list li:last-child {
  margin-bottom: 0;
}

.why-choose-list .icon-box {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: rgba(68, 35, 5, 0.06);
  color: #442305;
  border: 1px solid rgba(154, 114, 78, 0.25);
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: all 0.3s ease;
}

.why-choose-list li:hover .icon-box {
  background: #442305;
  color: #D4A373;
}

.why-choose-list strong {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 2px;
}

.why-choose-list p {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.84rem;
  color: #666666;
  margin: 0;
  line-height: 1.4;
}

/* External Trust Badges Row (Outside Card) */
.trust-features-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.trust-badge-item {
  background: linear-gradient(135deg, #1e293b 0%, #442305 100%);
  color: #ffffff;
  padding: 16px 20px;
  border-radius: 0 !important;
  border: 1px solid rgba(212, 163, 115, 0.25);
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.trust-badge-item:hover {
  border-color: #D4A373;
  transform: translateX(4px);
}

.trust-badge-item i {
  color: #D4A373;
  font-size: 1.4rem;
}

/* ==========================================
   AMENITIES PAGE STYLES (MATCHING SCREENSHOTS)
   ========================================== */
.amenity-card {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.4s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.amenity-card:hover {
  background: #ffffff !important;
  color: #1A1A1A !important;
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
}

.amenity-card:hover .amenity-card-title {
  color: #1A1A1A !important;
}

.amenity-card:hover .amenity-card-desc {
  color: #666666 !important;
}

.amenity-card:hover .amenity-feature-item {
  color: #444444 !important;
}

.amenity-card-img-wrap {
  position: relative;
  overflow: hidden;
  height: 270px;
  width: 100%;
}

.amenity-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

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

.amenity-card-body {
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.amenity-card-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 14px;
}

.amenity-card-desc {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.92rem;
  color: #666666;
  line-height: 1.65;
  margin-bottom: 22px;
}

.amenity-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.amenity-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.92rem;
  color: #444444;
}

.amenity-feature-item i {
  font-size: 1.15rem;
  color: #353535;
  min-width: 22px;
}

/* Additional Hotel Services Section Card */
.additional-services-wrapper {
  background: #ffffff;
  border-radius: 20px !important;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.04);
  padding: 55px 40px;
  margin-top: 50px;
  margin-bottom: 40px;
}

.additional-services-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.85rem;
  font-weight: 700;
  color: #1A1A1A;
  text-align: center;
  margin-bottom: 45px;
}

.service-icon-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: #442305;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  font-size: 1.75rem;
  transition: all 0.35s ease;
  box-shadow: 0 6px 16px rgba(45, 90, 76, 0.25);
}

.service-grid-item:hover .service-icon-circle {
  transform: scale(1.1) rotate(4deg);
  background-color: #442305;
  box-shadow: 0 10px 22px rgba(30, 58, 52, 0.35);
}

.service-grid-item {
  text-align: center;
  padding: 15px 10px;
  transition: transform 0.3s ease;
}

.service-grid-item:hover {
  transform: translateY(-4px);
}

.service-item-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 8px;
}

.service-item-desc {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.86rem;
  color: #666666;
  line-height: 1.5;
  margin: 0;
}

/* ==========================================
   LOCATION PAGE STYLES (MATCHING WEBSITE THEME)
   ========================================== */
.location-prime-badge {
  background-color: #F5E6DA;
  color: #442305;
  border: 1px solid rgba(154, 114, 78, 0.35);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 8px 18px !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.location-prime-badge i {
  color: #9A724E;
  font-size: 1rem;
}

.location-heading-title {
  font-family: "Cormorant Upright", "Playfair Display", serif !important;
  color: #442305 !important;
  font-weight: 700 !important;
}

.location-info-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #ffffff;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(68, 35, 5, 0.12);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  height: 100%;
  overflow: hidden;
}

.location-info-card>div:last-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.location-info-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(68, 35, 5, 0.08);
  border-color: rgba(154, 114, 78, 0.4);
}

.location-icon-box {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 14px;
  background-color: rgba(68, 35, 5, 0.06);
  color: #442305;
  border: 1px solid rgba(154, 114, 78, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: all 0.3s ease;
}

.location-info-card:hover .location-icon-box {
  background-color: #442305;
  color: #D4A373;
}

.location-info-title {
  font-family: "Cormorant Upright", serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #442305;
  margin-bottom: 3px;
}

.location-info-txt {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.84rem;
  color: #5C4A3E;
  line-height: 1.48;
  margin: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

.btn-location-map {
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%) !important;
  color: #ffffff !important;
  border: none !important;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 14px 34px !important;
  transition: all 0.35s ease;
}

.btn-location-map:hover {
  background: linear-gradient(135deg, #9A724E 0%, #442305 100%) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(68, 35, 5, 0.25);
}

.btn-location-book {
  border: 1.5px solid #442305 !important;
  color: #442305 !important;
  background: transparent !important;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 14px 34px !important;
  transition: all 0.35s ease;
}

.btn-location-book:hover {
  background: #442305 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(68, 35, 5, 0.2);
}

/* Map Card Wrapper */
.map-card-wrapper {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(68, 35, 5, 0.1);
  border: 1px solid rgba(154, 114, 78, 0.3);
  height: 480px;
  background: #ffffff;
}

.map-card-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.map-floating-hotel-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  background: #442305;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 12px;
  border: 1px solid rgba(212, 163, 115, 0.4);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.map-floating-hotel-badge i {
  color: #D4A373;
  font-size: 1.1rem;
}

/* ==========================================
   GETTING HERE IS EASY SECTION STYLES
   ========================================== */
.transport-card {
  background: #ffffff;
  border-radius: 20px !important;
  border: 1px solid rgba(68, 35, 5, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  padding: 32px 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.35s ease;
}

.transport-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(68, 35, 5, 0.08);
  border-color: rgba(154, 114, 78, 0.3);
}

.transport-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.transport-icon-box {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 16px;
  background-color: rgba(68, 35, 5, 0.06);
  color: #442305;
  border: 1px solid rgba(154, 114, 78, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  transition: all 0.3s ease;
}

.transport-card:hover .transport-icon-box {
  background-color: #442305;
  color: #D4A373;
}

.transport-title {
  font-family: "Cormorant Upright", serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #442305;
  margin-bottom: 2px;
}

.transport-subtag {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #9A724E
}

.transport-desc {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.92rem;
  color: #666666;
  line-height: 1.6;
  margin-bottom: 22px;
}

.transport-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.transport-tag-pill {
  background: #F4F6F5;
  color: #442305;
  border: 1px solid rgba(68, 35, 5, 0.08);
  padding: 5px 14px;
  border-radius: 50px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
}

/* ==========================================
   EXPLORE THE NEIGHBORHOOD SECTION STYLES
   ========================================== */
.neighborhood-card {
  background: #ffffff;
  border-radius: 20px !important;
  border: 1px solid rgba(68, 35, 5, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.4s ease;
}

.neighborhood-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(68, 35, 5, 0.1);
  border-color: rgba(154, 114, 78, 0.35);
}

.neighborhood-img-wrap {
  position: relative;
  overflow: hidden;
  height: 230px;
  width: 100%;
}

.neighborhood-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

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

.neighborhood-dist-pill {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 5;
  background: #ffffff;
  color: #442305;
  padding: 6px 14px;
  border-radius: 50px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 6px;
}

.neighborhood-dist-pill i {
  color: #9A724E;
  font-size: 0.85rem;
}

.neighborhood-body {
  padding: 28px 25px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.neighborhood-title {
  font-family: "Cormorant Upright", "Playfair Display", serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #442305;
  margin-bottom: 6px;
}

.neighborhood-time-tag {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  color: #9A724E;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}

.neighborhood-desc {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.9rem;
  color: #666666;
  line-height: 1.6;
  margin-bottom: 0;
}

/* ==========================================
   GALLERY PAGE STYLES (MATCHING SCREENSHOT)
   ========================================== */
.gallery-filter-btn {
  background: #ffffff;
  color: #442305;
  border: 1.5px solid #442305;
  padding: 10px 26px;
  border-radius: 50px !important;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  transition: all 0.35s ease;
  cursor: pointer;
}

.gallery-filter-btn:hover,
.gallery-filter-btn.active {
  background: #442305 !important;
  color: #ffffff !important;
  border-color: #442305 !important;
  box-shadow: 0 8px 20px rgba(68, 35, 5, 0.25);
  transform: translateY(-2px);
}

.gallery-item-card {
  position: relative;
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(68, 35, 5, 0.08);
  height: 290px;
  width: 100%;
  background: #ffffff;
  transition: all 0.4s ease;
}

.gallery-item-card.wide-card {
  height: 290px;
}

.gallery-item-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(68, 35, 5, 0.12);
}

.gallery-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

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

.gallery-overlay-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(15, 12, 10, 0.1) 0%, rgba(45, 23, 5, 0.75) 100%);
  opacity: 0;
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 25px;
  color: #ffffff;
}

.gallery-item-card:hover .gallery-overlay-mask {
  opacity: 1;
}

.gallery-overlay-title {
  font-family: "Cormorant Upright", serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 2px;
  transform: translateY(10px);
  transition: transform 0.4s ease;
}

.gallery-item-card:hover .gallery-overlay-title {
  transform: translateY(0);
}

.gallery-overlay-cat {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #D4A373;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.gallery-zoom-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #442305;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.gallery-item-card:hover .gallery-zoom-icon {
  background: #442305;
  color: #D4A373;
}

/* Gallery Lightbox Modal - Transparent Styling */
#galleryLightboxModal .modal-dialog {
  max-width: fit-content !important;
  width: auto !important;
  margin: 1.5rem auto !important;
}

#galleryLightboxModal .modal-content {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#galleryLightboxModal .modal-header {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 4px 12px 4px !important;
}

#galleryLightboxModal .modal-header .modal-title,
#galleryLightboxModal #galleryModalCaption {
  font-family: var(--heading-font), "Cormorant Upright", "Playfair Display", serif !important;
  color: #ffffff !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  line-height: 1.3;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

#galleryLightboxModal .modal-body {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  text-align: center;
}

#galleryModalPreviewImg {
  width: auto !important;
  max-width: 100% !important;
  max-height: 85vh !important;
  object-fit: contain;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease;
}

#galleryLightboxModal .btn-close {
  background-color: rgba(30, 20, 15, 0.75);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  opacity: 0.95;
  transition: all 0.25s ease;
  padding: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

#galleryLightboxModal .btn-close:hover {
  background-color: #9A724E;
  border-color: #ffffff;
  opacity: 1;
  transform: rotate(90deg);
}

/* Unique Page Hero Banners */
.gallery-compact-hero {
  position: relative;
  padding: 45px 0 40px;
  background-image: linear-gradient(180deg, rgba(15, 12, 10, 0.45) 0%, rgba(45, 23, 5, 0.35) 50%, rgba(15, 12, 10, 0.75) 100%),
    url('images/gallery-hero-banner.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.amenities-compact-hero {
  position: relative;
  padding: 45px 0 40px;
  background-image: linear-gradient(180deg, rgba(15, 12, 10, 0.45) 0%, rgba(45, 23, 5, 0.35) 50%, rgba(15, 12, 10, 0.75) 100%),
    url('images/amenity-pool.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.location-compact-hero {
  position: relative;
  padding: 45px 0 40px;
  background-image: linear-gradient(180deg, rgba(15, 12, 10, 0.45) 0%, rgba(45, 23, 5, 0.35) 50%, rgba(15, 12, 10, 0.75) 100%),
    url('images/indian-palace-hero.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.contact-compact-hero {
  position: relative;
  padding: 50px 0 45px;
  background-image: linear-gradient(180deg, rgba(15, 12, 10, 0.55) 0%, rgba(45, 23, 5, 0.45) 50%, rgba(15, 12, 10, 0.8) 100%),
    url('images/contact-hero-banner.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.privacy-compact-hero {
  position: relative;
  padding: 50px 0 45px;
  background-image: linear-gradient(180deg, rgba(15, 12, 10, 0.55) 0%, rgba(45, 23, 5, 0.45) 50%, rgba(15, 12, 10, 0.8) 100%),
    url('images/privacy-hero-banner.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.terms-compact-hero {
  position: relative;
  padding: 50px 0 45px;
  background-image: linear-gradient(180deg, rgba(15, 12, 10, 0.55) 0%, rgba(45, 23, 5, 0.45) 50%, rgba(15, 12, 10, 0.8) 100%),
    url('images/terms-hero-banner.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.login-compact-hero {
  position: relative;
  padding: 50px 0 45px;
  background-image: linear-gradient(180deg, rgba(15, 12, 10, 0.55) 0%, rgba(45, 23, 5, 0.45) 50%, rgba(15, 12, 10, 0.8) 100%),
    url('images/room-hero-banner.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ==========================================
   CONTACT PAGE STYLES (MATCHING WEBSITE LUXURY THEME)
   ========================================== */
.contact-full-map-wrapper {
  position: relative;
  width: 100%;
  height: 440px;
  overflow: hidden;
  background: #ffffff;
}

.contact-full-map-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.contact-summary-card {
  background: linear-gradient(135deg, #FBF8F5 0%, #F5EBE1 100%);
  border-radius: 18px !important;
  padding: 28px 26px;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1.5px solid rgba(154, 114, 78, 0.22);
  box-shadow: 0 6px 20px rgba(68, 35, 5, 0.05);
}

.contact-summary-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(68, 35, 5, 0.12);
  background: #ffffff;
  border-color: #9A724E;
}

.contact-summary-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  box-shadow: 0 8px 20px rgba(68, 35, 5, 0.25);
  border: 1px solid rgba(244, 226, 216, 0.4);
  transition: all 0.35s ease;
}

.contact-summary-card:hover .contact-summary-icon {
  background: linear-gradient(135deg, #0f172a 0%, #442305 100%);
  color: #D4A373;
  transform: scale(1.05);
  border-color: #B88E68;
}

.contact-summary-text-box {
  flex: 1;
  min-width: 0;
}

.contact-summary-title {
  font-family: "Cormorant Upright", "Playfair Display", serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #442305;
  margin-bottom: 4px;
}

.contact-summary-txt {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.9rem;
  color: #5C4A3E;
  font-weight: 500;
  line-height: 1.55;
  margin: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

.contact-form-wrapper {
  background: #ffffff;
  border-radius: 24px !important;
  border: 1.5px solid rgba(154, 114, 78, 0.18);
  box-shadow: 0 20px 50px rgba(68, 35, 5, 0.07);
  padding: 55px 48px;
  max-width: 860px;
  margin: 0 auto;
}

.contact-form-title {
  font-family: "Cormorant Upright", "Playfair Display", serif;
  font-size: 2.3rem;
  font-weight: 700;
  color: #442305;
  text-align: center;
  margin-bottom: 8px;
}

.contact-form-line {
  width: 60px;
  height: 3.5px;
  background: linear-gradient(90deg, #442305, #9A724E);
  margin: 0 auto 35px;
  border-radius: 4px;
}

.contact-input-field {
  height: 52px;
  padding: 12px 20px;
  border-radius: 12px !important;
  border: 1.5px solid rgba(154, 114, 78, 0.2);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.92rem;
  color: #1a1a1a;
  background-color: #FAF9F6;
  transition: all 0.3s ease;
}

.contact-input-field:focus {
  background-color: #ffffff;
  border-color: #9A724E;
  box-shadow: 0 0 0 4px rgba(154, 114, 78, 0.18);
  outline: none;
}

.contact-input-field::placeholder {
  color: #94a3b8;
  font-size: 0.88rem;
}

.btn-send-message {
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 50px !important;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 14px 48px !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 25px rgba(184, 142, 104, 0.35);
}

.btn-send-message:hover {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.3);
  border-color: #B88E68 !important;
}

/* ==========================================
   GLOBAL MOBILE RESPONSIVE & OVERFLOW FIXES
   ========================================== */
img,
iframe,
svg,
video {
  max-width: 100% !important;
}

@media (max-width: 1024px) {
  .location-info-card {
    padding: 14px 12px !important;
    gap: 10px !important;
  }

  .location-icon-box {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    font-size: 1.1rem !important;
  }

  .location-info-title {
    font-size: 1.1rem !important;
  }

  .location-info-txt {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }
}

@media (max-width: 991.98px) {
  .contact-form-wrapper {
    padding: 35px 25px !important;
    border-radius: 20px !important;
  }

  .featured-suite-card {
    margin-bottom: 24px;
  }

  .mini-room-card {
    height: auto !important;
  }

  .contact-summary-card {
    padding: 22px 18px !important;
    gap: 14px !important;
  }
}

/* ==========================================
   GLOBAL MOBILE OVERFLOW & RESPONSIVE FIXES
   ========================================== */
@media (max-width: 991.98px) {

  html,
  body {
    max-width: 100% !important;
    width: 100% !important;
  }

  main,
  footer,
  section,
  .hero-full-width-wrapper {
    max-width: 100% !important;
    overflow-x: clip;
  }

  /* Prevent AOS horizontal translation from expanding viewport */
  [data-aos="fade-left"],
  [data-aos="fade-right"],
  [data-aos*="-left"],
  [data-aos*="-right"] {
    transform: none !important;
  }

  /* Room card image & footer flexbox mobile constraints */
  .room-card-full-img {
    min-width: 0 !important;
  }

  .room-card-full-footer {
    flex-wrap: wrap;
  }

  .room-search-box {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden;
  }

  /* Prevent row bleed when row has w-100 or mx-auto */
  .row.w-100,
  .row.mx-auto {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 767.98px) {

  .container,
  .container-fluid {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }

  .row {
    margin-left: -8px !important;
    margin-right: -8px !important;
  }

  .row>[class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .contact-form-wrapper {
    padding: 28px 16px !important;
    border-radius: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  .contact-form-title {
    font-size: 1.75rem !important;
  }

  .contact-summary-card {
    padding: 20px 16px !important;
    border-radius: 14px !important;
    gap: 14px !important;
  }

  .contact-summary-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    font-size: 1.25rem !important;
  }

  .contact-summary-title {
    font-size: 1.25rem !important;
  }

  .contact-summary-txt {
    font-size: 0.85rem !important;
  }

  .btn-send-message {
    padding: 12px 30px !important;
    font-size: 0.85rem !important;
    width: 100% !important;
  }

  .watermark-bg-text {
    font-size: 2.2rem !important;
    letter-spacing: 4px !important;
    display: none !important;
  }

  .contact-full-map-wrapper {
    height: 320px !important;
  }

  /* Offcanvas mobile navbar width fix */
  .offcanvas-end {
    width: 85% !important;
    max-width: 320px !important;
  }

  /* Top bar info wrapping fix */
  .top-bar-info {
    font-size: 0.78rem !important;
    text-align: center;
  }

  .top-bar-info .d-flex {
    justify-content: center !important;
  }

  /* Reserve Suite Button Mobile Responsiveness */
  .suite-price-action-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    text-align: center !important;
  }

  .suite-price-wrap {
    justify-content: center !important;
    margin-bottom: 2px !important;
  }

  .btn-reserve-suite {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 12px 20px !important;
    font-size: 0.88rem !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .booking-form-card {
    padding: 28px 18px !important;
  }
}

@media (max-width: 575.98px) {

  .display-4,
  .display-5 {
    font-size: 2rem !important;
  }

  .contact-compact-hero,
  .privacy-compact-hero,
  .terms-compact-hero,
  .gallery-compact-hero,
  .amenities-compact-hero,
  .location-compact-hero,
  .login-compact-hero {
    padding: 35px 10px !important;
  }
}

/* ==========================================
   LOGIN / REGISTER AUTH PAGE STYLES
   ========================================== */

/* Auth Card */
.auth-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  border: 1px solid rgba(184, 142, 104, 0.12);
  transition: box-shadow 0.3s ease;
}

.auth-card:hover {
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* Card Header */
.auth-card-header {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d1705 50%, #1a1a1a 100%);
  padding: 40px 30px 35px;
  position: relative;
  overflow: hidden;
}

.auth-card-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 50%, rgba(184, 142, 104, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.auth-icon-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, #B88E68, #d4a97a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #fff;
  box-shadow: 0 4px 20px rgba(184, 142, 104, 0.4);
}

.auth-card-title {
  font-family: 'Cormorant Upright', serif;
  font-size: 1.9rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 5px;
  letter-spacing: 0.5px;
}

.auth-card-subtitle {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0;
  letter-spacing: 0.3px;
}

/* Card Body */
.auth-card-body {
  padding: 35px 35px 40px;
}

/* Labels */
.auth-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: #353535;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
  display: block;
}

/* Input Wrapper */
.auth-input-wrapper {
  position: relative;
}

.auth-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: #B88E68;
  pointer-events: none;
  z-index: 2;
}

.auth-input {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: #faf9f6;
  border: 1.5px solid #e8e4df;
  border-radius: 10px;
  padding: 14px 16px 14px 46px;
  font-size: 0.92rem;
  color: #353535;
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.auth-input:focus {
  border-color: #B88E68;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(184, 142, 104, 0.12);
}

.auth-input::placeholder {
  color: #aaa;
  font-size: 0.88rem;
}

/* Chrome / WebKit Autofill background override */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus,
.auth-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #faf9f6 inset !important;
  -webkit-text-fill-color: #353535 !important;
  caret-color: #353535 !important;
  transition: background-color 50000s ease-in-out 0s !important;
}

.auth-input:focus:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset, 0 0 0 3px rgba(184, 142, 104, 0.12) !important;
  -webkit-text-fill-color: #353535 !important;
}

/* Toggle Password Button */
.auth-toggle-password {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  font-size: 1.05rem;
  padding: 4px;
  transition: color 0.2s ease;
  z-index: 2;
}

.auth-toggle-password:hover {
  color: #B88E68;
}

/* Checkbox */
span.auth-checkbox,
span.form-check-input.auth-checkbox {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
}

span.auth-checkbox input[type="checkbox"],
input[type="checkbox"].auth-checkbox {
  width: 17px !important;
  height: 17px !important;
  border: 1.5px solid #B88E68 !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  accent-color: #B88E68 !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  display: inline-block !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
}

.auth-checkbox:checked {
  background-color: #B88E68 !important;
  border-color: #B88E68 !important;
}

.auth-check-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem;
  color: #555;
  cursor: pointer;
  user-select: none;
}

/* Forgot Password Link */
.auth-forgot-link {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem;
  color: #B88E68;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.auth-forgot-link:hover {
  color: #9A724E;
  text-decoration: underline;
}

/* Primary Auth Button */
.auth-btn-primary {
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%) !important;
  color: #ffffff !important;
  border: 1px solid #B88E68 !important;
  border-radius: 6px !important;
  padding: 14px 20px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(68, 35, 5, 0.35);
}

.auth-btn-primary:hover {
  background: linear-gradient(135deg, #9A724E 0%, #442305 100%) !important;
  border-color: #9A724E !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(184, 142, 104, 0.45);
}

.auth-btn-primary:active {
  transform: translateY(0);
}

/* Divider */
.auth-divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e8e4df;
}

.auth-divider span {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8rem;
  color: #999;
  padding: 0 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Google / Gmail Button */
.auth-btn-google {
  height: 48px;
  border-radius: 8px;
  border: 1.5px solid #e8e4df;
  background: #ffffff;
  color: #353535;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.auth-btn-google:hover {
  border-color: #B88E68;
  background: #faf9f6;
  color: #442305;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(184, 142, 104, 0.18);
}

/* Register Link */
.auth-register-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9rem;
  color: #777;
}

.auth-register-link {
  color: #B88E68;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
}

.auth-register-link:hover {
  color: #9A724E;
  text-decoration: underline;
}

/* Auth Page Responsive */
@media (max-width: 575.98px) {
  .auth-card-header {
    padding: 30px 20px 25px;
  }

  .auth-card-body {
    padding: 25px 20px 30px;
  }

  .auth-icon-circle {
    width: 56px;
    height: 56px;
    font-size: 1.4rem;
  }

  .auth-card-title {
    font-size: 1.5rem;
  }
}

/* ==================================================
   OFFERS & PROMOTIONS LUXURY STYLES (STEP 2)
   Theme Colors: #442305 (Royal Brown), #B88E68 (Champagne Gold), #F4E2D8
   ================================================== */
.special-offers-section {
  padding: 95px 0;
  background-color: #faf8f5;
  position: relative;
  overflow: hidden;
}

.special-offers-watermark {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Cormorant Upright', serif;
  font-size: clamp(3.5rem, 8vw, 7.5rem);
  font-weight: 800;
  letter-spacing: 12px;
  color: rgba(68, 35, 5, 0.04);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  text-transform: uppercase;
}

.special-offer-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(68, 35, 5, 0.06);
  border: 1px solid rgba(184, 142, 104, 0.25);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.special-offer-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 45px rgba(68, 35, 5, 0.14);
  border-color: #B88E68;
}

.offer-card-img-wrap {
  position: relative;
  height: 230px;
  overflow: hidden;
  background-color: #1a1a1a;
}

.offer-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.special-offer-card:hover .offer-card-img-wrap img {
  transform: scale(1.08);
}

.offer-card-overlay-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(68, 35, 5, 0.9);
  color: #F4E2D8;
  border: 1px solid #B88E68;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 50px;
  backdrop-filter: blur(4px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.offer-card-validity-pill {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  z-index: 2;
}

.offer-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.offer-card-category {
  color: #B88E68;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.offer-card-title {
  font-family: 'Cormorant Upright', 'Playfair Display', serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: #442305;
  line-height: 1.25;
  margin-bottom: 10px;
  transition: color 0.2s ease;
}

.special-offer-card:hover .offer-card-title {
  color: #9A724E;
}

.offer-card-desc {
  color: #64748b;
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.offer-inclusions-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.offer-inclusions-list li {
  font-size: 0.82rem;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 8px;
}

.offer-inclusions-list li i {
  color: #B88E68;
  font-size: 0.85rem;
}

.offer-card-footer {
  padding-top: 16px;
  border-top: 1px solid rgba(68, 35, 5, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.offer-price-box {
  display: flex;
  flex-direction: column;
}

.offer-price-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: #8c7866;
  letter-spacing: 0.5px;
}

.offer-price-val {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  color: #442305;
  line-height: 1.1;
}

.offer-price-val .period {
  font-size: 0.78rem;
  font-weight: 500;
  color: #8c7866;
}

.btn-offer-view {
  background: transparent;
  color: #442305;
  border: 1.5px solid #B88E68;
  padding: 8px 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.btn-offer-view:hover {
  background: #442305;
  color: #F4E2D8 !important;
  border-color: #442305;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(68, 35, 5, 0.25);
}

.btn-view-all-offers {
  background: linear-gradient(135deg, #442305 0%, #63360b 100%);
  color: #F4E2D8 !important;
  border: 1.5px solid #B88E68;
  padding: 14px 40px;
  border-radius: 50px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 25px rgba(68, 35, 5, 0.25);
  transition: all 0.35s ease;
}

.btn-view-all-offers:hover {
  background: #B88E68;
  color: #ffffff !important;
  border-color: #B88E68;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(184, 142, 104, 0.45);
}

/* Offers Listing Filter Tabs */
.offer-filter-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 40px;
}

.offer-filter-btn {
  background: #ffffff;
  color: #442305;
  border: 1.5px solid rgba(184, 142, 104, 0.35);
  padding: 9px 24px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.offer-filter-btn:hover,
.offer-filter-btn.active {
  background: #442305;
  color: #F4E2D8 !important;
  border-color: #442305;
  box-shadow: 0 6px 18px rgba(68, 35, 5, 0.2);
}

/* Offer Details Page Elements */
.offer-detail-hero-box {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(68, 35, 5, 0.12);
  border: 2px solid rgba(184, 142, 104, 0.35);
  position: relative;
  max-height: 520px;
}

.offer-detail-hero-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.offer-sidebar-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 15px 45px rgba(68, 35, 5, 0.08);
  border: 1.5px solid rgba(184, 142, 104, 0.35);
  position: sticky;
  top: 100px;
}

.offer-inclusion-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #faf8f5;
  border: 1px solid rgba(184, 142, 104, 0.15);
  margin-bottom: 10px;
}

.offer-inclusion-item i {
  color: #B88E68;
  font-size: 1.15rem;
  margin-top: 2px;
}

.offer-terms-card {
  background: #faf8f5;
  border-left: 4px solid #B88E68;
  border-radius: 0 12px 12px 0;
  padding: 24px;
  margin-top: 30px;
}

.btn-book-offer {
  background: linear-gradient(135deg, #442305 0%, #63360b 100%);
  color: #F4E2D8 !important;
  border: 1.5px solid #B88E68;
  padding: 16px 36px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  box-shadow: 0 10px 25px rgba(68, 35, 5, 0.25);
  transition: all 0.35s ease;
}

.btn-book-offer:hover {
  background: #B88E68;
  color: #ffffff !important;
  border-color: #B88E68;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(184, 142, 104, 0.45);
}

/* ==================================================
   TAJ HOTELS BOOKING LANDING PAGE STYLES
   Benchmark: tajhotels.com/en-in/bookings/landing-page
   ================================================== */
.taj-landing-property-bar {
  background: #ffffff;
  border-bottom: 1.5px solid rgba(184, 142, 104, 0.35);
  box-shadow: 0 4px 20px rgba(68, 35, 5, 0.05);
  padding: 16px 0;
  position: sticky;
  top: 72px;
  z-index: 1020;
}

.taj-property-title {
  font-family: 'Cormorant Upright', 'Playfair Display', serif;
  font-size: 1.65rem;
  font-weight: 700;
  color: #442305;
  margin-bottom: 2px;
  line-height: 1.2;
}

.taj-property-meta {
  font-size: 0.82rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.taj-stay-summary-pill {
  background: #faf8f5;
  border: 1.5px solid #B88E68;
  border-radius: 50px;
  padding: 8px 18px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #442305;
}

.btn-modify-stay {
  background: #442305;
  color: #F4E2D8 !important;
  border: 1px solid #B88E68;
  padding: 9px 22px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(68, 35, 5, 0.2);
}

.btn-modify-stay:hover {
  background: #B88E68;
  color: #ffffff !important;
  border-color: #B88E68;
  box-shadow: 0 6px 20px rgba(184, 142, 104, 0.4);
  transform: translateY(-1px);
}

.taj-modify-drawer {
  background: linear-gradient(135deg, #fefefe 0%, #faf8f5 100%);
  border-bottom: 2px solid #B88E68;
  box-shadow: 0 15px 35px rgba(68, 35, 5, 0.12);
  padding: 28px 0;
  display: none;
  animation: fadeInDown 0.3s ease-out;
}

.taj-modify-drawer.show {
  display: block;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

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

/* ── NeuPass Banner ── */
.taj-neupass-banner {
  background: linear-gradient(135deg, #2c1500 0%, #442305 40%, #63360b 80%, #442305 100%);
  color: #F4E2D8;
  border: 1px solid rgba(184, 142, 104, 0.5);
  border-radius: 14px;
  padding: 18px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  box-shadow: 0 8px 24px rgba(68, 35, 5, 0.18);
  position: relative;
  overflow: hidden;
}

.taj-neupass-banner::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  background: rgba(184, 142, 104, 0.12);
  border-radius: 50%;
}

/* ── Filter Bar ── */
.room-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.room-filter-btn {
  background: #faf8f5;
  border: 1.5px solid rgba(184, 142, 104, 0.3);
  color: #442305;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 7px 16px;
  border-radius: 6px;
  transition: all 0.25s ease;
  cursor: pointer;
  text-transform: uppercase;
}

.room-filter-btn:hover {
  background: #442305;
  color: #ffffff !important;
  border-color: #442305;
  box-shadow: 0 4px 14px rgba(68, 35, 5, 0.28);
}

.room-filter-btn.active {
  background: linear-gradient(135deg, #442305 0%, #9A724E 100%);
  color: #ffffff !important;
  border-color: #9A724E;
  box-shadow: 0 4px 14px rgba(68, 35, 5, 0.28);
}

/* ── Horizontal Room Card ── */
.taj-room-card-horizontal {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(68, 35, 5, 0.07), 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1.5px solid rgba(184, 142, 104, 0.2);
  margin-bottom: 30px;
  transition: all 0.4s ease;
}

.taj-room-card-horizontal:hover {
  border-color: #B88E68;
  box-shadow: 0 20px 50px rgba(68, 35, 5, 0.13), 0 6px 20px rgba(184, 142, 104, 0.12);
  transform: translateY(-3px);
}

.room-card-gallery-col {
  padding: 28px;
  border-right: 1px solid rgba(68, 35, 5, 0.07);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(160deg, #fffdfa 0%, #faf8f5 100%);
}

.room-card-main-photo-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  height: 240px;
  margin-bottom: 18px;
  box-shadow: 0 8px 20px rgba(68, 35, 5, 0.12);
}

.room-card-main-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s ease;
}

.taj-room-card-horizontal:hover .room-card-main-photo-wrap img {
  transform: scale(1.07);
}

.badge-presidential-pill {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #442305 !important;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 6px 18px;
  border-radius: 30px;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
  z-index: 2;
}

.room-photo-count-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 6px;
  backdrop-filter: blur(5px);
  font-weight: 600;
}

.room-specs-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.room-spec-tag {
  background: #ffffff;
  border: 1px solid rgba(184, 142, 104, 0.3);
  color: #442305;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 1px 4px rgba(68, 35, 5, 0.06);
}

.btn-room-details-trigger {
  color: #B88E68;
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: none;
  border: none;
  padding: 0;
  letter-spacing: 0.3px;
}

.btn-room-details-trigger:hover {
  color: #442305;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Rate Packages Column ── */
.room-card-rates-col {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rate-package-box {
  background: #ffffff;
  border: 1.5px solid rgba(184, 142, 104, 0.22);
  border-radius: 14px;
  padding: 18px 22px;
  transition: all 0.28s ease;
  position: relative;
  cursor: pointer;
}

.rate-package-box::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 14px 0 0 14px;
  background: transparent;
  transition: background 0.25s ease;
}

.rate-package-box:hover {
  border-color: #B88E68;
  background: #fdfbf8;
  box-shadow: 0 6px 22px rgba(68, 35, 5, 0.08);
  transform: translateX(3px);
}

.rate-package-box:hover::before {
  background: #B88E68;
}

.rate-package-box.selected {
  border: 2px solid #442305;
  background: linear-gradient(135deg, #fffdfa 0%, #faf3ec 100%);
  box-shadow: 0 8px 28px rgba(68, 35, 5, 0.12);
  transform: translateX(3px);
}

.rate-package-box.selected::before {
  background: #442305;
}

.rate-package-badge {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 7px;
}

.rate-badge-standard {
  background: #f1f5f9;
  color: #475569;
}

.rate-badge-popular {
  background: linear-gradient(135deg, #F4E2D8 0%, #fce8d8 100%);
  color: #442305;
  border: 1px solid rgba(184, 142, 104, 0.4);
}

.rate-badge-neupass {
  background: linear-gradient(135deg, #B88E68 0%, #442305 100%);
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(68, 35, 5, 0.2);
}

.rate-package-title {
  font-family: 'Cormorant Upright', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #442305;
  margin-bottom: 6px;
  line-height: 1.3;
}

.rate-package-features {
  font-size: 0.8rem;
  color: #64748b;
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.rate-package-features span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.rate-package-features i {
  color: #16a34a;
}

.rate-cancellation-text {
  font-size: 0.75rem;
  color: #16a34a;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 0;
}

.btn-select-rate {
  background: transparent;
  color: #442305;
  border: 2px solid #B88E68;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 9px 22px;
  border-radius: 8px;
  transition: all 0.28s ease;
  white-space: nowrap;
  cursor: pointer;
}

.btn-select-rate:hover {
  background: #442305;
  color: #F4E2D8;
  border-color: #442305;
  box-shadow: 0 5px 16px rgba(68, 35, 5, 0.25);
  transform: translateY(-1px);
}

.rate-package-box.selected .btn-select-rate {
  background: #16a34a;
  border-color: #16a34a;
  color: #ffffff;
  box-shadow: 0 5px 16px rgba(22, 163, 74, 0.3);
}

/* ── Inclusion Filter Pills ── */
.taj-inclusion-pill {
  background: #ffffff;
  border: 1.5px solid rgba(184, 142, 104, 0.3);
  color: #442305;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 50px;
  transition: all 0.25s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.3px;
}

.taj-inclusion-pill:hover {
  background: #faf8f5;
  border-color: #B88E68;
  box-shadow: 0 3px 10px rgba(184, 142, 104, 0.2);
  transform: translateY(-1px);
}

.taj-inclusion-pill.active {
  background: #442305;
  border-color: #442305;
  color: #F4E2D8;
  box-shadow: 0 4px 14px rgba(68, 35, 5, 0.28);
}

/* ── Villa / Suite Filter Pills ── */
.taj-villa-pills-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.taj-villa-pill {
  background: #ffffff;
  border: 1.5px solid rgba(184, 142, 104, 0.3);
  color: #442305;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.25s ease;
  letter-spacing: 0.2px;
}

.taj-villa-pill:hover {
  background: #faf8f5;
  border-color: #B88E68;
  box-shadow: 0 3px 10px rgba(184, 142, 104, 0.2);
}

.taj-villa-pill.active {
  background: #442305;
  border-color: #442305;
  color: #F4E2D8;
  box-shadow: 0 4px 14px rgba(68, 35, 5, 0.28);
}

/* ── Dual Mode Switcher Pill ── */
.taj-mode-switcher-pill {
  background: #f1ede8;
  border-radius: 50px;
  padding: 5px;
  display: inline-flex;
  align-items: center;
  border: 1.5px solid rgba(184, 142, 104, 0.35);
  box-shadow: 0 4px 14px rgba(68, 35, 5, 0.08);
}

.taj-mode-btn {
  background: transparent;
  color: #64748b;
  border: none;
  padding: 10px 28px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}

.taj-mode-btn.active {
  background: #442305;
  color: #F4E2D8;
  box-shadow: 0 5px 16px rgba(68, 35, 5, 0.3);
}

.taj-mode-btn:hover:not(.active) {
  background: rgba(68, 35, 5, 0.06);
  color: #442305;
}

/* ── Tax Toggle Checkbox ── */
.taj-tax-checkbox {
  width: 18px;
  height: 18px;
  accent-color: #442305;
  cursor: pointer;
  border-radius: 4px;
  border: 1.5px solid #B88E68;
}

/* ── YOUR STAY Sidebar Card ── */
.taj-your-stay-card {
  background: #ffffff;
  border: 1.5px solid rgba(184, 142, 104, 0.35);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(68, 35, 5, 0.09);
}

.taj-your-stay-header {
  background: linear-gradient(135deg, #442305 0%, #63360b 100%);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid #B88E68;
}

.taj-your-stay-body {
  padding: 20px;
}

.your-stay-room-toggle {
  background: #faf8f5;
  border: 1.5px solid rgba(184, 142, 104, 0.3);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-bottom: 16px;
  user-select: none;
}

.your-stay-room-toggle:hover {
  border-color: #B88E68;
  background: #fdf6f0;
}

/* ── Offer Package Cards (Taj 3-Column) ── */
.taj-offer-package-card {
  background: #ffffff;
  border: 1.5px solid rgba(184, 142, 104, 0.2);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 24px;
  transition: all 0.35s ease;
  box-shadow: 0 6px 24px rgba(68, 35, 5, 0.06);
}

.taj-offer-package-card:hover {
  border-color: #B88E68;
  box-shadow: 0 16px 44px rgba(68, 35, 5, 0.12);
  transform: translateY(-2px);
}

.taj-offer-package-card.selected {
  border-color: #B88E68 !important;
  box-shadow: 0 12px 36px rgba(68, 35, 5, 0.14) !important;
  background: #fffdfa !important;
}

.offer-card-img-col {
  border-right: 1px solid rgba(68, 35, 5, 0.07);
  background: #faf8f5;
}

.offer-card-img-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.offer-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.taj-offer-package-card:hover .offer-card-img-wrap img {
  transform: scale(1.06);
}

.offer-photo-icon-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  backdrop-filter: blur(4px);
}

.offer-photo-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
}

.offer-photo-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}

.offer-photo-dots .dot.active {
  background: #ffffff;
  width: 16px;
  border-radius: 3px;
}

.offer-room-specs {
  padding: 14px 16px;
}

.offer-room-details-link {
  color: #B88E68;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
  cursor: pointer;
}

.offer-room-details-link:hover {
  color: #442305;
  text-decoration: underline;
}

.offer-card-content-col {
  padding: 22px 20px;
  border-right: 1px solid rgba(68, 35, 5, 0.07);
}

.offer-room-title {
  font-family: 'Cormorant Upright', serif;
  font-size: 0.72rem;
  font-weight: 800;
  color: #B88E68;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.offer-package-name {
  font-family: 'Cormorant Upright', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #442305;
  margin-bottom: 10px;
  line-height: 1.35;
}

.offer-member-exclusive-pill {
  background: linear-gradient(135deg, #B88E68 0%, #8a6440 100%);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 3px 10px rgba(184, 142, 104, 0.35);
}

.bullet-diamond {
  color: #B88E68;
  font-size: 0.9rem;
  line-height: 1.2;
  flex-shrink: 0;
}

.offer-inclusions-list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  font-size: 0.8rem;
  color: #475569;
  line-height: 1.65;
}

.offer-inclusions-list li {
  margin-bottom: 5px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.offer-pkg-details-link {
  color: #B88E68;
  font-weight: 800;
  font-size: 0.8rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  transition: color 0.2s;
  cursor: pointer;
}

.offer-pkg-details-link:hover {
  color: #442305;
}

.offer-deposit-note {
  font-style: italic;
  font-size: 0.73rem;
  color: #64748b;
  margin-bottom: 0;
  border-top: 1px dashed rgba(184, 142, 104, 0.3);
  padding-top: 8px;
  margin-top: 4px;
}

.offer-card-rate-col {
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: linear-gradient(160deg, #fffdfa 0%, #faf8f5 100%);
}

.offer-nightly-price {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  color: #442305;
  line-height: 1.2;
}

.btn-offer-select {
  background: linear-gradient(135deg, #B88E68 0%, #9e7353 100%);
  color: #ffffff;
  border: none;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 11px 20px;
  border-radius: 8px;
  transition: all 0.28s ease;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(184, 142, 104, 0.35);
  width: 100%;
}

.btn-offer-select:hover {
  background: linear-gradient(135deg, #442305 0%, #63360b 100%);
  color: #F4E2D8;
  box-shadow: 0 6px 20px rgba(68, 35, 5, 0.3);
  transform: translateY(-1px);
}

.btn-offer-select.btn-offer-selected {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 5px 16px rgba(22, 163, 74, 0.35);
}

/* ── Sticky Reservation Cart Bar ── */
.taj-sticky-cart-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 2px solid #B88E68;
  box-shadow: 0 -10px 35px rgba(68, 35, 5, 0.14);
  padding: 14px 0;
  z-index: 1050;
  display: none;
  animation: slideUpCart 0.3s ease-out;
}

.taj-sticky-cart-bar.active {
  display: block;
}

@keyframes slideUpCart {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.btn-continue-booking {
  background: linear-gradient(135deg, #442305 0%, #63360b 100%);
  color: #F4E2D8 !important;
  border: 1.5px solid #B88E68;
  padding: 13px 34px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(68, 35, 5, 0.3);
  cursor: pointer;
}

.btn-continue-booking:hover {
  background: #B88E68;
  color: #ffffff !important;
  border-color: #B88E68;
  box-shadow: 0 8px 28px rgba(184, 142, 104, 0.5);
  transform: translateY(-2px);
}

/* ── Booking Summary Card ── */
.taj-booking-summary-card {
  background: #ffffff;
  border: 1.5px solid #B88E68;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 32px rgba(68, 35, 5, 0.08);
}

.taj-booking-summary-card .taj-summary-header {
  background: #faf8f5;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(184, 142, 104, 0.25);
}

.taj-booking-summary-card .taj-summary-body {
  padding: 22px;
}

/* ── Room Details Modal ── */
.taj-modal-header {
  background: linear-gradient(135deg, #442305 0%, #1e0d02 100%);
  padding: 22px 28px;
  border-bottom: 2px solid #B88E68;
}

.taj-modal-title {
  font-family: 'Cormorant Upright', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

#tajModalTabs .nav-link {
  color: #442305;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 18px;
  border-radius: 0;
  transition: all 0.2s ease;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

#tajModalTabs .nav-link.active {
  color: #B88E68;
  background: transparent;
  border-bottom: 3px solid #B88E68;
}

#tajModalTabs .nav-link:hover:not(.active) {
  background: #faf8f5;
  border-bottom-color: rgba(184, 142, 104, 0.4);
}

/* ── Best Rate Guarantee Banner ── */
.taj-best-rate-banner {
  background: linear-gradient(90deg, #faf8f5 0%, #fff9f6 100%);
  border: 1px solid rgba(184, 142, 104, 0.3);
  border-radius: 10px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
  box-shadow: 0 2px 10px rgba(68, 35, 5, 0.05);
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .room-card-gallery-col {
    border-right: none;
    border-bottom: 1px solid rgba(68, 35, 5, 0.07);
  }

  .offer-card-img-col,
  .offer-card-content-col {
    border-right: none;
    border-bottom: 1px solid rgba(68, 35, 5, 0.07);
  }

  .taj-landing-property-bar {
    top: 60px;
  }

  .taj-mode-btn {
    padding: 9px 18px;
    font-size: 0.75rem;
  }
}

@media (max-width: 767px) {
  .taj-mode-switcher-pill {
    width: 100%;
    justify-content: center;
  }

  .taj-mode-btn {
    flex: 1;
    text-align: center;
  }

  .offer-card-rate-col {
    border-top: 1px solid rgba(68, 35, 5, 0.07);
    padding: 18px;
  }

  .room-card-rates-col {
    padding: 20px 16px;
  }

  .room-card-gallery-col {
    padding: 20px 16px;
  }
}

/* ==========================================
   6-STEP BOOKING PROCESS STYLES (Booking.aspx)
   ========================================== */
.booking-step-container {
  background: #ffffff;
  border-radius: 16px;
  border: 1.5px solid rgba(184, 142, 104, 0.22);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(68, 35, 5, 0.04);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.booking-step-container:hover {
  border-color: rgba(184, 142, 104, 0.45);
  box-shadow: 0 6px 24px rgba(68, 35, 5, 0.08);
}

.booking-step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(68, 35, 5, 0.08);
}

.step-num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #442305 0%, #B88E68 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 3px 10px rgba(68, 35, 5, 0.25);
  flex-shrink: 0;
}

.booking-step-title {
  font-family: "Cormorant Upright", serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: #442305;
  margin: 0;
}

/* Step 2: Room Pick Cards */
.booking-room-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.booking-room-pick-card {
  border: 1.5px solid rgba(184, 142, 104, 0.25);
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}

.booking-room-pick-card:hover {
  border-color: #B88E68;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(68, 35, 5, 0.08);
}

.booking-room-pick-card.active {
  border: 2px solid #442305;
  background: linear-gradient(180deg, #fffdfa 0%, #faf3ec 100%);
  box-shadow: 0 6px 20px rgba(68, 35, 5, 0.14);
}

.booking-room-pick-card.active .room-pick-check-icon {
  background: #442305;
  color: #F4E2D8;
  border-color: #442305;
}

.booking-room-pick-card.active:hover {
  border-color: #b91c1c;
}

.booking-room-pick-card.active:hover .room-pick-check-icon {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #ffffff;
}

.room-pick-check-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: transparent;
  transition: all 0.2s ease;
  z-index: 2;
}

.room-pick-img-wrap {
  width: 100%;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}

.room-pick-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.booking-room-pick-card:hover .room-pick-img-wrap img {
  transform: scale(1.05);
}

.room-pick-title {
  font-family: "Cormorant Upright", serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #442305;
  margin-bottom: 4px;
  line-height: 1.25;
}

.room-pick-meta {
  font-size: 0.75rem;
  color: #64748b;
  margin-bottom: 8px;
}

.room-pick-price {
  font-size: 1.1rem;
  font-weight: 800;
  color: #442305;
  margin-top: auto;
}

.room-pick-price small {
  font-size: 0.72rem;
  font-weight: 400;
  color: #64748b;
}

/* Step 4: Booking Summary Box */
.booking-summary-table-box {
  background: #faf8f5;
  border: 1.5px solid rgba(184, 142, 104, 0.3);
  border-radius: 12px;
  padding: 18px 20px;
}

.summary-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(68, 35, 5, 0.12);
  font-size: 0.9rem;
}

.summary-data-row:last-child {
  border-bottom: none;
}

.summary-data-row.total-row {
  font-size: 1.15rem;
  font-weight: 800;
  color: #442305;
  border-top: 2px solid #442305;
  border-bottom: none;
  padding-top: 12px;
  margin-top: 6px;
}

/* Step 5: Terms Box */
.booking-terms-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
}

.booking-terms-box ul {
  padding-left: 20px;
  margin-bottom: 0;
  font-size: 0.84rem;
  color: #475569;
  line-height: 1.6;
}

/* Step 6: Confirm Button */
.btn-confirm-booking {
  background: linear-gradient(135deg, #442305 0%, #B88E68 100%);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 16px 28px;
  box-shadow: 0 6px 20px rgba(68, 35, 5, 0.25);
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-confirm-booking:hover {
  background: linear-gradient(135deg, #2a1401 0%, #9c734e 100%);
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(68, 35, 5, 0.35);
  transform: translateY(-2px);
}

/* ==========================================================================
   DINING & RESTAURANTS LUXURY SECTION (TAJ HOTELS INSPIRED)
   ========================================================================== */

.dining-venue-card {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(184, 142, 104, 0.22);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.dining-venue-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(68, 35, 5, 0.14);
}

.dining-venue-img-wrap {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.dining-venue-img-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}

.dining-venue-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

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

.dining-venue-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(44, 23, 5, 0.88);
  backdrop-filter: blur(6px);
  color: #F4E2D8;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(184, 142, 104, 0.4);
  z-index: 2;
}

/* Responsive showcase card styling for desktop vs mobile */
@media (min-width: 992px) {
  .dining-venue-card .row {
    align-items: stretch !important;
  }

  .dining-venue-card .col-lg-6:first-child {
    display: flex;
  }

  .dining-venue-card .dining-venue-img-wrap {
    height: 100% !important;
    min-height: 100% !important;
    width: 100%;
  }
}

@media (max-width: 991.98px) {
  .dining-venue-card {
    height: auto !important;
  }

  .dining-venue-card .dining-venue-img-wrap {
    height: 250px !important;
    min-height: 250px !important;
    max-height: 260px !important;
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .dining-venue-card .dining-venue-img-wrap {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
  }

  .dining-venue-card .p-4 {
    padding: 1.25rem 1rem !important;
  }

  .dining-venue-badge {
    top: 10px;
    left: 10px;
    font-size: 0.65rem;
    padding: 4px 10px;
    letter-spacing: 0.5px;
    max-width: calc(100% - 20px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.meal-timing-box {
  background: #ffffff;
  border: 1px solid rgba(184, 142, 104, 0.25);
  border-radius: 12px;
  padding: 24px 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  height: 100%;
}

.meal-timing-box:hover {
  transform: translateY(-4px);
  border-color: #B88E68;
  box-shadow: 0 10px 24px rgba(184, 142, 104, 0.18);
}

.meal-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(184, 142, 104, 0.12);
  color: #B88E68;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 14px;
  transition: background 0.3s ease, color 0.3s ease;
}

.meal-timing-box:hover .meal-icon-wrap {
  background: #442305;
  color: #F4E2D8;
}

.meal-time-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: #442305;
  background: #faf8f5;
  border: 1px solid rgba(184, 142, 104, 0.35);
  padding: 4px 10px;
  border-radius: 16px;
  margin-bottom: 10px;
}

/* ==========================================
   5-STAR LUXURY HOTEL DINING MENU STYLES
   ========================================== */
.menu-dish-card {
  background: #ffffff;
  border: 1.5px solid rgba(184, 142, 104, 0.28);
  border-radius: 18px;
  padding: 18px 20px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  height: 100%;
  display: flex;
  gap: 18px;
  align-items: center;
  box-shadow: 0 6px 20px rgba(68, 35, 5, 0.04);
  position: relative;
  overflow: hidden;
}

.menu-dish-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, #B88E68, #442305);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.menu-dish-card:hover {
  transform: translateY(-5px);
  border-color: #B88E68;
  box-shadow: 0 16px 36px rgba(68, 35, 5, 0.12);
}

.menu-dish-card:hover::before {
  opacity: 1;
}

.menu-dish-thumb {
  width: 130px;
  height: 130px;
  min-width: 130px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 6px 18px rgba(68, 35, 5, 0.12);
  border: 1.5px solid rgba(184, 142, 104, 0.35);
  background: #fdfbf7;
}

.menu-dish-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-dish-card:hover .menu-dish-img {
  transform: scale(1.1);
}

.menu-dish-content {
  flex: 1;
  min-width: 0;
}

.dish-title {
  font-family: 'Cormorant Upright', 'Playfair Display', serif !important;
  font-size: 1.32rem;
  font-weight: 700;
  color: #442305;
  margin-bottom: 3px;
  line-height: 1.25;
}

.dish-price {
  font-family: 'Playfair Display', serif;
  font-size: 1.22rem;
  font-weight: 800;
  color: #B88E68;
  white-space: nowrap;
}

.dish-desc {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.84rem;
  color: #555555;
  line-height: 1.5;
  margin-bottom: 6px;
}

.dish-pairing-note {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.77rem;
  color: #8c5d33;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #faf6f0;
  border: 1px dashed rgba(184, 142, 104, 0.45);
  padding: 3px 9px;
  border-radius: 6px;
}

/* 5-Star Dietary & Luxury Badges */
.badge-veg {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #86efac;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-nonveg {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fca5a5;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-chef-sig {
  background: linear-gradient(135deg, #442305 0%, #7b4414 100%);
  color: #F4E2D8;
  border: 1px solid #B88E68;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-spice {
  background: #fff8f0;
  color: #b45309;
  border: 1px solid #fde68a;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-vessel {
  background: #fdfaf5;
  color: #8c5d33;
  border: 1px solid rgba(184, 142, 104, 0.4);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-mocktail {
  background: #f0f9ff;
  color: #0369a1;
  border: 1px solid #bae6fd;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Menu Filter Tabs */
.btn-menu-filter {
  background: #ffffff;
  border: 1.5px solid rgba(184, 142, 104, 0.45);
  color: #442305;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 50px;
  transition: all 0.35s ease;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(68, 35, 5, 0.03);
}

.btn-menu-filter:hover {
  background: rgba(184, 142, 104, 0.14);
  border-color: #B88E68;
  color: #442305;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(68, 35, 5, 0.08);
}

.btn-menu-filter.active {
  background: linear-gradient(135deg, #442305 0%, #B88E68 100%) !important;
  color: #ffffff !important;
  border-color: #442305 !important;
  box-shadow: 0 8px 22px rgba(68, 35, 5, 0.28);
  transform: translateY(-2px);
}

@media (max-width: 575.98px) {
  .menu-dish-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .menu-dish-thumb {
    width: 100%;
    height: 180px;
  }
}