:root {
  --black: #1a1f22;
  --kaki: #a0b19f;
  --lgroen: #ccd3cc;
  --lblauw: #dcf4f4;
  --wit: #fff;
  --bg: rgba(26, 31, 34, 0.05);
}

body {
  font-family: "Albert Sans", sans-serif !important;
  font-optical-sizing: auto;
  font-style: normal;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: 400 !important;
}

@media (min-width: 2000px) {
  p {
    font-size: 20px !important;
  }
  h1 {
    font-size: 70px !important;
  }
  .voordeel-titel {
    font-size: 34px !important;
  }
  .about-tussentitel {
    font-size: 38px !important;
  }
  .home-header-titel {
    font-size: 72px !important;
  }
  .contact-label {
    font-size: 18px !important;
  }
  .form-check-label {
    font-size: 18px !important;
  }
  .footer-ullinks {
    font-size: 18px !important;
  }
  .underfooter-item {
    font-size: 16px !important;
  }
}
.pt-140 {
  padding-top: 140px;
}

.no-scroll {
  overflow: hidden;
}

.green {
  color: var(--kaki) !important;
}

.bg {
  background-color: var(--wit);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.no-gutter {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

a {
  text-decoration: none !important;
}

.titel {
  font-size: 54px !important;
  color: var(--kaki) !important;
}

.medium {
  font-size: 24px !important;
}

.bigtext {
  font-size: 24px !important;
}
@media (max-width: 768px) {
  .bigtext {
    font-size: 18px !important;
  }
}

@media (max-width: 576px) {
  .bigtext {
    font-size: 20px !important;
  }
}
.white {
  color: var(--wit) !important;
}

.o-50 {
  opacity: 0.5 !important;
}

.h1 {
  font-size: 3.5vw !important;
}

.container-wide {
  width: 100%;
  overflow: hidden;
}
.container-wide > .row {
  width: 100vw;
}

/* Eerste letter van elke button altijd hoofdletter (enkel het eerste woord) */
.voordeel-btn {
  display: inline-block;
}

.navbtn::first-letter,
.buttonheader::first-letter,
.voordeel-btn::first-letter,
.nieuwsbrief-btn::first-letter,
.c-vragenpopup-button::first-letter,
button::first-letter {
  text-transform: uppercase;
}

.weglot-container.wg-default {
  display: none !important;
}

.home-header {
  position: relative;
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.home-header-video {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.home-header-titel {
  font-size: 54px;
  color: var(--wit);
}

.buttonheader {
  margin-top: 1rem;
  border-radius: 60px;
  padding: 12px 24px;
  font-weight: bold;
  background-color: var(--black);
  color: var(--wit) !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
  display: inline-block;
}
.buttonheader:hover {
  background-color: var(--kaki);
  transition: all 0.2s !important;
}
.buttonheader:hover .btn-arrow {
  transform: rotate(-45deg) !important;
  transition: all 0.2s !important;
}

.headerblock {
  position: absolute;
  bottom: 5rem;
}

.btn-arrow {
  transition: all 0.2s !important;
}

.button-link {
  display: inline-block;
  text-align: center;
  text-decoration: none !important;
}

.home-oplossingen {
  padding: 144px 0;
}
.home-oplossingen-titel {
  font-size: 48px;
  font-weight: 100;
}
.home-oplossingen-text {
  font-size: 16px;
}

.home-kantoordiensten {
  padding: 144px 0;
  background-color: rgba(26, 31, 34, 0.05);
}
.home-kantoordiensten-titel {
  font-size: 48px;
  font-weight: 100;
}
.home-kantoordiensten-text {
  font-size: 16px;
}

.custom-cursor {
  position: fixed;
  pointer-events: none;
  width: 150px !important;
  height: 150px !important;
  background-color: var(--kaki);
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  z-index: 1000;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.locatiesblock {
  cursor: none;
  position: relative;
}
.locatiesblock:hover::before {
  opacity: 1;
}
.locatiesblock::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/assets/meetingspaces.png");
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.oplossing {
  cursor: none;
  position: relative;
}
.oplossing:hover::before {
  opacity: 1;
}
.oplossing::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/assets/meetingspaces.png");
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  background-size: fill !important;
  background-position: center;
}

.home-info {
  padding-top: 216px;
  padding-bottom: 216px;
  background-color: var(--kaki);
}
.home-info-text {
  font-size: 54px !important;
  color: var(--wit);
  font-weight: 400 !important;
}
@media (max-width: 992px) {
  .home-info-text {
    font-size: 42px !important;
  }
}
@media (max-width: 576px) {
  .home-info-text {
    font-size: 28px !important;
  }
}

@media (max-width: 1200px) {
  .home-info {
    padding-top: 216px;
    padding-bottom: 216px;
    background-color: var(--kaki);
  }
  .home-info-text {
    font-size: 40px;
    color: var(--wit);
  }
}
@media (max-width: 767px) {
  .home-info {
    padding-top: 216px;
    padding-bottom: 216px;
    background-color: var(--kaki);
  }
  .home-info-text {
    font-size: 24px;
    color: var(--wit);
  }
}
.about-home {
  position: relative; /* Zorgt ervoor dat pseudo-elementen positie relatief zijn aan dit element */
}
.about-home-titel {
  font-size: 72px;
  margin-bottom: 2rem;
  font-weight: 300;
}
.about-home-tekst {
  margin-bottom: 2rem;
}

@media (max-width: 992px) {
  .about-home-titel {
    font-size: 45px !important;
  }
  .hr-full-width {
    margin-bottom: 70px !important;
    margin-top: 70px !important;
  }
  .hr-full-width-under {
    margin-top: 70px !important;
    margin-bottom: 70px !important;
  }
}
@media (max-width: 767px) {
  .about-home-titel {
    font-size: 35px !important;
  }
}
@media (max-width: 576px) {
  .about-home-titel {
    font-size: 30px !important;
  }
  .about-home-container::before {
    left: 5vw !important; /* Lijn links van de container */
  }
  .about-home-container::after {
    right: 5vw !important; /* Lijn rechts van de container */
  }
}
.about-home-container {
  position: relative; /* Nodig voor de pseudo-elementen */
  padding-top: 1px; /* Optioneel: voeg padding toe naar wens */
  padding-bottom: 1px; /* Optioneel: voeg padding toe naar wens */
  border-bottom: 2px solid black;
  border-top: 2px solid black;
}

.about-home-container::before,
.about-home-container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px; /* Breedte van de lijn */
  background-color: black; /* Kleur van de lijn */
}

.about-home-container::before {
  left: 10vw; /* Lijn links van de container */
}

.about-home-container::after {
  right: 10vw; /* Lijn rechts van de container */
}

.hr-full-width {
  width: 100%;
  height: 2px; /* Hoogte van de horizontale lijn */
  background-color: var(--black); /* Kleur van de horizontale lijn */
  margin-top: 180px; /* Geen marges om de lijn */
  margin-bottom: 240px; /* Geen marges om de lijn */
  opacity: 1 !important;
}
.hr-full-width-under {
  width: 100%;
  height: 2px; /* Hoogte van de horizontale lijn */
  background-color: var(--black); /* Kleur van de horizontale lijn */
  margin-top: 240px; /* Geen marges om de lijn */
  margin-bottom: 180px; /* Geen marges om de lijn */
  opacity: 1 !important;
}

.DNA-home {
  background-color: var(--black);
  color: var(--wit) !important;
  padding-bottom: 136px;
  padding-top: 216px;
}
.DNA-home-titel {
  text-align: center;
  font-size: 72px;
  color: var(--wit);
  font-weight: 100;
  padding-bottom: 144px;
}
.DNA-home-titel.locatie {
  font-size: 48px;
  padding-bottom: 72px;
}
.DNA-home-item {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
  margin-bottom: 5rem !important;
}
.DNA-home-item.locatie {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.DNA-home-item-titel {
  font-size: 20px;
  font-weight: 400;
}
.DNA-home-icon {
  margin-bottom: 1rem;
}
.DNA-home-tsstitel {
  font-size: 36px;
}

.leden-home {
  background-color: var(--black);
  padding-top: 216px;
  padding-bottom: 216px;
  color: var(--wit) !important;
}
.leden-home-titel {
  text-align: center;
  font-size: 72px;
  color: var(--wit);
  font-weight: 100;
  padding-bottom: 144px;
}

.home-cta {
  position: relative;
}
.home-cta-titel {
  font-size: 48px;
  font-weight: 300;
  line-height: 1.15;
  margin-bottom: 1.5rem;
}
.home-cta-tekst {
  margin-bottom: 2rem;
}
.home-cta .hr-full-width {
  margin-bottom: 110px;
}
.home-cta .hr-full-width-under {
  margin-top: 110px;
}
@media (max-width: 992px) {
  .home-cta-titel {
    font-size: 38px;
  }
  .home-cta .hr-full-width {
    margin-bottom: 70px !important;
  }
  .home-cta .hr-full-width-under {
    margin-top: 70px !important;
  }
}
@media (max-width: 767px) {
  .home-cta-titel {
    font-size: 32px;
  }
}
@media (max-width: 576px) {
  .home-cta-titel {
    font-size: 28px;
  }
}

.location-header {
  position: relative;
  background-color: var(--wit);
  padding-top: 140px;
}
.location-header.concept {
  padding-bottom: 140px;
  background-color: var(--zwart);
  color: white !important;
}
.location-header-img, .location-header-video {
  object-fit: cover;
  width: 100%;
  height: auto;
  aspect-ratio: 1140/560;
}
.location-header-title {
  font-size: 54px !important;
  color: var(--kaki);
  font-weight: 400 !important;
}
.location-header-list {
  list-style-image: url("/assets/listcheck.svg");
  font-size: 18px !important;
}
.location-header-list-item {
  margin-top: 1rem;
}

@media (max-width: 992px) {
  .location-header-title {
    font-size: 48px !important;
    color: var(--kaki);
    font-weight: 400 !important;
  }
}
.location-spaces {
  padding-top: 140px;
  padding-bottom: 140px;
  background-color: var(--black);
}
.location-spaces-title {
  font-size: 36px !important;
  color: var(--kaki);
  font-weight: 400 !important;
}
@media (max-width: 992px) {
  .location-spaces-title {
    margin-bottom: 2rem !important;
  }
}
.location-spaces-text {
  font-size: 24px !important;
  color: var(--wit);
}

.carousel-location {
  margin-top: 144px;
  margin-bottom: 144px;
  max-height: 70vh;
}
.carousel-location-item {
  height: 70vh;
  width: 100%;
}
.carousel-location-item > img {
  object-fit: cover !important;
  width: 100%;
  height: 100%;
}
.carousel-location-inner {
  height: 70vh;
}

.carousel-control-prev-location {
  position: absolute !important;
  height: 70px !important;
  width: 70px !important;
  left: 1px !important;
  top: calc(100% - 71px) !important;
}
.carousel-control-next-location {
  position: absolute !important;
  transform: scaleX(-1);
  height: 70px !important;
  width: 70px !important;
  left: 71px !important;
  top: calc(100% - 71px) !important;
}

.location-history {
  position: relative;
}
.location-history-titel {
  font-size: 72px;
  margin-bottom: 2rem;
  font-weight: 400 !important;
}
.location-history-tekst {
  margin-bottom: 2rem;
}

.location-history-container .line-left.first-line {
  left: 0vw;
}

.location-history-container .line-left.second-line {
  left: 5vw;
}

.location-history-container .line-right.first-line {
  right: 0vw;
}

.location-history-container .line-right.second-line {
  right: 5vw;
}

@media (max-width: 996px) {
  .location-history-titel {
    font-size: 60px;
  }
  .hr-full-width {
    margin-bottom: 140;
    margin-top: 70px;
  }
  .hr-full-width-under {
    margin-bottom: 70px;
    margin-top: 140;
  }
}
.hr-full-width {
  margin-bottom: 240px;
  margin-top: 140px;
}
.hr-full-width-under {
  margin-bottom: 140px;
  margin-top: 240px;
}

@media (max-width: 767px) {
  .location-history-titel {
    font-size: 45px;
  }
  .location-history-container .line-left.first-line {
    left: 0;
  }
  .location-history-container .line-left.second-line {
    left: 4vw;
  }
  .location-history-container .line-right.first-line {
    right: 0;
  }
  .location-history-container .line-right.second-line {
    right: 4vw;
  }
}
@media (max-width: 567px) {
  .location-history-titel {
    font-size: 30px;
  }
}
.location-history-container {
  position: relative;
  padding: 1px !important;
}

.location-history-container .line {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: black;
}

/* Algemene stijlen */
.location-description {
  background-color: var(--black);
}
.location-description .bg-white {
  background-color: var(--wit) !important;
}

.voordeel {
  padding-top: 144px;
  color: var(--wit) !important;
}
.voordeel.padding {
  padding: 144px 0;
}

.voordeel-titel {
  color: var(--kaki);
  font-size: 24px;
  padding-bottom: 0.5rem;
}
.voordeel-titel.black {
  color: var(--black) !important;
}

.voordeel-tekst.black {
  color: var(--black) !important;
}

.voordeel-btn {
  text-decoration: underline !important;
  color: var(--wit) !important;
}

.voordeel-list {
  list-style-image: url("/assets/voordeellist.svg");
  padding-left: 1.5rem !important;
}

.mt-no {
  margin-top: 0 !important;
}

.voordeel-list-item {
  margin-top: 1rem !important;
  padding-left: 5px;
}

.voordeel-container {
  height: 700px;
  width: 100%;
  overflow: hidden; /* Voorkomt dat afbeeldingen buiten de container uitsteken */
  position: relative;
  background-repeat: no-repeat;
  overflow: hidden !important;
  will-change: transform;
  background-size: cover;
  background-position: center;
}

.voordeel-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Zorgt ervoor dat de afbeelding de container vult zonder de verhoudingen te verliezen */
}

@media (max-width: 991.98px) {
  .voordeel-container {
    height: 300px; /* Aangepaste hoogte voor schermen kleiner dan lg */
  }
  .voordeel-titel {
    margin-top: 3rem;
    font-size: 30px;
  }
}
.img-gallery {
  display: flex;
  flex-direction: column;
  padding-top: 144px;
  padding-bottom: 0;
}

.rowsmall,
.rowbig {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px !important;
  margin-right: -10px !important;
}

.rowsmall .img-container,
.rowbig .img-container {
  flex: 0 0 100%;
  padding: 10px !important;
  box-sizing: border-box;
}

.img-container {
  height: 500px;
  margin-bottom: 0.5rem !important;
  margin-top: 0.5rem !important;
}

.img-container-big {
  height: 850px;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.img-container img {
  width: 100%; /* Afbeeldingen vullen de beschikbare ruimte binnen hun container */
  height: 100%;
  object-fit: cover;
  object-position: center; /* Zorgt ervoor dat afbeeldingen altijd gecentreerd zijn */
}

.location-cta {
  padding-bottom: 144px;
  padding-top: 144px;
}

.location-cta-titel {
  color: var(--wit);
  font-size: 54px;
  font-weight: 400 !important;
  margin-bottom: 1rem;
}

.location-cta.reversed {
  background-color: var(--bg);
}
.location-cta.reversed .location-cta-titel {
  color: var(--black);
}

.navbtn:hover .btn-arrow {
  transform: rotate(-45deg) !important;
  transition: all 0.2s !important;
}

/* Responsieve stijlen */
@media (min-width: 576px) {
  .voordeel {
    padding-top: 72px;
  }
  .img-gallery {
    padding-top: 72px;
    padding-bottom: 0;
  }
  .location-cta {
    padding-bottom: 72px;
  }
  .location-cta-titel {
    font-size: 36px;
  }
  .img-container {
    height: 250px;
  }
  .img-container-big {
    height: 400px;
  }
}
@media (min-width: 768px) {
  .voordeel {
    padding-top: 96px;
  }
  .img-gallery {
    padding-top: 96px;
    padding-bottom: 0;
  }
  .location-cta {
    padding-bottom: 96px;
  }
  .location-cta-titel {
    font-size: 48px;
  }
  .img-container {
    height: 350px;
  }
  .img-container-big {
    height: 500px;
  }
}
@media (min-width: 992px) {
  .rowsmall {
    height: auto;
  }
  .rowbig {
    height: auto;
  }
  .voordeel {
    padding-top: 144px;
  }
  .img-gallery {
    padding-top: 144px;
    padding-bottom: 0;
  }
  .location-cta {
    padding-bottom: 144px;
  }
  .location-cta-titel {
    font-size: 54px;
  }
  .img-container img {
    top: 10px;
    left: 10px;
  }
  .img-container {
    height: 450px;
  }
  .img-container-big {
    height: 600px;
  }
}
/* Specifieke media queries voor kleinere schermen */
@media (max-width: 575.98px) {
  .location-cta-titel {
    font-size: 32px;
  }
  .img-container {
    height: 200px;
  }
  .img-container-big {
    height: 400px;
  }
}
.about-header {
  padding-top: 250px;
  padding-bottom: 144px;
}
@media (max-width: 767px) {
  .about-header {
    padding-top: 144px;
  }
}

.about-main {
  margin-top: 0 !important;
  padding-top: 144px;
  padding-bottom: 144px;
  background-color: var(--black) !important;
}

.about-main-about {
  padding-top: 288px;
  margin-top: -170px !important;
  padding-bottom: 144px;
  background-color: var(--black) !important;
}

.about-tussentitel {
  font-size: 36px;
}
@media (max-width: 576px) {
  .about-tussentitel {
    font-size: 28px;
  }
}

.oplossingen-header {
  position: relative;
  height: 100vh;
}
.oplossingen-header-imgcontainer {
  width: 50vw;
  position: absolute;
  right: 0;
  top: 0;
  object-fit: cover;
  height: 100%;
}
.oplossingen-header-imgcontainer > img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

@media (max-width: 767px) {
  .oplossingen-header {
    position: relative;
    margin-top: 144px !important;
    height: 50vh;
    margin-bottom: 30vh;
  }
  .oplossingen-header-imgcontainer {
    margin-top: 35vh;
    width: 100vw;
    position: absolute;
    right: 0;
    top: 0;
    object-fit: cover;
    height: 100%;
  }
  .oplossingen-header-imgcontainer > img {
    object-fit: cover;
    height: 100%;
    width: 100%;
  }
  .oplossingen-header .container-oplossingen {
    display: flex;
    flex-direction: column;
    justify-content: start;
    height: 100%;
  }
}
.container-oplossingen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.dropdown-btn {
  border-radius: 0 !important;
  background-color: var(--wit) !important;
  border: 2px solid var(--black) !important;
  width: 12rem !important;
  text-align: start !important;
}

.grid-container {
  background-color: var(--bg) !important;
  padding-top: 144px;
  padding-bottom: 144px;
}

.d-flex {
  display: flex;
}

.align-items-center {
  align-items: center;
}

.justify-content-between {
  justify-content: space-between;
}

.input-aantal p {
  margin-bottom: 0; /* Remove bottom margin */
  max-width: 100px;
  font-size: 16px !important;
}

.view img {
  margin-left: 10px; /* Space between the images */
}

.form-select:focus {
  background-color: var(--wit) !important;
  box-shadow: none !important;
  outline: none !important;
}

.form-select {
  border-radius: 0 !important;
  border: 1px solid var(--black) !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  max-width: 170px;
}

.form-control-personen {
  border-radius: 0 !important;
  border: 1px solid var(--black) !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  padding-left: 0.5rem !important;
  max-width: 70px;
}

.contact-item {
  margin-top: 72px;
}
.contact-cont {
  padding-top: 144px !important;
}
.contact-label {
  margin-top: 1.5rem;
  font-size: 14px;
}
.contact-form {
  z-index: 5 !important;
  padding-bottom: 144px !important;
}
.contact-links {
  text-decoration: underline !important;
  color: var(--black);
  margin-top: 1rem;
  cursor: pointer;
}
.contact-links > a {
  font-size: 18px !important;
}
.contact-container {
  padding-bottom: 144px !important;
  position: relative;
}

.form-control {
  border-radius: 0 !important;
  border: 1px solid var(--black) !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  margin-right: 1rem;
}

.greybg {
  position: absolute;
  width: 55vw;
  background-color: var(--bg) !important;
  left: 0;
  height: 100%;
  z-index: -1 !important;
}

@media (max-width: 992px) {
  .greybg {
    width: 100%;
    height: 80%;
    bottom: 0;
  }
  .contact-info {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }
  .contact-container {
    padding-bottom: 0 !important;
  }
  .contact-cont {
    margin-top: 56px !important;
    padding-top: 0px !important;
    padding-bottom: 144px !important;
  }
}
@media (max-width: 767px) {
  .greybg {
    width: 100%;
    height: 80%;
    bottom: 0;
  }
  .contact-info {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }
  .contact-container {
    padding-bottom: 0 !important;
  }
  .contact-cont {
    padding-top: 0 !important;
  }
}
.form-check-input[type=radio] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid var(--black);
  border-radius: 0 !important; /* Geen afgeronde hoeken */
  position: relative;
  cursor: pointer;
  background-color: var(--wit) !important;
  box-shadow: none !important;
}

.form-check-input[type=radio]:checked::before {
  content: "";
  position: absolute;
  top: 2px !important;
  left: 2px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 0 !important;
}

.form-check-input:checked[type=radio] {
  background-image: url("/assets/checkzwart.svg") !important;
  border: 1px solid var(--black) !important;
}

.form-check-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid var(--black) !important;
  border-radius: 0 !important; /* Geen afgeronde hoeken */
  position: relative;
  cursor: pointer;
  background-color: var(--wit) !important;
  box-shadow: none !important;
}

.form-check-input:checked {
  background-image: url("/assets/checkzwart.svg") !important;
  border: 1px solid var(--black) !important;
}

.contactlist {
  list-style: none !important;
  padding: 0 !important;
}

.form-check {
  font-size: 14px;
}

.form-control::placeholder {
  font-size: 14px !important;
}

select > option {
  font-size: 14px !important;
}

/* Contactformulier: alle velden dezelfde opmaak (keuzelijsten = invoervelden) */
#contactform .form-control,
#contactform .form-select {
  width: 100%;
  max-width: none;
  min-height: 50px;
  margin-right: 0;
  padding: 12px 16px !important;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--black);
  background-color: var(--wit);
}
#contactform .form-select {
  padding-right: 2.5rem !important;
}
#contactform .form-select:has(option[value=""]:checked) {
  color: #6c757d;
}
#contactform .form-select option {
  color: var(--black);
}
#contactform .form-control::placeholder {
  font-size: 1rem !important;
  color: #6c757d;
}
#contactform .cf-turnstile {
  margin-top: 0.5rem;
}

