.elementor-kit-7{--e-global-color-primary:#000000;--e-global-color-secondary:#FFFFFF;--e-global-color-text:#000000;--e-global-color-accent:#000000;--e-global-color-47a0420:#E6E6E6;--e-global-color-dd546a7:#A1A1A1;--e-global-color-52f40f3:#474747;--e-global-typography-primary-font-family:"Outfit";--e-global-typography-primary-font-weight:500;--e-global-typography-secondary-font-family:"Outfit";--e-global-typography-secondary-font-weight:300;--e-global-typography-text-font-family:"Outfit";--e-global-typography-text-font-size:17px;--e-global-typography-text-font-weight:300;--e-global-typography-text-line-height:1.45em;--e-global-typography-accent-font-family:"Outfit";--e-global-typography-accent-font-weight:500;--e-global-typography-duetint-font-family:"Outfit";--e-global-typography-duetint-font-size:26px;--e-global-typography-duetint-font-weight:300;--e-global-typography-duetint-line-height:36px;color:var( --e-global-color-text );font-family:"Outfit", Sans-serif;font-size:18px;font-weight:300;line-height:1.45em;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{background-color:#FFFFFF;font-size:18px;font-weight:500;color:#000000;border-style:solid;border-width:2px 2px 2px 2px;border-color:var( --e-global-color-primary );border-radius:0px 0px 0px 0px;padding:10px 25px 10px 25px;}.elementor-kit-7 button:hover,.elementor-kit-7 button:focus,.elementor-kit-7 input[type="button"]:hover,.elementor-kit-7 input[type="button"]:focus,.elementor-kit-7 input[type="submit"]:hover,.elementor-kit-7 input[type="submit"]:focus,.elementor-kit-7 .elementor-button:hover,.elementor-kit-7 .elementor-button:focus{background-color:#000000;color:#FFFFFF;border-style:solid;border-width:2px 2px 2px 2px;border-radius:0px 0px 0px 0px;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{color:var( --e-global-color-text );}.elementor-kit-7 a:hover{color:var( --e-global-color-52f40f3 );}.elementor-kit-7 h1{color:var( --e-global-color-primary );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1300px;}.e-con{--container-max-width:1300px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(min-width:2400px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1500px;}.e-con{--container-max-width:1500px;}}@media(max-width:1024px){.elementor-kit-7{--e-global-typography-duetint-font-size:22px;--e-global-typography-duetint-line-height:31px;font-size:17px;line-height:1.45em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7{--e-global-typography-accent-font-size:16px;--e-global-typography-accent-line-height:23px;--e-global-typography-duetint-font-size:20px;--e-global-typography-duetint-line-height:28px;font-size:17px;line-height:1.45em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//*selection*/
::-moz-selection { color:white;}
::selection { color:white;}
::-moz-selection { background:black  ;}
::selection { background: black ; }


/*diverse*/
.grecaptcha-badge { visibility: hidden !important; }


.opsomming ul li::before {
    content: "25A0";
    color: black;
    font-weight: bold;
    display: inline-block;
    width: 15px;
    margin-right: 5px;
    margin-left: -20px !important;
}
/*fonts*/
p strong, p b{
    font-weight:500;
}




/* T-shaped white line accent */
.white-t-accent {
  position: relative;
  margin: 0 auto 16px auto;
}

.white-t-accent::before {
  content: '';
  position: absolute;
  width: 80px;
  height: 18px;
  background: white;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.white-t-accent::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 150px;
  background: white;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
}



.job-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 1.4em;
    height: 1.4em;
    border-radius: 50%;

    background-color: #000;
    color: #ffffff;

    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.7em;
    line-height: 1;

    margin-left: 0.4rem;
}
/* Container - add overflow hidden */
.image-zoom-container {
  overflow: hidden;
  position: relative;
}

/* Image - zoom on hover */
.image-zoom-container img {
  transition: transform 0.8s ease;
}

.image-zoom-container:hover img {
  transform: scale(1.1);
}

/*hero overlay*/
.hero-overlay {
    position: relative;
}

.hero-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.6) 0%, transparent 50%);
    z-index: 1;
    pointer-events: none;
}

/* 1. Juridische paginas (sjabloon Juridische pagina, container .du-juridisch)
   Reden: dit is gerenderde post_content uit de gewone editor. Elementor kan de
   koppen, alineas en lijsten daarbinnen niet aansturen, dus zonder deze regels
   vallen ze terug op de reset van hello-elementor (h2 op 2rem, marges in rem).
   Maten komen uit de lettertrap, afstanden uit de maatladder. */
