/* 
Theme Name: Divi Child 
Theme URL: https://sanotie.groeihero.nl/
Description: Unique Child 
Theme Author: Marije
Author URL: https://groeihero.nl/
Template: Divi 
Version: 1.0.0 
Text Domain: sanotie-child 
*/

/* ============================================================
   SANOTIE - STYLE003.CSS - GEORDENDE VERSIE
   Uitgangspunt: style002.css (werkend op staging).
   - Bestaande CSS-selectors en declaraties ongewijzigd.
   - Alle !important-declaraties exact behouden.
   - Mediaqueries blijven achter de gewone regels.
   - Critical en landing staan in aparte bestanden.
   - Inspiratie CSS wordt PAS later afgesplitst.
   ============================================================ */


/* ============================================================
   01  DESIGN TOKENS / FONTS
   Design tokens, spacing en typografie blijven de centrale bron.
   Bestaande variabelen en fontpaden zijn ongemoeid gelaten.
   ============================================================ */

@import url("https://use.typekit.net/nqa3kix.css");

@font-face {
    font-family: "palatino";
    src: url("/sanotie/fonts/palatino.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "palatino-italic";
    src: url("/sanotie/fonts/palatino-italic.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "palatino-bold";
    src: url("/sanotie/fonts/palatino-bold.ttf") format("truetype");
    font-display: swap;
}

:root {   
  /* Colors */
  --color-text: #444444;
  --color-blue: #70BDD9;
  --color-blue-75: rgba(112, 189, 217, 0.75);
  --color-gold: #BCA482;
   --color-marine: #001f3f;
   --color-lightgrey: #F8F7F7;
    --color-white: #ffffff;
    
 /* Spacing */
 --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  /* Shadows: --color-black is in the existing code undefined; audit later. */
  --shadow-md: 6px 6px 0 var(--color-black);
    
     /* Typography */

  --font-base: "palatino-linotype", serif;
  --font-base-italic: "palatino-linotype", serif;
  --font-display: "semplicitapro", sans-serif;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
}


/* ============================================================
   02  TYPOGRAPHY & BASE ELEMENTS
   Elementstijlen voor de gehele site. Sommige selectors zijn erg breed;
   deze zijn niet zonder visuele controle aangepast.
   ============================================================ */

html {
    scroll-snap-type: none;
}

html, body {
    max-width: 100%;

}

body {
    font-size: 18px;
    font-weight: 400;
    color: #444444;
    font-family: var(--font-base);
    background-color: #fff;
    scroll-snap-type: none;
}

.single .post:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

ul, h1, h2, h3 {
    padding: 0;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 0;
}

ol, ol li {
    list-style-position: outside !important;
}

body[style], span[style], p[style], li[style] {
    font-weight: inherit !important;
}

p, a, ul, li, div, span {
    text-transform: none;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    font-size: var(--font-size-base);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 800;
    font-style: normal;
    text-transform: none;
    overflow-wrap: normal;
    line-height: 1.6;
    text-align: left;
    font-variant-ligatures: none;
}

h1 {
    font-size: clamp(1.25rem, 2.5vw + 0.75rem, var(--font-size-3xl));
    color: var(--color-gold);
    font-weight: 700;
    margin-bottom: clamp(15px, 3vw, 15px);
    font-stretch: semi-condensed;
    line-height: 1.3;
}

h2 {
    font-size: clamp(1.125rem, 2vw + 0.75rem, var(--font-size-2xl));
    color: var(--color-gold);
    margin-bottom: clamp(15px, 2.5vw, 20px);
    font-weight: 600;
}

h3 {
    font-size: clamp(1.125rem, 1.5vw + 0.75rem, 1.75rem);
    color: var(--color-gold);
    padding-top: clamp(1.5em, 3vw, 2em);
    padding-bottom: clamp(10px, 2vw, 15px);
    font-weight: 600;
}

h4, h5, h6 {
    font-weight: 500;
    font-style: normal;
    text-transform: none;
    line-height: 1.6;
}

h4 {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1vw + 0.75rem, var(--font-size-xl));
    font-weight: 600;
    font-style: normal;
    color: #001f3f;
}

h5 {
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 0.75vw + 0.75rem, var(--font-size-lg));
    color: #444444;
    padding-bottom: clamp(10px, 2vw, 15px);
    font-weight: 600;
}

.caps h5 {
    text-transform: uppercase;
}

/* Paragraph styling */
.et_pb_text_inner p {
    margin-bottom: 26px;
    font-size: 1em;
}

.et_pb_text_inner p:not(.has-background):last-of-type {
    margin-bottom: 0;
}

.et-search-form, blockquote {
border-color: #70BDD9;
}

.indent blockquote h3, .quote h3 {
    margin-left: 0;
    font-family: var(--font-base);
    font-style: italic;
    font-weight: 400;
    padding-top: 15px;
}

/* Links and text decorations */
a:hover {
    text-decoration: none !important;
    color: var(--color-gold);
}

::selection, ::-moz-selection {
    color: #444444;
    background: rgba(0,177,170,0.12);
}

/* Accessibility toolbar position */
#pojo-a11y-toolbar.pojo-a11y-toolbar-left .pojo-a11y-toolbar-toggle {
    top: 70px;
}

/* Text formatting */
em, i {
    font-family: "palatino-italic", serif;
    font-weight: 400;
    font-style: italic;
}

b, strong {
    font-weight: 600;
}

li:before {
    list-style: none;
}

.nobreak {
    white-space: nowrap;
}


/* ============================================================
   03  LAYOUT & GENERAL PAGE SETTINGS
   Gedeelde rijen, kolommen en praktische hulpelementen.
   ============================================================ */

.rij-titel{
    margin-bottom: 0;
    padding:38px 0 0 0;
}

.gelijk .et_pb_column {
    margin: auto;
}

.gelijk.links .et_pb_column {
    margin: auto auto auto 0;
}

/* Row spacing helpers */
.rij-boven, .nieuwssectie {
    padding: 27px 0 0 0 !important;
}

.nieuwssectie{
    margin-bottom:0 !important;
}

.rij-onder {
    padding: 0 0 27px 0 !important;
}

.rij-midden, .sectie-onder {
    padding: 0 !important;
}

.goto{
     position: fixed !important;
  right: 0em !important;
  bottom: 0.2em !important;
  z-index: 9999 !important;
    padding: 0.4em 0.75em;
    opacity: .6;
    background:transparent;
}

.goto .et_pb_button{
     background-color:var(--color-marine);
    border: 0;
font-size: var(--font-size-sm);
border-radius: 3px;
}


/* ============================================================
   04  HEADER / MENU
   Navigatie op basis van bestaande Divi 4-selectors.
   ============================================================ */

#top-menu a {
    font-family: "semplicitapro", sans-serif;
    font-weight: 500;
    font-size: 1.15rem;
}

.et_header_style_left .logo_container {
    border-bottom: 0.5px solid var(--color-gold);
}


/* ============================================================
   05  BUTTONS & LINKS
   Bestaande !important-regels blijven intact, ook bij hoverstates.
   De noodzaak per selector beoordelen we later per module.
   ============================================================ */

/* Page link styles */
.page-link {
    text-align: center;
    text-decoration: none;
    margin-bottom: 20px;
    margin-top: 50px;
}

.page-link-left {
    text-align: left;
    text-decoration: none;
}

