.logo-image {
    height: 200px !important;
    padding: 20px;
}



/* ============== Start styling Navigation (bar) elements template v2 =================== */

#sp-navigation {
  font-size: 20px;
}

#sppb-addon-41aa3296-1ceb-4ff4-83c6-0aed4979f585 li a,
#sppb-addon-41aa3296-1ceb-4ff4-83c6-0aed4979f585 li a:hover
 {
  /*  border-top-left-radius: 0px !important; /* ..... Making button right bottom straight */
  /*  border-top-right-radius: 0px !important; /* ..... Making button right bottom straight */
    border-bottom-right-radius: 10px !important; /* ..... giving rounding to menu button */
    border-bottom-left-radius: 10px !important;  /* ..... giving rounding to menu button */
}

/* ============== END styling Navigation (bar) elements =================== */

/* ==============  START styling offcanvas - hamburger navigation menu and sub items =========== */

/* ===============================
   MOBILE: label + top margin only
   (hamburger bars untouched)
   =============================== */
@media (max-width: 991.98px){

  /* (3) 10px space above the hamburger button */
  .sppb-responsive-bars[aria-controls="nav-menu"]{
    margin-top: 10px !important;          /* top spacing */
    display: inline-block !important;      /* prevents margin-collapsing quirks */
    text-align: center;                    /* centers the label + bars within */
    background: #41ABF4 !important;
    padding: 5px;
    border: 0;
    border-radius: 5px;
  }

  /* (2) Put the word MENU above the bars (mobile only) */
  .sppb-responsive-bars[aria-controls="nav-menu"]::before{
    content: "MENU";
    display: block;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    color: #8C47AC;
    line-height: 1;
    letter-spacing: .05em;
    margin-bottom: 6px;                    /* gap between label and bars */
  }

  /* IMPORTANT: do NOT style .sppb-responsive-bar. We leave bars as SPPB defines. */
}

/* =================================================
   OPENED MOBILE MENU: width, padding, spacing, shape
   ================================================= */
@media (max-width: 991.98px){

  /* Reset list defaults just in case */
  #nav-menu{ margin: 0; padding: 0; text-align: center; }
  #nav-menu ul{ list-style: none; margin: 0; padding: 0; }

  /* (3) Bring items closer vertically */
  #nav-menu li{
    list-style: none;
    margin: 2px 0 !important;              /* tighter vertical gap between items */
  }

  /* (4a/4b) Not full width, cap L/R padding at 10px, equal 10px corners */
  #nav-menu a{
    display: inline-block !important;       /* prevents full-width rows */
    width: auto !important;
    max-width: calc(100% - 20px);           /* keeps edges clear on narrow phones */
    padding: 2px 10px !important;           /* <= 10px left/right */
    border-radius: 10px !important;         /* equal rounding on all corners */
    text-decoration: none;
    box-sizing: border-box;

    /* theming knobs for the item background (still supported) */
    background: var(--menu-item-bg, rgba(0,0,0,0.06));
    border: var(--menu-item-border, 0);

    /* NEW: smooth glow transition */
    transition: box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
  }

  /* Hover/active feedback (optional) */
  #nav-menu a:hover,
  #nav-menu li.active > a{
    background: var(--menu-item-bg-hover, rgba(0,0,0,0.12));
  }

  /* ===== NEW: INNER GLOW when the hamburger menu is OPEN =====
     Your <nav> carries class "open" when visible, so we key off that. */
  nav[aria-label="Menu"].open #nav-menu a{
    /* subtle inner glow in #8C47AC */
    box-shadow:
      inset 0 0 10px 2px rgba(140, 71, 172, 0.50),
      inset 0 0 1px 1px rgba(140, 71, 172, 0.35);
    /* optional: a 1px border to complement the glow — comment out if not needed */
    border: 1px solid rgba(140, 71, 172, 0.55);
  }

  /* Intensify on hover while open (optional) */
  nav[aria-label="Menu"].open #nav-menu a:hover{
    box-shadow:
      inset 0 0 12px 3px rgba(140, 71, 172, 0.70),
      inset 0 0 1px 1px rgba(140, 71, 172, 0.45);
    border-color: rgba(140, 71, 172, 0.70);
  }
}

/* Existing color tweaks */
#sppb-addon-41aa3296-1ceb-4ff4-83c6-0aed4979f585 .sppb-responsive-bars.open {
    background-color: #41ABF4 !important;
}

