/* ========== FULL-SCREEN HERO CAROUSEL ========== */
.hero {
  height: 100vh;                      /* full viewport height */
  overflow: hidden;
  position: relative;
}

#heroSlider,
#heroSlider .carousel-inner,
#heroSlider .carousel-item {
  height: 100%;                       /* inherit full height */
}

/* --- image behaviour --- */
#heroSlider img {
  width: 100%;
  height: 100%;
  object-fit: cover;                  /* always cover the slide */
  transition: transform 8s ease;      /* slow zoom */
}

/* subtle zoom while sliding */
#heroSlider .active img {
  transform: scale(1.08);
}

/* --- optional caption overlay --- */
.carousel-caption {
  background: rgba(0, 0, 0, .45);
  padding: 1.5rem 2rem;
  border-radius: .5rem;
  animation: fadeInCaption 1.2s ease;
}

@keyframes fadeInCaption {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ========== RESPONSIVE TWEAKS ========== */
@media (max-width: 767.98px) {
  .hero { height: 70vh; }             /* shorter on phones */
  .carousel-caption { font-size: .9rem; }
}