/* =============ABSTRACTS==================== */
/* =============BASE==================== */
/* VARIABLES =================================================================== */
/*
$gutter: 2%;
$columns: 16;
*/
/* STYLES ====================================================================== */
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  height: 100%;
  max-width: 3000px;
  margin: 0 auto;
  padding: 0;
}

p {
  margin-top: 0;
}
p:last-of-type {
  margin-bottom: 0;
}

#form-success {
  display: none;
}

#feedback.erroneous, #feedback.error {
  padding: 10px;
  text-align: center;
  background-color: crimson;
  color: #fff;
  margin-bottom: 10px;
  font-weight: bold;
}

/* MEDIA QUERY'S =============================================================== */
* {
  outline: none;
}

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
  margin: 0;
  padding: 0;
}

audio, canvas, progress, video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden], template {
  display: none;
}

a {
  background-color: transparent;
}

a:active, a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b, strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, html input[type=button], input[type=reset], input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled], html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
  border-radius: 0;
}

input[type=checkbox], input[type=radio] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}

input[type=number]::-webkit-inner-adjust-hue-button, input[type=number]::-webkit-outer-adjust-hue-button {
  height: auto;
}

input[type=search] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  border-radius: 0;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  padding: 0;
}

/* GRID ======================================================================== */
.clear:before, .clear:after {
  content: "";
  display: table;
}
.clear:after {
  clear: both;
}

body {
  width: 100%;
}
body:before, body:after {
  content: "";
  display: table;
}
body:after {
  clear: both;
}

/* EXTRA ======================================================================= */
img.scale {
  max-width: 100%;
  height: auto;
}

::-moz-selection {
  background: RoyalBlue;
  color: #fff;
}

::selection {
  background: RoyalBlue;
  color: #fff;
}

::-moz-selection {
  background: RoyalBlue;
  color: #fff;
}

#privacypolicy {
  position: fixed;
  right: 0;
  bottom: 0;
  background: rgba(238, 238, 238, 0.6);
  color: RoyalBlue;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 15px 30px;
  width: 100%;
  font-size: 11px;
  line-height: 22px;
  opacity: 0;
  -webkit-transform: translate(0, 30px);
      -ms-transform: translate(0, 30px);
          transform: translate(0, 30px);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  pointer-events: none;
}
#privacypolicy.active {
  opacity: 1;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
  pointer-events: auto;
}
#privacypolicy a {
  color: RoyalBlue;
}
#privacypolicy .privacy-btn {
  background-image: url("../images/privacy-close.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  position: absolute;
  top: 15px;
  right: 10px;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* CMS ========================================================================= */
.uniform__potty {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.erroneous {
  border-color: crimson !important;
}

/* PLUGINS ===================================================================== */
html {
  font-family: sans-serif;
  font-size: 62.5%;
}

body {
  line-height: 1.8;
  font-size: 1.25rem;
}

h1, h2, h3 {
  margin: 0;
  padding: 0;
}
h1 a, h2 a, h3 a {
  text-decoration: none;
}

p {
  margin: 0;
}
p:not(p:last-of-type) {
  padding-bottom: 2rem;
}

@font-face {
  font-family: "mikela";
  src: url("../fonts//MikelaRegular.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "barlow";
  src: url("../fonts//Barlow-Regular.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  height: 100%;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  height: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  background-color: #EFE9E5;
}

img {
  height: 100%;
  width: 100%;
}

.error__container a {
  color: unset;
  text-decoration: underline;
}

.swiper {
  height: 100%;
  width: 100%;
}

.animate-on-scroll {
  opacity: 0; /* Onzichtbaar */
  -webkit-transform: scale(0.95);
      -ms-transform: scale(0.95);
          transform: scale(0.95); /* Kleinere schaal */
  -webkit-transition: opacity 0.4s ease-out 0.6s, -webkit-transform 0.4s ease-out 0.4s;
  transition: opacity 0.4s ease-out 0.6s, -webkit-transform 0.4s ease-out 0.4s;
  transition: opacity 0.4s ease-out 0.6s, transform 0.4s ease-out 0.4s;
  transition: opacity 0.4s ease-out 0.6s, transform 0.4s ease-out 0.4s, -webkit-transform 0.4s ease-out 0.4s; /* Subtiele transitie met delay */
}

.animate-on-scroll.visible {
  opacity: 1; /* Volledig zichtbaar */
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1); /* Normale schaal */
}

/* Standaard styling voor de items */
.moment-item {
  opacity: 0; /* Begin onzichtbaar */
  -webkit-transform: translateY(40px);
      -ms-transform: translateY(40px);
          transform: translateY(40px); /* Begin lichtjes naar beneden */
  -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease; /* Zorg voor een vloeiende animatie */
}

/* Actieve staat (wanneer in beeld) */
.moment-item.visible {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0); /* Beweeg naar de oorspronkelijke positie */
}

/* Optioneel: Voeg een kleine extra delay toe per element */
.moment-item:nth-child(1) {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

.moment-item:nth-child(2) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

.moment-item:nth-child(3) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}

.moment-item:nth-child(4) {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}

/* Voeg meer nth-child selectors toe afhankelijk van je grid-items */
/* Algemene fade-in-up animatie */
.fade-in-up {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
  opacity: 0; /* Start onzichtbaar */
  -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
          transform: translateY(20px); /* Begin iets lager */
  -webkit-transition: opacity 0.6s ease, -webkit-transform 0.6s ease;
  transition: opacity 0.6s ease, -webkit-transform 0.6s ease;
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition: opacity 0.6s ease, transform 0.6s ease, -webkit-transform 0.6s ease; /* Vloeiende overgang */
}

/* Actieve staat */
.fade-in-up.visible {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0); /* Beweeg naar de oorspronkelijke positie */
}

.isie {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 9999999;
  background: white;
  top: 0;
  left: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.isie h1 {
  padding-bottom: 2vw;
}
.isie .close-isie {
  text-decoration: underline;
  padding-top: 1vw;
  cursor: pointer;
}

.hidden {
  display: none;
  visibility: hidden;
  opacity: 0;
  height: 0;
}

.ratio__portrait {
  position: relative;
  height: 0;
  width: 100%;
  padding-bottom: 150%;
  overflow: hidden;
}
.ratio__landscape {
  position: relative;
  height: 0;
  width: 100%;
  padding-bottom: 70%;
  overflow: hidden;
}
.ratio__square {
  position: relative;
  height: 0;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
}
.ratio__fullscreen {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.ratio__thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.ratio__logo {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.ratio__video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 124%;
}

/* =============COMPONENTS==================== */
.footer {
  background-color: #EFE9E5;
  padding: 20px 100px;
  position: relative;
  z-index: 1001;
}

.footer-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.footer-social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.social-icon img {
  width: 22px;
  height: auto;
}

.footer-email a:hover {
  text-decoration: underline;
}

.footer-links {
  text-transform: uppercase;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap; /* Voorkomt dat items op desktop breken */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}

.footer-link {
  font-size: 12px;
  color: #610D22;
  text-decoration: none;
  letter-spacing: 0.5px;
}

.footer-pluglink {
  font-size: 12px;
  color: #C0A0A4;
  text-decoration: none;
  margin-left: 10px;
}

.footer-logo {
  width: 20%;
}

.footer-link:hover {
  text-decoration: underline;
}

.separator {
  width: 1px;
  height: 1em;
  margin: 0 50px;
}

.footer-under {
  font-size: 10px;
  color: #610D22;
  text-decoration: none;
  opacity: 0.4;
  letter-spacing: 1px;
  margin-left: 20px;
}

.footer-undersectie {
  text-align: end;
  padding-right: 100px;
}

/* Tablet weergave */
@media (max-width: 1024px) {
  .footer {
    padding: 20px 50px;
  }
  .footer-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  .footer-pluglink {
    font-size: 16px;
  }
  .footer-email a,
  .footer-link {
    font-size: 16px;
  }
}
/* Mobiele weergave */
@media (max-width: 768px) {
  .footer {
    padding: 20px 20px;
  }
  .footer-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    gap: 15px;
  }
  .footer-social {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 8px;
  }
  .footer-email a,
  .footer-link {
    font-size: 12px;
  }
  .social-icon img {
    width: 18px;
  }
}
/* Extra kleine schermen (mobiel kleiner dan 480px) */
@media (max-width: 480px) {
  .footer-undersectie {
    text-align: center;
    padding: 10px 20px;
  }
  .footer-under {
    font-size: 6px;
    color: #610D22;
    text-decoration: none;
    letter-spacing: 1px;
  }
  .footer-logo {
    width: 70%;
    margin-bottom: 20px;
  }
  .footer-pluglink {
    font-size: 7px;
  }
  .footer {
    padding: 0px 10px;
  }
  .separator {
    width: 1px;
    height: 1em;
    background-color: #ccc;
    margin: 0px;
  }
  .footer-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    gap: 5px;
  }
  .footer-social {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 5px;
  }
  .footer-email a {
    display: block;
    font-size: 9px;
  }
  .footer-links {
    font-size: 11px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
    margin-top: 10px;
  }
  .footer-link {
    font-size: 7px;
  }
  .social-icon img {
    width: 16px;
  }
}
@media (max-width: 768px) {
  .footer-link {
    font-size: 10px;
  }
  .footer-links {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; /* Zorgt ervoor dat items kunnen doorbreken naar de volgende rij */
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; /* Centreert items horizontaal */
    gap: 10px; /* Houdt de ruimte tussen items consistent */
  }
  .separator {
    display: none;
  }
  .footer-pluglink {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%; /* Laat "Site by Plug" op een nieuwe rij komen */
    text-align: center; /* Centreert de tekst */
    margin: 5px 0; /* Ruimte boven en onder */
    font-size: 10px; /* Maak het iets kleiner voor mobiel */
  }
}
#privacypolicy {
  background: #fff;
  color: #222222;
}
#privacypolicy a {
  color: #222222;
}