.du-juridisch h2{
  font-size:25px; font-weight:500; line-height:1.3;
  margin:50px 0 15px; color:var(--e-global-color-primary);
}
.du-juridisch h2:first-child{ margin-top:0; }
.du-juridisch p, .du-juridisch li{
  font-size:18px; font-weight:300; line-height:1.5;
  color:var(--e-global-color-text);
}
.du-juridisch p{ margin:0 0 15px; }
.du-juridisch ul, .du-juridisch ol{ margin:0 0 25px; padding-left:20px; }
.du-juridisch li{ margin-bottom:10px; }
.du-juridisch a{ color:var(--e-global-color-text); text-decoration:underline; }
.du-juridisch a:hover, .du-juridisch a:focus{ color:var(--e-global-color-52f40f3); }
@media (max-width:767px){
  .du-juridisch p, .du-juridisch li{ font-size:16px; }
  .du-juridisch h2{ font-size:25px; margin-top:40px; }
}


/* 2. "Pas cookies aan", de knop die de cookiemelding opnieuw opent
   Reden: Complianz zet standaard een zwevend tabje rechtsonder dat het logo van
   Graviteit afdekt. Dat tabje is verborgen in de eigen CSS van de banner. Deze
   knop vervangt het, en staat twee keer: in de footer naast Cookiebeleid, en
   onder het cookiebeleid zelf (blok 4). In de footer stond eerst een tandwiel;
   dat bleek niet duidelijk, dus het is nu tekst.

   ALLE WAARDEN HIERONDER ZIJN OVERGENOMEN UIT post-1019.css, van de icon-list
   98ec277 waar de drie links naast staan:
     desktop           16px / 300 / regelhoogte 22px   (regel zonder media query)
     tot en met 767px  18px / regelhoogte 30px         (@media max-width:767px)
     tussenruimte      margin-inline: calc(28px/2), dus 14px per kant
   Let op de volgorde: de 18px staat in de mobiele media query. Neem je die
   over als desktopwaarde, dan staat deze knop groter dan zijn buren.

   LET OP DE SELECTOR. De kit zet op elke kale <button> een witte pil:
   .elementor-kit-7 button { border:1px; border-radius:30px; padding:10px 25px }
   Dat is specificiteit 0-1-1; een kale klasse is 0-1-0 en verliest. Daarom
   overal button.du-..., gelijke specificiteit maar later in het bestand, en
   daarom wordt elke eigenschap die de kit zet expliciet teruggezet. */
button.du-cookielink{
  display:none; margin:0 0 0 28px; padding:0; width:fit-content;
  border:0; border-width:0; border-radius:0;
  background:none; background-color:transparent;
  font-family:"Outfit", Sans-serif; font-size:16px; font-weight:300;
  line-height:22px; color:var(--e-global-color-text);
  cursor:pointer; text-align:left; vertical-align:baseline;
  transition:color .3s;
}
body:has(.cmplz-cookiebanner) button.du-cookielink{ display:block; }
button.du-cookielink:hover, button.du-cookielink:focus,
button.du-cookielink:active{
  background:none; background-color:transparent; border:0; outline:none;
  color:var(--e-global-color-52f40f3);
}
button.du-cookielink:focus-visible{
  outline:2px solid var(--e-global-color-text); outline-offset:3px;
}
@media (max-width:767px){
  /* onderrij van de footer: links en cookieknop netjes onder elkaar, gecentreerd */
  button.du-cookielink{ font-size:18px; line-height:30px; margin-left:0; }
  .elementor-1019 .elementor-element.elementor-element-98ec277{ align-self:flex-start; --align-self:flex-start; }
  .elementor-1019 .elementor-element-98ec277 .elementor-icon-list-items.elementor-inline-items{ flex-direction:column; align-items:flex-start; margin:0; }
  .elementor-1019 .elementor-element-98ec277 .elementor-inline-items .elementor-icon-list-item{ margin:0 0 10px; padding:0; }
}
.du-cookieknop-wrap{ display:inline-flex; align-items:center; }

