.elementor-10 .elementor-element.elementor-element-36b279c{--display:flex;--min-height:100vh;--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;--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-36b279c.e-con{--align-self:center;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-10 .elementor-element.elementor-element-6a2e52c img{width:25vw;max-width:100%;}.elementor-10 .elementor-element.elementor-element-7767157{--display:flex;--min-height:100vh;--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;--justify-content:center;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );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-10 .elementor-element.elementor-element-0fbceb3.elementor-element{--align-self:center;}.elementor-10 .elementor-element.elementor-element-0fbceb3{text-align:center;font-family:"Funnel Display", Sans-serif;font-size:clamp(1.125rem, 0.2935rem + 1.7346vw, 2.375rem);font-weight:300;color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-6927b31{--display:flex;--min-height:100vh;--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;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-10 .elementor-element.elementor-element-ae0373f{--display:flex;--min-height:100vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-10 .elementor-element.elementor-element-0b19488{text-align:center;}.elementor-10 .elementor-element.elementor-element-0b19488 .elementor-heading-title{font-family:"Funnel Display", Sans-serif;font-size:clamp(1.125rem, 0.2935rem + 1.7346vw, 2.375rem);font-weight:300;color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-c5a7ae5{--display:flex;--min-height:100vh;--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;--justify-content:flex-end;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:75px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-c5a7ae5:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-c5a7ae5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://nachtvandepajotseondernemer.be/wp-content/uploads/2026/01/test-scaled.png");background-position:center center;background-repeat:no-repeat;background-size:contain;}.elementor-10 .elementor-element.elementor-element-c39c543{--display:flex;--min-height:100vh;--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;--justify-content:center;}.elementor-10 .elementor-element.elementor-element-1be02aa img{width:5vw;}.elementor-10 .elementor-element.elementor-element-2c9d9c1.elementor-element{--align-self:center;}.elementor-10 .elementor-element.elementor-element-2c9d9c1{text-align:center;font-family:"Funnel Display", Sans-serif;font-size:clamp(1.125rem, 0.2935rem + 1.7346vw, 2.375rem);font-weight:300;color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-584ce67{--display:flex;--min-height:100vh;--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;--justify-content:space-between;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:57px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-a881209{--display:flex;}.elementor-10 .elementor-element.elementor-element-b882ad0{--display:flex;}.elementor-10 .elementor-element.elementor-element-b882ad0.e-con{--align-self:center;}.elementor-10 .elementor-element.elementor-element-b6b1620{text-align:center;}.elementor-10 .elementor-element.elementor-element-b6b1620 .elementor-heading-title{font-family:"Funnel Display", Sans-serif;font-size:clamp(1rem, 0.7505rem + 0.5204vw, 1.375rem);font-weight:300;color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-4e6801b{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--align-items:start;}.elementor-10 .elementor-element.elementor-element-4e6801b.e-con{--align-self:center;}.elementor-10 .elementor-element.elementor-element-d34efa0{font-family:"Funnel Display", Sans-serif;font-size:10px;font-weight:400;color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-d34efa0 a{color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-897190d{--grid-template-columns:repeat(0, auto);text-align:center;--icon-size:20px;--grid-column-gap:5px;--grid-row-gap:0px;}.elementor-10 .elementor-element.elementor-element-897190d .elementor-social-icon{background-color:#00000000;--icon-padding:0em;}.elementor-10 .elementor-element.elementor-element-897190d .elementor-social-icon i{color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-897190d .elementor-social-icon svg{fill:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-2ec7729{text-align:end;font-family:"Funnel Display", Sans-serif;font-size:10px;font-weight:400;color:#FFFFFF;}body.elementor-page-10:not(.elementor-motion-effects-element-type-background), body.elementor-page-10 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#090613;}@media(min-width:768px){.elementor-10 .elementor-element.elementor-element-4e6801b{--width:85vw;}}@media(max-width:1024px){.elementor-10 .elementor-element.elementor-element-6a2e52c img{width:50vw;}.elementor-10 .elementor-element.elementor-element-c5a7ae5:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-c5a7ae5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center center;background-size:cover;}.elementor-10 .elementor-element.elementor-element-1be02aa img{width:7vw;}.elementor-10 .elementor-element.elementor-element-4e6801b{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-10 .elementor-element.elementor-element-6a2e52c img{width:70vw;}.elementor-10 .elementor-element.elementor-element-0fbceb3{padding:0px 20px 0px 20px;font-size:18px;}.elementor-10 .elementor-element.elementor-element-c5a7ae5:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-c5a7ae5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-size:250vw auto;}.elementor-10 .elementor-element.elementor-element-1be02aa img{width:17vw;}.elementor-10 .elementor-element.elementor-element-2c9d9c1{padding:0px 30px 0px 30px;font-size:18px;}.elementor-10 .elementor-element.elementor-element-584ce67{--padding-top:0px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-b882ad0{--padding-top:0px;--padding-bottom:0px;--padding-left:25px;--padding-right:25px;}.elementor-10 .elementor-element.elementor-element-4e6801b{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;--justify-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:25px;--padding-right:25px;}.elementor-10 .elementor-element.elementor-element-d34efa0{text-align:center;}.elementor-10 .elementor-element.elementor-element-897190d.elementor-element{--order:-99999 /* order start hack */;}.elementor-10 .elementor-element.elementor-element-2ec7729{text-align:center;}}/* Start custom CSS for container, class: .elementor-element-36b279c *//* =========================================================
   HERO GRADIENT - alternating opacity (no movement)
   Brown top-left and Blue top-right breathe in opposite phases
   Blue is compact so it won't bleed visually downwards
   ========================================================= */

.elementor-10 .elementor-element.elementor-element-36b279c{
  position: relative;
  overflow: hidden;
  isolation: isolate;          /* voorkomt dat pseudo-layers over andere secties “blenden” */
  clip-path: inset(0);         /* extra hard clip (werkt goed samen met overflow) */

  /* BASIS donker verloop */
  background: linear-gradient(
    180deg,
    #365663 0%,
    #1c3441 38%,
    #0b1622 68%,
    #060a12 100%
  );
}

/* LICHTBLAUW laag (rechtsboven) - compacter zoals bruin */
.elementor-10 .elementor-element.elementor-element-36b279c::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;

  background: radial-gradient(
    circle at 92% 12%,
    rgba(84,169,182,1) 0%,
    rgba(84,169,182,0.70) 14%,
    rgba(84,169,182,0.26) 22%,
    transparent 32%           /* sneller weg => onderaan blijft donker */
  );

  will-change: opacity;
  animation: blueAlt 5s ease-in-out infinite;
}

/* BRUIN laag (linksboven) */
.elementor-10 .elementor-element.elementor-element-36b279c::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;

  background: radial-gradient(
    circle at 8% 10%,
    rgba(201,156,114,1) 0%,
    rgba(201,156,114,0.62) 16%,
    rgba(201,156,114,0.26) 26%,
    transparent 34%
  );

  will-change: opacity;
  animation: brownAlt 5s ease-in-out infinite;
}

/* Content bovenop */
.elementor-10 .elementor-element.elementor-element-36b279c > *{
  position: relative;
  z-index: 10;
}

/* =========================================================
   Tegenfase animaties:
   - Brown: 100% -> 10% -> 100%
   - Blue : 10%  -> 100% -> 10%
   ========================================================= */

@keyframes brownAlt{
  0%   { opacity: 1; }
  25%  { opacity: 1; }
  50%  { opacity: 0.10; }
  75%  { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes blueAlt{
  0%   { opacity: 0.10; }
  25%  { opacity: 1; }
  50%  { opacity: 1; }
  75%  { opacity: 0.10; }
  100% { opacity: 0.10; }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-0fbceb3 */@media only screen and (max-width: 600px) {
.elementor-10 .elementor-element.elementor-element-0fbceb3 p {
    max-width: 65vw;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2180699 *//* =========================================================
   Slider UI styling (optioneel maar netjes)
   ========================================================= */
#lockSection .lock-ui{
  width: min(760px, 85vw);
  margin: 0 auto;
}

#lockSection .lock-slider-wrap{
  margin-top: 28px;
}

#lockSection .lock-slider{
  width: 100%;
  appearance: none;
  height: 1px;
  background: rgba(213, 174, 138, 1)
;
  outline: none;
}

#lockSection .lock-slider::-webkit-slider-thumb{
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(201,156,114,1);
  border: none;
  cursor: pointer;
}

#lockSection .lock-slider::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(201,156,114,1);
  border: none;
  cursor: pointer;
}

#lockSection .lock-labels{
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: clamp(0.8125rem, 0.5215rem + 0.6071vw, 1.25rem);
  font-family: "Funnel Display", sans-serif;
  font-weight: 300;

  color: white;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6927b31 *//* =========================================================
   Crossfade wrapper: #lockSection <-> #nextSection
   Beide staan exact over elkaar (zelfde plaats).
   ========================================================= */

/* Wrapper is 100vh en houdt plaats in de layout */
#lockWrapper{
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* Beide secties exact over elkaar */
#lockSection,
#nextSection{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Start state: lock zichtbaar, next onzichtbaar */
#lockSection{
  opacity: 1;
  transition: opacity 1500ms ease;
  z-index: 2;
}

#nextSection{
  opacity: 0;
  transition: opacity 1500ms ease;
  z-index: 1;
  pointer-events: none; /* pas klikbaar na fade */
}

/* Fade states (JS zet deze classes) */
#lockSection.is-fading-out{
  opacity: 0;
}

#nextSection.is-fading-in{
  opacity: 1;
  z-index: 3;
  pointer-events: auto;
}

/* Scroll lock (JS zet class op body) */
body.scroll-locked{
  overflow: hidden;
  overscroll-behavior: none;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-2c9d9c1 */.elementor-10 .elementor-element.elementor-element-2c9d9c1 p{
    max-width: 80vw
}
@media only screen and (min-width: 767px) {
.elementor-10 .elementor-element.elementor-element-2c9d9c1 p{
    max-width: 70vw
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b882ad0 */.elementor-10 .elementor-element.elementor-element-b882ad0{
    max-width: 560px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-d34efa0 */.elementor-10 .elementor-element.elementor-element-d34efa0 p {
    margin-bottom: 0;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-584ce67 *//* =========================================================
   HERO GRADIENT - bottom corners, alternating opacity
   Hard clipped: nothing bleeds outside container (top/bottom)
   ========================================================= */

.elementor-10 .elementor-element.elementor-element-584ce67{
  position: relative;

  /* HARD CLIP */
  overflow: hidden;
  clip-path: inset(0);
  isolation: isolate;
  contain: paint;

  /* BASIS donker verloop */
  background: linear-gradient(
    360deg,
    #365663 0%,
    #1c3441 38%,
    #0b1622 68%,
    #060a12 100%
  );
}

/* LICHTBLAUW laag (rechtsonder) */
.elementor-10 .elementor-element.elementor-element-584ce67::before{
  content:"";
  position:absolute;

  /* exact binnen container */
  top: 0; right: 0; bottom: 0; left: 0;

  z-index:2;
  pointer-events:none;

  background: radial-gradient(
    circle at 92% 92%,
    rgba(84,169,182,1) 0%,
    rgba(84,169,182,0.70) 14%,
    rgba(84,169,182,0.26) 22%,
    transparent 32%
  );

  will-change: opacity;
  animation: blueAlt 10s ease-in-out infinite;
}

/* BRUIN laag (linksonder) */
.elementor-10 .elementor-element.elementor-element-584ce67::after{
  content:"";
  position:absolute;

  /* exact binnen container */
  top: 0; right: 0; bottom: 0; left: 0;

  z-index:3;
  pointer-events:none;

  background: radial-gradient(
    circle at 8% 92%,
    rgba(201,156,114,1) 0%,
    rgba(201,156,114,0.62) 16%,
    rgba(201,156,114,0.26) 26%,
    transparent 34%
  );

  will-change: opacity;
  animation: brownAlt 10s ease-in-out infinite;
}

/* Content bovenop */
.elementor-10 .elementor-element.elementor-element-584ce67 > *{
  position: relative;
  z-index: 10;
}

/* Tegenfase animaties */
@keyframes brownAlt{
  0%   { opacity: 1; }
  25%  { opacity: 1; }
  50%  { opacity: 0.10; }
  75%  { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes blueAlt{
  0%   { opacity: 0.10; }
  25%  { opacity: 1; }
  50%  { opacity: 1; }
  75%  { opacity: 0.10; }
  100% { opacity: 0.10; }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Funnel Display';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://nachtvandepajotseondernemer.be/wp-content/uploads/2026/01/FunnelDisplay-VariableFont_wght.ttf') format('truetype');
}
/* End Custom Fonts CSS */