.page-link .et_pb_text_inner,
.page-link-left .et_pb_text_inner {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.page-link a {
    text-align: center;
    text-decoration: none !important;
}

.page-link.wit a {
    color: #fff;
}

.page-link-left a {
    text-align: left;
    text-decoration: none !important;
}

/* Animated underline effect for links */
.page-link a::before {
    background-color: #70BDD9;
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4px;
    height: 2px;
    width: 0;
    opacity: 0;
    display: block;
    transform: translate(-50%, 0);
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.page-link.wit a::before {
    background-color: #fff;
}

.page-link-left a::before {
    background-color: #70BDD9;
    content: "";
    position: absolute !important;
    left: 0;
    bottom: -4px;
    height: 2px;
    width: 0;
    opacity: 0;
    display: block;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.page-link:hover a::before,
.page-link-left:hover a::before {
    width: 100%;
    opacity: 1;
}

/* Button styles */
.et_pb_button:after {
    display: none !important;
}

.et_pb_button_module_wrapper {
    text-align: center;
}

.et_pb_button, .wpcf7-submit {
    background-color: var(--color-gold);
    border: 2px solid var(--color-gold);
    color: #fff !important;
    border-radius: 0;
    font-size: 1.2rem;
}

.et_pb_button:hover, .et_pb_button, .wpcf7-submit:hover, .wpcf7-submit {
   padding: 0.75em 1.5em !important;
}

.knop.et_pb_button:hover, .wpcf7-submit:hover {
    background-color: var(--color-marine);
    border: 2px solid var(--color-marine);
   padding: 0.75em 1.5em !important;

}

.et_pb_button:hover, .et_pb_module .et_pb_button:hover, .wpcf7-submit:hover {
background-color: var(--color-gold);
border: 2px solid var(--color-gold);
color:var(--color-blue);
   padding: 0.75em 1.5em !important;
}

.et_pb_bg_layout_light.et_pb_button:hover, .et_pb_bg_layout_light .et_pb_button:hover {
background-color: rgba(0,0,0,.05);
}

.et_pb_button:hover, .et_pb_module .et_pb_button:hover
.et_pb_button:hover,
.et_pb_module .et_pb_button:hover,
.wpcf7-submit:hover {
    background-color: var(--color-marine);
        border: 2px solid var(--color-marine);
    color: #fff; /* geel */
    opacity: 1;
}

.contact input.wpcf7-submit {
    border: 0 none !important;
    width: auto;
}

.wpcf7-submit {
    width: auto;
}

.et_pb_button a {
    color: #fff; /* wit */
}

/* Remove button after pseudo-elements */
.knop:after,
.et_pb_button:after,
.et_pb_button a:after,
input:after.wpcf7-submit,
input[type="submit"]::after,
.et_pb_button a:hover:after,
.et_pb_button:hover:after,
input.wpcf7-submit:hover:after {
    display: none;
}


/* ============================================================
   06  FORMS / CONTACT / WHATSAPP
   Voor Divi-contactformulieren en Contact Form 7.
   In CSS staan ook algemene selectors .contact en .contact7.
   ============================================================ */

.sectie-contact-boven {
    margin-top: -10%;
}

/* Form title styling */
.contact h1.et_pb_contact_main_title {
    color: var(--color-gold);
    padding: 5% 0 0 5%;
    font-weight: 600;
    font-family: "InkFree", serif;
    font-size: 3em !important;
}

.contact .et_pb_contact_form {
    padding: 5%;
}

.contact .et_pb_contact_form_label {
    display: none;
    font-family: sofia-pro, sans-serif;
    color: var(--color-gold);
    font-size: 15pt;
    font-style: italic;
    margin-bottom: 15px;
}

/* Form field styling */
.contact .et_pb_contact_form_container .input::placeholder {
    color: transparent;
}

.contact .et_pb_contact_field_options_title {
    display: none;
}

.contact .et_pb_contact_field[data-type=select] .et_pb_contact_form_label {
    display: none;
}

.contact .et_pb_contact input, 
.contact .et_pb_contact textarea,
.contact7 textarea, 
.contact7 input {
    width: 100%;
    border: 2px var(--color-gold) solid;
    border-radius: 3px;
    font-size: 1em;
    padding: 2%;
}

.contact7 .wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--color-gold);
    background: #fff;
}

.et_pb_contact p input, 
.et_pb_contact p textarea,
.blauw p input::placeholder, 
.blauw p textarea::placeholder {
    -webkit-appearance: none;
    width: 100%;
    border-radius: 3px;
    color: #161616; /*Grijs */
}

.contact7 .wpcf7-not-valid-tip {
    color: #fff;
}

/* Contact7 form styling */
.contact7 div:first-child {
    padding-bottom: 20px;
}

.contact7 h4 {
    margin: 20px 0;
}

.contact7 .wpcf7-list-item,
.contact7 label {
    display: flex;
}

.contact7 .wpcf7-list-item {
    margin: 0;
}

.contact7 .wpcf7-list-item:not(:last-child) {
    margin-bottom: 10px;
}

.contact7 label {
    cursor: pointer;
}

/* Custom radio & checkbox styling */
.contact7 [type="radio"],
.contact7 [type="checkbox"] {
    position: absolute;
    left: -9999px;
}

.contact7 [type="radio"] + .wpcf7-list-item-label,
.contact7 [type="checkbox"] + .wpcf7-list-item-label {
    position: relative;
    padding-left: 30px;
    line-height: 20px;
}

.contact7 [type="radio"] + .wpcf7-list-item-label::before,
.contact7 [type="checkbox"] + .wpcf7-list-item-label::before,
.contact7 [type="radio"] + .wpcf7-list-item-label::after,
.contact7 [type="checkbox"] + .wpcf7-list-item-label::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
}

.contact7 [type="radio"] + .wpcf7-list-item-label::before,
.contact7 [type="radio"] + .wpcf7-list-item-label::after {
    border-radius: 50%;
}

.contact7 [type="radio"] + .wpcf7-list-item-label::before,
.contact7 [type="checkbox"] + .wpcf7-list-item-label::before {
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-gold);
}

.contact7 [type="radio"] + .wpcf7-list-item-label::after,
.contact7 [type="checkbox"] + .wpcf7-list-item-label::after {
    top: 5px;
    left: 5px;
    width: 10px;
    height: 10px;
    background: #70BDD9;
    transition: all 0.2s;
}

.contact7 [type="radio"]:not(:checked) + .wpcf7-list-item-label::after,
.contact7 [type="checkbox"]:not(:checked) + .wpcf7-list-item-label::after {
    opacity: 0;
    transform: scale(0.01);
}

.contact7 [type="radio"]:checked + .wpcf7-list-item-label::after,
.contact7 [type="checkbox"]:checked + .wpcf7-list-item-label::after {
    opacity: 1;
    transform: scale(1);
}

.contact7 [type="radio"]:focus + .wpcf7-list-item-label::before,
.contact7 [type="checkbox"]:focus + .wpcf7-list-item-label::before {
    box-shadow: 0 0 4px 3px #70BDD9;
}

/* Contact info styling */
.contactgegevens img {
    width: 80%;
    max-width: 70px;
    margin: 0 auto;
}

.whatsapp.et_pb_code_0{
    padding-top:0 !important;
    margin-top:-15px;
}

.waicon, .watxt {
float:left;
}

.waicon {
width:75px;
    margin-right:10px;
margin-top: -20px;
}

.watxt {
   margin-top: 20px;
}

.whatsapp svg.bi.bi-whatsapp{
width: 72px !important;
height: 72px !important;
    padding:5px;
}


/* ============================================================
   07  SHARED COMPONENTS
   Herbruikbare blokken zoals overlays, sliders, FAQ en logoroller.
   Niet aan een specifieke URL toegewezen zonder controle.
   ============================================================ */

.trainingen .overlay-container {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1; /* square ratio */
}

.coaching .overlay-container {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 1; 
}

.overlay-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.4s ease;
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  transition: all 0.4s ease;
}

.overlay-default {
  background-color: rgba(112,   189,   217, 0.75); /* lighter background */
  opacity: 1;
      border: 1px solid rgba(112,189, 217, 1); 

}

.overlay-default h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  text-shadow: 0 2px 6px rgba(255, 255, 255, 0.5);
text-align: center;
color:#fff;
}

.overlay-hover {
  background-color: rgba(0, 0, 0, 0.65); /* darker overlay */
  opacity: 0;
          border: 1px solid rgba(255, 255, 255, 1); 

}

