.elementor-kit-8{--e-global-color-primary:#5BA9D9;--e-global-color-secondary:#48A43F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#E1740E;--e-global-color-43e1eb8:#48A43F;--e-global-color-8e451a2:#2F6B32;--e-global-color-eb67ad3:#323C44;--e-global-color-9bc6643:#6C7074;--e-global-color-b46afb8:#F29F3D;--e-global-typography-primary-font-family:"Plus Jakarta Sans";--e-global-typography-primary-font-size:45px;--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Plus Jakarta Sans";--e-global-typography-secondary-font-size:30px;--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"Plus Jakarta Sans";--e-global-typography-text-font-size:22px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Plus Jakarta Sans";--e-global-typography-accent-font-size:18px;--e-global-typography-accent-font-weight:300;--e-global-typography-accent-text-transform:uppercase;--e-preloader-animation-duration:2500ms;--e-preloader-delay:300ms;--e-preloader-color:#FFFFFF;--e-preloader-size:23px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.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);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1366px){.elementor-kit-8{--e-preloader-size:52px;}}@media(min-width:2400px){.elementor-kit-8{--e-global-typography-primary-font-size:45px;--e-page-transition-entrance-animation:e-page-transition-fade-out;--e-page-transition-exit-animation:e-page-transition-fade-in;--e-preloader-size:18px;}}@media(max-width:1200px){.elementor-kit-8{--e-global-typography-primary-font-size:35px;--e-global-typography-secondary-font-size:20px;--e-preloader-size:28px;}}@media(max-width:1024px){.elementor-kit-8{--e-global-typography-primary-font-size:35px;--e-global-typography-secondary-font-size:25px;--e-global-typography-text-font-size:20px;--e-global-typography-accent-font-size:18px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-8{--e-global-typography-primary-font-size:28px;--e-global-typography-secondary-font-size:22px;--e-global-typography-text-font-size:18px;--e-global-typography-accent-font-size:14px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================
   Glass Effect (reusable)
   Gebruik: voeg class "is-glass" toe aan widget/container/kolom
   Optioneel: "is-glass--strong", "is-glass--soft", "is-glass--stroke"
========================= */

.is-glass{
  /* Instelbaar via CSS variables (kan je per widget overschrijven via inline CSS of extra class) */
  --glass-bg: rgba(255,255,255,.10);
  --glass-blur: 12px;
  --glass-border: rgba(255,255,255,.18);
  --glass-shadow: 0 18px 50px rgba(0,0,0,.22);
  --glass-radius: 16px;

  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;

  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);

  box-shadow: var(--glass-shadow) !important;

  /* Zorgt dat randen/blur netjes “clippen” */
  overflow: hidden;
  isolation: isolate;

  /* Kleine verfijning: tekst blijft scherp */
  transform: translateZ(0);
}

/* Subtiele highlight bovenaan (premium look) */
.is-glass::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.18), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 35%);
  opacity:.9;
  z-index:0;
}

/* Zorg dat de inhoud boven de highlight ligt */
.is-glass > *{
  position: relative;
  z-index: 1;
}

/* Variaties */
.is-glass--soft{
  --glass-bg: rgba(255,255,255,.07);
  --glass-blur: 10px;
  --glass-border: rgba(255,255,255,.14);
  --glass-shadow: 0 14px 40px rgba(0,0,0,.18);
}

.is-glass--strong{
  --glass-bg: rgba(255,255,255,.14);
  --glass-blur: 16px;
  --glass-border: rgba(255,255,255,.24);
  --glass-shadow: 0 22px 60px rgba(0,0,0,.28);
}

.is-glass--stroke{
  /* Extra “glow stroke” rond de rand */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12) inset,
    var(--glass-shadow) !important;
}