.sppb-responsive-bar {
    background-color: #8C47AC !important;
}

/* ----- Start Seam killer ++ (all sizes/orientations) ----- */

/* 1) Make sure both sections and common wrappers share the same bg */
:root { --site-bg: #43C0FF; } /* <-- keep this matching your page bg */
#sp-navigation,
#sp-navigation .container,
#sp-navigation .container-inner,
#sp-wij-zijn,
#sp-wij-zijn .container,
#sp-wij-zijn .container-inner{
  background: var(--site-bg) !important;
}

/* 2) Stop margin-collapsing & force crisp compositing */
#sp-navigation,
#sp-wij-zijn{
  position: relative;
  isolation: isolate;
  overflow: hidden;           /* <— prevents child top/bottom margins poking out */
  transform: translateZ(0);   /* <— avoids sub-pixel seams on some DPRs */
  backface-visibility: hidden;
  border: 0 !important;
  box-shadow: none !important;
}

/* 3) Slightly thicker “paint-over” strips to cover any hairline */
#sp-navigation::after,
#sp-wij-zijn::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 4px;                /* was 2px — make it more forgiving */
  background: var(--site-bg);
  z-index: 2;
  pointer-events: none;
}
#sp-navigation::after{ bottom: -4px; } /* paints *below* nav */
#sp-wij-zijn::before{  top: -4px;    } /* paints *above* next section */

/* 4) Belt & suspenders: kill template separators anywhere in these sections */
#sp-navigation > .container::before,
#sp-navigation > .container::after,
#sp-wij-zijn > .container::before,
#sp-wij-zijn > .container::after,
#sp-navigation .row,
#sp-wij-zijn .row{
  content: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 5) If you *still* catch a ghost line in rare DPRs, enable this tiny overlap.
   It visually keeps the gap the same (difference is ~1px, usually invisible). */
@supports (margin-bottom: -1px){
  #sp-navigation{ margin-bottom: -1px; }   /* overlap next section by 1px */
  #sp-wij-zijn{ padding-top: calc(1px + 0px); } /* add that 1px back as padding */
}

/* ----- End Seam killer ++ (all sizes/orientations) ----- */

/* -------- Start hide burger menu when menu items re open -------- */

/* Works at all breakpoints: hide burger while menu is open,
   and keep 10px of space above the first menu item */

/* A) If SPPB toggles .open on the burger itself */
.addon-root-navigation .sppb-responsive-bars.open{
  display: none !important;
}
.addon-root-navigation .sppb-responsive-bars.open + nav{
  padding-top: 10px !important;   /* space above items when burger is hidden */
}

/* B) If SPPB toggles .open on <nav> instead (Chromium/Safari/Edge support :has) */
.addon-root-navigation .sppb-link-list-wrap:has(nav.open) .sppb-responsive-bars{
  display: none !important;
}
.addon-root-navigation .sppb-link-list-wrap:has(nav.open) nav{
  padding-top: 10px !important;   /* same top space */
}

/* Extra safety: if a "MENU" label is injected via ::before on the burger, hide it too */
.addon-root-navigation .sppb-responsive-bars.open::before{
  display: none !important;
}
.addon-root-navigation .sppb-link-list-wrap:has(nav.open) .sppb-responsive-bars::before{
  display: none !important;
}

/* Firefox fallback (if :has isn't available): at least ensure the top space when nav is open */
.addon-root-navigation nav.open{
  padding-top: 10px !important;
}

/* -------- End hide burger menu when menu items re open -------- */

/* ==============  END styling offcanvas - hamburger navigation menu and sub items =========== */



/* ========== Start styling Wij Zijn SalsaPlatform section ============== */

.slogan_wij_zijn {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  font-family: 'Berkshire Swash', 'Puppies Play', sans-serif;
  font-size: 45px !important;
  /*color: #F4007F !important;*/
  color: #8E44AD !important;
  text-decoration: none;
  text-align: center;

  /* === Glow effect === */
  text-shadow: 
    0 0 3px #FCEA30,   /* small inner glow */
    0 0 3px #FCEA30,  /* medium glow */
    0 0 4px #FCEA30;  /* outer glow */
    
  /* === Prevent clipping === */
  line-height: 1.2em !important;   /* ensures vertical space above/below */
  padding: 0.3em 0 !important;     /* adds extra room for glow */
  overflow: visible !important;    /* makes sure shadows aren’t clipped */
  display: inline-block;           /* safer box sizing for text */
}