.termsfeed-com---nb-simple {
  max-width: 100% !important;
}

.cc-nb-main-container {
  font-size: 1.3rem !important;
  background: #fff !important;
  display: -ms-grid !important;
  display: grid !important;
  -ms-grid-columns: 1fr 1fr !important;
  grid-template-columns: 1fr 1fr !important;
  padding: 2rem 10rem !important;
}
@media (max-width: 1000px) {
  .cc-nb-main-container {
    padding: 2rem 5rem !important;
    -ms-grid-columns: 1fr !important;
    grid-template-columns: 1fr !important;
  }
}
.cc-nb-title {
  font-size: 2.5rem !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
  color: #4C2937 !important;
  margin: 0 !important;
  padding-bottom: 3rem !important;
}
.cc-nb-title-container {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
}
@media (max-width: 1000px) {
  .cc-nb-title-container {
    grid-column: unset !important;
    grid-row: unset !important;
  }
}
.cc-nb-text {
  color: #4C2937 !important;
  line-height: 1.5 !important;
  font-size: 1.2rem !important;
}
.cc-nb-text-container {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2/3;
}
@media (max-width: 1000px) {
  .cc-nb-text-container {
    grid-column: unset !important;
    grid-row: unset !important;
  }
}
.cc-nb-okagree {
  background: none !important;
  border: none !important;
  color: #4C2937 !important;
}
.cc-nb-okagree:hover {
  background: #222222 !important;
  color: #fff !important;
}
.cc-nb-reject {
  background: none !important;
  border: none !important;
  color: #4C2937 !important;
  opacity: 40% !important;
}
.cc-nb-changep {
  color: #4C2937 !important;
  background: #fff !important;
}
.cc-nb-buttons-container {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2/3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1/3;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: reverse !important;
      -ms-flex-direction: row-reverse !important;
          flex-direction: row-reverse !important;
  -webkit-box-pack: start !important;
      -ms-flex-pack: start !important;
          justify-content: flex-start !important;
  height: 100% !important;
}
@media (max-width: 1000px) {
  .cc-nb-buttons-container {
    grid-column: unset !important;
    grid-row: unset !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
        -ms-flex-direction: column-reverse !important;
            flex-direction: column-reverse !important;
  }
}
.cc-nb-buttons-container button {
  text-transform: uppercase !important;
  letter-spacing: 0.075em !important;
  font-size: 1rem !important;
  outline: none !important;
  border-radius: 20px !important;
  -ms-flex-item-align: end !important;
      align-self: flex-end !important;
  padding: 1rem 2rem !important;
}
@media (max-width: 1000px) {
  .cc-nb-buttons-container button {
    width: 100% !important;
  }
}

.cc-cp-foot-save {
  background: #222222 !important;
}
.cc-cp-foot-save:focus {
  outline: none !important;
  border: none !important;
}

/* Styling voor het hoofdgedeelte */
#plg-textpage {
  padding: 50px 15px; /* Ruimte rondom de inhoud */
  background-color: #ffffff; /* Witte achtergrond voor content */
  -webkit-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Subtiele schaduw */
  margin: 20px auto; /* Centreer de sectie */
  max-width: 800px; /* Beperk de breedte van de content */
  border-radius: 8px; /* Ronde hoeken */
}

