/* home.css */

/* === VIDEO BANNER === */
.video-banner {
  position: relative;
  width: 100%;
  height: 100vh;  /* volledige hoogte scherm */
  overflow: hidden;
  z-index: 1; /* onder de navbar */
}

@media (max-width: 768px) {
  .video-banner {
    height: 55vh; /* 60% van de viewport hoogte */
  }
}

.video-banner video  , .banner-image {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%) scale(1.2); /* zoom om zwarte randen weg te halen */
  z-index: 1;
}

.video-banner .overlay {
  position: absolute;
  bottom: 5%;   /* afstand van onderkant video */
  left: 3%;     /* afstand van linkerkant video */
  text-align: left;  /* links uitlijnen */
  color: #F3F3E9; 
  z-index: 2;
}

.main {
  position: relative; /* nodig voor het pseudo-element */
  z-index: 0; /* tekst blijft erboven */
  padding-bottom: 5rem;
}

.main::before {
  content: "";
  position: absolute;
  top: -0px; /* start iets boven de tekst zodat hij aansluit */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 15vw;
  background: radial-gradient(
    ellipse at center top,
    rgba(161, 128, 27, 0.623) 0%,
    rgba(0, 0, 0, 0) 70%
  );
  pointer-events: none;
  z-index: -1; /* <<< zorgt dat hij achter de tekst komt */
}



.video-banner .overlay h2 {
  font-family: 'MonumentExtended', sans-serif;
  font-weight: 100;
  font-size: clamp(1rem, 2.5vw, 1.5rem); /* van 1rem tot 1.5rem */
  margin: 0.5rem 0;
}

.video-banner .overlay h1 {
  font-weight: 100;
  font-size: clamp(1.5rem, 5vw, 2.5rem); /* van 1.5rem tot 2.5rem */
  margin: 0.5rem 0;
}




/* === NAVBAR OP HOMEPAGE === */
.homepage .navbar.navbar-transparent {
  position: absolute;  /* zweeft boven de video */
  top: 0;
  left: 0;
  width: 100%;
  background: transparent; /* transparant boven video */
  z-index: 10; /* boven de video */
}

/* Links en logo wit + leesbaar */
.homepage .navbar .nav-link,
.homepage .navbar .navbar-brand {
  color: #F3F3E9; 
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* subtiele shadow voor leesbaarheid */
}

/* Hover effect iets duidelijker */
.homepage .navbar .nav-link:hover {
  color: #f5c252;
}

/* Zorg dat de mobiele overlay boven alles komt */
.homepage .navbar-overlay {
  z-index: 1050;
}

.video-banner .overlay .row > div {
  width: 70%; /* desktop, col-3 */
}

@media (max-width: 768px) { /* mobiel */
  .video-banner .overlay .row > div {
    width: 80%; /* mobiel, col-8 */
  }
}

.partners{
  margin-top: 50px;
  margin-bottom: 0px;
  padding: 0px;
}


.logo-slider {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 150px; /* hoogte van de logos */
}

.slide-track {
  display: flex;
  width: calc(250px * 14); /* 7 logos * 2 */
  animation: scroll 40s linear infinite;
}

.slide {
  height: 120px;
  width: 250px; /* vaste breedte per logo-container */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

.slide img {
  max-height: 150px;
  max-width: 200px;
  filter: grayscale(0%); /* stijl: grijs */
  opacity: 1;
  transition: all 0.3s ease;
}

.slide img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

/* animatie */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.main p.fs-5 {
  font-size: clamp(0.9rem, 2.5vw, 1rem);
}

.main p.fs-7 {
  font-size: clamp(0.7rem, 2vw, 0.9rem);
}

@media (max-width: 576px) {
  .main p.fs-5 {
font-size: clamp(0.9rem, 2vw, 0.9rem) !important;
}

.video-banner {
    height: 35vh; /* 60% van de viewport hoogte */
  }

.main {
  padding-bottom: 1rem;
}
.slide img {
  max-height: 70px;
  max-width: 125px;
  }

  .video-banner video  , .banner-image {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 50%;
  object-fit: cover;
  transform: translate(-50%, -50%) scale(1); /* zoom om zwarte randen weg te halen */
  z-index: 1;
}
}


.home-carousel-section {
  margin-top: 50px;
  margin-bottom: 0;
  padding: 0;
}

.home-carousel-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto; /* hoogte van de carousel */
}

.home-carousel-track {
  display: flex;
  width: calc(250px * 16); /* 8 afbeeldingen * 2 */
  animation: home-scroll 40s linear infinite;
}

.home-slide {
  height: auto;
  width: 38vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0px;
}

.home-slide img {
  max-height: auto;
  max-width: 38vw;
  object-fit: cover;
  transition: transform 0.3s ease;
}


/* Animatie */
@keyframes home-scroll {
  0% {
    transform: translateX(calc(-250px * 8)); /* start aan de “eind”-positie */
  }
  100% {
    transform: translateX(0); /* eindigt bij 0 */
  }
}

@media (max-width: 576px) {
  .home-slide {
  height: auto;
  width: 70vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0px;
}

.home-slide img {
  max-height: auto;
  max-width: 70vw;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.slide {
  height: 120px;
  width: 120px; /* vaste breedte per logo-container */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}
  }


  @media (max-width: 768px) {
  .home-slide {
  height: auto;
  width: 60vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0px;
}

.home-slide img {
  max-height: auto;
  max-width: 60vw;
  object-fit: cover;
  transition: transform 0.3s ease;
}
  }

  @media (max-width: 1024px) and (min-width: 769px) {
    .home-slide {
  height: auto;
  width: 70vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0px;
}

.home-slide img {
  max-height: auto;
  max-width: 70vw;
  object-fit: cover;
  transition: transform 0.3s ease;
}
}