/* Fonts loaded in header via BaseHelper::googleFonts() – Cormorant Garamond + Jost */

/* ============================================================
   HANI HOTELS – REDESIGN OVERRIDE CSS
   Design: Modern Luxury Hotel | Navy + Gold + White
   Inspiration: miranda.botble.com – new visual identity
   ============================================================ */

/* ── 1. Design Tokens ────────────────────────────────────── */
:root {
  --gold:       #c9a96e;
  --gold-dark:  #a8854a;
  --navy:       #1b2d4f;
  --navy-dark:  #0f1c30;
  --navy-mid:   #243d6a;
  --cream:      #faf9f6;
  --off-white:  #f3f0eb;
  --border:     #e5dfd6;
  --text:       #6b6560;
  --heading:    #1a1a2a;
  --white:      #ffffff;

  /* Override Botble vars */
  --color-1st: #c9a96e;
}

/* ── 2. Base Typography ──────────────────────────────────── */
body {
  background-color: var(--white);
  color: var(--text);
  font-family: 'Jost', 'Archivo', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
}

h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  font-family: 'Cormorant Garamond', 'Old Standard TT', serif;
  color: var(--heading);
  font-weight: 400;
  line-height: 1.2;
}

h1 { font-size: 80px; }
h2 { font-size: 52px; }
h3 { font-size: 36px; }
h4 { font-size: 26px; }
h5 { font-size: 20px; }

a, a:hover { color: var(--gold); }

/* ── 4. Section Titles ───────────────────────────────────── */
.section-title {
  position: relative;
}
.section-title .title-tag {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  position: relative;
  padding-left: 44px;
}
.section-title .title-tag::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 34px;
  height: 1px;
  background: var(--gold);
  transform: translateY(-50%);
}
.section-title h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 52px;
  font-weight: 400;
  color: var(--heading);
  line-height: 1.15;
  margin-bottom: 0;
}

/* ── 5. Buttons ──────────────────────────────────────────── */
.main-btn {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  border-radius: 0;
  padding: 0 38px;
  line-height: 54px;
  display: inline-block;
  transition: all .35s ease;
}
.main-btn.btn-filled {
  background-color: var(--gold);
  color: var(--white) !important;
  border: 2px solid var(--gold);
}
.main-btn.btn-filled:hover {
  background-color: var(--navy);
  border-color: var(--navy);
  color: var(--white) !important;
}
.main-btn.btn-border {
  background-color: transparent;
  color: var(--white) !important;
  border: 2px solid rgba(255,255,255,.65);
}
.main-btn.btn-border:hover {
  background-color: var(--gold);
  border-color: var(--gold);
  color: var(--white) !important;
}
.main-btn.btn-navy {
  background-color: var(--navy);
  color: var(--white) !important;
  border: 2px solid var(--navy);
}
.main-btn.btn-navy:hover {
  background-color: var(--gold);
  border-color: var(--gold);
}

/* ── 6. Header ───────────────────────────────────────────── */
header.header-absolute {
  background: linear-gradient(180deg, rgba(15,28,48,.72) 0%, transparent 100%);
  top: 0;
  backdrop-filter: none;
  border-bottom: none;
}

header .nav-container {
  padding: 0 30px;
}

header .nav-container .site-logo img {
  max-width: 200px;
  max-height: 80px;
}

header .nav-container .menu-items ul li a {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  line-height: 90px;
  padding: 0 18px;
  position: relative;
  transition: color .3s ease;
}
header .nav-container .menu-items ul li a::after {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 18px;
  right: 18px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s ease;
}
header .nav-container .menu-items ul li:hover > a::after,
header .nav-container .menu-items ul li.active > a::after {
  transform: scaleX(1);
}
header .nav-container .menu-items ul li:hover > a,
header .nav-container .menu-items ul li.active > a {
  color: var(--gold);
}

/* Sticky header */
header.sticky-header.sticky-active {
  background: var(--navy-dark);
  box-shadow: 0 4px 30px rgba(15,28,48,.25);
}
header.sticky-header.sticky-active .nav-container .menu-items ul li a {
  color: var(--white);
  line-height: 80px;
}
header.sticky-header.sticky-active .nav-container .menu-items ul li a::after {
  bottom: 14px;
}
header.sticky-header.sticky-active.header-two .nav-container .toggle a,
header.sticky-header.sticky-active.header-two .nav-container .menu-items ul li a {
  color: var(--white);
}

/* Submenu */
header .nav-container .menu-items ul li .submenu {
  background: var(--navy-dark);
  border-top: 2px solid var(--gold);
  box-shadow: 0 20px 50px rgba(15,28,48,.35);
  border-radius: 0;
  padding: 8px 0;
  top: 110%;
}
header .nav-container .menu-items ul li .submenu li a {
  color: rgba(255,255,255,.8);
  font-size: 11px;
  line-height: 40px !important;
  padding: 0 24px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  letter-spacing: 1px;
}
header .nav-container .menu-items ul li .submenu li a::after {
  display: none;
}
header .nav-container .menu-items ul li .submenu li a:hover {
  color: var(--gold);
  background: rgba(255,255,255,.04);
}
header .nav-container .menu-items ul li:hover > .submenu {
  top: 100%;
}

