/* =========================
   RESET
   ========================= */

/* Verwijdert standaard marge en padding van alle elementen */
* {
  margin: 0;                 /* Geen buitenruimte */
  padding: 0;                /* Geen binnenruimte */
  box-sizing: border-box;    /* Padding telt mee in breedte/hoogte */
}

/* =========================
   BASIS
   ========================= */

/* Algemene stijl voor de hele pagina */
body {
  font-family: 'Montserrat', sans-serif; /* Lettertype */
  background-color: #ffffff;              /* Witte achtergrond */
  color: #222;                            /* Donkere tekstkleur */
}

/* =========================
   HEADER / NAVBAR
   ========================= */

/* Navigatie lijst */
.navbar ul {
  list-style: none;          /* Verwijdert bolletjes */
  background-color: rgb(44, 45, 45); /* Donkere achtergrond */
  margin: 0;
  padding: 0;
  display: flex;             /* Zet items naast elkaar */
  align-items: center;       /* Verticaal centreren */
  justify-content: center;   /* Horizontaal centreren */
  gap: 90px;                 /* Ruimte tussen menu-items */
}

/* Titel / logo in navbar */
.navbar h1 {
  color: rgb(197, 223, 223); /* Lichtblauwe accentkleur */
  margin: 0 40px 0 20px;     /* Ruimte links en rechts */
  font-size: 24px;           /* Grootte van tekst */
}

/* Links in de navbar */
.navbar li a {
  display: block;            /* Hele vlak klikbaar */
  color: white;              /* Witte tekst */
  padding: 20px;             /* Klikruimte */
  text-decoration: none;     /* Geen onderlijning */
}

/* Hover effect bij muis */
.navbar li a:hover {
  background-color: rgb(46, 46, 51); /* Donkerder bij hover */
}

/* =========================
   CONTACT SECTIE
   ========================= */

/* Hoofdsectie van contactpagina */
.contact {
  padding: 100px 10%;        /* Ruimte rond inhoud */
  text-align: center;        /* Tekst centreren */
}

/* Titel van contact */
.contact h1 {
  font-size: 48px;           /* Grote titel */
  margin-bottom: 15px;
}

/* Intro tekst */
.contact p {
  font-size: 18px;
  color: #555;               /* Lichtgrijze tekst */
  margin-bottom: 60px;
}

/* =========================
   FORMULIER
   ========================= */

/* Formulier container */
.contact form {
  max-width: 600px;          /* Maximale breedte */
  margin: auto;              /* Centreren */
  background-color: #f7f7f7; /* Lichtgrijze achtergrond */
  padding: 40px;             /* Binnenruimte */
  border-radius: 20px;       /* Ronde hoeken */
  box-shadow: 0 15px 30px rgba(0,0,0,0.12); /* Schaduw */
  text-align: left;          /* Labels links */
}

/* Labels boven inputs */
.contact label {
  display: block;            /* Nieuwe regel */
  font-size: 14px;
  margin-bottom: 6px;
  margin-top: 20px;
}

/* Input en textarea */
.contact input,
.contact textarea {
  width: 100%;               /* Volle breedte */
  padding: 12px 14px;        /* Binnenruimte */
  border-radius: 10px;       /* Ronde hoeken */
  border: 1px solid #ccc;    /* Lichtgrijze rand */
  font-size: 15px;
}

/* Textarea niet versleepbaar */
.contact textarea {
  resize: none;
}

/* =========================
   KNOP
   ========================= */

/* Verzenden knop */
.contact button {
  margin-top: 30px;
  padding: 12px 30px;
  border-radius: 30px;       /* Ronde knop */
  border: none;
  background-color: black;   /* Zwarte knop */
  color: white;
  font-size: 16px;
  cursor: pointer;           /* Handje bij hover */
}

/* Hover effect knop */
.contact button:hover {
  background-color: #333;    /* Iets lichter zwart */
}

/* =========================
   FOOTER
   ========================= */

/* Footer achtergrond */
footer {
  background-color: #222;    /* Donkergrijs */
  color: white;
  padding: 30px 0;
}

/* Footer layout */
.footer-container {
  display: flex;             /* Elementen naast elkaar */
  justify-content: space-between; /* Links & rechts */
  max-width: 1200px;
  margin: auto;
  padding: 0 40px;
}

/* Footer titels */
.footer-item h3 {
  margin-bottom: 10px;
  color: #c5dfdf;            /* Accentkleur */
}

/* Footer tekst */
.footer-item p {
  margin: 6px 0;
  font-size: 14px;
}

/* =========================
   RESPONSIVE – GSM
   ========================= */
@media (max-width: 768px) {

  /* Contact sectie compacter */
  .contact {
    padding: 50px 20px;
  }

  .contact h1 {
    font-size: 32px;
  }

  .contact p {
    font-size: 16px;
    margin-bottom: 40px;
  }

  /* Formulier kleiner */
  .contact form {
    padding: 25px;
    border-radius: 15px;
  }

  .contact label {
    font-size: 13px;
  }

  .contact input,
  .contact textarea {
    font-size: 14px;
    padding: 12px;
  }

  .contact textarea {
    min-height: 120px;
  }

  /* Knop volle breedte */
  .contact button {
    width: 100%;
    padding: 14px;
    font-size: 16px;
  }

  /* Footer onder elkaar */
  .footer-container {
    flex-direction: row;
    text-align: center;
    gap: 20px;
    padding: 0 20px;
  }
}