@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&family=Italiana&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@500;600;700&display=swap');

/* =====================================================
   RESET & BASE
===================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  line-height: 1.6;
  color: #222;
}

img {
  max-width: 100%;
  display: block;
}

/* =====================================================
   NAVBAR + TOGGLE MENU
===================================================== */
/* =========================
   NAVBAR
========================= */
/* =========================
   NAVBAR
========================= */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 120px;
  padding: 0 15px;
  background: #fbf7f2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img {
  height: 180px;
}

/* HAMBURGER */
.hamburger {
  font-size: 36px;
  cursor: pointer;
  display: none;
  user-select: none;
  z-index: 1001;
}

/* DESKTOP MENU */
#navMenu {
  list-style: none;
  display: flex;
  gap: 30px;
}

#navMenu li a {
  text-decoration: none;
  color: #000;
  font-size: 20px;
}

/* OVERLAY */
#overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: none;
  z-index: 998;
}

/* =========================
   MOBILE MENU (FINAL)
========================= */
@media (max-width: 768px) {

  .hamburger {
    display: block;
  }

  #navMenu {
    position: fixed;
    top: 90px;                 /* below navbar */
    right: -260px;
    width: 220px;              /* LIMITED WIDTH */
    background: #2f2f2f;
    flex-direction: column;
    padding: 18px 16px;
    gap: 14px;

    border-radius: 12px 0 0 12px;
    box-shadow: -10px 0 25px rgba(0,0,0,0.35);

    transition: right 0.35s ease;
    z-index: 999;
  }

  #navMenu.active {
    right: 10px;
  }

  #navMenu li a {
    color: #fff;
    font-size: 17px;
    display: block;
  }
  .logo {
  margin-right: auto;
}

.logo img {
  height: 150px;
  margin-left: 0;
}
}

/* =====================================================
   HERO SLIDER
===================================================== */
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.slides {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s;
}

.slides.active {
  opacity: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  background: rgba(0,0,0,0.5);

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

  color: #fff;
  text-align: center;
}

.hero-content h1 {
  font-size: 48px;
}

.hero-content p {
  margin: 10px 0 20px;
}

.btn {
  display: inline-block;
  padding: 12px 28px;
  margin: 6px;
  text-decoration: none;
  font-weight: 600;
}

.primary {
  background: #ff9800;
  color: #fff;
}

.secondary {
  border: 2px solid #fff;
  color: #fff;
}

/* MOBILE HERO */
@media (max-width: 768px) {
  .hero {
    height: 60vh;
  }

  .hero-content h1 {
    font-size: 28px;
  }
}

/* =====================================================
   PREMIUM TITLES
===================================================== */
.premium-title {
  text-align: center;
  font-size: 48px;
  margin: 80px 20px 50px;
}

.premium-title span {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  letter-spacing: 2px;
  color: #777;
}

.premium-title.light {
  color: #222;
}

/* =====================================================
   ZIG-ZAG FEATURE SECTIONS
===================================================== */
.feature-section {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  min-height: 60vh;
}

.feature-section.reverse {
  grid-template-columns: 1.2fr 1fr;
}

.feature-content {
  padding: 80px 60px;
}

.feature-content h2 {
  font-size: 42px;
  margin-bottom: 25px;
}

.feature-content p {
  font-size: 17px;
  color: #555;
  max-width: 520px;
}

.feature-btn {
  display: inline-block;
  margin-top: 30px;
  padding: 14px 32px;
  background: #111;
  color: #fff;
  text-decoration: none;
}

.feature-image {
  position: relative;
}

.feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vertical-label {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: rotate(-90deg) translateY(-50%);
  background: #000;
  color: #fff;
  padding: 10px 18px;
  font-size: 13px;
  letter-spacing: 2px;
}

