/*RESET DEFAULT (*=alles OF "html,body" STIJL*/
* {
  margin: 0;
  /*reset standaard margesbrowsers*/
  padding: 0;
  /*reset opvullingen browsers*/
  box-sizing: border-box;
  /*padding+border meegerekend in breedte/hoogte elementen*/
}

/*BODY*/
html,
body {
  justify-content: center;
  /* Centers horizontally */
  align-items: center;
  height: 100%;
  /* Ensure the body takes full height of the viewport */
  padding: 0;
  margin: 0;
  /* Centers vertically */
  /* achtergrondkleur als fallback,moest de achtergrondfoto niet laden*/
  font-family: "Merriweather", sans-serif;
  /*lettertype*/
  background-color: #164503;
  background-image: url("https://i.ibb.co/HG7VNHZ/rb-60903.png");
  background-size: 250px;
  /*grootte afbeelding */
  background-repeat: round;
  /* herhaling afbeelding meerdere keren*/
  background-position: center;
  /* Centreert achtergrond afbeelding */
}

.page-wrapper {
  display: flex;
  min-height: 100vh;
  /* Verzekerd dat het de volledige hoogte van de viewport inneemt*/
}

.content-wrapper {
  /*inhoud "wrapped" in een container*/
  margin-top: 200px;
  /*marge boven en onder de content wrapper,achtergrond zichtbaar*/
  margin-bottom: 150px;
  height: auto;
  background: rgba(255, 255, 255, 0.671);
  /*semi-transparante achtergrond*/
  position: relative;
  /*positie element relatief tot parent element*/
  width: fit-content;
  /*enige manier om ervoor te zorgen dat de foto's niet uit content-wrapper "poppen"*/
}

.home-page {
  text-align: center;
  /*centreren tekst onder foto*/
}

.welcome h1 {
  padding: 50px;
  /*ruimte tussen ondertekst en hoofdtekst "welkom"*/
  margin-bottom: 0px;
  /*idem +/-*/
  font-size: 2rem;
  /*rem=root em, 3xrem equal tot font-size html element(def:16px)*/
  color: #208e05;
  opacity: 0;
  /* Teks start transparant/onzichtbaar*/
  animation: fadeIn 1s ease-in-out forwards;
  /* Animatie toepassen */
}

.welcome p {
  padding: 0;
  /*ruimte tussen ondertekst en hoofdtekst "welkom"*/
  margin-bottom: 10px;
  /*idem +/-*/
  font-size: 22px;
  /*rem=root em, 3xrem equal tot font-size html element(def:16px)*/
}

@keyframes fadeIn {

  /*animatie h1*/
  from {
    opacity: 0;
    /* Begin transparant */
  }

  to {
    opacity: 1;
    /* Volledig zichtbaar */
  }
}

.gallery {
  /*flex zet ze allemaal naast elkaar,willen we niet*/
  display: grid;
  /*zorgt ervoor dat foto's in grid staan, 4 bij groot, 2 per 2 bij verkleinen scherm*/
  grid-template-columns: repeat(4,
      1fr);
  /* Standaard: 4 foto's naast elkaar (4 columns-grid, 2 column-rows*/
  gap: 20px;
  /* Ruimte tussen foto secties */
  padding: 20px;
}

/* Stijl voor elke foto */
.photo {
  /*display:flex;justify-content:space-between NIET toegepast; NOK*/
  flex-direction: column;
  /* Plaatst inhoud in een kolom */
  background: #fff;
  /*content-wrapper kleur*/
  border-radius: 5px;
  /*afronding hoeken content-wrapper*/
  padding: 20px;
  /*ruimte L,R,B,O tekst en foto*/
  /*text-align: center staat reeds elders toegepast(home-page)*/
}

.photo img {
  /*hier veranderd de grootte van de foto's niet, ik wou ze allemaal even groot; zie hiervoor plantengalerij*/
  width: 250px;
  /* Foto volledig schaalbaar (als op 100% staat) */
  height: 250px;
  /* Behoudt de oorspronkelijke verhoudingen (als enkel op auto staat) */
  border-radius: 5px;
  object-fit: cover;
  /*schaal foto's zonder vervorming (250px ingesteld heeft zo geen invloed op kwaliteit foto) */
}

