.elementor-4421 .elementor-element.elementor-element-040ee01{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-4421 .elementor-element.elementor-element-040ee01 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-4421 .elementor-element.elementor-element-da923a0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-4421 .elementor-element.elementor-element-7b1f030 > .elementor-widget-container{margin:-50px 0px 0px 0px;}.elementor-4421 .elementor-element.elementor-element-de46f22{--display:flex;}@media(min-width:768px){.elementor-4421 .elementor-element.elementor-element-de46f22{--width:100%;}}@media(max-width:767px){.elementor-4421 .elementor-element.elementor-element-da923a0{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:70px;--padding-bottom:70px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for bdevs-banner, class: .elementor-element-d0ccf53 */.banner-header{
  max-height: 55vh;
  min-height: 55vh;      /* zorgt dat hij effectief die hoogte houdt */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}/* End custom CSS */
/* Start custom CSS for bdevs-about, class: .elementor-element-e695cdd *//* About us tekst perfect centreren */
#about .col-md-7{
  display: flex;
  flex-direction: column;
  justify-content: center; /* verticaal */
  align-items: left;     /* horizontaal */
  text-align: left;
}

/* iets meer ademruimte, optioneel */
#about .section-title{
  margin-bottom: 20px;
}

/* =========================
   ABOUT reveal zoals PROJECTS
   ========================= */

#about .section-title,
#about .col-md-7 p,
#about .about-img .img{
  opacity: 0;
  transform: translateY(50px) scale(.985);
  filter: blur(10px);
  transition:
    opacity .9s cubic-bezier(.2,.9,.2,1),
    transform .9s cubic-bezier(.2,.9,.2,1),
    filter .9s cubic-bezier(.2,.9,.2,1);
  will-change: transform, opacity, filter;
}

/* zichtbaar */
#about.is-visible .section-title,
#about.is-visible .col-md-7 p,
#about.is-visible .about-img .img{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* kleine polish voor foto: mini reveal zoals projects img */
#about .about-img img{
  transform: scale(1.06);
  clip-path: inset(100% 0 0 0);
  transition:
    clip-path 1.1s cubic-bezier(.2,.9,.2,1),
    transform 1.1s cubic-bezier(.2,.9,.2,1);
  will-change: clip-path, transform;
}

#about.is-visible .about-img img{
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  #about .section-title,
  #about .col-md-7 p,
  #about .about-img .img,
  #about .about-img img{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    clip-path: inset(0 0 0 0) !important;
  }
}/* End custom CSS */
/* Start custom CSS for bdevs-features-two, class: .elementor-element-3d59ca3 *//* =========================================
   SERVICES LUXE (DESKTOP LOOK, MOBILE TAP = HOVER)
   Widget: bdevs-features-two
   ========================================= */

/* 0) comfort */
.elementor-widget-bdevs-features-two .square-flip,
.elementor-widget-bdevs-features-two .square,
.elementor-widget-bdevs-features-two .square2,
.elementor-widget-bdevs-features-two .square.bg-img,
.elementor-widget-bdevs-features-two .flip-overlay{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 1) flip uit */
.elementor-widget-bdevs-features-two .square-flip{
  position: relative;
  overflow: hidden;
  perspective: none !important;
  transform: translateZ(0);
}

/* GEEN border-radius meer */
.elementor-widget-bdevs-features-two .square-flip,
.elementor-widget-bdevs-features-two .square,
.elementor-widget-bdevs-features-two .square2{
  transform: none !important;
  backface-visibility: visible !important;
  border-radius: 0 !important;
}

/* 2) basis foto */
.elementor-widget-bdevs-features-two .square{
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.elementor-widget-bdevs-features-two .square.bg-img{
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

  transform: scale(1);
  transition:
    transform 1.05s cubic-bezier(.16,1,.3,1),
    filter 1.05s cubic-bezier(.16,1,.3,1);
  will-change: transform, filter;
}

/* 3) overlay ALTIJD zichtbaar, luxe gradient */
.elementor-widget-bdevs-features-two .square .flip-overlay{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;

  opacity: 1 !important;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(0,0,0,.12), rgba(0,0,0,.28) 55%, rgba(0,0,0,.38)),
    linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.12) 65%, rgba(0,0,0,.06));
  transition: filter .9s cubic-bezier(.16,1,.3,1);
}

/* 4) titel boven overlay */
.elementor-widget-bdevs-features-two .square-container{
  position: relative;
  z-index: 3;
}

