/* Hero section */
.hero-section {
  position: relative;
  height: 90vh;
  overflow: hidden;
    padding-top: 80px;
}

.hero-section > .row {
  height: 100%;
}

.hero-section .row > [class*="col"] {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.hero-section .row > [class*="col"].content-bottom {
  justify-content: flex-end;
  padding-bottom: 8vh;
}

/* Achtergrond — nu direct child van hero-section */
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: #3c3c3c;
}

.hero-bg .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.hero-bg .slide.active {
  opacity: 0.5;
}

.hero-section h1,
.hero-section h2,
.hero-section p {
  color: #fff;
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .hero-section { height: 80vh; }
}

@media (max-width: 576px) {
  .hero-section { height: 75vh; }
}