/*!******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[3]!./styles/Hero.module.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************/
/* ────────────────────────────────────────────────────────────────
   Hero.module.css  –  Responsive hero banner with cross‑fade &
   Ken‑Burns zoom. 16:9 aspect on desktop, taller on phones.
   Palette: Ghana red/green/gold.
──────────────────────────────────────────────────────────────── */

/* ───────────── Wrapper – adaptive height ───────────── */
.Hero_hero__D0Vj7 {
  position: relative;
  width: 100%;

  /* Desktop/tablet: maintain crisp 16:9 ratio. */
  aspect-ratio: 16 / 9;

  /* Phones <640 px: ratio would be too short, so override below. */
  min-height: 500px;
  /* fallback for very narrow viewports */
  overflow: hidden;
}

/* Phone tweak: give a bit more vertical real‑estate (≈ 75 vh) */
@media (max-width: 639px) {
  .Hero_hero__D0Vj7 {
    aspect-ratio: unset;
    height: 75vh;
    /* fills most of the screen */
    min-height: 480px;
  }
}

/* ───────────── Slide image base ───────────── */
.Hero_heroImage__JkrNP {
  position: absolute !important;
  inset: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transition: opacity 1s ease-in-out;
  z-index: -1;
  /* behind everything */
  opacity: 0;
  /* hidden by default */
}

/* Active slide gets full opacity */
.Hero_heroImageVisible__fQrWo {
  opacity: 1;
}

/* Optional gentle Ken‑Burns zoom for motion */
@keyframes Hero_kenburns__MXmyz {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

.Hero_heroImageZoom__GJLZn {
  animation: Hero_kenburns__MXmyz 14s ease-in-out infinite;
  will-change: transform;
}

/* ───────────── Overlay for legibility ───────────── */
.Hero_heroOverlay__X8Ilu {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35));
  pointer-events: none;
  z-index: 0;
}

/* ───────────── Content container (centred) ───────────── */
.Hero_heroContent__ozOW9 {
  position: relative;
  z-index: 10;
  max-width: 52rem;
  /* ~832px */
  margin: 3rem auto 0;
  padding: 0 1.25rem;
  text-align: center;
  color: #fff;
}

.Hero_heroTitle__54m0s {
  font-size: clamp(2.25rem, 4vw, 3rem);
  /* scales nicely */
  font-weight: 800;
  margin-bottom: 1rem;
  color: #cf0921;
  /* Ghana red */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.Hero_heroText__TJ6QR {
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  font-weight: 500;
  margin-bottom: 1.75rem;
  color: #ffd966;
  /* Ghana gold */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ───────────── CTA buttons layout ───────────── */
.Hero_heroButtons__OdgH8 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

@media (min-width: 640px) {
  .Hero_heroButtons__OdgH8 {
    flex-direction: row;
  }
}

/* ───────────── Button base style ───────────── */
.Hero_buttonRed__EhOkE,
.Hero_buttonGreen__GVLzz {
  display: inline-block;
  min-width: 155px;
  padding: 0.8rem 1.6rem;
  border-radius: 0.5rem;
  font-weight: 600;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),
    background-color 0.25s ease-in-out;
}

.Hero_buttonRed__EhOkE {
  background: #cf0921;
  color: #fff;
}

.Hero_buttonRed__EhOkE:hover {
  background: #d61c2e;
  transform: translateY(-2px) scale(1.03);
}

.Hero_buttonGreen__GVLzz {
  background: #006b3f;
  color: #ffd966;
}

.Hero_buttonGreen__GVLzz:hover {
  background: #004e2d;
  transform: translateY(-2px) scale(1.03);
}

/* Small haptic bump on focus for keyboard users */
.Hero_buttonRed__EhOkE:focus-visible,
.Hero_buttonGreen__GVLzz:focus-visible {
  outline: 3px solid #ffd966;
  outline-offset: 3px;
}