/* De footerrij. Drie vallen zaten hier.
   1) dujurwrap is een e-con-full en stond dus op 100% breedte; daardoor kneep
      het de tekst ernaast en viel "Launched by Graviteit" over twee regels.
   2) Elementor schrijft zelf in post-1019.css
      .elementor-1019 .elementor-element.elementor-element-dujurwrap{--gap:10px 10px}
      Dat is 0-3-0. Een kale .elementor-element-dujurwrap is 0-1-0 en verliest,
      dus de gap bleef gewoon 10px staan. Vandaar de body-prefix: 0-3-1.
   3) De icon-list ernaast staat op --align-self:flex-start, de knop volgde
      --align-items:center van de container en zakte daardoor een paar pixels.
      Allebei bovenaan uitlijnen, en de knop op display:block zodat er geen
      regelvak met onderruimte omheen komt te staan.
   De tussenruimte komt volledig uit de margin van de knop. Twee list-items
   naast elkaar geven 14+14=28px; de ul haalt met margin-inline:-14px zijn
   eigen buitenmarges weg, dus de knop moet die 28px in zijn eentje leveren.
   Onder 767px wordt dat 35px, want daar staat de list op calc(35px/2). */
body .elementor-1019 .elementor-element.elementor-element-dujurwrap{
  width:auto; flex:0 1 auto;
  --gap:0px 0px; --row-gap:0px; --column-gap:0px; gap:0;
}
.elementor-1019 .elementor-element.elementor-element-cmplzgear{
  --align-self:flex-start; align-self:flex-start;
}
.elementor-element-1f268cf{ flex:0 0 auto; }
.elementor-element-1f268cf p{ white-space:nowrap; margin:0; }

/* 3. Het juridische document van Complianz, [cmplz-document], in huisstijl
   Reden: document.min.css van de plugin stuurt met #cmplz-document, een
   ID-.elementor-kit-7, en die wint van .du-juridisch uit blok 1. Vandaar dat elke
   regel hier het ID meeneemt. De plugin zet p en li op 14px, knijpt de
   tekst op 800px en geeft h2 en h3 allebei 22px, waardoor de koppenlijn
   plat is. Dit zet alles terug op de lettertrap van de huisstijl. */
.du-juridisch #cmplz-document{
  max-width:none; font-size:18px; color:var(--e-global-color-text);
}
.du-juridisch #cmplz-document p,
.du-juridisch #cmplz-document li,
.du-juridisch #cmplz-document td{
  font-size:18px; font-weight:300; line-height:1.5;
  color:var(--e-global-color-text); margin:0 0 15px;
}
.du-juridisch #cmplz-document ul{ margin:0 0 25px; padding-left:20px; }
.du-juridisch #cmplz-document li{ margin:0 0 10px; }
.du-juridisch #cmplz-document h2{
  font-size:25px; font-weight:500; line-height:1.3;
  margin:50px 0 15px; padding-bottom:0;
  color:var(--e-global-color-primary);
}
.du-juridisch #cmplz-document h3{
  font-size:18px; font-weight:500; line-height:1.4;
  margin:30px 0 10px; padding-bottom:0;
  color:var(--e-global-color-primary);
}
.du-juridisch #cmplz-document h4{
  font-size:16px; font-weight:500; margin:20px 0 5px;
  color:var(--e-global-color-primary);
}
.du-juridisch #cmplz-document h5{
  font-size:14px; font-weight:500; margin:0 0 5px;
  color:var(--e-global-color-primary);
}
.du-juridisch #cmplz-document a{
  color:var(--e-global-color-text); text-decoration:underline;
}
.du-juridisch #cmplz-document a:hover,
.du-juridisch #cmplz-document a:focus{ color:var(--e-global-color-52f40f3); }
/* De plugin plakt achter elke externe link een base64-pijltje in een kleur
   die niet in het palet zit. Weg ermee; target="_blank" blijft gewoon staan. */
.du-juridisch #cmplz-document a[target=_blank]::after{ content:none; margin:0; }
.du-juridisch #cmplz-document a:focus{ border:0; padding:0; }
.du-juridisch #cmplz-document a:focus-visible{
  outline:2px solid var(--e-global-color-text); outline-offset:2px;
}
/* De uitklapper per dienst en de cookietabel eronder. Hairlines in de
   lijnkleur van de kit, zodat de tabel leesbaar is zonder vlakken. */
