/* ===== RESET / BASIS ===== */
* {  
  box-sizing: border-box; /* <!----> Zorgt dat padding en border bij de breedte van een element worden opgeteld, voorkomt onverwachte layout problemen */
}

body {  
  font-family: "Inter", "Segoe UI", Arial, sans-serif; /* <!----> Standaard lettertype voor de website */
  background-color: #f5f7fa; /* <!----> Lichtgrijze achtergrondkleur */
  color: #1f2933; /* <!----> Standaard tekstkleur */
  line-height: 1.6; /* <!----> Zorgt voor voldoende ruimte tussen regels */
}

/* ===== HEADINGS ===== */
h1, h2, h3, h4 {  
  font-weight: 600; /* <!----> Vetgedrukte kopteksten */
  letter-spacing: -0.5px; /* <!----> Klein beetje ruimte tussen letters minder */
}

h1 {  
  font-size: 2.5rem; /* <!----> Grootte van h1 */
}

h2 {  
  font-size: 2rem; /* <!----> Grootte van h2 */
}

/* ===== LINKS ===== */
a {  
  color: #2563eb; /* <!----> Blauwe links */
  text-decoration: none; /* <!----> Geen onderstreping standaard */
}

a:hover {  
  text-decoration: underline; /* <!----> Onderstreping bij hover */
}

/* ===== IMAGES ===== */
.img-portfolio {  
  border-radius: 12px; /* <!----> Afgeronde hoeken */
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3); /* <!----> Schaduw om afbeelding */
}

/* ===== BUTTONS ===== */
.btn-portfolio {  
  background-color: #2563eb; /* <!----> Blauwe achtergrond */
  color: #ffffff; /* <!----> Witte tekst */
  border: none; /* <!----> Geen rand */
  border-radius: 8px; /* <!----> Afgeronde hoeken */
  padding: 0.6rem 1.4rem; /* <!----> Binnenruimte */
  font-weight: 500; /* <!----> Medium dikte tekst */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); /* <!----> Schaduw voor diepte */
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; /* <!----> Smooth hover effecten */
}

.btn-portfolio:hover {  
  background-color: #1e4ed8; /* <!----> Donkerder blauw bij hover */
  transform: translateY(-2px); /* <!----> Licht omhoog bij hover */
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35); /* <!----> Grotere schaduw bij hover */
}

.btn-portfolio:active {  
  transform: translateY(0); /* <!----> Terug naar normale positie bij klik */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* <!----> Kleinere schaduw bij klik */
}

/* ===== TEXT SHADOW ===== */
.text-shadow {  
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* <!----> Subtiele schaduw achter tekst */
}

/* ===== NAVBAR ===== */
.navbar {  
  background-color: #ffffff; /* <!----> Witte achtergrond voor navbar */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* <!----> Subtiele schaduw */
}

.nav-link {  
  font-weight: 500; /* <!----> Medium tekst voor links */
}

/* ===== FOOTER ===== */
.footer {  
  background-color: #111827; /* <!----> Donkere achtergrond */
  color: #ffffff; /* <!----> Witte tekst */
  padding: 2rem 1rem; /* <!----> Binnenruimte */
  text-align: center; /* <!----> Tekst gecentreerd */
  font-family: "Inter", sans-serif; /* <!----> Zelfde lettertype als de rest */
}

.footer a {  
  color: #60a5fa; /* <!----> Blauwe links */
  text-decoration: none; /* <!----> Geen onderstreping */
  transition: color 0.2s ease; /* <!----> Smooth hover effect */
}

.footer a:hover {  
  color: #2563eb; /* <!----> Donkerblauw bij hover */
}

/* ===== FOOTER CONTAINER ===== */
.footer-container {  
  max-width: 1200px; /* <!----> Maximale breedte */
  margin: 0 auto; /* <!----> Centrerend */
  display: flex;  
  flex-wrap: wrap;  
  justify-content: space-between; /* <!----> Ruimte tussen items */
  align-items: center; /* <!----> Verticale uitlijning */
}

.footer-contact p {  
  margin: 0.3rem 0; /* <!----> Kleine marge */
}

.footer-copy {  
  margin-top: 1rem; /* <!----> Ruimte boven copyright */
  font-size: 0.9rem; /* <!----> Iets kleinere tekst */
  color: #9ca3af; /* <!----> Lichtgrijze kleur */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {  
  h1 { font-size: 2rem; } /* <!----> Kleinere h1 op mobiel */
  h2 { font-size: 1.6rem; } /* <!----> Kleinere h2 op mobiel */
  
  .footer-container {  
    flex-direction: column; /* <!----> Items onder elkaar op mobiel */
    text-align: center;  
  }
  
  .footer-copy {  
    margin-top: 1.5rem; /* <!----> Extra ruimte */
  }
}

/* ===== CAROUSEL ===== */
.carousel-img-wrapper {  
  position: relative; /* <!----> Zorgt dat pijltjes over de afbeelding geplaatst kunnen worden */
}

.carousel-inner {  
  position: relative; /* <!----> Nodig voor absolute positioning van knoppen */
}

/* Beperk knoppen tot afbeelding */
.carousel-control-prev,
.carousel-control-next {  
  width: 50%; /* <!----> Knoppen alleen over de helft van de afbeelding */
}

/* Pijltjes iets groter en netjes geplaatst */
.carousel-control-prev-icon,
.carousel-control-next-icon {  
  transform: scale(1.3); /* <!----> Vergroot pijltjes */
  background-image: none; /* <!----> Verwijdert standaard witte SVG */
}

/* Zwarte pijltjes */
.carousel-control-prev-icon::after {  
  content: "‹"; /* <!----> Linker pijl */
  font-size: 3rem; /* <!----> Grootte van pijl */
  color: black; /* <!----> Kleur zwart */
}

.carousel-control-next-icon::after {  
  content: "›"; /* <!----> Rechter pijl */
  font-size: 3rem;  
  color: black; /* <!----> Kleur zwart */
}

/* Schaduwen voor afbeeldingen */
.carousel-img-wrapper img {  
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); /* <!----> Schaduw onder afbeeldingen */
}

/* ===== CARDS ===== */
.cards-container {  
  display: flex;  
  justify-content: space-between; /* <!----> Gelijke ruimte tussen cards */
  gap: 2rem; /* <!----> Extra ruimte */
  flex-wrap: wrap; /* <!----> Responsive: wrap bij kleinere schermen */
}

.card {  
  background-color: #ffffff; /* <!----> Witte achtergrond */
  border-radius: 14px; /* <!----> Afgeronde hoeken */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* <!----> Schaduw voor diepte */
  padding: 1.5rem; /* <!----> Binnenruimte */
  flex: 1 1 calc(33.333% - 1.33rem); /* <!----> 3 cards naast elkaar */
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  text-align: center;  
  transition: transform 0.25s ease, box-shadow 0.25s ease; /* <!----> Smooth hover effecten */
}

.card:hover {  
  transform: translateY(-6px); /* <!----> Lichte hover beweging omhoog */
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.15); /* <!----> Grotere schaduw bij hover */
}

.card h3 {  
  margin-top: 1rem;  
  margin-bottom: 0.5rem;  
}

.card p {  
  margin-bottom: 1rem;  
}

/* RESPONSIVE: mobiel 1 card per rij */
@media (max-width: 768px) {  
  .card {  
    flex: 1 1 100%; /* <!----> Eén card per rij */
  }
}