:root {
  --primaire: #9b3212;
  --accent: #6a4cff;
  --tekst: #ffffff;
  --bg: #000000;
}

body {
  font-family: "Poppins", sans-serif;
  background: var(--bg);
  color: var(--tekst);
  margin: 0;
}

.leesbaar {
  font-family: sans-serif;
}

.accentCollor {
  font-size: larger;
  color: var(--primaire);
}

/* NAVBAR */
.navbar {
  background: rgba(0, 0, 0, 0.85);
  border-bottom: 1px solid #222;
}
.nav-link {
  color: #fff !important;
}
.navbar-brand img {
  height: 46px;
}

/* HERO */
.hero {
  padding: 130px 0 90px;
  background: #000;
  text-align: center;
}
.hero .title {
  font-size: 2.8rem;
  font-weight: 700;
  color: #fff;
}
.hero .subtitle {
  color: #ccc;
  margin-top: 10px;
}

.btn-primary-main {
  background: var(--primaire);
  border: none;
  padding: 12px 20px;
  border-radius: 4px;
  font-weight: 600;
  color: #fff;
}
.btn-primary-main:hover {
  filter: brightness(0.9);
}

/* Achtergrondfiguur header met JPG */
.hero {
  position: relative;
  height: 500px; /* Pas aan naar gewenste hoogte */
  background: #000; /* fallback zwart */
  text-align: center;
}

.hero .bg-figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* volledige breedte */
  height: 100%; /* volledige hoogte van de header */
  background: url("./images/header.jpg") no-repeat center center;
  background-size: cover; /* afbeelding vult header volledig */
  opacity: 0.4; /* semi-transparant zodat tekst goed leesbaar blijft */
  z-index: 12;
}

.hero .container {
  position: relative;
  z-index: 1; /* tekst blijft boven de achtergrond */
}

/* SECTION TITLES */
h2 {
  color: #fff;
  text-align: center;
  margin-bottom: 40px;
  font-weight: 600;
}

/* CARDS */
.rounded-card {
  background: #111;
  border-radius: 4px;
  padding: 28px;
  border: 1px solid #222;
  color: white;
  box-shadow: none;
}

/* CAROUSEL */
.carousel-inner img {
  height: 420px;
  object-fit: cover;
  border-radius: 4px;
}

/* FORM */
.form-card {
  background: #111;
  padding: 30px;
  border-radius: 4px;
  border: 1px solid #222;
  color: white;
}
.form-control,
.form-select,
textarea {
  background: #000;
  border: 1px solid #444;
  color: #fff;
  border-radius: 4px;
}
.form-control:focus,
.form-select:focus,
textarea:focus {
  border-color: var(--primaire);
  box-shadow: 0 0 0 0.2rem rgba(255, 61, 110, 0.2);
  background: #000;
  color: #fff;
}

/* TEAM */
.team .card {
  background: none;
  border: none;
  text-align: center;
}
.team .card-body {
  color: #fff;
}

/* FOOTER */
footer {
  background: #000;
  padding: 40px 0;
  color: #fff;
  border-top: 1px solid #222;
}

/* MOBILE */
@media (max-width: 767px) {
  .hero {
    padding: 100px 0 60px;
  }
  .hero .title {
    font-size: 2rem;
  }
  .carousel-inner img {
    height: 240px;
  }
}