@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(var(--one-set) * -1));
  }
}
@keyframes scroll-right {
  0% {
    transform: translateX(calc(var(--one-set) * -1));
  }
  100% {
    transform: translateX(0);
  }
}

.awards-scroll-left {
  animation: scroll-left 80s linear infinite;
}

.awards-scroll-right {
  animation: scroll-right 80s linear infinite;
}

.awards-scroll-left:hover,
.awards-scroll-right:hover {
  animation-play-state: paused;
}

/* Remove all existing client scroll CSS and use only this */
.clients-scroll-right,
.clients-scroll-left {
  display: flex;
  align-items: center;
  will-change: transform;
}

.clients-scroll-right:hover,
.clients-scroll-left:hover {
  animation-play-state: paused;
}

/* Insights Carousel Styles */
.insight-card {
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.insight-card.active {
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  filter: none;
  z-index: 20;
}

@media (min-width: 768px) {
  .insight-card.active {
    width: 60%;
  }

  .insight-card.preview {
    right: 0;
    left: auto;
    width: 45%;
    height: 85%;
    opacity: 0.5;
    filter: blur(3px);
    z-index: 10;
  }
}

@media (min-width: 1024px) {
  .insight-card.preview {
    width: 38%;
  }
}

/* ==========================================
   MAP CONTAINER
   ========================================== */
.map-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  /* overflow: hidden; */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================
   MAP WRAPPER — aspect-ratio locked to image
   ========================================== */
.map-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 671;
  /* ⭐ back to base map ratio */
  max-height: 100vh;
  margin: 0 auto;

  overflow: hidden;
  container-type: inline-size;
}

.map-images {
  position: relative;
  width: 100%;
  height: 100%;
}

#mapCloseBtn {
  z-index: 9999;
}

/* ==========================================
   IMAGE FRAMES
   ========================================== */
/* .map-image-frame {
  position: relative;
  width: 100%;
  height: 100%;
} */

.map-image-zoom-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transform: scale(0.5);
  overflow: hidden;
  /* ⭐ ADD THIS */
  border-radius: 40px;
  /* ⭐ ADD THIS */
  transition:
    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.25s ease;
}

.map-image-zoom-frame.active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

/* ==========================================
   GOLD BORDER
   ========================================== */
.map-gold-border {
  position: absolute;
  inset: 0;
  border-radius: 32px;
  border-top: 2px solid #f7e8ac;
  border-left: 2px solid #f7e8ac;
  border-right: none;
  border-bottom: none;
  pointer-events: none;
  z-index: 3;
  -webkit-mask: linear-gradient(
    to bottom right,
    black 0%,
    black 20%,
    transparent 50%
  );
  mask: linear-gradient(to bottom right, black 0%, black 20%, transparent 50%);
}

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

.map-image-zoom {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* was: contain — important */
  transform: scale(1.2);
  transform-origin: center center;
  transform-origin: center center;
}

.map-image-base {
  width: 100%;
  height: 100%;
  object-fit: fill;
  /* base fills exactly */
  display: block;
  border-radius: 40px;
}

.map-image-base.zoom-in-fade {
  transform: scale(1.3);
  opacity: 0;
}

/* ==========================================
   CLICK OVERLAY + COUNTRY HOTSPOTS
   ========================================== */
.click-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.click-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.country-area {
  position: absolute;
  cursor: pointer;
  background: transparent;
  transition:
    background 0.3s ease,
    filter 0.3s ease;
}

.country-area {
  /* background: #403a259e; */
  filter: drop-shadow(0 0 10px rgba(247, 232, 172, 0.5));
}

