body {
  margin: 0;
  padding: 0;
  background-image: radial-gradient(circle, #cfc9aa 1px, transparent 1px);
  background-size: 40px 40px;
  overflow-x: hidden;
  user-select: none;
  font-family: Arial, sans-serif;
  background-color: #f8f6eb;
  min-height: 100vh;
  margin-bottom: -20px;
  background-position: 0px 0px;
  transition: background-position 0.1s ease;
}

.intro-section {
  display: flex; /* Use flexbox for layout */
  height: 100vh; /* Full viewport height */
  margin-bottom: 15vh; /* Voeg marge toe onder elke sectie */
}

.left-intro {
  width: 50%; /* Left side for the intro content */
  padding-left: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* Standaard uitlijning aan de linkerkant */
}

.center-text {
  align-items: center; /* Centreer items horizontaal */
  text-align: center; /* Centreer tekst */
  padding-left: 0; /* Verwijder padding aan de linkerkant */
}

.right-intro {
  width: 50%; /* Rechterzijde voor de intro afbeelding */
  height: 100vh; /* Volledige hoogte van het viewport */
  background-size: cover; /* Zorg ervoor dat de afbeelding de hele ruimte bedekt */
  background-position: center; /* Centreer de afbeelding */
}

.intro-section.mirrored {
  flex-direction: row-reverse;
  margin-bottom: 0; /* Reverse the order for the mirrored section */
}

.intro-section.mirrored .right-intro {
  background-image: url("images/image2.jpeg"); /* Vervang dit door het pad naar je tweede afbeelding */
}

.intro-section:not(.mirrored) .right-intro {
  background-image: url("images/image1.jpg"); /* Vervang dit door het pad naar je eerste afbeelding */
}

.menu {
  font-size: 18px;
  color: #b35a1f;
  display: flex; /* Keep it as flex to align items */
  align-items: center; /* Center items vertically */
  position: fixed; /* Make the menu fixed to the viewport */
  top: 0; /* Position it at the top */
  left: 0; /* Position it at the left */
  background-color: #fff; /* Background color for the menu */
  z-index: 10; /* Ensure the menu is above other content */
  padding: 10px; /* Add some padding */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional shadow for depth */
  margin-bottom: 15px; /* Add margin to create space below the menu */
}

.menu-icon {
  display: flex;
  flex-direction: column; /* Stack the bars vertically */
}

.menu-text {
  margin-left: 10px;
}

.bar {
  width: 25px; /* Width for hamburger icon */
  height: 3px; /* Height for the hamburger icon */
  background-color: #b35a1f;
  margin: 2px 0; /* Space between lines */
  transition: all 0.3s ease; /* Smooth transition for hover effects */
}

.dropdown {
  display: none; /* Hide the dropdown by default */
  position: fixed;
  top: 42px; /* Position it below the menu */
  left: 0; /* Start from the left */
  width: 250px; /* Set the width of the sliding menu */
  background-color: white; /* Background color for dropdown */
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2); /* Optional shadow */
  z-index: 1; /* Make sure it appears above other content */
}

.dropdown.show {
  display: block; /* Show the dropdown when the class 'show' is added */
}

.dropdown ul {
  list-style-type: none; /* Remove bullet points */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margin */
}

.dropdown li {
  padding: 15px; /* Add padding for each item */
  cursor: pointer; /* Change cursor to pointer on hover */
}

.dropdown li:hover {
  background-color: #f0f0f0; /* Change background on hover */
}
.dropdown a li {
  text-decoration: none;
  color: #3d3d3d;
}

a {
  text-decoration: none;
}

.title {
  font-size: 55px;
  color: #3d3d3d;
  font-weight: bold;
  margin: 0;
  text-align: center;
}

.subtitle {
  font-size: 18px;
  color: #7d7d7d;
  margin-top: 10px;
  text-align: center;
  padding-left: 5vh;
  padding-right: 5vh;
}

h1 {
  text-align: center;
  color: #3d3d3d;
}

p {
  text-align: center;
  color: #7d7d7d;
}
.arrow {
  position: absolute;
  font-size: 50px;
  opacity: 0;
}
/* Media Query for Mobile Devices */
@media (max-width: 768px) {
  html {
    scroll-behavior: smooth;
  }
  body {
    height: 1350px;
    margin-bottom: -100vh;
  }
  .intro-section {
    flex-direction: column; /* Stack the sections vertically */
    height: auto; /* Allow height to adjust based on content */
  }

  .left-intro {
    width: 100%; /* Full width for left intro */
    padding-left: 0; /* Remove left padding */
    padding-right: 0; /* Remove right padding */
    background-image: url("images/image1.jpg"); /* Set background image for mobile */
    background-size: cover; /* Ensure the image covers the entire area */
    background-position: center; /* Center the image */
    height: 50vh; /* Set a height for the left intro */
    margin-bottom: 35vh;
    margin-top: 30vh;
  }

  .right-intro {
    display: none; /* Hide the right intro image on mobile */
  }
  .intro-section.mirrored {
    margin-top: -55vh;
    height: 50vh;
  }
  .left-intro .center-text {
    margin-bottom: 0;
  }
  .intro-section.mirrored .left-intro {
    background-image: none;
  }
  .title {
    font-size: 30px; /* Decrease title size for mobile */
  }
  .subtitle {
    font-size: 16px; /* Decrease subtitle size for mobile */
  }
  .intro-section .subtitle {
    color: #3d3d3d;
  }
  .text-box {
    position: absolute;
    padding: 2vh;
    border-radius: 5px;
    margin-top: -75vh;
  }
  .arrow {
    opacity: 1; /* Show the arrow on mobile */
    margin-top: 78vh;
    rotate: 90deg;
    background-color: rgba(255, 255, 255, 0.5);
    width: 58px;
    height: 58px;
    border-radius: 50px;
    border: solid 1px;
    margin-left: -60%;
    color: #e7dab6;
  }
}
/* Media Query voor iPad Devices */
@media (min-width: 769px) and (max-width: 1024px) {
  .intro-section {
    flex-direction: row; /* Houd de secties naast elkaar */
  }

  .left-intro {
    padding: 20px; /* Voeg padding toe */
  }

  .right-intro {
    background-size: cover; /* Zorg ervoor dat de afbeelding de hele ruimte bedekt */
    background-position: center; /* Centreer de afbeelding */
  }
  /* Aangepaste lettergroottes voor iPad */
  .title {
    font-size: 40px; /* Nog kleinere titelgrootte voor iPad */
  }

  .subtitle {
    font-size: 22px; /* Nog kleinere subtitelgrootte voor iPad */
  }
}