/* Header toggle & info */
header .nav-container .toggle a {
  color: var(--white) !important;
  font-size: 22px;
}
header.header-two .nav-container .toggle a {
  color: var(--white) !important;
}
header .nav-container .header-info .item {
  color: var(--white);
}
header .nav-container .header-info .item a,
header .nav-container .header-info .item .title {
  color: var(--white);
}
header .nav-container .header-info .item i {
  background: var(--gold);
}

/* Navbar toggler (mobile) */
header .nav-container .navbar-toggler span {
  background-color: var(--white);
}

/* Mobile nav */
header .nav-container.breakpoint-on .nav-menu {
  background-color: var(--navy-dark);
}

/* Off-canvas */
.offcanvas-wrapper .offcanvas-widget {
  background: var(--navy-dark);
}
.offcanvas-wrapper .offcanvas-widget a.offcanvas-close {
  color: var(--gold);
}
.offcanvas-wrapper .offcanvas-widget .widget-title {
  color: var(--white);
}
.offcanvas-wrapper .offcanvas-widget .widget-title::before {
  background: var(--gold);
}
.offcanvas-wrapper .offcanvas-widget .widget {
  color: rgba(255,255,255,.7);
}
.offcanvas-wrapper .offcanvas-widget .widget.nav-widget ul li a {
  color: rgba(255,255,255,.75);
}
.offcanvas-wrapper .offcanvas-widget .widget.nav-widget ul li a:hover {
  color: var(--gold);
}
.offcanvas-wrapper .offcanvas-widget .widget.social-link ul li a {
  background: var(--gold);
}
.offcanvas-wrapper .offcanvas-widget .widget.social-link ul li a:hover {
  background: var(--white);
  color: var(--navy);
}
.offcanvas-wrapper .offcanvas-widget .widget.about-widget p {
  color: rgba(255,255,255,.65);
}

/* ── 7. Banner / Hero ────────────────────────────────────── */
.banner-area {
  position: relative;
}
.banner-area.banner-style-two {
  height: 100vh;
  min-height: 700px;
}
.single-banner {
  height: 100vh;
  min-height: 700px;
  position: relative;
  overflow: hidden;
}
.single-banner .banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 8s ease;
}
.slick-active .single-banner .banner-bg {
  transform: scale(1);
}
.banner-overly {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(15,28,48,.75) 0%,
    rgba(15,28,48,.55) 50%,
    rgba(15,28,48,.3) 100%
  );
  z-index: 1;
}
.single-banner .container {
  position: relative;
  z-index: 2;
}
.banner-content {
  text-align: center;
  padding-top: 80px;
}
.banner-content span.promo-tag {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
  position: relative;
  padding: 0 50px;
}
.banner-content span.promo-tag::before,
.banner-content span.promo-tag::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 38px;
  height: 1px;
  background: var(--gold);
  transform: translateY(-50%);
}
.banner-content span.promo-tag::before { left: 0; }
.banner-content span.promo-tag::after  { right: 0; }
.banner-content h1.title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 110px;
  font-weight: 300;
  color: var(--white);
  letter-spacing: -3px;
  line-height: 1.05;
  margin-bottom: 40px;
}
.banner-content h1.title em {
  font-style: italic;
  color: var(--gold);
}
.banner-content ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.banner-content ul li { display: inline-block; }

/* Banner slider dots */
.banner-area .slick-dots {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  list-style: none;
  display: flex !important;
  gap: 8px;
}
.banner-area .slick-dots li button {
  width: 28px;
  height: 3px;
  background: rgba(255,255,255,.4);
  border: none;
  font-size: 0;
  padding: 0;
  cursor: pointer;
  transition: background .3s, width .3s;
}
.banner-area .slick-dots li.slick-active button {
  background: var(--gold);
  width: 44px;
}

/* Responsive banner */
@media (max-width: 1199px) { .banner-content h1.title { font-size: 88px; } }
@media (max-width: 991px)  { .banner-content h1.title { font-size: 72px; letter-spacing: -2px; } }
@media (max-width: 767px)  { .banner-content h1.title { font-size: 54px; letter-spacing: -1px; } }
@media (max-width: 575px)  {
  .banner-content h1.title { font-size: 42px; letter-spacing: 0; }
  .banner-content span.promo-tag { font-size: 10px; letter-spacing: 3px; }
}