/* USA — Contiguous 48 states */
.country-area[data-country="US"][data-region="mainland"] {
  left: 19%;
  top: 18%;
  width: 14%;
  height: 19%;
  clip-path: polygon(
    2% 85%,
    4% 3%,
    75% 7%,
    87% 57%,
    99% 86%,
    79% 39%,
    184% -49%,
    137% 101%,
    169% 78%,
    165% 122%,
    116% 39%,
    106% 36%,
    92% 54%,
    95% 64%,
    85% 77%,
    87% 110%,
    79% 80%,
    76% 83%,
    76% 81%,
    58% 84%,
    36% 78%,
    20% 73%,
    12% 66%,
    12% 67%,
    5% 48%,
    3% 32%
  );
}

/* Alaska */
.country-area[data-country="US"][data-region="alaska"] {
  left: 8%;
  top: 2%;
  width: 7%;
  height: 10%;
  clip-path: polygon(
    15% 22%,
    6% 22%,
    14% 16%,
    18% 13%,
    30% 0%,
    107% 12%,
    113% 85%,
    82% 87%,
    94% 59%,
    92% 77%,
    115% 79%,
    27% 85%,
    0% 69%,
    78% 73%,
    38% 97%,
    7% 79%,
    23% 55%,
    0% 47%
  );
}

/* UK */
.country-area[data-country="GB"] {
  left: 51%;
  top: 11%;
  width: 2%;
  height: 7%;
  clip-path: polygon(
    43% 17%,
    68% 104%,
    47% 38%,
    106% 86%,
    222% 70%,
    -5% 101%,
    10% 87%,
    -11% 10%
  );
}

/* India */
.country-area[data-country="IN"] {
  left: 71%;
  top: 29%;
  width: 7%;
  height: 20%;
  clip-path: polygon(
    1.1% 43.6%,
    -10.3% 31.6%,
    6.9% 28%,
    13.1% 22.3%,
    20.7% 13.3%,
    11.3% -1.7%,
    42.9% -0.2%,
    34.4% 14.3%,
    36.1% 3.1%,
    40.2% 28%,
    47.3% 31.1%,
    73.5% 34.7%,
    89.1% 34.2%,
    91.7% 54.5%,
    81.4% 31.6%,
    98.2% 21.5%,
    103.3% 29.7%,
    89.8% 39%,
    84.9% 47.4%,
    80.3% 44.1%,
    82.3% 44.6%,
    71.6% 51.6%,
    92.6% 35%,
    71.4% 39.4%,
    75.3% 34%,
    70.4% 53.6%,
    66% 57%,
    56.4% 64.7%,
    49.1% 70.7%,
    34.6% 78.9%,
    35.7% 100%,
    24.2% 111.9%,
    39.6% 93.4%,
    24% 130.3%,
    17.8% 78.5%,
    9.2% 65.9%,
    9.8% 48.8%,
    36.9% 67.1%,
    -3.2% 56.6%,
    -7% 34.2%
  );
}

/* Australia */
.country-area[data-country="AU"] {
  left: 81%;
  top: 64%;
  width: 13%;
  height: 23%;
  clip-path: polygon(
    71% 4%,
    67% 25%,
    35% 14%,
    99% 101%,
    44% 26%,
    70% 69%,
    69% 41%,
    62% 25%,
    53% 4%,
    42% 21%,
    13% 39%,
    16% 82%,
    23% 82%,
    56% 66%,
    72% 49%,
    47% 68%,
    61% 86%,
    85% 93%,
    94% 61%,
    89% 43%,
    78% 26%,
    74% 13%
  );
}

/* South Africa */
.country-area[data-country="ZA"] {
  left: 57%;
  top: 76%;
  width: 5%;
  height: 7%;
  clip-path: polygon(
    75% 62%,
    25% 37%,
    35% 60%,
    -5% 44%,
    40% 3%,
    79% 7%,
    41% 72%,
    88% 24%,
    83% 27%,
    68% 76%,
    87% 20%,
    57% 85%,
    29% 89%,
    65% 82%,
    30% 93%,
    6% 93%,
    6% 87%,
    -2% 50%,
    44% 28%
  );
}

/* Hover overlay */
.map-image-zoom-frame.hover-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.map-image-zoom-frame.hover-active .map-image-zoom {
  opacity: 0.85;
}

