.hero-title{
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  white-space: nowrap;   /* 1 regel */
}

/* optioneel: op kleinere schermen toch laten wrappen zodat het niet “afkapt” */
@media (max-width: 767px){
  .hero-title{ white-space: normal; }
}

.hero-subtitle{
  font-family: "Agdasima", sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.5;     /* meer lucht tussen de regels */
  margin-top: 0px;     /* meer ruimte onder de hoofdzin */
  letter-spacing: .2px; /* optioneel: net wat rustiger */
  opacity: 0.9;
}

@media (max-width: 575px){
  .hero-subtitle{ font-size: 18px; }
}

.hero-content{
  transform: translateY(clamp(40px, 24vh, 140px)); /* meer naar beneden */
}

/* Zorgt dat absolute decoraties binnen de section correct stapelen */
section.about-section {
  position: relative;
  z-index: 0; /* creëert stacking context */
}

/* Decoratie-afbeeldingen zichtbaar maken */
section.about-section .bg-deco {
  z-index: 0 !important;
}

section.about-section .bg-deco-grijs {
  z-index: 0 !important;
}

/* Content altijd erboven */
section.about-section .container,
section.about-section .row {
  position: relative;
  z-index: 1;
}
/* Quotes/deco naar heel licht bruin (beige) */
.about-section .bg-deco{
  filter: brightness(0) saturate(80%)
          invert(78%) sepia(21%) saturate(550%)
          hue-rotate(355deg) brightness(102%) contrast(92%);
  opacity: .25;
  mix-blend-mode: multiply;
}.about-section .bg-deco{
  filter: brightness(0) saturate(80%)
          invert(78%) sepia(21%) saturate(550%)
          hue-rotate(355deg) brightness(102%) contrast(92%);
  opacity: .25;
  mix-blend-mode: multiply;
}

/* Quotes/deco naar licht grijs */
.about-section .bg-deco-grijs{
  filter: grayscale(100%) brightness(115%);
  opacity: 0.25;
  mix-blend-mode: multiply;
}

.feature-box-icon.icon-center{
  display:flex;
  justify-content:center;  /* horizontaal */
  align-items:center;      /* verticaal */
}

.feature-box-icon{
  text-align:center;
}

/* center het icoon in Crafto feature box */
.feature-box-icon{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 1) Zorg dat beide portfolio afbeeldingen exact dezelfde “kaart”-hoogte krijgen */
.portfolio-boxed .portfolio-image{
  height: 420px;          /* pas aan naar smaak */
  overflow: hidden;
}

.portfolio-boxed .portfolio-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* crop zodat ratio geen verschil maakt */
  display: block;
}

/* 2) Forceer dezelfde hover overlay links/rechts */
.portfolio-boxed .portfolio-box .portfolio-overlay{
  opacity: 0;                              /* start */
  transition: opacity .3s ease;
}

.portfolio-boxed .portfolio-box:hover .portfolio-overlay{
  opacity: .75;                            /* zelfde hover-intensiteit */
}

/* (optioneel) als Crafto ook .portfolio-hover gebruikt */
.portfolio-boxed .portfolio-box .portfolio-hover{
  opacity: 0;
  transition: opacity .3s ease;
}
.portfolio-boxed .portfolio-box:hover .portfolio-hover{
  opacity: 1;
}

/* --- nette fix: iconen centreren + iets hoger zetten --- */
.icon-with-text-style-05 .feature-box-icon{
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 10px; /* ruimte tussen icoon en titel */
}

.icon-with-text-style-05 .feature-box-icon i{
  margin-bottom: 0 !important; /* voorkomt dat mb-20px op <i> roet in eten gooit */
}

/* iconen "hoger": minder top padding in de content */
.icon-with-text-style-05 .content-slide-up.feature-tight{
  padding-top: 1.25rem !important;
  padding-bottom: 1.75rem !important;
}

/* optioneel: nog een tikje hoger (zet aan als je wil) */

.icon-with-text-style-05 .feature-box-icon{
  margin-top: -6px;
}

/* ===== ICON BAR: top aligned + perfect centered ===== */
.features-iconbar .feature-box{
  height: 100%;
}