/* Container styling */
.plg-container {
  padding: 20px;
}

/* Titel styling */
#plg-textpage h1 {
  font-size: 32px;
  margin-bottom: 20px;
  text-align: center; /* Centreer de titel */
  color: #610D22; /* Dieprode kleur */
}

/* Tekst styling */
#plg-textpage p {
  margin-bottom: 20px;
  text-align: justify; /* Voor nette uitlijning */
}

/* Links */
#plg-textpage a {
  color: #A71D34; /* Mooie kleurtint voor links */
  text-decoration: none;
  border-bottom: 2px solid transparent;
  -webkit-transition: border-color 0.3s ease, color 0.3s ease;
  transition: border-color 0.3s ease, color 0.3s ease;
}

#plg-textpage a:hover {
  border-color: #A71D34; /* Onderlijn bij hover */
  color: #610D22; /* Donkerder kleur */
}

/* Responsiviteit */
@media (max-width: 768px) {
  #plg-textpage {
    padding: 30px 10px;
  }
  #plg-textpage h1 {
    font-size: 24px;
  }
}
form, input, label, textarea {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

form {
  list-style-type: none;
  padding: 0;
  width: 100%;
}
form .error {
  color: crimson;
}
form .error::-webkit-input-placeholder {
  color: crimson;
}
form .error::-moz-placeholder {
  color: crimson;
}
form .error:-ms-input-placeholder {
  color: crimson;
}
form .error::-ms-input-placeholder {
  color: crimson;
}
form .error::placeholder {
  color: crimson;
}
form .error + label {
  color: crimson;
  font-weight: bold;
}
form .error + label a {
  color: crimson !important;
}
form .error a {
  color: crimson;
}
form .error .checkbox:before {
  border: 0.5px solid crimson;
}

.form-group {
  border-bottom: 1px solid #610D22;
  position: relative;
}

.noline {
  border-bottom: none;
  margin-top: 0;
}

#group-policy {
  padding: 20px 0;
  line-height: 1;
}

label, input {
  -webkit-transition: color 0.4s ease, background-color 0.1s ease-in-out;
  transition: color 0.4s ease, background-color 0.1s ease-in-out;
}

label {
  color: #4C2937;
  font-size: 70%;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  position: absolute;
  top: 10px;
  left: 10px;
}
input:focus + label, textarea:focus + label {
  color: #222222;
  font-weight: bold;
  letter-spacing: -0.01em;
}
input[type=checkbox]:focus + label {
  color: unset;
  font-weight: unset;
  letter-spacing: 0.03em;
}

input, textarea {
  background-color: transparent;
  border: none;
  color: #610D22;
  font-size: 18px;
  margin: 9px 0 7px 0;
  margin: 0;
  padding: 2em 10px 15px 0px;
  outline: none;
  width: 100%;
}
input:focus, textarea:focus {
  color: #000;
}
input.error, textarea.error {
  padding: 2em 10px 2em 10px;
}

/* Algemene placeholder-stijlen */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #826C75;
  opacity: 1; /* Zorg ervoor dat de placeholder volledig zichtbaar is */
}
input::-moz-placeholder, textarea::-moz-placeholder {
  color: #826C75;
  opacity: 1; /* Zorg ervoor dat de placeholder volledig zichtbaar is */
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #826C75;
  opacity: 1; /* Zorg ervoor dat de placeholder volledig zichtbaar is */
}
input::-ms-input-placeholder, textarea::-ms-input-placeholder {
  color: #826C75;
  opacity: 1; /* Zorg ervoor dat de placeholder volledig zichtbaar is */
}
input::placeholder,
textarea::placeholder {
  color: #826C75;
  opacity: 1; /* Zorg ervoor dat de placeholder volledig zichtbaar is */
}

/* Placeholder-stijl bij foutmeldingen */
input.error::-webkit-input-placeholder, textarea.error::-webkit-input-placeholder {
  color: crimson;
}
input.error::-moz-placeholder, textarea.error::-moz-placeholder {
  color: crimson;
}
input.error:-ms-input-placeholder, textarea.error:-ms-input-placeholder {
  color: crimson;
}
input.error::-ms-input-placeholder, textarea.error::-ms-input-placeholder {
  color: crimson;
}
input.error::placeholder,
textarea.error::placeholder {
  color: crimson;
}

.error-text {
  position: absolute;
  bottom: 10px;
  left: 10px;
  margin: 0;
  font-size: 70%;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: crimson;
}
.error-text.error-policy {
  position: relative;
  bottom: 0;
  left: 0;
}

.policy {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
  line-height: 2;
}
.policy a {
  text-decoration: underline;
}

#policy {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  display: inline-block;
  width: 0;
  height: 0;
  position: absolute;
  left: -99999999px;
}
#policy:checked + label:after {
  content: "";
  background: #610D22;
  border: 0.5px solid #610D22;
  position: absolute;
  top: 0;
  left: -20px;
  width: 12px;
  height: 12px;
}

.checkbox {
  position: relative;
  margin-left: 26px;
}
.checkbox:before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 0.5px solid #222222;
  left: -20px;
  top: 0;
}
.checkbox a {
  text-decoration: underline;
}

.label--required:after {
  content: "*";
  color: crimson;
  margin-left: 5px;
}

#contact-form {
  font-family: Arial, sans-serif;
  color: #4C2937;
}

.form-group input, .form-group textarea {
  width: 100%;
  border: none;
  font-size: 14px;
  background: transparent;
}

textarea {
  resize: none;
}

input[type=submit] {
  background: none;
  color: #4C2937;
  border: none;
  width: 10%;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px 0px 10px 0px;
}

.error-text {
  color: #ff0000;
  font-size: 12px;
  display: none;
}