/* Hover variant (optioneel) */
.is-glass--hover:hover{
  --glass-bg: rgba(255,255,255,.14);
  --glass-border: rgba(255,255,255,.26);
  transform: translateY(-2px);
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* Motion respect */
@media (prefers-reduced-motion: reduce){
  .is-glass--hover:hover{ transition: none; transform: none; }
}

/* Fallback als backdrop-filter niet ondersteund wordt */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .is-glass{
    background: rgba(255,255,255,.16) !important;
  }
}
/* =========================
   Gradient Card Background (reusable)
   Gebruik: voeg class "has-grad" toe aan container/widget
   Variaties: has-grad--aurora | has-grad--mesh | has-grad--spot | has-grad--subtle
========================= */

.has-grad{
  --grad-radius: 16px;
  --grad-stroke: rgba(255,255,255,.12);
  --grad-shadow: 0 18px 50px rgba(0,0,0,.18);

  /* Accent (pas dit aan naar je merk) */
  --grad-accent: #48A43F;

  position: relative;
  border-radius: var(--grad-radius);
  overflow: hidden;
  isolation: isolate;

  border: 1px solid var(--grad-stroke);
  box-shadow: var(--grad-shadow);
}

/* Content boven de gradient */
.has-grad > *{
  position: relative;
  z-index: 1;
}

/* Basis gradientlaag */
.has-grad::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity: .95;
  transform: translateZ(0);
}

/* Subtiele highlight + diepte */
.has-grad::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.14), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 35%);
  opacity: .9;
}

/* -------------------------
   Variatie 1: Aurora (premium, modern)
------------------------- */
.has-grad--aurora::before{
  background:
    radial-gradient(circle at 18% 22%, rgba(72,164,63,.28), transparent 46%),
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.10), transparent 42%),
    radial-gradient(circle at 72% 86%, rgba(72,164,63,.18), transparent 48%),
    linear-gradient(135deg, rgba(10,10,10,.60), rgba(10,10,10,.30));
}

/* -------------------------
   Variatie 2: Mesh (speels, “alive”)
------------------------- */
.has-grad--mesh::before{
  background:
    radial-gradient(circle at 12% 18%, rgba(72,164,63,.26), transparent 42%),
    radial-gradient(circle at 82% 22%, rgba(255,255,255,.10), transparent 40%),
    radial-gradient(circle at 65% 88%, rgba(72,164,63,.18), transparent 46%),
    radial-gradient(circle at 18% 85%, rgba(255,255,255,.08), transparent 44%),
    linear-gradient(160deg, rgba(0,0,0,.62), rgba(0,0,0,.26));
}

/* -------------------------
   Variatie 3: Spotlight (clean, focus)
------------------------- */
.has-grad--spot::before{
  background:
    radial-gradient(circle at 30% 20%, rgba(72,164,63,.22), transparent 50%),
    linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.22));
}

/* -------------------------
   Variatie 4: Subtle (heel minimal)
------------------------- */
.has-grad--subtle::before{
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.28));
}

/* -------------------------
   Optional: zachte animatie (alleen als je dat wil)
   Voeg class "has-grad--animate" toe
------------------------- */
.has-grad--animate::before{
  background-size: 140% 140%;
  animation: gradFloat 10s ease-in-out infinite;
}

@keyframes gradFloat{
  0%   { transform: translate3d(0,0,0) scale(1.02); filter: saturate(1.05); }
  50%  { transform: translate3d(-2%, -1%, 0) scale(1.04); filter: saturate(1.12); }
  100% { transform: translate3d(0,0,0) scale(1.02); filter: saturate(1.05); }
}

/* Motion respect */
@media (prefers-reduced-motion: reduce){
  .has-grad--animate::before{ animation: none; }
}

/* Extra: accent glow border (optioneel) */
.has-grad--glow{
  box-shadow:
    0 0 0 1px rgba(72,164,63,.20) inset,
    var(--grad-shadow);
  border-color: rgba(72,164,63,.22);
}
/* =========================
   Text fade (white -> transparent naar onder)
   Gebruik: voeg class "text-fade" toe aan een Heading/Text widget
   Optioneel: text-fade--soft | text-fade--strong
========================= */