/* MOBILE ZIG-ZAG */
@media (max-width: 900px) {
  .feature-section,
  .feature-section.reverse {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .feature-content {
    padding: 40px 25px;
  }

  .feature-image {
    height: 280px;
  }

  .vertical-label {
    display: none;
  }
}

/* =====================================================
   SERVICES / WHY CHOOSE
===================================================== */
.services {
  padding: 80px 20px;
  text-align: center;
}

.services-grid {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

.service-card {
  padding: 40px 20px;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.service-card .icon {
  font-size: 48px;
  color: #28b463;
  margin-bottom: 15px;
}

/* =====================================================
   CONTACT BAR
===================================================== */
.index-contact {
  max-width: 1200px;
  margin: 40px auto;
  padding: 25px 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}

.contact-item {
  display: flex;
  gap: 12px;
}

.contact-icon {
  width: 30px;
  height: 30px;
  background: #f2f2f2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.index-social-icons {
  grid-column: span 3;
  display: flex;
  justify-content: center;
  gap: 15px;
}

.index-social-icons a {
  width: 36px;
  height: 36px;
  background: #f2f2f2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* MOBILE CONTACT */
@media (max-width: 768px) {
  .index-contact {
    grid-template-columns: 1fr;
  }

  .index-social-icons {
    grid-column: span 1;
  }
}

/* =====================================================
   FLOATING BUTTONS
===================================================== */
.call-btn,
.whatsapp-btn {
  position: fixed;
  bottom: 20px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.call-btn { left: 20px; }
.whatsapp-btn { right: 20px; }

/* =====================================================
   FOOTER
===================================================== */
footer {
  background: #222;
  color: #fff;
  text-align: center;
  padding: 20px;
}
.slider-container {
  max-width: 1200px;
  margin: auto;
  position: relative;
  overflow: hidden;
}

.slider {
  display: flex;
  transition: transform 0.6s ease;
}

.slide {
  min-width: 33.33%;
  padding: 0 15px;
}

.slide img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 6px 6px 0 0;
}

.content {
  background: #fff;
  padding: 20px;
  text-align: center;
  border: 1px solid #eee;
}

@media (max-width: 900px) {
  .slide {
    min-width: 100%;
  }
}
.check-list,
.activity-list {
  list-style: none;
  padding-left: 0;
}

.check-list li,
.activity-list li {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 17px;
}

.check svg {
  width: 16px;
  height: 16px;
  stroke: green;
  stroke-width: 3;
  fill: none;
}
.contact-unified {
  max-width: 1200px;
  margin: 80px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.contact-left,
.contact-right {
  padding: 40px;
}

@media (max-width: 900px) {
  .contact-unified {
    grid-template-columns: 1fr;
  }
}
.policy-wrapper {
  max-width: 900px;
  margin: 80px auto;
  padding: 0 20px;
  line-height: 1.8;
}

.policy-wrapper h1 {
  font-size: 30px;
  margin-bottom: 20px;
}

.policy-wrapper h2 {
  margin-top: 30px;
  font-size: 20px;
}
/* ===============================
   ACTIVITIES SECTION
================================ */
.activities {
  padding: 100px 20px;
  background: #fff;
}

.section-title {
  font-size: 52px;
  font-weight: 700;
  color: #00a9c7;
  text-align: center;
  margin-bottom: 60px;
}

/* SLIDER */
.slider-container {
  position: relative;
  max-width: 1200px;
  margin: auto;
  overflow: hidden;
}

.slider {
  display: flex;
  transition: transform 0.6s ease;
}

.slide {
  min-width: 33.33%;
  box-sizing: border-box;
  padding: 0 15px;
}

.slide img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 6px 6px 0 0;
}

.slide .content {
  background: #fff;
  padding: 25px;
  border: 1px solid #dfe6c3;
  text-align: center;
}

.slide .content h3 {
  font-size: 26px;
  margin-bottom: 15px;
  font-family: serif;
}

.slide .content p {
  font-size: 15px;
  line-height: 1.7;
  color: #444;
}

.slide .btn {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 25px;
  background: #9bb61b;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

/* NAV BUTTONS */
.nav {
  position: absolute;
  top: 40%;
  background: #4eabf3;
  color: #fff;
  border: none;
  padding: 15px;
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
}

.prev { left: 0; }
.next { right: 0; }

/* MOBILE */
@media (max-width: 900px) {
  .slide {
    min-width: 100%;
  }
}
/* ===============================
   WHY CHOOSE US
================================ */
.why-choose {
  padding: 100px 40px;
  background: #fff;
}

.why-container {
  max-width: 1300px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 50px;
  align-items: center;
}

/* LEFT TEXT */
.why-text h2 {
  font-size: 36px;
  margin-bottom: 25px;
  font-family: serif;
}

.why-text p {
  font-size: 16px;
  line-height: 1.8;
  color: #444;
}

/* RIGHT CARDS */
.why-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.why-card {
  height: 260px;
  background-size: cover;
  background-position: center;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}

/* DARK OVERLAY */
.why-card .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
}

.why-card .icon {
  font-size: 40px;
  color: #28b463;
  margin-bottom: 15px;
}

.why-card h3 {
  font-size: 22px;
  font-weight: 600;
}

/* MOBILE */
@media (max-width: 900px) {
  .why-container {
    grid-template-columns: 1fr;
  }

  .why-cards {
    grid-template-columns: 1fr;
  }
}
/* ===============================
   INDEX CONTACT SECTION
================================ */
/* LOGO + PHONE SIDE BY SIDE */
.index-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 40px;
  background: #fff;
}

/* LOGO */
.index-contact .logo img {
  height: 110px;
}

/* PHONE BLOCK */
.contact-item {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* ICON */
.contact-icon {
  width: 45px;
  height: 45px;
  background: #f2f2f2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-details h3 {
  font-size: 18px;
  margin-bottom: 6px;
}

.contact-details p {
  font-size: 15px;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .index-contact {
    flex-direction: column;
    text-align: center;
  }

  .contact-item {
    justify-content: center;
  }
}
/* ===============================
   SOCIAL MEDIA ICONS
================================ */

.index-social-icons {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 25px;
}

/* ICON BASE */
.index-social-icons a {
  width: 45px;
  height: 45px;
  background: #f2f2f2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  color: #000;
  text-decoration: none;

  transition: all 0.3s ease;
}

/* FACEBOOK */
.index-social-icons a:nth-child(1):hover {
  background: #1877f2;
  color: #fff;
}

/* INSTAGRAM */
.index-social-icons a:nth-child(2):hover {
  background: linear-gradient(
    45deg,
    #f58529,
    #dd2a7b,
    #8134af,
    #515bd4
  );
  color: #fff;
}

/* EMAIL */
.index-social-icons a:nth-child(3):hover {
  background: #ea4335;
  color: #fff;
}

/* ===============================
   CONTACT FORM ONLY
================================ */
/* ===============================
   CONTACT HERO
================================ */

.contact-hero {
  height: 80vh;
  background: url("images/contact.png") center/cover no-repeat;
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* DARK OVERLAY */
.contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

/* TEXT */
.contact-hero h1,
.contact-hero p {
  position: relative;
  z-index: 2;
}

.contact-hero h1 {
  font-size: 48px;
  color: #fff;
  margin-bottom: 10px;
}

.contact-hero p {
  font-size: 18px;
  color: #ddd;
}
@media (max-width: 768px) {
  .contact-hero {
    height: 35vh;
    padding: 0 15px;
  }

  .contact-hero h1 {
    font-size: 30px;
  }

  .contact-hero p {
    font-size: 15px;
  }
}

.contact-form-only {
  max-width: 500px;
  margin: 80px auto;
  padding: 40px 30px;
  background: #fff;
  box-shadow: 0 12px 35px rgba(0,0,0,0.15);
  border-radius: 14px;
  text-align: center;
}

.contact-form-only h2 {
  font-size: 28px;
  margin-bottom: 25px;
}

/* INPUTS */
.contact-form-only input,
.contact-form-only textarea {
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  font-size: 15px;
  border-radius: 8px;
}

.contact-form-only textarea {
  height: 120px;
  resize: none;
}

/* BUTTON */
.contact-form-only button {
  width: 100%;
  padding: 14px;
  background: #28b463;
  color: #fff;
  border: none;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.contact-form-only button:hover {
  background: #239b56;
}

.map-box iframe {
  width: 100%;
  height: 400px;
  border: none;
  border-radius: 10px;
}
@media (max-width: 900px) {
  .contact-unified {
    grid-template-columns: 1fr;
  }

  .contact-left img {
    height: 220px;
  }
}
/* ===============================
   MOBILE ORDER FIX
================================ */

@media (max-width: 900px) {

  .contact-unified {
    display: flex;
    flex-direction: column;
  }

  /* INFO FIRST */
  .contact-left {
    order: 1;
  }

  /* FORM SECOND */
  .contact-right {
    order: 2;
  }
}
@media (max-width: 900px) {
  .contact-right {
    margin-top: 20px;
  }
}

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

.activities-hero {
  height: 85vh;
  background: url("images/ad.png") center/cover no-repeat;
  position: relative;

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

/* DARK OVERLAY */
.activities-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

/* TITLE */
.activities-hero .premium-title {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  font-family: serif;
  max-width: 900px;
  line-height: 1.3;
}
@media (max-width: 768px) {
  .activities-hero {
    height: 40vh;
  }

  .activities-hero .premium-title {
    font-size: 30px;
    padding: 0 15px;
  }
}
/* ===============================
   ABOUT – PREMIUM SECTION
================================ */

.about-premium {
  padding: 120px 20px;
  background: #f6f6f6;
  display: flex;
  justify-content: center;
}

/* CONTENT BOX */
.about-box {
  max-width: 850px;
  background: #fff;
  padding: 60px 50px;
  text-align: center;
  box-shadow: 0 12px 35px rgba(0,0,0,0.12);
  border-radius: 12px;
}

/* TAG */
.about-tag {
  display: inline-block;
  padding: 6px 20px;
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 600;
  background: #e6f4ea;
  color: #28b463;
  border-radius: 50px;
  margin-bottom: 18px;
}

/* HEADING */
.about-box h2 {
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #111;
}

/* TEXT */
.about-box p {
  font-size: 17px;
  line-height: 1.9;
  color: #555;
  max-width: 650px;
  margin: auto;
}
@media (max-width: 768px) {
  .about-premium {
    padding: 80px 15px;
  }

  .about-box {
    padding: 40px 25px;
  }

  .about-box h2 {
    font-size: 28px;
  }

  .about-box p {
    font-size: 15px;
  }
}
/* ===============================
   PAGE WRAPPER
================================ */
@media (max-width: 768px) {
  .meal-container {
    padding: 25px 20px;
  }

  .meal-header h2 {
    font-size: 22px;
  }

  .meal-section h3 {
    font-size: 16px;
  }
}
@media (max-width: 768px) {

  .page:first-of-type {
    flex-direction: column;
    align-items: center;
  }

  .meal-container,
  .a {
    padding: 25px 20px;
  }

  .meal-header h2,
  .top-icon h2 {
    font-size: 22px;
  }

  .meal-section h3 {
    font-size: 16px;
  }
}
@media (max-width: 768px) {

  .page:first-of-type {
    flex-direction: column;
    align-items: center;
  }

  .meal-container,
  .a {
    padding: 25px 20px;
  }

  .meal-header h2,
  .top-icon h2 {
    font-size: 22px;
  }

  .meal-section h3 {
    font-size: 16px;
  }
}
.meal-container,
.a {
  outline: 2px solid #28a745;
  outline-offset: -8px;
}
.meal-container,
.a {
  background: #fff;
  border: 2px solid #00a8cc;   /* BLUE FORM BORDER */
  border-radius: 16px;
  padding: 35px 40px;
  width: 100%;
  max-width: 600px;
}
.page:first-of-type {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.meal-header,
.top-icon {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 30px;
}

.meal-header h2,
.top-icon h2 {
  font-size: 30px;
  font-weight: 700;
  color: #1f6f43;
}

.meal-icon,
.top-icon .icon {
  font-size: 32px;
}
.check {
  width: 36px;
  height: 36px;
  border: 3px solid #2e9d3d;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.check svg {
  width: 18px;
  height: 18px;
  stroke: #2e9d3d;
  stroke-width: 3;
  fill: none;
}
.meal-section {
  margin-bottom: 32px;
}

.meal-section h3 {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 22px;
  font-weight: 700;
  color: #005bbb;
  margin-bottom: 10px;
}

.meal-section p {
  font-size: 16px;
  line-height: 1.8;
  color: #444;
  margin-left: 54px; /* aligns under title */
}

.meal-section strong {
  color: red;
}
.activity-list {
  list-style: none;
  padding: 0;
}

.activity-list li {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 20px;
  padding: 18px 0;
  border-bottom: 1px solid #eee;
}

.activity-list li:last-child {
  border-bottom: none;
}
@media (max-width: 768px) {

  /* STACK CARDS VERTICALLY */
  .page:first-of-type {
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }

  /* FULL WIDTH FORM-LIKE */
  .meal-container,
  .a {
    max-width: 100%;
    width: 100%;
    padding: 26px 20px;
  }

}
@media (max-width: 768px) {

  /* FORCE SINGLE COLUMN */
  .feature-section,
  .feature-section.reverse {
    display: block !important;
  }

  /* IMAGE FIRST */
  .feature-image {
    width: 100% !important;
    margin-bottom: 15px;
  }

  .feature-image img {
    width: 100% !important;
    height: 260px !important;
    object-fit: cover;
    border-radius: 12px;
    display: block;
  }

  /* CONTENT BELOW IMAGE */
  .feature-content {
    width: 100% !important;
    padding: 10px 5px 0 !important;
  }

  /* FIX TITLE + TEXT */
  .feature-content h2 {
    font-size: 22px;
    margin-bottom: 10px;
  }

  .feature-content p {
    font-size: 15px;
    line-height: 1.7;
  }

  /* LIST */
  .feature-content .activity-list li {
    font-size: 16px;
    margin-bottom: 6px;
  }

  /* BUTTON FULL WIDTH */
  .feature-btn {
    display: block;
    width: 100% !important;
    text-align: center;
    margin-top: 15px;
    padding: 12px;
    font-size: 15px;
    border-radius: 8px;
  }

  /* FIX VERTICAL LABEL */
  .vertical-label {
    position: absolute;
    top: 12px;
    left: 12px;
    writing-mode: horizontal-tb !important;
    transform: none !important;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
  }
}
@media (max-width: 768px) {

  /* KILL GRID COMPLETELY */
  .feature-section,
  .feature-section.reverse {
    display: flex !important;
    flex-direction: column !important;
  }

  /* IMAGE FIRST */
  .feature-image {
    order: 1 !important;
    width: 100% !important;
  }

  .feature-image img {
    width: 100% !important;
    height: 260px !important;
    object-fit: cover !important;
  }

  /* CONTENT BELOW */
  .feature-content {
    order: 2 !important;
    width: 100% !important;
    padding: 20px 15px !important;
  }

  /* BUTTON FULL WIDTH */
  .feature-btn {
    width: 100% !important;
    display: block !important;
    text-align: center;
  }

  /* LABEL FIX */
  .vertical-label {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    top: 12px;
    left: 12px;
  }
}
.section-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: #2c7a7b;
  margin: 10px auto 0;
  border-radius: 5px;
}

@media (max-width: 768px) {
  .section-title::after {
    width: 50px;
  }
}
/* ===============================
   MOBILE RESPONSIVE (≤ 768px)
================================ */
@media (max-width: 768px) {

  
  /* TITLES */
  .premium-title {
    font-size: 26px;
    padding: 0 16px;
  }

  .premium-title span {
    font-size: 14px;
  }

  /* PACKAGE SECTIONS */
  .feature-section {
    flex-direction: column;
    padding: 16px;
    gap: 20px;
  }

  .feature-section.reverse {
    flex-direction: column;
  }

  .feature-content {
    width: 100%;
  }

  .feature-content h2 {
    font-size: 22px;
  }

  .feature-content p {
    font-size: 14px;
  }

  .feature-image {
    width: 100%;
  }

  .feature-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
  }

  .vertical-label {
    position: absolute;
    bottom: 10px;
    left: 10px;
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 12px;
    padding: 6px 10px;
  }

  /* MEALS + ACTIVITIES */
  .page {
    flex-direction: column;
    padding: 16px;
    gap: 24px;
  }

  .meal-container,
  .a {
    width: 100%;
  }

  .meal-header h2,
  .top-icon h2 {
    font-size: 20px;
  }

  .activity-list li {
    font-size: 16px;
  }

  /* CONTACT SECTION */
  .index-contact {
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    text-align: center;
  }

  .contact-item {
    justify-content: center;
  }

  .index-social-icons {
    justify-content: center;
  }

  

  /* FOOTER */
  footer p {
    font-size: 13px;
  }
}
@media (max-width: 768px) {

  .policy-wrapper {
    padding: 30px 16px;
  }

  .policy-wrapper h1 {
    font-size: 24px;
    text-align: center;
  }

  .policy-wrapper h2 {
    font-size: 18px;
  }

  .policy-wrapper p {
    font-size: 14px;
    line-height: 1.6;
  }

  .policy-wrapper ul {
    padding-left: 18px;
  }

  .policy-wrapper ul li {
    font-size: 14px;
  }

  .policy-wrapper hr {
    margin: 30px 0;
  }
}

/* ===============================
   SMALL PHONES (≤ 480px)
================================ */
@media (max-width: 480px) {

  .policy-wrapper h1 {
    font-size: 22px;
  }

  .policy-wrapper h2 {
    font-size: 17px;
  }

  .policy-wrapper p,
  .policy-wrapper ul li {
    font-size: 13.5px;
  }
}
@media (max-width: 768px) {
  .section-title {
    font-size: 28px;   /* smaller on mobile */
    margin-bottom: 20px;
  }
}

/* Very small phones */
@media (max-width: 480px) {
  .section-title {
    font-size: 25px;
  }
}
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 28px;
    text-align: center;
  }

  .hero-content p {
    font-size: 14px;
    text-align: center;
  }

  .hero-content {
    padding: 0 15px;
  }

  .hero-content .btn {
    display: block;
    margin: 10px auto;
    width: 80%;
    text-align: center;
  }
}
@media (max-width: 768px) {
  .about-box {
    padding: 20px;
    text-align: center;
  }

  .about-box h2 {
    font-size: 22px;
  }

  .about-box p {
    font-size: 14px;
  }
}
@media (max-width: 768px) {
  .feature-section,
  .feature-section.reverse {
    flex-direction: column;
  }

  .feature-image img {
    width: 100%;
    height: auto;
  }

  .feature-content {
    padding: 20px;
    text-align: center;
  }

  .vertical-label {
    display: none;
  }
}
@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}
@media (max-width: 768px) {
  .slider-container {
    padding: 0 10px;
  }

  .slide {
    flex-direction: column;
  }

  .slide img {
    width: 100%;
    height: auto;
  }

  .slide .content {
    padding: 15px;
    text-align: center;
  }
}
@media (max-width: 768px) {
  .why-container {
    flex-direction: column;
  }

  .why-text {
    text-align: center;
    padding: 20px;
  }

  .why-cards {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .index-contact {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .contact-item {
    justify-content: center;
  }

  footer p {
    font-size: 13px;
  }
}
.terms-hero {
  height: 80vh;
  background: url("images/terms.jpg") center/cover no-repeat;
  position: relative;

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

.terms-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.terms-title {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* MOBILE */
@media (max-width: 768px) {
  .terms-hero {
    height: 45vh;
  }

  .terms-title {
    font-size: 30px;
    padding: 0 15px;
  }
}
@media (max-width: 768px) {

  .index-contact {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .index-contact .logo {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 0;
  }

  .contact-item {
    justify-content: center;
    gap: 8px;
  }

  .contact-icon {
    width: 35px;
    height: 35px;
  }

  .contact-icon svg {
    width: 18px;
    height: 18px;
  }
}

/* ============================================================
   DREAM FILTERS DANDELI — FINAL ULTRA-LUXURY OVERRIDE
   Added on top of the existing stylesheet.
   Existing classes / JS hooks are preserved.
   ============================================================ */

:root{
  --lux-ink:#101713;
  --lux-forest:#17372b;
  --lux-forest-deep:#0c2118;
  --lux-cream:#f7f3eb;
  --lux-cream-2:#eee8dc;
  --lux-gold:#c7a66a;
  --lux-gold-light:#ead9b2;
  --lux-white:#fff;
  --lux-muted:#69736c;
  --lux-line:rgba(23,55,43,.13);
  --lux-shadow:0 25px 80px rgba(10,25,17,.13);
  --lux-shadow-deep:0 35px 100px rgba(6,18,12,.22);
  --lux-ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- BASE ---------- */

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}

body{
  color:var(--lux-ink);
  background:var(--lux-cream);
  font-family:'DM Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body, button, input, textarea, select{
  font-family:'DM Sans',sans-serif;
}

img{
  image-rendering:auto;
}

::selection{
  background:var(--lux-forest);
  color:#fff;
}

/* ---------- LUXURY NAVBAR ---------- */

.navbar{
  position:fixed !important;
  top:16px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:min(1180px,calc(100% - 32px)) !important;
  height:76px !important;
  min-height:76px !important;
  padding:8px 16px 8px 22px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:24px;
  z-index:1000 !important;
  background:rgba(14,29,21,.70) !important;
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 18px 55px rgba(0,0,0,.16);
  transition:all .5s var(--lux-ease);
}

.navbar:hover{
  background:rgba(12,27,19,.88) !important;
  border-color:rgba(255,255,255,.25);
}

.navbar .logo{
  flex:0 0 auto;
  margin:0 !important;
}

.navbar .logo img{
  width:82px !important;
  height:58px !important;
  object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.24));
  transition:transform .5s var(--lux-ease);
}

.navbar .logo:hover img{
  transform:scale(1.06);
}

#navMenu{
  display:flex !important;
  align-items:center;
  justify-content:flex-end;
  gap:3px !important;
  margin:0;
  padding:0;
  list-style:none;
}

#navMenu li a{
  position:relative;
  display:block;
  padding:12px 13px !important;
  color:rgba(255,255,255,.86) !important;
  font-family:'Manrope',sans-serif !important;
  font-size:10px !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:.13em;
  text-transform:uppercase;
  border-radius:12px;
  transition:all .35s var(--lux-ease);
}

#navMenu li a::after{
  content:"";
  position:absolute;
  left:13px;
  right:13px;
  bottom:6px;
  height:1px;
  background:var(--lux-gold-light);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .4s var(--lux-ease);
}

#navMenu li a:hover{
  color:#fff !important;
  background:rgba(255,255,255,.07);
}

#navMenu li a:hover::after{
  transform:scaleX(1);
  transform-origin:left;
}

.hamburger{
  display:none;
  color:#fff !important;
  font-size:27px !important;
  line-height:1;
  cursor:pointer;
  padding:10px;
  border-radius:12px;
  transition:.3s ease;
}

.hamburger:hover{
  background:rgba(255,255,255,.1);
}

#overlay{
  background:rgba(3,10,7,.58) !important;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

/* ---------- CINEMATIC HERO ---------- */

.hero{
  position:relative;
  height:100svh !important;
  min-height:700px;
  overflow:hidden;
  isolation:isolate;
  background:#0c1510;
}

.slides{
  background-position:center;
  background-size:cover;
  opacity:0;
  transform:scale(1.08);
  transition:opacity 1.2s ease,transform 7s var(--lux-ease);
  will-change:opacity,transform;
}

.slides.active{
  opacity:1;
  transform:scale(1);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(4,12,8,.76),rgba(4,12,8,.25) 55%,rgba(4,12,8,.35)),
    linear-gradient(0deg,rgba(3,10,7,.70),transparent 58%);
}

