/* Algemene styling */
body {
  margin: 0; /* Verwijdert de standaard marge van de body om extra ruimte rondom de pagina te voorkomen */
  font-family: Arial, sans-serif; /* Stelt het lettertype in op Arial voor de hele pagina */
  background-color: #f8d7e5; /* Zet de achtergrondkleur van de pagina naar een lichte roze tint */
  color: #333; /* Zet de tekstkleur naar donkergrijs voor een goed contrast */
}

/* Header styling */
header {
  background-color: #d985c8; /* Achtergrondkleur van de header is een zachte paarse tint */
  padding: 10px 0; /* Voegt padding toe boven- en onderaan de header */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Voegt een lichte schaduw toe aan de header voor een zwevend effect */
}

/* Navigatie styling */
nav ul {
  list-style: none; /* Verwijdert de standaard opsommingstekens van de lijst */
  display: flex; /* Zet de lijstitems in een rij, gebruikmakend van flexbox */
  justify-content: center; /* Centreert de lijstitems horizontaal in de header */
  padding: 0; /* Verwijdert de standaard padding van de lijst */
  margin: 0; /* Verwijdert de standaard marge van de lijst */
}

nav ul li {
  margin: 0 15px; /* Voegt ruimte van 15px tussen de lijstitems */
}

nav ul li a {
  text-decoration: none; /* Verwijdert de onderstreping van de links */
  color: white; /* Zet de kleur van de tekst naar wit */
  font-weight: bold; /* Maakt de tekst vetgedrukt voor een beter zichtbare link */
  padding: 10px 20px; /* Voegt padding toe rondom de tekst van de link */
  background-color: #ff65b5; /* Zet de achtergrondkleur van de link naar een roze tint */
  border-radius: 5px; /* Maakt de hoeken van de links afgerond */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Voegt een lichte schaduw toe aan de link */
  transition: background-color 0.3s ease; /* Voegt een overgangseffect toe voor de achtergrondkleur bij hover */
}

nav ul li a:hover {
  background-color: #e14c98; /* Verandert de achtergrondkleur naar een donkerdere tint roze bij hover */
}

/* Hoofdsectie */
main {
  display: flex; /* Zet de inhoud in een flexbox container */
  justify-content: space-between; /* Zorgt ervoor dat de inhoud zich aan beide zijkanten van het scherm uitlijnt */
  align-items: center; /* Zorgt ervoor dat de items verticaal in het midden staan */
  padding: 40px; /* Voegt padding toe rondom de hoofdsectie */
  max-width: 1200px; /* Zet een maximale breedte voor de sectie zodat deze niet te breed wordt */
  margin: 0 auto; /* Centreert de inhoud horizontaal in de container */
  background-color: #fff; /* Zet de achtergrondkleur van de sectie naar wit */
  border-radius: 10px; /* Maakt de hoeken van de sectie afgerond voor een zachter uiterlijk */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Voegt een lichte schaduw toe voor diepte en een zwevend effect */
}

/* Introductie sectie */
.intro {
  display: flex; /* Gebruikt flexbox voor de indeling van tekst en foto naast elkaar */
  gap: 30px; /* Voegt ruimte van 30px tussen de tekst en de foto */
}

.text {
  background-color: #fff; /* Zet de achtergrondkleur van de tekstsectie naar wit */
  padding: 30px; /* Voegt ruimte toe rondom de tekst */
  border-radius: 15px; /* Maakt de hoeken van de tekstsectie afgerond */
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1); /* Voegt een schaduw toe voor diepte */
  flex: 1; /* Zorgt ervoor dat het tekstgedeelte flexibel is en de beschikbare ruimte vult */
}

.text h1 {
  color: #d985c8; /* Zet de titelkleur naar de paarse kleur die in de header wordt gebruikt */
  font-size: 40px; /* Verhoogt de lettergrootte van de titel voor visuele impact */
  margin-bottom: 20px; /* Voegt ruimte onder de titel voor betere leesbaarheid */
  text-align: left; /* Zorgt ervoor dat de titel links uitgelijnd is */
}

