/* ========================================
   GLOBAL
======================================== */

body {
  font-family: 'Segoe UI', sans-serif;

  background: #fff;

  color: #111;

  overflow-x: hidden;
}

section {
  overflow: hidden;
}


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

.navbar {
  padding: 18px 30px;

  background: #111 !important;
}

.navbar-brand {
  color: #d4af37 !important;

  font-size: 28px;

  letter-spacing: 1px;
}

.nav-link {
  color: white !important;

  margin-right: 18px;

  transition: 0.3s;

  font-weight: 500;
}

.nav-link:hover {
  color: #d4af37 !important;
}


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

.hero {
  height: 95vh;

  background:
    linear-gradient(rgba(0,0,0,0.55),
    rgba(0,0,0,0.55)),
    url('images/hero.jpg');

  background-size: cover;
  background-position: center;
}

.hero-box {
  background: rgba(0,0,0,0.35);

  padding: 55px;

  border-radius: 25px;

  backdrop-filter: blur(6px);

  max-width: 760px;

  box-shadow: 0 15px 40px rgba(0,0,0,0.25);
}

.title-gold {
  color: #d4af37;
}

.hero h1 {
  font-size: 65px;
}

.hero p {
  font-size: 20px;
}


/* ========================================
   INTRO SECTIONS
======================================== */

section h2 {
  font-size: 42px;

  margin-bottom: 25px;
}

section p {
  font-size: 17px;

  line-height: 1.9;
}


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

.booking-section {
  background: #f8f9fa;
}

.booking-box {
  background: white;

  padding: 45px;

  border-radius: 25px;

  max-width: 1000px;

  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.form-control {
  height: 55px;

  border-radius: 12px;
}


/* ========================================
   FEATURES
======================================== */

.features-section {
  background:
    linear-gradient(rgba(0,0,0,0.60),
    rgba(0,0,0,0.60)),
    url('images/features-bg.jpg');

  background-size: cover;
  background-position: center;
}

.feature-card {
  background: white;

  padding: 40px 30px;

  border-radius: 22px;

  transition: 0.35s;

  height: 100%;

  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
}

.feature-card:hover {
  transform: translateY(-8px);
}

.feature-icon {
  font-size: 52px;

  color: #d4af37;

  margin-bottom: 22px;
}

.feature-card h5 {
  margin-bottom: 15px;

  font-weight: 700;
}

.feature-card p {
  color: #444;
}


/* ========================================
   REVIEWS
======================================== */

.reviews-section {
  background: white;
}

.review-card {
  background: #fff;

  padding: 40px 30px;

  border-radius: 22px;

  box-shadow: 0 12px 30px rgba(0,0,0,0.08);

  transition: 0.35s;

  height: 100%;
}

.review-card:hover {
  transform: translateY(-8px);
}

.review-card p {
  color: #444;

  line-height: 1.8;

  font-size: 16px;
}

.review-card h6 {
  margin-top: 20px;

  color: #d4af37;

  font-weight: 700;
}


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

.accordion-item {
  border: none;

  border-radius: 14px;

  overflow: hidden;

  margin-bottom: 18px;

  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.accordion-button {
  padding: 20px;

  font-weight: 600;
}

.accordion-button:not(.collapsed) {
  background: #d4af37;

  color: black;
}


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

.btn-dark {
  background: #111;

  border: none;

  padding: 14px 34px;

  border-radius: 12px;

  transition: 0.3s;

  font-weight: 600;
}

.btn-dark:hover {
  background: #d4af37;

  color: black;
}


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

.footer-luxury {
  background: #111;

  color: white;
}

.footer-brand {
  color: #d4af37;

  font-size: 28px;
}

.footer-title {
  margin-bottom: 20px;
}

.footer-text {
  color: #bbb;

  line-height: 1.8;
}

.footer-links {
  list-style: none;

  padding: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  text-decoration: none;

  color: #bbb;

  transition: 0.3s;
}

.footer-links a:hover {
  color: #d4af37;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);

  color: #888;
}


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

@media(max-width:768px) {

  .hero {
    height: 75vh;
  }

  .hero h1 {
    font-size: 42px;
  }

  .hero-box {
    padding: 35px 25px;
  }

  section h2 {
    font-size: 32px;
  }

  .booking-box {
    padding: 30px 20px;
  }

  .feature-card,
  .review-card {
    padding: 30px 22px;
  }

}

/* ========================================
   ROOMS HERO
======================================== */

.rooms-hero {
  height: 65vh;

  background:
    linear-gradient(rgba(0,0,0,0.50),
    rgba(0,0,0,0.50)),
    url('images/rooms-hero.webp');

  background-size: cover;
  background-position: center;
}


/* HERO BOX */
.hero-box {
  background: rgba(0,0,0,0.35);

  padding: 45px;

  border-radius: 20px;

  backdrop-filter: blur(4px);

  max-width: 750px;
}


/* GOLD TITLE */
.title-gold {
  color: #d4af37;
}
/* ========================================
   STAY PAGE
======================================== */

.stay-hero {
  height: 65vh;

  background:
    linear-gradient(rgba(0,0,0,0.45),
    rgba(0,0,0,0.45)),
    url('images/stay-hero.png');

  background-size: cover;
  background-position: center;
}


/* HERO BOX */
.hero-box {
  background: rgba(0,0,0,0.35);

  padding: 45px;

  border-radius: 20px;

  backdrop-filter: blur(2px);

  max-width: 750px;
}


/* GOLD TITLE */
.title-gold {
  color: #d4af37;
}


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

.stay-card {
  background: white;

  padding: 40px 30px;

  border-radius: 20px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.08);

  transition: 0.3s;

  height: 100%;
}


.stay-card:hover {
  transform: translateY(-6px);
}


/* FEATURED CARD */
.featured {
  border: 2px solid #d4af37;
}


/* PRICE */
.stay-card h3 {
  font-size: 55px;
}


/* LIST */
.stay-card ul li {
  color: #555;

  font-size: 15px;
}


/* ========================================
   FEATURE ICONS
======================================== */

.feature-icon {
  font-size: 45px;

  color: #d4af37;

  margin-bottom: 20px;
}


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

.stay-img {
  border-radius: 20px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}


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

.btn-dark {
  background: #111;

  border: none;

  padding: 12px 30px;

  border-radius: 10px;

  transition: 0.3s;
}


.btn-dark:hover {
  background: #d4af37;

  color: black;
}


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

.footer-luxury {
  background: #111;

  color: white;
}


.footer-brand {
  color: #d4af37;
}


.footer-title {
  margin-bottom: 20px;
}


.footer-text {
  color: #bbb;
}


.footer-links {
  list-style: none;

  padding: 0;
}


.footer-links li {
  margin-bottom: 10px;
}


.footer-links a {
  text-decoration: none;

  color: #bbb;

  transition: 0.3s;
}


.footer-links a:hover {
  color: #d4af37;
}


.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);

  color: #888;
}


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

