.elementor-29 .elementor-element.elementor-element-4ed9afe{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;--padding-top:300px;--padding-bottom:300px;--padding-left:0px;--padding-right:0px;}.elementor-29 .elementor-element.elementor-element-4ed9afe:not(.elementor-motion-effects-element-type-background), .elementor-29 .elementor-element.elementor-element-4ed9afe > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#02010100;}.elementor-29 .elementor-element.elementor-element-4ed9afe:hover{background-color:#02010100;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );}.elementor-29 .elementor-element.elementor-element-16a2332{width:var( --container-widget-width, 30% );max-width:30%;--container-widget-width:30%;--container-widget-flex-grow:0;}.elementor-29 .elementor-element.elementor-element-10e8f5f{--display:flex;}.elementor-29 .elementor-element.elementor-element-76e4dd0 .elementor-button{background-color:#2AB34B00;}.elementor-29 .elementor-element.elementor-element-76e4dd0{width:initial;max-width:initial;}.elementor-29 .elementor-element.elementor-element-6ceb007 .elementor-button{background-color:#2AB34B00;}.elementor-29 .elementor-element.elementor-element-8188b39 .elementor-button{font-family:"Segoe UI", Sans-serif;}.elementor-29 .elementor-element.elementor-element-6a874f0 .elementor-button{font-family:"Segoe UI", Sans-serif;}.elementor-29 .elementor-element.elementor-element-0c3ce37{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:200px;--padding-bottom:200px;--padding-left:0px;--padding-right:0px;}.elementor-29 .elementor-element.elementor-element-0c3ce37:not(.elementor-motion-effects-element-type-background), .elementor-29 .elementor-element.elementor-element-0c3ce37 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://jordy2.wp-websites.nl/wp-content/uploads/2023/02/logo-05.svg");background-position:bottom center;background-repeat:no-repeat;background-size:26% auto;}.elementor-widget-heading .elementor-heading-title{color:var( --e-global-color-primary );}.elementor-widget-text-editor{color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-29 .elementor-element.elementor-element-fe10ca2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:200px;--padding-bottom:200px;--padding-left:0px;--padding-right:0px;}.elementor-29 .elementor-element.elementor-element-fe10ca2:not(.elementor-motion-effects-element-type-background), .elementor-29 .elementor-element.elementor-element-fe10ca2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://jordy2.wp-websites.nl/wp-content/uploads/2023/02/logo-05.svg");background-position:bottom center;background-repeat:no-repeat;background-size:26% auto;}.elementor-29 .elementor-element.elementor-element-84f4f24{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:200px;--padding-bottom:200px;--padding-left:0px;--padding-right:0px;}.elementor-29 .elementor-element.elementor-element-84f4f24:not(.elementor-motion-effects-element-type-background), .elementor-29 .elementor-element.elementor-element-84f4f24 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://jordy2.wp-websites.nl/wp-content/uploads/2023/02/logo-05.svg");background-position:bottom center;background-repeat:no-repeat;background-size:26% auto;}.elementor-29 .elementor-element.elementor-element-86ff128{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:200px;--padding-bottom:200px;--padding-left:0px;--padding-right:0px;}.elementor-29 .elementor-element.elementor-element-86ff128:not(.elementor-motion-effects-element-type-background), .elementor-29 .elementor-element.elementor-element-86ff128 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://jordy2.wp-websites.nl/wp-content/uploads/2023/02/logo-05.svg");background-position:bottom center;background-repeat:no-repeat;background-size:26% auto;}@media(min-width:481px){.elementor-29 .elementor-element.elementor-element-4ed9afe{--content-width:1140px;}}/* Start custom CSS for button, class: .elementor-element-16a2332 */.cssbuttons-io {
  position: relative;
  font-family: inherit;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.05em;
  border-radius: 0.8em;
  cursor: pointer;
  border: none;
  background: linear-gradient(to right, #8e2de2, #4a00e0);
  color: ghostwhite;
  overflow: hidden;
}

.cssbuttons-io svg {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5em;
}

.cssbuttons-io span {
  position: relative;
  z-index: 10;
  transition: color 0.4s;
  display: inline-flex;
  align-items: center;
  padding: 0.8em 1.2em 0.8em 1.05em;
}

.cssbuttons-io::before,
.cssbuttons-io::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.cssbuttons-io::before {
  content: "";
  background: #000;
  width: 120%;
  left: -10%;
  transform: skew(30deg);
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}

.cssbuttons-io:hover::before {
  transform: translate3d(100%, 0, 0);
}