.group-policy {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.group-policy .checkbox {
  margin-left: 10px;
  font-size: 14px;
}

.group-policy a {
  color: #4C2937;
  text-decoration: none;
}

.group-policy a:hover {
  text-decoration: underline;
}

.form-left, .form-right {
  width: 50%;
}

/* Form-right moet de resterende ruimte innemen */
.form-right .form-group {
  height: 100%;
}

.formcontact {
  width: 100%;
  gap: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.meer-informatie-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* Maakt de container een flex-container */
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end; /* Lijnt de knop uit naar het einde van de container */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; /* Centreert de knop verticaal */
}

.icon-smalls {
  vertical-align: middle;
  margin-left: 5px;
}

@media (max-width: 768px) {
  .group-policy .checkbox {
    line-height: 1.3;
    font-size: 12px;
  }
  .icon-smalls {
    vertical-align: middle;
    margin-left: 5px;
  }
  .form-group input, .form-group textarea {
    font-size: 12px;
  }
  .formcontact {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; /* Zet de rijen onder elkaar op kleine schermen */
  }
  .form-left, .form-right {
    width: 100%; /* Zorg dat beide secties volledige breedte innemen */
  }
  input[type=submit] {
    width: 25%; /* Knop vult de volledige breedte op kleinere schermen */
  }
}
@media (max-width: 480px) {
  label {
    font-size: 12px; /* Verklein de labels op zeer kleine schermen */
  }
  input[type=submit] {
    width: 25%; /* Knop vult de volledige breedte op kleinere schermen */
  }
  input, textarea {
    font-size: 16px; /* Maak de invoervelden iets groter voor gebruiksvriendelijkheid */
  }
  .meer-informatie-container {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
  }
}
.fancybox__content {
  padding: 5rem !important;
}
.fancybox__content .carousel__button.is-close {
  top: 0 !important;
  right: 0;
}
.fancybox__content .carousel__button.is-close svg {
  color: #222222;
  -webkit-filter: none;
          filter: none;
  width: 2rem;
  height: 2rem;
}

.swiper-buttons-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.swiper-buttons-prev, .swiper-buttons-next {
  position: relative;
  cursor: pointer;
  padding: 1rem 0;
}
.swiper-buttons-prev span, .swiper-buttons-next span {
  position: relative;
  display: block;
  width: 2.5rem;
  height: 1px;
  background: #222222;
  margin: 2px 0 0 2rem;
}
.swiper-buttons-prev span:before, .swiper-buttons-prev span:after, .swiper-buttons-next span:before, .swiper-buttons-next span:after {
  content: "";
  width: 4px;
  height: 1px;
  background: #222222;
  position: absolute;
  -webkit-transform-origin: right;
      -ms-transform-origin: right;
          transform-origin: right;
  top: 0;
  right: 0;
}
.swiper-buttons-prev span:before, .swiper-buttons-next span:before {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
.swiper-buttons-prev span:after, .swiper-buttons-next span:after {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.swiper-buttons-prev span {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

.columns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-left: -1rem;
  margin-right: -1rem;
}

.column {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 100%;
          flex: 0 1 100%;
  margin-left: 1rem;
  margin-right: 1rem;
  max-width: 100%;
}

@media (max-width: 1000px) {
  .column {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}
/* =============PAGES==================== */
.button-book {
  position: fixed;
  bottom: 50px;
  right: 0;
  z-index: 10;
}
.button-book-btn {
  display: block;
  text-decoration: none;
  background: #4C2937;
  color: #fff;
  font-family: "mikela";
  font-size: 15px;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
  line-height: 1;
  letter-spacing: 0.05em;
  padding-inline: 20px;
  padding-block: 15px;
  border-radius: 5px;
}
.button-book-btn:hover {
  background: #A71D34;
}

.image-slider-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.image-slider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
  width: 100%;
  height: 100%;
}

.slider-image {
  min-width: 100%;
  position: relative;
}

.slider-image img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Algemene styling */
.header-container {
  height: 100vh;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

/* Titelafbeelding */
.title-image {
  width: 35%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
}

/* Layout voor linker- en rechtergedeelte */
.header-right {
  width: 55%;
  height: 100%;
}

.header-left {
  width: 45%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; /* Verdeelt de inhoud gelijkmatig */
  gap: 50px;
  padding: 30px;
  margin-top: 50px;
}

/* Subtitle styling */
.subtitle {
  text-align: center;
  font-size: 1.2em;
  color: #4C2937;
}

/* Menu styling */
.menu {
  letter-spacing: 0.025em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  font-family: "mikela";
  margin: 20px 0;
  font-size: 20px;
  color: #4C2937;
  line-height: 1.5;
}

.menu a {
  margin: 0 15px;
  text-decoration: none;
  color: #4C2937;
  font-weight: 400;
  text-decoration-thickness: 0; /* Begin met een onzichtbare lijn */
  -webkit-transition: text-decoration-thickness 0.3s ease, color 0.3s ease;
  transition: text-decoration-thickness 0.3s ease, color 0.3s ease;
}

.menu a:hover {
  text-decoration: underline; /* Altijd een onderstreping */
  text-decoration-thickness: 2px; /* Maak de lijn dikker bij hover */
  color: #A71D34; /* Verander de kleur (optioneel) */
}

/* Talen sectie */
.languages {
  font-family: "mikela";
  text-align: center;
}

.languages a {
  text-transform: lowercase;
  margin: 0 10px;
  font-size: 20px;
  text-decoration: none;
  color: #CEBEC2;
}

.languages a.active {
  color: #4C2937;
}

.languages a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  color: #A71D34;
}

.intro-midden {
  margin-top: 20px;
}

/* Welkomstboodschap */
.welcome {
  text-transform: uppercase;
  font-family: "Barlow";
  text-align: center;
  margin: 0; /* Verwijder standaard marges */
  font-weight: 400;
  line-height: 1.4;
  padding-right: 100px;
  padding-left: 100px;
  margin-top: 100px;
  color: #4C2937;
  font-size: 20px !important;
}

.arrowheader {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* Afbeeldingcontainer */
.image-container {
  text-align: center;
  height: 100vh;
}

.image-container img {
  width: 100%;
  max-height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Media queries voor responsiviteit */
/* Tablets en kleinere schermen (tot 1024px breed) */
@media (max-width: 1024px) {
  .header-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: auto;
  }
  .image-container {
    height: 60vh; /* Maak de afbeelding iets kleiner */
    text-align: center;
  }
  .title-image {
    width: 45%; /* Meer ruimte op tablets */
    margin-bottom: 20px;
  }
  .header-left,
  .header-right {
    width: 100%;
    text-align: center; /* Zorg dat tekst gecentreerd wordt */
  }
  .header-right {
    height: 70vh;
  }
  .header-left {
    gap: 30px;
    padding: 20px 10px;
  }
  .menu {
    font-size: 18px; /* Iets kleinere tekst op tablets */
  }
  .subtitle {
    font-size: 1em; /* Maak de subtitel kleiner */
  }
  .welcome {
    padding-left: 0px;
    padding-right: 0px;
    font-size: 18px;
    margin: 20px 0; /* Minder marge voor strakker design */
  }
  .arrowheader {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
/* Mobiele telefoons (tot 768px breed) */
@media (max-width: 768px) {
  .header-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: auto;
  }
  .image-container {
    height: 60vh; /* Maak de afbeelding iets kleiner */
    text-align: center;
  }
  .title-image {
    width: 45%; /* Meer ruimte voor afbeelding */
    margin-bottom: 20px;
  }
  .header-left,
  .header-right {
    width: 100%;
    text-align: center;
  }
  .header-left {
    gap: 30px;
    padding: 20px 10px;
  }
  .menu {
    font-size: 18px; /* Iets kleinere tekst */
  }
  .subtitle {
    font-size: 1em; /* Kleinere subtitel */
  }
  .welcome {
    font-size: 18px;
    margin: 20px 0; /* Minder marge */
  }
  .arrowheader {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
/* Zeer kleine schermen (tot 480px breed) */
@media (max-width: 480px) {
  .title-image {
    width: 50%; /* Consistentie met tablet */
  }
  .header-left {
    padding: 20px 10px;
    gap: 30px; /* Gelijke ruimte */
  }
  .menu {
    font-size: 18px;
  }
  .subtitle {
    font-size: 1em;
  }
  .welcome {
    font-size: 18px;
    margin: 20px 0; /* Terug naar tabletindeling */
    display: block; /* Laat zien */
  }
}
/* Algemene container voor sectie2 */
.sectie2-container {
  width: 100%;
  height: 100vh;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row; /* Safari fallback */
  display: flex;
}

/* Afbeeldingsgedeelte */
/* Afbeeldingsgedeelte */
.sectie2-image-container {
  height: 100vh;
  background-color: #DBD8D8;
  width: 50%;
  overflow: hidden;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 100px;
}

.slider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

.sectie2-main-image {
  width: 100%;
  max-width: 500px;
  height: auto;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  position: absolute;
}

.sectie2-main-image.active {
  opacity: 1;
  visibility: visible;
  position: static;
}

/* Tekstgedeelte */
.sectie2-text-container {
  width: 50%;
  max-width: 450px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  font-family: "barlow";
  color: #3e1d24;
  margin: auto;
}

/* Sectie2 koptekst */
.sectie2-headline {
  font-family: "mikela";
  font-size: 30px;
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
  color: #4C2937;
  margin-bottom: 40px;
}

/* Sectie2 details */
.sectie2-details {
  font-family: "barlow";
  font-size: 14px;
  color: #4C2937;
  line-height: 1.4;
  margin-bottom: 100px;
}

/* Sectie2 beschrijving */
.sectie2-description {
  margin-bottom: 10px;
  line-height: 1.6;
  font-size: 14px;
  color: #4C2937 !important;
}

/* Sectie2 contactinformatie */
.sectie2-contact-info p {
  font-family: "mikela";
  font-size: 20px;
  color: #4C2937 !important;
  padding-bottom: 0 !important;
  line-height: 1;
}

/* Media Queries voor Responsiveness */
/* Voor tablets (schermbreedtes tot 1024px) */
@media (max-width: 1024px) {
  .sectie2-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; /* Items worden gestapeld */
  }
  .sectie2-description {
    font-size: 14px;
  }
  .sectie2-image-container,
  .sectie2-text-container {
    width: 100%; /* Beide secties nemen volledige breedte in */
    height: auto; /* Automatische hoogte voor flexibiliteit */
  }
  .sectie2-image-container {
    padding: 50px;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .sectie2-text-container {
    padding: 30px;
  }
  .sectie2-headline {
    font-size: 26px;
  }
  .sectie2-details {
    margin-bottom: 50px;
  }
}
/* Voor mobiele telefoons (schermbreedtes tot 768px) */
@media (max-width: 768px) {
  .sectie2-container {
    width: 100%;
    height: 85vh;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .sectie2-image-container,
  .sectie2-text-container {
    width: 100%;
    padding: 30px;
  }
  .sectie2-headline {
    font-size: 22px;
    margin-top: 25px;
    margin-bottom: 35px;
  }
  .sectie2-details {
    font-size: 14px;
    margin-bottom: 30px;
  }
  .sectie2-contact-info p {
    font-size: 14px;
  }
}
/* Voor zeer kleine schermen (schermbreedtes tot 480px) */
@media (max-width: 480px) {
  .sectie2-container {
    width: 100%;
    max-height: 100vh;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .sectie2-image-container {
    width: 100%;
    padding: 100px;
  }
  .sectie2-headline {
    font-size: 18px;
  }
  .sectie2-details {
    font-size: 14px;
  }
  .sectie2-contact-info p {
    font-size: 14px;
  }
  .sectie2-main-image {
    max-width: 250px; /* Kleiner formaat afbeelding op zeer kleine schermen */
  }
}
.sectie3-container {
  padding: 20px;
  padding-top: 200px;
  padding-bottom: 200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.sectie3-image-container {
  position: relative;
  width: 100%;
  max-width: 1000px;
}

.sectie3-main-image {
  width: 100%;
  height: auto;
  display: block;
}

.sectie3-text {
  margin-top: 20px;
  text-align: left;
  position: absolute;
  bottom: 100px;
  left: -100px;
  font-family: "Mikela", sans-serif;
  color: #4C2937;
}

.sectie3-text p {
  line-height: 1;
  font-size: 30px;
  text-transform: uppercase;
  font-weight: 400;
}

.sectie3-text span {
  font-size: 14px;
  color: #8B3A48;
}

.sectie3-signature {
  margin-top: 10px;
  z-index: 1;
  position: absolute;
  top: -140px;
  right: -30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  width: 100%;
  max-width: 1200px;
}

.sectie3-signature img {
  width: 100px;
  height: auto;
}

/* Responsieve aanpassingen */
@media (max-width: 1024px) {
  .sectie3-container {
    padding: 150px;
    margin-bottom: 0;
  }
  .sectie3-text {
    bottom: 50px;
    left: -50px;
  }
  .sectie3-text p {
    font-size: 24px;
  }
  .sectie3-text span {
    font-size: 14px;
  }
  .sectie3-signature {
    top: -90px;
    right: -25px;
  }
  .sectie3-signature img {
    width: 80px;
  }
}
@media (max-width: 768px) {
  .sectie3-container {
    padding: 10px;
    margin-top: 450px;
    margin-bottom: 100px;
    padding-top: 100px;
  }
  .sectie3-text {
    bottom: 30px;
    left: 0; /* Centraal positioneren */
  }
  .sectie3-text p {
    font-size: 20px;
  }
  .sectie3-text span {
    font-size: 12px;
    text-align: center;
  }
  .sectie3-signature {
    top: -80px;
    right: 0; /* Dichtbij rechterzijde */
  }
  .sectie3-signature img {
    width: 70px;
  }
}
@media (max-width: 480px) {
  .sectie3-container {
    height: 100%;
    padding: 30px;
    margin-top: 0;
    padding-top: 50px;
  }
  .sectie3-text {
    bottom: 20px;
    left: 10px; /* Aan linkerzijde */
  }
  .sectie3-text p {
    font-size: 16px;
  }
  .sectie3-text span {
    font-size: 10px;
  }
  .sectie3-signature {
    top: -70px;
    right: 1px;
  }
  .sectie3-signature img {
    width: 40px;
  }
}
@media (max-width: 425px) {
  .sectie3-container {
    padding-top: 50px;
  }
}
@media (max-width: 400px) {
  .sectie3-container {
    margin-top: 50px;
    margin-bottom: 50px;
  }
}
@media (max-width: 400px) and (max-width: 375px) {
  .sectie3-container {
    margin-top: 200px;
    margin-bottom: 50px;
  }
}
/* Algemene container voor tarieven sectie */
.price-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: auto;
  width: 100%;
  gap: 30px;
  background-color: #F5F1EE;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding-right: 20px;
}

/* Linkergedeelte: afbeelding */
.price-left {
  width: 100%;
  max-width: 60%;
}

.price-main-image {
  width: 100%;
  height: auto;
}

/* Rechtergedeelte: tekst */
.price-right {
  padding: 60px;
  width: 100%;
  max-width: 40%;
  font-family: "barlow";
  color: #3e1d24;
}

.price-title {
  font-family: "mikela";
  font-size: 35px;
  color: #4C2937;
  padding-top: 50px;
  font-weight: 400;
  padding-bottom: 50px;
  text-transform: uppercase;
}

.price-list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 50px;
  font-weight: 400;
}

.price-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 20px 0;
  border-bottom: 1px solid #4C2937;
  font-size: 18px;
}

.price-description {
  color: #4C2937;
  font-weight: 400;
}

.price-amount {
  color: #4C2937;
}

.price-footer {
  color: #4C2937;
  border-bottom: 1px solid #4C2937;
}

.price-footer2 {
  color: #4C2937;
  border-bottom: 1px solid #4C2937;
  margin-bottom: 50px;
}

.price-footer-text {
  max-width: 100%;
  margin: 30px 0;
  font-size: 18px;
  color: #4C2937;
  font-weight: 400;
  line-height: 1.6;
}

.price-reservation-link {
  display: inline-block;
  font-size: 18px;
  text-transform: uppercase;
  text-decoration: none;
  color: #4C2937;
  font-weight: 400;
  margin-left: 3px;
  -webkit-transition: background-color 0.3s ease, color 0.3s ease, -webkit-transform 0.3s ease;
  transition: background-color 0.3s ease, color 0.3s ease, -webkit-transform 0.3s ease;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
}

/* Hover-effect voor .price-reservation-link */
.price-reservation-link:hover {
  color: #4C2937;
}

/* Standaard stijl voor het icoon */
.icon-smalls-prijs {
  vertical-align: middle;
  margin-left: 10px;
  /* Voeg een vloeiende overgang toe */
  -webkit-transition: margin-left 0.5s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.5s ease;
  transition: margin-left 0.5s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.5s ease;
  transition: margin-left 0.5s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s ease;
  transition: margin-left 0.5s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s ease, -webkit-transform 0.5s ease;
}

/* Hover-effect voor het icoon */
.price-reservation-link:hover .icon-smalls-prijs {
  margin-left: 15px; /* Vloeiende verschuiving naar rechts */
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1); /* Optioneel: laat het icoon een beetje groter worden */
}

/* Tablets (max-width: 1024px) */
@media (max-width: 1024px) {
  .price-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; /* Stapel de items op tablets */
    padding: 20px;
    gap: 20px;
  }
  .price-left,
  .price-right {
    width: 100%; /* Beide secties nemen volledige breedte in */
    max-width: 100%;
  }
  .price-title {
    font-size: 28px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .price-list {
    margin-top: 20px;
  }
  .price-item {
    font-size: 16px;
    padding: 15px 0;
  }
  .price-footer-text {
    font-size: 15px;
  }
  .price-reservation-link {
    font-size: 15px;
  }
}
/* Responsive styling */
@media (max-width: 768px) {
  .price-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
  }
  .price-left,
  .price-right {
    width: 100%;
    max-width: 100%;
  }
  .price-left {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .price-right {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    padding: 30px;
  }
  .price-title {
    font-size: 24px;
  }
  .price-item {
    font-size: 14px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .price-description,
  .price-amount {
    width: 100%;
    text-align: left;
  }
  .price-footer2 {
    margin-bottom: 30px;
  }
  .price-reservation-link {
    font-size: 14px;
    padding: 8px 0px;
  }
}
@media (max-width: 480px) {
  .price-title {
    padding-top: 20px;
    font-size: 20px;
    padding-bottom: 0px;
  }
  .price-container {
    margin-top: 20px;
    padding: 0px;
  }
  .price-footer-text {
    font-size: 14px;
  }
  .price-reservation-link {
    font-size: 14px;
    padding: 5px 0px;
  }
}
.swiper {
  width: 50%;
  padding-top: 250px !important;
  padding-bottom: 70px !important;
  height: 100%;
}

.swiper-container {
  padding-bottom: 150px !important;
  height: 100%;
}

.slide-content img {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.swiper-container {
  position: relative;
}

.image-container2 {
  width: 60%;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.image-container2 .swiper {
  width: 100%;
  height: 100%;
}

.imagecontainer {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 60%;
  overflow: hidden;
}

.image-container2 .swiper-wrapper {
  width: 100%;
  height: 100%;
}

.image-container2 .swiper-slide {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  opacity: 0.5;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  pointer-events: auto;
}

.swiper-slide-active {
  opacity: 1;
}

.image-container2 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.swiper {
  overflow: visible !important;
}

.caption {
  margin-top: 10px;
  text-align: left;
  font-size: 30px;
  color: #4C2937;
  font-family: "mikela";
  text-transform: uppercase;
  opacity: 0;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.swiper-slide-active .caption {
  opacity: 1;
}

.swiper-arrows {
  position: absolute;
  bottom: 170px;
  right: 1px;
  z-index: 5;
}

.sliderlogo {
  z-index: 5;
  position: absolute !important;
  top: -100px !important;
  right: -20px !important;
  width: 80px !important;
  height: auto !important;
  overflow: visible !important;
  opacity: 0 !important;
  -webkit-transition: opacity 0.3s ease-in-out !important;
  transition: opacity 0.3s ease-in-out !important;
}

.swiper-slide-active .sliderlogo {
  opacity: 1 !important;
}

.swiper-arrows-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 20px;
}

.swiper-arrows-prev, .swiper-arrows-next {
  padding: 10px 0;
  cursor: pointer;
  position: relative;
}

.swiper-arrows-prev:before, .swiper-arrows-next:before {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  background: #4C2937;
}

.swiper-arrows-prev:after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-left: 1px solid #4C2937;
  border-bottom: 1px solid #4C2937;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translate(0, -50%) rotate(45deg);
      -ms-transform: translate(0, -50%) rotate(45deg);
          transform: translate(0, -50%) rotate(45deg);
}

.swiper-arrows-next:after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-right: 1px solid #4C2937;
  border-bottom: 1px solid #4C2937;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translate(0, -50%) rotate(-45deg);
      -ms-transform: translate(0, -50%) rotate(-45deg);
          transform: translate(0, -50%) rotate(-45deg);
}

/* Voor schermbreedtes kleiner dan 1024px */
@media (max-width: 1024px) {
  .sliderlogo {
    top: -60px !important; /* Verplaats iets hoger op tablets */
    width: 60px !important; /* Iets kleinere grootte op tablets */
  }
  .swiper {
    width: 80%;
    padding-top: 100px !important;
    padding-bottom: 50px !important;
  }
  .swiper-container {
    padding-bottom: 120px !important;
  }
  .image-container2 {
    width: 90%;
  }
  .swiper-arrows {
    bottom: 120px;
    right: 40px;
  }
  .swiper-arrows-prev:before, .swiper-arrows-next:before {
    width: 25px;
  }
  .swiper-arrows-prev:after, .swiper-arrows-next:after {
    width: 5px;
    height: 5px;
  }
}
/* Voor schermbreedtes kleiner dan 768px */
@media (max-width: 768px) {
  .caption {
    font-size: 20px;
  }
  .sliderlogo {
    top: -50px !important; /* Verplaats hoger op mobiele apparaten */
    right: 5px !important; /* Aanpassen van positie */
    width: 50px !important; /* Nog kleinere grootte */
  }
  .swiper {
    width: 90%;
    padding-top: 80px !important;
    padding-bottom: 40px !important;
  }
  .swiper-container {
    padding-bottom: 100px !important;
  }
  .image-container2 {
    width: 100%;
  }
  .swiper-arrows {
    bottom: 100px;
    right: 30px;
  }
  .swiper-arrows-prev:before, .swiper-arrows-next:before {
    width: 20px;
  }
  .swiper-arrows-prev:after, .swiper-arrows-next:after {
    width: 4px;
    height: 4px;
  }
}
/* Voor schermbreedtes kleiner dan 480px */
@media (max-width: 480px) {
  .caption {
    font-size: 14px;
  }
  .sliderlogo {
    top: -40px !important; /* Verplaats nog hoger op kleine schermen */
    right: 10px !important; /* Nog wat positie aanpassen */
    width: 40px !important; /* Kleinste formaat */
  }
  .swiper {
    width: 90%;
    padding-top: 60px !important;
    overflow: hidden !important;
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .swiper-container {
    padding-bottom: 80px !important;
  }
  .swiper-arrows {
    bottom: 80px;
    right: 20px;
  }
  .swiper-arrows-prev:before, .swiper-arrows-next:before {
    width: 15px;
  }
  .swiper-arrows-prev:after, .swiper-arrows-next:after {
    width: 3px;
    height: 3px;
  }
}
.moments {
  padding: 80px 100px;
  padding-bottom: 200px;
  text-align: center;
  background-color: #EDE3DE;
}

.moments-title {
  font-family: "Mikela", serif;
  font-size: 30px;
  font-weight: 400;
  color: #4C2937;
  text-transform: uppercase !important;
  margin-bottom: 150px;
  margin-top: 100px;
}

.moments-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.moment-item {
  width: calc(25% - 30px);
  padding: 10px;
  text-align: left; /* Zorg ervoor dat alle inhoud van een item links uitlijnt */
}

.moment-image {
  text-align: left; /* Lijn de afbeelding links uit */
}

.moment-image img {
  width: 100%; /* Pas de breedte aan naar 100% van de container */
  height: auto;
}

.moment-title {
  font-family: "mikela";
  font-size: 30px;
  color: #4C2937;
  font-weight: 400;
  margin: 30px 0;
  line-height: 1.1;
  text-transform: uppercase !important;
  text-align: left;
}

.moment-text {
  font-family: "Barlow";
  font-size: 14px;
  color: #4C2937;
  text-align: left;
}

.moment-link {
  text-transform: uppercase;
  background: transparent;
  border: none;
  font-family: "Barlow", sans-serif;
  font-size: 14px;
  text-decoration: none;
  color: #4C2937;
  margin-top: 50px;
  -webkit-transition: background-color 0.3s ease, -webkit-transform 0.3s ease;
  transition: background-color 0.3s ease, -webkit-transform 0.3s ease;
  transition: background-color 0.3s ease, transform 0.3s ease;
  transition: background-color 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
}

/* Hover-effect voor de knop */
.moment-link:hover {
  color: #4C2937;
}

/* SVG-stijl (standaard) */
.moment-link svg {
  margin-left: 10px;
  fill: #4C2937;
  -webkit-transition: fill 0.3s ease, -webkit-transform 0.3s ease;
  transition: fill 0.3s ease, -webkit-transform 0.3s ease;
  transition: transform 0.3s ease, fill 0.3s ease;
  transition: transform 0.3s ease, fill 0.3s ease, -webkit-transform 0.3s ease;
}

/* SVG-stijl tijdens hover */
.moment-link:hover svg {
  fill: #fff; /* Verander de kleur naar wit */
  -webkit-transform: translateX(5px);
      -ms-transform: translateX(5px);
          transform: translateX(5px); /* Lichte animatie naar rechts */
}

/* Tablets (max-width: 1024px) */
@media (max-width: 1024px) {
  .moments {
    padding: 40px 20px;
  }
  .moments-title {
    font-size: 26px;
    margin-top: 40px;
    margin-bottom: 80px;
  }
  .moments-grid {
    gap: 15px; /* Verminder de ruimte tussen grid items */
  }
  .moment-item {
    width: calc(50% - 20px); /* Breder per item op tablets */
  }
  .moment-title {
    font-size: 24px;
  }
  .moment-text {
    font-size: 13px;
  }
  .moment-link {
    font-size: 13px;
  }
}
/* Responsiveness voor tablets en kleinere schermen */
@media (max-width: 768px) {
  .moments {
    padding: 30px 30px;
    text-align: center;
    background-color: #EDE3DE;
  }
  .moments-grid {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; /* Zorg dat items onder elkaar vallen als er geen ruimte is */
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; /* Spatie tussen items */
  }
  .moment-item {
    width: calc(50% - 20px); /* Items nemen 50% van de breedte in */
  }
  .moments-title {
    margin-bottom: 30px;
    margin-top: 0px;
    font-size: 24px; /* Kleinere tekst voor titels */
  }
  .moment-text {
    font-size: 13px; /* Tekst wordt iets kleiner */
  }
  .moment-link {
    font-size: 14px; /* Linktekst wordt iets kleiner */
  }
}
/* Responsiveness voor mobiele schermen */
@media (max-width: 480px) {
  .moments-grid {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start; /* Items centreren op kleinste schermen */
  }
  .moment-item {
    width: 100%; /* Items nemen volledige breedte in */
    margin-bottom: 20px; /* Extra ruimte tussen items */
  }
  .moment-title {
    font-size: 20px; /* Nog kleinere titels op mobiele schermen */
  }
  .moment-text {
    font-size: 12px; /* Tekst wordt nog compacter */
  }
  .moment-link {
    padding: 0;
    font-size: 14px; /* Linktekst aanpassen voor mobiele weergave */
    margin-top: 20px;
  }
  .moment-image img {
    max-width: 100%; /* Afbeeldingen worden kleiner op mobiel */
    margin: 0 auto; /* Center de afbeelding */
    display: block; /* Zorg dat het een blok is voor betere layout */
  }
  .moment-item {
    padding: 0px;
  }
}
.contact-info {
  width: 100%;
  padding: 100px;
}

.contact-sectie {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.contact-left {
  width: 30%;
}

.contact-right {
  width: 70%;
}

.contact-info h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

.contact-info p {
  font-family: "barlow";
  text-transform: uppercase;
  color: #4C2937;
  font-size: 18px;
  padding-bottom: 0px !important;
}

.contact-info a {
  color: #4C2937;
  text-decoration: none;
}

.contact-info a:hover {
  text-decoration: underline;
}

.thank-you-message {
  font-size: 1.2em;
  color: #4C2937;
  font-family: "Barlow";
  margin-top: 20px;
  text-align: left;
}

.contact-address {
  margin-bottom: 20px;
}

.contacten {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* Maak het een flex-container */
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; /* Rangschik items verticaal */
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; /* Centreer de inhoud verticaal */
  text-align: start;
  position: relative; /* Zorgt ervoor dat je absolute positionering kunt gebruiken */
  padding-top: 40px; /* Optionele ruimte bovenaan */
}

/* Algemene aanpassingen voor kleinere schermen */
@media (max-width: 1024px) {
  .contact-sectie {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; /* Zet secties onder elkaar */
  }
  .contact-left, .contact-right {
    width: 100%; /* Laat beide secties de volledige breedte innemen */
  }
  .contact-left {
    margin-bottom: 40px; /* Ruimte tussen de secties */
  }
}
/* Specifieke aanpassingen voor tablets */
@media (max-width: 768px) {
  .contact-info {
    padding: 60px; /* Verminder de padding voor kleinere schermen */
  }
  .contact-info h2 {
    font-size: 20px; /* Verklein de titelgrootte */
  }
  .contact-info p {
    font-size: 14px; /* Maak de tekst compacter */
  }
}
/* Specifieke aanpassingen voor mobiele apparaten */
@media (max-width: 480px) {
  .contact-info {
    padding: 30px; /* Verminder de padding verder voor mobiele apparaten */
  }
  .contact-info h2 {
    font-size: 18px; /* Pas de titel aan voor kleinere schermen */
  }
  .contact-info p {
    font-size: 12px; /* Tekst op mobiele apparaten nog compacter */
  }
  .thank-you-message {
    font-size: 14px; /* Verklein de bedankboodschap */
  }
  .contacten {
    padding-top: 20px; /* Minder ruimte boven de contactinformatie */
  }
  .contact-address {
    margin-bottom: 10px; /* Verminder de ruimte onder adressen */
  }
}
.modal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 2000;
  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.hidden {
  visibility: hidden;
}

.modal-title {
  font-family: "mikela" !important;
  font-size: 40px;
  margin: 15px 0;
  margin-bottom: 50px;
  text-transform: uppercase;
  text-align: left;
  color: white;
  display: block !important;
}

.modal-content {
  position: relative;
  background: #4C2937;
  font-family: "barlow";
  padding: 70px;
  color: white;
  max-width: 600px;
  width: 90%; /* Zorgt dat de modal op kleine schermen smaller wordt */
  text-align: left;
  border-radius: 8px;
  font-size: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.modal h3 {
  font-family: "mikela" !important;
  font-size: 40px;
  margin: 15px 0;
  margin-bottom: 50px;
  text-transform: uppercase;
  text-align: left;
}

.modal a {
  color: white;
  text-decoration: none;
}

.modal-close {
  position: absolute;
  top: 5px; /* Zorg voor ruimte aan de bovenkant */
  right: 15px;
  font-size: 30px; /* Past de grootte aan voor kleinere schermen */
  cursor: pointer;
  color: white;
  background: transparent;
  border: none;
}

.modal-close:hover {
  color: #ddd;
}

/* Responsive Aanpassingen */
@media (max-width: 768px) {
  .modal-content {
    padding: 40px; /* Minder padding voor tablets */
    font-size: 14px; /* Kleiner lettertype voor tablets */
  }
  .modal h3 {
    font-size: 30px; /* Kleiner lettertype voor titels op tablets */
  }
  .modal-close {
    font-size: 25px; /* Verkleint sluitknop voor tablets */
  }
}
@media (max-width: 480px) {
  .modal-content {
    padding: 20px; /* Minder padding voor smartphones */
    font-size: 14px; /* Nog kleiner lettertype voor smartphones */
  }
  .modal h3 {
    font-size: 24px; /* Past titelgrootte aan voor smartphones */
  }
  .modal-close {
    font-size: 20px; /* Verkleint sluitknop verder voor smartphones */
  }
}