/*---------------------------------------/*
 # SETTINGS
/*---------------------------------------*/
:root {
  --hoofd-font: 'Libre Bodoni', serif;
  --tweede-font: 'Ibarra Real Nova', serif;
  --color-bruin: #b49082;
  --color-lichtbruin: #e0c2b7;
  --color-donkerbruin: #a28276;
  --color-achtergrond: #fff5f2;
  --color-button: #536a58;
  --color-hoverbutton: #96a69a;
  --color-tekst: #071a28;
  --color-navtekst: #ffffff;
  --color-hovernav: #033860;
  --color-navkleur: #455749;
}
/*---------------------------------------/*
 # GENERIC - BOOTSTRAP
/*---------------------------------------*/
.navbar-nav .nav-link.active {
  color: var(--color-navkleur);
}
.col-lg-6 {
  padding: 0;
}
.d-lg-block {
  padding: 0;
}
.card {
  border-radius: 1rem;
}
.carousel-control-next-icon {
  background-image: none;
}
.form-control {
  background-color: var(--color-bruin);
  font-family: var(--tweede-font);
  border: none;
  margin-bottom: 1rem;
  &::placeholder {
    color: var(--color-navtekst);
  }
}
.navbar-toggler {
  border: none;
}
.navbar-toggler:focus {
  box-shadow: none;
}
.carousel-control-prev-icon {
  background-image: none;
}
.c-card-revieuw__cards {
  border-radius: 32px 0 32px 0;
}
/*---------------------------------------/*
 # ELEMENTS
/*---------------------------------------*/
body {
  background-color: var(--color-achtergrond);
}
/*---------------------------------------/*
 # OBJECTS
/*---------------------------------------*/

/*---------------------------------------/*
 # COMPONENTS
/*---------------------------------------*/
.c-hamberger {
  color: var(--color-navtekst);
  font-size: 2rem;
}
/* navigatie */
.c-nav {
  background-color: var(--color-donkerbruin);
}
.c-nav__logo {
  height: 4rem;
  width: 4rem;
  margin-left: 3rem;
}
.c-nav__link {
  color: var(--color-navtekst);
  font-family: var(--hoofd-font);
  transition-duration: 0.3s;
  &:hover {
    color: var(--color-navkleur);
  }
}
.c-nav__link-link {
  color: var(--color-navtekst);
  font-family: var(--hoofd-font);
  transition-duration: 0.3s;
  margin-right: 3.6875rem;
  &:hover {
    color: var(--color-navkleur);
  }
}
.c-nav__zoekbalk {
  font-family: var(--tweede-font);
  background-color: var(--color-achtergrond);
  padding: 0.5rem;

  border-radius: 3rem;
  border: none;

  &::placeholder {
    color: var(--color-navkleur);
  }
}
.c-nav__button {
  color: var(--color-hoverbutton);
  border: none;
  border-radius: 8rem;
  transition-duration: 0.3s;
  margin: 0;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  &:hover {
    background-color: var(--color-button);
    color: var(--color-hoverbutton);
    border-radius: 8rem;
    border: none;
  }
}
.c-nav__person {
  background-color: var(--color-donkerbruin);
  border: none;
  color: var(--color-navtekst);
  margin-left: 2rem;
  margin-right: 3rem;
  transition-duration: 0.3s;
  &:hover {
    color: var(--color-navkleur);
  }
}
/* header*/
.c-header {
  padding-top: 3rem;
}
.c-header__twee {
  font-family: var(--hoofd-font);
  font-size: 4rem;
  color: var(--color-tekst);
  margin: 3rem;
}
.c-header__foto {
  max-width: 100%;
  height: auto;
  border-radius: 2rem;
}
.c-header__titel {
  font-family: var(--hoofd-font);
  color: var(--color-tekst);
  font-size: 4rem;
  margin-bottom: 1rem;
  margin-left: 2rem;
}
.c-header__tekst {
  font-family: var(--hoofd-font);
  color: var(--color-tekst);
  font-size: 2.25rem;
  margin-bottom: 1.5rem;
  margin-left: 2rem;
}
/* alegmeende tekst */
.c-button {
  font-family: var(--hoofd-font);
  background-color: var(--color-button);
  font-size: 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: 1.5rem;
  transition-duration: 0.3s;
  color: var(--color-navtekst);
  text-decoration: none;
  margin: 2rem;

  &:hover {
    background-color: var(--color-hoverbutton);
    color: var(--color-navtekst);
  }
}
.c-button__twee {
  font-family: var(--hoofd-font);
  font-size: 1.25rem;
  text-decoration: underline;
}