/* ==========================================
   POPUP CARD
   ========================================== */
.popup-card {
  border-radius: 32px;
  background: #ece6ff33;
  backdrop-filter: blur(40px);
  padding: 24px 28px;
}

.popup-title {
  font-family: "MuseoModerno", sans-serif;
  font-size: 28px;
  color: #fff;
  margin-bottom: 16px;
}

.popup-description {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  color: #fff;
  line-height: 1.2;
}

/* Collapse description when empty — no reserved space */
.popup-description:empty {
  display: none;
  margin: 0;
}

.popup-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.popup-link:hover {
  color: #f7e8ac;
  gap: 10px;
  text-decoration: underline;
}

.popup-link svg {
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease;
}

.popup-link:hover svg {
  transform: translate(2px, -2px);
}

/* ==========================================
   CLOSE BUTTON
   ========================================== */
.map-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  cursor: pointer;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
  transition: all 0.3s ease;
}

.map-close-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.map-close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.1);
}

.map-close-btn svg {
  width: 18px;
  height: 18px;
}

/* ==========================================
   COUNTRY TAGS
   ========================================== */
.country-tag {
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.country-tag:hover {
  transform: translateY(-1px);
}

/* ==========================================
   POPUP CLOSE CIRCLE (mobile)
   ========================================== */
.popup-close-circle {
  position: absolute;
  bottom: 20px;
  right: 15px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgb(255, 255, 255);
  color: #fff;
  cursor: pointer;
  z-index: 36;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.3s ease;
}

.popup-close-circle svg {
  width: 18px;
  height: 18px;
}

.popup-close-circle:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ==========================================
   SCROLL LOCK
   ========================================== */
body.map-locked {
  overflow: hidden;
}

@media screen and (min-width: 1320px) and (max-width: 1390px) and (max-height: 768px) {
  /* USA — Contiguous 48 states */
  .country-area[data-country="US"][data-region="mainland"] {
    left: 19%;
    top: 17.5%;
    width: 14.1%;
    height: 19%;
    clip-path: polygon(
      2% 85%,
      4% 3%,
      75% 7%,
      87% 57%,
      99% 86%,
      79% 39%,
      184% -49%,
      137% 101%,
      169% 78%,
      165% 122%,
      116% 39%,
      106% 36%,
      92% 54%,
      95% 64%,
      85% 77%,
      87% 110%,
      79% 80%,
      76% 83%,
      76% 81%,
      58% 84%,
      36% 78%,
      20% 73%,
      12% 66%,
      12% 67%,
      5% 48%,
      3% 32%
    );
  }

  /* Alaska */
  .country-area[data-country="US"][data-region="alaska"] {
    left: 8%;
    top: 2%;
    width: 7%;
    height: 10%;
    clip-path: polygon(
      15% 22%,
      6% 22%,
      14% 16%,
      18% 13%,
      30% 0%,
      107% 12%,
      113% 85%,
      82% 87%,
      94% 59%,
      92% 77%,
      115% 79%,
      27% 85%,
      0% 69%,
      78% 73%,
      38% 97%,
      7% 79%,
      23% 55%,
      0% 47%
    );
  }

  /* UK */
  .country-area[data-country="GB"] {
    left: 51%;
    top: 11%;
    width: 2%;
    height: 7%;
    clip-path: polygon(
      43% 17%,
      68% 104%,
      47% 38%,
      106% 86%,
      222% 70%,
      -5% 101%,
      10% 87%,
      -11% 10%
    );
  }

  /* India */
  .country-area[data-country="IN"] {
    top: 30%;
    width: 7%;
    height: 20%;
    clip-path: polygon(
      8.1% 70.6%,
      -6.3% 49.6%,
      -1.1% 34%,
      14.1% 22.3%,
      18.7% 13.3%,
      11.3% -4.7%,
      36.9% 1.8%,
      32.4% 30.3%,
      29.1% 0.1%,
      43.2% 28%,
      43.3% 29.1%,
      64.5% 35.7%,
      100.1% 34.2%,
      87.7% 54.5%,
      80.4% 31.6%,
      99.2% 21.5%,
      100.3% 29.7%,
      90.8% 49%,
      84.9% 47.4%,
      80.3% 44.1%,
      73.3% 51.6%,
      72.6% 49.6%,
      113.6% 45%,
      73.4% 38.4%,
      74.3% 45%,
      71.4% 54.6%,
      68% 55%,
      56.4% 65.7%,
      52.1% 70.7%,
      39.6% 78.9%,
      37.7% 129%,
      31.2% 170.9%,
      50.6% 116.4%,
      39% 168.3%,
      14.8% 77.5%,
      9.2% 62.9%,
      15.8% 48.8%,
      65.9% 59.1%,
      -3.2% 57.6%,
      -15% 36.2%
    );
  }

  /* Australia */
  .country-area[data-country="AU"] {
    left: 81%;
    top: 66%;
    width: 13%;
    height: 23%;
    clip-path: polygon(
      71% 4%,
      67% 25%,
      35% 14%,
      99% 101%,
      44% 26%,
      70% 69%,
      69% 41%,
      62% 25%,
      53% 4%,
      42% 21%,
      13% 39%,
      16% 82%,
      23% 82%,
      56% 66%,
      72% 49%,
      47% 68%,
      61% 86%,
      85% 93%,
      94% 61%,
      89% 43%,
      78% 26%,
      74% 13%
    );
  }

  /* South Africa */
  .country-area[data-country="ZA"] {
    left: 57%;
    top: 78%;
    width: 5%;
    height: 7%;
    clip-path: polygon(
      75% 62%,
      25% 37%,
      35% 60%,
      -5% 44%,
      40% 3%,
      79% 7%,
      41% 72%,
      88% 24%,
      83% 27%,
      68% 76%,
      87% 20%,
      57% 85%,
      29% 89%,
      65% 82%,
      30% 93%,
      6% 93%,
      6% 87%,
      -2% 50%,
      44% 28%
    );
  }
}

@media screen and (min-width: 1280px) and (max-width: 1300px) and (max-height: 768px) {
  /* USA — Contiguous 48 states */
  .country-area[data-country="US"][data-region="mainland"] {
    left: 19%;
    top: 19%;
    width: 14%;
    height: 19%;
    clip-path: polygon(
      2% 85%,
      4% 3%,
      75% 7%,
      87% 57%,
      99% 86%,
      79% 39%,
      184% -49%,
      137% 101%,
      169% 78%,
      165% 122%,
      116% 39%,
      106% 36%,
      92% 54%,
      95% 64%,
      85% 77%,
      87% 110%,
      79% 80%,
      76% 83%,
      76% 81%,
      58% 84%,
      36% 78%,
      20% 73%,
      12% 66%,
      12% 67%,
      5% 48%,
      3% 32%
    );
  }

  /* Alaska */
  .country-area[data-country="US"][data-region="alaska"] {
    left: 8%;
    top: 2%;
    width: 7%;
    height: 10%;
    clip-path: polygon(
      15% 22%,
      6% 22%,
      14% 16%,
      18% 13%,
      30% 0%,
      107% 12%,
      113% 85%,
      82% 87%,
      94% 59%,
      92% 77%,
      115% 79%,
      27% 85%,
      0% 69%,
      78% 73%,
      38% 97%,
      7% 79%,
      23% 55%,
      0% 47%
    );
  }

  /* UK */
  .country-area[data-country="GB"] {
    left: 51%;
    top: 12%;
    width: 2%;
    height: 7%;
    clip-path: polygon(
      43% 17%,
      68% 104%,
      47% 38%,
      106% 86%,
      222% 70%,
      -5% 101%,
      10% 87%,
      -11% 10%
    );
  }

  /* India */
  .country-area[data-country="IN"] {
    top: 31%;
    width: 7%;
    height: 20%;
    clip-path: polygon(
      8.1% 70.6%,
      -6.3% 49.6%,
      -1.1% 34%,
      14.1% 22.3%,
      18.7% 13.3%,
      11.3% -4.7%,
      36.9% 1.8%,
      32.4% 30.3%,
      29.1% 0.1%,
      43.2% 28%,
      43.3% 29.1%,
      64.5% 35.7%,
      100.1% 34.2%,
      87.7% 54.5%,
      80.4% 31.6%,
      99.2% 21.5%,
      100.3% 29.7%,
      90.8% 49%,
      84.9% 47.4%,
      80.3% 44.1%,
      73.3% 51.6%,
      72.6% 49.6%,
      113.6% 45%,
      73.4% 38.4%,
      74.3% 45%,
      71.4% 54.6%,
      68% 55%,
      56.4% 65.7%,
      52.1% 70.7%,
      39.6% 78.9%,
      37.7% 129%,
      31.2% 170.9%,
      50.6% 116.4%,
      39% 168.3%,
      14.8% 77.5%,
      9.2% 62.9%,
      15.8% 48.8%,
      65.9% 59.1%,
      -3.2% 57.6%,
      -15% 36.2%
    );
  }

  /* Australia */
  .country-area[data-country="AU"] {
    left: 81%;
    top: 68%;
    width: 13%;
    height: 23%;
    clip-path: polygon(
      71% 4%,
      67% 25%,
      35% 14%,
      99% 101%,
      44% 26%,
      70% 69%,
      69% 41%,
      62% 25%,
      53% 4%,
      42% 21%,
      13% 39%,
      16% 82%,
      23% 82%,
      56% 66%,
      72% 49%,
      47% 68%,
      61% 86%,
      85% 93%,
      94% 61%,
      89% 43%,
      78% 26%,
      74% 13%
    );
  }

  /* South Africa */
  .country-area[data-country="ZA"] {
    left: 57%;
    top: 80%;
    width: 5%;
    height: 7%;
    clip-path: polygon(
      75% 62%,
      25% 37%,
      35% 60%,
      -5% 44%,
      40% 3%,
      79% 7%,
      41% 72%,
      88% 24%,
      83% 27%,
      68% 76%,
      87% 20%,
      57% 85%,
      29% 89%,
      65% 82%,
      30% 93%,
      6% 93%,
      6% 87%,
      -2% 50%,
      44% 28%
    );
  }
}

/* ==========================================
   RESPONSIVE — TABLET (769px – 1024px)
   ========================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  .popup-card {
    min-width: 260px;
    max-width: 300px;
  }

  .map-gold-border,
  .map-image-base,
  .map-image-zoom {
    border-radius: 32px;
  }
}

/* ==========================================
   RESPONSIVE — MOBILE (≤ 768px)
   Map on top, tags/popup card below (default)
   Popup overlays bottom of zoomed image (zoomed mode)
   ========================================== */
@media (max-width: 768px) {
  .map-container {
    min-height: auto;
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    overflow: visible;
  }

  .map-container > * {
    overflow: visible;
  }

  .map-wrapper {
    aspect-ratio: 1440 / 671;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    container-type: normal;
  }

  .map-image-base,
  .map-image-zoom {
    object-fit: cover;
    object-position: center center;
    border-radius: 20px;
  }

  .map-image-zoom-frame .map-gold-border {
    display: none;
  }

  .map-gold-border {
    border-radius: 32px;
  }

  /* Popup — DEFAULT: flows below map as sibling card */
  .popup-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset;
    padding: 24px 28px !important;
    border-radius: 32px;
    max-height: none;
    height: auto;
    margin: 0;

    --anchor-x: 0%;
    --anchor-y: 0%;
    --slide-y: 10px;
    transform: translate(0, var(--slide-y)) !important;
  }

  .popup-card.active {
    --slide-y: 0px;
  }

  /* ⭐ ZOOMED MODE: popup overlays the bottom of the map image */
  .popup-card[data-mode="zoomed"] {
    position: absolute !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 0 !important;
    top: auto !important;
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin: 0;
    z-index: 35;
    border-radius: 20px;
    /* Shift down by 50% of popup height — half on image, half below */
    --anchor-x: 0%;
    --anchor-y: 0%;
    --slide-y: 10px;
    transform: translate(0, calc(50% + var(--slide-y))) !important;
  }

  .popup-card[data-mode="zoomed"].active {
    transform: translate(0, 50%) !important;
  }

  .popup-title {
    font-size: 18px;
    margin-bottom: 6px;
    font-weight: 600;
  }

  .popup-description {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 14px;
  }

  .popup-link {
    font-size: 13px;
  }

  .map-close-btn {
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
  }

  .map-close-btn svg {
    width: 16px;
    height: 16px;
  }

  /* Tags panel — flows below map */
  #tagsPanel {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    transform: none;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  #tagsPanel > div {
    padding: 20px !important;
    border-radius: 42px;
  }
  .country-tag {
    padding: 10px 18px !important;
    font-size: 14px !important;
  }

  .popup-close-circle {
    display: flex;
    bottom: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
  }

  .popup-close-circle svg {
    width: 18px;
    height: 18px;
  }
}