@media (max-width: 992px) {
  #contactform .form-control,
  #contactform .form-select,
  #contactform .form-control::placeholder {
    font-size: 14px !important;
  }
}
/* Formuliervalidatie (formvalidatie.js) */
#contactform .form-control.is-ongeldig,
#contactform .form-select.is-ongeldig {
  border-color: #c0392b !important;
}
#contactform .form-check-input.is-ongeldig {
  border-color: #c0392b !important;
}
#contactform .c-formfout {
  color: #c0392b;
  font-size: 14px;
  margin-top: 6px;
}
#contactform .c-formfout:empty {
  display: none;
}
#contactform .errors {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  color: #c0392b;
  font-size: 14px;
}

.privacy > p {
  font-size: 16px !important;
}
.privacy-container {
  padding-top: 144px !important;
}
.privacy-titel {
  font-size: 24px !important;
  padding-top: 60px;
  font-weight: 400 !important;
}
.privacy-tussentitel {
  font-size: 16px !important;
  margin-top: 40px;
  font-weight: 500 !important;
}

.navbar {
  background-color: var(--wit) !important;
  position: fixed !important;
  width: 100%;
  top: 0;
  transition: all 0.3s ease-in-out;
  z-index: 1099999900;
}
@media (max-width: 1200px) {
  .navbar-logo {
    width: 200px;
    height: auto;
  }
}