.hero::after{
  content:"DANDELI • KARNATAKA";
  position:absolute;
  right:-55px;
  top:52%;
  z-index:3;
  color:rgba(255,255,255,.23);
  font:700 10px/1 'Manrope',sans-serif;
  letter-spacing:.48em;
  transform:rotate(90deg);
  pointer-events:none;
}

.hero-content{
  position:relative;
  z-index:4;
  height:100%;
  min-height:700px;
  padding:150px 30px 80px !important;
  background:transparent !important;
  display:flex;
  flex-direction:column;
  align-items:flex-start !important;
  justify-content:center;
  text-align:left !important;
  color:#fff;
  max-width:1180px;
  margin:auto;
}

.hero-content::before{
  content:"EST. • NATURE • ADVENTURE";
  display:block;
  margin-bottom:25px;
  color:var(--lux-gold-light);
  font:700 10px/1 'Manrope',sans-serif;
  letter-spacing:.4em;
}

.hero-content h1{
  max-width:900px;
  color:#fff;
  font:600 clamp(58px,8vw,116px)/.84 'Italiana',serif !important;
  letter-spacing:-.025em;
  text-shadow:0 16px 45px rgba(0,0,0,.34);
}

.hero-content p{
  margin:28px 0 30px !important;
  color:rgba(255,255,255,.84);
  font:500 clamp(14px,1.4vw,18px)/1.6 'Manrope',sans-serif !important;
  letter-spacing:.20em;
  text-transform:uppercase;
}

.btn{
  position:relative;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 27px !important;
  margin:6px 7px 6px 0 !important;
  border-radius:100px !important;
  overflow:hidden;
  isolation:isolate;
  font:700 10px/1 'Manrope',sans-serif !important;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:all .45s var(--lux-ease);
}

.btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.30) 50%,transparent 75%);
  transform:translateX(-120%);
  transition:transform .7s var(--lux-ease);
}

.btn:hover::before{
  transform:translateX(120%);
}

.primary{
  background:var(--lux-gold) !important;
  color:#111 !important;
  border:1px solid var(--lux-gold);
  box-shadow:0 16px 38px rgba(199,166,106,.27);
}

.primary:hover{
  background:#dfc184 !important;
  color:#111 !important;
  transform:translateY(-4px);
  box-shadow:0 22px 50px rgba(199,166,106,.40);
}

.secondary{
  border:1px solid rgba(255,255,255,.45) !important;
  color:#fff !important;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
}

.secondary:hover{
  background:#fff !important;
  color:var(--lux-forest) !important;
  transform:translateY(-4px);
}

/* ---------- TITLES ---------- */

.premium-title{
  color:var(--lux-forest);
  font-family:'Cormorant Garamond',serif !important;
  font-size:clamp(45px,6vw,78px) !important;
  font-weight:600 !important;
  line-height:.95 !important;
  letter-spacing:-.025em;
}

.premium-title span{
  color:var(--lux-muted) !important;
  font-family:'Manrope',sans-serif !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.35em !important;
  text-transform:uppercase;
}

/* ---------- ABOUT ---------- */

.about-premium{
  position:relative;
  padding:145px 24px !important;
  background:
    radial-gradient(circle at 12% 30%,rgba(169,184,168,.18),transparent 30%),
    var(--lux-cream) !important;
}

.about-box{
  position:relative;
  max-width:900px !important;
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  text-align:center;
}

.about-box::before{
  content:"01";
  position:absolute;
  left:-40px;
  top:-55px;
  color:rgba(23,55,43,.055);
  font:700 145px/.8 'Playfair Display',serif;
  pointer-events:none;
}

.about-tag{
  display:inline-block;
  padding:0 !important;
  margin-bottom:25px !important;
  background:transparent !important;
  color:var(--lux-forest) !important;
  border-radius:0 !important;
  font:700 10px/1 'Manrope',sans-serif !important;
  letter-spacing:.4em !important;
}

.about-tag::before,
.about-tag::after{
  content:"";
  display:inline-block;
  vertical-align:middle;
  width:35px;
  height:1px;
  margin:0 12px;
  background:var(--lux-gold);
}

.about-box h2{
  color:var(--lux-forest) !important;
  font:600 clamp(43px,6vw,76px)/.98 'Cormorant Garamond',serif !important;
  letter-spacing:-.025em;
  margin-bottom:0 !important;
}

.about-box p{
  max-width:700px !important;
  margin:28px auto 0 !important;
  color:var(--lux-muted) !important;
  font:400 15px/1.9 'DM Sans',sans-serif !important;
}

/* ---------- ACCOMMODATION ---------- */

.packages-wrapper{
  padding:30px 0 130px;
  background:#fff;
}

.feature-section,
.feature-section.reverse{
  position:relative;
  width:min(1220px,calc(100% - 48px));
  min-height:630px;
  margin:0 auto 55px;
  display:grid !important;
  grid-template-columns:.85fr 1.15fr !important;
  align-items:stretch;
  overflow:hidden;
  border-radius:34px;
  background:var(--lux-cream);
  box-shadow:var(--lux-shadow);
}

.feature-section.reverse{
  grid-template-columns:1.15fr .85fr !important;
}

.feature-content{
  position:relative;
  padding:75px clamp(35px,6vw,85px) !important;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:left !important;
  z-index:2;
}

.feature-content::before{
  content:"";
  position:absolute;
  left:0;
  top:55px;
  bottom:55px;
  width:2px;
  background:linear-gradient(transparent,var(--lux-gold),transparent);
}

.feature-content h2{
  color:var(--lux-forest) !important;
  font:600 clamp(45px,5vw,72px)/.90 'Cormorant Garamond',serif !important;
  letter-spacing:-.02em;
  margin-bottom:20px !important;
}

.feature-content p{
  max-width:480px;
  margin:0 0 25px !important;
  color:var(--lux-muted) !important;
  font:400 15px/1.85 'DM Sans',sans-serif !important;
}

.activity-list{
  list-style:none !important;
  padding:0 !important;
  margin:0 0 27px !important;
}

.activity-list li{
  display:block !important;
  padding:5px 0 !important;
  margin:0 !important;
  border:0 !important;
  color:var(--lux-ink) !important;
  font:700 11px/1.5 'Manrope',sans-serif !important;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.activity-list li::before{
  content:"✦";
  display:inline-block;
  margin-right:11px;
  color:var(--lux-gold);
}

.feature-btn{
  width:max-content !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-height:54px;
  margin-top:0 !important;
  padding:0 24px !important;
  border:1px solid rgba(23,55,43,.18) !important;
  border-radius:100px !important;
  background:transparent !important;
  color:var(--lux-forest) !important;
  font:700 11px/1 'Manrope',sans-serif !important;
  letter-spacing:.10em;
  transition:all .45s var(--lux-ease);
}

.feature-btn:hover{
  background:var(--lux-forest) !important;
  color:#fff !important;
  border-color:var(--lux-forest) !important;
  transform:translateX(7px);
  box-shadow:0 15px 30px rgba(23,55,43,.18);
}

.feature-image{
  position:relative;
  min-height:100%;
  overflow:hidden;
}

.feature-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(8,20,14,.12),transparent 45%,rgba(8,20,14,.20));
  pointer-events:none;
}

.feature-image img{
  width:100% !important;
  height:100% !important;
  min-height:630px;
  object-fit:cover !important;
  transition:transform 1s var(--lux-ease),filter 1s ease;
}

.feature-section:hover .feature-image img{
  transform:scale(1.065);
  filter:saturate(1.08) contrast(1.03);
}

.vertical-label{
  left:auto !important;
  right:28px !important;
  top:auto !important;
  bottom:28px !important;
  z-index:3;
  padding:12px 9px !important;
  background:rgba(0,0,0,.18) !important;
  border:1px solid rgba(255,255,255,.30);
  border-radius:0;
  color:#fff !important;
  backdrop-filter:blur(12px);
  font:700 10px/1 'Manrope',sans-serif !important;
  letter-spacing:.30em;
  writing-mode:vertical-rl;
  transform:none !important;
}

/* ---------- SERVICES ---------- */

.services{
  padding:135px 24px !important;
  background:var(--lux-forest) !important;
  color:#fff;
}

.services > h2{
  margin-bottom:65px;
  color:#fff !important;
  font:600 clamp(46px,6vw,78px)/.9 'Cormorant Garamond',serif !important;
}

.services > h2::after{
  content:"";
  display:block;
  width:55px;
  height:1px;
  margin:24px auto 0;
  background:var(--lux-gold);
}

.services-grid{
  width:min(1000px,100%);
  max-width:none !important;
  margin:auto;
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:18px !important;
}

.service-card{
  position:relative;
  min-height:230px;
  padding:35px 20px !important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:24px !important;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025)) !important;
  box-shadow:none !important;
  transition:all .55s var(--lux-ease);
}

.service-card::before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  border-radius:50%;
  background:var(--lux-gold);
  opacity:.06;
  filter:blur(25px);
  transition:.6s ease;
}

.service-card:hover{
  transform:translateY(-12px);
  border-color:rgba(199,166,106,.5) !important;
  box-shadow:0 25px 60px rgba(0,0,0,.22) !important;
}

.service-card:hover::before{
  transform:scale(1.7);
  opacity:.14;
}

.service-card .icon{
  position:relative;
  margin-bottom:20px !important;
  font-size:34px !important;
  color:var(--lux-gold-light) !important;
  filter:grayscale(1);
  transition:.4s var(--lux-ease);
}

.service-card:hover .icon{
  transform:translateY(-5px) scale(1.1);
  filter:grayscale(0);
}

.service-card h3{
  position:relative;
  color:rgba(255,255,255,.9);
  font:700 11px/1.5 'Manrope',sans-serif !important;
  letter-spacing:.16em;
}

/* ---------- ACTIVITIES ---------- */

.activities{
  padding:140px 0 155px !important;
  background:var(--lux-cream) !important;
  overflow:hidden;
}