/* ── 8. Booking Form ─────────────────────────────────────── */
.booking-form.boxed-layout {
  position: relative;
  z-index: 10;
  margin-top: -60px;
  padding-bottom: 0;
}
.booking-form.boxed-layout .booking-form-inner {
  background: var(--white);
  box-shadow: 0 20px 80px rgba(15,28,48,.14);
  padding: 36px 44px;
  border-bottom: 3px solid var(--gold);
}
.booking-form .inputs-filed {
  position: relative;
}
.booking-form .inputs-filed label {
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 8px;
}
.booking-form .inputs-filed .icon {
  position: absolute;
  left: 16px;
  bottom: 20px;
  color: var(--gold);
  font-size: 14px;
  z-index: 2;
}
.booking-form .inputs-filed input,
.booking-form .inputs-filed select {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 0;
  height: 56px;
  padding: 0 16px 0 44px;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  color: var(--heading);
  width: 100%;
  transition: border-color .3s;
}
.booking-form .inputs-filed input:focus,
.booking-form .inputs-filed select:focus {
  border-color: var(--gold);
  outline: none;
  background: var(--white);
}
.booking-form .inputs-filed button[type="submit"] {
  width: 100%;
  height: 56px;
  background: var(--navy);
  color: var(--white);
  border: none;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s;
  margin-top: 24px;
}
.booking-form .inputs-filed button[type="submit"]:hover {
  background: var(--gold);
}
.booking-form .inputs-filed .nice-select {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 0;
  height: 56px;
  line-height: 56px;
  padding: 0 16px 0 44px;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  float: none;
  width: 100%;
}
.booking-form .inputs-filed .nice-select .list {
  border-radius: 0;
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(15,28,48,.1);
}

/* ── 9. About / Welcome Section ─────────────────────────── */
.about-section {
  background: var(--cream);
  position: relative;
}
.about-section .down-arrow-wrap a {
  width: 56px;
  height: 56px;
  border: 1px solid var(--border);
  border-radius: 50%;
  text-align: center;
  line-height: 56px;
  color: var(--gold);
  font-size: 18px;
  display: inline-block;
  margin-bottom: 50px;
  transition: all .3s;
}
.about-section .down-arrow-wrap a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}
.about-section .section-title.about-title h2 {
  font-size: 56px;
  max-width: 600px;
  margin: 0 auto;
}
.about-section .about-features {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  margin-top: 60px;
}
@media (max-width: 991px) {
  .about-section .about-features { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575px) {
  .about-section .about-features { grid-template-columns: repeat(2, 1fr); }
  .about-section .section-title.about-title h2 { font-size: 38px; }
}
.about-section .about-features li {
  display: block;
  margin-bottom: 0;
}
.about-section .about-features li a,
.about-section .about-features li div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px 40px;
  background: var(--white);
  border: 1px solid var(--border);
  transition: all .35s ease;
  color: var(--heading);
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
.about-section .about-features li a::before,
.about-section .about-features li div::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.about-section .about-features li a:hover,
.about-section .about-features li div:hover {
  background: var(--navy);
}
.about-section .about-features li a:hover::before,
.about-section .about-features li div:hover::before {
  transform: scaleX(1);
}
.about-section .about-features li a i,
.about-section .about-features li div i {
  font-size: 44px;
  color: var(--gold);
  margin-bottom: 16px;
  transition: color .3s;
  display: block;
}
.about-section .about-features li a img,
.about-section .about-features li div img {
  max-width: 48px;
  margin-bottom: 16px;
  filter: brightness(0) saturate(100%) invert(72%) sepia(31%) saturate(523%) hue-rotate(0deg) brightness(97%);
  transition: filter .3s;
}
.about-section .about-features li a:hover i,
.about-section .about-features li div:hover i {
  color: var(--white);
}
.about-section .about-features li a:hover img,
.about-section .about-features li div:hover img {
  filter: brightness(0) invert(1);
}
.about-section .about-features li .hover-icon { display: none; }
.about-section .about-features li a .title,
.about-section .about-features li div .title {
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--heading);
  padding-top: 0;
  transition: color .3s;
}
.about-section .about-features li a:hover .title,
.about-section .about-features li div:hover .title {
  color: rgba(255,255,255,.85);
}