.navbar.hidden {
  top: -150px; /* Verberg de header boven het viewport, pas dit aan indien nodig */
  transition: all 0.3s ease-in-out;
}

.nav-link {
  padding: 0 !important;
}

.nav-item {
  font-size: 16px !important;
  margin-left: 30px;
}

.navbtn {
  border: none !important;
  border-radius: 60px;
  padding: 12px 24px;
  font-weight: bold;
  background-color: var(--kaki);
  color: var(--wit) !important;
  display: inline-block;
  width: auto;
  cursor: pointer;
  transition: all 0.2s !important;
}
.navbtn > a {
  color: var(--wit) !important;
}
.navbtn:hover {
  background-color: var(--black);
  transition: all 0.2s !important;
}
.navbtn-secondary {
  background-color: var(--wit) !important;
  color: var(--kaki) !important;
  text-decoration: underline;
}
.navbtn-black {
  background-color: black !important;
  color: var(--wit) !important;
}

.nav-link-responsive {
  color: var(--wit) !important;
  font-size: 30px;
  font-weight: 400;
  text-decoration: none !important;
}

.navbar-toggler {
  outline: none !important;
  box-shadow: none !important;
  border: 2px solid var(--black) !important;
  border-radius: 0 !important;
  padding: 0.75rem !important;
}

