:root {
      --primary-gold: #c8a96a;
      --dark-bg: #0e0e0e;
      --light-bg: #fafafa;
      --text-dark: #1a1a1a;
      --text-muted: #666;
      overflow-x: hidden;
    }

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

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      overflow-x: hidden !important;
      padding-top: calc(var(--header-h) + env(safe-area-inset-top));
      a{
        text-decoration: none ;
      }
      
    }

/* ================== TOPBAR ================== */
/* ===============================
   Announcement 01 — Variables
================================= */
:root{
  --a01-bg: #0f0f0f;
  --a01-fg: #f3f3f3;
  --a01-dim: #cfcfcf;
  --a01-accent: #a67c52;       /* royal gold */
  --a01-link: #ffffff;
  --a01-link-hover: #ffffff;
  --a01-sep: rgba(255,255,255,.35);
  --a01-height: 44px;          /* base mobile height */
}

/* ===============================
   Base Bar
================================= */
.announcement-01{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)) , var(--a01-bg);
  color: var(--a01-fg);
  font-size: 0.95rem;
  line-height: 1;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-top: 30px;
}

.announcement-01 .announcement-01-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--a01-height);
  gap: 10px;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Left cluster */
.announcement-01-left{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.announcement-01-ico{ margin-right: 6px; font-size: 1rem; }

/* Links */
.announcement-01-phone,
.announcement-01-mail{
  color: var(--a01-link);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  transition: opacity .2s ease, color .2s ease;
}
.announcement-01-phone:hover,
.announcement-01-mail:hover{ color: var(--a01-link-hover); opacity: .9; }

.announcement-01-sep{ color: var(--a01-sep); padding: 0 4px; user-select: none; }

/* Right cluster (social) */
.announcement-01-right{
  display: flex;
  align-items: center;
  gap: 8px;
}
.announcement-01-social{
  --size: 34px;                /* bigger tap area on mobile */
  width: var(--size); height: var(--size);
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 999px;
  color: var(--a01-fg);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.announcement-01-social i{ font-size: 15px; line-height: 1; }
.announcement-01-social:hover{
  background: var(--a01-accent);
  color: #fff; border-color: transparent; transform: translateY(-1px);
}

/* ===============================
   Small Phones (<= 360px)
================================= */
@media (max-width: 360px){
  .announcement-01{ font-size: 0.88rem; }
  .announcement-01-social{ --size: 30px; }
}

/* ===============================
   Mobile (<= 575.98px)
   - stack columns
   - center content
   - handle long email gracefully
================================= */
@media (max-width: 575.98px){
  .announcement-01 .announcement-01-container{
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    display: none;
    text-align: center;
  }

  .announcement-01-left{
    justify-content: center;
    gap: 6px 10px;
  }

  .announcement-01-right{
    justify-content: center;
    gap: 10px;
  }

  .announcement-01-mail{
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .announcement-01-sep{ display: none; } /* remove dot on very small screens */
}

/* ===============================
   Tablet (576px–991.98px)
   - row layout
   - balanced spacing
================================= */
@media (min-width: 576px) and (max-width: 991.98px){
  :root{ --a01-height: 46px; }

  .announcement-01 .announcement-01-container{
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .announcement-01-left{
    gap: 10px;
  }

  .announcement-01-sep{ display: inline; }
}

/* ===============================
   Laptop / Desktop (>= 992px)
   - compact height
   - refined spacing
================================= */
@media (min-width: 992px){
  :root{ --a01-height: 42px; }
  .announcement-01{ font-size: 0.93rem; }
  .announcement-01 .announcement-01-container{ gap: 12px; }
  .announcement-01-left{ gap: 12px; }
  .announcement-01-social{ --size: 30px; }
}

/* ===============================
   Optional: top-fixed mode
   Add class "announcement-01-fixed" to fix at top
================================= */
.announcement-01-fixed{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1060;
  backdrop-filter: saturate(1.1) blur(6px);
}
.has-announcement-fixed{ padding-top: var(--a01-height); }

/* ===============================
   High-contrast focus (a11y)
================================= */
.announcement-01-phone:focus-visible,
.announcement-01-mail:focus-visible,
.announcement-01-social:focus-visible{
  outline: 2px solid var(--a01-accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* =============================================================== */
/* header  */
/* ========== Header 01 — Variables ========== */
:root{
  --h01-bg: #ffffff;
  --h01-text: #212529;
  --h01-muted: #6c757d;
  --h01-primary: #a67c52;        /* royal/gold vibe */
  --h01-primary-contrast: #ffffff;
  --h01-shadow: 0 8px 24px rgba(0,0,0,.08);
  --h01-border: rgba(0,0,0,.06);
  --h01-radius: 14px;
}

/* ========== Base Container ========== */
.header-01{
  position: relative;
  z-index: 1000;
  background: var(--h01-bg);
  border-bottom: 1px solid var(--h01-border);
}

:root{
  --h01-height: 72px;    /* default; matches your header approx */
  --a01-height: 0px;     /* set 44px if you have a fixed announcement bar */
}

/* Fixed header */
.header-01-fixed{
  position: fixed;
  inset: 0 0 auto 0;     /* shorthand for top:0; left:0; right:0 */
  z-index: 1050;
  background: var(--h01-bg);
  border-bottom: 1px solid var(--h01-border);
  backdrop-filter: saturate(1.1) blur(6px);
  transition: box-shadow .25s ease, background .25s ease;
}

/* Content offset so it doesn't hide behind header */
body{
  padding-top: calc(var(--a01-height) + var(--h01-height));
}

/* Nice shadow after slight scroll */
.header-01-fixed.scrolled{ box-shadow: var(--h01-shadow); }

/* Optional: shrink logo on desktop when scrolled */
@media (min-width: 992px){
  .header-01-fixed.scrolled .header-01-logo-img{ height: 38px; }
}


/* ========== Navbar ========== */
.header-01-navbar{
  padding-top: .6rem;
  padding-bottom: .6rem;
  background: transparent;
}

.header-01-container{
  display: flex;
  align-items: center;
}

/* ========== Logo ========== */
.header-01-logo{
  display: inline-flex;
  align-items: center;
}
.header-01-logo-img{
  height: 70px;                    /* good default */
  width: auto;
  object-fit: contain;
  transition: transform .25s ease;
}
.header-01-logo-img:hover{ transform: translateY(-1px); }

/* ========== Toggler (custom burger) ========== */
.header-01-toggler{
  border: none;
  padding: .25rem .5rem;
  box-shadow: none !important;
}
.header-01-burger{
  display: inline-block;
  width: 26px; height: 20px;
  position: relative;
}
.header-01-burger span{
  position: absolute; left: 0; right: 0;
  height: 2px; background: var(--h01-text);
  border-radius: 2px; transition: transform .3s ease, top .3s ease, opacity .2s ease, background .3s ease;
}
.header-01-burger span:nth-child(1){ top: 2px;  }
.header-01-burger span:nth-child(2){ top: 9px;  }
.header-01-burger span:nth-child(3){ top: 16px; }

/* Animate burger when expanded */
.header-01-toggler[aria-expanded="true"] .header-01-burger span:nth-child(1){
  top: 9px; transform: rotate(45deg);
}
.header-01-toggler[aria-expanded="true"] .header-01-burger span:nth-child(2){
  opacity: 0;
}
.header-01-toggler[aria-expanded="true"] .header-01-burger span:nth-child(3){
  top: 9px; transform: rotate(-45deg);
}

/* ========== Collapse / Menu ========== */
.header-01-collapse{
  /* smooth fade/slide feel on open */
  transition: opacity .25s ease;
}
.header-01-menu{
  gap: .25rem;
  align-items: center;
  padding-left: 0;
}

/* Items / Links */
.header-01-item{ list-style: none; }

.header-01-link{
  position: relative;
  display: inline-block;
  padding: .6rem .9rem;
  font-weight: 500;
  letter-spacing: .2px;
  color: var(--h01-text) !important;
  text-decoration: none !important;
  border-radius: 10px;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

/* Hover underline accent (desktop) */
@media (min-width: 992px){
  .header-01-link::after{
    content: "";
    position: absolute; left: 14px; right: 14px; bottom: 8px;
    height: 2px; transform: scaleX(0);
    background: var(--h01-primary);
    transform-origin: left;
    transition: transform .25s ease;
  }
  .header-01-link:hover::after{ transform: scaleX(1); }
}

/* Active / current page support */
.header-01-link.active,
.header-01-link[aria-current="page"]{
  color: var(--h01-primary) !important;
}
.header-01-link.active::after,
.header-01-link[aria-current="page"]::after{
  transform: scaleX(1);
}

/* CTA button style (Contact) */
.header-01-cta{
  background: var(--h01-primary);
  color: var(--h01-primary-contrast) !important;
  padding: .55rem 1rem;
  border-radius: 999px;
  box-shadow: var(--h01-shadow);
}
.header-01-cta:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* ========== Mobile / Tablet tweaks ========== */
@media (max-width: 991.98px){
  .header-01{
    box-shadow: var(--h01-shadow);
  }
  .header-01-collapse{
    background: var(--h01-bg);
    border-top: 1px solid var(--h01-border);
    border-bottom: 1px solid var(--h01-border);
    margin-top: .75rem;
    padding: .5rem;
    border-radius: var(--h01-radius);
  }
  .header-01-menu{
    padding: .25rem;
  }
  .header-01-link{
    width: 100%;
    border-radius: 8px;
    padding: .85rem .9rem;
  }
  .header-01-link:hover{
    background: rgba(166,124,82,.08);
  }
  .header-01-cta{
    width: 100%;
    text-align: center;
    margin-top: .25rem;
  }
}

/* ========== Accessibility focus ========== */
.header-01-link:focus-visible,
.header-01-toggler:focus-visible{
  outline: 2px solid var(--h01-primary);
  outline-offset: 2px;
  border-radius: 10px;
}

/* ========== Optional: shrink logo on scroll (sticky) ========== */
@media (min-width: 992px){
  .header-01-sticky{
    transition: box-shadow .25s ease, background .25s ease;
  }
  .header-01-sticky.is-scrolled{
    box-shadow: var(--h01-shadow);
  }
  .header-01-sticky.is-scrolled .header-01-logo-img{
    height: 38px;
  }
}
/* ===================================================================== */
/* whatsapp and contact button  */
.mdh-cta-dock {
  position: fixed;
  left: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 1000;
}

/* Call Button */
.mdh-cta-call {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #4CAF50, #45a049);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
  transition: all 0.3s ease;
  text-decoration: none;
  color: #fff;
}
.mdh-cta-call:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.6);
}
.mdh-cta-call:active { transform: translateY(-1px); }

/* WhatsApp Button */
.mdh-cta-wa {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
  transition: all 0.3s ease;
  text-decoration: none;
  color: #fff;
}
.mdh-cta-wa:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}
.mdh-cta-wa:active { transform: translateY(-1px); }

/* Icons */
.mdh-cta-ic {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* Pulse on hover */
@keyframes mdhCtaPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.mdh-cta-call:hover, .mdh-cta-wa:hover {
  animation: mdhCtaPulse 1s infinite;
}

/* Responsive */
@media (max-width: 768px) {
  .mdh-cta-dock { left: 15px; bottom: 15px; gap: 12px; }
  .mdh-cta-call, .mdh-cta-wa { width: 50px; height: 50px; }
  .mdh-cta-ic { width: 20px; height: 20px; }
}
@media (max-width: 480px) {
  .mdh-cta-dock { left: 10px; bottom: 10px; gap: 10px; }
  .mdh-cta-call, .mdh-cta-wa { width: 45px; height: 45px; }
  .mdh-cta-ic { width: 18px; height: 18px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .mdh-cta-dock { left: 25px; bottom: 25px; }
}

    /* ===== HERO SECTION ===== */
/* =========================
   Section 01 — Variables
========================= */
:root{
  --s01-bg1: #f5f7fa;
  --s01-bg2: #c3cfe2;
  --s01-text: #1f2328;
  --s01-muted: #6b7280;
  --s01-accent1: #7a5cff;    /* gradient accent */
  --s01-accent2: #23c8ff;
  --s01-gold: #a67c52;       /* royal gold */
  --s01-shadow: 0 20px 60px rgba(0,0,0,.15);
  --s01-soft-shadow: 0 10px 30px rgba(0,0,0,.10);
  --s01-photo-size: clamp(260px, 38vw, 460px); /* responsive circle */
}

/* =========================
   Base Section
========================= */
.section-01-hero{
  background: linear-gradient(135deg, var(--s01-bg1) 0%, var(--s01-bg2) 100%);
  padding:30px;
  color: var(--s01-text);
  position: relative;
  overflow: hidden;
}

/* =========================
   Left Content
========================= */
.section-01-content{ max-width: 680px; }

.section-01-title{
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.08;
  margin-bottom: 18px;
}
.section-01-title span{
  background: linear-gradient(90deg, var(--s01-accent1), var(--s01-accent2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.section-01-subtitle{
  color: var(--s01-muted);
  font-size: clamp(1rem, 1.8vw, 1.14rem);
  margin-bottom: 28px;
}

.section-01-cta .section-01-btn{
  padding: 12px 28px;
  border-radius: 999px;
  font-weight: 600;
  margin:5px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.section-01-cta .section-01-btn:hover{
  transform: translateY(-3px);
  box-shadow: var(--s01-soft-shadow);
}

.section-01-stats{ margin-top: 34px; }
.section-01-stat strong{
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  display: block;
}
.section-01-stat span{
  color: var(--s01-muted);
  font-size: .95rem;
}

/* =========================
   Right Visual
========================= */


/* container */
.section-01-visual{ display:grid; place-items:center; }

/* circle image holder */
.section-01-avatar-wrap{
  --s01-size: clamp(260px, 38vw, 460px);
  position: relative;
  width: var(--s01-size);
  height: var(--s01-size);
  border-radius: 50%;
  overflow: visible; /* arcs must sit outside */
}

/* image clipped to circle */
.section-01-avatar-img{
  width: 80%; height: 80%;
  object-fit: cover; display:block;
  border-radius: 50%;
  position: relative; z-index: 1;
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
}

/* SVG arcs positioned outside at the bottom */
.section-01-arcs{
  position: absolute; inset: 0;
  width: 80%; height: 80%;
  z-index: 2; pointer-events: none;
  /* Slightly bigger to sit outside the image edge */
  transform: scale(1.12);
  transform-origin: center;
  /* keep only bottom half visible (like screenshot) */
  clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.12));
}

/* Small screens: thinner lines look nicer */
@media (max-width: 575.98px){
  .section-01-arcs path{ stroke-width: 4.5; }
  .section-01-arcs{ transform: scale(1.08); }
}

/* ======================================================================================= */
    /* ===== ABOUT SECTION ===== */
    /* =========================
   About Banner 01 — Vars
========================= */
:root{
  --ab01-height: 50vh;              /* requested height */
  --ab01-img: url('about-hero.jpg');/* fallback image if not set from HTML */
  --ab01-overlay: rgba(0,0,0,.45);  /* overlay darkness */
  --ab01-text: #ffffff;
  --ab01-muted: rgba(255,255,255,.88);
}

/* =========================
   Base
========================= */
.about-banner-01{
  position: relative;
  min-height: var(--ab01-height);
  display: grid;
  align-items: center;

  /* Background image (from CSS var) */
  background-image:
    linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0)),
    var(--ab01-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  isolation: isolate;  /* overlay stays above bg only */
  overflow: hidden;
}

/* Dark overlay */
.about-banner-01__overlay{
  position: absolute;
  inset: 0;
  background: var(--ab01-overlay);
  z-index: 0;
}

/* Content wrapper */
.about-banner-01__inner{
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Title + breadcrumb */
.about-banner-01__title-wrap{
  color: var(--ab01-text);
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 0;
}

.about-banner-01__title{
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .2px;
  margin: 0 0 10px 0;
}

.about-banner-01__path{
  margin: 0;
  font-size: clamp(.95rem, 1.4vw, 1.05rem);
  color: var(--ab01-muted);
}
.about-banner-01__path a{
  color: var(--ab01-text);
  text-decoration: none;
  font-weight: 600;
}
.about-banner-01__path a:hover{ text-decoration: underline; }
.about-banner-01__path span{ opacity: .85; }

/* =========================
   Responsiveness
========================= */
/* Phones */
@media (max-width: 575.98px){
  .about-banner-01__title-wrap{ padding: 16px 0; }
  /* If focal point needs top bias on tall phones, uncomment:
     .about-banner-01{ background-position: center 30%; } */
}

/* Tablets */
@media (min-width: 576px) and (max-width: 991.98px){
  .about-banner-01__title-wrap{ padding: 20px 0; }
}

/* Desktops */
@media (min-width: 992px){
  .about-banner-01__title-wrap{ padding: 24px 0; }
}

/* =========================
   Optional: if a fixed header/topbar exists
   Add class 'about-banner-01--with-fixed-header' in HTML
   and ensure --h01-height / --a01-height are defined globally
========================= */
.about-banner-01.about-banner-01--with-fixed-header{
  padding-top: calc(var(--a01-height, 0px) + var(--h01-height, 0px));
}

    .about-section {
      padding: 50px 0;
      background: var(--light-bg);
    }

    .about-media {
      position: relative;
    }

    .about-media .about-big {
      width: 100%;
      border-radius: 15px;
      box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    }

    .about-media .about-small {
      position: absolute;
      right: -9px;
      bottom: -30px;
      width: 60%;
      border-radius: 15px;
      box-shadow: 0 15px 40px rgba(0,0,0,0.2);
      border: 5px solid #fff;
    }

    .about-content h2 {
      font-size: clamp(1.8rem, 4vw, 2.5rem);
      font-weight: 700;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .about-content h2 span {
      color: var(--primary-gold);
    }

    .about-content ul {
      list-style: none;
      padding: 0;
    }

    .about-content ul li {
      padding: 10px 0;
      padding-left: 30px;
      position: relative;
    }

    .about-content ul li:before {
      content: "✓";
      position: absolute;
      left: 0;
      color: var(--primary-gold);
      font-weight: bold;
      font-size: 1.2rem;
    }

    .about-cta .btn {
      padding: 12px 30px;
      border-radius: 50px;
      font-weight: 600;
      margin-right: 15px;
      margin-bottom: 10px;
      transition: all 0.3s;
    }

    /* ===== ROOMS SECTION ===== */
    .rooms-section {
      padding: 0px 0;
      background: #fff;
    }

    .room-card {
      background: #fff;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 5px 20px rgba(0,0,0,0.08);
      transition: all 0.3s ease;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .room-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    }

    .room-card .carousel-inner img {
      height: 250px;
      object-fit: cover;
    }

    .room-card .carousel-control-prev,
    .room-card .carousel-control-next {
      width: 40px;
      height: 40px;
      background: rgba(0,0,0,0.5);
      border-radius: 50%;
      top: 50%;
      transform: translateY(-50%);
      opacity: 0;
      transition: opacity 0.3s;
    }

    .room-card:hover .carousel-control-prev,
    .room-card:hover .carousel-control-next {
      opacity: 1;
    }

    .room-card .carousel-control-prev {
      left: 10px;
    }

    .room-card .carousel-control-next {
      right: 10px;
    }

    .room-content {
      padding: 25px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .room-title {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text-dark);
      margin-bottom: 0;
    }

    .room-badge {
      background: var(--primary-gold);
      color: #fff;
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
    }

    .room-badge.badge-premium {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .room-badge.badge-luxury {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

    .room-badge.badge-family {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }

    .room-badge.badge-romance {
      background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }

    .room-badge.badge-elite {
      background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
    }

    .room-price {
      margin: 15px 0;
    }

    .room-price .price {
      font-size: 2rem;
      font-weight: 800;
      color: var(--primary-gold);
    }

    .room-price .price-per {
      color: var(--text-muted);
      font-size: 0.9rem;
    }

    .room-amenities {
      list-style: none;
      padding: 0;
      margin: 0 0 20px 0;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    .room-amenities li {
      font-size: 0.9rem;
      color:rgb(0, 0, 0);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .room-amenities li i {
      color: rgb(0 0 0);
      font-size: 1rem;
    }

    .room-details {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      padding: 15px 0;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      flex-wrap: wrap;
    }

    .room-details span {
      font-size: 0.85rem;
      color: black;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .room-details i {
      color: rgb(0 0 0);
    }

    .btn-book {
      background: linear-gradient(135deg, var(--primary-gold) 0%, #b39559 100%);
      color: #fff;
      border: none;
      padding: 12px 30px;
      border-radius: 50px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: all 0.3s;
      margin-top: auto;
    }

    .btn-book:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(200, 169, 106, 0.4);
      color: #fff;
    }

    /* ===== OFFERS & PACKAGES SECTION ===== */
    .offers-section {
      padding: 10px 0;
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    }

    .offer-card {
      background: #fff;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      transition: all 0.4s ease;
      position: relative;
      margin-bottom: 30px;
    }

    .offer-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    }

    .offer-ribbon {
      position: absolute;
      top: 20px;
      right: -35px;
      background: var(--primary-gold);
      color: #fff;
      padding: 8px 40px;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      transform: rotate(45deg);
      z-index: 10;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
      letter-spacing: 1px;
    }

    .monsoon-ribbon {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .wedding-ribbon {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

    .honeymoon-ribbon {
      background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }

    .corporate-ribbon {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }

    .festival-ribbon {
      background: linear-gradient(135deg, #ff9a56 0%, #ff6a88 100%);
    }

    .offer-image {
      width: 100%;
      height: 100%;
      min-height: 300px;
      object-fit: cover;
      position: relative;
    }

    .offer-badge {
      position: absolute;
      bottom: 0px;
      left: 0px;
      background: rgba(0,0,0,0.8);
      color: #fff;
      padding: 10px 15px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      font-size: 0.85rem;
      backdrop-filter: blur(10px);
    }

    .offer-badge i {
      font-size: 1.1rem;
    }

    .seasonal-badge {
      background: linear-gradient(135deg, rgba(255,193,7,0.95), rgba(255,152,0,0.95));
    }

    .monsoon-badge {
      background: linear-gradient(135deg, rgba(102,126,234,0.95), rgba(118,75,162,0.95));
    }

    .wedding-badge {
      background: linear-gradient(135deg, rgba(240,147,251,0.95), rgba(245,87,108,0.95));
    }

    .honeymoon-badge {
      background: linear-gradient(135deg, rgba(250,112,154,0.95), rgba(254,225,64,0.95));
    }

    .corporate-badge {
      background: linear-gradient(135deg, rgba(79,172,254,0.95), rgba(0,242,254,0.95));
    }

    .festival-badge {
      background: linear-gradient(135deg, rgba(255,154,86,0.95), rgba(255,106,136,0.95));
    }

    .offer-content {
      padding: 30px;
    }

    .offer-title {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text-dark);
      margin-bottom: 15px;
    }

    .offer-description {
      color: var(--text-muted);
      font-size: 0.95rem;
      margin-bottom: 20px;
      line-height: 1.6;
    }

    .offer-features {
      list-style: none;
      padding: 0;
      margin: 0 0 25px 0;
    }

    .offer-features li {
      padding: 8px 0;
      color: #555;
      font-size: 0.9rem;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .offer-features i {
      color: #28a745;
      font-size: 1rem;
    }

    .offer-price-box {
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      padding: 20px;
      border-radius: 12px;
      margin-bottom: 20px;
    }

    .offer-discount {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .old-price {
      text-decoration: line-through;
      color: #999;
      font-size: 1rem;
    }

    .discount-tag {
      background: #dc3545;
      color: #fff;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 700;
    }

    .offer-new-price {
      font-size: 2.2rem;
      font-weight: 800;
      color: var(--primary-gold);
      line-height: 1;
      margin-bottom: 5px;
    }

    .offer-validity {
      color: #666;
      font-size: 0.85rem;
      font-style: italic;
    }

    .btn-offer {
      background: linear-gradient(135deg, var(--primary-gold) 0%, #b39559 100%);
      color: #fff;
      border: none;
      padding: 12px 30px;
      border-radius: 50px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      width: 100%;
      transition: all 0.3s;
      display: inline-block;
      text-align: center;
      text-decoration: none;
    }

    .btn-offer:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 25px rgba(200, 169, 106, 0.4);
      color: #fff;
    }

    .offers-cta {
      background: #fff;
      padding: 50px 30px;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

    .offers-cta h3 {
      font-size: 2rem;
      font-weight: 700;
      color: var(--text-dark);
    }

     /* Responsive */
    @media (max-width: 767px) {
      .offer-card .row {
        flex-direction: column;
      }

      .offer-image {
        min-height: 200px;
      }

      .offer-ribbon {
        font-size: 0.65rem;
        padding: 6px 35px;
      }

      .offer-title {
        font-size: 1.3rem;
      }

      .offer-new-price {
        font-size: 1.8rem;
      }

      .offers-cta h3 {
        font-size: 1.5rem;
      }
      .main-header{
        top: 0 !important;
      }
      .topbar{
        display: none;
      }
      .hero-section {
      padding: 60px 0;
    }
    }

    /* ===== VENUE SECTION ===== */
    .venue-section {
      padding: 10px 0;
      background: #fff;
    }

    .section-title {
      text-align: center;
      font-size: clamp(1.6rem, 4vw, 2.8rem);
      font-weight: 700;
      margin-bottom:10px;
      color: var(--text-dark);
    }

    .section-title span {
      color: var(--primary-gold);
    }

    .venue-card {
      background: #fff;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      transition: transform 0.3s, box-shadow 0.3s;
      margin-bottom: 30px;
    }

    .venue-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    }

    .venue-card img {
      width: 100%;
      height: 250px;
      object-fit: cover;
    }

    .venue-card h3 {
      padding: 20px;
      text-align: center;
      font-weight: 600;
      letter-spacing: 2px;
      color: var(--text-dark);
    }

    /* ===== FOOTER ===== */
    .footer {
      background: var(--dark-bg);
      color: #f2f2f2;
      padding: 60px 0 20px;
    }

    .footer-logo {
      font-size: 2rem;
      font-weight: 800;
      color: #fff;
      text-decoration: none;
      letter-spacing: 2px;
    }

    .footer-about-text {
      color: #ddd;
      font-size: 0.95rem;
      line-height: 1.7;
      margin-bottom: 20px;
    }

    .social-icons-footer {
      margin-bottom: 25px;
    }

    .social-icons-footer a {
      display: inline-block;
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 50%;
      color: #fff;
      margin-right: 10px;
      transition: 0.3s;
    }

    .social-icons-footer a:hover {
      background: var(--primary-gold);
      border-color: var(--primary-gold);
      transform: translateY(-3px);
    }

    .newsletter-title {
      font-size: 0.9rem;
      font-weight: 600;
      letter-spacing: 0.5px;
    }

    .footer-contact-info {
      margin-bottom: 30px;
    }

    .contact-item {
      display: contents;
      gap: 15px;
      align-items: flex-start;
    
    }

    .contact-item i {
      color: var(--primary-gold);
      font-size: 1.2rem;
      margin-top: 28px;
      min-width: 20px;
      flex-shrink: 0;
    }

    .contact-item p {
      color: #ddd;
      font-size: 0.95rem;
      line-height: 1.6;
      margin-bottom: 0;
    }
    
    .contact-item .small {
      font-size: 0.8rem;
      margin-bottom: 3px;
    }

    .contact-link {
      color: #fff;
      text-decoration: none;
      font-size: 0.95rem;
      display: inline-block;
      transition: color 0.3s ease;
    }

    .contact-link:hover {
      color: var(--primary-gold);
    }

    .footer-subscribe input {
      background: transparent;
      border: none;
      border-bottom: 1px solid rgba(255,255,255,0.3);
      color: #fff;
      padding: 10px 0;
      margin-right: 10px;
      flex: 1;
    }

    .footer-subscribe input::placeholder {
      color: #aaa;
    }

    .footer-subscribe button {
      background: var(--primary-gold);
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      font-weight: 600;
      cursor: pointer;
      transition: 0.3s;
      min-width: 50px;
    }

    .footer-subscribe button:hover {
      background: #b39559;
      transform: translateY(-2px);
    }

    .footer-subscribe button i {
      font-size: 1rem;
    }
    .text-muted{
      color: rgb(0, 0, 0);
    }
    
    .footer-links {
      list-style: none;
      padding: 0;
    }

    .footer-links li {
      margin: 8px 0;
    }

    .footer-links a {
      color: #ddd;
      text-decoration: none;
      transition: 0.3s;
    }

    .footer-links a:hover {
      color: var(--primary-gold);
      padding-left: 5px;
    }

    .social-icons-footer a {
      display: inline-block;
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 50%;
      color: #fff;
      margin-right: 10px;
      transition: 0.3s;
    }

    .social-icons-footer a:hover {
      background: var(--primary-gold);
      border-color: var(--primary-gold);
      transform: translateY(-3px);
    }

    .footer-bottom {
      
      /* margin-top: 40px;
      padding-top: 20px; */
      text-align: center;
    }

    .footer-bottom a {
      color: #ddd;
      margin: 0 10px;
      text-decoration: none;
    }

    .footer-bottom a:hover {
      color: var(--primary-gold);
    }
   
    /* / ===== RESPONSIVE ===== */ 
     @media (max-width: 991px) {
      .hero-section {
        padding: 60px 0;
      }

      .about-media .about-small {
        right: 10px;
        bottom: 10px;
        width: 50%;
      }
    }

    @media (max-width: 767px) {
      .topbar .d-flex {
        flex-direction: column;
        text-align: center;
        gap: 10px;
      }

      .hero__cta .btn {
        margin-bottom: 10px;
      }

      .about-media .about-small {
        position: static;
        width: 100%;
        margin-top: 20px;
      }

      .venue-card img {
        height: 200px;
      }

       .footer{
      text-align: center;
    }
    } 

   

    hr {
    color: inherit;
    border: 0;
    border-top: var(--bs-border-width) solid;
    opacity: 5000;
    }

    /* /////////////////////////////// for active class /////////////////// */
    :root { --h01-primary:#b8860b; }

.header-01-link { position:relative; text-decoration:none; }

.header-01-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--h01-primary); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}

.header-01-link.active,
.header-01-link[aria-current="page"]{
  color:var(--h01-primary) !important;
}
.header-01-link.active::after,
.header-01-link[aria-current="page"]::after{
  transform:scaleX(1);
}