/* White frame and paragraph */
.overlay-hover .frame {
  border: 2px solid #fff;
  padding: 1rem;
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.overlay-hover p {
  color: #fff;
  margin: 0;
  font-size: 1rem;
}

.overlay-container:hover .overlay-default {
  opacity: 0; /* fade out title layer */
}

.overlay-container:hover .overlay-hover {
  opacity: 1; /* fade in darker layer with frame */
}

.overlay-container:hover img {
  filter: brightness(70%);
}

.section-swiper{
      background-color: var(--color-lightgrey);
  
}

.swiper {
    width: 100%;
    max-width: 900px;
    margin: auto;
    padding-bottom: 70px !important;
    overflow: hidden;
}

/* Swiper wrapper moet horizontaal flexen */
.swiper-wrapper {
    display: flex;
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    transition-property: transform;
}

/* Slide styling */
.swiper-slide {
    flex-shrink: 0;
    align-items: center !important;
    justify-content: center !important;
    height: 280px !important;
    border: .3px solid var(--color-blue);
    padding: 2%;
    background-color: var(--color-white);
    position: relative;
    overflow: visible;
}

.swiper-pagination-bullet-active {
    background: var(--swiper-pagination-color, var(--color-blue)) !important;
}

.swiper-slide img {
    max-height: 130px;
    max-width: 90%;
    width: auto !important;
    object-fit: contain;
    border-radius: 10px;
}

.swiper.mySwiper {
    overflow: hidden;
}

.swiper-slide::after {
content: "";
position: absolute;
right: -10px;
bottom: 40px;
width: 150px;
height: 150px;
background: url("/wp-content/uploads/2026/03/traininer-cursus-10.svg") no-repeat center;
background-size: contain;
pointer-events: none;
}

/* Center pagination dots */
.swiper-pagination {
    position: absolute;
    bottom: 10px !important;
    left: 0 !important;
    transform: none !important;
    text-align: center;
    width: 100%;
}

/* Style pagination dots */
.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #888;
    opacity: 0.7;
    transition: all 0.3s ease;
    display: inline-block;
    margin-right: 1em;
    border-radius: 50%;
}

.swiper-pagination-bullet-active {
    background-color: var(--color-blue);
    opacity: 1;
}