.text p {
  font-size: 18px; /* Zet de tekstgrootte naar 18px voor goede leesbaarheid */
  line-height: 1.8; /* Verhoogt de regelafstand voor een leesbaarder tekstblok */
  color: #555; /* Zet de tekstkleur naar donkergrijs voor een zachter uiterlijk */
  text-align: justify; /* Zorgt ervoor dat de tekst aan beide zijden van het blok uitgelijnd wordt */
}

.photo {
  text-align: center; /* Centreert de afbeelding in de foto sectie */
  flex: 1; /* Zorgt ervoor dat de afbeelding de resterende ruimte vult */
}

.photo h2 {
  background-color: #d985c8; /* Zet de achtergrondkleur van de afbeeldingstitel naar dezelfde paarse kleur als de header */
  color: white; /* Zet de kleur van de tekst naar wit */
  padding: 15px; /* Voegt padding toe rondom de titel */
  border-radius: 5px; /* Maakt de hoeken van de titel afgerond */
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Voegt een schaduw toe om de titel te benadrukken */
  font-size: 24px; /* Zet de lettergrootte van de titel iets groter voor nadruk */
  margin-bottom: 20px; /* Voegt ruimte onder de titel voor visuele scheiding */
}

.photo img {
  width: 100%; /* Zet de breedte van de afbeelding naar 100% van de container */
  max-width: 350px; /* Zet een maximale breedte voor de afbeelding */
  border-radius: 20px; /* Maakt de hoeken van de afbeelding afgerond voor een zachter effect */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Voegt een schaduw toe aan de afbeelding */
  transition: transform 0.3s ease; /* Voegt een overgangseffect toe voor vergroting bij hover */
}

.photo img:hover {
  transform: scale(1.05); /* Vergroot de afbeelding een beetje wanneer je er met de muis overheen gaat */
}

/* Footer styling */
footer {
  background-color: #d985c8; /* De achtergrondkleur van de footer is dezelfde als de header */
  color: white; /* De tekstkleur in de footer is wit */
  text-align: center; /* Centreert de tekst in de footer */
  padding: 20px 0; /* Voegt boven- en ondermarge toe aan de footer */
  box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.2); /* Voegt een schaduweffect toe boven de footer */
  font-size: 14px; /* De tekstgrootte in de footer is kleiner */
  position: relative; /* Zet de positie van de footer in de normale stroom van de pagina */
  width: 100%; /* De footer neemt de volledige breedte van de pagina in */
}

footer p {
  margin: 0; /* Verwijdert de marge van de tekst in de footer */
  font-weight: bold; /* Zet de tekst vetgedrukt */
}
footer .social-links {
  margin-top: 10px; /* Zorgt ervoor dat er wat ruimte is tussen de copyright tekst en de links */
}

footer .social-links a {
  text-decoration: none; /* Verwijdert de onderstreping van de links */
  font-weight: bold; /* Maakt de tekst vetgedrukt */
  color: white; /* Zet de kleur van de tekst op wit */
  margin: 0 15px; /* Voegt ruimte toe tussen de links */
  font-size: 18px; /* Maakt de tekst iets groter */
  padding: 10px 20px; /* Voeg wat padding toe rond de tekst voor een mooiere uitstraling */
  border-radius: 5px; /* Maakt de hoeken van de links afgerond */
  background-color: #ff65b5; /* Zet een achtergrondkleur voor de links */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Voegt een subtiele schaduw toe voor diepte */
}

footer .social-links a:hover {
  background-color: #e14c98; /* Verandert de achtergrondkleur als de gebruiker over de link hovert */
}

footer .social-links a.whatsapp {
  background-color: #25D366; /* WhatsApp groen */
}

footer .social-links a.instagram {
  background-color: #E1306C; /* Instagram roze */
}

footer .social-links a:hover {
  background-color: #ff65b5; /* Zorgt ervoor dat de hoverkleur verandert naar roze */
}

}