.activities .section-title{
  margin-bottom:55px !important;
  color:var(--lux-forest) !important;
  font:600 clamp(46px,6vw,78px)/.9 'Cormorant Garamond',serif !important;
  text-align:center;
}

.section-title::after{
  content:"" !important;
  display:block !important;
  width:55px !important;
  height:1px !important;
  margin:24px auto 0 !important;
  background:var(--lux-gold) !important;
  border-radius:0 !important;
}

.slider-container{
  position:relative;
  width:min(1200px,calc(100% - 48px));
  max-width:none !important;
  margin:auto;
  overflow:hidden;
}

.slider{
  display:flex;
  gap:24px;
  padding:10px 4px 35px;
  transition:transform .6s var(--lux-ease);
}

.slide{
  position:relative;
  flex:0 0 min(370px,78vw);
  min-width:0 !important;
  min-height:520px;
  padding:0 !important;
  overflow:hidden;
  border-radius:28px;
  background:#111;
  box-shadow:0 18px 50px rgba(18,32,24,.13);
  transition:all .5s var(--lux-ease);
}

.slide:hover{
  transform:translateY(-10px);
  box-shadow:var(--lux-shadow-deep);
}

.slide img{
  width:100% !important;
  height:100% !important;
  min-height:520px;
  object-fit:cover !important;
  border-radius:0 !important;
  transition:transform 1s var(--lux-ease);
}

.slide:hover img{
  transform:scale(1.08);
}

.slide::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(0deg,rgba(5,12,8,.96),rgba(5,12,8,.03) 70%);
  pointer-events:none;
}

.slide .content{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  padding:30px !important;
  background:transparent !important;
  border:0 !important;
  text-align:left !important;
  transform:translateY(8px);
  transition:.5s var(--lux-ease);
}

.slide:hover .content{
  transform:translateY(0);
}

.slide .content h3{
  color:#fff !important;
  font:600 40px/.95 'Cormorant Garamond',serif !important;
  margin-bottom:12px !important;
}

.slide .content p{
  margin:0 0 20px !important;
  color:rgba(255,255,255,.74) !important;
  font:400 13px/1.65 'DM Sans',sans-serif !important;
}

.slide .btn{
  min-height:45px;
  padding:0 20px !important;
  margin:0 !important;
  background:#fff !important;
  color:var(--lux-forest) !important;
}

.slide .btn:hover{
  background:var(--lux-gold) !important;
  color:#111 !important;
  transform:translateX(5px);
}

.nav{
  position:absolute;
  top:50% !important;
  z-index:10;
  width:55px;
  height:55px;
  padding:0 !important;
  border:1px solid rgba(23,55,43,.14) !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.88) !important;
  color:var(--lux-forest) !important;
  backdrop-filter:blur(15px);
  cursor:pointer;
  font-size:17px !important;
  transform:translateY(-50%);
  transition:.4s var(--lux-ease);
  box-shadow:0 12px 30px rgba(20,35,26,.13);
}

.nav:hover{
  background:var(--lux-forest) !important;
  color:#fff !important;
  transform:translateY(-50%) scale(1.08);
}

.prev{left:-27px !important}
.next{right:-27px !important}

/* ---------- WHY CHOOSE ---------- */

.why-choose{
  padding:140px 24px !important;
  background:#fff !important;
}

.why-container{
  width:min(1200px,100%);
  max-width:none !important;
  margin:auto;
  display:grid !important;
  grid-template-columns:.75fr 1.25fr !important;
  gap:70px;
  align-items:center;
}

.why-text h2{
  color:var(--lux-forest) !important;
  font:600 clamp(48px,5vw,72px)/.9 'Cormorant Garamond',serif !important;
  margin-bottom:0 !important;
}

.why-text h2::after{
  content:"";
  display:block;
  width:48px;
  height:1px;
  margin:25px 0;
  background:var(--lux-gold);
}

.why-text p{
  color:var(--lux-muted) !important;
  font:400 15px/1.85 'DM Sans',sans-serif !important;
}

.why-cards{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:15px !important;
}

.why-card{
  position:relative;
  height:400px !important;
  min-height:400px;
  overflow:hidden;
  border-radius:24px !important;
  background-size:cover !important;
  background-position:center !important;
  transition:all .55s var(--lux-ease);
}

.why-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(7,17,12,.90),rgba(7,17,12,.05));
  transition:.5s ease;
}

.why-card:hover{
  transform:translateY(-12px);
  box-shadow:var(--lux-shadow-deep);
}

.why-card:hover::before{
  background:linear-gradient(0deg,rgba(7,17,12,.94),rgba(7,17,12,.12));
}

.why-card .overlay{
  position:absolute;
  inset:0;
  z-index:2;
  padding:25px !important;
  display:flex;
  flex-direction:column;
  justify-content:flex-end !important;
  align-items:flex-start !important;
  color:#fff;
  text-align:left !important;
  background:transparent !important;
}

.why-card .icon{
  width:48px;
  height:48px;
  margin-bottom:18px !important;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  color:var(--lux-gold-light) !important;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  transition:.45s var(--lux-ease);
}

.why-card:hover .icon{
  transform:translateY(-6px);
  background:var(--lux-gold);
  color:#111 !important;
}

.why-card h3{
  color:#fff !important;
  font:600 27px/1 'Cormorant Garamond',serif !important;
}

/* ---------- CONTACT ---------- */

.index-contact{
  position:relative;
  width:min(1200px,calc(100% - 48px));
  max-width:none !important;
  margin:0 auto 100px !important;
  padding:75px !important;
  display:grid !important;
  grid-template-columns:1fr 1fr 1fr !important;
  align-items:center;
  gap:40px;
  border-radius:34px;
  background:var(--lux-cream) !important;
  box-shadow:var(--lux-shadow) !important;
  overflow:hidden;
}

.index-contact::before{
  content:"CONTACT";
  position:absolute;
  right:-20px;
  bottom:-55px;
  color:rgba(23,55,43,.045);
  font:700 150px/.8 'Playfair Display',serif;
  pointer-events:none;
}

.index-contact .logo{
  width:auto !important;
  display:block !important;
  margin:0 !important;
}

.index-contact .logo img{
  width:130px !important;
  height:auto !important;
  margin:0 !important;
}

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

.contact-icon{
  width:48px !important;
  height:48px !important;
  flex:0 0 48px;
  display:grid !important;
  place-items:center;
  border-radius:50%;
  background:var(--lux-forest) !important;
}

.contact-icon svg{
  width:20px !important;
  stroke:#fff !important;
}

.contact-details h3{
  margin-bottom:5px;
  color:var(--lux-forest) !important;
  font:700 10px/1 'Manrope',sans-serif !important;
  letter-spacing:.20em;
  text-transform:uppercase;
}

.contact-details p{
  color:var(--lux-muted) !important;
  font:400 13px/1.7 'DM Sans',sans-serif !important;
}

.index-social-icons{
  position:relative;
  z-index:2;
  grid-column:1/-1 !important;
  display:flex !important;
  justify-content:center !important;
  gap:10px !important;
  margin-top:0 !important;
  padding-top:30px;
  border-top:1px solid var(--lux-line);
}

.index-social-icons a{
  width:44px !important;
  height:44px !important;
  display:grid !important;
  place-items:center;
  border:1px solid var(--lux-line);
  border-radius:50%;
  color:var(--lux-forest) !important;
  background:#fff !important;
  transition:.4s var(--lux-ease);
}

.index-social-icons a:hover{
  color:#fff !important;
  background:var(--lux-forest) !important;
  border-color:var(--lux-forest);
  transform:translateY(-5px) rotate(-6deg);
}

/* ---------- OTHER PAGE HEROES ---------- */

.contact-hero,
.activities-hero,
.terms-hero{
  position:relative;
  isolation:isolate;
}

.contact-hero::before,
.activities-hero::before,
.terms-hero::before{
  background:
    linear-gradient(90deg,rgba(4,12,8,.68),rgba(4,12,8,.28)),
    linear-gradient(0deg,rgba(3,10,7,.65),transparent 60%) !important;
}

.contact-hero h1,
.activities-hero .premium-title,
.terms-title{
  color:#fff !important;
  font-family:'Italiana',serif !important;
  font-weight:500 !important;
  letter-spacing:.01em;
  text-shadow:0 12px 35px rgba(0,0,0,.35);
}

.contact-hero h1,
.terms-title{
  font-size:clamp(52px,7vw,92px) !important;
}

.contact-hero p{
  color:rgba(255,255,255,.82) !important;
  font-family:'Manrope',sans-serif !important;
  letter-spacing:.12em;
}

/* ---------- CONTACT FORM ---------- */

.contact-form-only{
  max-width:560px !important;
  margin:80px auto !important;
  padding:50px !important;
  background:rgba(255,255,255,.86) !important;
  border:1px solid rgba(23,55,43,.10);
  box-shadow:var(--lux-shadow) !important;
  border-radius:28px !important;
  backdrop-filter:blur(16px);
}

.contact-form-only h2{
  color:var(--lux-forest);
  font:600 48px/.95 'Cormorant Garamond',serif !important;
}

.contact-form-only input,
.contact-form-only textarea{
  width:100%;
  padding:16px 17px !important;
  margin-bottom:15px;
  border:1px solid rgba(23,55,43,.16) !important;
  border-radius:13px !important;
  background:#faf9f5;
  color:var(--lux-ink);
  outline:none;
  transition:.3s ease;
}

.contact-form-only input:focus,
.contact-form-only textarea:focus{
  border-color:var(--lux-gold) !important;
  box-shadow:0 0 0 4px rgba(199,166,106,.10);
  background:#fff;
}

.contact-form-only button{
  min-height:54px;
  border:0 !important;
  border-radius:100px !important;
  background:var(--lux-forest) !important;
  color:#fff;
  font:700 11px/1 'Manrope',sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:.4s var(--lux-ease);
}

.contact-form-only button:hover{
  background:var(--lux-gold) !important;
  color:#111;
  transform:translateY(-3px);
}

/* ---------- POLICY / TERMS ---------- */

.policy-wrapper{
  max-width:900px !important;
  margin:80px auto !important;
  padding:0 24px;
  color:#465048;
  font:400 15px/1.9 'DM Sans',sans-serif;
}

.policy-wrapper h1,
.policy-wrapper h2{
  color:var(--lux-forest);
  font-family:'Cormorant Garamond',serif !important;
}

.policy-wrapper h1{
  font-size:54px !important;
  line-height:1;
}

.policy-wrapper h2{
  margin-top:35px;
  font-size:34px !important;
  line-height:1;
}

/* ---------- MEAL / INFORMATION CARDS ---------- */

.meal-container,
.a{
  background:#fff !important;
  border:1px solid var(--lux-line) !important;
  outline:none !important;
  border-radius:24px !important;
  box-shadow:var(--lux-shadow);
}

.meal-header h2,
.top-icon h2{
  color:var(--lux-forest) !important;
  font:600 34px/.95 'Cormorant Garamond',serif !important;
}

.meal-section h3{
  color:var(--lux-forest) !important;
  font-family:'Manrope',sans-serif !important;
}

.meal-section p{
  color:var(--lux-muted) !important;
}

.activity-list li{
  border-bottom-color:var(--lux-line) !important;
}

/* ---------- FLOATING ACTIONS ---------- */

.call-btn,
.whatsapp-btn{
  position:fixed;
  z-index:999;
  width:56px !important;
  height:56px !important;
  display:grid !important;
  place-items:center;
  border-radius:50% !important;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 15px 35px rgba(0,0,0,.20) !important;
  transition:all .45s var(--lux-ease);
}

.call-btn{
  left:auto !important;
  right:24px !important;
  bottom:150px !important;
  background:var(--lux-forest) !important;
}

.whatsapp-btn{
  right:24px !important;
  bottom:80px !important;
  background:#fff !important;
}

.call-btn:hover,
.whatsapp-btn:hover{
  transform:translateY(-7px) scale(1.08);
}

.call-btn .btn-icon,
.whatsapp-btn .btn-icon{
  width:25px;
  height:25px;
}

/* ---------- FOOTER ---------- */

footer{
  margin-top:0 !important;
  padding:45px 20px !important;
  background:#0b120f !important;
  color:rgba(255,255,255,.75) !important;
  border-top:1px solid rgba(255,255,255,.08);
}

footer p{
  font:500 11px/1.7 'Manrope',sans-serif !important;
  letter-spacing:.08em;
}

footer p:last-child{
  color:rgba(255,255,255,.40) !important;
}