/* 5) card hover (mag blijven) */
.elementor-widget-bdevs-features-two .square-flip{
  transition:
    transform .95s cubic-bezier(.16,1,.3,1),
    box-shadow .95s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 16px 55px rgba(0,0,0,.28);
}

.elementor-widget-bdevs-features-two .square-flip:hover{
  transform: translateY(-10px);
  box-shadow:
    0 28px 95px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04) inset;
}

/* foto hover */
.elementor-widget-bdevs-features-two .square-flip:hover .square.bg-img{
  transform: scale(1.055);
  filter: contrast(1.08) saturate(1.03) brightness(.98);
}

/* overlay hover */
.elementor-widget-bdevs-features-two .square-flip:hover .square .flip-overlay{
  filter: brightness(.92);
}

/* =========================================
   TITEL (links uitgelijnd, geen fade-out op hover)
   ========================================= */
.elementor-widget-bdevs-features-two .box-title.text-vertical{
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;

  transform: none !important;
  rotate: 0deg !important;

  position: absolute !important;
  left: 30px !important;
  right: 28px !important;
  bottom: 22px !important;
  top: auto !important;

  width: auto !important;
  height: auto !important;
  display: block !important;

  opacity: 1 !important;
  text-align: left !important;
}

.elementor-widget-bdevs-features-two .box-title.text-vertical h4{
  margin: 0 !important;
  text-align: left !important;

  /* GEEN jump, geen translate, niks */
  transform: none !important;
  rotate: 0deg !important;
  letter-spacing: .04em;
}

/* kill oude hover fade-out */
.elementor-widget-bdevs-features-two .square-flip:hover .box-title.text-vertical{
  opacity: 1 !important;
}

/* =========================================
   7) info panel (openen = fade, GEEN slide)
   ========================================= */
.elementor-widget-bdevs-features-two .square2{
  display: block !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;

  width: 100%;

  /* start: verborgen */
  opacity: 0;
  transform: none !important;
  pointer-events: none;

  background: linear-gradient(to top, rgba(10,10,10,.78), rgba(18,18,18,.58));
  backdrop-filter: blur(14px) saturate(1.15);

  transition: opacity .55s ease !important;
  will-change: opacity;
}

/* border + glow */
.elementor-widget-bdevs-features-two .square2:before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background: rgba(255,255,255,.08);
  pointer-events:none;
}

.elementor-widget-bdevs-features-two .square2:after{
  content:"";
  position:absolute;
  left:-20%; right:-20%; top:-40px;
  height:120px;
  background: radial-gradient(closest-side, rgba(255,255,255,.06), rgba(255,255,255,0));
  pointer-events:none;
  opacity:.65;
}

/* inhoud */
.elementor-widget-bdevs-features-two .square2 .square-container2{
  padding: 28px 30px;
}

/* tekst styles */
.elementor-widget-bdevs-features-two .square2 h4,
.elementor-widget-bdevs-features-two .square2 h4 a{
  color: #fff !important;
  margin: 0 0 10px 0;
  text-decoration: none;
}

.elementor-widget-bdevs-features-two .square2 p{
  color: rgba(255,255,255,.74);
  margin: 0 0 14px 0;
  line-height: 1.65;
}

/* link */
.elementor-widget-bdevs-features-two .square2 .btn-line a{
  color: #eecb26 !important;
  text-decoration: none !important;
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
  opacity: .95;
  transform: none !important;
  transition: opacity .35s ease !important;
}

.elementor-widget-bdevs-features-two .square2 .btn-line a:after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background: rgba(238,203,38,.75);
  transform: scaleX(.35);
  transform-origin: left;
  transition: transform .65s cubic-bezier(.16,1,.3,1);
}

.elementor-widget-bdevs-features-two .square-flip:hover .square2 .btn-line a:after{
  transform: scaleX(1);
}

/* OPEN state desktop */
.elementor-widget-bdevs-features-two .square-flip:hover .square2{
  opacity: 1;
  pointer-events: auto;
}

/* Kill ALLE rare inner animaties (van theme/plugin) */
.elementor-widget-bdevs-features-two .square2,
.elementor-widget-bdevs-features-two .square2 *{
  animation: none !important;
}

/* =========================================
   MOBILE TAP STATE (zelfde als hover)
   ========================================= */
