/* HomePage - HERA Resort
   Cleaned & grouped by sections.
*/
a {
  text-decoration: none;
}
.wave,
.wave-mb {
  position: absolute;
  /* top: 150rem; */
  z-index: 4;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.deco-wave {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

picture {
  pointer-events: none;
}
.wave-mb-1 {
  top: 490rem;
  right: 0;
  width: 100%;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 35%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 20%,

    rgba(0, 0, 0, 0.2) 90%,
    black 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.wave-mb {
  display: none;
}
.wave-mb-2 {
  top: 122rem;
  width: 100%;
  height: 16.625rem;

  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 35%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,

    rgba(0, 0, 0, 0.382) 20%,
    black 60%,
    rgba(0, 0, 0, 0.533) 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.wave-mb-3 {
  top: 11rem;
  z-index: 0;
  right: 0;
  width: 11.3rem;
  height: 19.9rem;
}
.wave-mb-4 {
  top: 39rem;
  z-index: 0;
  left: 0;
  width: 20.3125rem;
  height: 11.125rem;
  mask-image: radial-gradient(
    ellipse at center,
    black 0%,
    black 35%,
    rgba(0, 0, 0, 0.7) 50%,
    rgba(0, 0, 0, 0.35) 65%,
    transparent 68%
  );

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-position: -10rem 4rem;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.wave-5 {
  top: -39rem;
  width: 37.6875rem;
  height: 105.75rem;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 35%,
    black 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 35%,
    black 63%,
    black 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.wave-4 {
  width: 32.375rem !important;
  height: 70rem !important;
  top: 320.5rem;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 35%,
    black 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 19%,
    black 35%,
    black 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  opacity: 0.5 !important;
}
.wave-1 {
  top: -25rem;
  left: unset !important;
  right: 0 !important;
  width: 30.0625rem !important;
  height: 38.4375rem !important;
}
.wave-2 {
  width: 36.8125rem;
  height: 35.5625rem;
  left: 0;
  top: 150rem;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 35%,
    black 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 28%,
    black 35%,
    black 100%
  );

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.wave-3 {
  width: 15.125rem !important;
  height: 38.125rem !important;
  right: 0;
  left: unset !important;
  top: 18rem;
}

.wave-6 {
  top: 506rem;
  right: 0;
  width: 31.125rem;
  height: 75.375rem;
  opacity: 0.4314 !important;
}
.muithuyen {
  position: absolute;
  z-index: 2;
  top: 45.1rem;
  left: 15.46rem;
  width: 71.48244rem;
  height: 17.75175rem;
}

.button-navigation {
  pointer-events: all;
  display: flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 1.125rem;
  border: 1px solid #a1dcf4;
  transition: all ease 0.3s;
  padding: 0;
  background: #a1dcf4;
  color: #fff;
}
.section-investment__wrapper {
  position: relative;
}
@media (min-width: 640px) {
  .hero-title__group.group-left span:last-child {
    margin-left: -6rem;
  }
  .footer {
    background: #123358;
  }
  .button-navigation:hover {
    opacity: 0.8;
  }
  .section-investment__wrapper {
    position: relative;
    margin-top: -8rem;
    margin-bottom: -8rem;
  }
  .investment {
    transform: scale(0.8);
  }
  .section-8-img {
    transform: scale(1.35);
    z-index: -1;
    -webkit-mask-image: linear-gradient(
      to top,
      transparent 0%,
      #000 35%,
      #000 100%
    );
    mask-image: linear-gradient(to top, transparent 0%, #000 35%, #000 100%);
  }
}
.button-navigation.swiper-button-disabled {
  color: #a1dcf4;
  background: transparent;
  opacity: 0.5;
  pointer-events: none;
}

.button-navigation svg {
  height: 0.875rem;
}
.gallery-navigation-wrapper {
  position: absolute;
  top: 50%;
  display: flex;
  justify-content: space-between;
  width: 103%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.gallery-swiper-wrapper {
  position: relative;
}
/* ==================================================
   01. Base / Layout chung
   ================================================== */
section {
  z-index: 2;
}
.home-page {
  width: 100%;
  overflow: hidden;
}

/* Lenis smooth-scroll (desktop only; class added by JS while active). Lenis
   drives native scroll, so position:fixed keeps working. */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}
.section {
  position: relative;
  width: 100%;
}
.deep {
  background: #252525;
}
.black {
  background: #000000;
}
.container {
  width: 75rem;
  margin: 0 auto;
  position: relative;
}

/* ==================================================
   02. Typography / Utilities
   ================================================== */
.butler {
  font-family: "SVN-Butler", serif;
}
.rosmerta {
  font-family: "DFVN_Rosmerta", "SVN-Butler", serif;
}
.muted-blue {
  color: #a1dcf4;
}
.title-display {
  font-family: "SVN-Butler", serif;
  font-size: 6rem;
  font-weight: 300;
  line-height: 6.25rem;
  letter-spacing: 0;
}
.title-xl {
  position: relative;
  font-family: "SVN-Butler", serif;
  font-size: 4.25rem;
  font-style: normal;
  font-weight: 300;
  line-height: 88%;
  letter-spacing: -0.085rem;
  z-index: 3;
}
.title-lg {
  font-family: "SVN-Butler", serif;
  font-size: 3.375rem;
  font-weight: 300;
  line-height: 3.625rem;
  letter-spacing: 0;
}
.subtitle {
  font-family: "SVN-Butler", serif;
  font-size: 2.375rem;
  font-weight: 300;
  line-height: 2.8125rem;
  letter-spacing: 0;
  margin-top: 1rem !important;
}
.body-lg {
  font-size: 1.125rem;
  line-height: 1.575rem;
}
.body-md {
  font-size: 1rem;
  line-height: 1.4rem;
}
.body-sm {
  font-size: 0.875rem;
  line-height: 1.225rem;
}
.gradient-title {
  color: transparent;
  background: linear-gradient(180deg, #ffffff 44%, rgba(255, 255, 255, 0) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  /* text-shadow: 0 0 0.1875rem rgba(76, 161, 197, 0.5); */
}

.gradient-sub-title span {
  top: 0 !important;
  left: 0 !important;
  font-family: "SVN-Aptima";
}
.gradient-sub-title {
  position: absolute !important;
  top: 0;
  font-size: 1.5rem;
  left: 65.5rem;
}
.gradient-other-text {
  left: 34rem;
  top: 4rem;
}
.gradient-other-text span {
  font-family: "BicKham";
}
.glyph-c {
  display: inline;
  font-feature-settings: "swsh" 1;
}
.glyph-g {
  display: inline;
  font-feature-settings: "salt" 6;
}
/* Hide the hero title before GSAP's entrance runs so it never flashes on first
   load. GSAP reveals it (and the reduced-motion branch shows it immediately).
   Only applies when JS is active (.js-anim set in <head>). */
.js-anim #hero-title .gradient-title {
  visibility: hidden;
}
.section-symbol {
  width: 4.0153rem;
  height: 3.2756rem;
  object-fit: contain;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.dots {
  display: flex;
  gap: 0.6875rem;
  justify-content: center;
  margin-top: 1rem;
}
.dots span,
.dots .swiper-pagination-bullet {
  margin: 0 !important;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  border: 0.0625rem solid #a1dcf4;
  /* Override Swiper's default filled/translucent bullets to hollow dots. */
  background: transparent;
  opacity: 1;
  margin: 0;
  cursor: pointer;
  transition: background 0.3s ease;
}

.dots .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #a1dcf4;
}

/* ==================================================
   03. Background / Decoration assets
   ================================================== */
.background {
  position: absolute;
  top: -12.62rem;
  object-fit: cover;
  width: 100%;
}
.background-2-section {
  position: relative;
  width: 100%;
  height: 0;
  overflow: visible;
  z-index: 1;
}
.background-color-layer {
  display: none;
  position: absolute;
  top: -12rem;
  width: 100%;
  height: 44rem;
  background: linear-gradient(
    180deg,
    rgba(220, 209, 202, 0) 0%,
    #c7a293 28%,
    #ebc0a8 50%,
    #fdd4b5 72%,
    rgba(220, 209, 202, 0) 100%
  );
  /* z-index: 1;
  /* z-index: 1; */
}
.background-2-section img {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
  pointer-events: none;
}
.background-tuyet-tac {
  position: absolute;
  top: -39rem;
}
.background-the-hera {
  position: absolute;

  top: 6rem;
}
.background-dao {
  top: -22.4rem;
}
.peacock {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  width: 86.625rem;
  height: 62.0625rem;
  /* Promote to its own GPU layer so the scroll tilt composites instead of
     repainting this huge (1664x1192) region every frame (fixes scroll jank). */
  will-change: transform;
}
.peacock img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* Each feather layer gets its own composited layer for the idle shimmer. */
  will-change: transform;
  backface-visibility: hidden;
}
.peacock-1 {
  z-index: 1;
}
.peacock-2 {
  z-index: 2;
}
.logo-text {
  position: absolute;
  top: 6rem;
  /* z-index: -1; */
}

.section-10-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.section-12-img {
  position: relative;
  height: 101%;
  width: 100%;
  top: -1px;
}

.bg-section-12 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* ==================================================
   04. Header
   ================================================== */

/* ==================================================
   05. Hero
   ================================================== */
.hero-video {
  pointer-events: none;
  position: relative;
  z-index: 2;
  width: 100%;
  top: 30rem;
  pointer-events: none;
}
.hero-video-mb {
  pointer-events: none;
  display: none;
  position: relative;
  width: 100%;
  top: 23rem;
  z-index: 2;
}
.hero {
  height: 128.4375rem;
}
.hero-title {
  position: absolute;
  top: 37rem;
  width: 100%;
  left: 0;
  display: flex;
  align-items: flex-start;
  text-shadow: 0 0 22.379px rgba(255, 255, 255, 0.4);
  font-family: SVN-Butler;
  letter-spacing: -0.08725rem;
}

.hero-title__group {
  position: relative;
  /* width: 28.75rem; */
  height: 11.375rem;
}
.hero-title__group span {
  white-space: nowrap;
  display: block;
  text-shadow: 0 0 0.3rem rgba(255, 255, 255, 0.8);
}
.hero-title__group.group-left {
  left: 16rem;
  top: -0.4rem;
}
.hero-title__group.group-left span:first-child {
  top: 0;
  left: 1.25rem;
}

.say-band {
  position: absolute;
  top: 65.375rem;
  left: 0;
  width: 100%;
  height: 22.1875rem;
  background: #0a274a;
  overflow: hidden;
}
.say-band::before {
  content: "";
  position: absolute;
  inset: -6.4375rem 0 -4.25rem 0;
  background: linear-gradient(
    90deg,
    rgba(19, 53, 90, 0.76),
    rgba(19, 53, 90, 0.3)
  );
  mix-blend-mode: overlay;
  opacity: 0.78;
}
.say-copy {
  z-index: 5;
  position: absolute;
  top: 76.0625rem;
  right: 12.5rem;
  width: 38.5rem;
}
.say-columns {
  position: absolute;
  top: 88.6875rem;
  left: 12.5rem;
  z-index: 2;
  right: 12.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.8039rem;
  text-align: center;
}
.say-card h2 {
  margin: 0 0 0.7344rem;
  font-family: "SVN-Butler", serif;
  font-size: 1.75rem;
  line-height: 2.25rem;
  font-weight: 400;
  text-shadow: 0.0625rem 0.625rem 0.3125rem rgba(0, 0, 0, 0.72);
}
.say-card p {
  margin: 0;
}

/* ==================================================
   06. Santorini
   ================================================== */
.santorini {
  height: 42.5625rem;
  z-index: 2;
}

.santorini-copy {
  position: absolute;
  top: 6.4375rem;
  right: 12.5rem;
  text-align: center;
}
.stacked-title {
  position: relative;
  height: 9.625rem;
  margin: 0 auto 0.5rem;
  width: 23.75rem;
  color: #5d3d29;
  white-space: nowrap;
}
.stacked-title span {
  position: absolute;
}
.stacked-title span:nth-child(1) {
  top: 0;
  left: 0;
}
.stacked-title span:nth-child(2) {
  top: 3.5625rem;
  left: 9.0625rem;
}
.stacked-title span:nth-child(3) {
  top: 6.8125rem;
  left: 5.1875rem;
  font-size: 2.375rem;
  line-height: 2.8125rem;
}
.santorini-copy p {
  width: 18.5rem;
  margin: 0 auto;
  color: #5d3e2a;
}

/* ==================================================
   07. Project
   ================================================== */
.project {
  height: 58.1875rem;
  z-index: 2;
}
/*.project::before {*/
/*  content: "";*/
/*  position: absolute;*/
/*  inset: 0 45% 0 0;*/
/*  background: radial-gradient(*/
/*    circle at 50% 52%,*/
/*    rgba(161, 220, 244, 0.22),*/
/*    rgba(19, 53, 90, 0) 62%*/
/*  );*/
/*}*/
.project-copy {
  position: absolute;
  top: 18rem;
  right: 12.5rem;
  width: 27.25rem;
  text-align: center;
}
.project-title {
  height: 11.2132rem;
  width: 23.4936rem;
  margin: 0 auto 0.75rem;
  position: relative;
  white-space: nowrap;
}
.project-title span {
  position: absolute;
  text-shadow: 0 0 0.6rem rgb(0 0 0 / 40%);
}
.project-title span:first-child {
  top: 0;
  left: 0;
}
.project-title span:nth-child(2) {
  top: 3.4633rem;
  left: 4.9969rem;
}
.project-title small {
  position: absolute;
  top: 7.5882rem;
  left: 0.8093rem;
  font-size: 1.5rem;
  line-height: 1.8rem;
  font-family: "SVN-Butler", serif;
  font-weight: 400;
  text-shadow: 0 0 0.6rem rgb(0 0 0 / 40%);
}
.project-facts {
  width: 29.875rem;
  margin-top: -1.25rem;
  display: grid;
  gap: 0.625rem;
  text-align: left;
  padding: 1rem;
  background: linear-gradient(
    to top,
    transparent 0%,
    transparent 20%,
    rgba(61, 113, 143, 0.1) 38%,
    rgba(96, 122, 153, 0.62) 65%,
    #dea89bac 100%
  );
  border-radius: 1rem;
  backdrop-filter: blur(5px);
}
.fact {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1.1875rem;
  align-items: start;
}
.fact strong {
  font-weight: 700;
  padding-right: 1rem;
}
.fact p {
  margin: 0;
  align-self: end;
}

/* ==================================================
   08. Location
   ================================================== */
.location {
  height: 58.1875rem;
  z-index: unset;
}
.location::after {
  content: "";
  position: absolute;
  right: 0;
  top: 2rem;
  width: 56rem;
  height: 52rem;
  background: radial-gradient(
      circle at 54% 61%,
      rgba(161, 220, 244, 0.24),
      rgba(19, 53, 90, 0) 54%
    ),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
  border-radius: 50%;
  /* Ambient glow gently breathing under the sonar. GSAP drives these vars on
     .location (pseudo-elements can't be targeted directly). Origin = the
     radial-gradient centre (the project marker), so it radiates from there. */
  transform-origin: 54% 61%;
  transform: scale(var(--glow-scale, 1));
  opacity: var(--glow-opacity, 1);
  will-change: transform, opacity;
  display: none;
}
/* Sonar pulse overlaying the same box as ::after; core + rings sit on the
   project marker (55% 44%) and are animated by GSAP. */
.location-copy {
  position: absolute;
  top: -1.625rem;
  left: 12.5rem;
  width: 31.5625rem;
  z-index: 1;
}
.location-head {
  width: 21.375rem;
  height: 20.8092rem;
  position: relative;
  margin-bottom: 3.75rem;
}
.location-head span {
  position: absolute;
  white-space: nowrap;
}
.location-head span:nth-child(1) {
  top: 0;
  left: 0;
}
.location-head span:nth-child(2) {
  top: 2.875rem;
  left: 0;
}
.location-head span:nth-child(3) {
  top: 10.3568rem;
  left: 4rem;
  color: #78acc7;
}
.location-head span:nth-child(4) {
  top: 13.8092rem;
  left: 0;
}
.location-slider {
  /* Wider than the list so the Swiper's overflow:hidden never clips the
     right-hand stat column. */
  width: 22rem;
}
/* Keep the pagination in normal flow under the list (Swiper would otherwise
   position it absolutely at the bottom of the slider). */
.location-pagination.swiper-pagination {
  position: static;
  margin-top: 1.25rem;
}
.distance-list {
  display: grid;
  gap: 1rem;
  /* 14.5625 (label) + 0.5 (dot) + 4.375 (stat) + 2×0.625 (gaps) = 20.6875rem.
     Sized to the real content so the stat is never squeezed/clipped. */
  width: 20.6875rem;
}
.distance-item {
  display: grid;
  /* Middle column is a small fixed dot (was 1fr, which collapsed to 0). */
  grid-template-columns: 14.5625rem 0.5rem 4.375rem;
  gap: 0.625rem;
  align-items: center;
}
.distance-item h3 {
  margin: 0 0 0.3125rem;
  font-family: "SVN-Butler", serif;
  font-size: 1.125rem;
  line-height: 1.35rem;
  font-weight: 300;
}
.distance-item p {
  margin: 0;
}
.distance-line {
  /* Small dot connector between the label and the stat (matches Figma). */
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  justify-self: center;
  background: #a1dcf4;
  opacity: 0.7;
}
.distance-stat {
  text-align: left;
  font-family: "SVN-Butler", serif;
}
.distance-stat strong {
  display: block;
  font-size: 1.375rem;
  line-height: 1.8125rem;
  font-weight: 300;
}
.distance-stat span {
  display: block;
  color: #a1dcf4;
  font-size: 1.25rem;
  line-height: 1.8125rem;
}

/* ==================================================
   09. Quote
   ================================================== */
.quote {
  height: 44.625rem;
  z-index: 5;
}
.quote-copy {
  position: absolute;
  top: 0;
  left: 12.5rem;
  width: 25.5625rem;
  text-align: center;
}
.quote-copy .subtitle {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
  line-height: 1.8rem;
}
.background-2-section__dao {
  z-index: 3;
}
.quote-copy .title-xl {
  margin: 0;
  line-height: 4.25rem;
}
/* Seagull gliding into the quote section (animated by GSAP on scroll).
   Hidden until GSAP takes over so it never flashes at its resting spot. */
.bird {
  position: absolute;
  /* Resting spot: over the water/coastline on the right (see reference). */
  /* top: 12rem;
  left: 60rem; */
  top: -7rem;
  left: 70rem;
  width: 24rem;
  height: auto;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

/* ==================================================
   10. Amenities
   ================================================== */
.amenities {
  height: 34.75rem;
  z-index: 3;
}
.amenities-copy {
  position: absolute;
  top: 8.625rem;
  left: 12.5rem;
  width: 34.375rem;
}
.amenities-copy h2 {
  margin: 0 0 1.25rem;
  line-height: 4.3rem;
}
.amenities-copy p {
  margin: 0 0 3.9375rem;
}
.arrow-row {
  pointer-events: none;
  display: flex;
  gap: 1rem;
}
.nav-button {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(161, 220, 244, 0.16);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 1.375rem;
}
.amenities-swiper {
  position: absolute;
  top: 8.5625rem;
  right: 0rem;
  width: 51.125rem;
  height: 25.6875rem;
  overflow: hidden;
}
.amenity-card {
  position: relative;
  width: 25.875rem;
  height: 25.6875rem;
  overflow: hidden;
  margin-right: 0.5rem;
}
.amenity-card img,
.gallery-main img,
.gallery-thumb img,
.news-image img,
.gallery-main video,
.download-card img,
.investment-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.amenity-card::after,
.news-image::after {
  content: "";
  position: absolute;
  inset: 0;
  /* background: linear-gradient(180deg, rgba(18, 52, 89, 0) 58%, #123459 100%); */
  background: linear-gradient(
    180deg,
    rgba(17, 46, 80, 0) 0%,
    rgba(19, 53, 90, 0.59) 100%
  );
}
.amenity-label {
  width: calc(100% - 2.125rem);
  position: absolute;
  left: 2.125rem;
  bottom: 0;
  right: 2rem;

  z-index: 1;
  display: flex;
  align-items: flex-end;
}
.amenity-label strong {
  color: #a1dcf4;
  font-family: "DFVN Rosmerta";
  font-size: 6.01819rem;
  font-style: normal;
  font-weight: 400;
  line-height: 6.01819rem; /* 100% */
  letter-spacing: 0.18806rem;
}
.amenity-label span {
  margin-left: -1.5rem;
  color: #fff;
  margin-bottom: 1.125rem;
  font-family: SVN-Butler;
  font-size: 2.375rem;
  font-style: normal;
  font-weight: 300;
  line-height: 2.875rem;
  letter-spacing: -0.02375rem;
}

/* ==================================================
   11. Investment
   ================================================== */
.investment {
  height: 73.6875rem;
}
.investment-title {
  position: absolute;
  top: 17.9375rem;
  left: 50%;
  width: 28.75rem;
  transform: translateX(-50%);
  text-align: center;
}
.investment-title h2,
.investment-title p {
  margin: 0;
}
.investment-title h2 {
  margin-bottom: 1rem;
}
.investment-swiper {
  position: absolute;
  top: 33.375rem;
  left: 0;
  width: 100%;
  height: 48.25rem;
  overflow: visible;
}
/* Pagination is built manually (fixed 5 dots). The swiper box is much taller
   than the cards (which are top-aligned), so a static row would fall to the
   bottom of the box — past the section and behind the next one. Anchor it
   absolutely just below the centred card instead, above any later section. */
.investment-pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11rem !important;
  top: 39.5rem;
  width: 100%;
  margin-top: 0;
  z-index: 4;
}
.investment-card {
  position: relative;
  width: fit-content;
  height: fit-content;
  /* overflow: hidden; */
  box-shadow: 0 5.846px 28.647px 0 #000;
  /* border-radius: 50% / 35%; */
  transition: width 0.6s ease, height 0.6s ease, transform 0.6s ease;
  /* mask-image: linear-gradient(
    180deg,
    #d9d9d9 50%,
    rgba(255, 255, 255, 0) 74.66%
  ); */
  -webkit-mask-image: var(--mask-image);
  mask-image: var(--mask-image);

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
  /* background: var(--mask-image) center / cover; */
}
.investment-card .investment-card__image {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  -webkit-mask-image: linear-gradient(
    180deg,
    #d9d9d9 50%,
    rgba(255, 255, 255, 0) 74.66%
  );
  mask-image: linear-gradient(
    180deg,
    #d9d9d9 50%,
    rgba(255, 255, 255, 0) 74.66%
  );
}
.investment-card .investment-card__khung {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.investment-card.swiper-slide-active {
  transform: translateY(0) scale(1);
  z-index: 3;
}

.investment-card.swiper-slide-active + .investment-card {
  transform: translateY(-3.1875rem) scale(0.914);
  z-index: 2;
}
.investment-card:has(+ .investment-card.swiper-slide-active) {
  transform: translateY(-3.1875rem) scale(0.914);
  z-index: 2;
}

.investment-card.swiper-slide-active + .investment-card + .investment-card {
  /*transform-origin: left center;*/

  transform: translateY(-6.375rem) scale(0.744);
  z-index: 1;
}
.investment-card.swiper-slide-active
  + .investment-card
  + .investment-card
  + .investment-card {
  transform: translateY(-6.375rem) scale(0.744);
  z-index: 1;
}

.investment-card:has(
    + .investment-card + .investment-card.swiper-slide-active
  ) {
  /*transform-origin: right center;*/
  transform: translateY(-6.375rem) scale(0.744);
  z-index: 1;
}
.investment-card:has(
    + .investment-card + .investment-card + .investment-card.swiper-slide-active
  ) {
  transform: translateY(-6.375rem) scale(0.744);
  z-index: 1;
}

.investment-card__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  left: 3.0625rem;
  right: 3.0625rem;
  bottom: 3.25rem;
  text-align: center;
  z-index: 1;
}
.investment-card__copy strong {
  margin-left: 1.75rem;
  display: block;
  color: #fff;
  text-align: center;
  font-family: "DFVN Rosmerta";
  font-size: 3.49006rem;
  font-style: normal;
  font-weight: 400;
  line-height: 3.49006rem; /* 100% */
  letter-spacing: 0.10906rem;
  margin-bottom: 0.375rem;
}
.investment-card__copy h3 {
  width: 12.625rem;
  margin: 0 0 0.75rem;
  font-family: "SVN-Butler", serif;
  font-size: 1.125rem;
  line-height: 1.35rem;
  font-weight: 300;
}
.investment-card__copy p {
  width: 14.77rem;
  margin: 0;
  font-size: 0.75rem;
  line-height: 0.875rem;
}

/* ==================================================
   12. Gallery
   ================================================== */
.gallery {
  height: 57.3125rem;
}
.gallery-wrap {
  position: absolute;
  top: 3.875rem;
  left: 12.5rem;
  width: 75rem;
  z-index: 4;
}
.gallery-main {
  width: 75rem;
  height: 39rem;
  border-radius: 1.1875rem;
  overflow: hidden;
}
.gallery-thumbs {
  margin-top: 1.5rem;
  display: flex;

  height: 9.375rem;
}
.swiper-gallery-thumps {
  width: 100%;
  grid-column: 1 / -1;
  grid-row: 3;
}
.gallery-filter {
  width: 17.8125rem;
  margin-right: 1.5rem;
  position: relative;
  padding: 1.0625rem 1rem;
  border-radius: 0.75rem;
  overflow: hidden;
  flex-shrink: 0;
}
.gallery-filter__background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
/* .download-card__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.download-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  background: linear-gradient(0deg, #095564 0%, #095564 100%), #d9d9d9;
} */
.gallery-filter__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.gallery-filter__top {
  display: flex;
  gap: 1rem;
}
.gallery-filter h3 {
  margin: 0;
  font-family: "SVN-Butler", serif;
  font-size: 1.25rem;
  line-height: 1.3208rem;
  text-transform: uppercase;
  font-weight: 400;
}
.gallery-filter ul {
  margin: 0;
  padding: 0 0.5rem 0 0;
  list-style: none;
  color: #fff;
  font-family: SVN-Aptima;
  font-size: 0.73963rem;
  font-weight: 400;
  line-height: 0.73963rem;
  letter-spacing: -0.01444rem;

  max-height: 5.5rem;
  overflow-y: auto;

  scrollbar-width: none;
}
.gallery-filter ul::-webkit-scrollbar {
  display: none;
}
.gallery-filter li {
  opacity: 0.6;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.gallery-filter li + li {
  margin-top: 0.5rem;
}
.gallery-filter li.is-active {
  opacity: 1;
}
.gallery-filter button {
  align-self: stretch;
  padding: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  text-align: left;
  font-family: "SVN-Butler", serif;
  font-size: 1.25rem;
  line-height: 1.3208rem;
  text-transform: uppercase;
}
.gallery-filter button.is-active {
  color: #fff;
}
.gallery-thumb {
  border-radius: 0.625rem;
  overflow: hidden;
}

/* ==================================================
   13. News
   ================================================== */
.news {
  height: 31.25rem;
}
.news h2,
.partners h2 {
  margin: 0;
  text-align: center;
}
.news h2 {
  padding-top: 0.9704rem;
}
.news-grid {
  margin: 2.5rem auto 0;
  width: 75rem;
  display: grid;
  grid-template-columns: 31.25rem 1fr 1fr;
  gap: 1.25rem;
}
.news-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  position: relative;
  overflow: hidden;
}
.news-card--large {
  height: 21.25rem;
  border-radius: 0.75rem;
}
.news-card--small {
  height: 21.25rem;
}
.news-image {
  position: relative;
  height: 12.5rem;
  border-radius: 0.75rem;
  overflow: hidden;
}
.news-card--large .news-image {
  height: 100%;
}
.news-copy {
  color: #ffffff;
}
.news-card--large .news-copy {
  position: absolute;
  left: 1.4426rem;
  right: 1.4426rem;
  bottom: 1.6646rem;
  z-index: 1;
}
.news-card--small .news-copy {
  margin-top: 2.096rem;
}
.news-copy h3 {
  margin: 0 0 0.75rem;
  font-family: "SVN-Butler", serif;
  font-size: 1.375rem;
  line-height: 1.3851rem;
  font-weight: 300;
  color: #fff;
  font-family: SVN-Butler;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.38506rem; /* 100.734% */
  /* letter-spacing: -0.08725rem; */
}
.news-card--large .news-copy h3 {
  font-size: 2.5rem;
  line-height: 2.9058rem;
  color: #fff;
  font-family: SVN-Butler;
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 300;
  line-height: 2.90581rem; /* 116.232% */
  letter-spacing: -0.15869rem;
}
.news-card--large .news-copy p {
  margin: 0 0 0.75rem;
  color: #fff;
  font-family: SVN-Aptima;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.14119rem; /* 114.118% */
}
.news-card--small .news-copy p {
  margin: 0 0 0.75rem;
  color: #fff;
  font-family: SVN-Aptima;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 0.875rem; /* 116.667% */
}
.news-date {
  color: #a1dcf4;
  text-align: right;
  display: block;
}

/* ==================================================
   14. Library / Download
   ================================================== */
.library {
  height: 19.1875rem;
}
.library-wrap {
  position: absolute;
  top: 4.6875rem;
  left: 12.5rem;
  width: 75rem;
  display: grid;
  grid-template-columns: 12.75rem 1fr;
  gap: 7.5rem;
  align-items: start;
}
.library h2 {
  margin: 0;
}
.download-grid {
  display: grid;
  grid-template-columns: 37.1875rem 17.8125rem;
  gap: 0.75rem;
  height: 8.125rem;
}
.download-stack {
  display: grid;
  gap: 0.625rem;
}
.download-card {
  position: relative;
  overflow: hidden;
  border-radius: 0.625rem;
  background: #095564;
  min-height: 3.75rem;
  display: block;
}
.download-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--download-image) center / cover;
  opacity: 0.46;
  mix-blend-mode: overlay;
}
.download-card__content {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem;
}
.download-card--large .download-card__content {
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  padding: 2.5rem 1.25rem 1.25rem;
}
.download-card h3 {
  margin: 0;
  font-family: "SVN-Butler", serif;
  font-size: 1.125rem;
  line-height: 1.35rem;
  font-weight: 300;
  color: #fff;
}
.download-card--large h3 {
  font-size: 1.75rem;
  line-height: 2.45rem;
  font-weight: 400;
  color: #fff;
}
.download-link {
  color: #a1dcf4;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.26rem;
}
.download-link svg {
  width: 0.9375rem;
  height: 0.9375rem;
  flex-shrink: 0;
}
.download-card__content .download-link {
  margin-left: auto;
}

/* ==================================================
   15. Partners
   ================================================== */
.partners {
  height: 19.9375rem;
}
.partners h2 {
  padding-top: 1.1875rem;
}
.partner-row {
  margin: 3.125rem auto 0;
  width: 75rem;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.75rem;
}
.partner-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.partner-logo {
  width: 6.25rem;
  height: 4.5rem;
  margin: 0 auto 0.875rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.partner-logo img {
  max-width: 100%;
  height: 4.4545rem;
  object-fit: contain;
}
.partner-card p {
  margin: 0;
  overflow-wrap: anywhere;
  color: #fff;
  text-align: center;

  /* PC/Body/SM */
  font-family: SVN-Aptima;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 1.05rem */
  width: 8.15rem;
}

/* ==================================================
   16. Footer / Form
   ================================================== */

.bg-duoi-dao {
  display: none;
}

.deco-footer {
  z-index: 4;
  display: none;
}
.deco-footer-img {
  filter: brightness(0.6) contrast(1.2);
  opacity: 0.5;
}
.location-swiper {
  height: 20rem;
}
.gallery-filter__divide {
  width: 100%;
  height: 1px;
  background: #fff;
  opacity: 0.5;
}
.investment-swiper__navigation-wrapper {
  display: none;
}
.background-the-hera-map {
  position: absolute;
  width: 100%;
  height: 130%;
  top: -11rem;
  z-index: -1;

  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 13rem,
    #000 100%
  );

  mask-image: linear-gradient(to bottom, transparent 0, #000 13rem, #000 100%);
}
.background-the-hera-map .svg-map {
  position: relative;
  left: -0.5rem;
  object-fit: cover;
  width: 118%;
  max-width: unset;
}
.background-the-hera-map .sea {
  position: absolute;
  right: -1rem;
  top: 8rem;
  height: 100%;
  width: 100%;
}
@media (max-width: 639.98px) {
  .hero-title__group.group-left span:last-child {
    margin-top: -1rem;
  }
  .hero-title__group.group-left {
    font-size: 2.6875rem;
    color: #fff;
  }
  .hero-title__group.group-left span {
    display: block !important;
  }
  .gradient-sub-title {
    line-height: 120%;
    font-size: 0.625rem;
    position: relative !important;
    letter-spacing: 0.0125rem;
    text-transform: uppercase;
    mix-blend-mode: plus-lighter;
    margin-top: -0.3rem;
    left: unset;
    top: unset;
  }
  .wave-mb {
    display: block;
  }
  .wave {
    display: none;
  }
  .partners h2 {
    color: #fff;
    text-align: center;
    text-shadow: 0 4px 8.9px rgba(0, 0, 0, 0.25);

    /* TITLE/H3 */
    font-family: SVN-Butler;
    font-size: 2.125rem;
    font-style: normal;
    font-weight: 300;
    line-height: 2.28688rem; /* 107.617% */
    letter-spacing: -0.0425rem;
  }
  .partner-card p {
    width: auto;
    color: #fff;
    text-align: center;
    font-family: SVN-Aptima;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 0.9rem */
  }
  .news-image::after {
    background: linear-gradient(
      180deg,
      rgba(17, 46, 80, 0) 0%,
      rgba(19, 53, 90, 0.59) 100%
    );
  }
  .investment-swiper__navigation-wrapper {
    width: 80%;
    display: flex;
    position: absolute;
    z-index: 2;
    justify-content: space-between;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .investment-card.swiper-slide-active + .investment-card {
    transform: translateY(-7.1875rem) scale(0.8008);
    transform-origin: left;
    z-index: 2;
  }
  .investment-card:has(+ .investment-card.swiper-slide-active) {
    transform: translateY(-7.1875rem) scale(0.8008);
    transform-origin: right;
    z-index: 2;
  }
  .swiper-gallery-thumps {
    padding: 0 0.625rem;
  }
  .investment-card__copy p {
    color: #fff;
    text-align: center;
    font-family: SVN-Aptima;
    font-size: 0.625rem;
    font-style: normal;
    font-weight: 400;
    width: 12.1785rem;
    line-height: 0.6875rem;
  }
  .investment-card__copy strong {
    color: #fff;
    text-align: center;
    font-family: "DFVN Rosmerta";
    font-size: 2.38788rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.38788rem;
    letter-spacing: 0.07463rem;
    margin-left: 1.25rem;
  }
  .investment-card__copy h3 {
    color: #fff;
    text-align: center;
    font-family: SVN-Butler;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.0625rem; /* 121.429% */
  }
  .location-swiper {
    padding: 0 1rem;
  }
  .fact strong {
    padding-right: 0;
  }
  .gallery-swiper-wrapper {
    padding: 0 0.625rem;
  }
  .muithuyen {
    left: 0;
    top: 30.24rem;
    width: 58.38956rem;
    height: 7.51856rem;
    object-fit: cover;
  }
  .gallery-navigation-wrapper {
    display: none;
  }
  .deco-footer {
    display: block;
  }
  .btn-close-sidebar {
    display: block;
  }

  .partner-card-last {
    grid-column: span 2;

    justify-content: center;
  }
  .partner-card-last .body-sm br {
    display: none;
  }
  .section-13-img {
    display: none;
  }
  .section-footer-img {
    display: none;
  }

  .hero-video {
    display: none;
  }
  .hero-video-mb {
    display: block;
  }
  .partner-row {
    margin-top: 1.5rem;
    width: 100%;
    padding: 0 0.75rem;
    grid-template-columns: 1fr 1fr;
  }
  .partner-row > .partner-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 0.5rem);
  }

  .location-copy .title-xl::first-letter {
    text-transform: uppercase;
  }
  .location-copy .title-xl br {
    display: none;
  }
  .peacock {
    width: 32.01719rem;
    height: 16.76531rem;
  }
  .background-the-hera {
    top: -5rem;
  }
  .background-dao {
    top: -3rem;
  }
  .graphic_super {
    display: none;
  }
  .logo-text {
    top: -10rem;
    width: 19.24769rem !important;
    left: 50% !important;
    transform: translateX(-50%);
  }

  /* ==================================================
     01. Base / Layout chung
     ================================================== */
  body {
    background: #000000;
  }
  .section {
    width: 23.4375rem;
  }

  /* ==================================================
     02. Typography / Utilities
     ================================================== */
  .section-symbol {
    width: 2.5417rem;
    height: 2.0735rem;
    margin: 0.625rem auto;
  }

  /* ==================================================
     03. Background / Decoration assets
     ================================================== */
  .background {
    top: 0;
  }
  .background-color-layer {
    width: 100%;
    height: 21.25375rem !important;
    top: -15rem;
    display: block;
  }
  .background-tuyet-tac {
    top: 0;
  }
  .arrow-row {
    top: 18.23rem;
    left: 0;
    position: absolute;
    width: 100%;
    justify-content: space-between;
    z-index: 2;
  }
  /* ==================================================
     04. Header
     ================================================== */
  /* .site-header, */
  /* .partners, */
  /* .footer, */
  .news-date {
    display: none;
  }

  .partners {
    height: 40.25rem;
    background: #112e50;
  }

  /* ==================================================
     05. Hero
     ================================================== */
  .hero-video {
    width: 45rem;
    left: -11rem;
  }
  .hero {
    height: 91.1875rem;
    background: #000000;
  }
  .hero-title {
    top: 3.8408rem;
    left: 1rem;
    right: auto;
    width: 21.4375rem;
    display: block;
    text-align: center;
    font-size: 2.375rem;
    font-style: normal;
    font-weight: 300;
    line-height: 3.63294rem; /* 152.965% */
    letter-spacing: -0.16625rem;
  }
  .hero-title__group {
    position: static;
    display: block;
    width: auto;
    height: auto;
    white-space: nowrap;
  }
  .gradient-sub-title span {
    text-shadow: 0 0 0.05rem rgba(255, 255, 255, 0.8) !important;
  }
  .gradient-other-text {
    margin-top: -1rem;
    font-size: 3.125rem;
    line-height: 2;
  }
  .gradient-other-text span {
    color: #fff;
  }
  .hero-title__group span {
    position: static;
    white-space: normal;
  }
  .hero-title__group span + span::before {
    content: " ";
  }
  .say-band {
    top: 37.0625rem;
    height: 54.125rem;
  }
  .say-band::before {
    display: none;
  }
  .say-copy {
    top: 52.4779rem;
    left: 1rem;
    right: 1rem;
    width: auto;
    text-align: center;
    font-size: 1rem;
    line-height: 1.4rem;
  }
  .say-copy p {
    margin: 0;
  }
  .say-copy p + p {
    margin-top: 0.875rem;
  }
  .say-columns {
    top: 63.25rem;
    left: 1rem;
    right: 1rem;
    display: block;
    text-align: center;
  }
  .say-card {
    margin: 0 0 1.4375rem;
  }
  .say-card h2 {
    margin-bottom: 0.375rem;
    font-size: 1.5rem;
    line-height: 2.125rem;
    text-shadow: 0.0625rem 0.625rem 0.625rem rgba(0, 0, 0, 0.5);
    margin-bottom: 0.375rem;
    font-size: 1.5rem;
    line-height: 2.125rem;
    letter-spacing: -0.075rem;
  }
  .say-card p {
    font-size: 0.875rem;
    line-height: 1.225rem;
  }

  /* ==================================================
     06. Santorini
     ================================================== */
  .santorini::before,
  .project::before,
  .location::after {
    display: none;
  }
  .santorini {
    height: 50.5625rem;
    z-index: 3;
  }
  .santorini-copy {
    top: 8.4375rem;
    left: 1rem;
    right: 1rem;
    width: auto;
  }
  .stacked-title {
    width: 18.03956rem;
    text-align: left;
    height: auto;
    margin-bottom: 0.625rem;
    font-size: 3.25rem;
    font-weight: 200;
    line-height: 3.901rem;
  }
  .stacked-title span,
  .stacked-title span:nth-child(1),
  .stacked-title span:nth-child(2),
  .stacked-title span:nth-child(3) {
    position: static;
    display: block;
  }
  .stacked-title span:nth-child(1) {
    line-height: 3.90088rem; /* 120.027% */
    letter-spacing: -0.2275rem;
  }

  .stacked-title span:nth-child(2) {
    margin-top: -1rem;
    margin-left: 5.9rem;
    line-height: 3.90088rem; /* 120.027% */
    letter-spacing: -0.2275rem;
  }
  .stacked-title span:nth-child(3) {
    font-size: 2.125rem;
    line-height: 2.2869rem;
    margin-left: 2.44rem;
  }
  .santorini-copy p {
    width: 20.60231rem;
    font-size: 1rem;
    line-height: 1.4rem;
  }

  /* ==================================================
     07. Project
     ================================================== */
  .project {
    height: 51.9375rem;
    z-index: 2;
    background: #13365b;
  }
  .project-copy {
    top: 15.5436rem;
    left: 1rem;
    right: 1rem;
    width: auto;
  }
  .project-title {
    width: 18.41rem;
    height: auto;
    margin-bottom: 0.75rem;
    font-size: 3.25rem;
    font-style: normal;
    font-weight: 200;
    line-height: 3.90088rem; /* 120.027% */
    letter-spacing: -0.2275rem;
    text-align: left;
  }
  .project-title span,
  .project-title span:first-child,
  .project-title span:nth-child(2),
  .project-title small {
    position: static;
    display: block;
  }
  .project-title span:nth-child(2) {
    margin-top: -1.02rem;
    margin-left: 5.98rem;
  }
  .project-title small {
    text-align: center;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.39194rem; /* 111.355% */
    letter-spacing: -0.0625rem;
    margin-top: 1rem;
  }
  .project-facts {
    width: 100%;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.225rem;
    background: transparent;
    padding: 0;
  }

  .project-facts .fact {
    grid-template-columns: 4.9292rem 1fr;
    gap: 0.625rem;
  }

  /* ==================================================
     08. Location
     ================================================== */
  .location {
    height: 74.375rem;
    background: #13365b;
  }
  .background-the-hera-map .svg-map {
    width: 53.5rem;
    left: -21rem;
    /* top: 0.25rem; */
  }
  .background-the-hera-map .sea {
    top: 0;
  }
  .background-the-hera-map {
    position: relative;
    top: 16.5rem;
    left: 0;
    height: auto;

    z-index: 2;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 2rem,
      #000 calc(100% - 2rem),
      transparent 100%
    );

    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 2rem,
      #000 calc(100% - 2rem),
      transparent 99%
    );
  }
  .location-copy {
    top: 0;
    left: 0;
    width: 23.4375rem;
    height: 100%;
    z-index: 2;
  }
  .location-head {
    position: absolute;
    top: 9.236rem;
    left: 0;
    right: 0;
    width: auto;
    height: auto;
    margin: 0;
    text-align: center;
    text-shadow: 0 0.25rem 1.025rem #003876;
  }
  .location-head span,
  .location-head span:nth-child(1),
  .location-head span:nth-child(2),
  .location-head span:nth-child(3),
  .location-head span:nth-child(4) {
    position: static;
    display: block;
    white-space: normal;
  }
  .location-head span:nth-child(1) {
    color: #fff;
    text-shadow: 0 4px 16.4px #003876;
    font-family: SVN-Butler;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 200;
    line-height: 2.125rem; /* 141.667% */
    letter-spacing: -0.075rem;
    margin: 0 !important;
  }
  .location-head span:nth-child(2),
  .location-head span:nth-child(4) {
    color: #fff;
    text-align: center;
    text-shadow: 0 4px 16.4px #003876;

    /* TITLE/H3 */
    font-family: SVN-Butler;
    font-size: 2.125rem;
    font-style: normal;
    font-weight: 300;
    line-height: 2.28688rem; /* 107.617% */
    letter-spacing: -0.0425rem;
  }
  .location-head span:nth-child(2) {
    margin-bottom: 0.47rem;
  }
  .location-head span:nth-child(3) {
    display: none;
  }
  /* Position the whole slider over the map. The list inside must stay in
     normal flow so each Swiper slide gets a real height — making `.distance-list`
     itself absolute collapsed every slide to 0, so the swiper showed nothing. */
  .location-slider {
    position: absolute;
    top: 48.0862rem;
    left: 0;
    width: 100%;
  }
  .distance-list {
    width: 100%;
    gap: 1.0625rem;
  }
  .distance-item {
    grid-template-columns: 14.5rem 1fr 4.375rem;
    text-align: left;
  }
  /* Mobile keeps the line spanning its (1fr) cell, not the desktop round dot. */
  .distance-line {
    width: 1.1875rem;
    height: 0.0625rem;
    border-radius: 0;
    justify-self: stretch;
  }
  /* Pagination flows right under the list (it lives inside .location-slider). */
  .location .dots {
    position: static;
    margin-top: 1.25rem;
  }

  /* ==================================================
     09. Quote
     ================================================== */
  .quote {
    height: 34.8125rem;
  }
  .quote-copy {
    top: 4.1818rem;
    left: 1rem;
    right: 1rem;
    width: auto;
  }
  .quote-copy .subtitle {
    margin: 0 0 0.5064rem;
    font-size: 0.875rem;
    line-height: 1.225rem;
  }
  .quote-copy .title-xl {
    font-size: 2.125rem;
    line-height: 2.2869rem;
  }
  .bird {
    top: -1rem;
    left: 14rem;
    width: 13.1875rem;
    height: 4.8125rem;
  }

  /* ==================================================
     10. Amenities
     ================================================== */
  .amenities {
    height: 36.875rem;
  }
  .amenities-copy {
    top: 3.2092rem;
    left: 1rem;
    width: 21.4375rem;
  }
  .amenities-copy h2 {
    margin-bottom: 0.4375rem;
    font-size: 2.4375rem;
    font-style: normal;
    font-weight: 300;
    line-height: 2.5rem; /* 102.564% */
    letter-spacing: -0.12188rem;
  }
  .amenities-copy p {
    margin: 0;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 200;
    line-height: 2.125rem; /* 141.667% */
    letter-spacing: -0.075rem;
  }
  .bg-duoi-dao {
    display: block;
  }
  .amenities-copy p br {
    display: none;
  }
  .amenities-swiper {
    padding: 0 1.5rem;
    top: 12.0231rem;
    /* left: 1.5rem; */
    width: 100%;
    height: 21.0877rem;
  }
  .amenity-card::after {
    background: linear-gradient(
      180deg,
      rgba(17, 46, 80, 0) 70.73%,
      #112e50 92.84%
    );
  }
  .amenity-card {
    width: 18.75rem;
    height: 21.0877rem;
  }
  .amenity-label {
    left: 0.7396rem;
    right: 1rem;
    bottom: 0;
    gap: 0.75rem;
  }
  .amenity-label strong {
    font-size: 4.3524rem;
    line-height: 4.3524rem;
  }
  .amenity-label span {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    line-height: 1.4658rem;
  }

  /* ==================================================
     11. Investment
     ================================================== */
  .investment {
    height: 49.4375rem;
    background: #000000;
  }
  .investment-title {
    top: 9.3516rem;
    left: 4.5181rem;
    width: 14.3125rem;
    transform: none;
  }
  .investment-title h2,
  .investment-title p {
    font-size: 2.125rem;
    line-height: 2.2869rem;
    margin-bottom: 0.3125rem;
  }
  .investment-title h2 {
    letter-spacing: -0.0425rem;
  }
  .investment-title .subtitle {
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 200;
    line-height: 2.125rem; /* 141.667% */
    letter-spacing: -0.075rem;
    margin: 0 !important;
  }
  .investment-swiper {
    top: 19.2771rem;
    left: 0;
    width: 100%;
    height: 26.8246rem;
  }
  .investment-card,
  .investment-card.swiper-slide-active {
    width: 16.3543rem;
    height: 24.8871rem;
    margin-top: 0;
    margin-right: 1.125rem;
  }

  .investment-pagination {
    top: 26.5rem !important; /* just below the shorter mobile card (24.89rem) */
  }

  /* ==================================================
     12. Gallery
     ================================================== */
  .gallery {
    height: 31.75rem;
    background: #ffffff;
  }
  .gallery-wrap {
    top: 1.8609rem;
    left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0.625rem;
  }
  .gallery-main {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 22.1875rem;
    height: 12.3688rem;
    border-radius: 1.1875rem;
  }
  .gallery-thumbs {
    display: contents;
  }
  .gallery-filter {
    grid-column: 1 / -1;
    grid-row: 1;
    height: 9.375rem;
    margin: 0 0.625rem;
    width: auto;
  }
  .gallery-thumb {
    height: 3.5621rem;
  }

  /* ==================================================
     13. News
     ================================================== */
  .news {
    height: 52.625rem;
    background: #000000;
  }
  .news h2 {
    padding-top: 3.1136rem;
    margin-bottom: 1.5rem;
    text-shadow: 0 4px 8.9px rgba(0, 0, 0, 0.25);
    font-family: SVN-Butler;
    font-size: 2.125rem;
    font-style: normal;
    font-weight: 300;
    line-height: 2.28688rem;
    letter-spacing: -0.0425rem;
  }
  .news-grid {
    width: 21.4375rem;
    margin: 0 auto;
    grid-template-columns: 1fr;
    gap: 0.9375rem;
  }
  .news-card,
  .news-card--large,
  .news-card--small {
    height: 13.125rem;
    border-radius: 0.5rem;
  }
  .news-image,
  .news-card--large .news-image {
    height: 100%;
  }
  .news-card--large .news-copy,
  .news-card--small .news-copy {
    position: absolute;
    left: 0.8125rem;
    right: 0.8125rem;
    bottom: 0.9375rem;
    z-index: 1;
    margin: 0;
  }
  .news-copy h3,
  .news-card--large .news-copy h3 {
    font-size: 1.5rem;
    line-height: 2.125rem;
    margin-bottom: 0.625rem;
  }
  .news-copy p {
    font-size: 0.875rem;
    line-height: 1.05rem;
  }

  /* ==================================================
     14. Library / Download
     ================================================== */
  .library {
    height: 19.6875rem;
    background: #112e50;
  }
  .library-wrap {
    top: 0.8907rem;
    left: 0;
    width: 23.4375rem;
    display: block;
  }
  .library h2 {
    margin-bottom: 1.5rem;
    text-align: center;
    color: #fff;
    text-align: center;
    text-shadow: 0 4px 8.9px rgba(0, 0, 0, 0.25);

    /* TITLE/H3 */
    font-family: SVN-Butler;
    font-size: 2.125rem;
    font-style: normal;
    font-weight: 300;
    line-height: 2.28688rem; /* 107.617% */
    letter-spacing: -0.0425rem;
  }
  .download-grid {
    display: block;
    width: 100%;
    height: auto;
    padding: 0 0.625rem;
  }
  .download-card--large {
    height: 5.125rem;
    margin-bottom: 0.75rem;
  }
  .download-card--large .download-card__content {
    flex-direction: row;
    padding: 1.875rem 1.125rem;
    text-align: left;
  }
  .download-stack {
    grid-template-columns: 1fr 1fr;
    gap: 0.387rem;
  }
  .download-card {
    height: 2.3132rem;
  }
  .download-card__content {
    padding: 0.548rem 1.0963rem;
  }
  .download-card h3 {
    font-size: 0.875rem;
    line-height: 1.225rem;
  }
  .download-card--large h3 {
    font-size: 1rem;
    line-height: 1.4rem;
  }

  /* ==================================================
     99. Other
     ================================================== */
  .swiper-button-lock {
    display: none;
  }

  .download-link {
    font-size: 0.875rem;
  }
}