/* Start regulating background image resize / crop for mobiles */

/* DESKTOP/TABLET – fill the area, keep proportion, crop overflow */
.sp-page-builder .page-content #section-id-0eb418bc-6e41-488c-a55d-ee71734e7a94{
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: cover !important;   /* fills without distortion, excess is hidden */
  background-attachment: scroll !important; /* avoid mobile zoom/shift issues */
  overflow: hidden; /* make sure any overflow is clipped */
}

/* MOBILE – if you prefer less cropping on very small screens */
@media (max-width: 576px){
  .sp-page-builder .page-content #section-id-0eb418bc-6e41-488c-a55d-ee71734e7a94{
    background-size: contain !important; /* show full image, still proportional */
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
  }
}
/* Stop regulating background image resize / crop for mobiles */


/* Start regulating forground image / logo on "Wij zijn" */

/* —— 1) Nuke SP Page Builder default spacing for THIS addon —— */
#sppb-addon-wrapper-a1024aa9-7754-4d7b-8204-f6cbdb139611 { margin:0 !important; }
#sppb-addon-a1024aa9-7754-4d7b-8204-f6cbdb139611 { padding:0 !important; }
#sppb-addon-a1024aa9-7754-4d7b-8204-f6cbdb139611 .sppb-addon,
#sppb-addon-a1024aa9-7754-4d7b-8204-f6cbdb139611 .sppb-addon-text-block,
#sppb-addon-a1024aa9-7754-4d7b-8204-f6cbdb139611 .sppb-addon-content {
  margin-top:0 !important;
  margin-right:0 !important;
  margin-bottom:15px !important;
  margin-left:0 !important;
  padding:0 !important;
}

/* Some Helix/Builder themes add a bottom margin on .sp-module — trim it here if this block is inside a module */
#sppb-addon-wrapper-a1024aa9-7754-4d7b-8204-f6cbdb139611 .sp-module { margin-bottom:0 !important; }

/* —— 2) Trim the font’s extra leading and stop margin-collapsing —— */
.slogan_wij_zijn{
  margin:0 !important;
  padding:0 !important;

  /* Tighten vertical space created by the font metrics */
  line-height: 0.95;           /* adjust between 0.90–1.00 to taste */

  /* Prevent margin-collapsing and let the box fit the text */
  display:inline-block;        
  vertical-align:middle;

  /* If space still shows (from font’s inner box), clip it: */
  overflow: hidden;            /* safe for single-line; remove if multi-line is needed */
}

/* —— 3) Safety: avoid section/row gutters adding vertical space here —— */
#sppb-addon-wrapper-a1024aa9-7754-4d7b-8204-f6cbdb139611 .sppb-row,
#sppb-addon-wrapper-a1024aa9-7754-4d7b-8204-f6cbdb139611 .sppb-column,
#sppb-addon-wrapper-a1024aa9-7754-4d7b-8204-f6cbdb139611 .sppb-section {
  margin:0 !important;
  padding:0 !important;
}

/* —— Keep only the BG rules you already have. The code below is FOREGROUND only —— */

/* 1) Column as a flex stack so we can pin the logo to the bottom */
#section-id-0eb418bc-6e41-488c-a55d-ee71734e7a94 #column-id-4bcb3de2-c2cb-47b7-a058-5471d8ba73ad{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;   /* center horizontally */
}

/* 2) Push THIS image addon to the bottom of the section */
#sppb-addon-wrapper-459d5cbf-53fb-4980-8443-603651b1a006{
  margin-top: auto !important;      /* pushes it to the bottom in the flex column */
}

/* 3) Cancel SPB's width:100% rule and keep a fixed desktop size */
#sppb-addon-459d5cbf-53fb-4980-8443-603651b1a006 .sppb-addon-single-image-container{
  width: auto !important;
  display: block !important;
  text-align: center !important;
}
#sppb-addon-459d5cbf-53fb-4980-8443-603651b1a006 .sppb-addon-single-image-container img.sppb-img-responsive{
  width: 671px !important;          /* desktop: exact design width */
  max-width: 671px !important;
  height: auto !important;          /* keep proportion */
  display: block !important;
  margin: 0 auto !important;
}

