.elementor-849 .elementor-element.elementor-element-60a1b0f{--display:flex;}.elementor-849 .elementor-element.elementor-element-9706e9d{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-849 .elementor-element.elementor-element-9706e9d > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}@media(min-width:768px){.elementor-849 .elementor-element.elementor-element-60a1b0f{--content-width:1265px;}}/* Start custom CSS for bdevs-slider, class: .elementor-element-cabb03b */.header .caption h1 {
    font-size: 65px;
}

@media (max-width: 1024px) {
    .header .caption h1 {
        font-size: 50px;
    }
}

@media (max-width: 768px) {
    .header .caption h1 {
        font-size: 44px;
    }
}

/* =========================
   HERO SLIDER – LUXE OVERLAY (LICHTER)
   ========================= */

/* slide basis */
.elementor-widget-bdevs-slider .item.bg-img{
  position: relative !important;
}

/* overlay */
.elementor-widget-bdevs-slider .item.bg-img .arbro-slide-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  /* lichter maar nog luxe */
  background:
    radial-gradient(
      120% 90% at 30% 20%,
      rgba(0,0,0,.08),
      rgba(0,0,0,.28) 55%,
      rgba(0,0,0,.42)
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,.18),
      rgba(0,0,0,.38)
    );
}

/* caption altijd boven overlay */
.elementor-widget-bdevs-slider .item.bg-img .caption{
  position: relative;
  z-index: 2;
}


hieronder/* End custom CSS */
/* Start custom CSS for bdevs-portfolio-two, class: .elementor-element-089dbf3 *//* Wrapper animatie zoals v1 */
.project .project-masonry-wrapper{
  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;
}

.project .project-masonry-wrapper.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Link wrapper, hier komt de reveal op zodat overlay en foto samen bewegen */
.project .project-masonry-item-img-link{
  position: relative;
  display: block;
  overflow: hidden;

  transform-origin: center center;
  transition: transform .6s cubic-bezier(.2,.9,.2,1);

  /* reveal zit nu hier */
  clip-path: inset(100% 0 0 0);
  transition:
    clip-path 1.1s cubic-bezier(.2,.9,.2,1),
    transform .6s cubic-bezier(.2,.9,.2,1);

  will-change: clip-path, transform;
  transform: translateZ(0);
}

/* reveal open */
.project .project-masonry-wrapper.is-visible .project-masonry-item-img-link{
  clip-path: inset(0 0 0 0);
}

/* Hover effect zoals v1, kader zoomt licht uit */
.project .project-masonry-wrapper.is-visible:hover{
  transform: scale(0.97);
}
.project .project-masonry-wrapper:hover .project-masonry-item-img-link{
  transform: scale(0.96) translateZ(0);
}

/* Foto zelf, geen clip-path meer hier */
.project .project-masonry-item-img-link > img{
  display: block;
  width: 100%;
  height: auto;

  transform: scale(1.06);
  transition: transform 1.1s cubic-bezier(.2,.9,.2,1);
  will-change: transform;

  transform: translateZ(0) scale(1.06);
}

/* Na reveal terug naar normaal */
.project .project-masonry-wrapper.is-visible .project-masonry-item-img-link > img{
  transform: translateZ(0) scale(1);
}

/* Gradient overlay, nu wordt die mee geclipt door de wrapper */
.project .project-masonry-item-img-link::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 42%;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));

  opacity: 0;
  transition: opacity .6s ease .15s;
  pointer-events: none;

  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: opacity;
}

.project .project-masonry-wrapper.is-visible .project-masonry-item-img-link::after{
  opacity: 1;
}

/* Tekst op de foto zetten */
.project .project-masonry-item-content{
  position: absolute;
  left: 28px;
  bottom: 22px;
  z-index: 2;

  background: transparent;
  padding: 0;
  margin: 0;

  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease .35s, transform .6s ease .35s;
}

.project .project-masonry-wrapper.is-visible .project-masonry-item-content{
  opacity: 1;
  transform: translateY(0);
}