/* ==========================================
   RESPONSIVE — SMALL MOBILE (≤ 480px)
   ========================================== */
@media (max-width: 480px) {
  .map-image-base,
  .map-image-zoom {
    border-radius: 18px;
  }

  .map-gold-border {
    border-radius: 32px;
  }

  .popup-title {
    font-size: 16px;
    margin-bottom: 4px;
    font-weight: 600;
  }

  .popup-description {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 12px;
  }

  .popup-link {
    font-size: 13px;
  }

  .country-tag {
    padding: 9px 16px !important;
    font-size: 13px !important;
  }

  #tagsPanel > div {
    padding: 16px !important;
  }

  .map-close-btn {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
  }

  .map-close-btn svg {
    width: 14px;
    height: 14px;
  }

  .popup-close-circle {
    width: 36px;
    height: 36px;
  }
}

@media screen and (min-width: 1280px) and (max-width: 1300px) and (max-height: 768px) {
  #tagsPanel {
    max-width: 435px !important;
  }
  .popup-card {
    padding: 15px 20px !important;
  }
  .popup-title {
    font-size: 20px !important;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1390px) and (max-height: 768px) {
  #tagsPanel {
    width: 480px !important;
  }
  .popup-card {
    padding: 15px 20px !important;
  }
  .popup-title {
    font-size: 24px !important;
  }
}