/* 4) Mobile: scale down, never exceed native width */
@media (max-width: 767.98px){
  #sppb-addon-459d5cbf-53fb-4980-8443-603651b1a006 .sppb-addon-single-image-container img.sppb-img-responsive{
    width: 90vw !important;         /* shrink with viewport */
    max-width: 671px !important;    /* never upscale past native */
    height: auto !important;
  }
}
/* Stop regulating forground image / logo on "Wij zijn" */

/* ========== End styling Wij Zijn SalsaPlatform section ============== */


/* ============== Start styling slideshow section =================== */

/* START styling gradient border on top of slide show */
#sp-image-slideshow{
  position: relative;
  isolation: isolate;
  --top-width: 5px;     /* set to 0 to hide */
  --bottom-width: 0px;   /* set to >0 to show */
  --c1: #8E44AD;        /* left color */
  --c2: #00BFFF;        /* middle color */
  --c3: #8E44AD;        /* right color */
  --split1: 55%;        /* where c1 blends into c2 */
  --split2: 90%;        /* where c2 blends into c3 */
}

/* draw gradient “borders” on top of all slider layers */
#sp-image-slideshow::before,
#sp-image-slideshow::after{
  content:"";
  position:absolute;
  left:0; right:0;
  pointer-events:none;
  z-index:2147483647;
}

/* top line */
#sp-image-slideshow::before{
  top:0; height: var(--top-width);
  background: linear-gradient(
    90deg,
    var(--c1) 15%,
    var(--c2) var(--split1),
    var(--c3) var(--split2),
    var(--c3) 100%
  );
}
/* END styling gradient border on top of slide show */

/* ===== START  styling for introduction_story " Een enthousiast team .... " ===== */
.introduction_story {
  /* Center content horizontally & vertically */
  display: flex;
  flex-direction: column;   /* stack elements top to bottom */
  justify-content: center;  /* vertical centering */
  align-items: center;      /* horizontal centering */

  /* Optional: define a height if you want true vertical centering within a box */
  min-height: 550px;  /* adjust or remove as needed */

  text-align: center;       /* center text inside */

  /* Standard text defaults */
  font-family: Arial, sans-serif; /* change font here */
  font-size: 30px;                /* default text size */
  color: #ffffff;                 /* default text color */

  /* 1px outline around text using shadows */
  text-shadow:
    -1px -1px 0 #00000070,  /* top-left */
     1px -1px 0 #00000070,  /* top-right */
    -1px  1px 0 #00000070,  /* bottom-left */
     1px  1px 0 #00000070;  /* bottom-right */    
}

/* Customize H1 inside the block */
.introduction_story h1 {
  font-family: 'Poppins', sans-serif; /* change font for H1 */
  font-weight: bold;
  font-size: 45px;                    /* H1 size */
  color: #ffffff;                     /* H1 color */
  margin: 10px 0;                     /* control spacing */

  /* 1px outline around text using shadows */
  text-shadow:
    -1px -1px 0 #00000070,  /* top-left */
     1px -1px 0 #00000070,  /* top-right */
    -1px  1px 0 #00000070,  /* bottom-left */
     1px  1px 0 #00000070;  /* bottom-right */  
}

/* Customize H2 inside the block with outline */
.introduction_story h2 {
  font-family: 'Poppins', sans-serif; /* change font for H2 */
  font-weight: bold;
  font-size: 45px;                    /* H2 size */
  color: #C0FF33;                     /* H2 fill color */
  margin: 8px 0;

  /* 1px outline around text using shadows */
  text-shadow:
    -1px -1px 0 #00000070,  /* top-left */
     1px -1px 0 #00000070,  /* top-right */
    -1px  1px 0 #00000070,  /* bottom-left */
     1px  1px 0 #00000070;  /* bottom-right */
}

/* ===== START control: Intro section: fluid, non-clipping text ===== */