.features-iconbar .feature-inner{
  /* belangrijk: maak de content top-aligned i.p.v. verticaal gecentreerd */
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start !important;

  /* minder witruimte boven: pas dit aan naar smaak */
  padding: 18px 12px 22px !important;

  /* sommige themes zetten top/transform voor animatie/centreren */
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}

.features-iconbar .feature-box-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;

  /* vaste hoogte zodat alle iconen exact op één lijn staan */
  min-height: 64px;

  margin: 0 0 10px 0;
}

.features-iconbar .feature-box-icon i{
  margin: 0 !important;
  line-height: 1;
}

.features-iconbar .feature-box-content span{
  margin: 0;
  line-height: 1.2;
}

/* Zorg dat elke kolom/box echt de volle hoogte gebruikt */
.features-iconbar .icon-with-text-style-05,
.features-iconbar .feature-box,
.features-iconbar .feature-inner {
  height: 100%;
}

/* Overlay correct laten “ankeren” */
.features-iconbar .feature-box,
.features-iconbar .feature-inner {
  position: relative;
  overflow: hidden;
}

/* De overlay moet full-bleed zijn */
.features-iconbar .feature-box-overlay {
  position: absolute;
  inset: 0;              /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity .25s ease;
}

/* Content boven overlay houden */
.features-iconbar .feature-box-icon,
.features-iconbar .feature-box-content {
  position: relative;
  z-index: 2;
}

/* Hover gedrag */
.features-iconbar .feature-box.hover-box:hover .feature-box-overlay {
  opacity: 1;
}

/* Als je ook tekst/icon op hover wit wil (optioneel) */
.features-iconbar .feature-box.hover-box:hover .feature-box-content span,
.features-iconbar .feature-box.hover-box:hover .feature-box-icon i {
  color: #fff !important;
}

  /* ---------- LAYOUT / SPACING ---------- */

  /* Geef de tiles meer “witruimte” boven/onder (binnen de tile).
     Daardoor blijft de hover-overlay ook over die ruimte zichtbaar. */
  .features-iconbar .icon-with-text-style-05,
  .features-iconbar .feature-box {
    height: 100%;
  }

  .features-iconbar .feature-box {
    position: relative;
    overflow: hidden;

    /* extra ruimte boven/onder IN de tile */
    padding: 28px 14px;

    /* zorgt dat content mooi gecentreerd staat */
    display: flex;
    align-items: center;
    justify-content: center;

    /* optioneel: vaste minimumhoogte zodat alle tiles gelijk ogen */
    min-height: 170px;
  }

  /* Zorg dat de inner wrappers de volledige ruimte kunnen gebruiken */
  .features-iconbar .feature-inner {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  /* ---------- OVERLAY (ORANJE) ---------- */

  .features-iconbar .feature-box-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;

    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }

  .features-iconbar .feature-box.hover-box:hover .feature-box-overlay {
    opacity: 1;
  }

  /* ---------- INVERT COLORS ON HOVER ---------- */
  /* Tekst + iconen wit (inverted look) wanneer de oranje overlay zichtbaar is */

  .features-iconbar .feature-box-icon i,
  .features-iconbar .feature-box-content span {
    transition: color 0.25s ease;
  }

  /* Override theme classes (text-base-color / text-dark-gray) op hover */
  .features-iconbar .feature-box.hover-box:hover .feature-box-icon i,
  .features-iconbar .feature-box.hover-box:hover .feature-box-content span,
  .features-iconbar .feature-box.hover-box:hover .text-base-color,
  .features-iconbar .feature-box.hover-box:hover .text-dark-gray {
    color: #fff !important;
  }
  
    /* Make the whole card clickable */
  .portfolio-box { position: relative; }

  .portfolio-full-link{
    position: absolute;
    inset: 0;
    z-index: 10;
    display: block;
    border-radius: 4px; /* match your border-radius-4px */
  }

  /* Keep inner links/text styling if needed */
  .portfolio-caption a { position: relative; z-index: 11; }

  /* Optional: show pointer cursor on hover */
  .portfolio-box:hover { cursor: pointer; }
  
  .text-base-color.large-dot {
    font-size: 80px;  /* Verhoogt de grootte van de punt */
    color: #FFA500;  /* Zorgt ervoor dat de punt oranje blijft */
    padding-left: 5px;  /* Optioneel: zorgt voor wat ruimte tussen de punt en het vorige woord */
}