.cssbuttons-io:active {
  transform: scale(0.95);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-76e4dd0 */.cssbuttons-io {
  position: relative;
  font-family: inherit;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.05em;
  border-radius: 0.2em;
  cursor: pointer;
  border: none;
  background: linear-gradient(to right, #8e2de2, #4a00e0);
  color: ghostwhite;
  overflow: hidden;
}

.cssbuttons-io svg {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5em;
}

.cssbuttons-io span {
  position: relative;
  z-index: 10;
  transition: color 0.4s;
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.2em 0.2em 0.2em;
}

.cssbuttons-io::before,
.cssbuttons-io::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.cssbuttons-io::before {
  content: "";
  background: #000;
  width: 120%;
  left: -10%;
  transform: skew(30deg);
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}

.cssbuttons-io:hover::before {
  transform: translate3d(100%, 0, 0);
}

.cssbuttons-io:active {
  transform: scale(0.95);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-4d892d9 */.elementor-29 .elementor-element.elementor-element-4d892d9 .elementor-button {
    background: linear-gradient(to right, #000000 50%, #ffffff 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    transition: background-position 0.5s ease-out, color 0.5s ease-out;
    color: #ffffff; /* Tekstkleur in normale stand */
    border: 1px solid #000000; /* Optioneel: rand om de witte knop zichtbaar te houden */
}

.elementor-29 .elementor-element.elementor-element-4d892d9 .elementor-button:hover {
    background-position: right bottom;
    color: #000000; /* Tekstkleur verandert naar zwart als de achtergrond wit wordt */
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-d1d1c90 */.elementor-29 .elementor-element.elementor-element-d1d1c90 .elementor-button {
    background: linear-gradient(to right, #ffffff 50%, #000000 50%); /* Kleuren in het verloop omgedraaid voor de juiste start */
    background-size: 200% 100%;
    background-position: right bottom; 
    transition: background-position 0.5s ease-out, color 0.5s ease-out;
    color: #ffffff !important; /* Witte tekst op de zwarte achtergrond */
    border: 1px solid #000000; 
}

.elementor-29 .elementor-element.elementor-element-d1d1c90 .elementor-button:hover {
    background-position: left bottom; 
    color: #000000 !important; /* Zwarte tekst zodra de achtergrond wit wordt */
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-62e27f8 */.cssbuttons-io-button {
  background: #a370f0;
  color: white;
  font-family: inherit;
  padding: 0.35em;
  padding-left: 1.2em;
  font-size: 17px;
  font-weight: 500;
  border-radius: 0.9em;
  border: none;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  box-shadow: inset 0 0 1.6em -0.6em #714da6;
  overflow: hidden;
  position: relative;
  height: 2.8em;
  padding-right: 3.3em;
  cursor: pointer;
}

.cssbuttons-io-button .icon {
  background: white;
  margin-left: 1em;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.2em;
  width: 2.2em;
  border-radius: 0.7em;
  box-shadow: 0.1em 0.1em 0.6em 0.2em #7b52b9;
  right: 0.3em;
  transition: all 0.3s;
}

.cssbuttons-io-button:hover .icon {
  width: calc(100% - 0.6em);
}

.cssbuttons-io-button .icon svg {
  width: 1.1em;
  transition: transform 0.3s;
  color: #7b52b9;
}

.cssbuttons-io-button:hover .icon svg {
  transform: translateX(0.1em);
}

.cssbuttons-io-button:active .icon {
  transform: scale(0.95);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-6ceb007 *//* 1. De basis van de Elementor knop volledig fixeren */
.elementor-29 .elementor-element.elementor-element-6ceb007.button .elementor-button {
  width: 50px !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  border-radius: 50% !important;
  background-color: rgb(20, 20, 20) !important;
  border: none !important;
  font-weight: 600;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0px 0px 0px 4px rgba(180, 160, 255, 0.253);
  cursor: pointer;
  transition: all 0.3s ease-in-out !important;
  overflow: hidden !important;
  padding: 0 !important; 
  position: relative !important;
}

/* 2. De interne Elementor wrappers dwingen om NOOIT groter te worden */
.elementor-29 .elementor-element.elementor-element-6ceb007.button .elementor-button-content-wrapper,
.elementor-29 .elementor-element.elementor-element-6ceb007.button .elementor-button-text {
  height: 50px !important;
  max-height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3. Het Elementor Icoon .elementor-29 .elementor-element.elementor-element-6ceb007 */
.elementor-29 .elementor-element.elementor-element-6ceb007.button .elementor-button-icon {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out !important;
}

/* Zorgt dat het SVG pijl-icoon wit is */
.elementor-29 .elementor-element.elementor-element-6ceb007.button .elementor-button-icon svg {
  width: 16px !important;
  height: 16px !important;
  fill: white !important;
}

/* 4. Hover stand van de knop (uittrekken naar ovaal) */
.elementor-29 .elementor-element.elementor-element-6ceb007.button .elementor-button:hover {
  width: 140px !important;
  border-radius: 50px !important;
  background-color: rgb(181, 160, 255) !important;
}

/* 5. Hover stand van het icoon (Schiet omhoog én wordt direct onzichtbaar) */
.elementor-29 .elementor-element.elementor-element-6ceb007.button .elementor-button:hover .elementor-button-icon {
  transform: translateY(-150px) !important;
  opacity: 0 !important;
}

/* 6. De verborgen tekst "Back to Top" absoluut buiten de flex-structuur plaatsen */
.elementor-29 .elementor-element.elementor-element-6ceb007.button .elementor-button::before {
  content: "Back to Top";
  position: absolute;
  /* Exact gecentreerd op de x-as en ver onder de knop klaarzetten */
  left: 50%;
  top: 150%;
  transform: translate(-50%, -50%); 
  color: white;
  font-size: 13px;
  font-family: inherit;
  white-space: nowrap; 
  transition: top 0.3s ease-in-out, opacity 0.3s ease-in-out;
  opacity: 0;
  z-index: 10;
}

/* 7. Hover stand van de tekst (Schuift exact naar het absolute midden) */
.elementor-29 .elementor-element.elementor-element-6ceb007.button .elementor-button:hover::before {
  opacity: 1;
  top: 50%; /* Schuift exact naar het exacte verticale middelpunt van 50px */
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-7266db8 *//* From Uiverse.io by Pradeepsaranbishnoi */ 
.voltage-button {
  position: relative;
}

.voltage-button button {
  color: white;
  background: #0D1127;
  padding: 1rem 3rem 1rem 3rem;
  border-radius: 5rem;
  border: 5px solid #5978F3;
  font-size: 1.2rem;
  line-height: 1em;
  letter-spacing: 0.075em;
  transition: background 0.3s;
}

.voltage-button button:hover {
  cursor: pointer;
  background: #0F1C53;
}

.voltage-button button:hover + svg, .voltage-button button:hover + svg + .dots {
  opacity: 1;
}

.voltage-button svg {
  display: block;
  position: absolute;
  top: -0.75em;
  left: -0.25em;
  width: calc(100% + 0.5em);
  height: calc(100% + 1.5em);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  transition-delay: 0.1s;
}

.voltage-button svg path {
  stroke-dasharray: 100;
  filter: url("#glow");
}

.voltage-button svg path.line-1 {
  stroke: #f6de8d;
  stroke-dashoffset: 0;
  animation: spark-1 3s linear infinite;
}

.voltage-button svg path.line-2 {
  stroke: #6bfeff;
  stroke-dashoffset: 500;
  animation: spark-2 3s linear infinite;
}

.voltage-button .dots {
  opacity: 0;
  transition: opacity 0.3s;
  transition-delay: 0.4s;
}

.voltage-button .dots .dot {
  width: 1rem;
  height: 1rem;
  background: white;
  border-radius: 100%;
  position: absolute;
  opacity: 0;
}

.voltage-button .dots .dot-1 {
  top: 0;
  left: 20%;
  animation: fly-up 3s linear infinite;
}

.voltage-button .dots .dot-2 {
  top: 0;
  left: 55%;
  animation: fly-up 3s linear infinite;
  animation-delay: 0.5s;
}

.voltage-button .dots .dot-3 {
  top: 0;
  left: 80%;
  animation: fly-up 3s linear infinite;
  animation-delay: 1s;
}

.voltage-button .dots .dot-4 {
  bottom: 0;
  left: 30%;
  animation: fly-down 3s linear infinite;
  animation-delay: 2.5s;
}

.voltage-button .dots .dot-5 {
  bottom: 0;
  left: 65%;
  animation: fly-down 3s linear infinite;
  animation-delay: 1.5s;
}

@keyframes spark-1 {
  to {
    stroke-dashoffset: -1000;
  }
}

@keyframes spark-2 {
  to {
    stroke-dashoffset: -500;
  }
}

@keyframes fly-up {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.2);
  }

  5% {
    opacity: 1;
    transform: translateY(-1.5rem) scale(0.4);
  }

  10%, 100% {
    opacity: 0;
    transform: translateY(-3rem) scale(0.2);
  }
}

@keyframes fly-down {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.2);
  }

  5% {
    opacity: 1;
    transform: translateY(1.5rem) scale(0.4);
  }

  10%, 100% {
    opacity: 0;
    transform: translateY(3rem) scale(0.2);
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-df7874c *//* De basis container */
.elementor-29 .elementor-element.elementor-element-df7874c .bliksem-button-container {
  position: relative;
  display: inline-block;
  padding: 15px; /* Geeft de bliksem de ruimte om buiten de knop te treden */
}

/* De daadwerkelijke knop styling */
.elementor-29 .elementor-element.elementor-element-df7874c .bliksem-knop {
  color: #ffffff;
  background: #090b15;
  padding: 1rem 3rem;
  border-radius: 5rem;
  border: 3px solid #4361ee;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  position: relative;
  z-index: 3;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(67, 97, 238, 0.3);
}

/* Knop verandering bij hover */
.elementor-29 .elementor-element.elementor-element-df7874c .bliksem-knop:hover {
  background: #0f1123;
  border-color: #4cc9f0;
  box-shadow: 0 0 20px rgba(76, 201, 240, 0.6);
  text-shadow: 0 0 5px #fff;
}

/* De verborgen bliksem-lagen */
.elementor-29 .elementor-element.elementor-element-df7874c .bliksem-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen; /* Zorgt dat alleen de felle stroomstoten zichtbaar worden */
  background-size: 100% 100%;
  transition: opacity 0.15s ease;
}

/* Laag 1: Horizontale felle stroomontladingen */
.elementor-29 .elementor-element.elementor-element-df7874c .overlay-1 {
  background-image: url('https://postimg.cc'); 
}

/* Laag 2: Verticale en chaotische extra bliksems voor diepte (omgedraaid) */
.elementor-29 .elementor-element.elementor-element-df7874c .overlay-2 {
  background-image: url('https://postimg.cc');
  transform: scaleX(-1) rotate(180deg);
  filter: hue-rotate(45deg); /* Geeft een subtiel kleurverschil (paars/blauw) */
}

/* Activeer de bliksem bij hover + laat het high-speed flitsen */
.elementor-29 .elementor-element.elementor-element-df7874c .bliksem-button-container:hover .bliksem-effect {
  opacity: 1;
}
.elementor-29 .elementor-element.elementor-element-df7874c .bliksem-button-container:hover .overlay-1 {
  animation: bliksem-flits 0.12s linear infinite;
}
.elementor-29 .elementor-element.elementor-element-df7874c .bliksem-button-container:hover .overlay-2 {
  animation: bliksem-flits 0.08s linear infinite reverse;
}

/* De rondvliegende vonken */
.elementor-29 .elementor-element.elementor-element-df7874c .vonken-container {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: 0; z-index: 4;
}
.elementor-29 .elementor-element.elementor-element-df7874c .bliksem-button-container:hover .vonken-container { opacity: 1; }
.elementor-29 .elementor-element.elementor-element-df7874c .vonk {
  position: absolute; width: 4px; height: 4px;
  background: #4cc9f0; border-radius: 50%; box-shadow: 0 0 5px #fff;
}
.elementor-29 .elementor-element.elementor-element-df7874c .v1 { top: 20%; left: 20%; animation: vonk-vlieg-links 1.5s infinite; }
.elementor-29 .elementor-element.elementor-element-df7874c .v2 { top: 20%; right: 20%; animation: vonk-vlieg-rechts 1.2s infinite 0.3s; }
.elementor-29 .elementor-element.elementor-element-df7874c .v3 { bottom: 20%; left: 40%; animation: vonk-vlieg-links 1s infinite 0.6s; }
.elementor-29 .elementor-element.elementor-element-df7874c .v4 { bottom: 20%; right: 30%; animation: vonk-vlieg-rechts 1.4s infinite 0.1s; }

/* REACTIONAIRE ANIMATIES */
/* Dit bootsed het onvoorspelbare flitsen van echte elektriciteit na */
@keyframes bliksem-flits {
  0% { opacity: 0.4; transform: scale(1); }
  20% { opacity: 1; transform: scale(1.03) skew(1deg); }
  40% { opacity: 0.2; transform: scale(0.98); }
  60% { opacity: 0.9; transform: scale(1.01) skew(-1deg); }
  80% { opacity: 0.5; transform: scale(0.99); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes vonk-vlieg-links {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(-30px, -30px) scale(0.2); opacity: 0; }
}
@keyframes vonk-vlieg-rechts {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(30px, 30px) scale(0.2); opacity: 0; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0babaae *//* 1. Basis van de container (zorgt dat de schuine bliksem ver buiten de knop mag treden) */
.elementor-29 .elementor-element.elementor-element-0babaae .bliksem-wrapper {
  position: relative;
  display: inline-block;
  padding: 100px 140px; /* Extra ruimte rondom gegeven voor de trage, lange inslag */
}

/* 2. De knop zelf (Donker met een bijpassende gele rand) */
.elementor-29 .elementor-element.elementor-element-0babaae .html-bliksem-knop {
  position: relative;
  width: 250px; 
  height: 60px;
  background-color: #0b0e1a;
  border: 3px solid #ffdf00; /* Felle gele rand */
  border-radius: 50px;
  cursor: pointer;
  overflow: visible !important; /* Zorgt dat de bliksem buiten de knop mag treden */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, border-color 0.3s;
}

.elementor-29 .elementor-element.elementor-element-0babaae .html-bliksem-knop:hover {
  background-color: #080a14;
  border-color: #fffb00;
  box-shadow: 0 0 20px rgba(255, 223, 0, 0.4);
}

/* 3. De Tekst (Staat ALTIJD voor de bliksem) */
.elementor-29 .elementor-element.elementor-element-0babaae .knop-tekst {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 2; /* Dwingt de tekst naar de voorgrond */
  pointer-events: none;
}

/* 4. De Gigantische Gele Bliksemschicht (Gekanteld voor de richting Rechtsboven -> Linksonder) */
.elementor-29 .elementor-element.elementor-element-0babaae .bliksem-schicht {
  position: absolute;
  /* Startpositie: RECHTSBOVEN ver buiten de knop */
  top: -160px; 
  left: 120%;
  /* RICHTING: Gekanteld naar -35 graden zodat hij van rechtsboven naar linksonder wijst */
  transform: translateX(-50%) rotate(-35deg);
  width: 75px; 
  height: 190px; 
  background: #ffffff; /* Witte kern voor intensiteit */
  z-index: 1; /* Staat ACHTER de tekst, maar VOOR de achtergrond */
  pointer-events: none;
  opacity: 0;
  
  /* Messcherpe zigzag-bliksem met diepe tanden */
  clip-path: polygon(75% 0%, 20% 38%, 65% 44%, 10% 100%, 90% 48%, 45% 42%);
  /* Felle, intense gele neon-gloed */
  filter: drop-shadow(0 0 12px #ffdf00) drop-shadow(0 0 30px #ffa500);
}

/* 5. ACTIVEER DE BLIKSEM BIJ HOVER (Totale cyclus duurt 6 seconden) */
.elementor-29 .elementor-element.elementor-element-0babaae .html-bliksem-knop:hover .bliksem-schicht {
  /* Ingesteld op 6s. De reis is nu heel traag en loopt vloeiend (linear) */
  animation: bliksem-glijdt-traag 6s linear infinite;
}

/* 6. DE TRAGE DIAGONALE BLIKSEMANIMATIE (Van rechtsboven naar linksonder) */
@keyframes bliksem-glijdt-traag {
  0% {
    /* Startpositie rechtsboven */
    top: -160px;
    left: 120%;
    opacity: 0; /* Begint volledig onzichtbaar */
    transform: translateX(-50%) rotate(-35deg) scale(0.8); /* Iets kleiner bij opstarten */
  }
  20% {
    /* LANGZAAM ONTSTAAN: Na 1.2 seconde is hij halverwege de startbaan en rustig feller geworden */
    top: -100px;
    left: 95%;
    opacity: 1; /* Nu pas volledig zichtbaar en stabiel opgelicht */
    transform: translateX(-50%) rotate(-35deg) scale(1);
  }
  55% {
    /* REIS DOOR HET MIDDEN: Rond de 3.3 seconde passeert hij heel rustig het exacte midden achter de tekst langs */
    top: -30px;
    left: 45%;
    opacity: 1;
    /* Subtiele trilling tijdens het trage glijden om het levendig te houden */
    transform: translateX(-48%) rotate(-33deg) scale(1.05); 
  }
  57% {
    /* Vervolg van de trilling */
    transform: translateX(-52%) rotate(-37deg) scale(0.98);
  }
  80% {
    /* VOORBIJ LINKSONDER: Pas rond de 4.8 seconde verlaat de schicht de knop volledig aan de linksonderkant */
    top: 90px;
    left: -20%;
    opacity: 1; /* Blijft zichtbaar tot hij helemaal voorbij de knop is */
    transform: translateX(-50%) rotate(-35deg) scale(0.9);
  }
  85% {
    /* Vloeiende fade-out nadat hij de knop is gepasseerd */
    top: 120px;
    left: -35%;
    opacity: 0;
  }
  100% {
    /* Korte rustpauze van 1 seconde voordat de volgende schicht rechtsboven weer rustig ontstaat */
    top: 120px;
    left: -35%;
    opacity: 0;
  }
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-76c184c *//* 1. De basis van de Elementor-knop (Paars, strakke hoeken) */
.elementor-29 .elementor-element.elementor-element-76c184c.afgesneden-hoeken-knop .elementor-button {
  background-color: #6366f1 !important; /* De paarse basiskleur */
  border-radius: 12px !important;
  position: relative !important;
  overflow: visible !important;
  z-index: 1;
  
  /* BELANGRIJK: We zetten de start- en eindpunten van de clip-path alvast exact gelijk klaar */
  transition: clip-path 1.5s cubic-bezier(0.25, 1, 0.3, 1), background 1.5s cubic-bezier(0.25, 1, 0.3, 1) !important;
  
  /* Startstand: De knop is volledig rechthoekig met virtuele snijpunten op 0px */
  clip-path: polygon(0% 0%, calc(100% - 0px) 0%, 100% 0px, 100% 100%, 0px 100%, 0% calc(100% - 0px)) !important;
}

/* Zorgt dat de tekst stabiel op de voorgrond blijft staan */
.elementor-29 .elementor-element.elementor-element-76c184c.afgesneden-hoeken-knop .elementor-button-content-wrapper {
  position: relative !important;
  z-index: 5 !important;
}

/* 2. HOVER STAND: Het wegsnijden én het donkere ezelsoor gebeuren nu GEGARANDEERD in exact dezelfde milliseconde */
.elementor-29 .elementor-element.elementor-element-76c184c.afgesneden-hoeken-knop .elementor-button:hover {
  /* Snijdt de hoeken rechtsboven en linksonder heel traag 24px naar binnen weg */
  clip-path: polygon(0% 0%, calc(100% - 24px) 0%, 100% 24px, 100% 100%, 24px 100%, 0% calc(100% - 24px)) !important;
  
  /* Tegelijkertijd schuiven de donkerpaarse ezelsoortjes (#4338ca) mee op de overgang.
     De getallen 24px en 34px zorgen voor een zachte, afgeronde boekvouw-look */
  background: linear-gradient(225deg, transparent 24px, #4338ca 24px, #4338ca 34px, transparent 34px),
              linear-gradient(45deg, transparent 24px, #4338ca 24px, #4338ca 34px, transparent 34px),
              #6366f1 !important; /* De rest van de knop blijft paars */
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f8aa233 */.button {
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid #4f4f4f;
  border-radius: 4px;
  transition: all 0.2s ease-in;
  position: relative;
  overflow: hidden;
  font-size: 19px;
  cursor: pointer;
  color: black;
  z-index: 1;
}

.button:before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.button:after {
  content: "";
  position: absolute;
  left: 55%;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;
  width: 160%;
  height: 190%;
  background-color: #39bda7;
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.button:hover {
  color: #ffffff;
  border: 1px solid #39bda7;
}

.button:hover:before {
  top: -35%;
  background-color: #39bda7;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.button:hover:after {
  top: -45%;
  background-color: #39bda7;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-920908c *//* 1. De basis van de knop (Indigo blauw) */
.elementor-29 .elementor-element.elementor-element-920908c .uiverse-animatie-knop {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px 28px;
  background-color: #6366f1; /* bg-indigo-500 */
  color: #ffffff;
  font-size: 1rem;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
  font-family: inherit;
}

/* 2. De tekstlaag (zorgt dat de tekst altijd boven de animaties blijft) */
.elementor-29 .elementor-element.elementor-element-920908c .knop-tekst-vlak {
  position: relative;
  z-index: 10;
  width: 100%;
  text-align: left;
  transition: color 0.2s ease-in-out;
}

/* 3. Het grote vlak dat van links naar rechts schuift bij hover */
.elementor-29 .elementor-element.elementor-element-920908c .schuivend-vlak {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #4f46e5; /* bg-indigo-600 */
  border-radius: 6px;
  transform: translateX(-100%); /* Staat standaard links buiten de knop */
  transition: transform 0.5s ease-in-out;
  transition-delay: 0.2s; /* Het schuifeffect start een fractie later */
  z-index: 1;
}

/* Hover: schuif het vlak volledig over de knop */
.elementor-29 .elementor-element.elementor-element-920908c .uiverse-animatie-knop:hover .schuivend-vlak {
  transform: translateX(0);
}

/* 4. De hoekjes basis (Rechtsboven en Linksonder) */
.elementor-29 .elementor-element.elementor-element-920908c .hoekje {
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: #4338ca; /* bg-indigo-700 */
  border-radius: 4px;
  transition: all 0.5s ease-in-out;
  z-index: 2;
  overflow: hidden;
}

/* Het witte schuine vlakje binnenin het hoekje */
.elementor-29 .elementor-element.elementor-element-920908c .wit-snijvlak {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  transform: rotate(45deg) translate(50%, -50%);
  transform-origin: top right;
}

/* Specifieke positie Rechtsboven */
.elementor-29 .elementor-element.elementor-element-920908c .hoekje-rechtsboven {
  top: 0;
  right: 0;
}
/* Hover rechtsboven: schiet schuin omhoog uit het beeld */
.elementor-29 .elementor-element.elementor-element-920908c .uiverse-animatie-knop:hover .hoekje-rechtsboven {
  margin-right: -16px;
  margin-top: -16px;
}

/* Specifieke positie Linksonder */
.elementor-29 .elementor-element.elementor-element-920908c .hoekje-linksonder {
  bottom: 0;
  left: 0;
  transform: rotate(180deg);
}
/* Hover linksonder: schiet schuin omlaag uit het beeld */
.elementor-29 .elementor-element.elementor-element-920908c .uiverse-animatie-knop:hover .hoekje-linksonder {
  margin-left: -16px;
  margin-mb: -16px; /* Bootst group-hover:-mb-4 na */
  bottom: -16px;
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8b5ec03 *//* 1. De basis van de Elementor-knop overschrijven */
.elementor-29 .elementor-element.elementor-element-8b5ec03.bubbel-animatie-knop .elementor-button {
  display: inline-block !important;
  padding: 12px 24px !important;
  border: 1px solid #4f4f4f !important;
  border-radius: 4px !important;
  transition: all 0.2s ease-in !important;
  position: relative !important;
  overflow: hidden !important;
  font-size: 19px !important;
  cursor: pointer !important;
  color: #000000 !important;
  z-index: 1 !important;
  background-color: transparent !important; /* Start met een transparante/lichte basis */
}

/* 2. Zorgen dat de Elementor tekst ALTIJD boven de opkomende bubbels blijft */
.elementor-29 .elementor-element.elementor-element-8b5ec03.bubbel-animatie-knop .elementor-button-content-wrapper {
  position: relative !important;
  z-index: 10 !important; /* Dwingt de tekst naar de voorgrond */
  transition: color 0.2s ease-in !important;
}

/* Hover stand voor de knop zelf (rand wordt groen, tekst wordt wit) */
.elementor-29 .elementor-element.elementor-element-8b5ec03.bubbel-animatie-knop .elementor-button:hover {
  border: 1px solid #39bda7 !important;
}
.elementor-29 .elementor-element.elementor-element-8b5ec03.bubbel-animatie-knop .elementor-button:hover .elementor-button-content-wrapper {
  color: #ffffff !important; /* Tekstkleur verandert naar wit */
}

/* 3. De Eerste Grijze/Transparante Bubbellaag (::before) */
.elementor-29 .elementor-element.elementor-element-8b5ec03.bubbel-animatie-knop .elementor-button::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) scaleY(1) scaleX(1.25) !important;
  top: 100% !important;
  width: 140% !important;
  height: 180% !important;
  background-color: rgba(0, 0, 0, 0.05) !important;
  border-radius: 50% !important;
  display: block !important;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1) !important;
  z-index: -1 !important;
}

/* Hover stand voor de eerste bubbel (schiet omhoog) */
.elementor-29 .elementor-element.elementor-element-8b5ec03.bubbel-animatie-knop .elementor-button:hover::before {
  top: -35% !important;
  background-color: #39bda7 !important;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8) !important;
}

/* 4. De Tweede Groene Bubbellaag (::after) */
.elementor-29 .elementor-element.elementor-element-8b5ec03.bubbel-animatie-knop .elementor-button::after {
  content: "" !important;
  position: absolute !important;
  left: 55% !important;
  transform: translateX(-50%) scaleY(1) scaleX(1.45) !important;
  top: 180% !important;
  width: 160% !important;
  height: 190% !important;
  background-color: #39bda7 !important;
  border-radius: 50% !important;
  display: block !important;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1) !important;
  z-index: -1 !important;
}

/* Hover stand voor de tweede groen/blauwe bubbel (schiet er vlak achteraan) */
.elementor-29 .elementor-element.elementor-element-8b5ec03.bubbel-animatie-knop .elementor-button:hover::after {
  top: -45% !important;
  background-color: #39bda7 !important;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8) !important;
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8188b39 *//* 1. De basis van de Elementor-knop overschrijven */
.elementor-29 .elementor-element.elementor-element-8188b39.bubbel-animatie-knop .elementor-button {
  display: inline-block !important;
  padding: 12px 24px !important;
  border: 1px solid #4f4f4f !important;
  border-radius: 4px !important;
  transition: all 0.2s ease-in !important;
  position: relative !important;
  overflow: hidden !important;
  font-size: 19px !important;
  cursor: pointer !important;
  color: #000000 !important;
  z-index: 1 !important;
  background-color: transparent !important; /* Start met een transparante/lichte basis */
}

/* 2. Zorgen dat de Elementor tekst ALTIJD boven de opkomende bubbels blijft */
.elementor-29 .elementor-element.elementor-element-8188b39.bubbel-animatie-knop .elementor-button-content-wrapper {
  position: relative !important;
  z-index: 10 !important; /* Dwingt de tekst naar de voorgrond */
  transition: color 0.2s ease-in !important;
}

/* Hover stand voor de knop zelf (rand wordt groen, tekst wordt wit) */
.elementor-29 .elementor-element.elementor-element-8188b39.bubbel-animatie-knop .elementor-button:hover {
  border: 1px solid #39bda7 !important;
}
.elementor-29 .elementor-element.elementor-element-8188b39.bubbel-animatie-knop .elementor-button:hover .elementor-button-content-wrapper {
  color: #ffffff !important; /* Tekstkleur verandert naar wit */
}

/* 3. De Eerste Grijze/Transparante Bubbellaag (::before) */
.elementor-29 .elementor-element.elementor-element-8188b39.bubbel-animatie-knop .elementor-button::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) scaleY(1) scaleX(1.25) !important;
  top: 100% !important;
  width: 140% !important;
  height: 180% !important;
  background-color: rgba(0, 0, 0, 0.05) !important;
  border-radius: 50% !important;
  display: block !important;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1) !important;
  z-index: -1 !important;
}

/* Hover stand voor de eerste bubbel (schiet omhoog) */
.elementor-29 .elementor-element.elementor-element-8188b39.bubbel-animatie-knop .elementor-button:hover::before {
  top: -35% !important;
  background-color: #39bda7 !important;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8) !important;
}

/* 4. De Tweede Groene Bubbellaag (::after) */
.elementor-29 .elementor-element.elementor-element-8188b39.bubbel-animatie-knop .elementor-button::after {
  content: "" !important;
  position: absolute !important;
  left: 55% !important;
  transform: translateX(-50%) scaleY(1) scaleX(1.45) !important;
  top: 180% !important;
  width: 160% !important;
  height: 190% !important;
  background-color: #39bda7 !important;
  border-radius: 50% !important;
  display: block !important;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1) !important;
  z-index: -1 !important;
}

/* Hover stand voor de tweede groen/blauwe bubbel (schiet er vlak achteraan) */
.elementor-29 .elementor-element.elementor-element-8188b39.bubbel-animatie-knop .elementor-button:hover::after {
  top: -45% !important;
  background-color: #39bda7 !important;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8) !important;
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-6a874f0 *//* 1. De Elementor-knop voorbereiden op het effect */
.elementor-29 .elementor-element.elementor-element-6a874f0.bubbel-animatie-knop .elementor-button {
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

/* 2. Zorgen dat de Elementor tekst ALTIJD boven de opkomende bubbels blijft */
.elementor-29 .elementor-element.elementor-element-6a874f0.bubbel-animatie-knop .elementor-button-content-wrapper {
  position: relative !important;
  z-index: 10 !important; /* Dwingt de tekst naar de voorground */
  transition: color 0.2s ease-in !important;
}

/* 3. De Eerste Bubbellaag (::before) */
.elementor-29 .elementor-element.elementor-element-6a874f0.bubbel-animatie-knop .elementor-button::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) scaleY(1) scaleX(1.25) !important;
  top: 100% !important;
  width: 140% !important;
  height: 180% !important;
  background-color: rgba(0, 0, 0, 0.05) !important;
  border-radius: 50% !important;
  display: block !important;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1) !important;
  z-index: -1 !important;
}

/* Hover stand voor de eerste bubbel (schiet omhoog) */
.elementor-29 .elementor-element.elementor-element-6a874f0.bubbel-animatie-knop .elementor-button:hover::before {
  top: -35% !important;
  background-color: #39bda7 !important; /* De mintgroene kleur van de bubbel */
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8) !important;
}

/* 4. De Tweede Bubbellaag (::after) */
.elementor-29 .elementor-element.elementor-element-6a874f0.bubbel-animatie-knop .elementor-button::after {
  content: "" !important;
  position: absolute !important;
  left: 55% !important;
  transform: translateX(-50%) scaleY(1) scaleX(1.45) !important;
  top: 180% !important;
  width: 160% !important;
  height: 190% !important;
  background-color: #39bda7 !important;
  border-radius: 50% !important;
  display: block !important;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1) !important;
  z-index: -1 !important;
}

/* Hover stand voor de tweede bubbel */
.elementor-29 .elementor-element.elementor-element-6a874f0.bubbel-animatie-knop .elementor-button:hover::after {
  top: -45% !important;
  background-color: #39bda7 !important;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8) !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c3ce37 *//* 1. De basis van de sectie (Zwart maken en voorbereiden op de animatie) */
.elementor-29 .elementor-element.elementor-element-0c3ce37 {
    background-color: #000000 !important;
    position: relative;
    z-index: 1;
    overflow: hidden; /* Zorgt ervoor dat de witte laag niet buiten de sectie uitsteekt */
}

/* 2. De witte animatielaag die links buiten het scherm klaarstaat */
.elementor-29 .elementor-element.elementor-element-0c3ce37::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: -1; /* Blijft achter de tekst, maar voor de zwarte achtergrond */
    
    /* Staat standaard volledig links buiten het scherm (-100%) */
    transform: translateX(-100%); 
    
    /* PAS HIER DE SNELHEID AAN (bijv. 3s voor langzamer, 1s voor sneller) */
    transition: transform 20s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 3. Bij hover schuift de witte laag volledig over de sectie heen */
.elementor-29 .elementor-element.elementor-element-0c3ce37:hover::before {
    transform: translateX(0);
}

/* 4. Zorgt ervoor dat alle teksten standaard wit zijn en vloeiend transformeren */
.elementor-29 .elementor-element.elementor-element-0c3ce37, 
.elementor-29 .elementor-element.elementor-element-0c3ce37 p, 
.elementor-29 .elementor-element.elementor-element-0c3ce37 h1, 
.elementor-29 .elementor-element.elementor-element-0c3ce37 h2, 
.elementor-29 .elementor-element.elementor-element-0c3ce37 h3, 
.elementor-29 .elementor-element.elementor-element-0c3ce37 h4, 
.elementor-29 .elementor-element.elementor-element-0c3ce37 h5, 
.elementor-29 .elementor-element.elementor-element-0c3ce37 h6, 
.elementor-29 .elementor-element.elementor-element-0c3ce37 .elementor-heading-title {
    color: #ffffff !important;
    /* PAS HIER DE TIJD AAN (moet gelijk zijn aan de tijd van de achtergrond hierboven) */
    transition: color 2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 5. Zorgt ervoor dat alle teksten zwart worden tijdens de hover */
.elementor-29 .elementor-element.elementor-element-0c3ce37:hover, 
.elementor-29 .elementor-element.elementor-element-0c3ce37:hover p, 
.elementor-29 .elementor-element.elementor-element-0c3ce37:hover h1, 
.elementor-29 .elementor-element.elementor-element-0c3ce37:hover h2, 
.elementor-29 .elementor-element.elementor-element-0c3ce37:hover h3, 
.elementor-29 .elementor-element.elementor-element-0c3ce37:hover h4, 
.elementor-29 .elementor-element.elementor-element-0c3ce37:hover h5, 
.elementor-29 .elementor-element.elementor-element-0c3ce37:hover h6, 
.elementor-29 .elementor-element.elementor-element-0c3ce37:hover .elementor-heading-title {
    color: #000000 !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fe10ca2 *//* 1. De basis van de sectie (Zwart maken en voorbereiden op de animatie) */
.elementor-29 .elementor-element.elementor-element-fe10ca2 {
    background-color: #000000 !important;
    position: relative;
    z-index: 1;
    overflow: hidden; /* Zorgt ervoor dat de witte laag niet onder de sectie uitsteekt */
}

/* 2. De witte animatielaag die aan de onderkant buiten het scherm klaarstaat */
.elementor-29 .elementor-element.elementor-element-fe10ca2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: -1; /* Blijft achter de tekst, maar voor de zwarte achtergrond */
    
    /* Aangepast: staat standaard volledig aan de onderkant buiten de sectie (100%) */
    transform: translateY(100%); 
    
    /* PAS HIER DE SNELHEID AAN (bijv. 3s voor langzamer, 1s voor sneller) */
    transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 3. Bij hover schuift de witte laag volledig van beneden naar boven */
.elementor-29 .elementor-element.elementor-element-fe10ca2:hover::before {
    transform: translateY(0);
}

/* 4. Zorgt ervoor dat alle teksten standaard wit zijn en vloeiend transformeren */
.elementor-29 .elementor-element.elementor-element-fe10ca2, 
.elementor-29 .elementor-element.elementor-element-fe10ca2 p, 
.elementor-29 .elementor-element.elementor-element-fe10ca2 h1, 
.elementor-29 .elementor-element.elementor-element-fe10ca2 h2, 
.elementor-29 .elementor-element.elementor-element-fe10ca2 h3, 
.elementor-29 .elementor-element.elementor-element-fe10ca2 h4, 
.elementor-29 .elementor-element.elementor-element-fe10ca2 h5, 
.elementor-29 .elementor-element.elementor-element-fe10ca2 h6, 
.elementor-29 .elementor-element.elementor-element-fe10ca2 .elementor-heading-title {
    color: #ffffff !important;
    /* PAS HIER DE TIJD AAN (moet gelijk zijn aan de tijd van de achtergrond hierboven) */
    transition: color 2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 5. Zorgt ervoor dat alle teksten zwart worden tijdens de hover */
.elementor-29 .elementor-element.elementor-element-fe10ca2:hover, 
.elementor-29 .elementor-element.elementor-element-fe10ca2:hover p, 
.elementor-29 .elementor-element.elementor-element-fe10ca2:hover h1, 
.elementor-29 .elementor-element.elementor-element-fe10ca2:hover h2, 
.elementor-29 .elementor-element.elementor-element-fe10ca2:hover h3, 
.elementor-29 .elementor-element.elementor-element-fe10ca2:hover h4, 
.elementor-29 .elementor-element.elementor-element-fe10ca2:hover h5, 
.elementor-29 .elementor-element.elementor-element-fe10ca2:hover h6, 
.elementor-29 .elementor-element.elementor-element-fe10ca2:hover .elementor-heading-title {
    color: #000000 !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-84f4f24 *//* 1. De basis van de sectie (Zwart maken en voorbereiden op de animatie) */
.elementor-29 .elementor-element.elementor-element-84f4f24 {
    background-color: #000000 !important;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* 2. De witte animatielaag die aan de onderkant klaarstaat */
.elementor-29 .elementor-element.elementor-element-84f4f24::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: -1;
    transform: translateY(100%); 
    /* PAS HIER DE SNELHEID AAN */
    transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 3. Aangepast: Activeert alleen als de klasse .is-hovered actief is */
.elementor-29 .elementor-element.elementor-element-84f4f24.is-hovered::before {
    transform: translateY(0);
}

/* 4. Zorgt ervoor dat alle teksten standaard wit zijn en vloeiend transformeren */
.elementor-29 .elementor-element.elementor-element-84f4f24, 
.elementor-29 .elementor-element.elementor-element-84f4f24 p, 
.elementor-29 .elementor-element.elementor-element-84f4f24 h1, 
.elementor-29 .elementor-element.elementor-element-84f4f24 h2, 
.elementor-29 .elementor-element.elementor-element-84f4f24 h3, 
.elementor-29 .elementor-element.elementor-element-84f4f24 h4, 
.elementor-29 .elementor-element.elementor-element-84f4f24 h5, 
.elementor-29 .elementor-element.elementor-element-84f4f24 h6, 
.elementor-29 .elementor-element.elementor-element-84f4f24 .elementor-heading-title {
    color: #ffffff !important;
    /* PAS HIER DE TIJD AAN (moet gelijk zijn aan de tijd van de achtergrond) */
    transition: color 2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 5. Aangepast: Teksten worden permanent zwart zodra .is-hovered actief is */
.elementor-29 .elementor-element.elementor-element-84f4f24.is-hovered, 
.elementor-29 .elementor-element.elementor-element-84f4f24.is-hovered p, 
.elementor-29 .elementor-element.elementor-element-84f4f24.is-hovered h1, 
.elementor-29 .elementor-element.elementor-element-84f4f24.is-hovered h2, 
.elementor-29 .elementor-element.elementor-element-84f4f24.is-hovered h3, 
.elementor-29 .elementor-element.elementor-element-84f4f24.is-hovered h4, 
.elementor-29 .elementor-element.elementor-element-84f4f24.is-hovered h5, 
.elementor-29 .elementor-element.elementor-element-84f4f24.is-hovered h6, 
.elementor-29 .elementor-element.elementor-element-84f4f24.is-hovered .elementor-heading-title {
    color: #000000 !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-86ff128 *//* 1. De basis van de sectie (Zwart maken en voorbereiden op de animatie) */
.elementor-29 .elementor-element.elementor-element-86ff128 {
    background-color: #000000 !important;
    position: relative;
    z-index: 1;
    overflow: hidden; /* Zorgt ervoor dat de witte laag niet onder de sectie uitsteekt */
}

/* 2. De witte animatielaag die aan de onderkant buiten het scherm klaarstaat */
.elementor-29 .elementor-element.elementor-element-86ff128::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: -1; /* Blijft achter de tekst, maar voor de zwarte achtergrond */
    
    /* Aangepast: staat standaard volledig aan de onderkant buiten de sectie (100%) */
    transform: translateY(100%); 
    
    /* PAS HIER DE SNELHEID AAN (bijv. 3s voor langzamer, 1s voor sneller) */
    transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 3. Bij hover schuift de witte laag volledig van beneden naar boven */
.elementor-29 .elementor-element.elementor-element-86ff128:hover::before {
    transform: translateY(0);
}

/* 4. Zorgt ervoor dat alle teksten standaard wit zijn en vloeiend transformeren */
.elementor-29 .elementor-element.elementor-element-86ff128, 
.elementor-29 .elementor-element.elementor-element-86ff128 p, 
.elementor-29 .elementor-element.elementor-element-86ff128 h1, 
.elementor-29 .elementor-element.elementor-element-86ff128 h2, 
.elementor-29 .elementor-element.elementor-element-86ff128 h3, 
.elementor-29 .elementor-element.elementor-element-86ff128 h4, 
.elementor-29 .elementor-element.elementor-element-86ff128 h5, 
.elementor-29 .elementor-element.elementor-element-86ff128 h6, 
.elementor-29 .elementor-element.elementor-element-86ff128 .elementor-heading-title {
    color: #ffffff !important;
    /* PAS HIER DE TIJD AAN (moet gelijk zijn aan de tijd van de achtergrond hierboven) */
    transition: color 2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 5. Zorgt ervoor dat alle teksten zwart worden tijdens de hover */
.elementor-29 .elementor-element.elementor-element-86ff128:hover, 
.elementor-29 .elementor-element.elementor-element-86ff128:hover p, 
.elementor-29 .elementor-element.elementor-element-86ff128:hover h1, 
.elementor-29 .elementor-element.elementor-element-86ff128:hover h2, 
.elementor-29 .elementor-element.elementor-element-86ff128:hover h3, 
.elementor-29 .elementor-element.elementor-element-86ff128:hover h4, 
.elementor-29 .elementor-element.elementor-element-86ff128:hover h5, 
.elementor-29 .elementor-element.elementor-element-86ff128:hover h6, 
.elementor-29 .elementor-element.elementor-element-86ff128:hover .elementor-heading-title {
    color: #000000 !important;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Segoe UI';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://jordy2.wp-websites.nl/wp-content/uploads/2023/02/SegoeUI-SemiBold.woff') format('woff');
}
@font-face {
	font-family: 'Segoe UI';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://jordy2.wp-websites.nl/wp-content/uploads/2023/02/SegoeUI.woff') format('woff');
}
@font-face {
	font-family: 'Segoe UI';
	font-style: normal;
	font-weight: bold;
	font-display: auto;
	src: url('https://jordy2.wp-websites.nl/wp-content/uploads/2023/02/SegoeUI-Bold.woff') format('woff');
}
/* End Custom Fonts CSS */