/* ============================================================
   MOBILE — PURPOSE-BUILT, NOT JUST DESKTOP SHRUNK
   ============================================================ */

@media (max-width:900px){

  .navbar{
    top:10px !important;
    width:calc(100% - 20px) !important;
    height:68px !important;
    min-height:68px !important;
    padding:7px 10px 7px 17px !important;
    border-radius:19px;
  }

  .navbar .logo img{
    width:72px !important;
    height:52px !important;
  }

  .hamburger{
    display:block !important;
    z-index:1002;
  }

  #navMenu{
    position:fixed !important;
    top:0 !important;
    right:-100% !important;
    width:min(340px,84vw) !important;
    height:100svh !important;
    padding:120px 25px 40px !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:7px !important;
    background:rgba(10,25,18,.97) !important;
    border-left:1px solid rgba(255,255,255,.10);
    border-radius:0 !important;
    box-shadow:-30px 0 80px rgba(0,0,0,.30);
    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);
    transition:right .55s var(--lux-ease) !important;
  }

  #navMenu.active{
    right:0 !important;
  }

  #navMenu li a{
    padding:18px 16px !important;
    font-size:11px !important;
    border-bottom:1px solid rgba(255,255,255,.07);
  }

  #navMenu li a::after{
    left:16px;
    right:auto;
    width:35px;
    bottom:9px;
  }

  #overlay.active{
    display:block !important;
    opacity:1;
    visibility:visible;
  }

  .hero{
    height:100svh !important;
    min-height:680px;
  }

  .hero-content{
    width:calc(100% - 40px);
    min-height:680px;
    padding:135px 0 70px !important;
    align-items:flex-start !important;
    text-align:left !important;
  }

  .hero-content::before{
    font-size:8px;
    letter-spacing:.25em;
  }

  .hero-content h1{
    font-size:clamp(55px,16vw,88px) !important;
    max-width:600px;
  }

  .hero-content p{
    max-width:310px;
    margin:22px 0 25px !important;
    font-size:10px !important;
    line-height:1.9 !important;
    letter-spacing:.12em;
  }

  .hero-content .btn{
    width:min(280px,100%);
    margin:5px 0 !important;
  }

  .about-premium{
    padding:105px 25px !important;
  }

  .about-box::before{
    left:0;
    top:-45px;
    font-size:90px;
  }

  .about-box h2{
    font-size:48px !important;
  }

  .feature-section,
  .feature-section.reverse{
    width:calc(100% - 28px) !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    margin-bottom:25px;
    border-radius:25px;
  }

  .feature-image{
    width:100%;
    height:390px;
    min-height:390px !important;
    order:1 !important;
  }

  .feature-image img{
    width:100% !important;
    height:390px !important;
    min-height:390px !important;
    object-fit:cover !important;
  }

  .feature-content{
    width:100% !important;
    min-height:0;
    order:2 !important;
    padding:55px 28px 58px !important;
    text-align:left !important;
  }

  .feature-content::before{
    top:0;
    bottom:auto;
    left:28px;
    width:50px;
    height:2px;
    background:var(--lux-gold);
  }

  .feature-content h2{
    font-size:54px !important;
  }

  .feature-content p{
    font-size:14px !important;
  }

  .feature-btn{
    width:100% !important;
  }

  .vertical-label{
    top:auto !important;
    left:18px !important;
    right:auto !important;
    bottom:18px !important;
    writing-mode:horizontal-tb !important;
    padding:8px 12px !important;
    border-radius:100px;
    letter-spacing:.20em;
  }

  .services{
    padding:100px 20px !important;
  }

  .services > h2{
    font-size:52px !important;
  }

  .services-grid{
    grid-template-columns:1fr !important;
    max-width:430px !important;
  }

  .service-card{
    min-height:185px;
  }

  .activities{
    padding:100px 0 110px !important;
  }

  .activities .section-title{
    padding:0 20px;
    font-size:52px !important;
  }

  .slider-container{
    width:100% !important;
  }

  .slider{
    gap:15px;
    padding:10px 20px 30px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }

  .slider::-webkit-scrollbar{
    display:none;
  }

  .slide{
    flex:0 0 calc(100vw - 48px) !important;
    min-height:470px;
    scroll-snap-align:center;
  }

  .slide img{
    min-height:470px;
  }

  .slide .content h3{
    font-size:38px !important;
  }

  .nav{
    display:none !important;
  }

  .why-choose{
    padding:105px 20px !important;
  }

  .why-container{
    grid-template-columns:1fr !important;
    gap:50px;
  }

  .why-text{
    text-align:center !important;
  }

  .why-text h2{
    font-size:54px !important;
  }

  .why-text h2::after{
    margin:22px auto;
  }

  .why-cards{
    grid-template-columns:1fr !important;
    max-width:480px;
    margin:auto;
  }

  .why-card{
    min-height:360px;
    height:360px !important;
  }

  .index-contact{
    width:calc(100% - 28px) !important;
    margin-bottom:65px !important;
    padding:50px 28px !important;
    grid-template-columns:1fr !important;
    gap:30px;
    border-radius:25px;
  }

  .index-contact .logo{
    display:flex !important;
    justify-content:center;
  }

  .index-contact .logo img{
    margin:auto !important;
  }

  .index-social-icons{
    grid-column:auto !important;
  }

  .call-btn,
  .whatsapp-btn{
    right:17px !important;
    width:52px !important;
    height:52px !important;
  }

  .call-btn{
    bottom:135px !important;
  }

  .whatsapp-btn{
    bottom:72px !important;
  }

  .contact-form-only{
    width:calc(100% - 30px);
    padding:40px 24px !important;
    margin:60px auto !important;
  }

  .contact-form-only h2{
    font-size:44px !important;
  }

  .contact-hero,
  .activities-hero,
  .terms-hero{
    height:52vh !important;
    min-height:420px;
  }

  .contact-hero h1,
  .terms-title{
    font-size:clamp(48px,14vw,70px) !important;
  }

  .activities-hero .premium-title{
    font-size:clamp(46px,13vw,68px) !important;
    padding:0 20px;
  }

  .policy-wrapper{
    padding:40px 20px !important;
  }

  .policy-wrapper h1{
    font-size:45px !important;
  }

  .policy-wrapper h2{
    font-size:31px !important;
  }
}

@media (max-width:480px){

  .hero-content h1{
    font-size:58px !important;
  }

  .about-box h2{
    font-size:43px !important;
  }

  .feature-image,
  .feature-image img{
    height:330px !important;
    min-height:330px !important;
  }

  .feature-content{
    padding:48px 24px 52px !important;
  }

  .feature-content h2{
    font-size:47px !important;
  }

  .services > h2,
  .activities .section-title{
    font-size:47px !important;
  }

  .slide{
    flex-basis:calc(100vw - 38px) !important;
    min-height:445px;
  }

  .slide img{
    min-height:445px;
  }

  .why-text h2{
    font-size:48px !important;
  }

  .index-contact{
    padding:45px 22px !important;
  }

  .contact-item{
    gap:13px;
  }
}

/* ---------- ACCESSIBILITY / PERFORMANCE ---------- */

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}


/* =========================================================
   DREAM FILTERS DANDELI — FINAL BRAND / LUXURY OVERRIDE
   Palette from the supplied reference:
   Slate #2E4052 | Aqua #A5C9CA | Cream #F0E5D8
   Gold #D9BF77 | Terracotta #C84B31 | Violet #D9BF77
========================================================= */

:root {
  --df-slate: #2E4052;
  --df-aqua: #A5C9CA;
  --df-cream: #F0E5D8;
  --df-gold: #D9BF77;
  --df-terra: #C84B31;
  --df-violet: #D9BF77;
  --df-violet-dark: #2E4052;
  --df-white: #FFFFFF;
  --df-ink: #18212B;
  --df-shadow: 0 18px 50px rgba(46,64,82,.14);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--df-cream);
  color: var(--df-slate);
  overflow-x: hidden;
}

/* -------------------------
   NAVBAR
------------------------- */

.navbar {
  position: fixed !important;
  inset: 0 0 auto 0;
  width: 100%;
  height: 106px !important;
  padding: 0 34px !important;
  background: rgba(255,255,255,.98) !important;
  border-bottom: 1px solid rgba(46,64,82,.08);
  box-shadow: 0 8px 30px rgba(46,64,82,.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: height .4s ease, background .4s ease, box-shadow .4s ease;
}

.navbar.scrolled {
  height: 82px !important;
  background: rgba(255,255,255,.68) !important;
  border-bottom-color: rgba(255,255,255,.5);
  box-shadow: 0 12px 36px rgba(46,64,82,.16);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}

.logo img {
  height: 112px !important;
  width: auto;
  transition: height .4s ease, transform .4s ease;
}

.navbar.scrolled .logo img {
  height: 88px !important;
}

#navMenu {
  align-items: center;
  gap: 31px !important;
}

#navMenu li a {
  position: relative;
  color: var(--df-slate) !important;
  font-family: "DM Sans", sans-serif;
  font-size: 16px !important;
  font-weight: 600;
  letter-spacing: .25px;
  transition: color .25s ease, transform .25s ease;
}

#navMenu li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0;
  height: 2px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--df-gold), var(--df-gold));
  transition: width .3s ease;
}

#navMenu li a:hover {
  color: var(--df-gold) !important;
  transform: translateY(-2px);
}

#navMenu li a:hover::after {
  width: 100%;
}

#overlay {
  background: rgba(24,33,43,.55) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Keep page content from hiding under fixed navbar */
.hero {
  margin-top: 0;
}

/* -------------------------
   HERO
------------------------- */

.hero-content {
  background:
    linear-gradient(
      180deg,
      rgba(24,33,43,.28),
      rgba(24,33,43,.68)
    ) !important;
}

.hero-content h1 {
  font-family: "Cormorant Garamond", serif !important;
  font-weight: 600;
  letter-spacing: .5px;
}

.hero-content p {
  font-family: "DM Sans", sans-serif;
  letter-spacing: 1.5px;
}

.primary {
  background: linear-gradient(135deg, var(--df-gold), var(--df-slate)) !important;
  border-radius: 50px;
  box-shadow: 0 12px 28px rgba(217,191,119,.25);
  transition: transform .3s ease, box-shadow .3s ease;
}

.primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px rgba(217,191,119,.34);
}

.secondary {
  border-radius: 50px;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}

.secondary:hover {
  background: rgba(255,255,255,.94);
  color: var(--df-slate);
  transform: translateY(-3px);
}

/* -------------------------
   TITLES
------------------------- */

.section-title,
.premium-title {
  color: var(--df-slate) !important;
  font-family: "Cormorant Garamond", serif !important;
}

.section-title::after,
.premium-title::after {
  background: linear-gradient(90deg, var(--df-gold), var(--df-gold)) !important;
}

/* -------------------------
   ABOUT / FEATURES
------------------------- */

.about-premium {
  background: linear-gradient(180deg, var(--df-cream), #fff) !important;
}

.about-box {
  border-top: 4px solid var(--df-gold);
  box-shadow: var(--df-shadow) !important;
}

.about-tag {
  background: rgba(217,191,119,.09) !important;
  color: var(--df-gold) !important;
}

.about-box h2,
.feature-content h2 {
  font-family: "Cormorant Garamond", serif !important;
  color: var(--df-slate);
}

.feature-content p {
  color: #52606d !important;
}

.feature-btn {
  background: var(--df-slate) !important;
  border-radius: 50px;
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}

.feature-btn:hover {
  background: var(--df-gold) !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(217,191,119,.24);
}

.vertical-label {
  background: var(--df-slate) !important;
  border-radius: 4px;
}

/* -------------------------
   SERVICES
------------------------- */

.services {
  background: #fff !important;
}

.service-card {
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(46,64,82,.08);
  box-shadow: var(--df-shadow) !important;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(217,191,119,.25);
  box-shadow: 0 24px 55px rgba(46,64,82,.18) !important;
}

.service-card .icon {
  color: var(--df-gold) !important;
}

/* -------------------------
   ACTIVITIES
------------------------- */

.activities {
  background: linear-gradient(180deg, var(--df-cream), #fff) !important;
}

.slider-container {
  max-width: 1250px !important;
}

.slider {
  will-change: transform;
}

.slide {
  box-sizing: border-box;
  padding: 12px !important;
  min-width: 33.333333% !important;
}

.slide img {
  height: 340px !important;
  border-radius: 24px 24px 0 0 !important;
}

.slide .content {
  background: rgba(255,255,255,.98) !important;
  border: 0 !important;
  border-radius: 0 0 24px 24px;
  padding: 24px !important;
  box-shadow: 0 16px 40px rgba(46,64,82,.12);
}

.slide .content h3 {
  color: var(--df-slate) !important;
  font-family: "Cormorant Garamond", serif !important;
  font-size: 30px !important;
}

.slide .content p {
  color: #586773 !important;
}

.slide .btn {
  background: linear-gradient(135deg, var(--df-gold), var(--df-slate)) !important;
  border-radius: 50px !important;
  transition: transform .3s ease, box-shadow .3s ease;
}

.slide .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(217,191,119,.28);
}

.nav {
  width: 48px;
  height: 48px;
  padding: 0 !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--df-gold) !important;
  box-shadow: 0 10px 24px rgba(217,191,119,.28);
  transition: transform .3s ease, background .3s ease;
}