/* Stijl voor de figcaption */
.photo figcaption {
  text-align: end;
  /*tekst op einde en niet centraal geplaatst*/
  font-size: 10px;
  /* Tekstgrootte aanpassen */
  font-style: italic;
  /* Stijl aanpassen */
  color: gray;
  /* Tekstkleur */
  margin-bottom: 10px;
  /*ruimte tussen figcaption en tekst*/
}

/* Text Content Styling */
.text-content p {
  margin: 10px 0;
  /*ruimte tussen p en h2*/
  color: #555;
  /*andere kleur dan h2*/
}

.text-content .button {
  display: inline-block;
  /*grootte bepalend knop*/
  padding: 10px 15px;
  /*grootte bepalend knop*/
  background-color: #208e05;
  color: white;
  /*tekstkleur*/
  text-decoration: none;
  /*onderlijning uitzetten"geen"*/
  border-radius: 5px;
  transition: background-color 0.3s ease;
  /*bij hoveren transitie kleur naar lichter kleur*/
}

.text-content .button:hover {
  background-color: #36bc0e;
}

/* MEDIA QUERIES =>RESPONSIVITEIT op meerdere schermgroottes */
/* Grotere schermen (>800px) */
@media (min-width: 800px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
    /* 4 foto's naast elkaar */
  }
}

/* Kleinere schermen (<800px) */
@media (max-width: 800px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    /*2 foto's per rij */
  }

  .welcome h1 {
    font-size:20px;
  }

  .welcome p {
    font-size:15px;
  }

  .text-content h2 {
    font-size:16px;
  }

  .text-content p {
    font-size:14px;
  }

  .text-content a {
    font-size:12px;
  }

}

@media (max-width: 480px) {
  .gallery {
    grid-template-columns: 1fr;
    /* Foto's onder elkaar bij zeer kleine schermen */
  }
}

/*NAVMENU*/
.navbar {
  top: 0;
  /*geen "wit"ruimte tussen toprand en beginrand navmenu*/
  justify-content: space-between;
  /*zorgt ervoor dat hamburger menu helemaal rechts staat*/
  width: 100%;
  /*zorgt ervoor dat de balk de hele pagina vult in de breedte, geen gaps*/
  height: 100px;
  /*bepaald hoogte van balkbovenrand tov rand top webpagina*/
  background-color: #247514d9;
  /*header,zelfde als footer*/
  color: white;
  /*titels tekstkleur*/
  position: fixed;
  /*bij scrollen blijft navbar gefixeerd staan op dezelfde plaats*/
  align-items: center;
  /*titels gecentreerd*/
  display: flex;
  /*positioneerd logo en titels correct op balk*/
  padding: 0 20px;
  /* ruimte tussen logo en titels op navbalk*/
  z-index: 10;
  /*zorgt ervoor dat er geen overlap is als hamburgermenu geopend wordt*/
}

.logo {
  height: 150px;
  padding-top: 20px;
  color: white;
  /*als logo niet zou laden, wordt "alt"-tekst weergegeven in dit kleur*/
}

.nav-links {
  /*nav titels naar andere webpagina's*/
  display: flex;
  /*geeft anders webtitels weer in kolomvorm*/
  list-style: none;
  /*geeft anders webtitels oplijsting "bulletpoints"*/
}

.nav-links li {
  /*styling webpagina titels bij openklappen hamburgermenu*/
  margin: 0px 15px;
}

.nav-links a {
  text-decoration: none;
  /*onderlijning weg*/
  color: white;
  font-size: 18px;
}

.nav-links a:hover {
  /*kleur wijziging achtergrond bij hoveren over titels*/
  background: #36bc0e;
  border-radius: 5px;
  /*afgeronde hoeken*/
}

/*HAMBURGER*/
.dropdown-menu {
  display: none;
  /*opengeklapt hamburgermenu wordt pas getoond bij openklikken, anders staat het er default*/
  position: relative;
  /*positioneert opengeklapt hamburger menu onder hamburgericoon waarbij paginatitels mooi zichtbaar zijn, ipv gebruik absoluut*/
  margin-left: 70%;
  /*openklap hamburger 60% "wit"ruimte van links gezien*/
  background-color: #247514d9;
  border: 1px solid #247514d9;
  /*kleur rand rond hamburger openklap menu*/
  border-radius: 8px;
  /*randen "ronder" maken en niet scherp*/
  z-index: 10;
  /*vermijdt overlap door controle op opeenhoping elementen*/
  margin-top: 30px;
}

