:root {
    --purple-deep: #3b0764;
    --purple-mid: #7c3aed;
    --purple-light: #6D5DF6;
    --purple-gradient: linear-gradient(180deg, rgba(76, 0, 176, 1) 0%, rgba(109, 93, 246, 1) 50%, rgba(169, 156, 253, 1) 100%);
    --white: #f5f0ff;
    --font-color: #260058;
}

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

body {
    font-family: 'Outfit', sans-serif;
    background: var(--white);
    color: var(--font-color);
}

.bg-blob {
    position: fixed;
    top: 100px;
    left: 0%;
    width: 50%;
    height: 110vh;
    transition: transform 0.05s linear;
    background-image: url("../resources/img/services/Ellipse.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}

/* ════════════════════
   HERO
════════════════════ */
.hero {
    position: relative;
    width: 100%;
    height: 42vw;
    min-height: 260px;
    max-height: 480px;
    overflow: hidden;
    background: var(--font-color);
    z-index: 1;
}

.hero-video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    display: block;
}

.hero-video-content {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    display: block;
}

/* Very subtle top-only darkening, strong white fade at bottom */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.0) 0%,
            rgba(0, 0, 0, 0.0) 55%,
            rgba(245, 240, 255, 0.55) 78%,
            rgba(245, 240, 255, 1.0) 100%);
}

/* Content — bottom-left with purple left bar */
.hero-content {
    position: absolute;
    z-index: 2;
    bottom: 22px;
    left: 0;
    right: 0;
    padding: 0 40px 0 22px;
    display: flex;
    align-items: center;
    gap: 25px;
    max-width: 600px;
}

.hero-bar {
    width: 3px;
    height: 40px;
    background: var(--purple-light);
    border-radius: 2px;
    flex-shrink: 0;
}

.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(25px, 3.1vw, 37px);
    font-weight: 700;
    color: var(--font-color);
    line-height: 1.2;
}

/* No sub/desc in this design */
.hero-sub,
.hero-desc {
    display: none;
}


/* ════════════════════
   RESPONSIVE
════════════════════ */

@media (min-width: 1101px) {
    .hero-content {
        left: 0;
        margin-left: 40px;
        /* bottom: 60px; */
        padding-left: 40px;
    }
}

@media (max-width: 1100px) and (min-width: 851px) {
    .hero-content {
        left: 32px;
        bottom: 20px;
    }
}

@media (max-width: 850px) and (min-width: 538px) {
    .hero {
        height: 48vw;
        min-height: 220px;
        max-height: 340px;
    }

    .hero-content {
        left: 24px;
        bottom: 16px;
    }

    .hero-bar {
        height: 40px;
    }
}

@media (max-width: 537px) {
    .hero {
        height: 52vw;
        min-height: 180px;
        max-height: 280px;
    }

    .hero-content {
        left: 16px;
        bottom: 12px;
        gap: 20px;
    }

    .hero-bar {
        height: 50px;
        width: 3px;
    }

    /* .hero-title {
        font-size: clamp(14px, 4vw, 20px);
    } */
}

@media (max-width: 380px) {
    .hero {
        height: 54vw;
        min-height: 160px;
    }

    .hero-content {
        left: 12px;
        bottom: 10px;
    }
}




/* ════════════════════════════════════════
   SECTION WRAPPER
════════════════════════════════════════ */
.destinations-section {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 60px 32px 80px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ════════════════════════════════════════
   CARD — default #f5f0ff, hover purple gradient
════════════════════════════════════════ */
.dest-card {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 4px 24px rgba(100, 60, 200, 0.10);
  position: relative;
  transition: box-shadow 0.35s ease;
  cursor: pointer;
}

/* Purple gradient overlay */
.dest-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: var(--purple-gradient);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 1;
}

.dest-card:hover {
  box-shadow: 0 14px 44px rgba(100, 60, 200, 0.28);
}

.dest-card:hover::before {
  opacity: 1;
}