.nav:hover {
  background: var(--df-slate) !important;
  transform: scale(1.08);
}

/* -------------------------
   WHY CHOOSE US — RESTORED
------------------------- */

.why-choose {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 110px 30px !important;
  background: linear-gradient(135deg, var(--df-slate), #213444) !important;
  color: #fff;
}

.why-container {
  max-width: 1250px !important;
  display: grid !important;
  grid-template-columns: .9fr 2fr !important;
  gap: 55px;
  align-items: center;
}

.why-text h2 {
  color: #fff !important;
  font-family: "Cormorant Garamond", serif !important;
  font-size: 52px !important;
  line-height: 1.05;
}

.why-text p {
  color: rgba(255,255,255,.76) !important;
}

.why-cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px;
}

.why-card {
  min-height: 300px;
  height: 300px;
  border-radius: 24px !important;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(0,0,0,.25);
  transition: transform .4s ease, box-shadow .4s ease;
}

.why-card:hover {
  transform: translateY(-9px);
  box-shadow: 0 30px 60px rgba(0,0,0,.34);
}

.why-card .overlay {
  background: linear-gradient(180deg, rgba(24,33,43,.12), rgba(24,33,43,.9)) !important;
}

.why-card .icon {
  color: var(--df-gold) !important;
}

/* -------------------------
   CONTACT
------------------------- */

.contact-form-only button {
  background: linear-gradient(135deg, var(--df-gold), var(--df-slate)) !important;
}

.contact-form-only button:hover {
  background: var(--df-slate) !important;
}

.contact-icon {
  background: rgba(217,191,119,.08) !important;
  color: var(--df-gold);
}

/* -------------------------
   FLOATING CALL / WHATSAPP
------------------------- */

.call-btn,
.whatsapp-btn {
  width: 58px !important;
  height: 58px !important;
  bottom: 24px !important;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 10px 28px rgba(0,0,0,.2) !important;
  transition: transform .3s ease, box-shadow .3s ease;
}

.call-btn {
  left: 22px !important;
  background: var(--df-gold) !important;
}

.whatsapp-btn {
  right: 22px !important;
  background: #25D366 !important;
}

.call-btn:hover,
.whatsapp-btn:hover {
  transform: translateY(-6px) scale(1.06);
  box-shadow: 0 16px 34px rgba(0,0,0,.27) !important;
}

/* -------------------------
   BACK TO TOP
------------------------- */

#backToTop {
  position: fixed;
  right: 50%;
  bottom: 28px;
  width: 48px;
  height: 48px;
  transform: translateX(50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--df-gold), #c7aa55);
  color: var(--df-slate);
  font-size: 21px;
  font-weight: 800;
  cursor: pointer;
  z-index: 997;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: 0 10px 25px rgba(46,64,82,.25);
  transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
}

#backToTop.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#backToTop:hover {
  transform: translateX(50%) translateY(-5px);
}

/* -------------------------
   MOBILE
------------------------- */

@media (max-width: 900px) {

  .navbar {
    height: 88px !important;
    padding: 0 18px !important;
  }

  .navbar.scrolled {
    height: 74px !important;
  }

  .logo img {
    height: 96px !important;
  }

  .navbar.scrolled .logo img {
    height: 78px !important;
  }

  #navMenu {
    top: 88px !important;
    right: -290px;
    width: 250px !important;
    background: rgba(46,64,82,.98) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 0 0 0 24px !important;
    padding: 26px 22px !important;
    gap: 18px !important;
  }

  #navMenu.active {
    right: 0 !important;
  }

  #navMenu li a {
    color: #fff !important;
    font-size: 17px !important;
  }

  .activities {
    padding: 75px 8px !important;
  }

  .section-title {
    font-size: 40px !important;
  }

  .slide {
    min-width: 100% !important;
    padding: 10px !important;
  }

  .slide img {
    height: 350px !important;
  }

  .why-choose {
    padding: 78px 20px !important;
  }

  .why-container {
    grid-template-columns: 1fr !important;
    gap: 35px;
  }

  .why-text {
    text-align: center;
  }

  .why-text h2 {
    font-size: 43px !important;
  }

  .why-cards {
    grid-template-columns: 1fr !important;
  }

  .why-card {
    height: 260px;
    min-height: 260px;
  }

  .call-btn {
    left: 14px !important;
    bottom: 17px !important;
  }

  .whatsapp-btn {
    right: 14px !important;
    bottom: 17px !important;
  }

  #backToTop {
    bottom: 22px;
    width: 44px;
    height: 44px;
    font-size: 19px;
  }
}

@media (max-width: 480px) {

  .hero-content h1 {
    font-size: 29px !important;
  }

  .section-title {
    font-size: 35px !important;
  }

  .slide img {
    height: 315px !important;
  }

  .slide .content h3 {
    font-size: 28px !important;
  }

  .why-text h2 {
    font-size: 39px !important;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* =========================================================
   DREAM FILTERS DANDELI — FINAL CORRECTION LAYER
   Fixes mobile navbar, hero visibility, activities autoplay,
   Why Choose Us visibility, floating buttons and footer.
   No violet/purple is used in this final layer.
========================================================= */

/* ---------- FINAL PALETTE ---------- */
:root{
  --final-slate:#2E4052;
  --final-aqua:#A5C9CA;
  --final-cream:#F0E5D8;
  --final-gold:#D9BF77;
  --final-terra:#C84B31;
  --final-white:#FFFFFF;
  --final-ink:#18212B;
}

/* ---------- NAVBAR ---------- */
.navbar{
  background:rgba(255,255,255,.97) !important;
  color:var(--final-slate) !important;
  border:1px solid rgba(46,64,82,.10) !important;
  box-shadow:0 10px 35px rgba(46,64,82,.10) !important;
}

.navbar.scrolled{
  background:rgba(255,255,255,.72) !important;
  backdrop-filter:blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter:blur(24px) saturate(160%) !important;
}

.hamburger,
.navbar .hamburger{
  color:#111 !important;
  background:transparent !important;
  text-shadow:none !important;
  opacity:1 !important;
  visibility:visible !important;
  z-index:1105 !important;
}

.hamburger:hover{
  color:#111 !important;
  background:rgba(46,64,82,.07) !important;
}

/* Mobile menu must never be white */
@media(max-width:900px){
  #navMenu{
    background:rgba(46,64,82,.98) !important;
    color:#fff !important;
    box-shadow:-25px 0 60px rgba(0,0,0,.28) !important;
    z-index:1100 !important;
  }

  #navMenu li a,
  #navMenu li a:hover{
    color:#fff !important;
  }

  .hamburger{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:48px !important;
    height:48px !important;
    font-size:30px !important;
    font-weight:800 !important;
    color:#111 !important;
    z-index:1200 !important;
  }

  #overlay{
    background:rgba(0,0,0,.42) !important;
    z-index:1090 !important;
  }
}

/* ---------- HERO: SHOW THE ACTUAL IMAGE ---------- */
.hero::before{
  background:rgba(0,0,0,0) !important;
}

.hero::after{
  opacity:.22 !important;
}

.hero-content{
  background:transparent !important;
}

/* Keep text readable without covering the entire photograph */
.hero-content h1,
.hero-content p,
.hero-content .btn{
  position:relative;
  z-index:5;
}

.slides{
  filter:none !important;
  opacity:0;
}

.slides.active{
  opacity:1 !important;
}

/* ---------- ACTIVITIES: EXACT WIDTH FOR JS CAROUSEL ---------- */
.activities .slider-container{
  overflow:hidden !important;
}

.activities .slider{
  display:flex !important;
  gap:0 !important;
  width:100% !important;
  padding:10px 0 35px !important;
  transition:transform .7s cubic-bezier(.22,.61,.36,1) !important;
  will-change:transform;
}

.activities .slide{
  flex:0 0 33.333333% !important;
  width:33.333333% !important;
  min-width:33.333333% !important;
  box-sizing:border-box !important;
  padding:12px !important;
}

.activities .slide img{
  width:100% !important;
  height:340px !important;
  object-fit:cover !important;
}

.activities .slide .content{
  color:var(--final-slate) !important;
}

.activities .slide .content h3,
.activities .slide .content p{
  opacity:1 !important;
  visibility:visible !important;
}

.activities .slide .btn{
  background:var(--final-gold) !important;
  color:#18212B !important;
}

.activities .nav{
  background:var(--final-slate) !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(46,64,82,.20) !important;
}

.activities .nav:hover{
  background:var(--final-gold) !important;
  color:var(--final-slate) !important;
}