.dropdown-menu.show {
  display: flex;
  /* Display menu wanneer "show" klasse toegevoegd is */
}

.dropdown-menu a {
  display: block;
  /*elke titel wordt weergegeven in zijn eigen "blokje"*/
  padding: 10px 20px;
  /*afstand tussen titel en ruimte in blokje*/
  color: white;
  text-decoration: none;
  /*anders onderlijnde tekst*/
  border-bottom: 1px solid #36bc0e;
  /*kleur horizontale lijnen tussen dropdown titels*/
  text-align: left;
  font-size:15px;
  max-width:100%;
  position:relative;
}

.dropdown-menu a:last-child {
  border-bottom: none;
  /*er is geen onderlijning op het laatste blokje van de laatste titel (child)*/
}

.dropdown-menu a:hover {
  /*als je over "dropdown" hamburger hovert, veranderd kleur menutitel*/
  background-color: #36bc0e;
}

/*RESPONSIVITEIT NAVMENU + HAMBURGER*/
@media (max-width: 768px) {
  .nav-links {
    display: none;
    /*verborgen wanneer scherm breedte <=768px*/
  }

  .hamburger {
    display: block;
    /*hamburger zichtbaarheid*/
  }

  /* <800px*/
  .dropdown-menu {
    display: none;
    /* Hidden by default */
  }


  /* wanneer "show" klasse getoggled is*/
  .dropdown-menu.show {
    display: flex;
    /* Display van het menu */
    position: absolute;
    top: 70px;
    /* vezekerd dat het gepositioneerd is deornder*/
    left: 0;
    width: 100%;
    flex-direction: column;
  }
}

/* >800px, horizontale weergave nav links */
@media (min-width: 800px) {
  .hamburger {
    display: none;
    /* verbergt hamburger */
  }

  .dropdown-menu {
    display: none;
    /* dropdown verborgen*/
  }

  .nav-links {
    display: flex;
    /* reguliere links getoond*/
    flex-direction: row;
    /* horizontale layout volgens rijen */
  }
}

h3 {
  color: #39f500;
}

/* FOOTER Styling */
.footer {
  width: 100%;
  position: relative;
  /*of absoluut/fixed afhankelijk van de plaats*/
  left: 0;
  right: 0;
  /*zorgt ervoor dat er geen wit ruimte is links/rechts van de footer*/
  background-color: #247514d9;
  color: #fff;
  text-align: center;
  padding: 20px 0;
}

.social-icons {
  display: inline-block;
  /*flex zou ze verticaal plaatsen, in een kolom*/
  justify-content: center;
  gap: 20px;
  /* Afstand tussen iconen */
  margin-top: 10px;
}

.icon {
  display: inline-block;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #0d981e;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.icon img {
  width: 35px;
  height: 35px;
}

.icon:hover {
  transform: scale(1.2);
  /* Vergroot icoon bij hover */
  background-color: #36bc0e;
  /* Verandert achtergrondkleur */
}