/* === MOBILE-ONLY FIX (portrait & small tablets) === */
@media (max-width: 767.98px){

  /* 1) Stop clipping and give a bit more width on small screens */
  .sp-page-builder .page-content
  #section-id-65708f8f-815c-42a7-92a0-d8e8e3ee74a0{
    max-height: none !important;      /* allow content to grow */
    overflow-y: visible !important;    /* don't hide overflow */
    /* keep your desktop padding; only relax it on mobile so text wraps less */
    padding-left: 6vw !important;
    padding-right: 6vw !important;
    min-height: auto !important;       /* no forced tall box on phones */
  }

  /* 2) Keep text centered within this section */
  #sppb-addon-dc9214ec-ef6b-4109-a09e-08ab9717c275 .sppb-addon-text-block .sppb-addon-content,
  #sppb-addon-dc9214ec-ef6b-4109-a09e-08ab9717c275 .introduction_story{
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* 3) Slightly smaller, readable type on small screens (desktop unchanged) */
  #sppb-addon-dc9214ec-ef6b-4109-a09e-08ab9717c275 .introduction_story h1{
    font-size: clamp(22px, 7vw, 36px);
    line-height: 1.2;
    margin: 0 0 .4em 0;
    text-wrap: balance;
    hyphens: auto;
    overflow-wrap: anywhere;
  }

  #sppb-addon-dc9214ec-ef6b-4109-a09e-08ab9717c275 .introduction_story{
    font-size: clamp(16px, 4.2vw, 18px);
    line-height: 1.35;
  }

  #sppb-addon-dc9214ec-ef6b-4109-a09e-08ab9717c275 .introduction_story h2{
    font-size: clamp(18px, 4.8vw, 24px);
    line-height: 1.2;
    margin-top: .7em;
    text-wrap: balance;
  }
}

/* OPTIONAL: ultra-small phones */
@media (max-width: 360px){
  #sppb-addon-dc9214ec-ef6b-4109-a09e-08ab9717c275 .introduction_story h1{ font-size: 20px; }
  #sppb-addon-dc9214ec-ef6b-4109-a09e-08ab9717c275 .introduction_story h2{ font-size: 17px; }
}

/* =========================================================
   HERO PATCHES for specific devices/orientations
   Section: #section-id-65708f8f-815c-42a7-92a0-d8e8e3ee74a0
   Text:    #sppb-addon-dc9214ec-ef6b-4109-a09e-08ab9717c275
   ========================================================= */

/* iPad mini — PORTRAIT (768–834 wide) */
@media (min-width: 768px) and (max-width: 834px) and (orientation: portrait){
  .sp-page-builder .page-content #section-id-65708f8f-815c-42a7-92a0-d8e8e3ee74a0{
    /* stop clipping + widen usable text area */
    max-height: none !important;
    overflow-y: visible !important;
    padding-left: 8vw !important;
    padding-right: 8vw !important;
    min-height: auto !important;
  }
  #sppb-addon-dc9214ec-ef6b-4109-a09e-08ab9717c275 .sppb-addon-content,
  #sppb-addon-dc9214ec-ef6b-4109-a09e-08ab9717c275 .introduction_story{
    text-align: center !important;
    margin-left: auto; margin-right: auto;
  }
}

/* iPad Pro — LANDSCAPE (1024–1366 wide)
   also covers Nest Hub Max (1280x800) */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape){
  .sp-page-builder .page-content #section-id-65708f8f-815c-42a7-92a0-d8e8e3ee74a0{
    max-height: none !important;
    overflow-y: visible !important;
    /* reduce side padding; SPPB uses 15% which is too narrow here */
    padding-left: 10vw !important;
    padding-right: 10vw !important;
    min-height: auto !important;
  }
  #sppb-addon-dc9214ec-ef6b-4109-a09e-08ab9717c275 .sppb-addon-content,
  #sppb-addon-dc9214ec-ef6b-4109-a09e-08ab9717c275 .introduction_story{
    text-align: center !important;
  }
}

/*  Zenbook Fold — LANDSCAPE with short height
   (e.g., 1366x912, 1920x1280, etc.) */
@media (min-width: 1200px) and (max-height: 900px) and (orientation: landscape){
  .sp-page-builder .page-content #section-id-65708f8f-815c-42a7-92a0-d8e8e3ee74a0{
    max-height: none !important;
    overflow-y: visible !important;
    /* make the column less narrow on these widescreen devices */
    padding-left: 8vw !important;
    padding-right: 8vw !important;
    min-height: auto !important;
  }
  #sppb-addon-dc9214ec-ef6b-4109-a09e-08ab9717c275 .sppb-addon-content,
  #sppb-addon-dc9214ec-ef6b-4109-a09e-08ab9717c275 .introduction_story{
    text-align: center !important;
  }
}