@media(max-width:900px){
  .activities .slider{
    width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .activities .slide{
    flex:0 0 100% !important;
    width:100% !important;
    min-width:100% !important;
    padding:10px !important;
  }

  .activities .slide img{
    height:350px !important;
    min-height:350px !important;
  }
}

@media(max-width:480px){
  .activities .slide{
    padding:8px !important;
  }

  .activities .slide img{
    height:330px !important;
    min-height:330px !important;
  }
}

/* ---------- WHY CHOOSE US: ALWAYS VISIBLE ---------- */
.why-choose{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  position:relative !important;
  z-index:1 !important;
  background:linear-gradient(135deg,#2E4052,#213444) !important;
  color:#fff !important;
}

.why-container{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
}

.why-text,
.why-cards,
.why-card{
  visibility:visible !important;
  opacity:1 !important;
}

.why-text h2,
.why-text p,
.why-card h3,
.why-card .icon{
  visibility:visible !important;
  opacity:1 !important;
}

.why-card{
  background-size:cover !important;
  background-position:center !important;
  min-height:300px !important;
}

@media(max-width:900px){
  .why-choose{
    display:block !important;
    min-height:auto !important;
    padding:80px 18px !important;
  }

  .why-container{
    display:flex !important;
    flex-direction:column !important;
    gap:35px !important;
  }

  .why-text{
    width:100% !important;
    text-align:center !important;
  }

  .why-text h2{
    font-size:46px !important;
  }

  .why-cards{
    width:100% !important;
    max-width:520px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .why-card{
    display:block !important;
    width:100% !important;
    height:300px !important;
    min-height:300px !important;
  }
}

/* ---------- CONTACT / FLOATING BUTTONS: NO VIOLET ---------- */
.contact-form-only button{
  background:var(--final-gold) !important;
  color:var(--final-slate) !important;
}

.contact-form-only button:hover{
  background:#c7aa55 !important;
}

.contact-icon{
  background:rgba(217,191,119,.16) !important;
  color:var(--final-slate) !important;
}

.call-btn{
  left:20px !important;
  right:auto !important;
  bottom:20px !important;
  background:var(--final-slate) !important;
  color:#fff !important;
}

.whatsapp-btn{
  right:20px !important;
  left:auto !important;
  bottom:20px !important;
  background:#25D366 !important;
  color:#fff !important;
}

.call-btn,
.whatsapp-btn{
  width:56px !important;
  height:56px !important;
  z-index:1200 !important;
}

/* ---------- BACK TO TOP ---------- */
#backToTop{
  background:var(--final-gold) !important;
  color:var(--final-slate) !important;
  z-index:1190 !important;
}

/* ---------- CONTACT / FOOTER ---------- */
.index-contact{
  background:linear-gradient(135deg,#fff,#f7f4ee) !important;
  border-top:1px solid rgba(46,64,82,.08);
}

footer{
  position:relative;
  padding:55px 22px 28px !important;
  background:linear-gradient(135deg,#263847,#182732) !important;
  color:#fff !important;
  text-align:center !important;
  border-top:4px solid var(--final-gold) !important;
}

footer::before{
  content:"DREAM FILTERS DANDELI";
  display:block;
  margin-bottom:12px;
  color:#fff;
  font-family:'Cormorant Garamond',serif;
  font-size:30px;
  font-weight:600;
  letter-spacing:.04em;
}

footer p{
  margin:6px auto !important;
  color:rgba(255,255,255,.78) !important;
  font-family:'DM Sans',sans-serif !important;
  font-size:12px !important;
  letter-spacing:.08em;
}

footer p:last-child{
  margin-top:18px !important;
  color:var(--final-gold) !important;
}

@media(max-width:900px){
  footer{
    padding:48px 18px 30px !important;
  }

  footer::before{
    font-size:27px;
  }

  .index-contact{
    width:calc(100% - 20px) !important;
    margin:25px auto 70px !important;
    padding:38px 20px !important;
    border-radius:22px !important;
  }
}

/* ---------- MOBILE HERO: DO NOT HIDE THE IMAGE ---------- */
@media(max-width:900px){
  .hero{
    min-height:680px !important;
  }

  .hero-content{
    min-height:680px !important;
    background:transparent !important;
  }

  .hero-content h1{
    font-size:clamp(43px,13vw,66px) !important;
    line-height:.92 !important;
  }

  .hero-content .btn{
    width:210px !important;
    min-height:52px !important;
  }
}

/* No purple anywhere in final interactive elements */
.primary,
.feature-btn,
.slide .btn,
.nav{
  border-color:var(--final-gold) !important;
}

/* =========================================================
   DREAM FILTERS DANDELI — FINAL INDEX POLISH
   Based on the supplied mobile + desktop references.

   Palette:
   #2E4052 Slate
   #A5C9CA Aqua
   #F0E5D8 Cream
   #D9BF77 Gold
   #C84B31 Terracotta

   NO VIOLET / PURPLE
========================================================= */

:root{
  --index-slate:#2E4052;
  --index-aqua:#A5C9CA;
  --index-cream:#F0E5D8;
  --index-gold:#D9BF77;
  --index-terra:#C84B31;
  --index-ink:#18212B;
}


/* =========================================================
   1. MOBILE NAVBAR — WHITE HEADER + DARK SIDE PANEL
========================================================= */

@media (max-width:900px){

  .navbar{
    position:fixed !important;
    top:10px !important;
    left:10px !important;
    right:10px !important;
    width:auto !important;
    transform:none !important;

    height:68px !important;
    min-height:68px !important;

    padding:6px 10px 6px 16px !important;

    background:#fff !important;
    border:1px solid rgba(46,64,82,.10) !important;
    border-radius:18px !important;

    box-shadow:0 10px 28px rgba(46,64,82,.16) !important;

    z-index:3000 !important;
  }

  .navbar .logo img{
    width:72px !important;
    height:54px !important;
    object-fit:contain !important;
  }

  /* Black hamburger + black X */
  .navbar .hamburger,
  .hamburger{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:46px !important;
    height:46px !important;

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

    color:#111 !important;
    background:transparent !important;

    font-size:28px !important;
    font-weight:800 !important;
    line-height:1 !important;

    border:0 !important;
    text-shadow:none !important;

    opacity:1 !important;
    visibility:visible !important;

    position:relative !important;
    z-index:3200 !important;
  }

  .navbar .hamburger:hover{
    color:#111 !important;
    background:rgba(46,64,82,.06) !important;
  }

  /* Side navigation */
  #navMenu{
    position:fixed !important;

    top:0 !important;
    right:-100% !important;

    width:min(320px,82vw) !important;
    height:100svh !important;

    margin:0 !important;

    padding:110px 24px 30px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;

    gap:4px !important;

    list-style:none !important;

    background:#2E4052 !important;
    color:#fff !important;

    border:0 !important;
    border-left:1px solid rgba(255,255,255,.10) !important;
    border-radius:0 !important;

    box-shadow:-25px 0 60px rgba(0,0,0,.28) !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    transition:right .42s ease !important;

    z-index:3100 !important;
  }

  #navMenu.active{
    right:0 !important;
  }

  #navMenu li{
    width:100% !important;
  }

  #navMenu li a{
    display:block !important;

    width:100% !important;

    padding:17px 13px !important;

    color:#fff !important;

    font-family:"Manrope",sans-serif !important;
    font-size:11px !important;
    font-weight:700 !important;

    letter-spacing:.14em !important;
    text-transform:uppercase !important;

    border-bottom:1px solid rgba(255,255,255,.10) !important;

    background:transparent !important;
  }

  #navMenu li a:hover{
    color:#fff !important;
    background:rgba(255,255,255,.07) !important;
    transform:none !important;
  }

  #navMenu li a::after{
    display:none !important;
  }

  #overlay{
    position:fixed !important;
    inset:0 !important;

    display:none !important;

    background:rgba(0,0,0,.42) !important;

    backdrop-filter:blur(3px) !important;
    -webkit-backdrop-filter:blur(3px) !important;

    z-index:3050 !important;
  }

  #overlay.active{
    display:block !important;
  }
}


/* =========================================================
   2. HERO — KEEP IMAGE CLEAR
========================================================= */

.hero::before,
.hero::after{
  pointer-events:none !important;
}

.hero::before{
  background:none !important;
  opacity:1 !important;
}

.hero::after{
  opacity:.12 !important;
}

.hero .hero-content{
  background:transparent !important;
}

.hero .slides{
  filter:none !important;
  background-blend-mode:normal !important;
}

.hero .slides.active{
  opacity:1 !important;
}


/* =========================================================
   3. SERVICES — CLEAN SPACED REFERENCE STYLE
========================================================= */

.services{
  padding:105px 22px 115px !important;
  background:#fff !important;
  text-align:center !important;
}

.services > h2{
  margin:0 0 48px !important;

  color:var(--index-ink) !important;

  font-family:"Manrope",sans-serif !important;
  font-size:44px !important;
  font-weight:800 !important;

  letter-spacing:-.03em !important;
  text-align:center !important;
}

.services-grid{
  width:min(1800px,100%) !important;

  margin:0 auto !important;

  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;

  gap:44px !important;

  align-items:stretch !important;
}

.service-card{
  min-height:300px !important;

  padding:58px 35px 50px !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;

  background:#fff !important;

  border:1px solid rgba(46,64,82,.07) !important;
  border-radius:22px !important;

  box-shadow:
    0 18px 45px rgba(46,64,82,.10) !important;

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease !important;
}

.service-card:hover{
  transform:translateY(-8px) !important;

  border-color:rgba(217,191,119,.55) !important;

  box-shadow:
    0 26px 60px rgba(46,64,82,.16) !important;
}

.service-card .icon{
  margin:0 0 28px !important;

  color:var(--index-gold) !important;

  font-size:50px !important;
  line-height:1 !important;
}

.service-card h3{
  margin:0 !important;

  color:var(--index-ink) !important;

  font-family:"Manrope",sans-serif !important;
  font-size:23px !important;
  font-weight:800 !important;

  letter-spacing:.01em !important;
  text-align:center !important;
}


/* =========================================================
   4. ACTIVITIES — SAME CARD STYLE ON DESKTOP + MOBILE
========================================================= */

.activities{
  padding:105px 18px 125px !important;

  background:
    linear-gradient(
      180deg,
      var(--index-cream) 0%,
      #fff 100%
    ) !important;

  overflow:hidden !important;
}

.activities .section-title{
  margin:0 0 42px !important;

  padding:0 !important;

  color:var(--index-slate) !important;

  font-family:"Cormorant Garamond",serif !important;
  font-size:clamp(42px,5vw,68px) !important;
  font-weight:600 !important;

  line-height:1 !important;
  text-align:center !important;
}

.activities .slider-container{
  position:relative !important;

  width:min(1360px,100%) !important;

  margin:0 auto !important;

  overflow:hidden !important;

  padding:0 !important;
}

.activities .slider{
  display:flex !important;

  width:100% !important;

  gap:0 !important;

  padding:8px 0 35px !important;

  overflow:visible !important;

  transform:translate3d(0,0,0);

  transition:
    transform .75s cubic-bezier(.22,1,.36,1) !important;
}

.activities .slide{
  flex:0 0 33.333333% !important;
  width:33.333333% !important;
  min-width:33.333333% !important;

  padding:10px !important;

  box-sizing:border-box !important;
}

.activities .slide img{
  width:100% !important;

  height:390px !important;

  object-fit:cover !important;

  border-radius:25px 25px 0 0 !important;
}

.activities .slide .content{
  min-height:165px !important;

  padding:25px 24px 28px !important;

  background:#fff !important;

  border:0 !important;
  border-radius:0 0 25px 25px !important;

  box-shadow:
    0 18px 45px rgba(46,64,82,.10) !important;

  text-align:left !important;
}

.activities .slide .content h3{
  margin:0 0 10px !important;

  color:var(--index-slate) !important;

  font-family:"Cormorant Garamond",serif !important;
  font-size:31px !important;
  font-weight:600 !important;

  line-height:1.05 !important;
}

.activities .slide .content p{
  margin:0 !important;

  color:#61707a !important;

  font-family:"DM Sans",sans-serif !important;
  font-size:14px !important;
  line-height:1.7 !important;

  opacity:1 !important;
  visibility:visible !important;
}

.activities .slide .btn{
  margin-top:18px !important;

  min-height:44px !important;

  padding:0 20px !important;

  background:var(--index-gold) !important;
  color:var(--index-slate) !important;

  border:0 !important;
  border-radius:999px !important;

  font-size:10px !important;
}

.activities .slide .btn:hover{
  background:var(--index-slate) !important;
  color:#fff !important;

  transform:translateY(-2px) !important;
}

/* Activity arrows */
.activities .nav{
  position:absolute !important;

  top:50% !important;

  width:52px !important;
  height:52px !important;

  padding:0 !important;

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

  border:1px solid rgba(46,64,82,.10) !important;
  border-radius:50% !important;

  background:rgba(255,255,255,.96) !important;
  color:var(--index-slate) !important;

  transform:translateY(-50%) !important;

  box-shadow:
    0 12px 30px rgba(46,64,82,.16) !important;

  z-index:20 !important;
}

.activities .nav:hover{
  background:var(--index-slate) !important;
  color:#fff !important;

  transform:
    translateY(-50%)
    scale(1.07) !important;
}

.activities .prev{
  left:4px !important;
}

.activities .next{
  right:4px !important;
}


/* =========================================================
   5. WHY CHOOSE US — MORE BREATHING ROOM
========================================================= */

.why-choose{
  padding:145px 30px !important;

  background:#fff !important;
}

.why-container{
  width:min(1240px,100%) !important;

  margin:0 auto !important;

  display:grid !important;

  grid-template-columns:.78fr 1.22fr !important;

  gap:92px !important;

  align-items:center !important;
}

.why-text{
  max-width:470px;
}

.why-text h2{
  color:var(--index-slate) !important;

  font-family:"Cormorant Garamond",serif !important;
  font-size:clamp(52px,5vw,72px) !important;
  font-weight:600 !important;

  line-height:.92 !important;

  margin:0 !important;
}

.why-text h2::after{
  content:"";

  display:block;

  width:50px;
  height:1px;

  margin:29px 0;

  background:var(--index-gold);
}

.why-text p{
  margin:0 !important;

  color:#66737b !important;

  font-family:"DM Sans",sans-serif !important;
  font-size:15px !important;
  line-height:2 !important;
}

.why-cards{
  display:grid !important;

  grid-template-columns:
    repeat(3,minmax(0,1fr)) !important;

  gap:22px !important;
}

.why-card{
  position:relative !important;

  height:360px !important;
  min-height:360px !important;

  overflow:hidden !important;

  border-radius:24px !important;

  background-size:cover !important;
  background-position:center !important;

  box-shadow:
    0 20px 50px rgba(46,64,82,.14) !important;

  transition:
    transform .4s ease,
    box-shadow .4s ease !important;
}

.why-card:hover{
  transform:translateY(-9px) !important;

  box-shadow:
    0 30px 65px rgba(46,64,82,.20) !important;
}

.why-card .overlay{
  background:
    linear-gradient(
      180deg,
      rgba(46,64,82,.04),
      rgba(24,33,43,.82)
    ) !important;
}

.why-card .icon{
  color:var(--index-gold) !important;
}

.why-card h3{
  color:#fff !important;
}


/* =========================================================
   6. INDEX CONTACT
========================================================= */

.index-contact{
  width:min(1200px,calc(100% - 30px)) !important;

  margin:70px auto 55px !important;

  padding:48px !important;

  background:#fff !important;

  border-radius:25px !important;

  box-shadow:
    0 18px 50px rgba(46,64,82,.10) !important;
}


/* =========================================================
   7. FOOTER — BETTER BUT SIMPLE
========================================================= */

