/* Afbeeldingen met hover-zoom */
.hover-zoom {
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s ease;
  display: block;
}

.hover-zoom:hover {
  transform: scale(1.05);
}

/* Container voor de carrousel */
.hero-slider {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  height: 520px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Transparante laag over foto's */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.30) !important; /* !important overschrijft eventuele oude inline waarden */
  z-index: 2;
}

/* De tekst */
.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
}

/* De echte foto's en crossfade */
.hero-slide-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: djembeFade 50s infinite; /* Aangepast naar 50s */
  z-index: 1;
}

/* Timing afgestemd op een 50s cyclus */
@keyframes djembeFade {
  0% { opacity: 0; }
  2% { opacity: 1; }
  10% { opacity: 1; }
  12% { opacity: 0; }
  100% { opacity: 0; }
}

.slide-1  { animation-delay: 0s; }
.slide-2  { animation-delay: 5s; }
.slide-3  { animation-delay: 10s; }
.slide-4  { animation-delay: 15s; }
.slide-5  { animation-delay: 20s; }
.slide-6  { animation-delay: 25s; }
.slide-7  { animation-delay: 30s; }
.slide-8  { animation-delay: 35s; }
.slide-9  { animation-delay: 40s; }
.slide-10 { animation-delay: 45s; }

@media (max-width: 768px) {
  .hero-slider { height: 600px; }
}