.elementor-kit-29{--e-global-color-primary:#1B2A4A;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-3c6817c:#F88B27;--e-global-color-a86f7c3c:#FFFFFF;--e-global-color-a6bfd95e:#253447;--e-global-color-a1d0e658:#376DB4;--e-global-color-bf3a1c72:#376DB4;--e-global-color-bf4c2d83:#253447;--e-global-color-bf5e3f94:#F4F2F0;--e-global-color-bf6a4ea5:#B2A699;--e-global-color-bf7b5fb6:#EBF1F9;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Roboto";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-29 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing: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(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --Main-Font:Roboto; }
/* Start custom CSS */@media (max-width: 767px) {

/* --- 1. Kolommen stapelen (classic Sections) --- */
.elementor-section .elementor-container > .elementor-column,
.elementor-column.elementor-col-33,
.elementor-column.elementor-col-50 {
width: 100% !important;
}

/* --- 2. Flexbox Containers stapelen (V3/V4) --- */
.e-con.e-flex,
.e-con-inner {
flex-direction: column !important;
}

.e-con.e-flex > .e-con,
.e-con.e-flex > .elementor-widget {
width: 100% !important;
max-width: 100% !important;
}

/* --- 3. Hero: minder loze ruimte --- */
.elementor-section.hero,
.elementor-section:first-of-type {
padding-top: 56px !important;
padding-bottom: 56px !important;
}

/* --- 4. Hero-afbeelding volle breedte --- */
.elementor-widget-image img {
width: 100%;
max-width: 360px;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
}

/* --- 5. Dienstenkaarten: ruimte tussen kaarten --- */
.elementor-column .elementor-widget-wrap {
margin-bottom: 20px;
}

/* --- 6. Icoontjes in de kaarten netjes schalen --- */
.service-card img,
.elementor-widget-image-box img {
height: 64px;
width: auto;
object-fit: contain;
}

/* --- 7. Typografie: leesbaar, geen woord-per-regel --- */
h1, .elementor-heading-title {
font-size: 2rem !important;
line-height: 1.2 !important;
}

h2 {
font-size: 1.5rem !important;
line-height: 1.3 !important;
}

p, .elementor-widget-text-editor {
font-size: 1rem !important;
line-height: 1.6 !important;
hyphens: none;
}

/* --- 8. Header netjes verdelen --- */
header .e-con-inner,
.elementor-location-header .elementor-container {
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
flex-wrap: nowrap !important;
}

/* --- 9. Horizontaal scrollen voorkomen --- */
html, body {
overflow-x: hidden;
}

}

@media (max-width: 1024px) {

/* --- 10. CTA-knop en divider verbergen in mobiel/tablet menu --- */
header .DUP_Button,
header .Divider-header {
display: none !important;
}

/* --- 11. Achtergrondkleur mobiel/tablet dropdown-menu --- */
.elementor-140 .elementor-element.elementor-element-909abcb .elementor-nav-menu--dropdown {
background-color: transparent !important;
border-radius: 5px !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
width: 300px !important;
max-width: 300px !important;
align-self: flex-end !important;
margin-left: auto !important;
margin-right: 16px !important;
}

/* --- 12. Hover mobiel/tablet menu: geen grijze achtergrond, oranje tekst zoals desktop --- */
.elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
.elementor-nav-menu--dropdown .elementor-item.highlighted,
.elementor-nav-menu--dropdown .elementor-item:focus,
.elementor-nav-menu--dropdown .elementor-item:hover,
.elementor-sub-item.elementor-item-active,
.elementor-sub-item.highlighted,
.elementor-sub-item:focus,
.elementor-sub-item:hover {
background-color: transparent !important;
color: #F48A29 !important;
}

/* --- 13. Logo groter op mobiel/tablet --- */
header .elementor-element-a4481f2 {
width: 220px !important;
max-width: 220px !important;
}

header .elementor-element-a4481f2 img {
width: 100% !important;
max-width: 220px !important;
height: auto !important;
}

}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://dulacservices.nl/wp-content/uploads/2026/08/inter-v20-latin-regular.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://dulacservices.nl/wp-content/uploads/2026/08/roboto-mono-v31-latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://dulacservices.nl/wp-content/uploads/2026/08/roboto-mono-v31-latin-regular.woff2') format('woff2');
}
/* End Custom Fonts CSS */