.text-fade{
  /* instelbaar */
  --fade-start: 92%;   /* waar wit stopt (lager = sterker effect) */
  --fade-end: 100%;    /* waar het volledig transparant wordt */
  --fade-opacity: 1;   /* algemene intensiteit */

  /* Gradient op de tekst zelf */
  background-image: linear-gradient(
    to bottom,
    rgba(255,255,255,var(--fade-opacity)) 0%,
    rgba(255,255,255,var(--fade-opacity)) var(--fade-start),
    rgba(255,255,255,0) var(--fade-end)
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;

  /* voorkomt rare clipping bij sommige fonts */
  display: inline-block;
}

/* Variaties */
.text-fade--soft{
  --fade-start: 96%;
  --fade-end: 100%;
  --fade-opacity: .95;
}

.text-fade--strong{
  --fade-start: 80%;
  --fade-end: 100%;
  --fade-opacity: 1;
}





.bs-hero-switch{
  position: relative;
  overflow: hidden;
}

/* Dynamische achtergrondlaag (wordt via JS toegevoegd) */
.bs-hero-switch .bs-hero-bg-layer{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  transform: scale(1.01);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 0;
}

/* Elementor lagen correct stapelen */
.bs-hero-switch .elementor-motion-effects-container,
.bs-hero-switch .elementor-background-slideshow,
.bs-hero-switch .elementor-background-video-container{
  position: absolute;
  inset: 0;
  z-index: 0; /* zelfde laag als bg */
}

/* Overlay boven bg */
.bs-hero-switch .elementor-background-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Content boven alles */
.bs-hero-switch .e-con-inner,
.bs-hero-switch .elementor-container,
.bs-hero-switch .elementor-widget-wrap{
  position: relative;
  z-index: 2;
}

/* Switch animatie */
.bs-hero-switch.is-switching .bs-hero-bg-layer{
  opacity: .25;
  transform: scale(1.015);
}

.bs-hero-card{ cursor: pointer; }

/* Zorg dat zowel de container als eventuele motion layer netjes background kan tonen */
.bs-hero-switch{
  position: relative;
  overflow: hidden;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* 1) Elementor alignment behouden: wrapper alleen "positioning context" */




/* Wrapper: enkel position context */
/* Wrapper: enkel position context */
.nav-logo-wrap{ position: relative; }

/* Full logo blijft Elementor-uitlijning bepalen */
.nav-logo--full{
  position: relative;
  z-index: 1;
  opacity: 1;
  transition: opacity .18s ease;
}
.nav-logo--full img{ display:block; }

/* Icoon: overlay met exact dezelfde box */
.nav-logo--icon{
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  will-change: opacity;
}

/* Belangrijk: neutraliseer Elementor-centering op ALLE wrappers */
.nav-logo--icon .elementor-widget-container,
.nav-logo--icon a,
.nav-logo--icon figure{
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  display: block !important;          /* geen flex/inline-flex van Elementor */
  text-align: left !important;        /* geen text-align:center */
}

/* Dwing het icoonbeeld hard links + verticaal gecentreerd */
.nav-logo--icon img{
  position: absolute !important;
  left: 2% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  display: block !important;
  height: 32px;   /* pas aan */
  width: auto !important;

  margin: 0 !important;               /* geen auto-centering */
}

/* Scroll state wissel */
.elementor-location-header.is-scrolled .nav-logo--full{ opacity: 0; pointer-events:none; }
.elementor-location-header.is-scrolled .nav-logo--icon{ opacity: 1; pointer-events:auto; }

@media (prefers-reduced-motion: reduce){
  .nav-logo--full, .nav-logo--icon{ transition:none; }
}


/* Scroll state wissel */
.elementor-location-header.is-scrolled .nav-logo--full{ opacity: 0; pointer-events:none; }
.elementor-location-header.is-scrolled .nav-logo--icon{ opacity: 1; pointer-events:auto; }

@media (prefers-reduced-motion: reduce){
  .nav-logo--full, .nav-logo--icon{ transition:none; }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Plus Jakarta Sans';
	font-display: auto;
	src: url('https://buitenblik.be/wp-content/uploads/2025/12/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
}
/* End Custom Fonts CSS */