@media(max-width:768px) {

  .stay-hero {
    height: 55vh;
  }

  .hero-box {
    padding: 30px 20px;
  }

  .stay-card {
    padding: 30px 20px;
  }

}
/* ========================================
   LOCATION PAGE
======================================== */

.location-hero {
  height: 65vh;

  background:
    linear-gradient(rgba(0,0,0,0.45),
    rgba(0,0,0,0.45)),
    url('images/location-hero.png');

  background-size: cover;
  background-position: center;
}


/* HERO BOX */
.hero-box {
  background: rgba(0,0,0,0.35);

  padding: 45px;

  border-radius: 20px;

  backdrop-filter: blur(2px);

  max-width: 750px;
}


/* GOLD TITLE */
.title-gold {
  color: #d4af37;
}


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

.location-img {
  border-radius: 20px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}


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

.map-container {
  overflow: hidden;

  border-radius: 20px;
}


/* ========================================
   LOCATION BOXES
======================================== */

.location-box {
  background: white;

  padding: 35px 25px;

  border-radius: 18px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.08);

  transition: 0.3s;

  height: 100%;
}


.location-box:hover {
  transform: translateY(-6px);
}


/* ========================================
   FEATURE ICONS
======================================== */

.feature-icon {
  font-size: 45px;

  color: #d4af37;

  margin-bottom: 20px;
}


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

.btn-dark {
  background: #111;

  border: none;

  padding: 12px 30px;

  border-radius: 10px;

  transition: 0.3s;
}


.btn-dark:hover {
  background: #d4af37;

  color: black;
}


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

.footer-luxury {
  background: #111;

  color: white;
}


.footer-brand {
  color: #d4af37;
}


.footer-title {
  margin-bottom: 20px;
}


.footer-text {
  color: #bbb;
}


.footer-links {
  list-style: none;

  padding: 0;
}


.footer-links li {
  margin-bottom: 10px;
}


.footer-links a {
  text-decoration: none;

  color: #bbb;

  transition: 0.3s;
}


.footer-links a:hover {
  color: #d4af37;
}


.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);

  color: #888;
}


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

@media(max-width:768px) {

  .location-hero {
    height: 55vh;
  }

  .hero-box {
    padding: 30px 20px;
  }

  .location-box {
    padding: 30px 20px;
  }

}
/* ========================================
   GALLERY PAGE
======================================== */

.gallery-hero {
  height: 65vh;

  background:
    linear-gradient(rgba(0,0,0,0.45),
    rgba(0,0,0,0.45)),
    url('images/gallery-hero.png');

  background-size: cover;
  background-position: center;
}


/* HERO BOX */
.hero-box {
  background: rgba(0,0,0,0.35);

  padding: 45px;

  border-radius: 20px;

  backdrop-filter: blur(2px);

  max-width: 750px;
}


/* GOLD TITLE */
.title-gold {
  color: #d4af37;
}


/* ========================================
   GALLERY GRID
======================================== */

.gallery-img {
  width: 100%;

  height: 280px;

  object-fit: cover;

  border-radius: 18px;

  transition: 0.35s;

  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}


.gallery-img:hover {
  transform: scale(1.02);
}


