/* Algemene reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth; /* Dit zorgt voor soepel scrollen */
}

/* Body styling */
body {
  font-family: Arial, sans-serif;
  color: #fcfcfc;
}

h3 {
  font-weight: bold;
  font-size: 20px;
}

h4 {
  font-weight: 100;
  font-size: 20px;
}

h5 {
  font-weight: 100;
  font-style: italic;
  font-size: 20px;
}

@media (max-width: 768px) {
  .menu {
    visibility: hidden;
  }
}
/* Header styling */
.transparent-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  z-index: 1000;
}

.transparent-header .menu a {
  margin-left: 20px;
  text-decoration: none;
  color: #fcfcfc;
  font-weight: 100;
  transition: color 0.3s ease;
}

.transparent-header .menu a:hover {
  font-weight: bold;
}

/* Banner styling */
.banner {
  position: relative;
  height: 75vh;
  background: url("images/banner.png") center/cover no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: left;
}

.banner .gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(7, 7, 7, 0) 0%,
    rgba(7, 7, 7, 1) 100%
  );
  z-index: 998;
}

/* Nieuwe klasse voor tekst in de banner */
.banner-text {
  position: absolute; /* Zorgt ervoor dat de tekst over de banner heen komt */
  bottom: 10%; /* Zet de tekst aan de onderkant van de banner */
  left: 10%; /* Centreert de tekst horizontaal */
  /* Dit zorgt ervoor dat de tekst precies in het midden staat */
  color: #fcfcfc; /* Witte tekstkleur */
  z-index: 999; /* Zorgt ervoor dat de tekst boven de gradient komt */
}

.banner-text h3,
.banner-text h4,
.banner-text h5 {
  font-size: 70px; /* Stel de tekstgrootte in op 50px */
  color: #fcfcfc; /* Optioneel: stel de kleur in op wit */
}

@media (max-width: 768px) {
  .banner-text h3,
  .banner-text h4,
  .banner-text h5 {
    font-size: 30px;
  }
}

.logo-linksboven {
  width: 200px;
  fill: #fcfcfc;
}

.menu {
  right: 0;
}

.activiteiten {
  text-align: center;
  margin-left: 10%;
  margin-right: 10%;
}

.activiteiten-block {
  background-color: #070707;
}

.activiteit-1,
.activiteit-2,
.activiteit-3 {
  float: left;
  display: block;
  width: 33%;
}

/* Activiteit standaard styling */
.activiteit {
  cursor: pointer;
  padding: 10px;
  opacity: 0.5; /* Niet-actieve evenementen */
  transition: transform 0.3s, opacity 0.3s;
  position: relative;
  padding-bottom: 20px;
}

/* Hover-effect */

.activiteit::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px; /* Dunne standaard border */
  background-color: #fcfcfc;
  transition: height 0.3s ease, background-color 0.3s ease; /* Animatie voor verandering */
}

/* Actieve activiteit styling */
.activiteit.active {
  opacity: 1; /* Actieve evenementen volledig zichtbaar */
  transform: scale(1.1); /* Extra visuele focus */
}

.activiteit.active::before {
  height: 10px; /* Dikkere border */
  background-color: #fcfcfc; /* Eventueel een andere kleur voor actieve border */
}

.activiteit-logo {
  max-width: 50px;
}

.activiteiten h3,
h4,
h5 {
  color: #fcfcfc;
}

.activiteit-info {
  color: #fcfcfc;
}

.info-content {
  display: none;
}

.info-content.active {
  display: block;
}

.activiteit-info {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  background-color: #070707;
  color: #fcfcfc;
  padding: 20px 0;
  height: 100%;
}

.info-content {
  display: none; /* Verberg standaard alle info-secties */
  width: 100%;
  flex-wrap: wrap; /* Zorg ervoor dat kinderen in een rij passen */
  align-items: center;
}

.info-content.active {
  display: flex; /* Alleen actieve secties worden getoond */
}

.info-image {
  width: 40%;
  margin: 0 5%;
  overflow: hidden; /* Verberg het gedeelte dat buiten het frame valt */
  padding-top: 50px;
  padding-bottom: 20px;
}

.info-image img {
  width: 100%;
  height: 500px; /* Stel een vaste hoogte in */
  object-fit: cover; /* Zorg dat de afbeelding wordt bijgesneden */
  object-position: center; /* Centraal focuspunt van de afbeelding */
  border-radius: 10px; /* Optioneel: een lichte afronding */
}

.info-text {
  width: 40%;
  margin: 0 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 20px;
}

.info-text h3,
h4,
h5 {
  color: #fcfcfc;
}

@media (max-width: 768px) {
  .info-image,
  .info-text,
  .activiteit-1,
  .activiteit-2,
  .activiteit-3 {
    width: 90%;
    margin: 5%;
    text-align: center;
  }

  .info-content {
    flex-direction: column; /* Stack de items op kleinere schermen */
    text-align: center;
  }
}