/* ── 10. Core Features ───────────────────────────────────── */
.core-feature-section {
  background: var(--navy-dark);
  position: relative;
  overflow: hidden;
  padding: 90px 0;
}
.core-feature-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c9a96e' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.core-feature-section .section-title .title-tag,
.core-feature-section .section-title h2 {
  color: var(--white);
}
.core-feature-section .section-title .title-tag {
  color: var(--gold);
}
.core-feature-section .features-loop {
  margin-top: 60px;
}
.core-feature-section .feature-box {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 48px 36px 40px;
  position: relative;
  margin-bottom: 30px;
  transition: all .35s ease;
  overflow: hidden;
}
.core-feature-section .feature-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 0;
  background: var(--gold);
  transition: height .4s ease;
}
.core-feature-section .feature-box:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(201,169,110,.25);
  transform: translateY(-4px);
}
.core-feature-section .feature-box:hover::before {
  height: 100%;
}
.core-feature-section .feature-box .icon {
  margin-bottom: 24px;
}
.core-feature-section .feature-box .icon i {
  font-size: 48px;
  color: var(--gold);
}
.core-feature-section .feature-box .icon img {
  max-height: 56px;
  filter: brightness(0) saturate(100%) invert(72%) sepia(31%) saturate(523%) hue-rotate(0deg) brightness(97%);
}
.core-feature-section .feature-box h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  color: var(--white);
  margin-bottom: 12px;
}
.core-feature-section .feature-box p {
  color: rgba(255,255,255,.58);
  font-size: 15px;
  line-height: 1.7;
}
.core-feature-section .feature-box .count {
  position: absolute;
  bottom: 20px;
  right: 24px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 72px;
  font-weight: 700;
  color: rgba(255,255,255,.04);
  line-height: 1;
}

/* ── 11. Room Slider ─────────────────────────────────────── */
.room-slider {
  background: var(--cream);
  padding: 0;
  position: relative;
}
.room-slider .slider-img {
  height: 640px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.room-slider .slider-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(15,28,48,.55) 100%);
}
.room-slider .rooms-slider-one {
  margin: 0;
}
.room-slider .rooms-slider-one .col {
  padding: 0;
}
.rooms-content-wrap {
  background: var(--navy);
  padding: 60px 0;
}
.rooms-content-wrap .room-content-box {
  background: transparent;
  border: none;
  padding: 0;
}
.rooms-content-wrap .slider-count,
.rooms-content-wrap .slider-count-big {
  display: none;
}
.rooms-content-wrap .room-content-slider .single-content {
  padding: 0;
}
.rooms-content-wrap .room-content-slider .single-content .icon {
  margin-bottom: 20px;
}
.rooms-content-wrap .room-content-slider .single-content .icon i {
  font-size: 44px;
  color: var(--gold);
}
.rooms-content-wrap .room-content-slider .single-content h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  color: var(--white);
  margin-bottom: 16px;
}
.rooms-content-wrap .room-content-slider .single-content h3 a {
  color: var(--white);
  transition: color .3s;
}
.rooms-content-wrap .room-content-slider .single-content h3 a:hover {
  color: var(--gold);
}
.rooms-content-wrap .room-content-slider .single-content p {
  color: rgba(255,255,255,.6);
  font-size: 15px;
  line-height: 1.75;
}

/* ── 12. Room Grid (rooms listing page) ─────────────────── */
.room-gird-loop {
  padding: 80px 0;
  background: var(--cream);
}
.room-gird-loop .room-box {
  background: var(--white);
  border: 1px solid var(--border);
  margin-bottom: 30px;
  overflow: hidden;
  transition: box-shadow .35s, transform .35s;
  position: relative;
}
.room-gird-loop .room-box:hover {
  box-shadow: 0 20px 60px rgba(15,28,48,.12);
  transform: translateY(-4px);
}
.room-gird-loop .room-box .room-img {
  position: relative;
  overflow: hidden;
}
.room-gird-loop .room-box .room-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(15,28,48,.55) 0%, transparent 55%);
  z-index: 1;
  opacity: 0;
  transition: opacity .4s;
}
.room-gird-loop .room-box:hover .room-img::before {
  opacity: 1;
}
.room-gird-loop .room-box .room-img img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  transition: transform .55s ease;
}
.room-gird-loop .room-box:hover .room-img img {
  transform: scale(1.06);
}
.room-gird-loop .room-box .room-desc {
  padding: 28px 30px 32px;
}
.room-gird-loop .room-box .room-desc .price {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
  display: block;
}
.room-gird-loop .room-box .room-desc h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  color: var(--heading);
  margin-bottom: 12px;
  transition: color .3s;
}
.room-gird-loop .room-box .room-desc h4 a { color: var(--heading); }
.room-gird-loop .room-box:hover .room-desc h4 a { color: var(--gold); }
.room-gird-loop .room-box .room-desc p {
  font-size: 14px;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 20px;
}
.room-gird-loop .room-box .room-desc .room-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 18px;
  margin-top: 4px;
}
.room-gird-loop .room-box .room-desc .room-feature {
  display: flex;
  gap: 16px;
}
.room-gird-loop .room-box .room-desc .room-feature li {
  font-size: 12px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 5px;
}
.room-gird-loop .room-box .room-desc .room-feature li i {
  color: var(--gold);
  font-size: 13px;
}
.room-gird-loop .room-box .room-desc .main-btn {
  font-size: 10px;
  padding: 0 22px;
  line-height: 42px;
}