/* Container for scrolling logos */
.auto-scroll-gallery {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.auto-scroll-gallery .et_pb_gallery_items {
  display: inline-flex !important;
  animation: scroll-logos 90s linear infinite;
  width: max-content;
}

.auto-scroll-gallery .et_pb_gallery_item {
  flex-shrink: 0;
}

@keyframes scroll-logos {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Pause on hover (optional) */
.auto-scroll-gallery:hover .et_pb_gallery_items {
  animation-play-state: paused;
}

/* Control logo size */
.auto-scroll-gallery .et_pb_gallery_item {
  width: 150px !important;  /* Adjust this value */
  height: auto;
  margin: 0 30px;  /* Spacing between logos */
}

.auto-scroll-gallery .et_pb_gallery_image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.auto-scroll-gallery .et_overlay{
    display:none;
}

.auto-scroll-gallery .et_pb_gallery_item{
    margin-right:2em!important;
}

/* Remove any hover effects */
.auto-scroll-gallery .et_pb_gallery_item:hover {
  transform: none;
}

/* Ensure logos stay centered vertically */
.auto-scroll-gallery .et_pb_gallery_items {
  align-items: center;
}

/*faq*/
.faq .et_pb_toggle {
border: 0 none #fff;
}

.faq .et_pb_toggle {
border: 0;
border-bottom:1px solid #444444;
}

.faq h5.et_pb_toggle_title,
.faq h3.et_pb_toggle_title {
color: var(--color-gold);
    text-align: left;
    font-size: 1.125rem;
    margin-left:0;
}

.faq .et_pb_toggle_open {
padding: 0 0 20px 0;
}

.et_pb_toggle_close {
background-color: #fff;
padding: 0 0 20px 0;
}

/* Lists inside socials slider */
.socials-slider .et_pb_slide_content ol,
.socials-slider .et_pb_slide_content ul {
    list-style-position: inside !important;     /* Numbers/bullets move inward */
    padding-left: 25px;              /* Fake left indent */
    color: #fff;                     /* List markers white */
    text-align:left;
    margin-left: 30%;
}

/* List items */
.socials-slider .et_pb_slide_content li {
    color: #000;                     /* Text black */
    font-size: 1.2em;                /* Slightly bigger text */
    padding-left: 5px;               /* Small indent to center text a bit */
}

.socials-slider .et_pb_slide_content li::marker {
    color: #fff !important;
}

/* end video */
.socials-slider{
          background-color:#70bdd9;  

}

.socials-slider .et_pb_slide_description{
padding: 8%;

}

.socials-slider h2, .socials-slider h3{
    font-family: "semplicitapro", sans-serif;
    font-weight: 800 !important;

    font-stretch: semi-condensed;
text-align: center;
}

.socials-slider h3{
    font-size: 1.5em;

}

.socials-slider p, .socials-slider h3 span, 
.socials-slider p span, .socials-slider h2 span,
.socials-slider span{
    color: #001f3f;
font-size: 1.3em;
    font-family: palatino, serif;
    font-style: normal;
    text-align: left;

}

.socials-slider p em{
    color: #001f3f;
    font-weight: 700;
font-family: "palatino-italic", serif;
}

.socials-slider h2 span{
   font-size: 1.7em;
     color: #ffffff;

}

.socials-slider h3 span{
   font-size: 1.7em;

}

.bericht h3{
   text-align:left;
}

.bericht p, .bericht li{
   text-align:left;
    padding-left:1.5em;
}

.bericht ul{
margin-left:2em;
}

.bericht .et_pb_slide_description{
    padding-top:0;
    padding-bottom:0;
    margin-bottom:5em;
}

.bericht .et_pb_slide_image {
    padding-top: 60%;
    display: block;
    margin-bottom: 0%!important;
}

.bericht .et_pb_slide_image img {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
}

.bericht .et_pb_slide_image{
    width:100%;
    margin-bottom:0;
}


/* ============================================================
   08  SHARED PAGE SECTIONS / HERO / TEXT / LISTS
   Selectors voor heldersecties, introteksten, tijdlijnen en lijsten.
   Meerdere pagina's gebruiken deze; daarom niet aan 1 pagina gekoppeld.
   ============================================================ */

.titel-rij {
    position: relative;
    width: 100%;
    padding: 0;
    max-width: none;
    margin: 0 auto 0 0;
}

.titel-executive .et_pb_module_heading {
  width: clamp(95%, 70vw, 75%); /* iets flexibeler */
  margin-left: 0; /* standaard netjes in het midden */
}

.subtitel, .titel, .titel-home {
    max-width: 1080px;
    width: 80%;
    margin: 0 auto;
}

.titel {

    margin: 0;
}

.header-2026{
    padding-top: 30px !important;

}

.header-2026 .titel, .titel-home {
    width: 100%;
}

.header-2026 h1, .header-2026 h3 {
    color:#fff;
}

.titel-links {
    max-width: 1080px;
    margin: 0 auto;
}

/* Title text styling */
.titel h1, .titel h3,
.fadeout-title h1,
.titel h2, .subtitel h3, 
.titel-executive h1, .titel-executive h2,
.titel-home h1, .titel-home h2,
.halve-hero h1{
    text-shadow: 3px 3px 10px #000;
    color: #fff;
    font-variant-ligatures: none;
}

.uil .titel h1,
.uil .titel h2{
    text-shadow:none;
    color: var(--color-gold);
}

.titel h1, .titel h2, 
.titel-executive h1,
.fadeout-title h1,
.titel-home h1, .titel-home h2,
.blog-header .et_pb_title_container h1,
.blog-header h1 {
    font-size: 2.5rem;
    padding-top: 1em;
}

.leeuw.et_pb_section, 
.wolf.et_pb_section, 
.uil.et_pb_section {
    padding: 100px 0 0 0;
  }

/* Subtitle box styling */
.subtekst {
    position: relative;
    background-color: var(--color-blue);
    color: #fff;
    padding: 2% 5%;
}

.subtekst p, .subtekst .et_pb_text_inner {
    font-size: 1.15rem;
}

.leeuw .subtekst {
    background-color: var(--color-blue); /*blauw */
}

.uil .subtekst {
    background-color: rgba(188, 164, 130, 1); /*bruin */
}

.wolf .subtekst {
    background-color: rgba(112, 128, 144, 1); /*grijs */
}

.subtekst h4,
.subtekst h3{
    font-family: "semplicitapro", sans-serif;
    color: #fff;
    font-size: 1.3em;
    margin-right: 20%;
    display: block;
}

.subtekst a {
    display: block;
    background-color: #001f3f; /*marine */
    padding: 1.5% 3%;
    position: absolute;
    right: 2%;
    bottom: 2%;
    color: #fff;
}

.rooster h3, .agenda h3 {
    text-align: left;
}

.rooster h5 {
    color: var(--color-gold);
    text-align: left;
}

/* FAQ styling */
.rooster .et_pb_text_inner {
    border: 0;
    border-bottom: 1px solid var(--color-gold);
}

.nieuwsbericht ul,
.lijst ul,
.lijst-missie ul{
    margin: 0 0 0.75em 0;
    padding: 0 1em;  
    list-style: none !important;
}

.nieuwsbericht ul li,
.lijst ul li,
.lijst-missie ul li{
    position: relative;
    padding-left: 1em;
}

.nieuwsbericht ul li:before,
.lijst ul li:before,
.lijst-missie ul li:before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 0.6em;
    height: 0.6em;
    background-color: var(--color-gold);
    border-radius: 50%;
}

.lijst-missie ul li:before{
    background-color: #fff;
}

.halve-hero {
    height: 50vh;
}

.kolom-wit {
    padding: 5%;
    background: #fff;
    margin: 0 -5%;
}

.kolom-wit/**/.2026 {
    margin-top:10em;
}

.indent.intro p,
.indent.intro-2026 p{
    font-size: 1.1rem;
}

.hero, .hero .et_pb_post_title {
    height: 100vh;
}

.halve-hero .et_pb_post_title {
    height: 50vh;
}

.hero .titel h1,
.halve-hero .titel h1,
.hero .titel h2 {
  font-size: clamp(1.8rem, 5vw + 0.6rem, 4rem);
  line-height: 1.1; /* optioneel: strakker */
}

.hero .tekst h2 {
    color: #001f3f; /* marine */
}

.intro.et_pb_section,
 .intro-2026.et_pb_section{
    padding: 0 !important;
}

.intro .pagina-subtitel,
.intro-2026 .pagina-subtitel {
    margin-bottom: 0 !important;
}

.eerste-tekst{
    margin-top: 5em;
    padding-top: 5em;
}

.eerste-tekst-2026{
    margin-top: 10em;
    padding-top: 3em;
}

.hero a {
    color: var(--color-gold);
}

.hero a:hover {
    color: #70BDD9;
}

.pagina-subtitel h3 {
    font-family: "semplicitapro", sans-serif;
    color: #001f3f; /* marine */
    font-size: 2rem;
}

.intro.leiderschap, .intro.executive, .intro-2026 {
    background-color: transparent;
}

.intro-tekst{
 color:#fff;
    width: 75%;
    padding:2%;
margin-left:25%;
}

.intro-tekst p{

    font-size:1.2em;
}

.hero .tekst .leiderschap,
.hero-home .tekst .leiderschap,
.tekst .executive{
  background-color:#70BDD9;
}


/* ============================================================
   09  PAGINA: HOME
   Homepage, laatste nieuws en interview.
   Bestaande volgorde binnen de sectie blijft bewaard.
   ============================================================ */

/* home video slider section */
.video-slider h2,
.video-slider h2 a{
    text-align:center;
    color:#fff;
    font-size:2.5rem;
    font-weight: 800;
}

.video-slider h2 a:hover{
    color:#001f3f;
}

/* blogs home page */
.nieuwsoverzicht .et_pb_blog_grid h2 {
    font-size: 18px;
}

.nieuwsoverzicht .et_pb_post .entry-title h2,
.nieuwsoverzicht .et_pb_post .entry-title h2 a {
    height: 52px;
    line-height: 1.2;
    overflow: hidden;
    margin: 0;
}

/* Force each article to full height within its column */
.nieuwsoverzicht .et_pb_post {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.nieuwsoverzicht .et_pb_post article {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.nieuwsoverzicht .post-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.nieuwsoverzicht .post-content-inner {
    flex-grow: 1;
}

.nieuwsoverzicht .et_pb_image_container {
    margin: -20px -20px 0;
}

/* Nieuwe homepage */
.interview, .interview .et_pb_toggle_open  {
background-color: var(--color-lightgrey);
padding: 0;
}

.interview h3{
    padding-top:0;

}

.interview h5.et_pb_toggle_title{
    font-family: palatino, serif;
    font-style: normal;
    text-transform: none;
    margin: 0;
    padding: 0;
    line-height: 1.6;
  font-size: var(--font-size-base);
   color: var(--color-blue);
    text-align:right;
    text-decoration: underline;
}

/* Wrapper (no transition needed here) */
.interview .et_pb_toggle {
    border: 0 none;
}

/* Smooth animation for toggle content */
.interview .et_pb_toggle .et_pb_toggle_content {
    display: block !important;          /* override Divi's display:none/block */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 1.2s ease-in-out, opacity 1.2s ease-in-out;
}

.interview .et_pb_toggle_close{ background:var(--color-lightgrey); }

/* Closed state */
.interview .et_pb_toggle.et_pb_toggle_close .et_pb_toggle_content {
    max-height: 0 !important;
    opacity: 0 !important;
}

/* Open state */
.interview .et_pb_toggle.et_pb_toggle_open .et_pb_toggle_content {
    max-height: 5000px !important; /* adjust as needed */
    opacity: 1 !important;
}

/* Make the toggle title clickable */
.interview .et_pb_toggle_title {
    cursor: pointer;
}

/* Make the toggle title clickable */
.interview h4 {
    padding-top: var(--space-sm);
}

.interview p {
    padding-bottom: var(--space-sm);
}

/* Hide menu after first section */
.menu-hidden #main-header {
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}


/* ============================================================
   10  PAGINA: TRAININGEN / LEIDERSCHAP
   Trainings-, leiderschaps- en roostersecties.
   Inclusief bestaande tijdlijn- en USP-regels.
   ============================================================ */

.blauwe-titel{
        background-color: #70BDD9; /*blauw */

}

.blauwe-titel h1{
font-size: clamp(1.8rem, 7vw + 0.6rem, 4rem);
color:#fff;
     font-weight: 600;
text-shadow: 0 none;   
}

.leiderschapstrainingen h3{
    color: #001f3f; /*marine */
    font-family: "semplicitapro", sans-serif;
    font-size: 1.1rem;
    padding-bottom: 15px;
    font-weight: 600;
}

.drie-fotos h3{
font-size: 1.5rem !important;
color: var(--color-gold);
font-weight: 700;
margin-bottom: 45px;
font-stretch: semi-condensed;
line-height: 1.3;
    padding-top: 0;
}

.leiderschapshero .titel {
    padding-right: 0;
}

.leiderschapshero .blog {
    height: 100%;
    overflow: visible;
}

.leiderschapshero .kolom-wit {
    height: 50vh;
    background: #fff;
}

/* Height settings for sections */
.leeuw.page, .uil.page, .wolf.page, .titel-rij.page {
    height: calc(100vh - 160px); /* Adjust for menu height */
}

.intro-2026,
.intro.leiderschap {
    padding: 0 !important;
    z-index: 99;
}

.intro.leiderschap .et_pb_row,
.intro-2026 .et_pb_row {
    position: relative;
    margin: 0 auto;
}

.intro-2026 .et_pb_column,
.intro.leiderschap .et_pb_column,
.intro.executive .et_pb_column,
.missie .et_pb_column,
.usp-sectie .et_pb_column{
    background-color: var(--color-blue);
    padding: 3%;
}

.intro.leiderschap  h2{
        display:block;
    height:120px;
}

.intro-2026  h2{
        display:block;
    height:70px;
}

.intro-2026 h2,
.intro.leiderschap h2, .intro.executive h2, .missie h2,
.usp-box h2, .missie h3,
.intro h2,
.usp-sectie h2{
    color: #001f3f;
    font-size: 1.5em;
    text-align: left;
}

.intro-2026 p,
.intro.leiderschap p,
.intro.leiderschap li,
.missie p, .missie li,
.usp-box p{
    color: #fff;
}

.intro.executive p {
    color: #fff;
}

/*
.intro .tekst,
.intro-2026 .tekst {
    margin-left: 7%;
    color: #fff;
}

.intro h4, .intro a,
.intro-2026 h4, .intro-2026 a{
    color: #fff;
}*/
.voortgang {
    background-color: #fff;
    border-radius: 10px;
}

.clear {
    clear: both;
    padding: 0 !important;
    margin: 0 auto !important;
    height:0;
}

/* Extra ruimte tussen titel en blauwe blokjes */
.intro-training{
    margin-top:2em;
}

/* De opmaak van de tijdlijn staat hieronder maar een keer.
   De laatste kopgrootte (1.5em) uit de bestaande CSS blijft behouden. */
.timeline-blog h2 {
  font-size: 20px !important;
  line-height: 28px;
  margin-bottom: 5px;
  margin-top: 20px;
}

.timeline-section {
  border-top: 2px solid var(--color-gold);
}

.executive-titel,
.lijn-secties {
  border-top: 2px solid var(--color-gold);
}

/* Tijdlijn: gemeenschappelijke kaders */
.timeline-titel, .timeline-titel-blog, .timeline-blog .et_pb_post{
      position: relative;
    margin-bottom: 40px;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 90%; /* Adjust width for alignment */
    margin:0 auto;
}

.timeline-titel-blog, .timeline-blog .et_pb_post, .timeline-section,
.timeline-titel, .timeline-blog .et_pb_post,
.timeline-left,
.timeline-right{
    border: 2px solid var(--color-gold);
}

.executive-titel{
    border-top: 2px solid var(--color-gold);
}

.timeline-blog .post-content{
    margin-bottom:30px;
}

.timeline-blog .et_pb_post .entry-featured-image-url {

margin-bottom: 0 !important; 
}

.timeline-section{
    border-bottom: 2px solid var(--color-gold);
}

.timeline-titel h3, .timeline-titel-blog h3{
      color: var(--color-gold); /* bruin */
    font-family:"palatino", serif; 
    font-weight: 500; 
    font-style: normal;
    text-transform: none;
    line-height:1.6;
   font-size: 1.5em;
}

/* Timeline Section Styling */
.timeline-section {
    position: relative;
    padding: 40px 20px;
}

/* Central Line */
.timeline-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background-color: #ccc;
    transform: translateX(-50%);
}

/* Timeline Box Styling */
.timeline-section .timeline-left,
.timeline-section .timeline-right,
.timeline-blog .et_pb_post:nth-child(odd),
.timeline-blog .et_pb_post:nth-child(even) {
    position: relative;
    margin-bottom: 40px;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Align Left Boxes */
.timeline-section .timeline-left,
.timeline-blog .et_pb_post:nth-child(even),
.timeline-section .timeline-right,
.timeline-blog .et_pb_post:nth-child(odd){
    clear: both;
}

/* Connecting Dots */
.timeline-section .timeline-left::before,
.timeline-section .timeline-right::before,
.timeline-blog .et_pb_post:nth-child(odd)::before,
.timeline-blog .et_pb_post:nth-child(even)::before {
    content: "";
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    background: #fff;
    border: 2px solid var(--color-gold);
    border-radius: 50%;
    transform: translateY(-50%);
    z-index: 11;
}

.timeline-section .timeline-right::before {
    right: 50%; /* Align with the timeline */
    transform: translate(50%, -50%); /* Maintain its offset from the timeline */
}

.timeline-section .timeline-left::before,
.timeline-blog .et_pb_post:nth-child(even)::before {
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Default Dot Styling */
.timeline-left::before,
.timeline-right::before,
.timeline-blog .et_pb_post:nth-child(odd)::before,
.timeline-blog .et_pb_post:nth-child(even)::before{
    content: "";
    position: absolute;
    top: 0;
    left: 47%;
    width: 10px;
    height: 10px;
    background: #fff; /* Default color */
    border: 2px solid var(--color-gold);
    border-radius: 50%;
}

/* Active Dot Styling - Double Outline */
.timeline-section .timeline-left.active::before,
.timeline-section .timeline-right.active::before,
.timeline-section .timeline-blog .et_pb_post.active::before {
    background: var(--color-gold); /* Blue inner active dot */
    border: 2px solid #fff; /* Brown first outline */
    box-shadow: 0 0 0 4px var(--color-gold); /* White outer space between the dot and outline */
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Alternate position right blog dots */
.timeline-blog .post-meta a[rel="tag"] {
     color: #001f3f; /* marine */
    font-size: .95rem;
        text-transform: uppercase;
    font-weight:700;
}

.voortgang .et_pb_column.wit{
    padding:5%;
          background-color:#fff !important;
border-radius: 5px;
}

.voortgang {
    font-size: 1rem;
}

/*tellers*/
.tellers{
    margin-bottom:0;
    padding-bottom:0 !important;
}

.resultaten h3 {
    margin-bottom:-10px;
    font-size: 1.1rem !important;
}

.tellers .et_pb_image_wrap {
    text-align:center;
}

.tellers .et_pb_text_inner{
  height:70px;  
}

.tellers img{
    max-width: 8em;
    margin:0 auto;
    
}

.tellers .et_pb_number_counter_0.et_pb_number_counter .percent p, 
.tellers  .percent-value {
color: #70BDD9 !important;
}

.tellers  .percent-value{
    font-size:1em;
}

.tellers  .percent-sign{
       font-size:.5em; 
}

.tellers  h6{
    font-family:palatino, serif; 
    font-style: normal;
    text-transform: none;
    margin: 0;
    padding:0;
    font-size: 1rem;
    line-height:1.6;
text-align:center;
}

.foto-break  blockquote {
border-color: #70BDD9;
}

/* USP boxes container */
.usp-sectie{
   position: relative;
   z-index: 5;
   margin-top: -3rem; /* Overlap with grey section above */
   padding: 0 5%;
 }

/* USP boxes styling */
.usp-boxes {
   display: flex;
   gap: 2rem;
   justify-content: center;
   flex-wrap: wrap;
   margin-bottom: 4rem;
 }

.usp-sectie .et_pb_column{
       background: #70bdd9; /* Blue color */

}

.usp-box {
   padding: 2rem;
 }

.usp-box h2 {
   margin: 0 0 1rem 0;
   font-size: 1.2rem;
   font-weight: bold;
   color:#fff;
 }


/* ============================================================
   11  PAGINA: EXECUTIVE COACHING
   Alleen expliciet executive coaching-specifieke selectors.
   ============================================================ */

.wim .et_pb_module_heading, .wim .et_pb_heading {
    margin-bottom: 0;
    height: 60px;
}

.wim .et_pb_module.et_pb_heading {
    margin-bottom: 0;
}

.executive-intro {
    width: 80%;
    margin: 0 auto;
}


/* ============================================================
   12  PAGINA: OVER ONS / PERSONEN
   Bestaande selectors voor de profiel-/voorstelsecties.
   ============================================================ */

.voorstellen .onder {
    margin: auto auto 0;
}

.voorstellen .boven .naam {
    display: block;
    float: right;
    margin-right: 3%;
}

/* naam Irenea */
.voorstellen .boven{
    margin: -2.5% auto auto 0;
}

.naam h2 {
    color: #001f3f; /* marine */
    font-size: 2.5rem;
}

.naam h4 {
    color: #001f3f; /* marine */
    text-transform: uppercase;
    font-size: 1rem;
    padding-bottom: 0;
}


/* ============================================================
   13  PAGINA: MISSIE
   Kleiner bestaand CSS-onderdeel; zie ook gedeelde introstijlen.
   ============================================================ */

.quote-succes{
    margin-top:11em;
}


/* ============================================================
   14  PAGINA: REVIEWS / TESTIMONIALS
   Reviews en testimonials. Sommige regels zijn ook gedeeld met
   de thema-overzicht-sectie; die hebben we niet opgesplitst.
   ============================================================ */

.testimonials.leiderschap{
      background-color:#70BDD9;
}

.leiderschap2 .et_pb_testimonial:before{
    content:url("/wp-content/uploads/2024/11/aanhalingsteken.svg");
        width: 80px;
height: auto;
top: -40px;
right: 30px;
left: auto;
background: #fff;
}

.leiderschap2 .et_pb_testimonial{
    background-color:#fff !important;
    border-radius: 10px;
    border:3px #001f3f solid;
    padding:15% 8% 8%;
}

/*testimonials */
/* General styling for the textboxes inside the testimonials section */
.testimonials .testimonial-rij .et_pb_column{
        border: 2px solid var(--color-gold);
    background-color:#fff;

}

.testimonials .et_pb_text {
    border-radius: 8px;
    padding: 40px 20px;
    position: relative;
    overflow: visible; /* Ensures quotes stay within box bounds */
}

/* Styling for the open quote */
.testimonials .testimonial-rij .et_pb_column::before,
.testimonials .testimonial-rij .et_pb_column::after {
    content: "“"; /* Open quote */
font-family: "playfair-display", serif;
font-weight: 900;
font-style: italic;
   font-size: 10em;
color: var(--color-gold);
position: absolute;
line-height: 0;
}

.reviews .et_pb_blurb_content{
position: static !important;
}

.reviews .et_pb_blurb{
    margin-top:var(--space-md);
}

.reviews .et_pb_blurb .et_pb_main_blurb_image,
.reviews1 .et_pb_blurb .et_pb_main_blurb_image{
    position: absolute;
   width: 7em;
bottom: -4em;   /* of 0 als hij echt in de hoek moet */
    right: -1em;
}

.reviews .et_pb_blurb_content{
    padding:var(--space-sm);
}

/* Styling for the close quote */
.testimonials .et_pb_column::after {
    content: "”"; /* Close quote */
color: var(--color-gold);
bottom: -30px;
right: 10px;
}

.reviews .et_pb_blurb{
    position: relative;
}

/* Witte cirkel */
.reviews .et_pb_blurb::before{
    content: "";
    position: absolute;

    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: #fff;

    top: -65px;
    left: 50%;
    transform: translateX(-50%);

    z-index: 1; /* lager */
}

/* Quote erboven */
.reviews .et_pb_blurb::after{
    content: "“"; /* Open quote */
font-family: "playfair-display", serif;
font-weight: 900;
font-style: italic;
font-size: 10em;
color: var(--color-gold);
position: absolute;
line-height: 0;
top: .1em;
left: 50%;
transform: translateX(-50%);
z-index: 9;
}


/* ============================================================
   15  INSPIRATIE / BLOGS / FEITEN / VIDEO (NOG NIET VERPLAATST)
   Legacy inspiratiecode blijft bewust IN style.css tot de
   blog-, feiten-, video- en zelfscanlayouts klaar zijn.
   Later gecontroleerd verplaatsen naar inspiratie.css.
   ============================================================ */

/*testje featured image*/
.blog-list .et_pb_no_thumb{
    display:block;
}

.blog-list article.et_pb_no_thumb{
    padding-top: calc(70% + 30px);
    background:url("http://sanotie.groeihero.nl/wp-content/uploads/2024/11/placeholder.png");
    background-size:contain;
    background-position: top;
    background-repeat: no-repeat;
}

/*blog image aspect ratio square 1:1*/
/*blog image aspect ratio square 1:1*/
.blog-list .entry-featured-image-url {
    padding-top: 70%;
    display: block;
}

.blog-list .entry-featured-image-url img {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
}

.foto-break .et_pb_row{
margin-top:10em;
}

/*blog overzicht*/
.blog-list h2 a{
    color:var(--color-gold);
    font-size:1.6rem;
}

.blog-list .et_pb_post p{
    color:#444444;
    font-size:1rem;
}

.blog-zij .et_pb_post h2,
.blog-zij article{
    margin-bottom:0;
    padding-bottom:0;
color: #70BDD9;
}

.blog-zij a:hover {
text-decoration: none !important;
}

.blog-header h1, .tellers h3 {
padding: 3% 0;
text-transform: uppercase;
color: #001f3f !important;
margin-bottom: 0;
}

.blog-header h1{
font-size: 1.6rem !important;
}

.blog-header p {
font-size:1rem;
}

.blog-header .et_pb_fullwidth_header_subhead {
font-weight:400;
    font-size:2.5em;
        font-family: "semplicitapro", sans-serif;

}

.blog-header .et_pb_header_content_wrapper{
    font-family:"palatino", serif; 
    text-align:right;
    font-size:2em;
    position: absolute;
right: 0;
}

.blog-header .et_pb_post_title.et_pb_featured_bg {
padding: 4% 0%;
}

.blog-tekst blockquote {
border-color: #70BDD9;
}

.blog-tekst p {
margin-bottom:30px;
}

.blog-tekst .ander h4  {
    border-bottom:3px solid #70BDD9;
}

.zijbalk h3{
    padding:0;
}

.blog-zij {
	text-align: left;
	text-decoration: none;
}

.zijbalk h4 a{
    display:block;
        background-color: var(--color-gold);
    border: 2px solid var(--color-gold);
    color: #fff !important;
    border-radius: 0;
    font-size: 1.2rem;
    text-align: center;
   padding: 0.75em 1.5em !important;
}

.zijbalk h4 a:hover{
       border: 2px solid #001f3f;
 background-color: #001f3f;
}

/* CHRIS BUTTONS*/
.page-link-left .et_pb_text_inner,
.blog-zij .entry-title,
.blog-zij article{
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	position: relative;
    margin-bottom: 0 !important;
}

.blog-zij a{
	text-align: left;
	text-decoration: none !important;
}

.blog-zij a::before {
	background-color: #70BDD9;
    content: "";
    position: absolute !important;
	left: 0;
    bottom: -4px;
    height: 2px;
    width: 0;
	opacity: 0;
    display: block;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.blog-zij a:hover::before {
    width: 100%;
    opacity: 1;
}

/* END CHRIS BUTTONS*/
/* END CHRIS BUTTONS*/
.zoek {
    width:60%;
    margin: 0 auto;
}

.zoek input{
    border: 1px solid var(--color-gold);
}

.zoek  .et_pb_search input.et_pb_searchsubmit {
background-color: var(--color-gold);
    color:#fff;
}

/* reset padding/margin and position the section */
.et_pb_section.video {
  margin: 0;                       /* remove any default margins */
  padding: 0 !important;                      /* no padding top/bottom */
  height: calc(100vh - var(--header-height)); /* fill remaining viewport */
  overflow: hidden;                /* clip any overflow */
}

.et_pb_row.video {
  padding: 0 !important;
}

/* make the video fill the section fully */
.et_pb_section.video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* or contain, depending on how you want it scaled */
}

/* Target the Salvattore container and use CSS Grid */
.thema-overzicht .et_pb_salvattore_content{
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 60px 20px; /* 20px horizontal, 20px vertical */
    align-items: stretch;
}

/* Remove column wrapper styling since grid handles layout */
.thema-overzicht .et_pb_salvattore_content .column {
    display: contents; /* This makes the column wrapper "disappear" for grid purposes */
}

.thema-overzicht .et_pb_post,
.thema-overzicht .blog-filter-container{
    margin-top: 30px !important; /* 80px spacing between rows */
}

/* Make each blog post article fill the grid cell height */
.thema-overzicht .et_pb_salvattore_content .et_pb_post,
.reviews .et_pb_blurb{
    display: flex !important;
    flex-direction: column;
    height: 100%;
    border: 2px solid var(--color-gold);
    border-radius: 15px;
    margin-top: 30px !important; /* 80px spacing between rows */
    transition: opacity 0.3s ease;
}

.reviews .et_pb_row{
    margin-top:2em;
    margin-bottom:2em;
}

.filter-knoppen{
    margin-bottom: 80px !important; /* 80px spacing between rows */
}

/* Remove top margin from first row of posts */
.thema-overzicht .et_pb_post:nth-child(-n/**/+3) {
    margin-top: 30px !important;
}

/* Make post content flexible */
.thema-overzicht .et_pb_post .post-content {
    display: flex !important;
    flex-direction: column;
    flex-grow: 1;
}

/* Make the inner content grow and push read more to bottom */
.thema-overzicht .et_pb_post .post-content-inner {
    flex-grow: 1;
}

.thema-overzicht .et_pb_post .post-content-inner p {
    text-align: left;
}

/* Keep title at natural size */
.thema-overzicht .et_pb_post .entry-title {
    flex-shrink: 0;
}

.thema-overzicht h2,
.thema-overzicht h2 a, 
.reviews h4,
.reviews h4 span{
    font-size: 1.6rem;
    color: #70BDD9;
    font-family: "palatino-linotype", sans-serif;
font-weight: 700;
font-style: italic;
}

.reviews h4{
    margin-top: 1.7em;
    font-family: "palatino-linotype", sans-serif;
font-weight: 700;
font-style: italic;
}

.reviews h3{
   padding-top: 0;
}

.thema-overzicht h2 a:hover {
    color: #001f3f;
}

.thema-overzicht .et_pb_post .more-link {
    margin-top: auto !important;
    margin-left: auto;
    background: #70BDD9;
    padding: .4em 1em;
    display: block;
    border-radius:3px;
    color: #FFF;
    align-self: flex-end;
}

/* Base category icon styling */
.thema-overzicht .et_pb_post:before {
    content: "";
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-size: 80px 80px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
    border: 4px solid #fff;
    margin: -70px auto 15px;
    display: block;
    transition: all 0.3s ease;
}

/* Category-specific icons */
.thema-overzicht .category-feiten.et_pb_post:before {
    background-image: url("https://sanotie.nl/wp-content/uploads/2025/08/icon_facts.svg");
}

.thema-overzicht .category-blog-van-wim.et_pb_post:before {
    background-image: url("https://sanotie.nl/wp-content/uploads/2025/08/icon_blog.svg");
}

.thema-overzicht .category-test.et_pb_post:before {
    background-image: url("https://sanotie.nl/wp-content/uploads/2025/08/icon_quiz.svg");
}

.thema-overzicht .category-video.et_pb_post:before {
    background-image: url("https://sanotie.nl/wp-content/uploads/2025/08/icon_video.svg");
}

.thema-overzicht .blog-filter-container {
    margin-bottom: 30px;
    text-align: center;
}

.thema-overzicht .filter-btn,
.thema-overzicht .filter-btn.soort{
    background: #70BDD9;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.thema-overzicht .filter-btn.soort{
    background: #fff;
    border:2px solid #001f3f;
     color: #001f3f;
}

.thema-overzicht .filter-btn:hover,
.thema-overzicht .filter-btn.active,
.thema-overzicht .filter-btn.soort:hover,
.thema-overzicht .filter-btn.soort.active{
    background: #001f3f;
    transform: translateY(-2px);
}

.thema-overzicht .filter-btn.soort.soort:hover,
.thema-overzicht .filter-btn.soort.soort.active{
    background: #001f3f;
     color: #70BDD9;
}

.et_pb_blog_grid .et_pb_salvattore_content[data-columns] .et_pb_post {
opacity: 1;
}

/* Hide filtered posts */
.thema-overzicht .et_pb_post.hidden {
    display: none !important;
}

.feiten .et_pb_column{
    margin: auto 0;
}


/* ============================================================
   16  FOOTER
   Footerregels verplaatst zonder wijzigingen aan de declaraties.
   ============================================================ */

/* Don't snap to footer */
.fullscreen-section.foot {
    height: auto !important;
    min-height: auto !important;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
}

.foot.et_pb_section {
    padding: 2% 0;
    margin-bottom: -84px;
}

.foot {
    background-color: var(--color-blue);
}

.credits .et_pb_row, .credits {
    padding: 8px 0 !important;
}

.foot p, .credits p, .foot a, .credits a {
    color: #fff;
}

.foot .et_pb_social_media_follow_network_0 a.icon, 
.foot .et_pb_social_media_follow_network_1 a.icon {
    background-color: #fff !important;
}

.et_pb_social_media_follow_0 li.et_pb_social_icon a.icon::before, 
.foot .et_pb_social_media_follow_network_1 a.icon::before {
    color: var(--color-blue) !important;
}

.foot .middle .tekst {
    margin-left: 30px;
}

.foot .et_pb_column {
    margin: auto;
}

.foot  #left-area ul, .entry-content ul{
padding: 0;

}

.et_pb_section.et_pb_section_9.credits.et_section_regular {
    background-color:var(--color-blue);
    padding: 0;
}

.credits p, .credits a {
    font-size: .9em;
}

#footer-bottom {
    display: none;
}


/* ============================================================
   17  RESPONSIVE (BESTAANDE VOLGORDE BEHOUDEN)
   Mobiele en desktop-aanpassingen blijven als complete mediaqueries
   in hun oorspronkelijke onderlinge volgorde staan.
   Belangrijk om cascade en !important niet ongemerkt te veranderen.
   ============================================================ */

@media (max-width: 480px) {
       h1 { font-size: 1.25rem; }
    h2 { font-size: 1.125rem; }
    h3 { font-size: 1.125rem; }
    h4 { font-size: 1rem; }
    h5 { font-size: 0.95rem; }
  .video {
    height: 70vh; /* Smaller on very small screens */
  }
 
  .main-content-wrapper {
    margin-top: -5vh;
  }
 
  .bericht-sectie {
    min-height: 15vh;
  }
 
  .usp-container {
    padding: 0 2%;
  }
}

@media (max-width: 767px) {
   .drie-fotos .et_pb_text,
    .drie-fotos .et_pb_text_14{
        min-height:auto;
    }
    
      .nieuwsoverzicht .et_pb_post .entry-title h2,
  .nieuwsoverzicht .et_pb_post .entry-title h2 a {
    height: auto;
  }
  .nieuwsoverzicht .et_pb_post {
    min-height: auto;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
       h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.175rem; }
    h5 { font-size: 1.05rem; }
  .video-overlay h1 {
    font-size: 2.5rem;
  }
 
  .bericht-sectie {
    width: 95%;
    min-height: 12vh;
  }
 
  .bericht {
    width: 90%;
  }
 
  .usp-boxes {
    flex-direction: column;
    align-items: center;
  }
 
  .usp-box {
    max-width: 100%;
    transform: translateY(-20%); /* Less overlap on mobile */
  }
    
    
}

@media (min-width: 769px) {

   .testimonials .et_pb_row{
  display: flex;
justify-content: center;  
} 
    .swiper.mySwiper {
        max-width: 900px !important;
        width: 100% !important;
        margin: auto !important;
    }

        .swiper-slide::after {
       
            bottom: -40px;
        
        }
}

@media only screen and (min-width: 891px){
      h1 {
    font-size: 4rem;
}  
    h2 {
    font-size: 3rem;
}
    
h3 {
    font-size: 1.5em;
}
    #et-info{
        float:right;
    }
    .pagina-tekst-links,
.indent .et_pb_text_inner, .kolom-wit .wpcf7-form init,
.indent.et_pb_accordion,
 .indent .waicon   {
    margin-left:30px;
}
   .pagina-tekst-links h3,
.indent h3,.indent h2,.indent h1
{
    margin-left:-30px;
} 

    
    
    .titel-links {
    padding-right: 30%;
}

    
    /*homepage */
    
   .leeuw.et_pb_section, 
.wolf.et_pb_section, 
.uil.et_pb_section {
    padding: 23px 0 0 0;
  }
    
.titel h1, .titel h2, 
.fadeout-title h1,
.titel-executive h1,.titel-executive h2,
.titel-home h1, .titel-home h2,
.blog-header .et_pb_title_container h1,
.blog-header h1 {
   padding-top:0;
  font-size: clamp(1.8rem, 5vw + 0.6rem, 4rem);
}
    

     .blog-header  h1{
padding: 3% 0;
}
 .blog-header    .et_pb_fullwidth_section .et_pb_post_title {
padding: 3% 0;
}

.subtekst {
  position: absolute;
  bottom: -30px; /* Position at the bottom */
  right: 0;
  background-color: rgba(112, 189, 217,.75);
  color: #fff;
  width: 60%;
  padding: 2%;
}
.leeuw .subtekst {
background-color: rgba(112, 189, 217, .75);}
    .home.subtekst{
         bottom: 0; /* Position at the bottom */
 
    }
.uil .subtekst {
    background-color: rgba(188, 164, 130,.75); /*bruin */
}

.wolf .subtekst {
    background-color: rgba(112, 128, 144,.75); /*grijs */
}
    
    .subtitel, .titel, .titel-home {
    padding-right:20%;
}
    
    /* Full-Height Section and Text Box Positioning */
.leeuw, .uil, .wolf,  .titel-rij{
  height: calc(100vh - 160px); /* Adjust for menu height */
    padding-bottom:0;
}
.titel-rij .et_pb_column{
  height: calc(100vh - 240px); /* Adjust for menu height */
}
    
    
    

/* ==============================================
   Contact forms
   ============================================== */
.whatsapp{
    margin-left:30px;
}

    
    
    /* LEIDERSCHAPSTRAININGEN */
/* LEIDERSCHAPSTRAININGEN */
.leiderschapstrainingen .et_pb_column {
    padding: 2%;
    border: 1px #001f3f solid;
    border-radius: 28px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%; /* Ensure columns stretch equally */
}

.leiderschapstrainingen .et_pb_text {
    flex: 1; /* Allow text container to grow */
    display: flex;
    flex-direction: column;
}

.leiderschapstrainingen .et_pb_text_inner {
    flex: 1; /* Push content up */
    padding-bottom: 60px; /* Make room for button */
}

.leiderschapstrainingen .et_pb_button_module_wrapper {
    position: absolute;
    bottom: 4%;
    right: 4%;
}

.leiderschapstrainingen .et_pb_button {
padding: 0.75em 1.5em !important;
    text-wrap: nowrap;
    border:0 none;
    }
.leiderschapstrainingen .et_pb_button:hover {
background-color:#001f3f;
    padding: 0.75em 1.5em !important;

    }


.intro.leiderschap .et_pb_row{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(-5vh);
} 
 .intro-2026 .et_pb_row {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(7.5vh);
}   
    
     .intro.leiderschap.incompany .et_pb_row{
 
    transform: translate(-50%, -50%) translateY(10vh);
}
 .indent.intro {
    margin-left: 60px;
} 
    
    
.smal,
.smal.et_pb_row_3{
    width: 55%;
    margin: 0 auto;
}


.smal .et_pb_module{
            margin: 0 auto;
    }
    .remove-gap-bottom{
        margin-bottom:0!important;
        padding-bottom:0!important;
    }   
.indent.smal {
    margin: 0 auto 0 30px;
}
.timeline-titel h2, .timeline-titel-blog h2,
 .timeline-titel h3, .timeline-titel-blog h3   {
   font-size: 1.5em;
}

/* Timeline Box Styling */
.timeline-section .timeline-left,
.timeline-section .timeline-right,
.timeline-blog .et_pb_post:nth-child(odd),
.timeline-blog .et_pb_post:nth-child(even) {
    position: relative;
    margin-bottom: 40px;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 45%; /* Adjust width for alignment */
}

/* Align Left Boxes */
.timeline-section .timeline-left,
.timeline-blog .et_pb_post:nth-child(even){
    float: left;
    clear: both;
    transform: translateX(11.5%);
}


/* Connecting Dots */
.timeline-section .timeline-left::before,
.timeline-section .timeline-right::before,
.timeline-blog .et_pb_post:nth-child(odd)::before,
.timeline-blog .et_pb_post:nth-child(even)::before {
    top: 50%;
    left: -3.5%;
}
.timeline-section .timeline-right::before {
    right: 100%; /* Align with the timeline */
}


.timeline-section .timeline-left::before,
.timeline-blog .et_pb_post:nth-child(even)::before {
    left: 100%;
}

.timeline-section .timeline-right,
.timeline-blog .et_pb_post:nth-child(odd){
    float: right;
    clear: both;
    transform: translateX(-11%); /* Shift closer to the timeline */
}

/* Align Right Boxes */
.timeline-section .timeline-right,
.timeline-blog .et_pb_post:nth-child(odd){
    float: right;
    clear: both;
    transform: translateX(-11%);

}

/* Default Dot Styling */
.timeline-left::before,
.timeline-right::before,
.timeline-blog .et_pb_post:nth-child(odd)::before,
.timeline-blog .et_pb_post:nth-child(even)::before{
    content: "";
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    background: #fff; /* Default color */
    border: 2px solid var(--color-gold);
    border-radius: 50%;
    transform: translateY(-50%);
}

/* Active Dot Styling - Double Outline */
.timeline-section .timeline-left.active::before,
.timeline-section .timeline-right.active::before,
.timeline-section .timeline-blog .et_pb_post.active::before {
    background: var(--color-gold); /* Blue inner active dot */
    border: 2px solid #fff; /* Brown first outline */
    box-shadow: 0 0 0 4px var(--color-gold); /* White outer space between the dot and outline */
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Alternate position right blog dots */
.timeline-section .timeline-blog .et_pb_post:nth-child(odd)::before {
      left: -1.8%;
}
    


    
/* Hide the original Divi Gallery */
#klantlogo, .klantlogo {
    display: none !important;
}
    
    
    /* naam Irenea */
.voorstellen .boven{
    margin: -2.5% auto auto 13%;
}
    



.foot .et_pb_column {
    margin: auto 0 0 5.5%;
}
    
    
 
 /*********************************************/
 /******************* BErichten & sliders  *******************/
/*********************************************/

.socials-slider .et_pb_slide_content{
    max-width:50%;
    margin: 0 auto;
}
    
}

@media (min-width: 1024px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.75rem; }
    h4 { font-size: 1.25rem; }
    h5 { font-size: 1.125rem; }
}

