/* =========================
   HERO SECTION MASK EFFECT (Static Version)
========================= */

.hero-section {
  position: relative;
  width: 100%;
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Single Background Image */
.hero-background {
  position: absolute;
  inset: 0;
  background: url('../hero/background-3.jpg') center/cover no-repeat;
  filter: brightness(0.5);
  z-index: 1;
}

/* Overlay */
.overlay {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

/* Africa Mask */
.africa-mask {
  position: relative;
  width: 80vmin;
  height: 80vmin;
  overflow: hidden;
  z-index: 3;
  mask-image: url('../hero/africa-map.png');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url('../hero/africa-map.png');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* Remove hero-carousel animations — keep for structure only */
.hero-carousel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background: url('../hero/background-3.jpg') center/cover no-repeat;
  opacity: 1;
}

.hero-overlay {
  position: absolute;
  text-align: center;
  color: #fff;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
  z-index: 4;
}

.hero-overlay h1 {
  font-size: var(--font-xxl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.hero-overlay p {
  font-size: var(--font-lg);
  line-height: var(--lh-normal);
}

.italic-hero-text {
  font-style: italic;
  letter-spacing: 1px;
  text-shadow:
    2px 2px 6px #04218B,
    -2px -2px 6px #D4AF37,
    0 0 10px rgba(212, 175, 55, 0.5);
}

/* Tagline multiline layout */
.hero-tagline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.hero-tagline h1 {
  font-size: var(--font-xl);
  font-weight: var(--fw-semibold);
  margin: 0;
  color: var(--color-white);
  text-align: center;
}

/* ============================================
   DESKTOP-ONLY HERO LAYOUT ADJUSTMENT
   Move Africa Mask Left, Center Tagline on Mask
   ============================================ */
@media (min-width: 769px) {
  /* Shift the entire mask (and thus the tagline) left */
  .overlay {
    justify-content: flex-start; /* Move Africa Mask toward the left */
    padding-left: 8vw; /* Add breathing room from edge */
  }

  /* Keep mask same size */
  .africa-mask {
    width: 80vmin;
    height: 80vmin;
    position: relative;
  }

  /* Center tagline directly over the mask */
  .hero-overlay {
    position: absolute;
    top: 50%;
    left: calc(8vw + 40vmin); /* centers over the shifted mask */
    transform: translate(-50%, -50%);
    text-align: center; /* keep text centered */
  }

  .hero-tagline {
    align-items: center;
  }
}