.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;
}

/* 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;
}

.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;
}