* {
  font-size: xx-large;
}

/* Basisstijl */
.rochester-regular {
  font-family: "Rochester", cursive;
  font-weight: 400;
  font-style: normal;
}

/* Toepassen van het nieuwe lettertype op de gehele body */
body {
  font-family: "Rochester", cursive; /* Vervang het bestaande lettertype */
  margin: 0;
  padding: 0;
  background-color: #f5f5f5; /* Kleur gelijk aan eerdere pagina's */
  overflow-x: hidden; /* Voorkom horizontale scrollbalk */
  min-width: 320px; /* Minimum breedte om te voorkomen dat inhoud naar links of rechts wordt geduwd */
}

.container {
  max-width: 1200px;
  width: 100%; /* Zorg ervoor dat de container de volledige breedte gebruikt */
  margin: auto;
  padding: 20px;
}

/* Desktop: 3 kolommen */
@media (min-width: 992px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

/* Tablets: 2 kolommen */
@media (max-width: 991px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

/* Mobiel: 1 kolom */
@media (max-width: 767px) {
  .grid {
    display: block; /* Maak de grid blokken voor mobiel */
  }

  .text-section,
  .image-section {
    width: 100%; /* Zorg ervoor dat tekstsecties en afbeeldingssecties de volledige breedte innemen */
  }

  /* Formulier */
  form {
    width: 100%; /* Zorg ervoor dat het formulier de volledige breedte van het scherm gebruikt */
  }
}

/* Responsieve afbeeldingen */
img {
  max-width: 100%;
  height: auto;
}

nav {
  background-color: #6b8e23;
  padding: 10px;
  text-align: center;
  position: fixed;
  top: 0;
  width: 100%; /* Volledige breedte voor de navigatiebalk */
  z-index: 1000;
}

nav a {
  margin: 0 15px;
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: 30px; /* Correcte lettergrootte zonder spatie */
}

nav a:hover {
  color: #000;
}

footer i:hover {
  color: #000;
}

.container {
  width: 80%;
  margin: 80px auto; /* Marges voor de container */
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.content {
  display: flex;
  flex-direction: column; /* Verander de flex richting naar kolommen */
  align-items: flex-start;
  margin-top: 20px;
}

.text-section {
  width: 100%; /* Verander de breedte van de tekstsectie naar 100% */
}

.image-section {
  width: 100%; /* Verander de breedte van de afbeeldingssectie naar 100% */
  text-align: center;
}

.image-section img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.map {
  margin-top: 20px;
  text-align: center;
}

.map iframe {
  width: 100%; /* Volledige breedte voor de iframe */
  height: 350px; /* Aangepaste hoogte voor de iframe, verkleind */
  border: 0; /* Geen rand */
  border-radius: 8px; /* Ronde hoeken voor de iframe */
}

/* Stijlen voor het formulier */
form {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  width: 100%; /* Zorg ervoor dat het formulier de volledige breedte gebruikt */
  box-sizing: border-box; /* Zorg ervoor dat padding en borders bij de breedte worden opgeteld */
}

label {
  display: block;
  margin-top: 10px;
}

input,
select,
textarea {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  margin-top: 20px;
  padding: 10px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}