/* Responsiviteit */
@media (max-width: 768px) {
  .social-icons {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
}

/*PAGINA 2: INTRODUCTIE*/
.content-wrapper2 {
  /*inhoud "wrapped" in een container*/
  margin-top: 200px;
  /*marge boven en onder de content wrapper,achtergrond zichtbaar*/
  margin-bottom: 150px;
  height: auto;
  /*bepaald de grootte van de content-wrapper waarin de inhoud staat*/
  background: rgba(255, 255, 255, 0.797);
  /*semi-transparante achtergrond*/
  position: relative;
  /*positie element relatief tot parent element*/
  padding: 30px;
}

.text-content2 p {
  padding-bottom: 0px;
  margin-left: 40px;
  margin-bottom: 10px;
  /*idem +/-*/
  text-align: left;
  font-size: 1.2rem;
  /*1.3x16*/
}

/* om elke eerste letter van een paragraaf(p) te stylen, 
wordt er gebruik gemaakt van een pseudo-element:*/
p::first-letter {
  /*elke eerste letter krijgt een groen kleur*/
  color: olivedrab;
}

.text-content2 h1 {
  padding-top: 40px;
  /*ruimte tussen navigatiebalk en sectie titels (inhoudstabel selectie)*/
  padding-bottom: 10px;
  margin-left: 40px;
  margin-bottom: 10px;
  /*idem +/-*/
  text-align: left;
  font-size: 1.4rem;
  /*1.3x16*/
  color: #208e05;
  opacity: 0;
  /* Teks start transparant/onzichtbaar*/
  animation: fadeIn 1s ease-in-out forwards;
  /* Animatie toepassen */
}

.text-content2 h2 {
  padding: 10px;
  /*ruimte tussen ondertekst en hoofdtekst "welkom"*/
  margin-left: 12px;
  font-size: 20px;
  /*gelijk aan 1.5rem*/
  color: #000000;
}

.text-content2 h3 {
  padding: 10px;
  /*ruimte tussen ondertekst en hoofdtekst "welkom"*/
  margin-bottom: 10px;
  /*idem +/-*/
  font-size: 24px;
  /*gelijk aan 1.5rem*/
  text-decoration-line: underline;
  color: #349a15;
}

@keyframes fadeIn {

  /*animatie h1*/
  from {
    opacity: 0;
    /* Begin transparant */
  }

  to {
    opacity: 1;
    /* Volledig zichtbaar */
  }
}

/*PAGINA TIPS*/
.content-wrapper2 {
  /*inhoud "wrapped" in een container*/
  margin-top: 200px;
  /*marge boven en onder de content wrapper,achtergrond zichtbaar*/
  margin-bottom: 150px;
  height: auto;
  /*bepaald de grootte van de content-wrapper waarin de inhoud staat*/
  background: rgba(255, 255, 255, 0.797);
  /*semi-transparante achtergrond*/
  position: relative;
  /*positie element relatief tot parent element*/
  padding: 30px;
}

.text-content2 p {
  padding-bottom: 0px;
  margin-left: 40px;
  margin-bottom: 10px;
  /*idem +/-*/
  text-align: left;
  font-size: 1.2rem;
  /*1.3x16*/
}

/* om elke eerste letter van een paragraaf(p) te stylen, 
wordt er gebruik gemaakt van een pseudo-element:*/
p::first-letter {
  /*elke eerste letter krijgt een groen kleur*/
  color: rgb(12, 197, 18);
}

.text-content2 h1 {
  padding-top: 40px;
  /*ruimte tussen navigatiebalk en sectie titels (inhoudstabel selectie)*/
  padding-bottom: 10px;
  margin-left: 40px;
  margin-bottom: 10px;
  /*idem +/-*/
  text-align: left;
  font-size: 1.4rem;
  /*1.3x16*/
  color: #208e05;
  opacity: 0;
  /* Teks start transparant/onzichtbaar*/
  animation: fadeIn 1s ease-in-out forwards;
  /* Animatie toepassen */
}

.text-content2 h2 {
  padding: 10px;
  /*ruimte tussen ondertekst en hoofdtekst "welkom"*/
  margin-left: 12px;
  font-size: 20px;
  /*gelijk aan 1.5rem*/
  color: #000000;
}

.text-content2 h3 {
  padding: 10px;
  /*ruimte tussen ondertekst en hoofdtekst "welkom"*/
  margin-bottom: 10px;
  /*idem +/-*/
  font-size: 24px;
  /*gelijk aan 1.5rem*/
  text-decoration-line: underline;
  color: #349a15;
}

@keyframes fadeIn {

  /*animatie h1*/
  from {
    opacity: 0;
    /* Begin transparant */
  }

  to {
    opacity: 1;
    /* Volledig zichtbaar */
  }
}



/*PLANTENGALERIJ PAGINA (slideshow)*/
.slideshow-container {
  position: relative;
  max-width: 100%;
  aspect-ratio: 16/9;
  height: 700px;
  width: 1000px;
  /*slideshow container breed genoeg*/
  padding: 50px;
  overflow: hidden;
  /* Verbergt alles buiten de container (niet-zichtbare afbeeldingen) */
  margin: 0 auto;
  transition: transform 0.5s ease-in-out;
  /* Voor een soepele overgang bij navigeren */
}

/* container met alle slides bevat */
.slides-wrapper {
  display: flex;
  /* Zorgt ervoor dat de slides naast elkaar komen */
  position: relative;
  width: 80%;
  max-width: 800px;
  margin-left: auto;
  /*door beide left en right op "auto" te zetten, komt de slideshow mooi in het midden te staan*/
  margin-right: auto;
  margin-top: 50px;
  margin-bottom: 50px;
  padding-bottom: 80px;
  padding-top: 50px;
  padding-left: 50px;
  padding-right: 50px;
  overflow: hidden;
  background: #055a12d4;
  transition: transform 0.5s ease-in-out;
  /* Voor een soepele overgang bij navigeren */
  background-color: #000000d0;
  background-image: url("https://i.ibb.co/HG7VNHZ/rb-60903.png");
  background-size: 250px;
  /*grootte afbeelding */
  background-repeat: round;
  /* herhaling afbeelding meerdere keren*/
  background-position: center;
  /* Centreert achtergrond afbeelding */
  border-radius: 8px;
}

.content-wrapper2 h1 {
  text-align: center;
  font-size: 2rem;
  /*1.3x16*/
  color: #208e05;
  opacity: 0;
  /* Teks start transparant/onzichtbaar*/
  animation: fadeIn 1s ease-in-out forwards;
  /* Animatie toepassen */
  padding-top: 10px;
}

header p {
  color: rgb(0, 0, 0);
  font-size: 20px;
  text-align: center;
  ;
  margin-left: 50px;
  margin-right: 50px;
}

/*bekeken per slide*/
.slide {
  position: relative;
  min-width: 100%;
  /* Elke afbeelding neemt de volledige breedte van de container in */
  height: 700px;
}

.slide-image,
.slide-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 8px;
  transition: transform 0.5s ease;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.slide-text {
  display: flex;
  justify-content: center;
  align-items: center;
  /*staat dan niet aan top van foto slideshow*/
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  opacity: 0;
  font-size: 1.5em;
  border-radius: 10px;
  padding: 40px;
}

.slide:hover .slide-image {
  transform: rotateY(180deg);
}

.slide:hover .slide-text {
  opacity: 1;
}

/* Pijltjes layout*/
.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  padding: 10px 20px;
  color: white;
  font-weight: bold;
  font-size: 24px;
  cursor: pointer;
  background: rgba(41, 156, 30, 0.5);
  border-radius: 10%;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 10;
  /* Zorgt ervoor dat ze boven de slides liggen */
}