.c-titel {
  font-family: var(--hoofd-font);
  font-size: 3rem;
  color: var(--color-tekst);
  margin-top: 3rem;
}

.c-tekst {
  font-family: var(--tweede-font);
  color: var(--color-tekst);
  font-size: 1.25rem;
}
.c-foto__twee {
  width: 100%;
  height: 100%;
  border-radius: 0 32px 32px 0;
  padding: 0;
}
/* cards */
.c-card {
  margin-top: 3rem;
  margin-bottom: 3rem;
  position: relative;
  border-radius: 32px 0 32px 0;
  border: none;
  overflow: hidden;
  width: 90%;
  height: 300px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.c-card-reis {
  justify-content: center;
  align-items: center;
}
.c-card__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
}

.c-card__overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0;
  width: 100%;
  height: 80%;
  background: linear-gradient(to top, rgba(255, 255, 255), transparent);
}

.c-card__titel {
  margin: 0;
  font-size: 1.5rem;
  font-family: var(--hoofd-font);
  color: var(--color-button);
  position: absolute;
  bottom: 15px;
  left: 20px;
}
.c-card__titels {
  margin: 0;
  font-size: 1.5rem;
  font-family: var(--hoofd-font);
  color: var(--color-button);
  position: absolute;
  bottom: 40px;
  left: 20px;
}
.c-card__icon {
  position: absolute;
  top: 0.3rem;
  right: 1rem;
  margin-right: 0.5rem;
  color: var(--color-achtergrond);
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  display: flex;
  font-size: 2rem;
  &:hover {
    color: var(--color-button);
  }
}
.c-card__button {
  font-family: var(--hoofd-font);
  font-size: 1.25rem;
  text-decoration: underline;
  margin: 0;
  color: var(--color-tekst);
  position: absolute;
  bottom: 10px;
  left: 20px;
  &:hover {
    color: var(--color-button);
  }
}
.c-reis__card {
  margin-top: 1rem;
  margin-bottom: 3rem;
  position: relative;
  border-radius: 32px 0 32px 0;
  border: none;
  overflow: hidden;
  width: 90%;
  height: 300px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.c-card-revieuw {
  background-color: var(--color-achtergrond);
  border-radius: 32px 0 32px 0;
  border-color: var(--color-button);
  border: 2px solid var(--color-button);
  width: 100%;
  height: 100%;
}
.c-card-revieuw__titel {
  font-family: var(--hoofd-font);
  color: var(--color-tekst);
  font-size: 1.5rem;
}
.c-card-revieuw__tekst {
  font-family: var(--tweede-font);
  font-size: 1.25rem;
  color: var(--color-tekst);
}
.c-card-revieuw__ster {
  color: var(--color-hoverbutton);
}
.c-card-revieuw__stertje {
  color: var(--color-tekst);
}
.c-card-revieuw__cards {
  display: flex;
  flex-direction: column;
}
.c-carousel__cards {
  justify-content: center;
  align-items: center;
}
/*waarom ons*/
.c-waarom-ons__blokje {
  display: flex;
  justify-content: center;
  flex-direction: row;
  @media (width < 768px) {
    display: flex;
    flex-direction: column;
  }
}
.c-waarom-ons {
  background-color: var(--color-lichtbruin);
  margin-top: 3rem;
}
.c-waarom-ons__titel {
  font-family: var(--hoofd-font);
  color: var(--color-navtekst);
  font-size: 3rem;
  padding-top: 1rem;
  padding-left: 2rem;
}

.c-waarom-ons__tekst {
  font-family: var(--tweede-font);
  color: var(--color-navtekst);
  margin-right: 3rem;
  margin-left: 3rem;
  margin-top: 1rem;
}
.c-waarom-ons__icon {
  height: 3rem;
  width: 3rem;
  margin-left: 2rem;
}
.c-waarom-ons__foto {
  width: 80%;
  height: 80%;
  border-radius: 1rem;
  margin-left: 4rem;
}
/* reizen */
.c-reizen__tekst {
  font-family: var(--hoofd-font);
  color: var(--color-hoverbutton);
  font-size: 2.25rem;
  margin-top: 2rem;
}
/* diensten */
.c-diensten__titel {
  font-family: var(--hoofd-font);
  font-size: 2.25rem;
  color: var(--color-tekst);
  padding-left: 2rem;
  padding-right: 1rem;
}
.c-diensten__tekst {
  font-family: var(--tweede-font);
  color: var(--color-tekst);
  font-size: 1.25rem;
  padding-left: 2rem;
  padding-right: 1rem;
}
.c-button__diensten {
  font-family: var(--hoofd-font);
  color: var(--color-tekst);
  text-decoration: underline;
  font-size: 1.25rem;
  margin-left: 2rem;
  &:hover {
    color: var(--color-hoverbutton);
  }
}
.c-diensten__achtergrond {
  border-radius: 0 32px 32px 0;
  margin: 3rem;
}
.c-foto__diensten {
  width: 100%;
  height: 100%;
  border-radius: 32px;
  padding: 0;
  margin-right: 2rem;
}
.c-dienst__titel {
  font-family: var(--hoofd-font);
  font-size: 2.25rem;
  color: var(--color-button);

  margin-left: 1rem;
}
.c-dienst {
  background-color: var(--color-achtergrond);
  border: 2px solid var(--color-lichtbruin);
  padding: 1rem;
  border-radius: 0.5rem;
}
.c-dienst__tekst {
  font-family: var(--tweede-font);
  font-size: 1.25rem;
  color: var(--color-tekst);
  margin-left: 1rem;
}
.c-button__dienst {
  color: var(--color-button);
  font-family: var(--hoofd-font);
  font-size: 1rem;
  margin-left: 1rem;
  &:hover {
    color: var(--color-hoverbutton);
  }
}
.c-dients__foto {
  height: auto;
  width: 100%;
  border-radius: 0.5rem;
}

.c-dienst__blok {
  margin-top: 1rem;
  flex-direction: row;
  display: flex;
}

/* over ons */
.c-over-ons {
  background-color: var(--color-bruin);
  border-radius: 32px 0 0 32px;
  padding-left: 1rem;
  padding-right: 1rem;
  @media (width < 992px) {
    border-radius: 1rem;
    border-color: var(--color-lichtbruin);
    align-items: center;
    justify-content: center;
  }
}
.c-over-ons__achtergrond {
  margin-top: 3rem;
}
.c-button__over {
  font-family: var(--hoofd-font);
  color: var(--color-navtekst);
  text-decoration: underline;
  font-size: 1.25rem;
  margin-left: 2rem;
  &:hover {
    color: var(--color-button);
  }
}
/* contact */
.c-contact__achtergrond {
  background-color: var(--color-lichtbruin);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 3rem;
}
.c-contact__achtergrond--twee {
  background-color: var(--color-lichtbruin);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.c-contact__tekst {
  margin-top: 2rem;
  font-family: var(--hoofd-font);
  font-size: 2.25rem;
  color: var(--color-navtekst);
}
.c-contact__button {
  margin-bottom: 2rem;
  margin-top: 1rem;
}
.c-contacts__titel {
  font-family: var(--hoofd-font);
  font-size: 2.25rem;
  color: var(--color-tekst);
}
.c-contacts__tekst {
  font-family: var(--tweede-font);
  font-size: 1.25rem;
  color: var(--color-tekst);
}

.c-contacts__afspraak {
  font-family: var(--tweede-font);
  font-size: 21px;
  color: var(--color-tekst);
}
.c-contact__kaarten {
  margin-top: 3rem;
}
.c-contacts__titel--twee {
  font-family: var(--hoofd-font);
  color: var(--color-navtekst);
  font-size: 2.25rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.c-contact__forms__achtergrond {
  background-color: var(--color-donkerbruin);
  padding: 2rem 3rem;
  margin-top: 3rem;
}
.c-contact__tekstje {
  font-family: var(--tweede-font);
  font-size: 1.25rem;
  color: var(--color-navtekst);
  justify-content: center;
  align-items: center;
  padding-left: 10rem;
}
.c-contact__tekstjes {
  font-family: var(--tweede-font);
  font-size: 1.375rem;
  color: var(--color-navtekst);
  justify-content: center;
  align-items: center;
  padding-left: 10rem;
}
.c-contact__titel {
  font-family: var(--hoofd-font);
  font-size: 2.25rem;
  color: var(--color-navtekst);
  padding-left: 10rem;
  padding-top: 2rem;
}
/* carousel */

.c-carousel__pijltje {
  font-family: var(--tweede-font);
  color: var(--color-button);
  font-size: 3rem;
}
.c-carousel {
  margin-top: 3rem;
}
.c-carousel__pijltjes {
  font-family: var(--tweede-font);
  color: var(--color-button);
  font-size: 2rem;
}
/* filialan */
.c-filialen__licht {
  background-color: var(--color-lichtbruin);
}
.c-filialen__donker {
  background-color: var(--color-donkerbruin);
}
.c-filialen__foto {
  height: auto;
  width: 100%;
}
.c-filialen__titel {
  font-family: var(--hoofd-font);
  color: var(--color-tekst);
  font-size: 2.25rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.c-filialen__titels {
  font-size: 4rem;
  font-family: var(--hoofd-font);
  color: var(--color-tekst);
  margin-top: 3rem;
}
/* footer */
.c-footer {
  background-color: var(--color-donkerbruin);
  padding-top: 2rem;

  @media (width >= 576px) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.c-footer__logo {
  margin-left: 3rem;
  margin-bottom: 2rem;

  @media (width >= 576px) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.c-logo {
  height: 6rem;
  width: 14rem;

  @media (width >= 576px) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.c-footer__tekst {
  font-family: var(--hoofd-font);
  color: var(--color-navtekst);
  text-decoration: none;
  transition-duration: 0.3s;
  text-align: center;
  margin-bottom: 1rem;
  &:hover {
    color: var(--color-navkleur);
    text-decoration: none;
  }

  @media (width >= 576px) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.c-footer__info {
  font-family: var(--hoofd-font);
  color: var(--color-navtekst);
  text-align: center;
  margin-bottom: 1rem;

  @media (width >= 576px) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.c-footer__icons {
  color: var(--color-navtekst);
  transition-duration: 0.3s;
  margin-bottom: 1rem;

  &:hover {
    color: var(--color-navkleur);
  }

  @media (width >= 576px) {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @media (width >= 576px) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.c-footer__contact {
  font-family: var(--hoofd-font);
  color: var(--color-navtekst);
  text-align: center;
  margin-bottom: 1rem;

  @media (width >= 576px) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.c-footer__icon {
  color: var(--color-navtekst);
  text-decoration: none;
  transition-duration: 0.3s;
  margin-bottom: 1rem;

  &:hover {
    color: var(--color-navkleur);
  }

  @media (width >= 576px) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.c-footer__einde {
  color: var(--color-navtekst);

  font-family: var(--hoofd-font);
  padding: 0.5rem 0;
  margin: 0;
}

/*---------------------------------------/*
 # UTILITIES
/*---------------------------------------*/