.fullscreen-menu-list {
  list-style: none !important;
  position: relative;
  z-index: 11;
  padding-left: 0 !important;
}
.fullscreen-menu-list-img {
  margin-bottom: 3rem;
}

.fullscreen-menu-item {
  margin-left: 0 !important;
  margin-top: 1rem;
}

.fullscreen-menu {
  position: fixed;
  top: 0;
  left: -100%; /* Start buiten het scherm */
  width: 100%;
  height: 100%;
  background-color: var(--kaki);
  z-index: 1050;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: left 0.5s ease; /* Overgangseffect voor de 'left' eigenschap */
}

@media (max-width: 1200px) {
  .fullscreen-menu.open {
    left: 0;
  }
}
.hamburger-menu {
  width: 30px;
  height: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 0.3s ease; /* Transformatie-animatie voor de hamburgermenu */
  position: relative;
  z-index: 1000000000000000000000000000000;
}

.hamburger-menu div {
  width: 100%;
  height: 2px;
  background-color: #000; /* Kleur van de streepjes */
  transition: transform 0.3s ease; /* Overgangseffect voor de transformatie van de streepjes */
}

.hamburger-menu.open div:nth-child(1) {
  transform: translateY(16px) rotate(45deg); /* Aanpassing voor de open animatie */
}

.hamburger-menu.open div:nth-child(2) {
  opacity: 0; /* Verberg het middelste streepje bij openen */
}

.hamburger-menu.open div:nth-child(3) {
  transform: translateY(-12px) rotate(-45deg); /* Aanpassing voor de open animatie */
}

