.elementor-kit-6{--e-global-color-primary:#C0392B;--e-global-color-secondary:#8B3A3A;--e-global-color-text:#54595F;--e-global-color-accent:#61CE70;--e-global-color-dafb51c:#B22222;--e-global-color-5ecbbb4:#C0392B;--e-global-color-3812b77:#CD5C5C;--e-global-color-ba6baba:#D98880;--e-global-color-8ac8101:#E6B0AA;--e-global-color-53c632c:#F2D7D5;--e-global-color-32ccc5d:#FFFAF0;--e-global-color-4dcc309:#C0392B;--e-global-color-d101e06:#FFFFFF;--e-global-color-773aee9:#FFFFFF;--e-global-color-64100f9:#FFF4E8;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-ec952da-font-family:"Lora";background-color:#FFFAF0;font-family:"Raleway", Sans-serif;font-size:60px;font-weight:700;}.elementor-kit-6 e-page-transition{background-color:#F9F9F9;}.elementor-kit-6 h2{font-family:"Raleway", Sans-serif;font-size:48px;}.elementor-kit-6 h3{font-family:"Raleway", Sans-serif;font-size:36px;}.elementor-kit-6 h4{font-family:"Raleway", Sans-serif;font-size:24px;}.elementor-kit-6 h5{font-family:"Raleway", Sans-serif;font-size:18px;}.elementor-kit-6 h6{font-family:"Raleway", Sans-serif;font-size:14px;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-family:"Raleway", Sans-serif;font-size:18px;}.elementor-kit-6 label{font-family:"Raleway", Sans-serif;font-size:24px;font-weight:400;}.elementor-kit-6 input:not([type="button"]):not([type="submit"]),.elementor-kit-6 textarea,.elementor-kit-6 .elementor-field-textual{font-family:"Raleway", Sans-serif;font-size:24px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//*************************
 *  01 — ANIMATIES (SLIDE, FADE, ZOOM, ROTATE, BOUNCE, TYPE)
 *************************

/* === SLIDE EFFECTEN === */
.slide-right {
  opacity: 0;
  transform: translateX(100vw);
  animation: slideInRightCustom 6s ease forwards;
}
@keyframes slideInRightCustom {
  from { opacity: 0; transform: translateX(100vw); }
  to   { opacity: 1; transform: translateX(0); }
}

.slide-left {
  opacity: 0;
  transform: translateX(-100vw);
  animation: slideInLeftCustom 6s ease forwards;
}
@keyframes slideInLeftCustom {
  from { opacity: 0; transform: translateX(-100vw); }
  to   { opacity: 1; transform: translateX(0); }
}

.slide-bottom {
  opacity: 0;
  transform: translateY(100vh);
  animation: slideInBottomCustom 6s ease forwards;
}
@keyframes slideInBottomCustom {
  from { opacity: 0; transform: translateY(100vh); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === FADE EFFECT === */
.fade-in {
  opacity: 0;
  animation: fadeInCustom 6s ease forwards;
}
@keyframes fadeInCustom {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* === ZOOM EFFECT === */
.zoom-in {
  opacity: 0;
  transform: scale(0.5);
  animation: zoomInCustom 6s ease forwards;
}
@keyframes zoomInCustom {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

/* === ROTATE EFFECT === */
.rotate-in {
  opacity: 0;
  transform: rotate(-90deg);
  animation: rotateInCustom 6s ease forwards;
}
@keyframes rotateInCustom {
  from { opacity: 0; transform: rotate(-90deg); }
  to   { opacity: 1; transform: rotate(0deg); }
}

/* === KLEURFADE EFFECT === */
.color-fade {
  opacity: 0;
  color: #999;
  animation: colorFadeCustom 6s ease forwards;
}
@keyframes colorFadeCustom {
  from { opacity: 0; color: #999; }
  to   { opacity: 1; color: #000; }
}

/* === BOUNCE EFFECT === */
.bounce-in {
  opacity: 0;
  animation: bounceInCustom 2s ease forwards;
}
@keyframes bounceInCustom {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.05); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* === PULSE EFFECT === */
.pulse {
  animation: pulseCustom 2s ease infinite;
}
@keyframes pulseCustom {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* === TYPEWRITER EFFECT === */
.typewriter {
  overflow: hidden;
  border-right: .15em solid #000;
  white-space: nowrap;
  animation: typing 4s steps(30, end) forwards,
             blink-caret .75s step-end infinite;
}
@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes blink-caret {
  from, to { border-color: transparent; }
  50%      { border-color: black; }
}



/************************************************************
 *  02 — GLOBALE LAYOUT & ACHTERGRONDEN
 ************************************************************/

body {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #EDE3D4; /* Buitenrandkleur */
}

.elementor-section {
    background-color: #FFFAF0; /* Site-achtergrondkleur */
}



/************************************************************
 *  03 — FULLSCREEN + SCROLL SYSTEM
 ************************************************************/

html, body {
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body.elementor-page {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.elementor {
    flex: 1;
    min-height: 100dvh;
}



/************************************************************
 *  04 — PAGINA TRANSITIES (FADE-IN / FADE-OUT)
 ************************************************************/

body.fade-out {
    opacity: 0;
    transition: opacity 1.5s ease;
}

body.page-loaded {
    opacity: 1;
}



/************************************************************
 *  05 — VERHALENPAGINA LAYOUT
 ************************************************************/

.has-verhalenpagina {
  max-width: 1440px;
  margin: 0 auto;
}

/* HEADER */
.has-verhalenpagina .vp-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 0;
}

/* GRID */
.has-verhalenpagina .vp-body {
  display: grid;
  grid-template-columns: 350px 1fr 350px;
  gap: 0;
}

/* STICKY ZIJKANTEN */
.has-verhalenpagina .vp-left,
.has-verhalenpagina .vp-right {
  height: 512px;
  position: sticky;
  top: 0;
  padding: 20px;
  box-sizing: border-box;
}

/* STORY CONTAINER */
.has-verhalenpagina .vp-story {
  width: 740px;
  height: 100vh;
  overflow: hidden;
  position: relative;
  padding: 20px;
  box-sizing: border-box;
}

/* INNER SCROLL */
.has-verhalenpagina .vp-story-inner {
  overflow-y: auto;
  height: 100%;
  scroll-behavior: smooth;
}

/* SPEED SLIDER */
.has-verhalenpagina .vp-speed-control {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  text-align: center;
}

.has-verhalenpagina #vp-speed-slider {
  width: 100%;
}

/* FOOTER */
.has-verhalenpagina .vp-footer {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}



/************************************************************
 *  06 — KNOPPEN & UI ELEMENTEN
 ************************************************************/

.rw-arrow-button {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 20px 40px;
  background-color: #C0392B;
  color: #FFFAF0;
  text-decoration: none;
  font-family: "Raleway", sans-serif;
  font-size: 16px;
  line-height: 18px;
  border-radius: 999px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.rw-arrow-button:hover {
  background-color: #fffaf0;
  transform: translateY(-1px);
}

.rw-arrow-button .arrow {
  font-size: 24px;
  line-height: 1;
}



/************************************************************
 *  07 — ACCESSIBILITY FIXES
 ************************************************************/

*:focus,
*:focus-visible,
button:focus,
button:focus-visible,
a:focus,
a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}/* End custom CSS */