.prev {
  /*linkse pijl*/
  margin-left: -52px;
  /* Afstand van de linkerrand */
}

.next {
  /*rechtse pijl*/
  margin-left: auto;
  /* Afstand van de rechterrand */
}

.prev:hover,
.next:hover {
  background-color: rgba(20, 173, 53, 0.8);
}

@media (max-width: 768px) {

  .content-wrapper2 h1 {
    font-size: 20px;
  }

  .content-wrapper2 p {
    font-size:14px;
  }
}

@media (max-width: 480px) {

  button.prev,
  button.next {
    left: -20px;
    /* Nog kleinere afstand op zeer smalle schermen */
    right: -20px;
    padding: 6px 12px;
    /* Nog kleinere knoppen */
  }
}

/*CONTACT PAGINA*/
.container {
  width: 100%;
  /*max-width NIET TOEPASSEN OF SPACE RECHTS VAN FORMULIER*/
  background-color: rgb(255, 255, 255);
  /*wit van achtergrond dat je ziet onder afbeelding waar ontworpen door freepik staat.*/
  border-radius: 10px;
  overflow: hidden;
  margin-left: 50px;
  margin-right: 50px;
  margin-top: 150px;
  margin-bottom: 80px;

}

label {
  display: flex;
  /* heeft eigen lijn */
  text-align: left;
  /* mooi links gealigneerd*/
  margin-bottom: 10px;
  /* Een beetje ruimte tussenin onderin */
}


.image-section {
  object-fit: cover;

}

.image-section img {
  max-width: 100%;
  /*zorgt ervoor dat figuur niet overlapt en witte ruimtes creërt bij contactform*/
  height: 95%;
  object-fit: cover;

}

.form-section {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  /*in kolomvorm, verticaal onder elkaar*/
  background-color: #246842;
  color: white;
}

.form-section h2 {
  color: greenyellow;
  text-align: center;
  font-size: 20px;
  opacity: 0;
  margin-top: 15px;
  margin-bottom: -15px;
  /*om ervoor te zorgen dat de tekst onder hoofdtitel in fluo groen dichter bij staat dan verder af*/
  /* Teks start transparant/onzichtbaar*/
  animation: fadeIn 1s ease-in-out forwards;
  /* Animatie toepassen */
}

.form-table p em {
  color: #00ff1e;
}

input[type="date"] {
  width: fit-content;
  text-align: left;
  margin-left: 5px;
}