.navbar-toggler.open {
  z-index: 1060 !important;
}

.nav-item-fullscreen {
  color: var(--wit) !important;
  font-size: 30px !important;
}

.dropdown-item-fullscreen {
  color: var(--wit) !important;
  font-size: 20px !important;
  padding-left: 1rem !important;
}

.dropdown-item-main-afkorting {
  font-size: 6vw;
  position: absolute !important;
  left: 22px;
  top: 22px;
}

.dropdown-item-main-naam {
  position: absolute !important;
  left: 25px;
  top: 50%;
  text-align: left;
}

.dropdown-item-main-afkorting,
.dropdown-item-main-naam {
  display: block;
}

.d-none {
  transition: all 2s !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

.fullscreen-menu-list-sm {
  position: fixed !important;
  bottom: 2rem;
  display: flex;
  justify-content: center; /* Zorgt ervoor dat de items in het midden van de container staan */
  list-style: none; /* Verwijdert standaard list-styling */
  padding-left: 0; /* Verwijdert standaard padding */
}

.sm-item-header {
  margin: 0 10px; /* Optionele marge tussen de items */
}

.sm-item-header-link {
  color: var(--wit); /* Pas de kleur aan naar wens */
  font-size: 20px; /* Pas de grootte aan naar wens */
  text-decoration: underline; /* Verwijdert onderlijning van de links */
}

.navlink {
  font-size: 16px;
  color: var(--black);
}
.navlink a {
  color: var(--black) !important;
}

.navbar-dropdown {
  position: relative;
  cursor: pointer;
}
.navbar-dropdown__chevron.rotated {
  transform: rotate(180deg);
}
.navbar-dropdown__list {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding-left: 0;
  top: 40px;
}
.navbar-dropdown__list.taal {
  left: 0;
  top: 45px;
  transform: none;
}
.navbar-dropdown__list-item {
  display: flex;
  align-items: center;
  gap: 18px;
  border: 2px solid black;
  padding: 8px;
  background-color: var(--wit);
  border-top: 0;
  color: black;
}
.navbar-dropdown__list-item.taal {
  padding: 0;
  width: 36px;
  height: 36px;
}
.navbar-dropdown__list-item.first {
  border-top: 2px solid black;
}
.navbar-dropdown__list-item__tag {
  width: 53px;
  height: 53px;
  border: 2px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 20px;
  flex-shrink: 0;
}
.navbar-dropdown__list-item__tag.small {
  width: 36px;
  height: 36px;
}
.navbar-dropdown__list-item__tag.taal {
  border: none;
  width: 36px;
  height: 36px;
  font-size: 14px;
  font-weight: normal;
  flex-shrink: 1;
}
.navbar-dropdown__list-item__tag.wit {
  background-color: var(--wit);
}
.navbar-dropdown__list-item__name {
  padding-right: 53px;
  text-wrap: nowrap;
}

.fixednav {
  top: 0 !important;
}

.fullscreen-menu-sublist {
  list-style: none !important;
  padding-left: 1rem !important;
  margin-bottom: 0;
}

.fullscreen-menu-chevron {
  width: 16px;
  height: 16px;
  margin-left: 8px;
  vertical-align: middle;
  transition: transform 0.2s ease;
  filter: brightness(0) invert(1);
}
.fullscreen-menu-chevron.rotated {
  transform: rotate(180deg);
}

.nieuwsbrief-input {
  border-radius: 0 !important;
  border: 2px var(--black) solid !important;
  margin-top: 1rem;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  padding-left: 1rem !important;
  font-size: 24px !important;
}
.nieuwsbrief-btn {
  border-radius: 0 !important;
  border: 2px var(--black) solid !important;
  background-color: var(--wit) !important;
  color: var(--black) !important;
  font-size: 24px !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  border-left: none !important;
  margin-top: 1rem;
}
.nieuwsbrief-btn .nieuwsbrief-btn-arrow {
  margin-left: 1rem !important;
  transition: all 0.2s !important;
}
.nieuwsbrief-btn:hover {
  background-color: var(--black) !important;
  color: var(--wit) !important;
}
.nieuwsbrief-btn:hover .nieuwsbrief-btn-arrow {
  transform: rotate(45deg) !important;
  transition: all 0.2s !important;
  filter: brightness(0) invert(1);
}
@media (max-width: 991px) {
  .nieuwsbrief-input {
    font-size: 16px !important;
  }
  .nieuwsbrief-btn {
    border-radius: 0 !important;
    border: 2px var(--black) solid !important;
    background-color: var(--wit) !important;
    color: var(--black) !important;
    font-size: 16px !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    border-left: none !important;
    margin-top: 1rem;
  }
  .nieuwsbrief-btn .nieuwsbrief-btn-arrow {
    display: none !important;
  }
  .nieuwsbrief-btn:hover .nieuwsbrief-btn-arrow {
    transform: rotate(45deg) !important;
    transition: all 0.2s !important;
  }
}

.form-control:focus {
  outline: none !important;
  box-shadow: none !important;
}

.footer {
  background-color: var(--wit) !important;
}
.footer-titel {
  font-size: 36px;
}
.footer-titels {
  font-size: 18px;
}
.footer-ullinks {
  text-decoration: underline !important;
  font-size: 14px;
  color: var(--black);
  display: block;
  margin-top: 1rem;
}

.underfooter {
  margin-top: 72px;
  display: flex;
  justify-content: flex-start;
  background-color: var(--black) !important;
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-weight: 300;
  font-size: 12px;
}
.underfooter-item {
  text-decoration: none !important;
  color: var(--wit) !important;
}
.underfooter-container {
  display: flex;
  justify-content: space-between; /* Ruimte tussen de items */
  max-width: 1200px; /* Maximale breedte van de container */
  margin: 0 auto;
}

.underfooter-item {
  margin-right: 10px;
}

.underfooter-item.right-align {
  margin-left: auto;
}

.footergrid {
  padding-top: 72px;
  padding-bottom: 72px;
}
.footergrid-link {
  text-decoration: none !important;
  color: var(--black) !important;
}
.footergrid-link-naam {
  margin-top: 10px; /* 7.5rem - 1rem - 80px afkorting */
  margin-left: 0.2rem;
  font-size: 30px;
  line-height: 30px;
}
.footergrid-link-afkorting {
  order: -1; /* staat na de naam in de HTML, maar moet erboven */
  font-size: 80px;
  line-height: 1;
  min-height: 1em; /* houdt de plaats vrij als er geen afkorting is */
}
.footergrid-contact {
  display: block;
}
.footergrid-ul {
  padding-left: 0.5rem !important;
}
.footergrid-item {
  position: relative;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  padding: 1.5rem 1.5rem;
}
.footergrid-item:hover {
  background-color: var(--black);
  transition: background-color 0.2s ease;
}
.footergrid-item:hover .footergrid-link {
  color: white !important;
  text-decoration: none !important;
}
.footergrid-item:hover .footergrid-arrow {
  height: 30px;
  width: auto;
  position: absolute;
  right: -1px;
  bottom: -1px;
  transition: all 0.2s;
}

/* Responsive: alles schaalt mee met de breedte van het blok (cqi = 1% van de blokbreedte).
   min() houdt de desktopwaarden hierboven als maximum. */
.parent > * {
  container-type: inline-size;
}

.footergrid-item {
  padding: min(1.5rem, 8cqi);
}
.footergrid-link-naam {
  margin-top: min(10px, 3cqi);
  font-size: min(30px, 10cqi);
  line-height: 1;
  overflow-wrap: anywhere;
}
.footergrid-link-afkorting {
  font-size: min(80px, 27cqi);
}

.parent > .h500 h2 {
  font-size: min(2rem, 11cqi);
}
.parent > .h500 .footergrid-ul {
  margin-bottom: 0;
}
.parent > .h500 .footergrid-link {
  font-size: min(1rem, 7cqi);
}

.footergrid-arrow {
  height: 0;
  width: auto;
  position: absolute;
  right: -1px;
  bottom: -1px;
  fill: var(--wit) !important;
}

.h250,
.h500 {
  height: 100% !important; /* overschrijft oude inline hoogtes uit gecachte JS */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
}

.h500 {
  padding: 1rem;
  overflow-wrap: anywhere;
}

.li-none {
  list-style-type: none !important;
}

/* 8 gelijke, vierkante blokken: 4 per rij (2 onder lg).
   Container tekent boven/links, elk blok rechts/onder => overal 2px lijnen. */
.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--black);
  border-left: 2px solid var(--black);
}
.parent > * {
  aspect-ratio: 1/1;
  height: auto !important; /* idem */
  min-width: 0;
  border-right: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
}