@media (max-width: 991px){
  /* geen lift op touch */
  .elementor-widget-bdevs-features-two .square-flip,
  .elementor-widget-bdevs-features-two .square-flip:hover{
    transform: none !important;
    box-shadow: 0 16px 55px rgba(0,0,0,.28) !important;
  }

  /* panel open */
  .elementor-widget-bdevs-features-two .square-flip.is-open .square2{
    opacity: 1;
    pointer-events: auto;
  }

  /* probleem “tekst + knop niet zichtbaar” fix: panel krijgt max hoogte + scroll */
  .elementor-widget-bdevs-features-two .square2{
    max-height: 68%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* iets compacter op mobiel */
  .elementor-widget-bdevs-features-two .square2 .square-container2{
    padding: 22px 22px;
  }
  .elementor-widget-bdevs-features-two .square2 p{
    line-height: 1.55;
    font-size: 15px;
    margin-bottom: 12px;
  }
}

/* =========================================
   SERVICES INTRO – reveal on scroll
   ========================================= */
.elementor-widget-bdevs-features-two .square-flip{
  opacity: 0;
  transform: translateY(-28px);
  transition:
    opacity 1.4s ease,
    transform 1.9s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}

.elementor-widget-bdevs-features-two .square-flip.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* trage stagger */
.elementor-widget-bdevs-features-two .row > div:nth-child(1) .square-flip{ transition-delay: 0ms; }
.elementor-widget-bdevs-features-two .row > div:nth-child(2) .square-flip{ transition-delay: 260ms; }
.elementor-widget-bdevs-features-two .row > div:nth-child(3) .square-flip{ transition-delay: 520ms; }

/* =========================================
   SERVICES – titel altijd zichtbaar
   ========================================= */
#services .section-title{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 10 !important;
  margin-bottom: 80px;
  text-align: center;
  color: #fff;
}

#services .row:first-child{
  position: relative;
  z-index: 10;
}

#services.services-feat{
  overflow: visible !important;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .elementor-widget-bdevs-features-two *{
    transition: none !important;
    animation: none !important;
  }
}
/* =========================================
   BDEVS FEATURES TWO: 2 kolommen (gecentreerd)
   Parent class: arbro-services-2col
   ========================================= */

.arbro-services-2col .elementor-widget-bdevs-features-two .row{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important; /* centreert bij 2 kaarten */
}

/* force 2 kolommen op desktop */
.arbro-services-2col .elementor-widget-bdevs-features-two .row > div{
  flex: 0 0 50% !important;
  max-width: 50% !important;
}