footer{
  margin-top:0 !important;

  padding:65px 22px 32px !important;

  background:
    linear-gradient(
      135deg,
      #2E4052 0%,
      #223442 100%
    ) !important;

  color:#fff !important;

  text-align:center !important;

  border-top:4px solid var(--index-gold) !important;
}

footer::before{
  content:"DREAM FILTERS DANDELI";

  display:block;

  margin-bottom:14px;

  color:#fff;

  font-family:"Cormorant Garamond",serif;

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

  letter-spacing:.04em;
}

footer p{
  margin:7px auto !important;

  color:rgba(255,255,255,.78) !important;

  font-family:"DM Sans",sans-serif !important;

  font-size:12px !important;

  letter-spacing:.06em;
}

footer p:last-child{
  margin-top:20px !important;

  color:var(--index-gold) !important;
}


/* =========================================================
   8. MOBILE — NO BLANK ACTIVITIES
========================================================= */

@media(max-width:900px){

  .services{
    padding:75px 16px 90px !important;
  }

  .services > h2{
    margin-bottom:34px !important;
    font-size:36px !important;
  }

  .services-grid{
    grid-template-columns:1fr !important;
    gap:20px !important;
    max-width:430px !important;
  }

  .service-card{
    min-height:205px !important;
    padding:42px 25px !important;
  }

  .service-card .icon{
    margin-bottom:20px !important;
    font-size:44px !important;
  }

  .service-card h3{
    font-size:20px !important;
  }

  .activities{
    padding:72px 10px 92px !important;
  }

  .activities .section-title{
    margin-bottom:26px !important;
    padding:0 10px !important;
    font-size:clamp(37px,10vw,52px) !important;
  }

  .activities .slider-container{
    display:block !important;
    min-height:0 !important;
  }

  .activities .slider{
    display:flex !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    padding:7px 0 28px !important;
    overflow:visible !important;
    gap:0 !important;
  }

  .activities .slide{
    display:block !important;

    flex:0 0 100% !important;
    width:100% !important;
    min-width:100% !important;

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

    padding:8px !important;

    opacity:1 !important;
    visibility:visible !important;
  }

  .activities .slide img{
    display:block !important;

    width:100% !important;

    height:360px !important;

    min-height:360px !important;

    object-fit:cover !important;

    border-radius:23px 23px 0 0 !important;
  }

  .activities .slide .content{
    display:block !important;

    min-height:180px !important;

    padding:24px 21px 28px !important;

    border-radius:0 0 23px 23px !important;

    opacity:1 !important;
    visibility:visible !important;
  }

  .activities .slide .content h3{
    font-size:31px !important;
  }

  .activities .slide .content p{
    font-size:13px !important;
    line-height:1.7 !important;
  }

  .activities .nav{
    display:none !important;
  }

  .why-choose{
    padding:95px 18px 105px !important;
  }

  .why-container{
    display:flex !important;
    flex-direction:column !important;

    gap:58px !important;
  }

  .why-text{
    max-width:500px !important;

    text-align:center !important;
  }

  .why-text h2{
    font-size:50px !important;
  }

  .why-text h2::after{
    margin:24px auto !important;
  }

  .why-text p{
    font-size:14px !important;
    line-height:1.85 !important;
  }

  .why-cards{
    width:100% !important;

    grid-template-columns:1fr !important;

    gap:22px !important;

    max-width:480px !important;

    margin:0 auto !important;
  }

  .why-card{
    width:100% !important;

    height:290px !important;
    min-height:290px !important;
  }

  .index-contact{
    width:calc(100% - 24px) !important;

    margin:
      35px auto
      75px !important;

    padding:
      40px 20px !important;

    border-radius:23px !important;

    gap:24px !important;
  }

  footer{
    padding:52px 17px 30px !important;
  }

  footer::before{
    font-size:30px !important;
  }
}


/* =========================================================
   9. SMALL PHONES
========================================================= */

@media(max-width:480px){

  .navbar{
    top:8px !important;
    left:8px !important;
    right:8px !important;
  }

  #navMenu{
    width:84vw !important;
    max-width:300px !important;
  }

  .hero-content{
    padding-left:17px !important;
    padding-right:17px !important;
  }

  .hero-content h1{
    font-size:clamp(41px,13vw,59px) !important;
  }

  .hero-content p{
    font-size:9px !important;
    letter-spacing:.10em !important;
  }

  .activities .slide img{
    height:320px !important;
    min-height:320px !important;
  }

  .activities .slide .content{
    min-height:175px !important;
  }

  .activities .slide .content h3{
    font-size:29px !important;
  }

  .why-text h2{
    font-size:45px !important;
  }
}


/* =========================================================
   10. NO PURPLE / VIOLET INTERACTIVE COLORS
========================================================= */

.primary,
.feature-btn,
.slide .btn{
  background:var(--index-gold) !important;
  color:var(--index-slate) !important;
}

.primary:hover,
.feature-btn:hover,
.slide .btn:hover{
  background:var(--index-slate) !important;
  color:#fff !important;
}

.nav{
  border-color:var(--index-gold) !important;
}

.contact-form-only button{
  background:var(--index-gold) !important;
  color:var(--index-slate) !important;
}

.contact-form-only button:hover{
  background:var(--index-slate) !important;
  color:#fff !important;
}


/* =========================================================
   11. PREVENT INVISIBLE / COLLAPSED INDEX CONTENT
========================================================= */

.activities,
.services,
.why-choose,
.index-contact,
footer{
  visibility:visible !important;
}

.activities .slider,
.activities .slide,
.services-grid,
.service-card,
.why-container,
.why-cards,
.why-card{
  opacity:1 !important;
  visibility:visible !important;
}
/* =========================================================
   FINAL MOBILE NAVBAR FIX
   ========================================================= */

@media (max-width: 900px) {

    /* Main navbar */
    .navbar {
        position: fixed !important;
        top: 8px !important;
        left: 8px !important;
        right: 8px !important;

        width: auto !important;
        height: 82px !important;
        min-height: 82px !important;

        padding: 5px 12px 5px 18px !important;

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

        background: #ffffff !important;

        border: 1px solid rgba(46, 64, 82, 0.12) !important;
        border-radius: 18px !important;

        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;

        z-index: 5000 !important;

        pointer-events: auto !important;
    }


    /* BIG LOGO */
    .navbar .logo {
        display: flex !important;
        align-items: center !important;

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

        pointer-events: auto !important;
    }

    .navbar .logo img {
        width: 105px !important;
        height: 72px !important;

        max-width: none !important;

        object-fit: contain !important;

        display: block !important;

        margin: 0 !important;
    }


    /* =====================================================
       HAMBURGER / X
    ===================================================== */

    .navbar .hamburger {
        display: flex !important;

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

        width: 48px !important;
        height: 48px !important;

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

        background: transparent !important;
        border: 0 !important;

        color: #000000 !important;

        font-size: 29px !important;
        font-weight: 900 !important;

        line-height: 1 !important;

        opacity: 1 !important;
        visibility: visible !important;

        cursor: pointer !important;

        position: relative !important;
        z-index: 5200 !important;

        pointer-events: auto !important;
    }

    .navbar .hamburger:hover {
        color: #000000 !important;
        background: transparent !important;
    }


    /* =====================================================
       OVERLAY
       IMPORTANT: NO BLUR
    ===================================================== */

    #overlay {
        position: fixed !important;

        inset: 0 !important;

        background: rgba(0, 0, 0, 0.38) !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        opacity: 1 !important;

        z-index: 4900 !important;

        pointer-events: auto !important;
    }


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

    #navMenu {
        position: fixed !important;

        top: 0 !important;
        right: -100% !important;

        width: min(315px, 82vw) !important;
        height: 100vh !important;
        height: 100svh !important;

        margin: 0 !important;

        padding: 110px 24px 35px !important;

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

        align-items: stretch !important;
        justify-content: flex-start !important;

        gap: 0 !important;

        background: #2E4052 !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: -15px 0 45px rgba(0, 0, 0, 0.28) !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        transition: right 0.4s ease !important;

        z-index: 5100 !important;

        overflow-y: auto !important;

        pointer-events: auto !important;
    }


    /* OPEN MENU */

    #navMenu.active {
        right: 0 !important;
    }


    /* MENU ITEMS */

    #navMenu li {
        display: block !important;

        width: 100% !important;

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


    #navMenu li a {
        display: block !important;

        width: 100% !important;

        padding: 18px 12px !important;

        color: #ffffff !important;

        background: transparent !important;

        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;

        font-family: "DM Sans", sans-serif !important;

        font-size: 13px !important;
        font-weight: 700 !important;

        letter-spacing: 0.12em !important;

        text-decoration: none !important;

        cursor: pointer !important;

        pointer-events: auto !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    #navMenu li a:hover {
        color: #D9BF77 !important;

        background: rgba(255, 255, 255, 0.06) !important;

        transform: none !important;
    }


    #navMenu li a::after {
        display: none !important;
    }


    /* =====================================================
       REMOVE ALL BLUR FROM OPEN-MENU BACKGROUND
    ===================================================== */

    body.menu-open,
    body:has(#navMenu.active) {
        overflow: hidden !important;
    }


    /* =====================================================
       SMALL SCREEN LOGO
    ===================================================== */

    @media (max-width: 480px) {

        .navbar {
            height: 78px !important;
            min-height: 78px !important;
        }

        .navbar .logo img {
            width: 96px !important;
            height: 67px !important;
        }

        .navbar .hamburger {
            width: 45px !important;
            height: 45px !important;
            font-size: 27px !important;
        }

        #navMenu {
            width: 84vw !important;
            padding-top: 100px !important;
        }
    }
}

/* =========================================================
   FINAL REQUESTED CHANGES — ACTIVITIES ONLY
   1. Larger activity images
   2. Same typography system as the rest of the website
   No other sections are intentionally changed.
========================================================= */


/* -------------------------
   ACTIVITIES TYPOGRAPHY
   Headings: Cormorant Garamond
   Body/UI: DM Sans
------------------------- */

.activities .section-title,
.activities .slide .content h3{
    font-family:"Cormorant Garamond", serif !important;
    font-weight:600 !important;
    letter-spacing:-0.02em !important;
}

.activities .slide .content p,
.activities .slide .content .btn,
.activities .nav{
    font-family:"DM Sans", sans-serif !important;
}

.activities .section-title{
    font-size:clamp(44px,5vw,68px) !important;
    line-height:.95 !important;
}

.activities .slide .content h3{
    font-size:34px !important;
    line-height:1.05 !important;
}

.activities .slide .content p{
    font-size:14px !important;
    line-height:1.75 !important;
}


/* -------------------------
   DESKTOP — BIGGER IMAGES
------------------------- */

@media (min-width:901px){

    .activities .slide img{
        width:100% !important;
        height:460px !important;
        min-height:460px !important;
        object-fit:cover !important;
        display:block !important;
    }

    .activities .slide .content{
        min-height:190px !important;
        padding:28px 25px 30px !important;
    }
}


/* -------------------------
   TABLET
------------------------- */

@media (min-width:601px) and (max-width:900px){

    .activities .slide img{
        width:100% !important;
        height:420px !important;
        min-height:420px !important;
        object-fit:cover !important;
        display:block !important;
    }

    .activities .slide .content h3{
        font-size:32px !important;
    }
}


/* -------------------------
   MOBILE — MUCH BIGGER IMAGE
------------------------- */

@media (max-width:600px){

    .activities .slide{
        min-width:100% !important;
        width:100% !important;
    }

    .activities .slide img{
        width:100% !important;
        height:430px !important;
        min-height:430px !important;
        max-height:430px !important;
        object-fit:cover !important;
        display:block !important;
        border-radius:24px 24px 0 0 !important;
    }

    .activities .slide .content{
        padding:26px 21px 30px !important;
        min-height:205px !important;
    }

    .activities .slide .content h3{
        font-size:32px !important;
        line-height:1.05 !important;
        margin-bottom:11px !important;
    }

    .activities .slide .content p{
        font-size:13px !important;
        line-height:1.75 !important;
    }
}


/* -------------------------
   VERY SMALL PHONES
------------------------- */

@media (max-width:380px){

    .activities .slide img{
        height:390px !important;
        min-height:390px !important;
        max-height:390px !important;
    }

    .activities .slide .content h3{
        font-size:29px !important;
    }
}


/* Keep activity cards fully visible */
.activities .slide,
.activities .slide img,
.activities .slide .content{
    opacity:1 !important;
    visibility:visible !important;
}