/* ════════════════════════════════════════
   INNER WRAPPER — above overlay
════════════════════════════════════════ */
.dest-inner {
  position: relative;
  z-index: 2;
  padding: 32px 36px 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ════════════════════════════════════════
   ROWS
════════════════════════════════════════ */
.dest-row {
  display: grid;
  gap: 24px;
  align-items: start;
  width: 100%;
}

/* Card 1 — Row 1: 40% | 60% */
.row1-card1 {
  grid-template-columns: 40% 1fr;
}

/* Card 1 — Row 2: 40% | 60% */
.row2-card1 {
  grid-template-columns: 40% 1fr;
  align-items: stretch;
}

/* Card 2 — Row 1: 60% | 40% */
.row1-card2 {
  grid-template-columns: 1fr 40%;
}

/* Card 2 — Row 2: 60% | 40% */
.row2-card2 {
  grid-template-columns: 1fr 40%;
  align-items: stretch;
}

/* ════════════════════════════════════════
   MAIN SINGLE IMAGE (Row 1) — stretch to text height
════════════════════════════════════════ */

/* Row must be stretch so columns share same height */
.row1-card1,
.row1-card2 {
  align-items: stretch;
}

/* Image column fills full row height */
.col-img {
  display: flex;
  flex-direction: column;
}

.main-img-wrap {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  flex: 1;               /* stretch to fill col-img height */
  display: flex;
}

.main-img-wrap img {
  width: 100%;
  height: 100%;          /* fill the stretched wrapper */
  min-height: 200px;     /* safety floor */
  object-fit: cover;
  object-position: center 40%;
  display: block;
  transition: transform 0.5s ease;
}

.dest-card:hover .main-img-wrap img {
  transform: scale(1.04);
}

/* ════════════════════════════════════════
   TRIPLE IMAGES (Row 2)
   Layout: [img-sm] [img-wide] [img-sm]
   img1 & img3 same width, img2 wider
════════════════════════════════════════ */
.triple-imgs {
  display: grid;
  /* 1fr = small, 1.6fr = wide, 1fr = small */
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: 8px;
  align-items: stretch;
  height: 100%;
}

.tri-img {
  border-radius: 10px;
  overflow: hidden;
  display: flex;
}

.tri-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

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

/* ════════════════════════════════════════
   TYPOGRAPHY — default
════════════════════════════════════════ */
.dest-label {
  font-family: 'Outfit', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--purple-light);
  margin-bottom: 6px;
  transition: color 0.35s ease;
}

.dest-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 2.8vw, 38px);
  font-weight: 800;
  color: var(--font-color);
  line-height: 1.12;
  margin-bottom: 16px;
  transition: color 0.35s ease;
}

.dest-title em {
  font-style: italic;
  color: var(--purple-light);
  transition: color 0.35s ease;
}

.dest-para {
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  line-height: 1.78;
  color: var(--font-color);
  margin-bottom: 10px;
  transition: color 0.35s ease;
  text-align: justify;
}

.dest-para:last-child {
  margin-bottom: 0;
}

/* ════════════════════════════════════════
   TYPOGRAPHY — hover (white)
════════════════════════════════════════ */
.dest-card:hover .dest-label {
  color: rgba(255, 255, 255, 0.75);
}

.dest-card:hover .dest-title {
  color: #f5f0ff;
}

.dest-card:hover .dest-title em {
  color: #a096fa;
}

.dest-card:hover .dest-para {
  color: rgba(255, 255, 255, 0.82);
}

/* ════════════════════════════════════════
   RESPONSIVE — Tablet 641–960px
════════════════════════════════════════ */
@media (max-width: 960px) and (min-width: 641px) {
  .destinations-section {
    padding: 48px 24px 64px;
    gap: 22px;
  }

  .dest-inner {
    padding: 26px 26px 30px;
    gap: 20px;
  }

  .row1-card1,
  .row2-card1 {
    grid-template-columns: 42% 1fr;
  }

  .row1-card2,
  .row2-card2 {
    grid-template-columns: 1fr 42%;
  }

  .tri-img img {
    min-height: 130px;
  }

  .triple-imgs {
    gap: 6px;
  }

  .dest-title {
    font-size: clamp(20px, 2.8vw, 30px);
    margin-bottom: 12px;
  }
}

/* ════════════════════════════════════════
   RESPONSIVE — Mobile ≤ 640px
   Everything stacks to single column
════════════════════════════════════════ */
@media (max-width: 700px) {
  .destinations-section {
    padding: 36px 16px 52px;
    gap: 18px;
  }

  .dest-card {
    border-radius: 16px;
  }

  .dest-inner {
    padding: 20px 18px 24px;
    gap: 18px;
  }

  /* All rows → single column */
  .row1-card1,
  .row2-card1,
  .row1-card2,
  .row2-card2 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Card 2 Row 1: image goes below text on mobile */
  .row1-card2 .col-img {
    order: 2;
  }

  /* Card 2 Row 2: images go above para on mobile */
  .row2-card2 .col-imgs {
    order: 1;
  }

  .row2-card2 .col-text {
    order: 2;
  }

  .main-img-wrap img {
    min-height: 210px;   /* mobile floor only */
  }

  /* Triple images: keep side by side on mobile, adjust heights */
  .triple-imgs {
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 6px;
  }

  .tri-img img {
    min-height: 110px;
    height: auto;
  }

  .dest-title {
    font-size: clamp(20px, 5.5vw, 26px);
    margin-bottom: 10px;
  }

  .dest-para {
    font-size: 12px;
  }

  .dest-label {
    font-size: 10px;
  }
}

/* ════════════════════════════════════════
   RESPONSIVE — Small mobile ≤ 400px
════════════════════════════════════════ */
@media (max-width: 400px) {
  .destinations-section {
    padding: 28px 12px 44px;
  }

  .dest-inner {
    padding: 18px 14px 20px;
  }

  .main-img-wrap img {
    min-height: 180px;
  }

  /* Very small: stack triple images vertically */
  .triple-imgs {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .tri-img img {
    min-height: 160px;
    height: auto;
  }
}