/* ── 13. Room Tab (intro section) ───────────────────────── */
.room-tab-area {
  background: var(--white);
  padding: 90px 0;
}
.room-tab-area .room-filter li {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 20px;
  cursor: pointer;
  border: 1px solid var(--border);
  margin: 4px;
  color: var(--text);
  transition: all .3s;
}
.room-tab-area .room-filter li.active,
.room-tab-area .room-filter li:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}

/* ── 14. Testimonials ────────────────────────────────────── */
.testimonial-section {
  background: var(--white);
  position: relative;
}
.testimonial-section::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 50%; height: 100%;
  background: var(--cream);
  z-index: 0;
}
.testimonial-section .container {
  position: relative;
  z-index: 1;
}
.testimonial-section .section-title h2 { font-size: 48px; }
.testimonial-box {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 40px 36px 36px;
  position: relative;
  margin-bottom: 30px;
  transition: box-shadow .35s, border-color .35s;
}
.testimonial-box:hover {
  box-shadow: 0 16px 50px rgba(15,28,48,.1);
  border-color: var(--gold);
}
.testimonial-box::before {
  content: '\201C';
  font-family: 'Cormorant Garamond', serif;
  font-size: 100px;
  color: var(--gold);
  opacity: .2;
  position: absolute;
  top: 10px;
  right: 24px;
  line-height: 1;
}
.testimonial-box .client-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
  border: 2px solid var(--gold);
}
.testimonial-box .client-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.testimonial-box .client-img .check {
  position: absolute;
  bottom: 0; right: 0;
  width: 20px; height: 20px;
  background: var(--gold);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}
.testimonial-box h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  color: var(--heading);
  margin-bottom: 4px;
}
.testimonial-box .clinet-post {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 20px;
}
.testimonial-box p {
  font-size: 15px;
  color: var(--text);
  line-height: 1.75;
  font-style: italic;
}

/* ── 15. Latest News ─────────────────────────────────────── */
.latest-news {
  background: var(--cream);
}
.latest-news .section-title h2 { font-size: 48px; }
.latest-post-box {
  background: var(--white);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 30px;
  transition: box-shadow .35s, transform .35s;
}
.latest-post-box:hover {
  box-shadow: 0 16px 50px rgba(15,28,48,.1);
  transform: translateY(-4px);
}
.latest-post-box .post-img {
  height: 240px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  transition: transform .5s ease;
}
.latest-post-box:hover .post-img {
  transform: scale(1.04);
}
.latest-post-box .post-desc {
  padding: 28px 28px 32px;
}
.latest-post-box .post-desc .post-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 14px;
}
.latest-post-box .post-desc .post-meta li a {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
}
.latest-post-box .post-desc .post-meta li a i {
  margin-right: 6px;
  font-size: 12px;
}
.latest-post-box .post-desc h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  margin-bottom: 12px;
  line-height: 1.3;
}
.latest-post-box .post-desc h4 a {
  color: var(--heading);
  transition: color .3s;
}
.latest-post-box .post-desc h4 a:hover { color: var(--gold); }
.latest-post-box .post-desc p {
  font-size: 14px;
  color: var(--text);
  line-height: 1.7;
}

/* ── 16. CTA / Call to Action ────────────────────────────── */
.cta-section {
  background: var(--navy);
  position: relative;
  overflow: hidden;
  padding: 90px 0;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, var(--gold) 0%, transparent 50%);
  opacity: .06;
}
.cta-section .section-title h2 { color: var(--white); }
.cta-section .section-title .title-tag { color: var(--gold); }
.cta-section p { color: rgba(255,255,255,.65); }
.cta-content .main-btn {
  margin-top: 30px;
}

/* ── 17. Breadcrumb ──────────────────────────────────────── */
.breadcrumb-area {
  margin-top: 0;
}
.breadcrumb-area::before {
  background-color: var(--navy-dark);
  opacity: .65;
}
.breadcrumb-area .breadcrumb-text h2.page-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 72px;
  font-weight: 300;
}
.breadcrumb-area .breadcrumb-text .breadcrumb-nav {
  background: var(--gold);
  padding: 16px 36px;
}
.breadcrumb-area .breadcrumb-text .breadcrumb-nav li,
.breadcrumb-area .breadcrumb-text .breadcrumb-nav a {
  color: var(--white);
}
.breadcrumb-area .breadcrumb-text .breadcrumb-nav li.active { color: var(--white); }

/* ── 18. Footer ──────────────────────────────────────────── */
.footer-two {
  position: relative;
}
.footer-widget-area {
  background: var(--navy-dark);
  position: relative;
}
.footer-widget-area::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.footer-widget-area .footer-logo img {
  max-height: 70px;
  opacity: .9;
}
.footer-widget-area p {
  color: rgba(255,255,255,.55);
  font-size: 14px;
  line-height: 1.8;
}
.footer-widget-area .social-links a {
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 0;
  line-height: 38px;
  text-align: center;
  color: rgba(255,255,255,.7);
  font-size: 14px;
  margin-right: 6px;
  display: inline-block;
  transition: all .3s;
}
.footer-widget-area .social-links a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}