/* Optional: when the height is REALLY tight, gently scale headings
   to prevent bottom clipping without changing desktop layout */
@media (max-height: 820px) and (orientation: landscape){
  #sppb-addon-dc9214ec-ef6b-4109-a09e-08ab9717c275 .introduction_story h1{
    /* slight downscale only on tight-height landscapes */
    font-size: clamp(24px, 3.6vw, 40px);
    line-height: 1.18;
  }
  #sppb-addon-dc9214ec-ef6b-4109-a09e-08ab9717c275 .introduction_story h2{
    font-size: clamp(18px, 2.2vw, 28px);
    line-height: 1.2;
    margin-top: .6em;
  }
}

/* ================== Surface-class 3:2 LANDSCAPE fix ================== */
/* Primary match: Surface Pro 7 landscape (3:2 aspect, wide viewport) */
@media (orientation: landscape)
  and (min-width: 1200px)
  and (min-aspect-ratio: 149/100)   /* ≈1.49 */
  and (max-aspect-ratio: 151/100) { /* ≈1.51 */

  /* Widen the text area & stop clipping */
  .sp-page-builder .page-content
  #section-id-65708f8f-815c-42a7-92a0-d8e8e3ee74a0{
    /* Replace SPPB's 35% side padding with a much smaller, fluid value */
    padding-left: clamp(24px, 6vw, 96px) !important;
    padding-right: clamp(24px, 6vw, 96px) !important;

    /* Allow the hero to grow to fit wrapped lines */
    max-height: none !important;
    overflow-y: visible !important;

    /* Keep a pleasant hero height without forcing a cut-off */
    min-height: clamp(420px, 56vh, 680px) !important;
  }

  /* Keep your text centered */
  #sppb-addon-dc9214ec-ef6b-4109-a09e-08ab9717c275 .sppb-addon-content,
  #sppb-addon-dc9214ec-ef6b-4109-a09e-08ab9717c275 .introduction_story{
    text-align: center !important;
    margin-left: auto; margin-right: auto;
  }

  /* Gentle sizing in short-height 3:2 landscape so bottom never clips */
  #sppb-addon-dc9214ec-ef6b-4109-a09e-08ab9717c275 .introduction_story h1{
    font-size: clamp(26px, 3.0vw, 44px);
    line-height: 1.18;
    margin-bottom: .4em;
  }
  #sppb-addon-dc9214ec-ef6b-4109-a09e-08ab9717c275 .introduction_story{
    font-size: clamp(16px, 1.1vw + .6rem, 18px);
    line-height: 1.35;
  }
  #sppb-addon-dc9214ec-ef6b-4109-a09e-08ab9717c275 .introduction_story h2{
    font-size: clamp(18px, 1.2vw + .6rem, 28px);
    line-height: 1.2;
    margin-top: .6em;
  }
}

/* Fallback for other Surface scale factors (e.g., 1536×1024, 1920×1280 CSS px) */
@media (orientation: landscape)
  and (min-width: 1200px)
  and (max-height: 1100px) {         /* short-ish height laptops/tablets */

  .sp-page-builder .page-content
  #section-id-65708f8f-815c-42a7-92a0-d8e8e3ee74a0{
    padding-left: clamp(24px, 6vw, 96px) !important;
    padding-right: clamp(24px, 6vw, 96px) !important;
    max-height: none !important;
    overflow-y: visible !important;
    min-height: clamp(420px, 56vh, 680px) !important;
  }
}
/* ===== END control: Intro section: fluid, non-clipping text ===== */

/* ===== END styling for introduction_story " Een enthousiast team .... " ===== */

/* ============== End styling slideshow section =================== */




/* ============== Start styling Main Body elements =================== */
/* =================================================================== */
#sp-main-body .container {
    padding-left: 35px; /* .... Align left border of main body tekst with navigation item */
    padding-right: 15px;
}

/* Duo color main body */

/* Keep your solid fallback */
#sp-main-body { 
  background-color: #D0A600;
  border-top-color: #FF5500;
  border-top-width: 5px;
  border-top-style: solid;
  border-bottom-color: #FF5500;
  border-bottom-width: 3px;
  border-bottom-style: solid;   
}