/* tablet: ook 2 kolommen */
@media (max-width: 991px){
  .arbro-services-2col .elementor-widget-bdevs-features-two .row > div{
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* mobiel: 1 kolom */
@media (max-width: 767px){
  .arbro-services-2col .elementor-widget-bdevs-features-two .row > div{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
/* =========================================
   TITEL "WATERPARTIJEN OP MAAT"
   altijd 1 lijn, nooit afgesneden
   ========================================= */

#services .section-title,
.section-title{
  white-space: nowrap !important;      /* dwingt 1 lijn */
  overflow: visible !important;        /* niets afsnijden */
  text-overflow: unset !important;
  max-width: none !important;
}

/* zorg dat parent ook niet knipt */
#services,
#services .container,
#services .row,
#services .col-md-12{
  overflow: visible !important;
}

/* mobiel: iets kleiner zodat hij blijft passen */
@media (max-width: 767px){
  #services .section-title,
  .section-title{
    font-size: 26px !important;
    letter-spacing: 0.06em !important;
  }
}

/* =========================================
   FIX: square2 altijd volledige hoogte
   (mobile)
   ========================================= */
@media (max-width: 991px){

  /* panel moet exact even groot zijn als de kaart */
  .elementor-widget-bdevs-features-two .square2{
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* remove oude beperking */
  .elementor-widget-bdevs-features-two .square-flip.is-open .square2{
    max-height: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for bdevs-portfolio-two, class: .elementor-element-7b1f030 *//* =========================================================
   LOOK zoals foto 2, zonder hover effecten (voor widget 7b1f030)
   ========================================================= */

/* basis */
.elementor-element-7b1f030 .project-masonry-wrapper,
.elementor-element-7b1f030 .project-masonry-item-img-link{
  position: relative;
  display: block;
  overflow: hidden;
}

/* vaste hoogte */
.elementor-element-7b1f030 .project-masonry-item-img-link > img{
  display:block;
  width:100%;
  height: 360px;
  object-fit: cover;
  transition: none; /* geen zoom */
}

/* bottom gradient altijd hetzelfde */
.elementor-element-7b1f030 .project-masonry-item-img-link::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.0) 55%);
  opacity: .85;
  transition: none; /* geen hover fade */
  z-index: 1;
}

/* Titel always-on */
.elementor-element-7b1f030 .project-masonry-item-content{
  position:absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  width: calc(100% - 60px);
  padding: 0;
  margin: 0;
  background: transparent !important;
  z-index: 2;
  text-align: center;
}

.elementor-element-7b1f030 .project-masonry-item-title{
  margin: 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 500;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* categorie verbergen */
.elementor-element-7b1f030 .project-masonry-item-category{
  display: none;
}

/* pijl volledig weg */
.elementor-element-7b1f030 .project-masonry-item-img-link::after{
  content: none !important;
}

/* hover volledig neutraal */
.elementor-element-7b1f030 .project-masonry-item-img-link:hover::before{
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.0) 55%);
  opacity: .85;
}

.elementor-element-7b1f030 .project-masonry-item-img-link:hover > img{
  transform: none;
}

/* mobiel */
@media (max-width: 767px){
  .elementor-element-7b1f030 .project-masonry-item-img-link > img{
    height: 280px;
  }
  .elementor-element-7b1f030 .project-masonry-item-content{
    bottom: 20px;
    width: calc(100% - 40px);
  }
  .elementor-element-7b1f030 .project-masonry-item-title{
    font-size: 14px;
    letter-spacing: .22em;
  }
}
/* =========================================
   TITEL 100% STABIEL OP HOVER (NO MOVEMENT)
   ========================================= */

/* geen enkele animatie of transform op titel */
.elementor-element-7b1f030 .project-masonry-item-title,
.elementor-element-7b1f030 .project-masonry-item-img-link:hover .project-masonry-item-title{
  transition: none !important;
  transform: none !important;
  animation: none !important;
  letter-spacing: .28em !important; /* force exact dezelfde spacing */
}

/* ook de container mag niet bewegen */
.elementor-element-7b1f030 .project-masonry-item-content,
.elementor-element-7b1f030 .project-masonry-item-img-link:hover .project-masonry-item-content{
  transition: none !important;
  transform: translateX(-50%) !important; /* exact zoals je basis */
  animation: none !important;
}

/* zekerheid: sommige themes zetten hover op de link zelf */
.elementor-element-7b1f030 .project-masonry-item-img-link,
.elementor-element-7b1f030 .project-masonry-item-img-link:hover{
  transform: none !important;
}
/* =========================================
   ZACHTE HOVER: titel omhoog + pijl verschijnt
   ========================================= */

/* titel: startpositie */
.elementor-element-7b1f030 .project-masonry-item-title{
  transform: translateY(0);
  transition: transform .25s ease;
}

/* pijl element (verborgen) */
.elementor-element-7b1f030 .project-masonry-item-content::after{
  content: "→";
  display: block;
  margin-top: 12px;
  font-size: 22px;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}

/* hover: titel zacht omhoog */
.elementor-element-7b1f030
.project-masonry-item-img-link:hover
.project-masonry-item-title{
  transform: translateY(-8px);
}

/* hover: pijl verschijnt */
.elementor-element-7b1f030
.project-masonry-item-img-link:hover
.project-masonry-item-content::after{
  opacity: 1;
  transform: translateY(0);
}
/* =========================================
   HOVER: titel zacht omhoog + pijl + extra bottom gradient
   (zonder horizontale shift)
   ========================================= */

/* container blijft stabiel, alleen de titel mag Y bewegen */
.elementor-element-7b1f030 .project-masonry-item-content,
.elementor-element-7b1f030 .project-masonry-item-img-link:hover .project-masonry-item-content{
  transition: none !important;
  transform: translateX(-50%) !important;
  animation: none !important;
}

/* titel: start exact zoals default, maar klaar voor Y-animatie */
.elementor-element-7b1f030 .project-masonry-item-title{
  transition: transform .28s ease !important;
  transform: translateY(0) !important;
  animation: none !important;
  letter-spacing: .28em !important;
}

/* hover: alleen verticaal omhoog */
.elementor-element-7b1f030 .project-masonry-item-img-link:hover .project-masonry-item-title{
  transform: translateY(-10px) !important;
}

/* pijl (verborgen) */
.elementor-element-7b1f030 .project-masonry-item-content::after{
  content: "→";
  display: inline-block;
  margin-top: 10px;
  font-size: 22px;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .28s ease, transform .28s ease;
}

/* hover: pijl verschijnt */
.elementor-element-7b1f030 .project-masonry-item-img-link:hover .project-masonry-item-content::after{
  opacity: 1;
  transform: translateY(0);
}

/* extra mini gradient enkel op hover (bovenop je bestaande ::before) */
.elementor-element-7b1f030 .project-masonry-item-img-link:hover::before{
  background:
    linear-gradient(to top, rgba(0,0,0,.70) 0%, rgba(0,0,0,0) 62%),
    linear-gradient(to top, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 40%);
  opacity: 1;
}

/* zorg dat de link zelf niet schaalt of verschuift */
.elementor-element-7b1f030 .project-masonry-item-img-link,
.elementor-element-7b1f030 .project-masonry-item-img-link:hover{
  transform: none !important;
}
/* titel lager in niet-hover, verder niets aanpassen */
.elementor-element-7b1f030 .project-masonry-item-content{
  bottom: 14px !important;
}
/* smoother gradient fade-in op hover (geen boem) */
.elementor-element-7b1f030 .project-masonry-item-img-link::before{
  transition: opacity .35s ease !important;
}

/* extra hover gradient laag die zacht in-fadet */
.elementor-element-7b1f030 .project-masonry-item-img-link::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* zelfde laag als ::before */
  background:
    linear-gradient(to top, rgba(0,0,0,.70) 0%, rgba(0,0,0,0) 62%),
    linear-gradient(to top, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 40%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}

/* hover: hover-gradient laag verschijnt zacht */
.elementor-element-7b1f030 .project-masonry-item-img-link:hover::after{
  opacity: 1;
}/* End custom CSS */
/* Start custom CSS for bdevs-contact, class: .elementor-element-99db3bc *//* =========================
   CTA (#contact) – flat button 1:1 slider feel
   ========================= */

/* Base: neem slider-styling over, maar houd anchor basics */
#contact a.btn.float-btn.flat-btn{
  display: inline-block;
  position: relative;

  padding: 12px 24px 9px 24px;
  font-size: 17px;
  letter-spacing: 4px;
  text-transform: uppercase;
  border-radius: 0;

  border: 1px solid transparent;
  background: #CAA600;
  color: #000 !important;

  text-decoration: none !important;
  box-shadow: none !important;

  transition: all 200ms linear;
  -webkit-tap-highlight-color: transparent;

  /* in CTA beter geen float */
  float: none !important;
}

/* spacing zoals in header */
#contact .caption a.btn.float-btn.flat-btn,
#contact .topbanner-footer a.btn.float-btn.flat-btn{
  margin-top: 20px;
  margin-bottom: 20px;
}