.big-section {
    position: relative;
    background-color: var(--rood); /* De achtergrondkleur blijft rood */
}

.big-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/p.png'); /* De afbeelding wordt hier toegevoegd */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.5; /* Pas de transparantie van de afbeelding aan */
    z-index: -1; /* Zorg ervoor dat de afbeelding achter de tekst komt */
}

/* 4 per rij op XL en groter (Bootstrap override) */
.features-iconbargroot .row-cols-xl-6 > *{
  flex: 0 0 auto;
  width: 25%;
}

/* Box groter / meer hoogte */
.features-iconbargroot .feature-box{
  position: relative;
  padding: 38px 22px;
  min-height: 190px;
  transition: transform .25s ease, background-color .25s ease;
  overflow: hidden;
}

/* titel en hovertekst */
.features-iconbargroot .feature-title{
  display: block;
  transition: opacity .2s ease;
}

.features-iconbargroot .feature-hover-text{
  display: block;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.35;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}

/* Icoon transition + weg bij hover */
.features-iconbargroot .feature-box-icon i{
  transition: opacity .2s ease, transform .25s ease;
}

/* Hover: grotere kaart + rood + tekst wit */
.features-iconbargroot .feature-box:hover{
  background-color: var(--rood);
  transform: scale(1.08);           /* groter dan originele box */
  z-index: 20;                      /* boven buren */
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

/* Zorg dat de titel ook wit wordt (optioneel: verberg titel) */
.features-iconbargroot .feature-box:hover .feature-title{
  color: #fff !important;
  opacity: 0;                       /* titel verdwijnt (als je liever titel houdt: verwijder dit) */
}

/* Hovertekst zichtbaar */
.features-iconbargroot .feature-box:hover .feature-hover-text{
  opacity: 1;
  transform: translateY(0);
}

/* Icoon verdwijnt bij hover */
.features-iconbargroot .feature-box:hover .feature-box-icon i{
  opacity: 0;
  transform: translateY(-6px);
}

/* Ook de icon container/tekst wit (voor als je titel niet verbergt) */
.features-iconbargroot .feature-box:hover .feature-box-content,
.features-iconbargroot .feature-box:hover .feature-box-icon{
  color: #fff !important;
}

/* Responsive: op LG 3 per rij, op MD 2 per rij (optioneel) */
@media (max-width: 1199.98px){
  .features-iconbargroot .row-cols-xl-6 > *{ width: 33.3333%; }
}
@media (max-width: 991.98px){
  .features-iconbargroot .row-cols-xl-6 > *{ width: 50%; }
}
@media (max-width: 575.98px){
  .features-iconbargroot .row-cols-xl-6 > *{ width: 100%; }
}

/* Icoon/logo weg bij hover */
.features-iconbargroot .feature-box:hover .feature-box-icon{
  display: none !important;
}

/* Maak de inner container compacter en hoger op hover */
.features-iconbargroot .feature-inner{
  transition: transform .25s ease;
}

/* Hover: duw content omhoog zodat er meer plaats is */
.features-iconbargroot .feature-box:hover .feature-inner{
  transform: translateY(-18px);
}

/* Hovertekst hoger starten + minder spacing */
.features-iconbargroot .feature-hover-text{
  margin-top: 6px;                 /* was bv 10px */
  opacity: 0;
  transform: translateY(0);        /* basis */
  transition: opacity .25s ease, transform .25s ease;
}

.features-iconbargroot .feature-box:hover .feature-hover-text{
  opacity: 1;
  transform: translateY(-8px);     /* tekst extra omhoog */
}

/* Extra ruimte onder titel bij hover */
.features-iconbargroot .feature-title{
  margin-bottom: 6px;
  transition: margin .25s ease;
}

.features-iconbargroot .feature-box:hover .feature-title{
  margin-bottom: 14px; /* ↑ iets meer ruimte onder titel */
}

.features-iconbargroot .feature-box{
  position: relative;
  padding: 38px 24px;
  min-height: 200px;
  background: #fff;
  transition: 
    background-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
  overflow: hidden;
}

/* Titel */
.features-iconbargroot .feature-title{
  margin-bottom: 8px;
  transition: margin .25s ease, opacity .2s ease;
}

/* Hovertekst */
.features-iconbargroot .feature-hover-text{
  color: #fff;
  font-size: 15px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}

/* Icoon */
.features-iconbargroot .feature-box-icon{
  transition: opacity .2s ease;
}

.about-section .bg-deco-grijs{
  filter: grayscale(100%) brightness(110%);
  opacity: .35;
  mix-blend-mode: normal; /* ✅ zorgt dat het weer zichtbaar is */
}

/* Minder ruimte tussen slider 1 en 2 */
.about-section .col-lg-4 .ps-14{
  padding-left: 8px !important; /* was ±56px */
}

/* Slider 1 */
.about-section .col-lg-5 .ps-14{
  padding-left: 32px;
}

/* Slider 2 */
.about-section .col-lg-4 .ps-14{
  padding-left: 12px;
}

/* =========================
   FEATURES ICONBAR GROOT
   ALLES -> --rood
   ========================= */

/* Icons standaard */
.features-iconbargroot .feature-box-icon i{
  color: var(--rood) !important;
}

/* Overlay (als die nog gebruikt wordt) */
.features-iconbargroot .feature-box-overlay{
  background-color: var(--rood) !important;
}

/* Hover achtergrond */
.features-iconbargroot .feature-box:hover{
  background-color: var(--rood) !important;
  transform: scale(1.08);
  z-index: 10;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

/* Alle tekst wit bij hover */
.features-iconbargroot .feature-box:hover *{
  color: #fff !important;
}

/* Hovertekst */
.features-iconbargroot .feature-hover-text{
  color: #fff;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}

.features-iconbargroot .feature-box:hover .feature-hover-text{
  opacity: 1;
  transform: translateY(-6px);
}

/* Titel extra ruimte bij hover */
.features-iconbargroot .feature-box:hover .feature-box-content span:first-child{
  margin-bottom: 18px;
}

/* Icoon weg bij hover */
.features-iconbargroot .feature-box:hover .feature-box-icon{
  opacity: 0;
}

/* Borders neutraliseren zodat rood dominant is */
.features-iconbargroot .feature-box{
  border-color: rgba(255,255,255,.15);
}

/* =========================
   HERO BODY BAGS – ALLES ROOD
   ========================= */

/* Puntjes + accenten */
.full-screen .text-base-color,
.full-screen .large-dot{
  color: var(--rood) !important;
}

/* Button */
.full-screen .btn-base-color{
  background-color: var(--rood) !important;
  border-color: var(--rood) !important;
  color: #fff !important;
}

/* Button hover (iets donkerder voor contrast) */
.full-screen .btn-base-color:hover{
  background-color: #b73a2d !important; /* evt. iets donkerder rood */
  border-color: #b73a2d !important;
  color: #fff !important;
}

/* Eventuele iconen in deze sectie */
.full-screen i{
  color: var(--rood);
}

/* Links (indien aanwezig) */
.full-screen a:not(.btn){
  color: var(--rood);
}

/* =========================
   FEATURES ICONBAR GROOT
   ALLES ACCENT = --rood
   ========================= */

/* Icons rood */
.features-iconbargroot .text-base-color,
.features-iconbargroot .feature-box-icon i{
  color: var(--rood) !important;
}

/* Overlay rood (als je theme die gebruikt) */
.features-iconbargroot .feature-box-overlay,
.features-iconbargroot .bg-base-color{
  background-color: var(--rood) !important;
}

/* Hover: achtergrond rood + groter */
.features-iconbargroot .feature-box{
  transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.features-iconbargroot .feature-box:hover{
  background-color: var(--rood) !important;
  transform: scale(1.08);
  z-index: 10;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

/* Hover: alle tekst wit */
.features-iconbargroot .feature-box:hover *{
  color: #fff !important;
}

/* Hovertekst tonen */
.features-iconbargroot .feature-hover-text{
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.features-iconbargroot .feature-box:hover .feature-hover-text{
  opacity: 1;
  transform: translateY(-6px);
}

/* Icoon weg bij hover */
.features-iconbargroot .feature-box-icon{
  transition: opacity .2s ease;
}
.features-iconbargroot .feature-box:hover .feature-box-icon{
  opacity: 0;
}

/* ====================
   TEXT EN PUNT ROOD
   ==================== */
/* ========================
   Alleen de tekst en bolletjes in de sectie worden rood
   ======================== */

/* Verander de kleur van de tekst en de bolletjes in de sectie */
.about-section .text-base-color,
.about-section .large-dot {
  color: var(--rood) !important;
}

/* Verander de tekstkleur in de titel */
.about-section .alt-font .text-base-color {
  color: var(--rood) !important;
}
/* Zorg dat de box niet groeit door de hover tekst */
.feature-box {
    overflow: hidden; /* Houdt animaties binnen de box */
    display: flex;
    flex-direction: column;
}

/* De hover tekst moet absoluut gepositioneerd zijn of de originele tekst vervangen */
.feature-hover-text {
    display: block;
    opacity: 0;
    transition: opacity 0.3s ease;
    /* Voorkom dat deze tekst de box groter maakt */
    max-height: 0; 
    overflow: hidden;
}

.feature-box:hover .feature-hover-text {
    opacity: 1;
    max-height: 100px; /* Of een andere waarde die past bij je tekst */
}
Use code with caution.

/* 1. Maak de hover-tekst altijd zichtbaar */
.feature-box .feature-hover-text {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    transform: none !important; /* Voorkomt het 'omhoog schuiven' effect */
    margin-top: 10px; /* Ruimte tussen titel en beschrijving */
}

/* 2. Zorg dat de box niet groeit of krimpt */
.feature-box {
    height: 100% !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    padding-top: 30px;
    padding-bottom: 30px;
}

/* 3. Optioneel: Schakel de schaling uit die voor trillingen zorgt */
.content-scale {
    transform: none !important;
}

.btn-base-color {
  background-color: var(--rood);
  border-color: var(--rood);
}

.btn-base-color:hover {
  background-color: color-mix(in srgb, var(--rood) 85%, black);
  border-color: color-mix(in srgb, var(--rood) 85%, black);
}

.text-base-color { color: var(--accent) !important; }
.bg-base-color { background-color: var(--accent) !important; }
.btn-base-color { background-color: var(--accent) !important; border-color: var(--accent) !important; }
.feature-box-overlay.bg-base-color { background-color: var(--accent) !important; }

.page-title-big-typography {
    background-color: var(--gebrokenwit) !important;
    background-image: none !important; /* Verwijdert eventuele afbeelding */
}

.page-title-big-typography span {
    font-size: 25px; /* Pas aan naar wens */
    line-height: 1.6;
}

.bg-gebrokenwit {
    background-color: var(--gebrokenwit);
}

/* HARD reset-fix: bullets terug in rich text */
.rte ul,
.rte ol{
  display: block !important;          /* voor het geval ul/ol flex/grid is */
  padding-left: 1.25rem !important;   /* zorgt dat bullets zichtbaar zijn */
  margin: 0 0 1rem 0 !important;
  overflow: visible !important;       /* voor het geval markers “afgeknipt” worden */
}

.rte ul{ list-style: disc outside !important; }
.rte ol{ list-style: decimal outside !important; }

.rte li{
  display: list-item !important;      /* markers werken enkel op list-item */
  list-style: inherit !important;     /* neemt disc/decimal over */
  height: auto !important;            /* jij had eerder height:60px -> kill */
}

/* als je theme pseudo-bullets gebruikt of wegneemt */
.rte li::before{ content: none !important; }

/* als je theme markers “leeg” maakt */
.rte li::marker{
  content: initial !important;
}

/* Meer inspringen + compacter */
.rte ul,
.rte ol{
  padding-left: 2rem !important;   /* <-- inspringen (verhoog/verlaag) */
  margin: .25rem 0 .75rem 0 !important;  /* minder ruimte boven/onder de lijst */
}

.rte li{
  margin: .15rem 0 !important;     /* minder ruimte tussen bullets */
  line-height: 1.35 !important;    /* compacter tekst */
}

/* Omdat jouw editor vaak <p> in <li> zet: margins weghalen */
.rte li > p{
  margin: 0 !important;
}

.rte li{
  width: auto !important;
  max-width: none !important;
  inline-size: auto !important;
}

/* Minder witruimte NA de portfolio-sectie */
section:has(.portfolio-wrapper){
  padding-bottom: .75rem;
}

/* Minder witruimte VOOR de full-width extra tekst sectie */
section:has(.rte):not(:has(.portfolio-wrapper)){
  padding-top: .75rem;
}



section.full-screen {
  background-position: -40% 100px !important; /* duwt quote lager */
}