/* LARGE IMAGE */
.large-img {
  height: 420px;
}


/* SIDE IMAGE */
.gallery-side-img {
  border-radius: 20px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}


/* ========================================
   EXPERIENCE SECTION
======================================== */

.experience-section {
  background: #f8f9fa;
}


/* ========================================
   FEATURE ICONS
======================================== */

.feature-icon {
  font-size: 45px;

  color: #d4af37;

  margin-bottom: 20px;
}


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

.btn-dark {
  background: #111;

  border: none;

  padding: 12px 30px;

  border-radius: 10px;

  transition: 0.3s;
}


.btn-dark:hover {
  background: #d4af37;

  color: black;
}


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

.footer-luxury {
  background: #111;

  color: white;
}


.footer-brand {
  color: #d4af37;
}


.footer-title {
  margin-bottom: 20px;
}


.footer-text {
  color: #bbb;
}


.footer-links {
  list-style: none;

  padding: 0;
}


.footer-links li {
  margin-bottom: 10px;
}


.footer-links a {
  text-decoration: none;

  color: #bbb;

  transition: 0.3s;
}


.footer-links a:hover {
  color: #d4af37;
}


.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);

  color: #888;
}


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

@media(max-width:768px) {

  .gallery-hero {
    height: 55vh;
  }

  .hero-box {
    padding: 30px 20px;
  }

  .gallery-img {
    height: 240px;
  }

  .large-img {
    height: 300px;
  }

}
/* ========================================
   AMENITIES PAGE
======================================== */

.amenities-hero {
  height: 65vh;

  background:
    linear-gradient(rgba(0,0,0,0.45),
    rgba(0,0,0,0.45)),
    url('images/amenities-hero.jpg');

  background-size: cover;
  background-position: center;
}


/* HERO BOX */
.hero-box {
  background: rgba(0,0,0,0.35);

  padding: 45px;

  border-radius: 20px;

  backdrop-filter: blur(2px);

  max-width: 750px;
}


/* GOLD TITLE */
.title-gold {
  color: #d4af37;
}


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

.amenity-card {
  background: white;

  padding: 40px 30px;

  border-radius: 20px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.08);

  transition: 0.3s;

  height: 100%;
}


.amenity-card:hover {
  transform: translateY(-6px);
}


/* ICONS */
.amenity-icon {
  font-size: 50px;

  color: #d4af37;

  margin-bottom: 25px;
}


/* ========================================
   FEATURE ICONS
======================================== */

.feature-icon {
  font-size: 45px;

  color: #d4af37;

  margin-bottom: 20px;
}


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

.amenities-img {
  border-radius: 20px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}


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

.btn-dark {
  background: #111;

  border: none;

  padding: 12px 30px;

  border-radius: 10px;

  transition: 0.3s;
}


.btn-dark:hover {
  background: #d4af37;

  color: black;
}


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

.footer-luxury {
  background: #111;

  color: white;
}


.footer-brand {
  color: #d4af37;
}


.footer-title {
  margin-bottom: 20px;
}


.footer-text {
  color: #bbb;
}


.footer-links {
  list-style: none;

  padding: 0;
}


.footer-links li {
  margin-bottom: 10px;
}


.footer-links a {
  text-decoration: none;

  color: #bbb;

  transition: 0.3s;
}


.footer-links a:hover {
  color: #d4af37;
}


.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);

  color: #888;
}


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

@media(max-width:768px) {

  .amenities-hero {
    height: 55vh;
  }

  .hero-box {
    padding: 30px 20px;
  }

  .amenity-card {
    padding: 30px 20px;
  }

}


/* Mobile fix for Stay Longer heading */
@media (max-width: 768px) {
  .stay-title {
    color: #222 !important;
  }
}

/*-------------booking.html-0------*/


.booking-hero{
height:50vh;

background:
linear-gradient(
rgba(0,0,0,.5),
rgba(0,0,0,.5)
),
url('images/booking-hero.png');

background-size:cover;
background-position:center;
}

.booking-form-box{

max-width:900px;

background:white;

padding:40px;

border-radius:20px;

box-shadow:
0 10px 30px
rgba(0,0,0,.1);
}

.booking-form-box label{
font-weight:600;
margin-bottom:5px;
}

.form-control{
border-radius:10px;
padding:12px;
}


/* -----flatpoickr for booking page to higlhight the reserved calender--

.flatpickr-day.flatpickr-disabled {
  background: #ffe5e5 !important;
  color: red !important;
  text-decoration: line-through;
  opacity: 1 !important;
} */
 /* BOOKED DATES */
/* BOOKED DATES */

.flatpickr-calendar .flatpickr-day.booked-date,
.flatpickr-calendar .flatpickr-day.booked-date.flatpickr-disabled {
  background: #dc3545 !important;
  color: #fff !important;
  border-color: #dc3545 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

.flatpickr-calendar .flatpickr-day.booked-date:hover,
.flatpickr-calendar .flatpickr-day.booked-date.flatpickr-disabled:hover {
  background: #dc3545 !important;
  color: #fff !important;
}