/* Algemeen voor body en header */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 80px; /* Ruimte voor de vaste header */
}

/* Algemeen voor de header */
header {
  background-color: #e6e8ec;
  opacity: 90%;
  width: 100%;
  padding: 20px 20px;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Nav: Center the navigation on larger screens */
nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

nav a {
  margin-right: 15px;
  text-decoration: none;
  color: #333;
  position: relative;
}

/* Hamburger menu for mobile view */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  position: absolute; /* Zorgt dat de hamburger naar links gaat */
  right: 40px; /* Verplaatst de hamburger naar de linkerkant */
  top: 0px;
  z-index: 1100; /* Zorg dat het hamburger-icoon boven de andere elementen staat */
}


.hamburger div {
  width: 25px;
  height: 3px;
  background-color: #86868c;
  margin: 4px 0;
}

/* Verberg de navigatie en toon het hamburger menu op kleine schermen */
@media (max-width: 768px) {
  nav {
    display: none; /* Verberg de reguliere navigatie */
  }

  .hamburger {
    display: flex; /* Toon het hamburger icoon */
  }

  /* Toon navigatie als op het hamburger-icoon wordt geklikt */
  .nav-open nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 60px;
    right: 0;
    width: 50%;
    background-color: #a3a4a7;
    opacity: 90%;
    z-index: 5000; /* Zorg dat het menu boven andere elementen staat */
    padding-left: 20px; /* Links uitgelijnd hoofdmenu */
    text-align: left; /* Zorg dat de tekst van de menu-items links uitgelijnd is */
    align-items: flex-start; /* Zorg dat alle items links worden uitgelijnd in plaats van gecentreerd */
  }

  .nav-open nav a {
    margin: 10px 0;
    padding-left: 20px; /* Houd wat ruimte van de linkerkant af */
    color: #09090a;
    font-weight: bold;
    font-size: 18px;
    text-align: left; /* Menu-items links uitlijnen */
    z-index: 5000; /* Zorg dat het menu boven andere elementen staat */
  }

  .nav-open nav a:hover {
    background-color: #ccc;
  }

  /* Submenu stijlen voor mobiele weergave */
  .dropdown-content {
    display: none;
    flex-direction: column;
    background-color: #b7b37c;
    padding-left: 20px; /* Schuif het submenu 20px naar rechts van het hoofdmenu */
    min-width: 180px; /* Vergroot de breedte van het submenu */
    
  }
  

  .dropdown:hover .dropdown-content {
    display: flex; /* Toon submenu bij hover */
    
  }

  .dropdown-content a {
    padding: 10px 20px;
    color: white;
    display: block;
    width: 100%;
    white-space: nowrap; /* Voorkom dat de tekst op een nieuwe regel springt */
}

  .dropdown-content a:hover {
    background-color: #e4e6eb;
  }
  
}

/* Desktop weergave */
@media (min-width: 769px) {
  nav {
    display: flex;
    justify-content: center; /* Centraal uitgelijnd menu op desktop */
    align-items: center;
    width: 100%;
  }

  /* Submenu stijlen voor desktop */
  .dropdown {
    position: relative;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #d6dbdf;
    min-width: 160px;
    z-index: 5001;
    top: 100%; /* Positioneer submenu direct onder het hoofdmenu-item */
    left: 0;
    padding: 10px 0; /* Voeg wat ruimte boven en onder toe aan de items */
  }

  .dropdown:hover .dropdown-content {
    display: block; /* Toon submenu bij hover */
    
  }

  .dropdown-content a {
    padding: 10px 20px; /* Voeg padding toe aan de submenu-items */
    color: white;
    display: block; /* Zorg dat de submenu-items verticaal worden gestapeld */
    width: 100%; /* Maak de items volledig breed onder het hoofdmenu */
    
  }

  .dropdown-content a:hover {
    background-color: #cbccd2;
  }
  .dropdown-content a {
    color: rgb(9, 8, 8); /* Rode tekst */
    font-weight: bold; /* Vetgedrukt */
    z-index: 3001;
  }
}

  h1 {
    text-align: center;
    margin-top: 20px; /* Ruimte boven de tekst */
    margin-bottom: 20px; /* Ruimte onder de tekst */
    font-weight: normal;
  }

  /* Toevoeging van de afbeelding met tekst */
  .banner {
    position: relative;
    width: 100%;
    height: 150px; /* Hoogte van de banner */
    background-image: url('afbeeldingen/entree-buiten/strook-vwwo.jpg'); /* Vervang dit door het pad van je afbeelding */
    background-size: cover;
    background-position: center;
    z-index: -1000;
  }

  .banner h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgb(247, 248, 250);
    font-size: 5em;
    text-align: center;
    white-space: nowrap; /* Zorgt ervoor dat de tekst niet op een nieuwe regel springt */
    margin: 0;
    z-index: -1000;
}

@media (max-width: 768px) {
    .banner h1 {
        font-size:30px; /* Verklein lettertype voor kleinere schermen */
        white-space: nowrap; /* Blijf de woorden op één regel houden */
    }
}

  .image-container {
    text-align: center;
    margin-bottom: 60px; /* Extra ruimte onder de afbeelding */
    
  }

  .image-container img {
    width: 100%;
    max-width: 1200px; /* Maximaal formaat van de afbeelding */
    height: auto; /* Houdt de verhoudingen van de afbeelding correct */
  }

  section {
    width: 100%;
    max-width: 934px;
    padding: 30px;
    text-align: center;
    box-sizing: border-box;
  }

  section p {
    font-size: 18px;
    color: #666;
   
  }

  section img {
    max-width: 100%;
    height: auto;

  }

  footer {
    background-color: #f8f8f8;
    text-align: center;
    padding: 10px;
    margin-top: 20px;
    width: 100%;
    box-sizing: border-box;
  }

 /* Algemeen voor de cirkel */
.circle-container {
  position: absolute;
  top: 20px; /* Plaats de cirkel iets naar beneden vanaf de top */
  left: 20px; /* Plaats aan de rechterkant van de pagina */
  z-index: 2; /* Zorgt dat de cirkel boven de header en H1 staat */
}

.circle {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: rgba(228, 108, 108, 0.5); /* Doorzichtigheid */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: transform 0.3s ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out;
  text-align: center;
}

.circle span {
  position: absolute;
  color: white;
  font-size: 1.5em;
  z-index: 2;
}

.circle img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Zorgt dat de afbeelding volledig zichtbaar blijft in de cirkel */
  object-position: center; /* Centreert de afbeelding binnen de cirkel */
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
  z-index: 1;
}

.circle:hover {
  width: 400px; /* Vergroot de cirkel bij hover */
  height: 400px; /* Vergroot de cirkel bij hover */
}

.circle:hover img {
  width: 100%; /* Zorgt dat de afbeelding volledig binnen de vergrote cirkel blijft */
  height: 100%;
}

.circle:hover span {
  display: none; /* Verberg de tekst bij hover */
}

/* Zorg dat de cirkel deels over de header en H1 komt */
header, .banner h1 {
  position: relative;
  z-index: 1; /* Z-index lager dan de cirkel zodat deze overlapt */
}