.elementor-4330 .elementor-element.elementor-element-c511b36 > .elementor-container{max-width:1140px;}.elementor-4330 .elementor-element.elementor-element-c511b36{padding:0px 0px 100px 0px;}.elementor-4330 .elementor-element.elementor-element-b0658e3 > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-4330 .elementor-element.elementor-element-5b3f088{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 50px) 0px;}.elementor-4330 .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-4330 .elementor-element.elementor-element-7b1f030 > .elementor-widget-container{margin:-50px 0px 0px 0px;}.elementor-4330 .elementor-element.elementor-element-e3ac2e4{--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;}.elementor-4330 .elementor-element.elementor-element-de46f22{--display:flex;}@media(min-width:768px){.elementor-4330 .elementor-element.elementor-element-de46f22{--width:100%;}}@media(max-width:1200px){.elementor-4330 .elementor-element.elementor-element-cf89edf{padding:0px 30px 0px 30px;}}@media(max-width:1024px){.elementor-4330 .elementor-element.elementor-element-c511b36{padding:0px 30px 0px 30px;}}@media(max-width:767px){.elementor-4330 .elementor-element.elementor-element-c511b36{margin-top:0px;margin-bottom:0px;padding:0px 10px 70px 10px;}.elementor-4330 .elementor-element.elementor-element-5b3f088{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 30px) 0px;}.elementor-4330 .elementor-element.elementor-element-cf89edf{padding:0px 0px 0px 0px;}.elementor-4330 .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-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 */