/* Footer widgets */
.footer-widget-area .widget-title {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Contact Widget */
.footer-widget-area .contact-widget .widget-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--white);
  border: none;
  padding-bottom: 0;
  margin-bottom: 28px;
}
.footer-widget-area .contact-widget .contact-box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
}
.footer-widget-area .contact-widget .contact-box .icon {
  width: 42px;
  height: 42px;
  background: rgba(201,169,110,.15);
  border: 1px solid rgba(201,169,110,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--gold);
  font-size: 16px;
}
.footer-widget-area .contact-widget .contact-box .desc .title {
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
  display: block;
}
.footer-widget-area .contact-widget .contact-box .desc,
.footer-widget-area .contact-widget .contact-box .desc a {
  color: rgba(255,255,255,.6);
  font-size: 14px;
}
.footer-widget-area .contact-widget .contact-box .desc a:hover {
  color: var(--gold);
}

/* Footer sidebar widgets */
.footer-widget-area .widget {
  margin-bottom: 40px;
}
.footer-widget-area .widget ul li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.footer-widget-area .widget ul li a {
  color: rgba(255,255,255,.58);
  font-size: 14px;
  transition: color .3s, padding-left .3s;
  display: block;
}
.footer-widget-area .widget ul li a:hover {
  color: var(--gold);
  padding-left: 8px;
}

/* Footer widget text */
.footer-widget-area .textwidget,
.footer-widget-area .widget_text {
  color: rgba(255,255,255,.55);
  font-size: 14px;
  line-height: 1.8;
}
.footer-widget-area .widget h4,
.footer-widget-area .widget h5 {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Copyright */
.copyright-area {
  background: var(--navy-dark);
  border-top: 1px solid rgba(255,255,255,.07);
}
.copyright-area .copyright-text {
  color: rgba(255,255,255,.4);
  font-size: 13px;
}
.copyright-area .footer-menu ul li {
  display: inline-block;
}
.copyright-area .footer-menu ul li a {
  color: rgba(255,255,255,.4);
  font-size: 13px;
  margin-left: 20px;
  transition: color .3s;
}
.copyright-area .footer-menu ul li a:hover { color: var(--gold); }
.copyright-area .language-wrapper .btn-select-language {
  color: rgba(255,255,255,.5) !important;
}

/* ── 19. Back to top ─────────────────────────────────────── */
.back-to-top {
  width: 44px;
  height: 44px;
  background: var(--gold);
  color: var(--white);
  border: none;
  border-radius: 0;
  line-height: 44px;
  text-align: center;
  font-size: 18px;
  right: 30px;
  bottom: 30px;
  box-shadow: 0 4px 16px rgba(201,169,110,.4);
  transition: all .3s;
}
.back-to-top:hover {
  background: var(--navy);
  color: var(--white);
}

/* ── 20. Preloader ───────────────────────────────────────── */
.preloader {
  background: var(--navy-dark);
}
.cssload-loading i {
  background: var(--gold);
}

/* ── 21. Room Details ────────────────────────────────────── */
.room-details .deatils-box .title-wrap {
  background: var(--navy);
  padding: 40px;
}
.room-details .deatils-box .title-wrap h2 {
  color: var(--white);
  font-size: 42px;
}
.room-details .deatils-box .title-wrap .price {
  color: var(--gold);
}
.room-details .sidebar-widget {
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 36px;
}

/* ── 22. Contact ─────────────────────────────────────────── */
.contact-section,
.contact-page-section {
  background: var(--white);
}
.contact-section .contact-info-box {
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 40px;
}

/* ── 23. Gallery ─────────────────────────────────────────── */
.offers-gallery-area,
.gallery-section {
  background: var(--white);
}

/* ── 24. Subscibe / Newsletter ───────────────────────────── */
.subscribe-section {
  background: var(--gold);
}
.subscribe-section h2 {
  color: var(--white);
}
.subscribe-section form input {
  border: none;
  background: rgba(255,255,255,.2);
  color: var(--white);
}
.subscribe-section form input::placeholder { color: rgba(255,255,255,.7); }
.subscribe-section form button {
  background: var(--navy);
  color: var(--white);
}

/* ── 25. Restaurant / Food ───────────────────────────────── */
.restaurant-tab-area {
  background: var(--cream);
}
.food-box {
  background: var(--white);
  border: 1px solid var(--border);
  transition: box-shadow .35s;
}
.food-box:hover {
  box-shadow: 0 12px 40px rgba(15,28,48,.1);
}

/* ── 26. Pagination ──────────────────────────────────────── */
.pagination-wrap .pagination .page-item a,
.pagination-wrap .pagination .page-item .page-link {
  background: var(--cream);
  color: var(--heading);
  border: 1px solid var(--border);
  margin: 2px;
}
.pagination-wrap .pagination .page-item a:hover,
.pagination-wrap .pagination .page-item.active .page-link {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}

/* ── 27. Places ──────────────────────────────────────────── */
.places-area {
  background: var(--cream);
}
.place-box {
  position: relative;
  overflow: hidden;
}
.place-box .place-bg {
  height: 340px;
  background-size: cover;
  background-position: center;
  transition: transform .55s ease;
}
.place-box:hover .place-bg { transform: scale(1.06); }
.place-box .desc {
  background: var(--navy);
  padding: 24px 28px;
}
.place-box .desc h4 a { color: var(--white); }
.place-box .desc h4 a:hover { color: var(--gold); }

/* ── 28. Nice Select global ──────────────────────────────── */
.nice-select {
  border-radius: 0;
}
.nice-select .option:hover,
.nice-select .option.selected {
  color: var(--gold);
}

/* ── 29. Alert / Notification ────────────────────────────── */
#alert-container .alert.alert-success {
  background: #e8f7ee;
  color: #1e7a45;
  border-left: 3px solid #1e7a45;
}