/* Diagonal swirl (2–3 colors) */
#sp-main-body{
  /* ==== knobs to tweak ==== */
  --swirl-angle: 45deg;      /* direction of the swirl (0–360deg) */
  --center-x: 60%;           /* swirl center (x,y); try 30% / 70% */
  --center-y: 60%;

  /* Colors (use 8-digit HEX for transparency: #RRGGBBAA) */
  /* 1a=10% - 33=20% - 4D=30% - 66=40% - 80=50% - 99=60% - B3=70% - CC=80% - E6=90% - FF=100% */
  --c1: #D0A60080;           /* color 1 (base) */
  --c2: #8EB800FF;           /* color 2 */
  --c3: #00000000;           /* color 3, set to #00000000 for 2-color mode */

  /* Overlap control (where blends happen) — percentages around the circle */
  /* c1 solid up to p1, then blends to c2 by p2; c2 solid to p3, blends to c3 by p4 */
  --p1: 45%;
  --p2: 55%;                 /* width of c1→c2 blend = p2 - p1 */
  --p3: 70%;
  --p4: 88%;                 /* width of c2→c3 blend = p4 - p3 */

  /* Scale the swirl area (bigger = softer) */
  --swirl-size: 100%;
  
  /* Optional extra diagonal wash on top (set to #00000000 to disable) */
  --wash-c1: #FFFFFF10;
  --wash-c2: #00000000;

  /* ===== background layers ===== */
  background-image:
    /* 1) main swirl */
    conic-gradient(
      from var(--swirl-angle) at var(--center-x) var(--center-y),
      var(--c1) 0 var(--p1),
      var(--c2) var(--p2) var(--p3),
      var(--c3) var(--p4) 100%
    ),
    /* 2) soft diagonal wash to emphasize direction */
    linear-gradient(var(--swirl-angle), var(--wash-c1) 0%, var(--wash-c2) 100%);
  background-size: var(--swirl-size) var(--swirl-size), cover;
  background-blend-mode: normal, soft-light;
}

/* ============== END styling Main Body elements =================== */


/* ================= start styling footer elements ==================== */
#sp-footer .container-inner {
    padding: 30px 0;
    border-top: 1px solid rgba(138, 184, 0, 0.31); /* --- change color and oppacity of top border line ------ */
}

/* --- START  Tweaks for "Volg ons" + icons --- */
:root{
  --social-top-gap: 6px;     /* space under the heading */
  --social-gap: 8px;         /* space between icons */
  --social-icon-size: 32px;  /* actual icon (font) size */
  --social-hit-size: 40px;   /* clickable square size */
}

/* 1) Tighten space under the heading */
#sppb-addon-wrapper-60960593-4733-4f59-b6f3-11e50b9d167c .sppb-addon-title{
  margin: 0;                /* remove default heading margin */
}
#sppb-addon-wrapper-60960593-4733-4f59-b6f3-11e50b9d167c
  + #sppb-addon-wrapper-e4365443-2d8a-452a-8a70-a60818555323{
  margin-top: var(--social-top-gap);
}

/* 2) Control spacing between icons (uses modern flex gap) */
#sppb-addon-e4365443-2d8a-452a-8a70-a60818555323 .sppb-icons-group-list{
  display: flex;
  align-items: center;
  gap: var(--social-gap);
  padding: 0;               /* kill default UL padding */
  margin: 0;                /* kill default UL margin */
  list-style: none;
}

/* Remove legacy per-item margins SPPB put in */
#sppb-addon-e4365443-2d8a-452a-8a70-a60818555323 .sppb-icons-group-list li{
  margin: 0 !important;
  display: inline-flex;     /* keeps height tight */
}

/* Consistent icon box + centered icon */
#sppb-addon-e4365443-2d8a-452a-8a70-a60818555323 .sppb-icons-group-list a{
  width: var(--social-hit-size);
  height: var(--social-hit-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: none;
  padding: 0;
  font-size: var(--social-icon-size); /* icon size */
  margin: 0 !important;               /* override SPPB inline margin */
}

/* Optional: left align block like the heading (matches your current setting) */
#sppb-addon-e4365443-2d8a-452a-8a70-a60818555323 .sppb-addon-icons-group{
  text-align: left;
}

/* Small screens: give a touch more space if needed */
@media (max-width: 575.98px){
  :root{
    --social-gap: 10px;
  }
}
/* --- END  Tweaks for "Volg ons" + icons --- */






















/* ----- TEST SECTION ------- */