.du-juridisch #cmplz-document .cmplz-dropdown{
  border-top:1px solid var(--e-global-color-47a0420); padding:15px 0;
}
.du-juridisch #cmplz-document .cmplz-dropdown:last-of-type{
  border-bottom:1px solid var(--e-global-color-47a0420);
}
.du-juridisch #cmplz-document .cmplz-dropdown summary div h3{ margin:0; }
.du-juridisch #cmplz-document .cookies-per-purpose{
  grid-gap:5px 20px; margin-top:15px;
  border-top:1px solid var(--e-global-color-47a0420); padding-top:15px;
}
.du-juridisch #cmplz-document .cookies-per-purpose .name,
.du-juridisch #cmplz-document .cookies-per-purpose .retention,
.du-juridisch #cmplz-document .cookies-per-purpose .function{
  font-size:16px; font-weight:300; line-height:1.4;
}
@media (max-width:767px){
  .du-juridisch #cmplz-document,
  .du-juridisch #cmplz-document p,
  .du-juridisch #cmplz-document li,
  .du-juridisch #cmplz-document td{ font-size:16px; }
  .du-juridisch #cmplz-document h2{ font-size:25px; margin-top:40px; }
  .du-juridisch #cmplz-document h3{ font-size:16px; }
}



/* 4. Het toestemmingspaneel bij 7.1 van het cookiebeleid, en de knop erbij
   Reden: Complianz vult #cmplz-manage-consent-container via een AJAX-verzoek
   met de schuifjes per categorie, en geeft ze grijze vlakken van
   rgba(239,239,239,...). Die grijstint zit niet in het palet. Hier worden dat
   hairlines in de lijnkleur van de kit.
   De knop eronder staat in sjabloon 3124 en wordt alleen getoond wanneer het
   cookiebeleid op de pagina staat; de poort is de inhoud zelf en geen
   pagina-ID, zodat hij een verhuizing naar een ander domein overleeft. */
.du-juridisch .cmplz-manage-consent-container .cmplz-categories{ margin-top:15px; }
.du-juridisch .cmplz-manage-consent-container .cmplz-category{
  background-color:transparent;
  border-bottom:1px solid var(--e-global-color-47a0420);
}
.du-juridisch .cmplz-manage-consent-container .cmplz-category:first-child{
  border-top:1px solid var(--e-global-color-47a0420);
}
.du-juridisch .cmplz-manage-consent-container .cmplz-category:not(:last-child){
  margin-bottom:0;
}
.du-juridisch .cmplz-manage-consent-container .cmplz-category-header{
  background-color:transparent; padding:15px 0;
}
.du-juridisch .cmplz-manage-consent-container .cmplz-category-title{
  font-size:18px; font-weight:500; color:var(--e-global-color-primary);
}
.du-juridisch .cmplz-manage-consent-container .cmplz-always-active{
  font-size:16px; font-weight:300; color:var(--e-global-color-text);
}
.du-juridisch .cmplz-manage-consent-container .cmplz-description{
  padding:0 0 15px; font-size:16px; font-weight:300; line-height:1.5;
}
.du-juridisch .cmplz-manage-consent-container .cmplz-category-toggle{
  color:var(--e-global-color-text);
}
.du-juridisch .cmplz-manage-consent-container .cmplz-category-toggle:hover,
.du-juridisch .cmplz-manage-consent-container .cmplz-category-toggle:focus{
  background:none; color:var(--e-global-color-52f40f3);
}
/* De knop onder het document: tandwiel plus tekst, in de knopvorm van de site.
   Ook hier button.du-cookieknop-groot in plaats van de kale klasse, want de
   kit zet er anders 30px afronding op. Vierkant met een rand van 2px, zoals
   ONTDEK ONS TEAM op de homepage. */