/* ── 30. Offers / Our Offers ─────────────────────────────── */
.offers-area {
  background: var(--cream);
}
.offer-box {
  border: 1px solid var(--border);
  overflow: hidden;
  transition: box-shadow .35s;
}
.offer-box:hover {
  box-shadow: 0 16px 50px rgba(15,28,48,.1);
}

/* ── 31. Counter / Stats ─────────────────────────────────── */
.counter-section {
  background: var(--navy);
  padding: 80px 0;
}
.counter-section .count-box h2,
.counter-section .count-box .count-number {
  color: var(--white);
  font-family: 'Cormorant Garamond', serif;
  font-size: 72px;
  font-weight: 300;
}
.counter-section .count-box p {
  color: rgba(255,255,255,.55);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: 'Jost', sans-serif;
}
.counter-section .count-box i {
  color: var(--gold);
  font-size: 44px;
  margin-bottom: 16px;
}

/* ── 32. Decorative divider ──────────────────────────────── */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 20px auto;
  max-width: 200px;
}
.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.section-divider span {
  color: var(--gold);
  font-size: 14px;
}

/* ── 33. Booking form page ───────────────────────────────── */
.booking-form-body {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 48px 40px 36px;
  box-shadow: none;
}
.booking-form-body .left-line::before { background: var(--gold); }
.booking-form-body .inner-title a { color: var(--gold); }
.booking-form-body form label { color: var(--heading); }
.booking-form-body .booking-inner-body {
  background: var(--cream);
  border: 1px solid var(--border);
}
.booking-form-body .booking-inner-body form input,
.booking-form-body .booking-inner-body form .nice-select {
  background: var(--white);
  border: 1px solid var(--border);
}
.bookingtable .table thead th { border-color: var(--border); }
.success-btn { background: var(--gold); border-color: var(--gold); }

/* ── 34. Mobile menu / breakpoint ────────────────────────── */
@media (max-width: 991px) {
  header.sticky-header.sticky-active .nav-container .menu-items ul li a {
    line-height: 50px;
  }
  .about-section .about-features { grid-template-columns: repeat(3, 1fr); }
  .core-feature-section { padding: 70px 0; }
  .rooms-content-wrap { padding: 50px 0; }
  h2 { font-size: 38px; }
  .section-title h2 { font-size: 38px; }
  .testimonial-section::before { display: none; }
}
@media (max-width: 767px) {
  h1 { font-size: 52px; }
  h2 { font-size: 32px; }
  .section-title h2 { font-size: 32px; }
  .booking-form.boxed-layout { margin-top: 0; }
  .booking-form.boxed-layout .booking-form-inner { padding: 28px 20px; }
  .breadcrumb-area .breadcrumb-text h2.page-title { font-size: 44px; }
}
@media (max-width: 575px) {
  .about-section .about-features { grid-template-columns: repeat(2, 1fr); }
  .banner-content h1.title { font-size: 40px; letter-spacing: 0; }
  h2 { font-size: 28px; }
  .section-title h2 { font-size: 28px; }
}

/* ── 35. Admin bar adjustments ───────────────────────────── */
body.show-admin-bar header.header-absolute { top: 32px; }
body.show-admin-bar .breadcrumb-area { margin-top: 32px; }