/* Optional: Media query fallback for older browsers */
@media (min-width: 981px) {
  .nieuwsoverzicht .et_pb_salvattore_content {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
  }
  .nieuwsoverzicht .et_pb_salvattore_content > .column {
    display: contents;
  }
}


/* ============================================================
   18  HOME NIEUWSKAARTEN: BESTAANDE OVERRIDES NA RESPONSIVE
   Deze aanvulling stond al onderaan style002.css.
   Bewust niet voor de breakpoints gezet vanwege cascade.
   ============================================================ */

.nieuwsoverzicht .et_pb_salvattore_content .et_pb_post {
  display: flex;
  flex-direction: column;
  height: 100% !important;
  margin-bottom: 0;
}

.nieuwsoverzicht .et_pb_post .post-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.nieuwsoverzicht .et_pb_post .post-content-inner {
  flex: 1 1 auto;
}

.nieuwsoverzicht .et_pb_post .more-link {
  margin-top: auto;
}

/* Onder 981px blijft de standaard kolomindeling van Divi actief. */


/* ============================================================
   ARCHIEF - BESTAANDE UITGESCHAKELDE CSS / NOTITIES
   Alleen comments, niet actief. Behouden voor latere audit.
   ============================================================ */

/* Carrousels 
.carrousel .et_pb_container{
    height:80vh;
}
.carrousel .et_pb_fullwidth_slider_0, .carrousel .et_pb_text_0, .carrousel .et_pb_code_0 {
 width: 100%; 
 max-width: none; 
}
.carrousel .et_pb_fullwidth_slider .et_pb_slide {
  background-size: cover;
  background-position: center center;
}
.carrousel .et_pb_slider,
.carrousel .et_pb_slider .et_pb_slide_0,
.carrousel .et_pb_slider .et_pb_slide_1,
.carrousel .et_pb_slider .et_pb_slide_2,
.carrousel .et_pb_slider .et_pb_slide_3,
.carrousel .et_pb_slider .et_pb_slide_4,
.carrousel .et_pb_slider .et_pb_slide_5,
.carrousel .et_pb_slider .et_pb_slide_6,
.carrousel .et_pb_slider .et_pb_slide_7{
background-size: contain;
background-repeat: no-repeat;
background-position: center;
    background-color:#70bdd9;
}
.carrousel .et_pb_section{
          background-color:#70bdd9;  
    height:80vh;

}
.carrousel .et_post_gallery{
      background-color:#70bdd9;  
    height:80vh;
}
.carrousel .et_post_gallery,
.carrousel .et_post_gallery img,
.carrousel .et_pb_gallery_item{
height: 70vh;
    margin: 0 10vh !important;
width: auto !important;

}
*/