.elementor-3350 .elementor-element.elementor-element-de46f22{--display:flex;}@media(min-width:768px){.elementor-3350 .elementor-element.elementor-element-de46f22{--content-width:1265px;}}/* Start custom CSS for bdevs-banner, class: .elementor-element-ab0329b */.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-portfolio-one, class: .elementor-element-b5081d5 *//* =========================================================
   PROJECTENPAGINA: maak Savoye widget visueel gelijk aan Home
   (maar Isotope filter blijft op .single-item werken)
   ========================================================= */

#projects.savoye-project .savoye-project-wrap{
  display: none !important; /* we renderen onze eigen home-achtige markup */
}

/* nieuwe wrapper die we via JS injecteren */
#projects.savoye-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;
}

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

/* link wrapper zoals home, inclusief reveal */
#projects.savoye-project .project-masonry-item-img-link{
  position: relative;
  display: block;
  overflow: hidden;

  transform-origin: center center;
  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);
}

#projects.savoye-project .project-masonry-wrapper.is-visible .project-masonry-item-img-link{
  clip-path: inset(0 0 0 0);
}

/* hover zoals home */
#projects.savoye-project .project-masonry-wrapper.is-visible:hover{
  transform: scale(0.97);
}
#projects.savoye-project .project-masonry-wrapper:hover .project-masonry-item-img-link{
  transform: scale(0.96) translateZ(0);
}

/* foto */
#projects.savoye-project .project-masonry-item-img-link > img{
  display: block;
  width: 100%;
  height: auto;

  transform: translateZ(0) scale(1.06);
  transition: transform 1.1s cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}
#projects.savoye-project .project-masonry-wrapper.is-visible .project-masonry-item-img-link > img{
  transform: translateZ(0) scale(1);
}

/* gradient overlay */
#projects.savoye-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;
}
#projects.savoye-project .project-masonry-wrapper.is-visible .project-masonry-item-img-link::after{
  opacity: 1;
}

/* tekst op foto */
#projects.savoye-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;
}
#projects.savoye-project .project-masonry-wrapper.is-visible .project-masonry-item-content{
  opacity: 1;
  transform: translateY(0);
}

#projects.savoye-project .project-masonry-item-title{
  margin: 0;
  color: #fff;
  text-shadow: 0 6px 18px rgba(0,0,0,.55);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* category altijd weg zoals home */
#projects.savoye-project .project-masonry-item-category{
  display: none !important;
}

/* =========================================================
   spacing tussen projecten minder (gutter + paddings)
   ========================================================= */

/* iets minder padding in container */
#projects.savoye-project .container{
  padding-left: 40px !important;
  padding-right: 40px !important;
}

/* minder “kolom padding” */
#projects.savoye-project .savoye-project-items .single-item{
  padding: 0 !important;
}

/* mobile wat compacter */
@media (max-width: 767px){
  #projects.savoye-project .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  #projects.savoye-project .project-masonry-item-content{
    left: 18px;
    bottom: 16px;
  }
}
/* =========================================================
   PROJECTENPAGINA: Isotope masonry fix + exact home look
   ========================================================= */

/* we renderen onze home markup, dus oude wrap verbergen */
#projects.savoye-project .savoye-project-wrap{
  display: none !important;
}

/* ---------- FIX: Isotope masonry (anders alles onder elkaar) ---------- */

/* de wrapper moet relative blijven */
#projects.savoye-project .savoye-project-items{
  position: relative !important;
  height: auto;
}

/* Bootstrap col hacks uitschakelen */
#projects.savoye-project .savoye-project-items .single-item{
  float: none !important;
  display: block !important;
  flex: 0 0 auto !important;
  max-width: none !important;
  padding: 0 !important;

  /* dit is cruciaal voor masonry */
  position: absolute !important;
  width: calc(50% - 17px) !important;   /* 2 kolommen */
  margin: 0 !important;
}

/* grid-sizer voor Isotope */
#projects.savoye-project .arbro-grid-sizer{
  width: calc(50% - 17px) !important;
}

/* tablet */
@media (max-width: 1200px){
  #projects.savoye-project .savoye-project-items .single-item{
    width: calc(50% - 13px) !important;
  }
  #projects.savoye-project .arbro-grid-sizer{
    width: calc(50% - 13px) !important;
  }
}

/* mobiel: 2 kolommen tot 520px */
@media (max-width: 767px){
  #projects.savoye-project .savoye-project-items .single-item{
    width: calc(50% - 9px) !important;
  }
  #projects.savoye-project .arbro-grid-sizer{
    width: calc(50% - 9px) !important;
  }
}

/* pas 1 kolom als het echt te smal wordt */
@media (max-width: 520px){
  #projects.savoye-project .savoye-project-items .single-item{
    width: 100% !important;
  }
  #projects.savoye-project .arbro-grid-sizer{
    width: 100% !important;
  }
}

/* ---------- HOME LOOK: dezelfde card styling als op home ---------- */

/* reveal wrapper */
#projects.savoye-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;
}

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

/* link wrapper + reveal clip */
#projects.savoye-project .project-masonry-item-img-link{
  position: relative;
  display: block;
  overflow: hidden;
  transform-origin: center center;

  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);
}

#projects.savoye-project .project-masonry-wrapper.is-visible .project-masonry-item-img-link{
  clip-path: inset(0 0 0 0);
}

/* hover */
#projects.savoye-project .project-masonry-wrapper.is-visible:hover{
  transform: scale(0.97);
}
#projects.savoye-project .project-masonry-wrapper:hover .project-masonry-item-img-link{
  transform: scale(0.96) translateZ(0);
}

/* image */
#projects.savoye-project .project-masonry-item-img-link > img{
  display: block;
  width: 100%;
  height: auto;

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

#projects.savoye-project .project-masonry-wrapper.is-visible .project-masonry-item-img-link > img{
  transform: translateZ(0) scale(1);
}

/* gradient overlay */
#projects.savoye-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;
}

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

/* text overlay */
#projects.savoye-project .project-masonry-item-content{
  position: absolute;
  left: 28px;
  bottom: 22px;
  z-index: 2;

  padding: 0;
  margin: 0;

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

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

/* ---------- FIX 1: FONT exact zoals home ---------- */
/* forceer dezelfde typografie op de titel als op home */
#projects.savoye-project .project-masonry-item-title{
  margin: 0 !important;
  color: #fff !important;
  text-shadow: 0 6px 18px rgba(0,0,0,.55) !important;

  /* home vibe */
  font-family: 'Khand', sans-serif !important;   /* zet hier uw “lux” font als ge wisselt */
  font-weight: 400 !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  letter-spacing: .06em !important;
}

/* category weg */
#projects.savoye-project .project-masonry-item-category{
  display: none !important;
}

/* ---------- spacing compacter ---------- */
#projects.savoye-project .container{
  padding-left: 40px !important;
  padding-right: 40px !important;
}

@media (max-width: 767px){
  #projects.savoye-project .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  #projects.savoye-project .project-masonry-item-content{
    left: 18px;
    bottom: 16px;
  }
}

/* ---------- filter “no move” behoud ---------- */
#projects.savoye-project.arbro-no-move .savoye-project-items .single-item{
  transition-property: opacity !important;
}
#projects.savoye-project.arbro-no-move .savoye-project-items{
  transition-property: none !important;
}


/* FIX: Forceer Isotope om hoogte correct te berekenen na filter */
#projects.savoye-project .savoye-project-items .single-item[style*="display: none"] {
  display: none !important;
}/* 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: #EECB26;
  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: #EECB26;
}

#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 */