.du-cookieknop-blok{ display:none; margin:40px 0 0; }
body:has(#cmplz-document.cookie-statement) .du-cookieknop-blok{ display:block; }
button.du-cookieknop-groot{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 25px; cursor:pointer;
  font-family:inherit; font-size:18px; font-weight:500; line-height:1.2;
  color:var(--e-global-color-text);
  background:transparent; background-color:transparent;
  border-style:solid; border-width:2px; border-radius:0;
  border-color:var(--e-global-color-primary);
  transition:background-color .2s, color .2s;
}
button.du-cookieknop-groot svg{ width:20px; height:20px; flex:none; }
button.du-cookieknop-groot:hover, button.du-cookieknop-groot:focus,
button.du-cookieknop-groot:active{
  background-color:var(--e-global-color-primary);
  color:var(--e-global-color-secondary);
  border-color:var(--e-global-color-primary); outline:none;
}
button.du-cookieknop-groot:focus-visible{
  outline:2px solid var(--e-global-color-text); outline-offset:3px;
}
@media (max-width:767px){
  button.du-cookieknop-groot{ font-size:16px; }
}






/* 5. du-partnerkaart: servicepartner-kaartjes (Dienst na verkoop).
   Rand, typografie, icoonkleur en de registratieknop staan in de Elementor-
   instellingen. Hier alleen wat Elementor niet kan: de nummers in de huisstijl
   (zwart) houden, ook de nummers die mobiel WebKit zelf als tel-link inkleurt. */
.du-partnerkaart a[href^="tel"] { color:#000000; -webkit-text-fill-color:#000000; text-decoration:none; }
.du-partnerkaart .du-partnercontact a:hover,
.du-partnerkaart .du-partnercontact a:focus,
.du-partnerkaart .du-partnercontact a:focus-visible,
.du-partnerkaart .du-partnercontact a:active { color:#474747; -webkit-text-fill-color:#474747; text-decoration:underline; }

/* 6. du-partnerzoek: zoekveld boven de servicepartner-listing (2775).
   Kaal <input> met een zoekicoon ervoor; Elementor bouwt dit veld niet. */
.du-partnerzoek { position: relative; max-width: 360px; margin-bottom: 28px; }
.du-partnerzoek-icoon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color:#000000; font-size:16px; pointer-events:none; }
.du-partnerzoek input {
  width: 100%; background:#FFFFFF; color:#000000;
  border:2px solid #000000; border-radius:0; padding:12px 16px 12px 44px;
  font-family:inherit; font-size:17px; font-weight:300; -webkit-appearance:none; appearance:none;
}
.du-partnerzoek input::placeholder { color:#474747; }
.du-partnerzoek input:focus { outline:2px solid #000000; outline-offset:2px; }


/* 8. du-teamkaart: teamleden-listing (Team-pagina). Foto uniform bijsnijden.
   De rand op de bio en de kapitalen van de functie staan in de Elementor-
   instellingen. du-teamcta is de vacature-oproep op kaartbreedte. */
.du-teamgrid .jet-listing-grid__items { display:grid !important; grid-template-columns:repeat(auto-fit, minmax(300px, 460px)) !important; gap:36px !important; justify-content:start !important; width:100% !important; margin:0 !important; }
.du-teamgrid .jet-listing-grid__item { width:auto !important; max-width:none !important; padding:0 !important; margin:0 !important; }
.du-teamkaart .jet-listing-dynamic-image img { width:100%; height:300px; object-fit:cover; display:block; margin-bottom:6px; }
.du-teamcta { max-width:340px; }

/* Team: de titel boven de teamfoto tillen */
.elementor-element-a7f2026 { position: relative; z-index: 999; }

/* Alle knoppen in hoofdletters (huisstijl) */
.elementor-kit-7 .elementor-button, .elementor-kit-7 button, .elementor-kit-7 input[type="submit"], .elementor-kit-7 input[type="button"] { text-transform: uppercase; }
/* De cookie-tekstlink in de footer is een gewone link, geen knop: niet in hoofdletters */
.elementor-kit-7 button.du-cookielink { text-transform: none; } /* knoppen */

/* JetEngine-raster overflow op mobiel opvangen: de items-wrapper is 20px breder
   met negatieve marges (flex-modus); dit voorkomt een horizontale scroll. */
.jet-listing-grid { overflow: hidden; }

/* Het uitgebreide uploadlabel op het contactformulier blijft in gewone letters */
.elementor-field-group-bijlage .elementor-field-label { text-transform: none !important; }/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 100;
	font-display: auto;
	src: url('https://duet-interieur.be/wp-content/uploads/2026/01/Outfit-Thin.woff2') format('woff2');
}
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 200;
	font-display: auto;
	src: url('https://duet-interieur.be/wp-content/uploads/2026/01/Outfit-ExtraLight.woff2') format('woff2');
}
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://duet-interieur.be/wp-content/uploads/2026/01/Outfit-Light.woff2') format('woff2');
}
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://duet-interieur.be/wp-content/uploads/2026/01/Outfit-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://duet-interieur.be/wp-content/uploads/2026/01/Outfit-Medium.woff2') format('woff2');
}
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://duet-interieur.be/wp-content/uploads/2026/01/Outfit-SemiBold.woff2') format('woff2');
}
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://duet-interieur.be/wp-content/uploads/2026/01/Outfit-Bold.woff2') format('woff2');
}
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 800;
	font-display: auto;
	src: url('https://duet-interieur.be/wp-content/uploads/2026/01/Outfit-ExtraBold.woff2') format('woff2');
}
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 900;
	font-display: auto;
	src: url('https://duet-interieur.be/wp-content/uploads/2026/01/Outfit-Black.woff2') format('woff2');
}
/* End Custom Fonts CSS */