/* de lijn links (exact slider) */
#contact a.btn.float-btn.flat-btn::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 20px;
  height: 1px;
  width: 0;

  background: #000 !important;
  transition: all 200ms linear;
  transform: translateY(-50%);
}

/* Hover effect: lijn groeit + tekst schuift (dit mist ge nu) */
#contact a.btn.float-btn.flat-btn:hover{
  padding-left: 64px; /* 24 + (lijn + spacing) */
  color: #000 !important;
  background: #CAA600;
}

#contact a.btn.float-btn.flat-btn:hover::before{
  width: 30px;
}

/* Focus fixes */
#contact a.btn.float-btn.flat-btn:focus,
#contact a.btn.float-btn.flat-btn:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* Mobile: hover simuleren bij tap (veel sites doen dit) */
@media (hover: none), (pointer: coarse){
  #contact a.btn.float-btn.flat-btn:active{
    padding-left: 64px;
  }
  #contact a.btn.float-btn.flat-btn:active::before{
    width: 30px;
  }
}


-

/* =========================
   CTA #contact – spacing & cleanup
   ========================= */

/* 1) Titel -> tekst: 20px */
#contact .section-title{
  margin-bottom: 20px !important;
}

#contact .col-md-4 p{
  margin-top: 0 !important;
}

/* 2) Tekst -> button: 20px */
#contact .col-md-4 p{
  margin-bottom: 20px !important;
}

/* 3) Verwijder Our Location volledig */
#contact .vid-area{
  display: none !important;
}

/* 4) Maak tekstkolom breder
   Origineel: col-md-4 + col-md-3 offset
   We trekken tekst door */
#contact .col-md-4{
  flex: 0 0 55%;
  max-width: 55%;
}

/* Zorg dat layout niet breekt op mobiel */
@media (max-width: 991px){
  #contact .col-md-4{
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* spacing tussen titel en tekst in CTA corrigeren */
.topbanner-footer .mb-30{
  margin-bottom: -20px !important;
}

/* =========================
   CTA titel – zelfde sizes als hero h1
   ========================= */

/* Desktop */
.section-title{
  font-size: 60px;
}

/* Tablet */
@media (max-width: 1024px){
  .section-title{
    font-size: 60px;
  }
}

/* Mobiel */
@media (max-width: 768px){
  .section-title{
    font-size: 44px;
  }
}/* End custom CSS */