.gratis-event {
  display: block;
  border: 1px solid #fcfcfc;
  text-align: center;
  padding: 10px;
  border-radius: 5px;
  margin-top: 10%;
  background-color: #fcfcfc;
}

.gratis-event h3 {
  color: #070707;
}

.menu-button {
  display: block;
  border: 1px solid #fcfcfc;
  text-align: center;
  padding: 10px;
  border-radius: 5px;
  margin-top: 10%;
  text-decoration: none;
  background-color: #070707; /* Achtergrond zwart */
  color: #fcfcfc; /* Tekst wit */
  font-weight: 100; /* Zet het font-weight voor consistentie */
  transition: background-color 0.3s ease, color 0.3s ease; /* Voeg transitie toe voor achtergrondkleur en tekstkleur */
}
/* Hover-effect voor de knop */
.menu-button:hover {
  font-weight: bold; /* Verdikt de tekst bij hover */
  background-color: #fcfcfc; /* Maak de achtergrond wit bij hover */
  color: #070707; /* Maak de tekst zwart bij hover */
}

/* Verander de tekstkleur van h3 specifiek bij hover */
.menu-button:hover h3 {
  color: #070707; /* Maak de tekst zwart bij hover */
  font-weight: bold;
}

.menu-button h3 {
  font-weight: 100;
  color: inherit; /* Zorgt ervoor dat de tekstkleur de standaardkleur volgt (wit in dit geval) */
}

.aftermovie-block {
  background-color: #fcfcfc;
  aspect-ratio: 16 / 9;
  width: 100% !important;
}

.aftermovie-block h3 {
  color: #070707;
  text-align: center;
  font-size: 36px;
  padding-top: 40px;
  padding-bottom: 20px;
}

.aftermovie-block iframe {
  display: flex;
  justify-content: center;
  width: 80%;
  height: 80%;
  margin: 0 auto;
}

.onze-harmonie-block {
  background-color: #070707;
  height: 100%;
  grid-template-columns: 1fr 1fr;
  flex-wrap: wrap;
  display: grid;
  overflow: hidden;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .onze-harmonie-block {
    display: block;
  }
  .onze-harmonie-text {
    text-align: center;
  }
}

.onze-harmonie-block h3 {
  padding-top: 40px;
  font-size: 36px;
  text-align: center;
}

.onze-harmonie-img {
  width: 100%; /* Zorgt ervoor dat de afbeelding de breedte van de div vult */
  height: 100%; /* De afbeelding vult ook de hoogte van de div */
  object-fit: cover; /* Snijdt de afbeelding bij om de container volledig te vullen */
  object-position: center top; /* Centreert de afbeelding in zowel hoogte als breedte */
}

.onze-harmonie-block p {
  margin-top: 36px;
  font-size: 20px;
}

.onze-harmonie-text {
  padding-left: 20%;
  padding-right: 20%;
  padding-bottom: 20px;
}

.socials {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: center;
}

@media (max-width: 768px) {
  .socials {
    display: block;
  }
}

.socials svg {
  height: 50px;
}

.socials h3 {
  margin-top: 10px;
  color: #070707;
}

.socials a {
  text-decoration: none;
}

.facebook,
.instagram {
  display: block;
  padding-top: 20px;
  padding-bottom: 20px;
}

.facebook:hover {
  background-color: #0074f1;
  cursor: pointer;
}

.instagram:hover {
  background: linear-gradient(230deg, #bc00b2, #fb0014, #ffd32b);
  cursor: pointer;
}

/* Zorg dat de SVG wit wordt bij hover van de oudercontainer */
.facebook:hover svg,
.instagram:hover svg {
  fill: #fcfcfc;
}

.facebook:hover h3,
.instagram:hover h3 {
  color: #fcfcfc;
}

.contact {
  background-color: #070707;
  padding-top: 20px;
  height: 100%;
}

.contact h3 {
  text-align: center;
  font-size: 36px;
}

.contact img {
  height: 200px;
  margin-top: 20px;
}

.user {
  display: grid;
  grid-template-columns: 1FR 1fr;
  padding-bottom: 20px;
  width: 50%;
  margin-left: 50px;
  align-items: center;
}

.user h3 {
  font-size: 20px;
}

@media (max-width: 768px) {
  .user {
    width: 100%;
    display: block;
    margin: 0 auto;
  }
  a {
    margin-top: 20px;
  }
}

.contact-mail a {
  text-decoration: none;
  color: #fcfcfc;
  display: block;
  border: 1px solid #fcfcfc;
  text-align: center;
  padding: 20px;
  border-radius: 100px;
  font-weight: bold;
  font-size: 20px;
  margin: 0 auto;
  margin-left: 50px;
  margin-right: 50px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.contact-mail a:hover {
  background-color: #fcfcfc;
  color: #070707;
}