/* ── 36. Room card – background image style ──────────────── */
.room-box .room-img-wrap {
  position: relative;
  overflow: hidden;
}
.room-box .room-img {
  display: block;
  height: 280px;
  background-size: cover;
  background-position: center;
  position: relative;
  transition: transform .55s ease;
}
.room-box:hover .room-img {
  transform: scale(1.05);
}
.room-box .room-img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(15,28,48,.5) 0%, transparent 55%);
  z-index: 1;
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.room-box:hover .room-img-wrap::before { opacity: 1; }
.room-price-badge {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: var(--gold);
  color: var(--white);
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 14px;
  z-index: 2;
  line-height: 1.4;
}
.room-price-badge small {
  font-size: 11px;
  opacity: .85;
  font-weight: 400;
}
.room-box .room-desc {
  padding: 24px 28px 30px;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: none;
}
.room-box .room-desc .icons {
  display: flex;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin-bottom: 16px;
}
.room-box .room-desc .icons li {
  font-size: 16px;
  color: var(--gold);
}
.room-box .room-desc .icons li i {
  color: var(--gold);
}
.room-box .room-desc .title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  margin-bottom: 10px;
}
.room-box .room-desc .title a {
  color: var(--heading);
  transition: color .3s;
}
.room-box .room-desc .title a:hover { color: var(--gold); }
.room-box .room-desc p {
  font-size: 14px;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 16px;
}
.room-box .room-desc .booking-button {
  background: var(--navy);
  color: var(--white) !important;
  border: 2px solid var(--navy);
  padding: 0 24px;
  line-height: 46px;
  font-size: 10px;
  letter-spacing: 2px;
  transition: all .3s;
  cursor: pointer;
}
.room-box .room-desc .booking-button:hover {
  background: var(--gold);
  border-color: var(--gold);
}

/* ── 37. CTA / Gallery / rooms-introduction ──────────────── */
.room-gallery-cta {
  background-size: cover;
  background-position: center;
  padding: 140px 0;
  position: relative;
}
.room-gallery-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15,28,48,.65);
}
.room-gallery-cta .container { position: relative; z-index: 2; }
.room-gallery-cta .cta-text span {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 16px;
}
.room-gallery-cta .cta-text h2 {
  color: var(--white);
  font-size: 60px;
  font-weight: 300;
  margin-bottom: 36px;
}
.room-gallery-cta .rotate-images { display: none; }

/* ── 38. Header – inner pages (non-homepage) ─────────────── */
header.inner-page {
  background: var(--navy-dark) !important;
  top: 0 !important;
}
header.inner-page .nav-container .menu-items ul li a {
  color: rgba(255,255,255,.85);
  line-height: 80px;
}
header.inner-page .nav-container .menu-items ul li a:hover,
header.inner-page .nav-container .menu-items ul li.active > a {
  color: var(--gold);
}
header.inner-page .nav-container .toggle a,
header.inner-page .nav-container .navbar-toggler span {
  color: var(--white) !important;
}
header.inner-page .nav-container .navbar-toggler span {
  background-color: var(--white) !important;
}

/* Breadcrumb margin when inner-page header is present */
.breadcrumb-area {
  margin-top: 80px;
}

header.header-two .nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── 39. Section spacing refinements ─────────────────────── */
.pt-115 { padding-top: 100px; }
.pb-115 { padding-bottom: 100px; }
.pt-120 { padding-top: 100px; }
.pb-120 { padding-bottom: 100px; }

/* ── 40. Page template – no sidebar ─────────────────────── */
.no-sidebar-content {
  background: var(--white);
}
.sidebar-widget .widget-title {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--navy);
  padding-bottom: 12px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--gold);
}

/* ── 41. Post / Blog page ───────────────────────────────── */
.post-details-content h2,
.post-details-content h3,
.post-details-content h4 {
  color: var(--heading);
}
.post-details-content a { color: var(--gold); }

/* ── 42. Slick slider arrows ─────────────────────────────── */
.slick-arrow {
  width: 48px;
  height: 48px;
  background: rgba(15,28,48,.6) !important;
  border: 1px solid rgba(201,169,110,.4);
  border-radius: 0 !important;
  color: var(--white) !important;
  z-index: 10;
  transition: background .3s !important;
}
.slick-arrow:hover {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
}
.slick-arrow::before {
  color: var(--white) !important;
  font-size: 18px !important;
}

/* ── 43. Input & form global ─────────────────────────────── */
input, select, textarea {
  background-color: var(--off-white);
  border: 1px solid var(--border);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--gold);
  background: var(--white);
}

/* ── 44. Rooms intro section ─────────────────────────────── */
.rooms-content-wrap {
  background: var(--navy);
}
.rooms-content-wrap .room-content-box {
  padding: 30px 0;
}

/* ── 45. Food / Restaurant tabs ──────────────────────────── */
.restaurant-tab-area .nav-tabs .nav-link {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0;
  margin: 4px;
  padding: 10px 22px;
  transition: all .3s;
}
.restaurant-tab-area .nav-tabs .nav-link.active,
.restaurant-tab-area .nav-tabs .nav-link:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}