.parent > .div1 {
  grid-row: 2;
  grid-column: 1;
}

@media (max-width: 992px) {
  .parent {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Gsm: blokken onder elkaar, minder hoog dan vierkant zodat de footer niet eindeloos wordt */
@media (max-width: 576px) {
  .parent {
    grid-template-columns: 1fr;
  }
  .parent > * {
    aspect-ratio: 3/2;
  }
}
.locaties {
  padding: 144px 0;
}
.locaties-titel {
  font-size: 72px;
  font-weight: 100;
}
.locaties-text {
  font-size: 16px;
}

@media (max-width: 991px) {
  .carousel-inner-lid .carousel-item-lid > div {
    display: none !important;
  }
  .carousel-inner-lid .carousel-item-lid > div:first-child {
    display: block !important;
  }
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex !important;
}

.carousel-inner-lid .carousel-item-lid {
  transition: transform 0.6s ease !important;
}

.carousel-inner-lid {
  overflow: hidden !important;
}

.card-lid-img {
  max-height: 200px !important;
}

.card-lid {
  border: 2px var(--wit) solid !important;
  border-radius: 0 !important;
  height: 250px !important;
  background-color: var(--black) !important;
  width: 100% !important;
}

.card-img-overlay-lid {
  display: flex;
  align-items: center; /* Verticale uitlijning in het midden */
  padding-left: 3rem !important;
  padding-right: 3rem !important;
  justify-content: center;
}

.carousel-control-prev-lid {
  margin-left: -3rem !important;
  transform: rotate(180deg);
}

.carousel-control-next-lid {
  margin-right: -3rem !important;
}

@media (max-width: 1400px) {
  .carousel-control-prev-lid {
    margin-left: -1rem !important;
    transform: rotate(180deg);
  }
  .carousel-control-next-lid {
    margin-right: -1rem !important;
  }
}
@media (max-width: 1200px) {
  .carousel-control-prev-lid {
    margin-left: -1rem !important;
    transform: rotate(180deg);
  }
  .carousel-control-next-lid {
    margin-right: -1rem !important;
  }
}
@media (max-width: 767px) {
  .carousel-control-prev-lid {
    margin-left: -1rem !important;
    transform: rotate(180deg);
  }
  .carousel-control-next-lid {
    margin-right: -1rem !important;
  }
}
@media (max-width: 576px) {
  .carousel-inner-lid {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  .carousel-control-prev-lid {
    margin-left: -1rem !important;
    transform: rotate(180deg);
  }
  .carousel-control-next-lid {
    margin-right: -1rem !important;
  }
}
.faq-container {
  padding-top: 216px;
  padding-bottom: 72px !important;
}

.accordion-button::after {
  background-image: url("/assets/plusje.svg") !important;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("/assets/min.svg") !important;
}

.accordion-button {
  background-color: var(--wit) !important;
  outline: none !important;
  box-shadow: none !important;
  border: 1px solid var(--black) !important;
  border-left: none !important;
  border-right: none !important;
  margin-top: -1.5px !important;
}

.accordion-button:hover {
  z-index: 0 !important;
}

.card-img {
  height: 100% !important;
  width: 100%;
  overflow: hidden; /* Ensure that the image stays within the container */
  border-radius: 0 !important;
}

.card-img img {
  object-fit: cover !important;
  height: 100%;
  width: 100%;
}

.card-body {
  padding-left: 4rem !important;
  padding-right: 4rem !important;
  padding-top: 100px !important;
  padding-bottom: 100px !important;
  position: relative;
}

.card-icon {
  position: absolute;
  top: -2px;
  right: -2px;
}

.card {
  border: 2px solid var(--kaki) !important;
  border-radius: 0 !important;
  box-sizing: border-box;
}
.card-title {
  font-size: 24px !important;
  font-weight: 500 !important;
}
.card-location {
  font-style: italic;
  font-size: 18px;
}
.card-list-item {
  padding-left: 0 !important;
  font-size: 16px !important;
}
.card-list {
  padding-left: 1.3rem !important;
}

.home-sfeerfoto {
  height: 70vh;
  padding: 0 !important;
  margin: 0 !important;
  padding: 10px;
  box-sizing: border-box;
}
.home-sfeerfoto-img {
  padding: 0 !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Grote sfeerfoto met parallax (partials/_paralax.twig + js/paralax.js).
   Grootte en positie van de foto worden in JS berekend; hier enkel de hoogte. */
.parallax {
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 75vh;
  max-height: 900px;
}
@media (max-width: 1100px) {
  .parallax {
    height: 50vh;
  }
}
@media (max-width: 700px) {
  .parallax {
    height: 400px;
  }
}
@media (max-width: 600px) {
  .parallax {
    height: 250px;
  }
}

.vacation-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  font-size: 14px;
  max-width: 400px;
  z-index: 999;
  background-color: #fff;
}
.vacation-popup-img {
  width: 100%;
  height: auto;
}
.vacation-popup-text {
  padding: 16px 20px;
}
.vacation-popup-tekst {
  font-size: 16px !important;
}
.vacation-popup-titel {
  font-weight: bold;
  font-size: 20px !important;
}
.vacation-popup .close-btn {
  background: none;
  padding: 8px;
  border: none;
  font-size: 36px;
  line-height: 22px;
  position: absolute;
  top: 8px;
  right: 10px;
  height: auto;
  background-color: white;
  color: black;
  cursor: pointer;
}

.vacation-popup {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.vacation-popup.show {
  display: block;
  opacity: 1;
}

.c-spacecard {
  border: 1.5px solid var(--lgroen);
  position: relative;
  background-color: var(--wit);
  color: black;
  display: flex;
  flex-direction: column;
}
.c-spacecard .c-spacecardswiper {
  flex-shrink: 0;
  width: 100%;
}
.c-spacecard-tag {
  position: absolute;
  top: -1.5px;
  left: -1.5px;
  border: 1.5px solid var(--lgroen);
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.15);
  padding: 8px 18px;
  color: white;
  font-weight: 600;
}
.c-spacecard__content {
  flex-grow: 1;
}
.c-spacecard__content--topside {
  flex-grow: 1;
  padding: 18px 24px;
  border-top: 1.5px solid var(--lgroen);
}
.c-spacecard__content--underside {
  border-top: 1.5px solid var(--lgroen);
  padding: 18px 24px;
}
.c-spacecard__content-title {
  font-weight: 500;
  font-size: 20px;
}
.c-spacecard__content-prijs {
  font-size: 18px;
}
.c-spacecard .navbtn {
  font-size: 14px !important;
}

.c-spacecardswiper {
  position: relative;
}
.c-spacecardswiper__img {
  width: 100%;
  height: auto;
  aspect-ratio: 36/30;
  object-fit: cover;
}
.c-spacecardswiper__nav {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.3);
  width: 40px;
  height: 40px;
  z-index: 999;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
}
.c-spacecardswiper__nav--volgende {
  right: 10px;
  left: auto;
}
.c-spacecardswiper__nav--volgende > img {
  transform: rotate(180deg);
}

.swiper-pagination-bullet {
  width: 20px !important;
  height: 3px !important;
  border-radius: 0 !important;
}

.swiper-pagination-bullet-active {
  background-color: white !important;
}

.c-servicecard {
  border: 1.5px solid var(--lgroen);
  position: relative;
  background-color: var(--wit);
  color: black;
}
.c-servicecard__img {
  width: 100%;
  height: auto;
  aspect-ratio: 36/25;
  object-fit: cover;
}
.c-servicecard__content--topside {
  padding: 18px 24px;
  border-top: 1.5px solid var(--lgroen);
}
.c-servicecard__content--underside {
  border-top: 1.5px solid var(--lgroen);
  padding: 18px 24px;
}
.c-servicecard__content-title {
  font-weight: 500;
  font-size: 20px;
}
.c-servicecard__content-element {
  width: 44px;
  height: 44px;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
}
.c-servicecard .navbtn {
  font-size: 14px !important;
}

.c-catering-text {
  background-color: var(--kaki);
  padding: 60px !important;
  color: white;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.c-catering-text h2 {
  font-weight: 500;
}
.c-catering-swiper {
  height: 100%;
}
.c-catering-swiper__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-catering-swiper__nav {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.3);
  width: 40px;
  height: 40px;
  z-index: 999;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
}
.c-catering-swiper__nav--volgende {
  right: 10px;
  left: auto;
}
.c-catering-swiper__nav--volgende > img {
  transform: rotate(180deg);
}

.c-catering-swiper-pagination {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
}
.c-catering-swiper-pagination .swiper-pagination-bullet {
  width: 30px !important;
  height: 4px !important;
  border-radius: 0 !important;
}

.c-ruimtepopup {
  position: fixed;
  z-index: 10000000000000000000000000000000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.c-ruimtepopup-container {
  position: relative;
}
.c-ruimtepopup-tag {
  position: absolute;
  top: 0px;
  left: 0px;
  border: 1.5px solid var(--lgroen);
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.15);
  padding: 8px 18px;
  color: white;
  font-weight: 600;
}
.c-ruimtepopup-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  height: 64px;
  width: 64px;
  background-color: rgba(0, 0, 0, 0.15);
  border: 1.5px solid var(--lgroen);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.c-ruimtepopup__carousel {
  height: 60% !important;
  display: flex;
  z-index: 1;
  border: 1.5px solid var(--lgroen);
}
.c-ruimtepopup__carousel__img {
  width: 100%;
  height: auto;
  aspect-ratio: 1140/482;
  object-fit: cover;
}
@media (max-width: 576px) {
  .c-ruimtepopup__carousel__img {
    aspect-ratio: 4/3;
  }
}
.c-ruimtepopup__carousel__nav {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.3);
  width: 40px;
  height: 40px;
  z-index: 999;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
}
.c-ruimtepopup__carousel__nav--volgende {
  right: 10px;
  left: auto;
}
.c-ruimtepopup__carousel__nav--volgende > img {
  transform: rotate(180deg);
}
.c-ruimtepopup__content {
  background-color: var(--wit);
  padding: 48px !important;
  height: 40%;
  border: 1.5px solid var(--lgroen);
  border-top: 0;
  display: flex;
}
@media (max-width: 576px) {
  .c-ruimtepopup__content {
    padding: 18px !important;
  }
}
.c-ruimtepopup__content-line {
  width: 100%;
  height: 1.5px;
  background-color: var(--lgroen);
}
.c-ruimtepopup__content-list {
  list-style-image: url("/assets/checkgroen.svg");
  padding-left: 2.5rem !important;
  margin-bottom: 0;
}
@media (max-width: 992px) {
  .c-ruimtepopup__content-list {
    display: none;
  }
}
.c-ruimtepopup__content-list li {
  padding-left: 8px;
  margin-bottom: 12px;
}
.c-ruimtepopup__content-list li:last-child {
  margin-bottom: 0;
}
.c-ruimtepopup__content-title {
  font-weight: 500;
}

.c-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
.c-pagination__item {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  margin-left: -1px;
  border: 1px solid var(--black);
  background-color: var(--wit);
  color: var(--black);
  font-size: 14px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.c-pagination__item:first-child {
  margin-left: 0;
}
.c-pagination__item:hover:not(.c-pagination__item--disabled):not(.c-pagination__item--actief) {
  background-color: var(--bg);
}
.c-pagination__item--actief {
  background-color: var(--lgroen);
  font-weight: 600;
  cursor: default;
}
.c-pagination__item--disabled {
  opacity: 0.35;
  cursor: default;
}

.c-vragenpopup {
  position: fixed;
  z-index: 9999999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow-y: auto;
}
.c-vragenpopup.d-none {
  display: none !important;
}
.c-vragenpopup-container {
  position: relative;
  background-color: var(--wit);
  border: 1.5px solid var(--black);
}
.c-vragenpopup-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  height: 64px;
  width: 64px;
  background-color: var(--wit);
  border: 1.5px solid var(--black);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.c-vragenpopup-close__img {
  width: 20px;
  height: 20px;
}
.c-vragenpopup__content {
  padding: 60px 0;
}
.c-vragenpopup-vraag {
  font-size: 26px;
  margin-bottom: 16px;
}
.c-vragenpopup-vraag:not(:first-child) {
  margin-top: 40px;
}
@media (max-width: 576px) {
  .c-vragenpopup-vraag {
    font-size: 22px;
  }
}
.c-vragenpopup-button {
  border: 1px solid var(--black);
  background-color: var(--wit);
  color: var(--black);
  border-radius: 0;
  padding: 10px 20px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s;
}
.c-vragenpopup-button:hover {
  background-color: var(--bg);
}
.c-vragenpopup-button--actief {
  background-color: var(--black);
  color: var(--wit);
}
.c-vragenpopup-button--actief:hover {
  background-color: var(--black);
}
.c-vragenpopup-input {
  border: 1px solid var(--black);
  border-radius: 0;
  background-color: var(--wit);
  padding: 10px 12px;
  font-size: 14px;
  width: 90px;
}
.c-vragenpopup-input:focus {
  outline: none;
  box-shadow: none;
}
.c-vragenpopup-cta {
  margin-top: 48px;
  border: none;
}

.c-gelijkaardig {
  margin-top: 120px;
}
.c-gelijkaardig.d-none {
  display: none !important;
}
.c-gelijkaardig-lijn {
  width: 100%;
  height: 2px;
  background-color: var(--black);
  opacity: 1 !important;
  margin: 0 0 48px 0;
}
.c-gelijkaardig-titel {
  font-size: 36px;
  margin-bottom: 0.5rem;
}
.c-gelijkaardig-tekst {
  margin-bottom: 0;
}
@media (max-width: 992px) {
  .c-gelijkaardig {
    margin-top: 80px;
  }
  .c-gelijkaardig-titel {
    font-size: 28px;
  }
}

.c-videospeler {
  position: relative;
  overflow: hidden;
  background-color: var(--black);
  color: var(--wit);
}
.c-videospeler__video {
  display: block;
  cursor: pointer;
}
.c-videospeler svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.c-videospeler__groot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 88px;
  border: none;
  border-radius: 50%;
  background-color: rgba(26, 31, 34, 0.55);
  color: var(--wit);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, opacity 0.2s;
}
.c-videospeler__groot svg {
  width: 40px;
  height: 40px;
  margin-left: 4px;
}
.c-videospeler__groot:hover {
  background-color: var(--kaki);
}
.c-videospeler:not(.is-gepauzeerd) .c-videospeler__groot {
  opacity: 0;
  pointer-events: none;
}
.c-videospeler__balk {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 16px 12px;
  background: linear-gradient(to top, rgba(26, 31, 34, 0.75), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.c-videospeler.is-actief .c-videospeler__balk, .c-videospeler.is-gepauzeerd .c-videospeler__balk, .c-videospeler:focus-within .c-videospeler__balk {
  opacity: 1;
}
.c-videospeler__knop {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--wit);
  transition: background-color 0.2s;
}
.c-videospeler__knop:hover, .c-videospeler__knop:focus-visible {
  background-color: rgba(255, 255, 255, 0.15);
}
.c-videospeler .icoon-pauze,
.c-videospeler .label-pauze,
.c-videospeler .icoon-stil,
.c-videospeler .label-stil {
  display: none;
}
.c-videospeler:not(.is-gepauzeerd) .icoon-afspelen,
.c-videospeler:not(.is-gepauzeerd) .label-afspelen {
  display: none;
}
.c-videospeler:not(.is-gepauzeerd) .icoon-pauze {
  display: block;
}
.c-videospeler:not(.is-gepauzeerd) .label-pauze {
  display: inline;
}
.c-videospeler.is-stil .icoon-geluid,
.c-videospeler.is-stil .label-geluid {
  display: none;
}
.c-videospeler.is-stil .icoon-stil {
  display: block;
}
.c-videospeler.is-stil .label-stil {
  display: inline;
}
.c-videospeler__tijdlijn {
  flex-grow: 1;
  margin: 0;
}
.c-videospeler__volume {
  width: 90px;
  margin: 0;
}
.c-videospeler__tijd {
  flex-shrink: 0;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.c-videospeler input[type=range] {
  --voortgang: 0%;
  display: block;
  width: 100%;
  height: 4px;
  margin: 0;
  appearance: none;
  border-radius: 2px;
  cursor: pointer;
  background: linear-gradient(to right, var(--kaki) var(--voortgang), rgba(255, 255, 255, 0.35) var(--voortgang));
}
.c-videospeler input[type=range]::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--wit);
}
.c-videospeler input[type=range]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: var(--wit);
}
.c-videospeler:fullscreen {
  display: flex;
  align-items: center;
}
.c-videospeler:fullscreen .c-videospeler__video {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}