.form-table p {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 15px;
}

.form-table label {
  color: greenyellow;
  padding-left: 20px;
}


label.form-label {
  /*Welk niveau van tuinier ben jij,=>MK-antwoorden aanpassing */
  color: rgb(255, 255, 255);
  /*om de labels te veranderen met de klasse "form-label"*/
  font-size: 15px;
  padding-right: 5px;
  padding-left: 5px;
  margin: 0;
  /*verwijderd onnodige marges*/
  width: fit-content;
  display: inline-block;
  /*label aligneert in lijn op blokniveau*/
}

input {
  padding-left: 25px;
  margin-bottom: 10px;
}

input[type="radio"] {
  margin-top: 5px;
}

textarea {
  width: 80%;
  height: 80px;
  margin-top: 25px;
}

button {
  background-color: #208e05;
  color: white;
  border: none;
  cursor: pointer;
  font-family: "Merriweather", sans-serif;
  padding: 10px;
  border-radius: 5px;
  margin-top: 15px;
  margin-bottom: 30px;
  margin-left: 30px;
  font-size: 16px;
  padding-left: 20px;
  padding-right: 20px;
}

button:hover {
  background-color: #36bc0e;
}


.contact-form-container,
#successMessage {
  background: #246842;
  color: white;
  align-content: center;
  justify-content: center;
  height: 150px;
  align-items: center;
  text-align: center;
  font-size: 10px;
  padding: 20px;
  /*staat horizontaal dan*/
  width: 100%;
  max-width: 1200px;
  border-radius: 10px;
  overflow: hidden;
  margin-left: 40px;
  margin-right: 40px;
  margin-bottom: 80px;
}

.hidden {
  display: none;
}

/* Stijl voor de figcaption (copy-paste van home-pagina)*/
.image-section figcaption {
  text-align: end;
  /*tekst op einde en niet centraal geplaatst*/
  font-size: 8px;
  /* Tekstgrootte aanpassen */
  font-style: italic;
  /* Stijl aanpassen */
  color: gray;
  /* Tekstkleur */
  margin-bottom: 20px;
  /*ruimte tussen figcaption en tekst*/
  margin-right: 15px;
  margin-top: -10px;
}

/* Responsiveness */
@media (max-width: 800px) {
  .container {
    flex-direction: column;
    /* Stacks the image and form vertically */
    align-items: center;
    /* Centers the stacked content */
    justify-content: center;

  }

  .image-section {
    width: 100%;
    /* Full width for the image */
  }

}


@media (max-width: 480px) {

  .form-section,
  label.form-label,
  input,
  textarea,
  button {
    font-size: 12px;
    /* kleiner lettertype voor kleinere schermen*/
  }
  
  .dropdown-menu a {
    font-size:12px;
  }

  .form-section h2 {
    font-size: 15px;
  }

  .logo {
    height: 120px;
  }

  .footer,
  .footer h3 {
    font-size: 12px;

  }


  @media (max-width: 450px) {

    .form-section,
    label.form-label,
    input,
    textarea,
    button {
      font-size: 12px;
      /* kleiner lettertype voor kleinere schermen*/
    }

    .form-section h2 {
      font-size: 14px;
    }

    .logo {
      height: 100px;
    }

    .footer,
    .footer h3 {
      font-size: 10px;
    }
  }


  @media (max-width: 430px) {

    .form-section,
    label.form-label,
    input,
    textarea,
    button {
      font-size: 8px;
      /* kleiner lettertype voor kleinere schermen*/
      width: fit-content;
    }

    .form-section h2 {
      font-size: 10px;
    }

    .logo {
      height: 100px;
    }

    .footer,
    .footer h3 {
      font-size: 8px;
    }
  }


  /*pagina met LINKS*/
  .styled-list {
    list-style: none;
    padding-left: 40px;
    padding-right: 50px;
  }

  .styled-list li {
    margin: 10px 0;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%;
  }

  .styled-list li:hover {
    background-color: #208e05;
    color: white;
    transition: background-color 0.3s ease;
  }

  a {
    color: rgb(30, 211, 30);
  }

  .content-wrapper3 {
    /*inhoud "wrapped" in een container*/
    margin-top: 200px;
    /*marge boven en onder de content wrapper,achtergrond zichtbaar*/
    margin-bottom: 150px;
    padding: 20px;
    height: auto;
    background: rgba(255, 255, 255, 0.671);
  }