/* Title styling */
.project .project-masonry-item-title{
  margin: 0;
  color: #fff;
  text-shadow: 0 6px 18px rgba(0,0,0,.55);
}

/* Category weg */
.project .project-masonry-item-category{
  display: none;
}


hieronder
/* Meer ruimte rond de hele projecten sectie */
.project.section-padding{
  padding-top: 110px;
  padding-bottom: 110px;
}

/* Ruimte links/rechts zodat het minder “gepropt” oogt */
.project .container{
  max-width: 1320px; /* of 1400 als ge nog breder wilt */
  padding-left: 40px;
  padding-right: 40px;
}

/* Ruimte tussen de kaarten */
.project .project-masonry-wrapper{
  margin-bottom: 56px;
}

/* Als uw theme padding op die kolommen heeft, zet die wat hoger */
.project .project-masonry-wrapper-padding{
  padding-left: 28px;
  padding-right: 28px;
}
.project .project-masonry-wrapper{
  margin-bottom: 72px;
}

.project .project-masonry-wrapper-padding{
  padding-left: 34px;
  padding-right: 34px;
}

.project .container{
  padding-left: 55px;
  padding-right: 55px;
}
/* ===============================
   MEER LUXE SPACING – DESKTOP ONLY
   =============================== */
@media (min-width: 992px){

  /* Meer ademruimte rond de hele projecten sectie */
  .project.section-padding{
    padding-top: 120px;
    padding-bottom: 120px;
  }

  /* Iets breder en rustiger links/rechts */
  .project .container{
    max-width: 1320px; /* verhoog naar 1400px als ge nog meer luxe wilt */
    padding-left: 50px;
    padding-right: 50px;
  }

  /* Meer ruimte tussen de kaarten */
  .project .project-masonry-wrapper{
    margin-bottom: 70px;
  }

  /* Meer spacing tussen kolommen */
  .project .project-masonry-wrapper-padding{
    padding-left: 32px;
    padding-right: 32px;
  }

}

.project .section-title{
  margin-bottom: 80px;
}


/* =========================================
   HOMEPAGE PROJECTEN – MOBILE: SPACING KILL (HARD OVERRIDE)
   Plak dit als allerlaatste in uw Custom CSS
   ========================================= */
@media (max-width: 767px){

  /* alles binnen de projecten sectie: geen padding links/rechts */
  body.home .project.section-padding,
  body.home .project.section-padding .elementor-container,
  body.home .project.section-padding .container,
  body.home .project.section-padding .container-fluid{
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  /* Elementor kolommen zetten vaak padding op "element-populated" */
  body.home .project.section-padding .elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated,
  body.home .project.section-padding .elementor-column-gap-narrow  > .elementor-row > .elementor-column > .elementor-element-populated,
  body.home .project.section-padding .elementor-column-gap-extended> .elementor-row > .elementor-column > .elementor-element-populated,
  body.home .project.section-padding .elementor-column-gap-wide    > .elementor-row > .elementor-column > .elementor-element-populated,
  body.home .project.section-padding .elementor-column-gap-wider   > .elementor-row > .elementor-column > .elementor-element-populated{
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* bootstrap cols (savoye) kunnen ook gutters geven */
  body.home .project.section-padding .row{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.home .project.section-padding [class*="col-"],
  body.home .project.section-padding [class*="col-"]{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* uw eigen wrapper padding en marges weg */
  body.home .project.section-padding .project-masonry-wrapper-padding{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* alleen een klein beetje ruimte tussen kaarten */
  body.home .project.section-padding .project-masonry-wrapper{
    margin-bottom: 14px !important;
  }

  /* sectie zelf ook compacter */
  body.home .project.section-padding{
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  body.home .project.section-padding .section-title{
    margin-bottom: 18px !important;
  }
}/* End custom CSS */
/* Start custom CSS for bdevs-features-two, class: .elementor-element-462ee23 *//* =========================================
   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;
  }
}

/* =========================================
   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-about, class: .elementor-element-af54b94 *//* 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-contact, class: .elementor-element-05a361b *//* =========================
   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 */