/* .rotating-text-container {
  display: grid;
}

.rotating-text {
  grid-area: 1 / 1; 
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.rotating-text.active {
  opacity: 1;
} */

@keyframes slideUp {
  from {
    transform: translateY(110%);
  }

  to {
    transform: translateY(0%);
  }
}

/* [data-banner] .banner-title-wrap {
  display: block !important;
  overflow: hidden;
  padding-bottom: 0.16em;
  margin-bottom: -0.12em;
} */

/* [data-banner] .title-el {
  display: block;
  transform: translateY(110%);
  visibility: hidden;
  will-change: transform;
}

[data-banner].banner-animate .title-el {
  visibility: visible;
  animation: slideUp 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) both;
  animation-delay: var(--delay, 0s);
} */

@media (min-width: 768px) {
  .slider-card[data-position="center"] {
    cursor: default;
  }

  .slider-card[data-position="center"] a {
    cursor: pointer;
  }
}

/* ===== Card overlay ===== */
.home-testi-card .home-testi-overlay {
  background: rgba(236, 230, 255, 0.2);
  backdrop-filter: blur(20px);
  opacity: 0.3;
  transition: all 0.7s ease;
}
.home-testi-card[data-position="center"] .home-testi-overlay {
  /* background: transparent;
    opacity: 0; */
}