.c-videospeler__sprong {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px 18px;
  border-radius: 100px;
  background-color: rgba(26, 31, 34, 0.6);
  color: var(--wit);
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
}
.c-videospeler__sprong[data-kant=links] {
  left: 12%;
}
.c-videospeler__sprong[data-kant=rechts] {
  right: 12%;
}
.c-videospeler__sprong.is-zichtbaar {
  animation: video-sprong 0.7s ease-out;
}

@keyframes video-sprong {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@media (hover: none) {
  .c-videospeler__video {
    cursor: default;
  }
  .c-videospeler__knop {
    width: 44px;
    height: 44px;
  }
  .c-videospeler__knop:hover {
    background-color: transparent;
  }
  .c-videospeler svg {
    width: 26px;
    height: 26px;
  }
  .c-videospeler__volume {
    display: none;
  }
  .c-videospeler input[type=range] {
    height: 6px;
  }
  .c-videospeler input[type=range]::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
  }
  .c-videospeler input[type=range]::-moz-range-thumb {
    width: 20px;
    height: 20px;
  }
}
@media (max-width: 576px) {
  .c-videospeler__video {
    aspect-ratio: 16/9 !important;
  }
  .c-videospeler__groot {
    width: 64px;
    height: 64px;
  }
  .c-videospeler__groot svg {
    width: 30px;
    height: 30px;
  }
  .c-videospeler__balk {
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 28px 8px 4px;
  }
  .c-videospeler__tijdlijn {
    order: -1;
    flex-basis: 100%;
    padding: 8px 6px;
  }
  .c-videospeler__tijd {
    margin-right: auto;
    font-size: 13px;
  }
}
.bg-white {
  background: var(--wit) !important;
}