/* Play icon — only on center, scales on hover */
.home-testi-play-icon {
  width: 74px;
  height: 74px;
  opacity: 0;
  transition:
    opacity 0.5s ease,
    transform 0.3s ease;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5));
}
.home-testi-card[data-position="center"] .home-testi-play-icon {
  opacity: 1;
}
.home-testi-card[data-position="center"]:hover .home-testi-play-icon {
  transform: scale(1.1);
}
.home-testi-play-icon svg {
  width: 100%;
  height: 100%;
}

/* Title — only on center */
.home-testi-info {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}
.home-testi-card[data-position="center"] .home-testi-info {
  opacity: 1;
  transform: translateY(0);
}

/* Image zoom on center hover */
.home-testi-card[data-position="center"]:hover img {
  transform: scale(1.05);
}

/* ===== NAV BUTTONS (auto-injected by JS) ===== */
.home-testi-nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 50px;
  padding: 0 20px;
  position: relative;
  z-index: 40;
}
.home-testi-nav-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(236, 230, 255, 0.1);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}
.home-testi-nav-btn:hover {
  background: rgba(236, 230, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 500px) {
  .home-testi-nav {
    margin-top: 30px;
  }
}
@media screen and (min-width: 1023px) and (max-width: 1200px) and (max-height: 768px) {
  .home-testi-nav {
    margin-top: -45px;
  }
}
@media screen and (min-width: 1225px) and (max-width: 1290px) and (max-height: 768px) {
  .home-testi-nav {
    margin-top: 0px;
  }
}
@media screen and (min-width: 1320px) and (max-width: 1390px) and (max-height: 768px) {
  .home-testi-nav {
    margin-top: 90px;
  }
}
/* Hide sticky header when modal is open */
body.home-testi-modal-open header,
body.home-testi-modal-open .site-header,
body.home-testi-modal-open .main-header,
body.home-testi-modal-open #masthead,
body.home-testi-modal-open .sticky-header {
  display: none !important;
}

/* ===== MODAL ===== */
.home-testi-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.home-testi-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.home-testi-modal.hidden {
  display: none;
}
.home-testi-modal-inner {
  position: relative;
  width: 100%;
  max-width: 1100px;
}
.home-testi-modal-close {
  position: fixed; /* anchor to viewport, not the inner box */
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 100000; /* above .home-testi-modal (99999) */
  transition: all 0.25s ease;
}

.home-testi-modal-close:hover {
  transform: scale(1.1) rotate(90deg);
}

@media (max-width: 768px) {
  .home-testi-modal-close {
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
  }
}
.home-testi-modal-title {
  color: #fff;
  font-family: "MuseoModerno", sans-serif;
  font-size: 24px;
  font-weight: 300;
  margin: 0 0 16px 0;
  line-height: 120%;
}
.home-testi-modal-content {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
}
.home-testi-modal-content iframe,
.home-testi-modal-content video {
  width: 100%;
  height: 100%;
  border: none;
}
@media (max-width: 768px) {
  /* .home-testi-modal-close { top: -48px; } */
  .home-testi-modal-title {
    font-size: 18px;
  }
}


.nih-products-viewport { overflow: hidden; }
.nih-products-track    { --nih-gap: 1rem; cursor: grab; touch-action: pan-y; }
.nih-products-track:active { cursor: grabbing; }

.nih-col { flex: 0 0 100%; }

@media (min-width: 768px) {
  .nih-col { flex: 0 0 calc((100% - var(--nih-gap)) / 2); }
}
@media (min-width: 1024px) {
  .nih-products-track { --nih-gap: 2.5rem; }
  .nih-col { flex: 0 0 calc((100% - 2 * var(--nih-gap)) / 3); }
}

.nih-products-track { will-change: transform; backface-visibility: hidden; }
.nih-card img { will-change: transform; }