/*
Theme Name: Hello Child
Version: 1.0
Description: A child theme of Hello Elementor
Template: hello-elementor
Author: Administrator
*/
@import url("../hello-elementor/style.css");
/* ============================================================
    01. Theme setup and design tokens
    ============================================================ */

@font-face {
    font-family: "Google Sans Flex";
    src: url("assets/fonts/GoogleSansFlex-VariableFont_GRAD,ROND,opsz,slnt,wdth,wght.ttf") format("truetype-variations");
    font-style: oblique -10deg 0deg;
    font-weight: 100 1000;
    font-stretch: 75% 125%;
    font-display: swap;
}

:root {  
    /* Color Styles */

    /* Text Styles */
    --font-family-button: "Google Sans Flex";
    --font-size-button: 18px;
    --font-weight-button: 500;
    --font-family-heading-1-desktop: "Google Sans Flex";
    --font-size-heading-1-desktop: clamp(2.75rem, 4.2vw, 3.75rem);
    --font-weight-heading-1-desktop: 500;
    --font-family-heading-1-mobile: "Google Sans Flex";
    --font-size-heading-1-mobile: 40px;
    --font-weight-heading-1-mobile: 500;
    --font-family-heading-2-desktop: "Google Sans Flex";
    --font-size-heading-2-desktop: clamp(2.25rem, 3.4vw, 3rem);
    --font-weight-heading-2-desktop: 500;
    --font-family-heading-2-mobile: "Google Sans Flex";
    --font-size-heading-2-mobile: 32px;
    --font-weight-heading-2-mobile: 500;
    --font-family-heading-3-desktop: "Google Sans Flex";
    --font-size-heading-3-desktop: clamp(2rem, 2.8vw, 2.5rem);
    --font-weight-heading-3-desktop: 500;
    --font-family-heading-3-mobile: "Google Sans Flex";
    --font-size-heading-3-mobile: 28px;
    --font-weight-heading-3-mobile: 500;
    --font-family-heading-4-desktop: "Google Sans Flex";
    --font-size-heading-4-desktop: 28px;
    --font-weight-heading-4-desktop: 500;
    --font-family-heading-4-mobile: "Google Sans Flex";
    --font-size-heading-4-mobile: 20px;
    --font-weight-heading-4-mobile: 500;
    --font-family-heading-5-desktop: "Google Sans Flex";
    --font-size-heading-5-desktop: 20px;
    --font-weight-heading-5-desktop: 500;
    --font-family-heading-5-mobile: "Google Sans Flex";
    --font-size-heading-5-mobile: 18px;
    --font-weight-heading-5-mobile: 500;
    --font-family-body-1-desktop: "Google Sans Flex";
    --font-size-body-1-desktop: 20px;
    --font-weight-body-1-desktop: 400;
    --font-family-body-1-mobile: "Google Sans Flex";
    --font-size-body-1-mobile: 16px;
    --font-weight-body-1-mobile: 400;
    --font-family-body-2-desktop: "Google Sans Flex";
    --font-size-body-2-desktop: 16px;
    --font-weight-body-2-desktop: 400;
    --font-family-body-2-mobile: "Google Sans Flex";
    --font-size-body-2-mobile: 14px;
    --font-weight-body-2-mobile: 400;
    --font-family-label-1: "Google Sans Flex";
    --font-size-label-1: 16px;
    --font-weight-label-1: 500;
    --font-family-label-2-desktop: "Google Sans Flex";
    --font-size-label-2-desktop: 14px;
    --font-weight-label-2-desktop: 500;
    --font-family-label-2-mobile: "Google Sans Flex";
    --font-size-label-2-mobile: 12px;
    --font-weight-label-2-mobile: 500;
    --font-family-overline-desktop: "Google Sans Flex";
    --font-size-overline-desktop: 14px;
    --font-weight-overline-desktop: 500;
    --font-family-overline-mobile: "Google Sans Flex";
    --font-size-overline-mobile: 12px;
    --font-weight-overline-mobile: 500;

    /* Semantic typography tokens used by the component styles */
    --text-display-display-x-lg-font-size: clamp(3.5rem, 7vw, 6rem);
    --text-display-display-x-lg-line-height: 1.05;
    --text-display-display-x-lg-letter-spacing: 0;
    --text-display-display-x-md-font-size: clamp(2.75rem, 5vw, 4.5rem);
    --text-display-display-x-md-line-height: 1.1;
    --text-display-display-x-md-letter-spacing: 0;
    --text-display-display-sm-font-size: clamp(2.25rem, 4vw, 3.75rem);
    --text-display-display-sm-line-height: 1.15;
    --text-display-display-sm-letter-spacing: 0;
    --text-headings-heading-md-font-size: 32px;
    --text-headings-heading-md-line-height: 1.2;
    --text-headings-heading-md-letter-spacing: 0;
    --text-headings-heading-md-sm-font-size: 28px;
    --text-headings-heading-md-sm-line-height: 1.3;
    --text-headings-heading-md-sm-letter-spacing: 0;
    --text-headings-heading-sm-font-size: 24px;
    --text-headings-heading-sm-line-height: 1.3;
    --text-headings-heading-sm-letter-spacing: 0;
    --text-headings-heading-xx-sm-font-size: 16px;
    --text-headings-heading-xx-sm-line-height: 1.4;
    --text-headings-heading-xx-sm-letter-spacing: 0;
    --text-body-body-lg-font-size: 18px;
    --text-body-body-lg-line-height: 1.5;
    --text-body-body-lg-letter-spacing: 0;
    --text-body-body-md-font-size: 16px;
    --text-body-body-md-line-height: 1.5;
    --text-body-body-md-letter-spacing: 0;
    --text-body-body-medium-font-size: 14px;
    --text-body-body-medium-line-height: 1.4;
    --text-body-body-medium-letter-spacing: 0;

    /* Typography Collection */
    --heading-font: "Google Sans Flex";
    --body-font: "Google Sans Flex";

    /* Numbers Collection */
    --spacing-xxs: 2px;
    --spacing-none: 0px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
    --spacing-3xl: 48px;
    --spacing-4xl: 64px;
    --spacing-5xl: 80px;
    --radius-none: 0px;
    --radius-md: 16px;
    --radius-full: 9999px;
    --radius-sm: 8px;
    --radius-lg: 20px;
    --spacing-6xl: 120px;

    /* Colors Collection */
    --background-primary: #17130d;
    --background-secondary: #12100d;
    --background-accent-primary: #d3b24a;
    --background-accent-alt: #987405;
    --text-primary: #f3f1e7;
    --text-secondary: #e2dec9;
    --text-inverted-primary: #0d0c09;
    --text-accent: #d3b24a;
    --text-inverted-secondary: #231d16;
    --icon-primary: #f3f1e7;
    --icon-secondary: #e2dec9;
    --icon-accent-primary: #987405;
    --icon-inverted: #0d0c09;
    --border-primary: #473618;
    --border-inverted-primary: #ffffff;
    --alpha-white-20: rgba(255, 255, 255, 0.2);
    --alpha-dark-25: rgba(23, 19, 13, 0.25);
    --alpha-dark-16: rgba(23, 19, 13, 0.16);
    --background-state-layer-dark-hover: rgba(23, 19, 13, 0.08);
    --background-state-layer-dark-press: rgba(23, 19, 13, 0.16);
    --border-accent: #d3b24a;
    --alpha-dark-8: rgba(23, 19, 13, 0.08);
    --border-inverted-secondary: rgba(255, 255, 255, 0.2);
    --background-state-layer-white-hover: rgba(255, 255, 255, 0.08);
    --background-state-layer-white-press: rgba(255, 255, 255, 0.16);
    --alpha-white-8: rgba(255, 255, 255, 0.08);
    --alpha-white-16: rgba(255, 255, 255, 0.16);
    --background-tertiary: #231d16;
    --border-inverted: #f0ece1;
    --background-accent-secondary: #f2ecdb;
    --icon-accent-secondary: #d3b24a;
    --background-inverted: #f3f1e7;
    --border-accent-alt: rgba(211, 178, 74, 0.25);
    --text-accent-alt: #987405;
    --text-disabled: #454139;
    --alpha-dark-35: rgba(23, 19, 13, 0.35);
    --alpha-white-2: rgba(255, 255, 255, 0.02);
    --icon-danger: #e94d55;
    --text-danger: #e94d55;
    --border-danger: #e94d55;
    --alpha-dark-70: rgba(23, 19, 13, 0.7);

    /* Shared aliases for the existing component selectors */
    --colors-background-surface: var(--background-inverted);
    --colors-color-page: var(--background-inverted);
    --colors-color-card: var(--background-accent-secondary);
    --colors-color-card-text: var(--text-secondary);
    --colors-color-body-text: var(--text-secondary);
    --colors-color-muted-text: var(--text-secondary);
    --colors-color-muted-text-x: var(--text-secondary);
    --colors-color-muted-text--xx: var(--text-secondary);
    --colors-color-headings: var(--text-inverted-primary);
    --colors-color-headings-dark: var(--text-inverted-primary);
    --colors-primary-color-1000: var(--text-inverted-primary);
    --colors-primary-color-500: var(--background-accent-primary);
    --colors-color-heading-x-light: var(--text-primary);
    --colors-color-dark: var(--background-tertiary);
    --colors-color-primary: var(--background-accent-primary);
    --colors-color-primary-dark: var(--background-accent-alt);
    --colors-color-primary-soft: var(--background-accent-secondary);
    --colors-color-primary-x-dark: var(--background-secondary);
    --colors-color-secondary: var(--text-accent-alt);
    --colors-color-secondary-light: var(--background-accent-secondary);
    --colors-color-border: var(--border-primary);
    --colors-color-border-dark: var(--border-primary);
    --colors-color-border-white: var(--border-inverted-secondary);
    --colors-neutrals-100: var(--background-accent-secondary);
    --colors-neutrals-200: var(--text-secondary);
    --colors-neutrals-600: var(--text-secondary);
    --colors-neutrals-color-light: var(--border-inverted-secondary);
    --colors-white: var(--text-primary);
    --color-primary: var(--text-accent);
    --color-primary-hover: var(--background-accent-alt);

    --spacing-sp-0: var(--spacing-none);
    --spacing-sp-6: 6px;
    --spacing-sp-8: var(--spacing-sm);
    --spacing-sp-10: 10px;
    --spacing-sp-12: var(--spacing-md);
    --spacing-sp-16: var(--spacing-lg);
    --spacing-sp-18: 18px;
    --spacing-sp-20: 20px;
    --spacing-sp-22: 22px;
    --spacing-sp-24: var(--spacing-xl);
    --spacing-sp-28: 28px;
    --spacing-sp-32: var(--spacing-2xl);
    --spacing-sp-40: 40px;
    --spacing-sp-48: var(--spacing-3xl);
    --spacing-sp-56: 56px;
    --spacing-sp-64: var(--spacing-4xl);
    --spacing-sp-72: 72px;
    --spacing-sp-80: var(--spacing-5xl);
    --radius-rd-0: var(--radius-none);
    --radius-rd-10: 10px;
    --radius-rd-16: var(--radius-md);
    --radius-rd-20: var(--radius-lg);
    --radius-rd-24: 24px;
    --radius-rd-44: 44px;
    --radius-rd-48: 48px;
    --radius-rd-200: var(--radius-full);
    --border-br-1: 1px;
    --border-br-2: 2px;
}

/* ============================================================
    02. Global layout and typography
    ============================================================ */

body.elementor-kit-9 {
    --body-font: "Google Sans Flex", Sans-serif;
}
body .elementor-widget-text-editor {
    font-family: var(--body-font) !important;
}

/* body .e-con {
  max-width: 1375px !important;
  margin-left: auto;
  margin-right: auto;
  gap: var(--sp-24, 24px);
} */

body header .e-con > .e-con-inner,
body header .e-con.e-flex>.e-con-inner {
    max-width: 1414px !important;
    gap: var(--sp-16, 16px);
}

body .e-con > .e-con-inner,
body .e-con.e-flex>.e-con-inner {
    max-width: 1414px !important;
    gap: var(--sp-40, 40px);
}

body header .elementor-element.elementor-widget.elementor-widget-theme-site-logo {
    max-width: 206px !important;
}

/* ============================================================
    03. Animations
    ============================================================ */

/* GSAP animation classes */
.fade-in-up {
    opacity: 0; /* Begin onzichtbaar */
    transform: translateY(30px); /* Begin 20px naar beneden */
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}


.fade-in-up.visible {
    opacity: 1; /* Volledig zichtbaar */
    transform: translateY(0); /* Terug naar de originele positie */
}


body.elementor-editor-active .fade-in-up,
body.elementor-editor-preview .fade-in-up {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: none !important; /* Voorkomt de overgang */
}

/* Opt-in SplitText line reveal animation */
.split-reveal h1,
.split-reveal h2,
.split-reveal h3,
.split-reveal h4,
.split-reveal h5,
.split-reveal h6,
.split-reveal p,
h1.split-reveal,
h2.split-reveal,
h3.split-reveal,
h4.split-reveal,
h5.split-reveal,
h6.split-reveal,
p.split-reveal,
.text-reveal h1,
.text-reveal h2,
.text-reveal h3,
.text-reveal h4,
.text-reveal h5,
.text-reveal h6,
.text-reveal p,
h1.text-reveal,
h2.text-reveal,
h3.text-reveal,
h4.text-reveal,
h5.text-reveal,
h6.text-reveal,
p.text-reveal,
.headingh2class h1,
.headingh2class h2,
.headingh2class h3,
h1.headingh2class,
h2.headingh2class,
h3.headingh2class,
h1.werkwijzeline,
h2.werkwijzeline,
h3.werkwijzeline {
    opacity: 0;
}

/* Elementor atomic headings are display:flex, which makes SplitText see all
   words on one line (so nothing staggers). Block = real line breaks. */
.split-reveal.e-heading-base,
.split-reveal .e-heading-base,
.text-reveal.e-heading-base,
.text-reveal .e-heading-base,
.headingh2class.e-heading-base,
.headingh2class .e-heading-base,
.werkwijzeline.e-heading-base {
    display: block !important;
}

/* visible, so the blur halo isn't clipped at the line edges */
.split-reveal .line,
.split-reveal.line,
.text-reveal .line,
.text-reveal.line,
.headingh2class .line,
.werkwijzeline .line {
    overflow: visible;
    will-change: transform, filter, opacity;
}

/* Opt-in word opacity scroll reveal animation */
.word-scroll-reveal .word,
.word-scroll-reveal > .word {
    transition: none !important;
    opacity: 0.1;
}

/* Opt-in scroll-controlled text color reveal for H2 elements */

.scrollrevealtexth2.elementor-widget-heading .elementor-heading-title,
.scrollrevealtexth2.elementor-widget-heading .elementor-heading-title .word,
.scrollrevealtexth2 h2.elementor-heading-title,
.scrollrevealtexth2 h2.elementor-heading-title .word {
    transition: color 0.5s ease-in-out;
    font-family: var(--heading-font, "Google Sans Flex", sans-serif);
    font-weight: 500;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: 0%;
}


.scrollrevealtexth2 {
    --scroll-reveal-text-start: var(--text-disabled, #454139);
    --scroll-reveal-text-end: var(--text-primary, #f3f1e7);
    --scroll-reveal-label: "/// ONZE OPDRACHTGEVERS";
}

.scrollrevealtexth2 h2.elementor-heading-title,
.scrollrevealtexth2.elementor-widget-heading .elementor-heading-title {
    position: relative;
    max-width: 1328px;
    margin: auto;
}

.scrollrevealtexth2.elementor-widget-heading .elementor-heading-title > .word:first-child {
    padding-left: clamp(190px, 25vw, 450px);
}

.scrollrevealtexth2 h2.elementor-heading-title::before,
.scrollrevealtexth2.elementor-widget-heading .elementor-heading-title::before {
    content: var(--scroll-reveal-label);
    position: absolute;
    top: 1em;
    left: 0;
    width: 190px;
    text-transform: uppercase;
    white-space: nowrap;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-accent, #D3B24A);
}

.scrollrevealtexth2 .word,
h2.scrollrevealtexth2 .word {
    color: var(--scroll-reveal-text-start);
}

@media (max-width: 767px) {
    .scrollrevealtexth2 h2.elementor-heading-title,
    .scrollrevealtexth2.elementor-widget-heading .elementor-heading-title {
        padding-left: 0;
        font-size: clamp(28px, 7vw, 36px);
        line-height: 1.2;
    }

    .scrollrevealtexth2 h2.elementor-heading-title::before,
    .scrollrevealtexth2.elementor-widget-heading .elementor-heading-title::before {
        position: static;
        display: block;
        width: auto;
        margin-bottom: var(--spacing-sp-16, 16px);
        font-size: var(--font-size-overline-mobile, 12px);
        white-space: normal;
    }
}

/* Opt-in rolling text hover animation */
.rolling-text {
    --rolling-text-delay: 0.015s;
    --rolling-text-duration: 0.6s;
    --rolling-text-easing: cubic-bezier(0.76, 0, 0.24, 1);
    display: inline-block;
    height: 1.5em;
    overflow: hidden;
    vertical-align: bottom;
}

.rolling-text .block {
    display: block;
}

.rolling-text .block:last-child {
    color: var(--color-primary, currentColor);
}

.rolling-text .letter {
    display: inline-block;
    transition: transform var(--rolling-text-duration) var(--rolling-text-easing);
    will-change: transform;
}

.rolling-text:hover .letter,
.rolling-text:focus-visible .letter,
.rolling-text.play .letter {
    transform: translateY(-100%);
}

.rolling-text .letter {
    transition-delay: calc(var(--rolling-text-delay) * var(--rolling-text-index, 0));
}

/* ============================================================
    04. Base styles
    ============================================================ */

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html body {
  font-family: var(--body-font, "Google Sans Flex", sans-serif);
  color: var(--text-secondary, #E2DEC9);
  line-height: 1.6;
  background: var(--background-secondary, #12100D);
}
html {
  scroll-behavior: auto !important;
}
html.lenis {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--colors-primary-color-1000, #051E2E);
  margin-bottom: 0.5rem;
  font-family: var(--body-font, "Google Sans Flex", sans-serif) !important;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover {
  color: var(--color-primary-hover);
}

/* ============================================================
    05. Menu and burger base styles
    ============================================================ */

#burger-toggle {
  position: absolute;
  left: -9999px;
  width: 100%;
  clip: rect(0, 0, 0, 0);
  z-index: 9999 !important;
}
#burger-toggle:checked ~ .menu {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.3s, opacity 0.3s;
  padding: 4px !important;
}
#burger-toggle:checked ~ .menu .menu-nav-link span div, #burger-toggle:checked ~ .menu img, #burger-toggle:checked ~ .menu .title p {
  transform: translateY(0);
  transition: 1.2s 0.1s cubic-bezier(0.35, 0, 0.07, 1);
}
#burger-toggle:checked ~ .menu .image-link:nth-child(1) img {
  transition-delay: 0.18s;
}
#burger-toggle:checked ~ .menu .image-link:nth-child(2) img {
  transition-delay: 0.26s;
}
#burger-toggle:checked ~ .menu .image-link:nth-child(3) img {
  transition-delay: 0.34s;
}
#burger-toggle:checked ~ .menu .image-link:nth-child(4) img {
  transition-delay: 0.42s;
}
#burger-toggle:checked ~ .burger-menu .line::after {
  transform: translateX(0);
}
#burger-toggle:checked ~ .burger-menu .line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
#burger-toggle:checked ~ .burger-menu .line:nth-child(2) {
  transform: scaleX(0);
  opacity: 0;
}
#burger-toggle:checked ~ .burger-menu .line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
.burger-menu {
  position: relative;
  z-index: 9999;
  display: block;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  transition: border-color 0.3s;
}
.burger-menu:hover {
  border-color: rgba(255, 255, 255, 0.4);
}
.burger-menu .line {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 2px;
  margin-left: -9px;
  background: #fff;
  border-radius: 2px;
  overflow: hidden;
  transition: 0.4s;
  z-index: 9999 !important;
}
#burger-toggle:checked + .burger-menu .line {
  background: #fff;
}
.burger-menu .line:nth-child(1) {
    top: calc(50% - 7px);
}
.burger-menu .line:nth-child(2) {
    top: calc(50% - 1px);
}
.burger-menu .line:nth-child(3) {
    top: calc(50% + 5px);
}
.burger-menu .line::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
    transition: 0.25s;
    z-index: 9999 !important;
}
.burger-menu .line:nth-child(2)::after {
    transition-delay: 0.1s;
}
.burger-menu .line:nth-child(3)::after {
    transition-delay: 0.2s;
}
.burger-menu:hover .line::after {
    transform: translateX(0);
}


.elementor-114 { 
  width: 100%;
  animation: fadeInRight 1s ease-in-out;
}

.menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  transform: translateX(100%);
  overflow: hidden;
  transition:  all 0.5s ease-out;
  z-index: 100 !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu > .elementor-location-header > .elementor-element {
    padding-left: 24px;
    padding-right: 24px;
}

.mobiledropdownmenu nav .elementor-nav-menu .menu-item:before {
    content: '';
    position: absolute;
    background: var(--colors-color-secondary, #FF7617) !important;
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease;
    opacity: 1 !important;
    z-index: 99999999 !important;
}
.mobiledropdownmenu nav .elementor-nav-menu .menu-item::after {
    transition: transform 0.4s ease;
}
.mobiledropdownmenu nav .elementor-nav-menu .menu-item:hover:before,
.mobiledropdownmenu nav .elementor-nav-menu .menu-item.highlighted:before {
    transform: scaleX(1);
    transform-origin: left;
}

.mobiledropdownmenu nav .elementor-nav-menu .menu-item:hover::after,
.mobiledropdownmenu nav .elementor-nav-menu .menu-item.highlighted::after {
    transform: rotate(45deg);
    transform-origin: center;
}

.mobiledropdownmenu nav .elementor-nav-menu .menu-item a::after {
    display: none!important;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(300px);
  }
  to {
    opacity: 1;
  }
}

/* ============================================================
    06. Footer
    ============================================================ */

/* Footer */
footer {
  margin: 0 !important;
}
.prefooterleft {
    gap: var(--spacing-sp-32);
    display: flex;
    flex-direction: column;
    padding: 0;
}
footer .prefootersec {
    padding-top: var(--spacing-sp-72);
    padding-right: var(--spacing-sp-64);
    padding-bottom: var(--spacing-sp-72);
    padding-left: var(--spacing-sp-64);
    gap: var(--spacing-sp-32);
    border-radius: var(--radius-rd-48);
    border-width: var(--border-br-2);
    position: relative;
    margin-top: var(--spacing-sp-72);
    margin-bottom: var(--spacing-sp-72);
}
body footer .prefootersec .prefooterleft .elementor-element.elementor-widget.elementor-widget-text-editor h3.headinghighlight {
    margin: 0;
    padding-top: var(--spacing-sp-8);
    padding-right: var(--spacing-sp-16);
    padding-bottom: var(--spacing-sp-8);
    padding-left: var(--spacing-sp-16);
    border-radius: var(--radius-rd-10);
    background: var(--colors-color-primary-soft, #DDEFFB);
    font-weight: 500;
    font-style: Medium;
    font-size: var(--font-size-body-medium);
    line-height: var(--text-body-body-md-line-height);
    letter-spacing: var(--text-body-body-md-letter-spacing);
    text-align: center;
    color: var(--colors-color-primary, #1C93E2);
    width: fit-content;
}
footer .prefootersec .prefooterleft h2.elementor-heading-title,
footer .prefootersec .prefooterleft h2.elementor-heading-title .word {
    margin: 0;
    font-weight: 600;
    font-size: var(--text-display-display-sm-font-size);
    line-height: var(--text-display-display-sm-line-height);
    letter-spacing: var(--text-display-display-sm-letter-spacing);
    color: var(--colors-color-headings, #051E2E);
}
footer .prefootersec .prefooterleft h2.elementor-heading-title span,
footer .prefootersec .prefooterleft h2.elementor-heading-title span .word {
    margin: 0;
    font-weight: 600;
    font-size: var(--text-display-display-sm-font-size);
    line-height: var(--text-display-display-sm-line-height);
    letter-spacing: var(--text-display-display-sm-letter-spacing);
    color: var(--colors-color-primary, #1C93E2);
}
body footer .prefootersec .prefooterleft .elementor-element.elementor-widget.elementor-widget-text-editor * {
    font-weight: 400;
    font-style: Regular;
    font-size: var(--text-body-body-md-font-size);
    line-height: var(--text-body-body-md-line-height);
    letter-spacing: var(--text-body-body-md-letter-spacing);
    color: var(--colors-color-body-text, #6B7280);
}
body footer .prefootersec .locationlistwrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sp-0, 0px);
  max-width: 620px !important;
  padding: 0;
}
body footer .prefootersec .locationlistwrapper ul.elementor-icon-list-items {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sp-18, 18px);
}
body footer .prefootersec .locationlistwrapper ul.elementor-icon-list-items span.elementor-icon-list-icon {
    width: 35px;
    height: 35px;
    opacity: 1;
    border-radius: var(--radius-rd-10);
    background: var(--colors-color-primary-soft, #DDEFFB);
    display: flex;
    align-items: center;
    justify-content: center;
}
body footer .prefootersec .locationlistwrapper ul.elementor-icon-list-items span.elementor-icon-list-icon svg {
    width: 14.4375px;
    height: 18.37481689453125px;
    fill: var(--colors-color-primary, #1C93E2);
	margin: auto;
}
body footer .prefootersec .locationlistwrapper ul.elementor-icon-list-items span.elementor-icon-list-text {
    color: var(--colors-color-body-text, #6B7280);
    font-weight: 500;
    font-style: Medium;
    font-size: 22px;
    line-height: 140%;
    letter-spacing: 0%;
    text-transform: capitalize;
}
body footer .prefootersec .locationlistwrapper ul.elementor-icon-list-items li.elementor-icon-list-item {
    display: flex;
    padding-bottom: var(--spacing-sp-12, 12px);
    align-items: center;
    gap: var(--spacing-sp-8, 8px);
    align-self: stretch;
    max-width: 233px !important;
    border-bottom: 2px solid var(--colors-color-muted-text, #BCC0C7)
}
body footer .footertopsec {
    padding-top: 48px;
    padding-bottom: 14px;
}
body footer .footertopsec .e-con-inner {
    position: relative;
    z-index: 15;
}
.prefooterright .elementor-widget-image {
    position: relative;
}
.prefooterright .elementor-widget-image:after {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 45px!important;
    right: 0;
    z-index: 9;
    background: linear-gradient(189.63deg, rgba(8, 44, 68, 0) 51.95%, rgba(8, 44, 68, 0.65) 96.32%);
}
.prefooterright .elementor-widget-image img {
    height: 700px;
    opacity: 1;
    border-radius: 45px!important;
    object-fit: cover;
}

footer .prefootersec:before {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    background: linear-gradient(96.1deg, #F4F7FA 0%, #E6F1FA 100%);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    border-radius: var(--radius-rd-48);
    z-index: -1;
    right: 0;
    bottom: 0;
}
footer .elementor-element.prefootersec {
    max-width: calc(100% - 40px) !important;
    width: 100% !important;
}
footer .elementor-element.prefootersec > .e-con-inner {
    min-height: 100%;
    justify-content: center;
}
body .e-con > .e-con-inner, body .e-con.e-flex>.e-con-inner {
    max-width: 1375px !important;
    gap: var(--spacing-sp-40, 40px);
}

footer .footertopsec > .e-con-inner {
    display: grid;
    gap: var(--spacing-sp-24, 24px);
    grid-template-columns: 1fr 1fr;
    justify-content: space-between !important;
    padding: 0;
}

footer .footertopsec .heading h4,
footer .footertopsec .heading h4 .word ,
footer .footertopsec .heading h4 div {
    font-family: 'Erliana';
    font-weight: 400 !important;
    font-size: var(--text-headings-heading-md-font-size);
    line-height: var(--text-headings-heading-md-line-height);
    letter-spacing: 1%;
    vertical-align: middle;
    color: var(--colors-white, #FFFFFF);
}

.heading h5 {
    font-weight: 500!important;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-accent, #D3B24A) !important; 
}

footer nav.elementor-nav-menu--main .elementor-nav-menu li.menu-item a.elementor-item {
    font-family: var(--body-font) !important;
    padding: 0;
    margin: 0;
    font-weight: 400;
    font-size: var(--text-headings-heading-xx-sm-font-size);
    line-height: var(--text-headings-heading-xx-sm-line-height);
    letter-spacing: 1%;
    vertical-align: middle;
    color: var(--colors-color-muted-text, #808080) !important;
}

footer nav.elementor-nav-menu--main .elementor-nav-menu li.menu-item {
    margin: 0;
    padding: 0;
}

footer nav.elementor-nav-menu--main .elementor-nav-menu{
    display: flex;
    gap: var(--spacing-sp-8, 8px);
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}

footer ul.elementor-icon-list-items span.elementor-icon-list-text {
    font-family: var(--body-font) !important;
    font-weight: 400;
    vertical-align: middle;
    padding: 0 !important;
    font-size: var(--text-headings-heading-xx-sm-font-size);
    line-height: var(--text-headings-heading-xx-sm-line-height);
    letter-spacing: 1%;
    vertical-align: middle;
    color: var(--colors-color-muted-text, #808080);
}

footer ul.elementor-icon-list-items span.elementor-icon-list-icon svg {
    max-width: 20px;
    max-height: 20px;
    fill: transparent !important;
}

.footerbottomsec .elementor-element {
    padding: 0;
    margin: 0;
}

.footerbottomsec .elementor-element p,
.footerbottomsec .elementor-element p a {
    font-family: var(--body-font) !important;
    font-weight: 400;
    font-style: Regular;
    font-size: var(--text-body-body-lg-font-size, 18px);
    line-height: var(--text-body-body-lg-line-height, 24px);
    letter-spacing: var(--text-body-body-lg-letter-spacing, 0.5px);
    vertical-align: middle;
    text-transform: capitalize;
    margin: 0;
    padding: 0;
    color: var(--colors-color-headings, #051E2E);
}


footer .elementor-element.footerbottomsec {
    padding-top: 0px;
    margin-top: 0;
    padding-bottom: 6px;
}

footer .elementor-element.footerbottomsec > .e-con-inner {
    padding-top: 28px;
    z-index: 13;
}

footer .elementor-element.footerbottomsec > .e-con-inner > .elementor-element {
    z-index: 111;
}

footer .elementor-element.footerbottomsec > .e-con-inner > .elementor-element span,
footer .elementor-element.footerbottomsec > .e-con-inner > .elementor-element a,
footer .elementor-element.footerbottomsec > .e-con-inner > .elementor-element .elementor-widget-text-editor {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: var(--text-secondary, #E2DEC9);
}

footer .elementor-element.footerbottomsec > .e-con-inner .elementor-element.elementor-widget.elementor-widget-image a img {
    width: 177px;
}

/* ============================================================
    07. Header and desktop navigation
    ============================================================ */

nav .elementor-nav-menu a.elementor-item:after {
    content: '';
    position: absolute;
    background: var(--colors-color-primary, #C7A566) !Important;
    width: 100%;
    height: 2px;
    bottom: -3px;
    left: 0;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease;
    opacity: 1 !important;
}
nav .elementor-nav-menu a.elementor-item:hover:after,
nav .elementor-nav-menu a.elementor-item.highlighted:after {
    transform: scaleX(1);
    transform-origin: left;
}
header .mainheadertop nav .elementor-nav-menu a.elementor-item:hover {
    color: var(--colors-white, #FFFFFF);
}  

header .mainheadertop a.elementor-item.elementor-item-anchor {
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--text-body-body-md-font-size);
    line-height: var(--text-body-body-md-line-height);
    letter-spacing: 1%;
    vertical-align: middle;
    color: var(--colors-white, #FFFFFF);
}

header .mainheadertop nav ul{
    gap: 28px;
}

header .mainheadertop nav ul:after,
header .mainheadertop nav ul:before {
    display: none !important;
}

body header > .mainheadertop.e-con > .e-con-inner > .elementor-element {
    padding: 0 !important;
}


.page-header {
    display: none;
}

@keyframes pulseAnimate {
    100% {
        opacity: 0;
        transform: scale(1.4);
    }
}

.rightbtnarrow .elementor-button-content-wrapper span.elementor-button-icon span.arrow {
    display: flex;
    z-index: 999;
}

/* ============================================================
   [headerfeature] Carousel
   ============================================================ */
header .mainheadertop {
    padding-top: var(--spacing-sp-16);
    padding-bottom: var(--spacing-sp-16);
    border-radius: 0px;
    width: 100% !important;
    max-width: 100% !important;
    background: var(--colors-color-primary, #004EB5);
    z-index: 9;
}

header .mainheadertop .e-con-inner {
    padding: 0;
}

.maenutopheader ul {
    column-gap: var(--spacing-sp-32);
    display: flex;
    flex-direction: row;
}

.maenutopheader ul:after {
    display: none !important;
}

.maenutopheader > nav > ul > li {
    width: auto !important;
    flex-grow: unset !important;
    padding: 0 !important;
    margin: 0 !important;
}

.maenutopheader ul li a.elementor-item {
    padding: 0;
	font-family: var(--body-font) !important;
    position: relative;
    font-weight: 500;
    font-size: var(--text-body-body-lg-font-size);
    line-height: var(--text-body-body-lg-line-height);
    letter-spacing: 1%;
    vertical-align: middle;
    color: var(--colors-color-headings-dark, #1F2329) !important;
}
.maenutopheader ul li a.elementor-item.highlighted {
    padding: 0 !important;
}
.maenutopheader ul li a.elementor-item:after {
    content: '';
    position: absolute;
    background: var(--colors-color-primary, #C7A566) !important;
    width: 100%;
    height: 2px;
    bottom: 0px;
    left: 0;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease;
    opacity: 1 !important;
}
.maenutopheader ul li a.elementor-item:hover:after,
.maenutopheader ul li a.elementor-item.highlighted:after {
    transform: scaleX(1);
    transform-origin: left;
}
.maenutopheader ul li a.elementor-item:hover {
    color: var(--colors-color-headings, #051E2E) !important;
    padding: 0 !important;
}
.has-submenu .sub-arrow svg.e-font-icon-svg {
    fill: var(--colors-color-headings, #051E2E) !important;
	  transition: transform 0.2s linear;
}
.has-submenu.highlighted .sub-arrow svg.e-font-icon-svg {
    transform: rotate(180deg);
}
footer .footertopsec > .e-con-inner > .elementor-element {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sp-22, 22px);
    width: 100%;
    padding: 0;
}

/* ============================================================
    08. Shared content components
    ============================================================ */

.newheading h1,
.newheading h1 .word {
    color: #FFFFFF;
    margin: 0;
    padding: 0;
    font-family: 'Erliana' !important;
    font-weight: 400 !important;
    font-size: var(--text-display-display-x-lg-font-size);
    line-height: var(--text-display-display-x-lg-line-height);
    letter-spacing: 1%;
    vertical-align: middle;
}

.newheading h1 span,
.newheading h1 span .word {
    font-weight: 600;
    font-style: SemiBold;
    font-size: var(--text-display-display-sm-font-size);
    line-height: var(--text-display-display-sm-line-height);
    letter-spacing: var(--text-display-display-sm-letter-spacing);
    color: var(--colors-color-primary, #1C93E2);
}

.elementor-element.elementor-widget.elementor-widget-text-editor,
.elementor-element.elementor-widget.elementor-widget-text-editor * {
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0%;
    color: var(--text-secondary, #E2DEC9);
}

body .rightheroclass .elementor-element.elementor-widget.elementor-widget-text-editor,
body .rightheroclass .elementor-element.elementor-widget.elementor-widget-text-editor * {
    font-family: var(--heading-font);
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0%;
    color: var(--text-primary, #F3F1E7);
}

body .rightheroclass .swiper-pagination-progressbar.swiper-pagination-horizontal {
    height: 2px;
    background: var(--background-secondary, #12100D) !important;
    margin-top: 24px;
    margin-left: 24px;
    margin-right: 24px;
    width: 190px;
}

body .rightheroclass .elementor-swiper-button.elementor-swiper-button-next {
    top: 30px !important;
    left: 30px !important;
    z-index: 9999 !important;
    width: 24px;
}

body .rightheroclass .e-n-carousel.swiper {  
    padding: 0 !important;
    margin: 0 !important;
}

body .rightheroclass div.swiper-wrapper {
    padding-top: 30px;
}

body .rightheroclass .elementor-swiper-button.elementor-swiper-button-prev {
    top: 30px !important;
    left: 24px !important;
    z-index: 9999 !important;
    width: 24px;
}

body .rightheroclass .elementor-widget-n-carousel .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--background-inverted, #F3F1E7) !important;
}

body .rightheroclass .elementor-element.elementor-widget.elementor-widget-text-editor h6 {
    font-family: var(--heading-font);
    font-weight: 500;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: 0%;
    color: var(--text-primary, #F3F1E7);
    margin-top: 0;
}

body .elementor-element.elementor-widget.elementor-widget-text-editor h3,
body .elementor-element.elementor-widget.elementor-widget-text-editor h3 .line,
body .elementor-element.elementor-widget.elementor-widget-text-editor h3 .line div {
    font-family: var(--heading-font);
    font-weight: 500;
    font-style: Medium;
    font-size: 48px;
    line-height: 56px;
    letter-spacing: 0%;
    color: var(--text-primary, #F3F1E7);
}

body .rightheroclass div.heroprogressbar {
    position: absolute;
    right: 34px;
    z-index: 99;
    width: 190px;
    margin-top: 24px;
    background: var(--background-secondary, #12100D);
    max-height: 2px !important;
    padding: 1px;
}

body .rightheroclass .heroprogressbar::after {
    background: var(--background-inverted, #F3F1E7) !important;
}

body .rightheroclass .swiper-pagination.swiper-pagination-fraction.swiper-pagination-horizontal {
    position: absolute !important;
    right: 0px !important;
    top: 56px !important;
    left: unset !important;
    color: var(--background-accent-primary, #D3B24A);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
}

.elementor-element.elementor-widget.elementor-widget-text-editor p {
    margin: 0;
}

body .elementor-element.elementor-widget.elementor-widget-text-editor .titleicon h2, 
body .elementor-element.elementor-widget.elementor-widget-text-editor .titleicon h2 div,
body .titleicon.elementor-widget-heading h2, 
body .titleicon.elementor-widget-heading h2 div {
    font-family: 'Erliana';
    font-weight: 400;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    color: var(--colors-color-dark, #1D1B18);
    font-size: var(--text-display-display-x-md-font-size);
    line-height: var(--text-display-display-x-md-line-height);
    letter-spacing: 10%;
    vertical-align: middle;
}

body footer .footerCTARight .elementor-element.elementor-widget.elementor-widget-text-editor .titleicon h2, 
body footer .footerCTARight .elementor-element.elementor-widget.elementor-widget-text-editor .titleicon h2 div,
body footer .footerCTARight .titleicon.elementor-widget-heading h2, 
body footer .footerCTARight .titleicon.elementor-widget-heading h2 div {
    font-family: 'Erliana';
    font-weight: 400;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    color: var(--colors-color-dark, #1D1B18);
    font-size: 56px;
    line-height: 64px;
    letter-spacing: 10%;
    vertical-align: middle;
}


body.home .homeherosection > .e-con-inner,
body.transperentHeader .homeherosection > .e-con-inner {
    height: 100vh !important;
    min-height: 880px;
    max-height: 1300px;
    align-content: end;
}

.homeherosection.autoheight > .e-con-inner {
    height: auto !important;
    min-height: unset !important;
    max-height: unset !important;
}

body header > .mainheadertop.e-con > .e-con-inner {
    max-width: 1350px !important;
    width: 100% !important;
}


header .mainHeaderTop > .e-con-inner {
    position: relative !important;
}

/* ============================================================
    09. FAQ and accordion components
    ============================================================ */

.faqaccordians .e-n-accordion {
    display: flex;
    flex-direction: column;
}

.faqaccordians span.e-n-accordion-item-title-icon, 
.faqaccordians span.e-n-accordion-item-title-icon > span {
    min-height: 24px;
}
.faqaccordians .e-n-accordion details .elementor-element,
.faqaccordians .e-n-accordion details summary {
    padding: 0;
    border: 0;
    margin: 0;
}

.faqaccordians .e-n-accordion details summary {
    display: grid;
    grid-template-columns: 1fr 24px;
}

.faqaccordians .e-n-accordion details summary span.e-n-accordion-item-title-icon .e-closed svg {
    min-width: 24px;
    min-height: 24px;
    background: transparent !important;
    border-radius: 0px;
    fill: transparent !important;
}

.faqaccordians .e-n-accordion details summary span.e-n-accordion-item-title-icon .e-opened svg {
    min-width: 24px;
    min-height: 24px;
    background: transparent !important;
    border-radius: 0px;
    fill: transparent !important;
}

.faqaccordians .e-n-accordion details summary span.e-n-accordion-item-title-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.faqaccordians .e-n-accordion details .elementor-element .elementor-element.elementor-widget.elementor-widget-text-editor,
.faqaccordians .e-n-accordion details .elementor-element .elementor-element.elementor-widget.elementor-widget-text-editor * {
    font-weight: 400;
    margin: 0;
    padding: 0;
    font-size: var(--text-body-body-md-font-size);
    line-height: var(--text-body-body-md-line-height);
    letter-spacing: 1%;
    color: var(--colors-color-body-text, #999999);
}

.faqaccordians .e-n-accordion details > .elementor-element {
    margin-top: var(--sp-24) !important;
}

.faqaccordians .e-n-accordion details .e-n-accordion-item-title-text {
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0%;
    color: var(--text-primary, #F3F1E7);
}

.elementor-element.faqclasssec {
    display: flex;
    gap: 8px;
    align-items: stretch !important;
}

/* Both columns take the height of the taller one (and grow with it,
   e.g. when an accordion item opens) */
.elementor-element.faqclasssec > .elementor-element {
    width: 100% !important;
    align-self: stretch !important;
    height: auto !important;
}

.elementor-element.faqclasssec > .elementor-widget-image img {
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 16px !important;
}

/* Desktop: the FAQ sets the row height. The map is taken out of the flow
   (absolute) so its own height can't make the row taller, and it scales
   to fit inside the column, ending exactly where the FAQ ends. */
@media (min-width: 768px) {
    .elementor-element.faqclasssec > .elementor-widget-image {
        position: relative;
        min-height: 0;
    }
    .elementor-element.faqclasssec > .elementor-widget-image img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        object-fit: contain;
    }
    .elementor-element.mainHeaderTop.e-flex {
        margin-top: 16px;
    }
}

body footer .footerCTAsec > .e-con-inner {
    display: grid;
    grid-template-columns: 485px 1fr;
    gap: 64px !important;
    align-items: center !important;
    background: var(--colors-color-primary-x-dark, #122240);
    color: var(--colors-color-dark, #1D1B18);
    padding: 0;
    position: relative;
    overflow: visible !important;
    background: var(--colors-color-card, #E8E2D9);
    border: 2px solid var(--colors-color-border, #D8D0C4);
}

body footer .footerCTAsec > .e-con-inner > div {
    width: 100% !important;
    display: inline-flex;
}

body footer .footerCTAsec > .e-con-inner h2,
body footer .footerCTAsec > .e-con-inner h2 .word,
body footer .footerCTAsec > .e-con-inner h2 div {
    font-family: 'Erliana' !important;
    font-weight: 400 !important;
    font-size: var(--text-display-display-x-md-font-size) !important;
    line-height: var(--text-display-display-x-md-line-height) !important;
    letter-spacing: 5% !important;
    vertical-align: middle;
    color: var(--colors-color-dark, #1D1B18) !important;
    max-width: 730px;
}

body footer .footerCTAsec > .e-con-inner h3 span {
    font-weight: 500;
    font-size: var(--text-body-body-lg-font-size) !important;
    line-height: var(--text-body-body-lg-line-height) !important;
    letter-spacing: 0%;
    color: var(--colors-color-primary, #C7A566) !important;
}

body footer .footerCTAsec > .e-con-inner ul.elementor-icon-list-items li.elementor-icon-list-item {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
body footer .footerCTAsec > .e-con-inner ul.elementor-icon-list-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body footer .footerCTAsec > .e-con-inner ul.elementor-icon-list-items span.elementor-icon-list-text {
    font-family: Montserrat;
    font-weight: 500;
    font-size: var(--text-body-body-md-font-size);
    line-height: var(--text-body-body-md-line-height);
    letter-spacing: 1%;
    vertical-align: middle;
    color: var(--colors-color-muted-text--xx, #666666);
}
body footer .footerCTAsec > .e-con-inner .elementor-widget-image img {
    height: 468px;
    object-fit: cover;
}
body footer .elementor-element.footerCTAsec {
    padding-top: 40px;
    padding-bottom: 104px;
}
body footer .footertopsec {
    margin-top: 80px;
}
div#breadcrumbs > span a {
    font-weight: 500;
    font-style: Italic;
    font-size: var(--text-body-body-lg-font-size);
    line-height: var(--text-body-body-lg-line-height);
    letter-spacing: 0%;
    text-align: center;
    color: var(--colors-color-primary, #C7A566);
}

div#breadcrumbs > span {
    text-align: left;
    margin: 0;
    padding: 0;
    width: fit-content;
    font-weight: 500;
    font-style: Italic;
    font-size: var(--text-body-body-lg-font-size);
    line-height: var(--text-body-body-lg-line-height);
    letter-spacing: 0%;
    color: var(--colors-color-primary, #C7A566);
}

/* ============================================================
    10. Contact popup and form controls
    ============================================================ */

.popup-form-box{
    background:#f4f4f4;
    padding:40px;
    width:500px;
    border-radius:25px;
    position:relative;
}

.popup-form-box h2{
    font-size:28px;
    margin-bottom:25px;
}

.popup-close{
    position:absolute;
    right:20px;
    top:20px;
    background:none;
    border:none;
    font-size:24px;
    cursor:pointer;
}

.custom-popup-form .row{
    display:flex;
    gap:15px;
}

.field{
    position:relative;
    margin-bottom:18px;
}

.field.full{
    width:100%;
}

.field.half{
    width:50%;
}

.elementor-popup-modal .elementor-element > .e-con-inner {
    gap: 8px !important;
}

.custom-popup-form select {
    color: var(--colors-color-card-text, #A1A6B0);
    appearance: none;
}
.custom-popup-form input,
.custom-popup-form select,
.custom-popup-form textarea{
    width: 100%;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-family: var(--heading-font) !important;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    vertical-align: middle;
    min-height: 48px;
    background: var(--background-tertiary, #231D16);
    border: 1px solid var(--border-primary, #473618) !important;
    color: var(--text-secondary, #E2DEC9);
}

input[type=date]:hover, input[type=email]:hover, input[type=number]:hover, input[type=password]:hover, 
input[type=search]:hover, input[type=tel]:hover, input[type=text]:hover, 
input[type=url]:hover, select:hover, textarea:hover {
    outline: none !important;
    border: 1px solid var(--border-primary, #473618) !important;
    color: var(--text-secondary, #E2DEC9);
    background: linear-gradient(0deg, var(--background-tertiary, #241D15), var(--background-tertiary, #241D15));
linear-gradient(0deg, color(display-p3 0.137 0.114 0.086), color(display-p3 0.137 0.114 0.086)),
linear-gradient(0deg, var(--background-state-layer-white-hover, rgba(255, 255, 255, 0.08)), var(--background-state-layer-white-hover, rgba(255, 255, 255, 0.08)));
linear-gradient(0deg, color(display-p3 1.000 1.000 1.000 / 0.08), color(display-p3 1.000 1.000 1.000 / 0.08));
}

input[type=date]:focus, input[type=email]:focus, input[type=number]:focus, input[type=password]:focus, 
input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, 
input[type=url]:focus, select:focus, textarea:focus {
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid var(--border-accent, #D3B24A) !important;
    color: var(--text-secondary, #E2DEC9);
    background: var(--background-tertiary, #231D16);
}
.custom-popup-form input:focus,
.custom-popup-form input:focus-visible,
.custom-popup-form textarea:focus,
.custom-popup-form textarea:focus-visible,
.custom-popup-form select:focus,
.custom-popup-form select:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Chrome autofill / autofill preview: keep dark field instead of white/blue */
.custom-popup-form input:-webkit-autofill,
.custom-popup-form input:-webkit-autofill:hover,
.custom-popup-form input:-webkit-autofill:focus,
.custom-popup-form textarea:-webkit-autofill,
.custom-popup-form select:-webkit-autofill {
    -webkit-text-fill-color: var(--text-secondary, #E2DEC9) !important;
    caret-color: var(--text-secondary, #E2DEC9);
    box-shadow: 0 0 0 1000px var(--background-tertiary, #231D16) inset !important;
    transition: background-color 9999s ease-out 0s;
}

.custom-popup-form textarea{
    height:120px;
    resize:none;
}

html {
    overflow-x: hidden;
}

/* =====================================================================
   CF7 SUBMIT — same look & states as the Elementor .btn-offerte-aanvragen
   (pill, gold background, dark 40px icon circle, rolling text on hover).

   Markup in the CF7 form:
     <div class="submit-wrap">[submit "…"]<span class="elementor-button-icon"><span class="arrow">…svg…</span></span></div>

   JS (functions.php → hillegers_cf7_submit_button_script) swaps the
   <input> for a <button> so the rolling-text letters fit inside it.
   The input selectors below are the no-JS fallback.
   ===================================================================== */
.submit-wrap input[type="submit"],
.submit-wrap button[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;                 /* 40px icon + 2×6px padding + 2×1px border */
    margin: 0;
    padding: 13px 58px !important;    /* room for the 40px icon on the right */
    border: 1px solid transparent !important; /* reserved so focus doesn't shift layout */
    border-radius: 999px !important;
    background-color: var(--background-accent-primary, #D3B24A);
    color: var(--text-inverted-primary, #0D0C09);
    font-family: var(--heading-font) !important;
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0;
    text-align: center;
    cursor: pointer;
    transition:
        background-color var(--btn-transition-duration, 0.3s) var(--btn-transition-easing, ease-out),
        box-shadow var(--btn-transition-duration, 0.3s) var(--btn-transition-easing, ease-out),
        border-color var(--btn-transition-duration, 0.3s) var(--btn-transition-easing, ease-out);
}

/* Hover */
.submit-wrap input[type="submit"]:hover,
.submit-wrap button[type="submit"]:hover {
    /* color + inset overlay instead of gradients, so the change can animate */
    background-color: var(--background-accent-primary-hover, #DAB02E);
    box-shadow: inset 0 0 0 999px var(--background-state-layer-dark-hover, rgba(24, 19, 12, 0.08));
}

/* Press / active */
.submit-wrap input[type="submit"]:active,
.submit-wrap button[type="submit"]:active {
    background-color: var(--background-accent-primary-hover, #DAB02E);
    box-shadow: inset 0 0 0 999px var(--background-state-layer-dark-press, rgba(24, 19, 12, 0.16));
}

/* Wide-gamut screens: same colors expressed in Display P3 */
@supports (color: color(display-p3 1 1 1)) {
    .submit-wrap input[type="submit"]:hover,
    .submit-wrap button[type="submit"]:hover {
        background-color: color(display-p3 0.827 0.698 0.290);
        box-shadow: inset 0 0 0 999px color(display-p3 0.090 0.075 0.051 / 0.08);
    }
    .submit-wrap input[type="submit"]:active,
    .submit-wrap button[type="submit"]:active {
        background-color: color(display-p3 0.827 0.698 0.290);
        box-shadow: inset 0 0 0 999px color(display-p3 0.090 0.075 0.051 / 0.16);
    }
}

/* Focus: no browser ring on mouse click, accent border for keyboard */
.submit-wrap input[type="submit"]:focus,
.submit-wrap button[type="submit"]:focus {
    outline: none;
}
.submit-wrap input[type="submit"]:focus-visible,
.submit-wrap button[type="submit"]:focus-visible {
    border: 1px solid var(--border-accent, #D3B24A) !important;
}

/* Disabled (e.g. CF7 acceptance not ticked, or while sending) */
.submit-wrap input[type="submit"]:disabled,
.submit-wrap button[type="submit"]:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Icon circle — sibling of the submit, sits inside the pill on the right */
.submit-wrap .elementor-button-icon,
.submit-wrap span.elementor-button-icon {
    position: absolute !important;
    top: 7px;                         /* 6px padding + 1px border */
    right: 7px;
    z-index: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--background-primary, #17130D);
    color: var(--icon-accent-secondary, #D3B24A);
    pointer-events: none;             /* clicks go to the submit underneath */
    transition: transform var(--btn-transition-duration, 0.3s) var(--btn-transition-easing, ease-out);
}
.submit-wrap:hover .elementor-button-icon {
    transform: rotate(45deg);
}
.submit-wrap:has(:disabled) .elementor-button-icon {
    opacity: 0.45;
    transform: none;
}

.submit-wrap span.elementor-button-icon span.arrow {
    display: flex;
}

.submit-wrap span.elementor-button-icon span.arrow svg {
    width: 24px;
    height: 24px;
}

/* Keep the CF7 spinner clear of the icon */
.submit-wrap .wpcf7-spinner {
    top: 15px;
    right: 56px;
    margin: 0;
}

/* Rolling text (button version) — same as the Elementor buttons */
.submit-wrap button[type="submit"] .elementor-button-text {
    display: inline-block;
    position: relative;
    overflow: hidden;
    height: 26px;
    vertical-align: middle;
}
.submit-wrap button[type="submit"] .rt-block {
    display: block;
    white-space: nowrap;
}
.submit-wrap button[type="submit"] .rt-letter {
    display: inline-block;
    transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
.submit-wrap button[type="submit"]:hover .rt-letter,
.submit-wrap button[type="submit"]:focus-visible .rt-letter {
    transform: translateY(-100%);
}
.submit-wrap button[type="submit"]:disabled .rt-letter {
    transform: none;
}
.custom-popup-form span.wpcf7-not-valid-tip {
    font-size: 12px;
    margin: 5px;
}
.dialog-widget.dialog-lightbox-widget.elementor-popup-modal {
    background: var(--background-secondary, #12100D);
    backdrop-filter: blur(10px) !important;
}
.dialog-message.dialog-lightbox-message {
    width: 100% !important;
}
.elementor-popup-modal .dialog-widget-content {
    max-width: 600px !important;
    border-radius: 16px !important;
    padding: 24px !important;
    overflow: hidden;
}

.popup-wrapper .popupheading h3.elementor-heading-title.elementor-size-default {
    font-family: var(--heading-font) !important;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0%;
    color: var(--text-primary, #F3F1E7);
    padding: 0;
    margin: 0;
}

.popup-wrapper .popupcontent p.elementor-heading-title.elementor-size-default {
    font-family: var(--heading-font) !important;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: var(--text-secondary, #E2DEC9);
    padding: 0;
    margin: 0;
    margin-bottom: 16px;
}

.elementor-popup-modal .dialog-widget-content {
    background: var(--background-primary, #17130D) !important;
    position: relative;
}

.submit-wrap {
    position: relative;
}
span.wpcf7-spinner {
    position: absolute;
    right: 0;
    top: 16px;
    z-index: 999;
}
body .elementor-popup-modal .dialog-close-button svg {
    width: 24px;
    height: 24px;
    fill: var(--icon-primary, #F3F1E7);
}
.custom-popup-form span.icon{
    position:absolute;
    right:12px;
    top: 28px;
    transform:translateY(-50%);
    width:30px;
    height:30px;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    pointer-events:none;
    display: none;
}
.custom-popup-form .field.half p {
    margin: 0;
}

.custom-popup-form .field label {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: var(--text-secondary, #E2DEC9);
}

/* ---------- Checkbox (CF7 [checkbox] / [acceptance]) ---------- */
.custom-popup-form .wpcf7-list-item {
    margin: 0;
}

.custom-popup-form .wpcf7-list-item label,
.custom-popup-form .field .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-family: var(--heading-font) !important;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-primary, #F3F1E7);
}

/* The input is a 40px round hit area (hover state layer);
   the 18px box itself is drawn with ::before */
.custom-popup-form input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    min-height: 40px;
    margin: 0 0 0 -11px; /* keeps the box aligned with the other fields */
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent;
    cursor: pointer;
    transition: background-color .2s ease;
}

.custom-popup-form input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    border: 2px solid var(--icon-primary, #F3F1E7);
    border-radius: 2px;
    background: transparent no-repeat center / 14px 14px;
    transition: background-color .2s ease, border-color .2s ease;
}

/* Hover: round state layer behind the box */
.custom-popup-form input[type="checkbox"]:hover {
    background: var(--background-state-layer-white-hover, rgba(255, 255, 255, 0.08));
}

/* Selected: gold fill + dark check */
.custom-popup-form input[type="checkbox"]:checked::before {
    border-color: var(--border-accent, #D3B24A);
    background-color: var(--border-accent, #D3B24A);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 17.65 4.5 12.6l1.4-1.4 3.65 3.65 8.55-8.55 1.4 1.4z' fill='%2317130D'/%3E%3C/svg%3E");
}

.custom-popup-form input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--border-accent, #D3B24A);
    outline-offset: -2px;
}

.contacttitle h5.elementor-heading-title.elementor-size-default {
    font-weight: 500;
    font-size: var(--text-headings-heading-md-sm-font-size, 28px);
    line-height: var(--text-headings-heading-md-sm-line-height, 36.400001525878906px);
    letter-spacing: var(--text-headings-heading-md-sm-letter-spacing, 0.2800000011920929px);
    color: var(--colors-color-headings, #051E2E);
}

.contactheroheader .insideheading h1,
.contactheroheader .insideheading h1 .word {
    font-weight: 600;
    font-size: var(--text-display-display-sm-font-size);
    line-height: var(--text-display-display-sm-line-height);
    letter-spacing: var(--text-display-display-sm-letter-spacing);
    color: var(--colors-color-headings, #051E2E);
}

.contactheroheader .insideheading h1 span,
.contactheroheader .insideheading h1 span .word {
    font-weight: 600;
    font-size: var(--text-display-display-sm-font-size);
    line-height: var(--text-display-display-sm-line-height);
    letter-spacing: var(--text-display-display-sm-letter-spacing);
    color: var(--colors-color-primary, #1C93E2);
}

.faqaccordians .e-n-accordion details[open] {
    gap: 20px;
}

.werkijzefaq .e-n-accordion {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* .faqaccordians .e-n-accordion details::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: var(--colors-color-primary, #C7A566);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease;
}
.faqaccordians .e-n-accordion details:hover::after,
.faqaccordians .e-n-accordion details[open]::after {
    background: var(--colors-color-primary, #C7A566);
    transform: scaleX(1);
    transform-origin: left;
} */

body .page-content > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 1;
    padding-top: var(--spacing-sm);
    padding-right: var(--spacing-sm);
    padding-bottom: var(--spacing-none);
    padding-left: var(--spacing-sm);
    background: var(--background-secondary, #12100D);
}


/* ===========================
    Additional adjustments
    =========================== */

h1.headingh1class.e-heading-base.e-default-h1 {
    border-radius: var(--radius-full);
    padding-top: var(--spacing-xxs);
    padding-right: var(--spacing-md);
    padding-bottom: var(--spacing-xxs);
    padding-left: var(--spacing-md);
    gap: 8px;
    background: var(--background-tertiary, #231D16);
    border: 1px solid var(--border-inverted-secondary, #FFFFFF33);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    color: var(--text-accent, #D3B24A);
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    width: fit-content;
}

h1.headingh1class.e-heading-base.e-default-h1.headingh1class::before {
    content: '';
    border-radius: var(--radius-full);
    width: 4px;
    height: 4px;
    opacity: 1;
    border-width: 2px;
    display: inline-block;
    gap: 8px;
    background: var(--background-accent-primary, #D3B24A);
    border: 2px solid #D3B24A40;
}

body.home .headingh2class.e-heading-base {
    max-width: 612px;
}

.thankcarousal img.swiper-slide-image {
    min-height: 450px;
    border-radius: 16px;
    object-fit: cover;
}

.headingh2class.e-heading-base {
    font-weight: 500;
    font-size: 60px;
    line-height: 68px;
    letter-spacing: 0%;
    color: var(--text-primary, #F3F1E7);
}

.waromkiezenclass .elementor-image-box-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.waromkiezenclass .elementor-image-box-wrapper .elementor-image-box-content h4.elementor-image-box-title {
    font-weight: 500;
    font-style: Medium;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0%;
    color: var(--text-primary, #F3F1E7);
}

.waromkiezenclass .elementor-image-box-wrapper .elementor-image-box-content p.elementor-image-box-description {
    color: var(--text-secondary, #E2DEC9);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
}

.elementor-element.waromkiezenclass {
    margin-bottom: 28px !important;
}

.elementor-element.waromkiezenclass:last-child {
    margin-bottom: 0 !important;
}

.waromkiezenclass .elementor-image-box-wrapper * {
    margin: 0 !important;
    padding: 0;
}

.waromkiezenclass .elementor-image-box-wrapper .elementor-image-box-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.elementor-element.werkwijzeclass.elementor-widget-image-box {
    background-size: 100% auto !important;
    background-position: 0px 35px;
    padding-left: 20px;
    padding-right: 10px;
}

.elementor-element.werkwijzeclass.elementor-widget-image-box .elementor-image-box-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.elementor-element.werkwijzeclass.elementor-widget-image-box * {
    padding: 0 !important;
    margin: 0 !important;
}

.elementor-element.werkwijzeclass.elementor-widget-image-box .elementor-image-box-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.elementor-element.werkwijzeclass.elementor-widget-image-box .elementor-image-box-content p.elementor-image-box-description {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: var(--text-secondary, #E2DEC9);
}

.elementor-element.werkwijzeclass.elementor-widget-image-box .elementor-image-box-content h4.elementor-image-box-title {
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0%;
    color: var(--text-primary, #F3F1E7);
}

.elementor-element.werkwijzeclass.elementor-widget-image-box:nth-child(2) {
    background-position: 0px -18px !important;
}

.elementor-element.werkwijzeclass.elementor-widget-image-box:nth-child(3) {
    background-position: 0 -11px !important;
    background-size: 96% 98% !important;
}

.elementor-element.werkwijzeclass.elementor-widget-image-box:nth-child(4) {
    background-position: 0 0 !important;
    background-size: 96% 100% !important;
}

.elementor-element.werkwijzeclass.elementor-widget-image-box:nth-child(3) h4.elementor-image-box-title,
.elementor-element.werkwijzeclass.elementor-widget-image-box:nth-child(4) h4.elementor-image-box-title {
    max-width: 194px;
}

.elementor-element.werkwijzeclass.elementor-widget-image-box:last-child {
    background-position: 5px 40px !important;
    background-size: 97% 88% !important;
}

.elementor-element.specialisticonbox .elementor-image-box-wrapper {
    display: grid !important;
    grid-template-columns: 48px 1fr;
    gap: 8px;
}

.elementor-element.specialisticonbox .elementor-image-box-wrapper * {
    margin: 0 !important;
    padding: 0 !important;
}

.elementor-element.specialisticonbox .elementor-image-box-wrapper figure.elementor-image-box-img {
    width: 100% !important;
    margin-top: 5px !important;
}

.elementor-element.specialisticonbox .elementor-image-box-wrapper .elementor-image-box-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.elementor-element.specialisticonbox .elementor-image-box-wrapper .elementor-image-box-content h3.elementor-image-box-title {
    color: var(--text-primary, #F3F1E7);
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0%;
}

.elementor-element.specialisticonbox .elementor-image-box-wrapper .elementor-image-box-content p.elementor-image-box-description {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: var(--text-secondary, #E2DEC9);
}

.opdrachtgeversbox:not(.nonorder) > .elementor-element:nth-child(2) {
    padding: 8px !important;
}

.opdrachtgeversbox > .elementor-element {
    padding: 0;
    border-radius: 16px !important;
    overflow: hidden !important;
}
.opdrachtgeversbox .elementor-element.elementor-widget.elementor-widget-testimonial {
    height: 100%;
    display: flex;
    background: var(--background-tertiary, #231D16);
    padding: 24px;
    border-radius: 16px;
}

.opdrachtgeversbox .elementor-element.elementor-widget.elementor-widget-testimonial .elementor-testimonial-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.opdrachtgeversbox .elementor-element.elementor-widget.elementor-widget-testimonial .elementor-testimonial-content {
    font-family: var(--font-family-button);
    font-weight: 400;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0%;
    color: var(--text-primary, #F3F1E7);
}

.opdrachtgeversbox .elementor-element.elementor-widget.elementor-widget-testimonial .elementor-testimonial-wrapper .elementor-testimonial-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.opdrachtgeversbox .elementor-element.elementor-widget.elementor-widget-testimonial .elementor-testimonial-wrapper .elementor-testimonial-details .elementor-testimonial-name {
    font-family: var(--font-family-button);
    font-weight: 400;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0%;
    color: var(--text-primary, #F3F1E7);
}

.opdrachtgeversbox .elementor-element.elementor-widget.elementor-widget-testimonial .elementor-testimonial-wrapper .elementor-testimonial-details .elementor-testimonial-job {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: var(--text-secondary, #E2DEC9);
    font-family: var(--font-family-button);
}

body .prefootersec > .e-con-inner {
    gap: 8px !important;
}

.footerfaqclass .elementor-element.faqaccordians .e-n-accordion {
    gap: 8px;
    border-radius: 16px;
    padding: 16px;
    background: var(--background-primary, #17130D);
}

.footerfaqclass .elementor-element.faqaccordians .e-n-accordion details {
    min-height: 62px;
    padding-top: var(--spacing-sp-16);
    padding-bottom: var(--spacing-sp-16);
    border-radius: var(--radius-sm);
    opacity: 1;
    padding: var(--spacing-lg);
    background: var(--background-tertiary, #231D16);
}

.elementor-element.heading h3.elementor-heading-title {
    max-width: 300px;
}

.dm-single-heading-8 .word {
    transition: none !important;
    opacity: 0.1;
}

.elementor-element.heading h3.elementor-heading-title,
.elementor-element.heading h3.elementor-heading-title .line-mask .line {
    font-family: var(--body-font) !important;
    font-weight: 400 !important;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: var(--text-primary, #F3F1E7) !important;
}

.footercontactlist span.elementor-icon-list-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    gap: 8px;
    opacity: 1;
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--background-tertiary, #231D16);
    text-align: center !important;
}

.footercontactlist li.elementor-icon-list-item,
.footercontactlist li.elementor-icon-list-item a {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 16px;
}

.footercontactlist span.elementor-icon-list-icon svg {
    width: 24px;
    height: 24px;
    fill: var(--icon-accent-secondary, #D3B24A);
    margin: 0 !important;
    padding: 0 !important;
}

/* =====================================================================
   CUSTOM BUTTONS — "Offerte aanvragen" (primary) & "Bel nu" (secondary)
   Paste this whole block into: Elementor > Site Settings > Custom CSS
   OR your child theme's style.css
   =====================================================================

   HOW TO APPLY THE CLASSES IN ELEMENTOR:
   1. Click the "Offerte aanvragen" button widget.
   2. Go to Advanced tab > CSS Classes.
   3. Type: btn-offerte-aanvragen   (no dot, no spaces)
   4. Click the phone/"Bel nu" button widget.
   5. Advanced tab > CSS Classes > type: btn-bel-nu
   ===================================================================== */

:root {
  /* Design tokens from Figma dev-mode. If your theme already defines
     these custom properties globally, those win automatically — the
     values below only act as fallbacks. */
  --background-accent-primary: #D3B24A;
  --background-accent-primary-hover: #DAB02E;
  --background-state-layer-dark-hover: rgba(24, 19, 12, 0.08);
  --background-state-layer-dark-press: rgba(24, 19, 12, 0.16);
  --alpha-dark-16: #17130D29;
  --border-accent: #D3B24A;
  --btn-transition-duration: 0.3s;
  --btn-transition-easing: ease-out;
}

/* ---------------------------------------------------------------------
   SHARED BASE
--------------------------------------------------------------------- */
body .btn-offerte-aanvragen.elementor-button,
body .btn-offerte-aanvragen .elementor-button,
body .btn-bel-nu.elementor-button,
body .btn-bel-nu .elementor-button {
  border-radius: 999px;
}

/* ---------------------------------------------------------------------
   PRIMARY — Offerte aanvragen
--------------------------------------------------------------------- */
body .btn-offerte-aanvragen.elementor-button,
body .btn-offerte-aanvragen .elementor-button {
  position: relative;
  overflow: hidden;
  padding: 6px 6px 6px 16px;
  color: #1B1712;
  border: 1px solid transparent; /* reserved so focus doesn't shift layout */
  background-color: var(--background-accent-primary, #D3B24A);
  transition:
    background-color var(--btn-transition-duration) var(--btn-transition-easing),
    box-shadow var(--btn-transition-duration) var(--btn-transition-easing),
    border-color var(--btn-transition-duration) var(--btn-transition-easing);
}

a.elementor-button .elementor-button-icon svg {
    height: 24px;
    width: 24px;
}

/* keep text/icon above the pill's own background layers */
body .btn-offerte-aanvragen .elementor-button-content-wrapper {
  position: relative;
  z-index: 1;
  align-items: center;
  gap: 12px;
}

body .btn-offerte-aanvragen .elementor-button-icon {
    color: var(--icon-accent-secondary, #D3B24A);
    border-radius: 50%;
    width: 40px;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--btn-transition-duration) var(--btn-transition-easing);
    background: var(--background-primary, #17130D);
}

/* Hover */
body .btn-offerte-aanvragen:hover.elementor-button,
body .btn-offerte-aanvragen:hover .elementor-button {
  /* color + inset overlay instead of gradients, so the change can animate */
  background-color: var(--background-accent-primary-hover, #DAB02E);
  box-shadow: inset 0 0 0 999px var(--background-state-layer-dark-hover, rgba(24, 19, 12, 0.08));
}
body .btn-offerte-aanvragen:hover .elementor-button-icon {
  transform: rotate(45deg);
}

/* Press / active */
body .btn-offerte-aanvragen:active.elementor-button,
body .btn-offerte-aanvragen:active .elementor-button {
  background-color: var(--background-accent-primary-hover, #DAB02E);
  box-shadow: inset 0 0 0 999px var(--background-state-layer-dark-press, rgba(24, 19, 12, 0.16));
}

/* Wide-gamut screens: same colors expressed in Display P3 */
@supports (color: color(display-p3 1 1 1)) {
  body .btn-offerte-aanvragen:hover.elementor-button,
  body .btn-offerte-aanvragen:hover .elementor-button {
    background-color: color(display-p3 0.827 0.698 0.290);
    box-shadow: inset 0 0 0 999px color(display-p3 0.090 0.075 0.051 / 0.08);
  }
  body .btn-offerte-aanvragen:active.elementor-button,
  body .btn-offerte-aanvragen:active .elementor-button {
    background-color: color(display-p3 0.827 0.698 0.290);
    box-shadow: inset 0 0 0 999px color(display-p3 0.090 0.075 0.051 / 0.16);
  }
}

/* Focus (keyboard) */
body .btn-offerte-aanvragen:focus-visible.elementor-button,
body .btn-offerte-aanvragen .elementor-button:focus-visible {
  border: 1px solid var(--border-accent, #D3B24A);
}

/* Disabled — add class "is-disabled" manually where needed */
body .btn-offerte-aanvragen.is-disabled.elementor-button,
body .btn-offerte-aanvragen.is-disabled .elementor-button {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}


/* ---------------------------------------------------------------------
   SECONDARY — Bel nu (phone / outline)
   Unchanged from before — send me the equivalent Figma tokens for this
   button and I'll wire them in the same way.
--------------------------------------------------------------------- */
body .btn-bel-nu.elementor-button,
body .btn-bel-nu .elementor-button {
  background-color: transparent;
  color: #FFFFFF;
  border: 1.5px solid #FFFFFF;
  padding: 12px 26px;
  transition:
    background-color var(--btn-transition-duration) var(--btn-transition-easing),
    border-color var(--btn-transition-duration) var(--btn-transition-easing);
}

body .btn-bel-nu .elementor-button-icon {
  margin-right: 10px;
  color: currentColor;
}

body .btn-bel-nu:hover.elementor-button,
body .btn-bel-nu:hover .elementor-button {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: #FFFFFF;
}

body .btn-bel-nu:active.elementor-button,
body .btn-bel-nu:active .elementor-button {
  background-color: rgba(255, 255, 255, 0.16);
}

body .btn-bel-nu:focus-visible.elementor-button,
body .btn-bel-nu .elementor-button:focus-visible {
  outline: 1px solid var(--border-accent, #D3B24A);
  outline-offset: 2px;
}

body .btn-bel-nu.is-disabled.elementor-button,
body .btn-bel-nu.is-disabled .elementor-button {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

/* =====================================================================
   ROLLING TEXT HOVER ANIMATION
   ===================================================================== */

body .btn-offerte-aanvragen .elementor-button-text {
    display: inline-block;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0%;
    height: 26px;
    text-align: center;
    color: var(--text-inverted-primary, #0D0C09);
}

body .btn-bel-nu .elementor-button-text {
    display: inline-block;
    position: relative;
    overflow: hidden;
    height: 26px;
    vertical-align: middle;
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0%;
    color: var(--text-primary, #F3F1E7);
}

body .btn-offerte-aanvragen .elementor-button-text .rt-block,
body .btn-bel-nu .elementor-button-text .rt-block {
  display: block;
  white-space: nowrap;
}

body .btn-offerte-aanvragen .elementor-button-text .rt-letter,
body .btn-bel-nu .elementor-button-text .rt-letter {
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

body .btn-offerte-aanvragen:hover .rt-letter,
body .btn-offerte-aanvragen:focus-visible .rt-letter,
body .btn-bel-nu:hover .rt-letter,
body .btn-bel-nu:focus-visible .rt-letter {
  transform: translateY(-100%);
}

.elementor-element.herotopleft {
    gap: 16px;
}
.elementor-element.herobottomleft {
    gap: 32px;
}
.elementor-element.herobottomleft .herobottomleftflex {
    gap: 8px;
}

body .btn-offerte-aanvragen.fullwidthcenter .elementor-button,
body .btn-offerte-aanvragen.fullwidthcenter .elementor-button span.elementor-button-text {
    width: 100%;
}

.elementor-element.rightheroclass .elementor-widget-n-carousel {
    max-width: 240px !important;
    opacity: 1;
    border-radius: 16px;
    gap: 24px;
    padding: 24px;
    background: var(--alpha-dark-16, #17130D29);
    border: 1px solid var(--border-inverted-secondary, #FFFFFF33);
    backdrop-filter: blur(24px);
}

.elementor-element.isolatieclass {
    opacity: 1;
    border-radius: 16px;
    padding: 24px;
    background: var(--background-primary, #17130D);
}

.elementor-element.isolatieclass .elementor-image-box-wrapper {
    gap: 24px;
    display: flex;
    flex-direction: column;
}

.elementor-element.isolatieclass .elementor-image-box-wrapper * {
    margin: 0 !important;
    padding: 0 !important;
}

.elementor-element.isolatieclass .elementor-image-box-wrapper figure.elementor-image-box-img img {
    min-width: 32px;
    min-height: 32px;
    opacity: 1;
    border-radius: 4px;
}

.elementor-element.isolatieclass .elementor-image-box-wrapper h3.elementor-image-box-title {
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0%;
    color: var(--text-primary, #F3F1E7);
}
.elementor-element.isolatieclass .elementor-image-box-wrapper p.elementor-image-box-description {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: var(--text-secondary, #E2DEC9);
}
.elementor-element.isolatieclass .elementor-image-box-wrapper .elementor-image-box-content {
    display: flex;
    flex-direction: column;
    opacity: 1;
    gap: 4px;
}

h3.e-heading-base.e-default-h3 {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-accent, #D3B24A);
}

h2.e-heading-base.e-default-h2 {
    font-weight: 500;
    font-size: 48px;
    line-height: 56px;
    letter-spacing: 0%;
    color: var(--text-primary, #F3F1E7);
}

h2.e-heading-base.e-default-h2 strong {
    font-weight: 500;
    font-size: 48px;
    line-height: 56px;
    letter-spacing: 0%;
    color: var(--text-primary, #F3F1E7);
}

.technischecarousal .elementor-swiper-button {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    transform: unset !important;
    background: var(--background-inverted, #F3F1E7);
    align-items: center;
    justify-content: center;
}

.technischecarousal .elementor-element .e-con-inner {
    padding: 0 !important;
    margin: 0 !important;
}

.technischecarousal .elementor-element .elementor-element.isolatieclass {
    padding: 0 !important;
    background: transparent;
}

h4.elementor-heading-title.elementor-size-default {
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0%;
    color: var(--text-primary, #F3F1E7);
}

.elementor-element.opdrachtgeversbox.e-flex.e-con.e-child {
    max-width: 1424px;
    gap: 8px;
    padding: 0;
}
.elementor-element.elementor-widget-button {
    display: flex;
}

.elementor-element.opdrachtgeversbox.e-flex.e-con.e-child > .elementor-element:last-child {
    padding: 0;
    gap: 8px;
}

.elementor-element.isowaargridsec.e-flex.e-con.e-child {
    border-radius: 16px;
    border: 1px solid var(--border-inverted-secondary, #FFFFFF33);
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.elementor-element.isowaargridsec .isowaargridsectop,
.elementor-element.isowaargridsec .isowaargridsecbottom {
    gap: 0px;
    padding: 0;
}

.elementor-element.isowaargridsec .isowaargridsectop .waarkunnenclass {
    border-bottom: 1px solid var(--border-inverted-secondary, #FFFFFF33);
    border-right: 1px solid var(--border-inverted-secondary, #FFFFFF33);
    padding: 24px;
    background: var(--background-tertiary, #231D16);
}

.elementor-element.isowaargridsec .isowaargridsectop .waarkunnenclass:last-child {
    border-right: 0px none;
}

.elementor-element.isowaargridsec .isowaargridsecbottom .waarkunnenclass {
    border-right: 1px solid var(--border-inverted-secondary, #FFFFFF33);
    padding: 24px;
    background: var(--background-tertiary, #231D16);
}

.elementor-element.isowaargridsec .isowaargridsecbottom .waarkunnenclass:last-child {
    border-right: 0px none;
}

.elementor-element.isowaargridsec h3.elementor-image-box-title {
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0%;
    color: var(--text-primary, #F3F1E7);
    margin: 0;
    padding: 0;
}
.elementor-element.isowaargridsec p.elementor-image-box-description {
    padding: 0;
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: var(--text-secondary, #E2DEC9);
}
.elementor-element.isowaargridsec .elementor-image-box-content {
    gap: 4px;
    display: flex;
    flex-direction: column;
}
.elementor-element.isowaargridsec .elementor-image-box-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

article.projecten-slide {
    background: var(--background-tertiary, #231D16);
    height: 518px;
    overflow: hidden;
    border-radius: 16px;
}

body .opdrachtgeversbox .elementor-counter-title {
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0%;
    color: var(--text-primary, #F3F1E7);
    font-family: var(--heading-font);
}

body .opdrachtgeversbox .elementor-counter-number-wrapper {
    font-family: var(--heading-font);
    font-weight: 500;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: 0%;
    color: var(--text-primary, #F3F1E7);
}

.statesimageblock h4.elementor-image-box-title {
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0%;
    vertical-align: middle;
    color: var(--text-primary, #F3F1E7);
}

.opdrachtgeversbox .statesimageblock .elementor-image-box-wrapper {
    pointer-events: none;
}

.statesimageblock * {
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
}

.statesimageblock figure.elementor-image-box-img {
    width: 151px !important;
}

.statesimageblock .elementor-image-box-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

header.elementor-location-header {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 9;
}

.elementor-element.opdrachtgeversbox.e-flex.e-con.e-child:not(.nonorder) > .elementor-element:first-child {
    padding: 24px 24px 24px 24px;
}

/* ============================================================
    11. Desktop responsive overrides
    ============================================================ */

@media screen and (min-width: 1024px) {

    .elementor-element.maenutopheader.elementor-widget.elementor-widget-nav-menu > nav > ul {
        display: flex;
        align-items: flex-start;
        gap: 28px;
        flex-direction: row;
    }

    .elementor-element.maenutopheader.elementor-widget.elementor-widget-nav-menu > nav > ul > li > a {
        font-family: var(--heading-font) !important;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0%;
        vertical-align: middle;
        color: var(--text-primary, #F3F1E7) !important;
    }

    .mainHeaderTop > .e-con-inner {
        padding: 0;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
		gap: 30px;
        justify-content: space-between !important;
    }
    footer .footertopsec > .e-con-inner {
        display: grid;
        grid-template-columns: 506px 200px 200px 240px;
        justify-content: space-between !important;
    }
    .mainHeaderTop > .e-con-inner > .elementor-element {
        display: flex;
        width: 100%;
        padding: 0;
    }

    header .elementor-element.mainHeaderTop > .e-con-inner > .elementor-element:nth-child(2) {
        position: unset !important;
    }

    .elementor-element.maenutopheader.elementor-widget.elementor-widget-nav-menu {
        position: unset !important;
    }

    .elementor-element.maenutopheader.elementor-widget.elementor-widget-nav-menu > nav.elementor-nav-menu--main {
        position: unset !important;
    }

    .technischecarousal .elementor-swiper-button.elementor-swiper-button-prev {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
    }

    .technischecarousal .elementor-swiper-button.elementor-swiper-button-next {
        position: absolute !important;
        left: 56px !important;
        top: 0 !important;
    }

    .technischecarousal .e-n-carousel.swiper.swiper-initialized.swiper-horizontal.swiper-backface-hidden {
        margin-left: 25% !important;
    }

}


/* ============================================================
    12. Mobile responsive menu
    ============================================================ */

@media (max-width: 1024px) {
    .elementor.elementor-52 {
        display: block;
    }
    /* Hidden checkbox — acts as toggle state */
    #burger-toggle {
        position: absolute;
        left: -9999px;
        width: 100%;
        clip: rect(0, 0, 0, 0);
        z-index: 9999 !important;
    }

    .elementor.elementor-52.elementor-location-header {
        width: 100%;
    }

    /* Full-screen overlay menu — hidden off-screen by default */
    /* Dimmed + blurred overlay, hidden by default */
    .menu {
        --menu-duration: 0.45s;
        --menu-ease: cubic-bezier(0.65, 0, 0.35, 1);
        --menu-top: 88px; /* space for the header (logo + close button) */
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        z-index: 9990 !important;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        /* = the open state's "padding: 4px !important" (section 05), so the
           card sits in the same spot open and closed and doesn't jump on close */
        padding: 4px !important;
        box-sizing: border-box;
        background: rgba(23, 19, 13, 0.7); /* alpha/dark/70 */
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        border-left: 0px none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        /* The desktop rules (section 05) slide .menu off-screen with
           translateX(100%). Here the overlay stays in place and only fades,
           otherwise it jumps away on close before the card can shrink back. */
        transform: none !important;
        /* Closing: the card first shrinks back into the top-right corner,
           then the dimmed backdrop fades out */
        transition:
            opacity .25s ease var(--menu-duration),
            visibility 0s linear calc(var(--menu-duration) + .25s);
    }

    /* Menu card, expands from the top-right corner (next to the burger);
       closing runs the same clip-path transition back into that corner */
    .menu > .elementor-location-header {
        width: 100%;
        box-sizing: border-box;
        padding: 104px 8px 16px; /* same open or closed, so nothing jumps while it animates */
        background: var(--background-primary, #17130d);
        border: 1px solid var(--border-primary, #473618);
        border-radius: var(--radius-md, 16px);
        box-shadow: 0 3px 7px rgba(15, 12, 8, 0.25);
        animation: none;
        clip-path: inset(0 0 100% 100% round var(--radius-md, 16px));
        transition: clip-path var(--menu-duration) var(--menu-ease);
    }

    /* Two-screen slider (mm-main / mm-cats) sized to the card.
       Overrides the template's custom CSS, which pushes every .mm-screen
       translateX(100%) with no .is-active rule, and Elementor's
       100vw / 100vh sizing. */
    .menu .elementor-52 .mm-wrap.e-con {
        --min-height: 0;
        --align-items: stretch;
        --padding-top: 0px;
        --padding-right: 0px;
        --padding-bottom: 0px;
        --padding-left: 0px;
        position: relative;
        height: auto;
        padding: 0;
        overflow: hidden;
    }

    .menu .mm-screen span.elementor-heading-title a {
        font-family: var(--heading-font) !important;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0%;
        color: var(--icon-primary, #F3F1E7) !important;
    }

    nav.elementor-element.mm-screen > .elementor-element.fade-in-up2 > .elementor-element {
        padding: 8px 12px 12px 12px;
        margin-bottom: 4px;
    }

    .menu .elementor-52 .mm-screen.e-con {
        --width: 100%;
        --min-height: 0;
        --justify-content: flex-start;
        --padding-top: 0px;
        --padding-right: 0px;
        --padding-bottom: 0px;
        --padding-left: 0px;
        position: absolute;
        inset: 0;
        width: 100%;
        background: transparent;
        overflow: visible;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.3s var(--menu-ease), visibility 0s linear 0.3s;
    }

    /* Active screen sits in the flow so the card takes its height */
    .menu .elementor-52 .mm-screen.e-con.is-active {
        position: relative;
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.3s var(--menu-ease), visibility 0s linear 0s;
    }

    /* Logos inside the screens duplicate the header logo */
    .menu .mm-screen > .elementor-widget-image:not(.back-main) {
        display: none;
    }

    /* Back arrow on the categories screen: a row above the links */
    .menu .elementor-52 .mm-screen .elementor-element.back-main {
        position: static;
        order: -1;
        margin-bottom: 8px;
        cursor: pointer;
    }

    /* Nav links fade/slide in shortly after the card starts opening */
    .menu .mm-screen .fade-in-up2 > .elementor-element {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .menu .elementor-location-header  nav.elementor-element.mm-screen {
        max-width: 100%;
        padding: 0;
    }

    header .mainHeaderTop .elementor-52 .e-con-inner {
        grid-template-columns: 1fr !important;
        padding: 0 !important;
    }

    .mobiledropdownmenu nav .elementor-nav-menu li {
        position: relative;
        width: 100%;
        padding-bottom: 12px;
        border-bottom: 2px solid var(--colors-color-border, #DFE1E7);
        align-items: center;
        display: flex;
        justify-content: space-between;
    }

    .mobiledropdownmenu nav .elementor-nav-menu li::after {
        content: '';
        background-image: url(https://dev3.aurorawebdesign.nl/wp-content/uploads/2026/06/Vector-7.svg);
        background-repeat: no-repeat;
        background-size: contain;
        width: 12px;
        height: 12px;
        position: absolute;
        right: 7px;
        top: 7px;
        bottom: 0;
    }

    /* Open state: show overlay, expand card, stagger links in */
    #burger-toggle:checked ~ .menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition:
            opacity var(--menu-duration) var(--menu-ease),
            visibility 0s linear 0s;
    }

    #burger-toggle:checked ~ .menu > .elementor-location-header {
        clip-path: inset(0 0 0 0 round var(--radius-md, 16px));
    }

    /* Links + dividers alternate, so each link/divider pair shares a delay */
    #burger-toggle:checked ~ .menu .mm-screen .fade-in-up2 > .elementor-element {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }
    #burger-toggle:checked ~ .menu .mm-screen .fade-in-up2 > .elementor-element:nth-child(-n+2) { transition-delay: 0.12s; }
    #burger-toggle:checked ~ .menu .mm-screen .fade-in-up2 > .elementor-element:nth-child(n+3):nth-child(-n+4) { transition-delay: 0.16s; }
    #burger-toggle:checked ~ .menu .mm-screen .fade-in-up2 > .elementor-element:nth-child(n+5):nth-child(-n+6) { transition-delay: 0.20s; }
    #burger-toggle:checked ~ .menu .mm-screen .fade-in-up2 > .elementor-element:nth-child(n+7):nth-child(-n+8) { transition-delay: 0.24s; }
    #burger-toggle:checked ~ .menu .mm-screen .fade-in-up2 > .elementor-element:nth-child(n+9):nth-child(-n+10) { transition-delay: 0.28s; }
    #burger-toggle:checked ~ .menu .mm-screen .fade-in-up2 > .elementor-element:nth-child(n+11) { transition-delay: 0.32s; }

    /* Close button gets the primary border while open */
    #burger-toggle:checked ~ .burger-menu,
    body.home #burger-toggle:checked ~ .burger-menu,
    body.transperentHeader #burger-toggle:checked ~ .burger-menu {
        border-color: var(--border-primary, #473618);
    }

    /* Keep the logo above the overlay so it stays sharp */
    body:has(#burger-toggle:checked) header .elementor-widget-theme-site-logo {
        position: relative;
        z-index: 9995;
    }

    /* Stop the page scrolling behind the open menu */
    body:has(#burger-toggle:checked) {
        overflow: hidden;
    }

    /* Animate inner menu links */
    #burger-toggle:checked ~ .menu .menu-nav-link span div,
    #burger-toggle:checked ~ .menu img,
    #burger-toggle:checked ~ .menu .title p {
        transform: translateY(0);
        transition: 1.2s 0.1s cubic-bezier(0.35, 0, 0.07, 1);
    }

    /* Staggered image transition delays */
    #burger-toggle:checked ~ .menu .image-link:nth-child(1) img { transition-delay: 0.18s; }
    #burger-toggle:checked ~ .menu .image-link:nth-child(2) img { transition-delay: 0.26s; }
    #burger-toggle:checked ~ .menu .image-link:nth-child(3) img { transition-delay: 0.34s; }
    #burger-toggle:checked ~ .menu .image-link:nth-child(4) img { transition-delay: 0.42s; }

    /* Burger line animation when menu opens (lines collapse into an X) */
    #burger-toggle:checked ~ .burger-menu .line::after {
        transform: translateX(0);
    }
    #burger-toggle:checked ~ .burger-menu .line:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }
    #burger-toggle:checked ~ .burger-menu .line:nth-child(2) {
        transform: scaleX(0);
        opacity: 0;
    }
    #burger-toggle:checked ~ .burger-menu .line:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* Close icon is white on the dark overlay */
    #burger-toggle:checked + .burger-menu .line,
    #burger-toggle:checked ~ .burger-menu .line {
        background: var(--icon-primary, #f3f1e7);
    }

    /* Burger button — 48x48 round button with a 24x24 icon centred inside */
    .burger-menu {
        position: relative;
        display: block;
        box-sizing: border-box;
        width: 48px;
        height: 48px;
        border: 1px solid rgba(29, 27, 24, 0.16);
        border-radius: 50%;
        z-index: 9999;
        outline: none;
        cursor: pointer;
        transition: border-color 0.3s, background-color 0.3s;
    }

    body.home .burger-menu,
    body.transperentHeader .burger-menu {
        border-color: rgba(255, 255, 255, 0.16);
    }

    .burger-menu:hover {
        border-color: rgba(29, 27, 24, 0.4);
    }

    body.home .burger-menu:hover,
    body.transperentHeader .burger-menu:hover {
        border-color: rgba(255, 255, 255, 0.4);
    }

    /* Individual lines — 18x2px strokes inside the 24x24 icon area */
    .burger-menu .line {
        position: absolute;
        left: 50%;
        width: 18px;
        height: 2px;
        margin-left: -9px;
        background: var(--colors-color-dark, #1D1B18);
        border-radius: 2px;
        overflow: hidden;
        transition: 0.4s;
        z-index: 9999 !important;
    }

    body.home .burger-menu .line,
    body.transperentHeader .burger-menu .line {
        background: #fff;
    }

    /* Icon area spans 12px–36px of the 47px inner box; lines sit 6px apart */
    .burger-menu .line:nth-child(1) { top: calc(50% - 7px); }
    .burger-menu .line:nth-child(2) { top: calc(50% - 1px); }
    .burger-menu .line:nth-child(3) { top: calc(50% + 5px); }

    .burger-menu .line::after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: translateX(-100%);
        transition: 0.25s;
        z-index: 9999 !important;
    }
    .burger-menu .line:nth-child(2)::after { transition-delay: 0.1s; }
    .burger-menu .line:nth-child(3)::after { transition-delay: 0.2s; }
    .burger-menu:hover .line::after { transform: translateX(0); }

    /* Elementor template inside the menu */
    .elementor-107 {
        width: 100%;
        animation: none;
    }

    header .mainHeaderTop .mobiledropdownmenu nav .elementor-nav-menu a.elementor-item {
        font-weight: 400;
        font-size: var(--text-headings-heading-xx-sm-font-size);
        line-height: var(--text-headings-heading-xx-sm-line-height);
        letter-spacing: 1%;
        color: var(--colors-white, #FFFFFF);
        padding: 0px;
        margin: 0px;
    }

     .mobiledropdownmenu nav .elementor-nav-menu {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 24px;
     }

     .mobiledropdownmenu nav .elementor-nav-menu .sub-menu li.submenu-back a {
        padding: 0 !important;
     }

     header .mainHeaderTop .mobiledropdownmenu nav .elementor-nav-menu .sub-menu a.elementor-sub-item {
        font-weight: 500;
        font-size: var(--text-headings-heading-xx-sm-font-size);
        line-height: var(--text-headings-heading-xx-sm-line-height);
        letter-spacing: var(--text-headings-heading-xx-sm-letter-spacing);
        color: var(--colors-color-headings, #051E2E);
        padding: 0px;
        margin: 0px;
        background: transparent;
    }
	
	.mobiledropdownmenu nav .elementor-nav-menu .sub-menu li {
        position: relative !important;
        width: 100%;
        padding-bottom: 12px;
        border-bottom: 2px solid var(--colors-color-border-white, #E9EAEC);
        align-items: center;
        display: flex;
        justify-content: space-between;
        margin-bottom: 24px;
    }

    .mobiledropdownmenu nav .elementor-nav-menu li ul.sub-menu {
        display: block !important;
        left: 120% !important;
        background: #F9FAFB !important;
        z-index: 9;
    }

    .mobiledropdownmenu nav .elementor-nav-menu li.sm-open ul.sub-menu {
        left: 0%!important;
        position: relative;
    }

    body.admin-bar .mobiledropdownmenu nav .elementor-nav-menu .sub-menu li.submenu-back {
        top: -60px;
        left: unset;
        right: 7px;
    }

    .hillegers-card-hover-overlay .hillegers-card-hover-title img {
        width: 40px;
    }
	
	.mobiledropdownmenu nav .elementor-nav-menu .sub-menu li.submenu-back {
		position: absolute !important;
        top: -45px;
        left: unset;
        right: 7px;
        width: 40px;
        border: 0px none !important;
	}

    .mobiledropdownmenu nav .elementor-nav-menu .sub-menu li::after {
        content: '';
        background-image: url(https://dev4.aurorawebdesign.nl/wp-content/uploads/2026/03/Icon-bg-white-1.svg);
        background-repeat: no-repeat;
        background-size: contain;
        width: 30px;
        height: 30px;
        position: absolute;
        right: 0;
        top: -4px;
        bottom: 0;
    }
	
	.mobiledropdownmenu nav .elementor-nav-menu .sub-menu li.submenu-back:after,
	.mobiledropdownmenu .elementor-nav-menu .sub-arrow	{
		display: none !important;
	}
	
    /* Full mobile menu wrapper */
    .mobiledropdownmenu .elementor-nav-menu--dropdown {
        position: absolute !important;
        width: 100% !important;
        /* overflow: hidden; */
        background: var(--colors-color-page, #F9FAFB);
        margin: auto 0 !important;
        top: -100px !important;
        left: 120% !important;
        transition: all 0.5s ease-out;
    }

    .mobiledropdownmenu .menu-item-has-children a.has-submenu.highlighted ~ .elementor-nav-menu--dropdown,
    .mobiledropdownmenu nav .elementor-nav-menu .menu-item:hover ~ .elementor-nav-menu--dropdown, 
    .mobiledropdownmenu nav .elementor-nav-menu .menu-item.highlighted ~ .elementor-nav-menu--dropdown  {
        left: 0 !important;
    }

    /* Every menu item becomes positioning reference */
    .mobiledropdownmenu .elementor-nav-menu--dropdown > li,
    .mobiledropdownmenu .elementor-nav-menu--dropdown .menu-item-has-children {
        position: static !important;
    }

    /* Main first-level menu */
    .mobiledropdownmenu .elementor-nav-menu--dropdown > li > a {
        position: relative;
        z-index: 1;
    }

    /* Submenu overlays entire mobile menu */
    .mobiledropdownmenu .elementor-nav-menu--dropdown .sub-menu {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 80px 20px 30px !important;
        background: var(--colors-color-page, #F9FAFB) !important;
        z-index: 9999 !important;
        overflow-y: auto !important;

        /* hidden by default */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(100%);
        transition: transform 0.35s ease, opacity 0.35s ease;
    }

    /* When submenu is opened by Elementor/SmartMenus */
    .mobiledropdownmenu .elementor-nav-menu--dropdown .menu-item-has-children.sm-open > .sub-menu,
    .mobiledropdownmenu .elementor-nav-menu--dropdown .menu-item-has-children.focus > .sub-menu,
    .mobiledropdownmenu .elementor-nav-menu--dropdown .menu-item-has-children.elementor-active > .sub-menu,
    .mobiledropdownmenu .elementor-nav-menu--dropdown .menu-item-has-children.current-menu-parent > .sub-menu,
    .mobiledropdownmenu .elementor-nav-menu--dropdown .menu-item-has-children.current-menu-ancestor > .sub-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
        display: block !important;
    }

    /* submenu item rows */
    .mobiledropdownmenu .elementor-nav-menu--dropdown .sub-menu > li {
        display: block;
        width: 100%;
        border-bottom: 1px solid var(--colors-color-border-white, #E9EAEC);
        margin: 0;
    }

    .mobiledropdownmenu .elementor-nav-menu--dropdown .sub-menu > li > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 18px 0 !important;
    }

    /* remove Elementor default nested spacing */
    .mobiledropdownmenu .elementor-nav-menu--dropdown .sub-menu .elementor-item {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    nav.elementor-element.mm-screen > .elementor-element {
        gap: 0;
    }

    nav.elementor-element.mm-screen > .elementor-element .elementor-element.elementor-widget-divider {
        margin-bottom: 24px;
    }

    .elementor-52 .elementor-element .elementor-heading-title a, 
    .elementor-52 .mm-open-diensten span.elementor-heading-title,
    .elementor-52 .mm-open-producten span.elementor-heading-title {
        font-family: 'Erliana' !important;
        font-weight: 400 !important;
        font-size: 22px !important;
        line-height: 120% !important;
        letter-spacing: 5%;
        color: var(--colors-color-dark, #1D1B18) !important;
        width: 100%;
        white-space: pre-wrap;
        overflow: hidden;
        display: block;
        padding-right: 30px !important;
        width: 100%;
        float: left !important;
        text-transform: none !important;
    }
    .elementor-52 .elementor-element .elementor-heading-title a:after, 
    .elementor-52 .mm-open-diensten span.elementor-heading-title:after,
    .elementor-52 .mm-open-producten span.elementor-heading-title:after {
        content: '';
        position: absolute;
        right: 8px;
        width: 24px;
        transition: transform 0.4s ease;
        height: 24px;
        background: url(https://isolatiematrassen.nl/wp-content/uploads/2026/09/Arrow-Outward-1.svg);
        bottom: 18px;
        top: unset;
        bottom: calc(50% - 12px);
        background-repeat: no-repeat;
    }

    .elementor-52 .elementor-element .elementor-widget-heading:hover .elementor-heading-title a:after,
    .elementor-52 .mm-open-diensten:hover span.elementor-heading-title:after,
    .elementor-52 .mm-open-producten:hover span.elementor-heading-title:after {
        transform: rotate(45deg);
        transform-origin: center;
    }

    .elementor-52 .elementor-element .elementor-widget-heading:before {
        content: '';
        position: absolute;
        background: var(--colors-color-primary, #C7A566) !important;
        width: calc(100% - 24px);
        height: 1px;
        bottom: -1px;
        left: 12px;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.4s ease;
        opacity: 1 !important;
        z-index: 9;
    }

    .elementor-52 .elementor-element .elementor-widget-heading:hover:before {
        transform: scaleX(1);
        transform-origin: left;
    }

    body .elementor-52 .elementor-element.elementor-element-b122109 img,
    body .elementor-52 .elementor-element.elementor-element-076e1fb img {
        width: 138px;
        max-width: 138px !important;
        height: 60px;
        object-fit: contain;
    }

    body .elementor-52 .elementor-element.elementor-element-2852696 {
        position: absolute;
        top: 95px;
    }
}

/* ============================================================
    13. Small-screen responsive overrides
    ============================================================ */

@media (max-width: 767px) {

    .technischecarousal .elementor-swiper-button.elementor-swiper-button-prev,
    .technischecarousal .elementor-swiper-button.elementor-swiper-button-next {
        position: relative !important;
    }

    footer .footertopsec .heading h4, footer .footertopsec .heading h4 .word,
    footer .footertopsec .heading h4 span, footer .footertopsec .heading h4 span .word, footer .footertopsec .heading h4 div {
        font-size: 26px;
        line-height: 1.2;
    }

    footer .heading h5 {
        font-size: 22px;
        line-height: 1.2;
    }

    footer nav.elementor-nav-menu--main .elementor-nav-menu li.menu-item a.elementor-item {
        font-size: 18px;
        line-height: 1.2;
    }

    footer .elementor-element.elementor-widget.elementor-widget-text-editor, footer .elementor-element.elementor-widget.elementor-widget-text-editor * {
        font-size: 14px;
        line-height: 1.2;
        text-align: left;
    }
      
    .faqaccordians .e-n-accordion details .e-n-accordion-item-title-text {
        font-size: 18px;
        line-height: 1.2;
    }

    body header .mainHeaderTop.e-con > .e-con-inner {
        display: grid;
        grid-template-columns: 160px 56px !important;
        justify-content: space-between !important;
        gap: 5px;
        flex-wrap: nowrap !important;
    }

    footer .elementor-element.prefootersec {
        margin-top: 0;
        padding: 10px;
        max-width: calc(100% - 20px) !important;
    }

    body footer .prefooterright .elementor-widget-image img {
        height: 350px !important;
        object-fit: cover !important;
    }

    body footer .elementor-element.footertopsec {
        padding: 0 16px 32px 16px !important;
    }

    footer .elementor-element.footerbottomsec {
        padding-left: 16px !important;
        padding-right: 16px !important;
        text-align: center !important;
    }

    body footer .elementor-element.footerbottomsec .e-con-inner, 
    body footer .elementor-element.footerbottomsec .e-con-inner .elementor-element {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center !important;
        padding: 0 3px;
    }

    footer .elementor-element.footerbottomsec > .e-con-inner > .elementor-element a {
        text-align: center !important;
    }

    body header .mainHeaderTop.e-con > .e-con-inner > div.elementor-element {
        padding: 0;
    }

    body header .mainHeaderTop.e-con > .e-con-inner > div:first-child {
        order: 0 !important;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 12px;
    }

    footer .footertopsec > .e-con-inner {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sp-24, 24px);
    }

    footer .elementor-element.footertopsec {
        padding-top: 50px !important;
        margin-top: 40px;
    }
    body footer .elementor-element.footerbottomsec  > .e-con-inner {
        padding-top: 25px !important;
    }
    body footer .elementor-element.brdop.elementor-widget.elementor-widget-image img {
        height: 12px !important;
        object-fit: cover;
        position: relative;
        top: -7px;
    }
    body {
        overflow-x: hidden !important;
    }
    .custom-popup-form .row {
        flex-direction: column;
        gap: 0;
    }
    .custom-popup-form .row .field.half {
        width: 100%;
    }
    .elementor-popup-modal .dialog-widget-content {
        max-width: 90vw !important;
        padding: 10px !important;
    }
    .mainHeaderTop > .e-con-inner > .elementor-element:last-child > .elementor-element {
        align-items: end !important;
        justify-content: end;
    }
    .mainHeaderTop > .e-con-inner .elementor-element.elementor-widget-theme-site-logo.elementor-widget-image {
        display: flex !important;
        align-items: center !important;
        justify-content: center;
        margin: auto;
    }
    body header > .mainheadertop.e-con > .e-con-inner {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        justify-items: space-between;
        align-items: center;
    }
    body header.elementor.elementor-location-header .mainheadertop {
        padding: 0 10px;
    }
    body header.elementor.elementor-location-header .mainheadertop .rightbtnarrow .elementor-button-content-wrapper span.elementor-button-text {
        color: white !important;
    }
    body header.elementor.elementor-location-header .mainheadertop .rightbtnarrow .elementor-button-content-wrapper span.elementor-button-icon {
        max-width: 26px;
        max-height: 26px;
    }          
    body header.elementor.elementor-location-header .mainheadertop .rightbtnarrow .elementor-button-content-wrapper span.elementor-button-icon:after {
        max-width: 28px;
        max-height: 28px;
    } 
	
	body .e-con.e-flex.mainHeaderTop >.e-con-inner {
		gap: 10px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 26px !important;
	}

    body footer .footerCTAsec > .e-con-inner .elementor-widget-image img {
        object-position: left;
        height: 340px;
    }
    body footer .elementor-element.footerCTAsec {
        padding-top: 50px;
        padding-bottom: 50px;
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    body footer .footerCTAsec > .e-con-inner > .elementor-element:last-child {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 40px;
    }

    body footer > .footerCTAsec:first-child > .e-con-inner > .elementor-element:nth-child(2):after {
        bottom: 0;
        left: 0;
    }

    body .e-con > .e-con-inner, 
    body .e-con.e-flex>.e-con-inner {
        gap: 24px !important;
    }

    body .elementor-element.e-con-full.cntactsec.e-flex.e-con.e-child {
        gap: 32px;
    }

    body .elementor-element.e-con-full.cntactsec.e-flex.e-con.e-child > .elementor-element:first-child {
        min-height: 520px;
    }

    .headingh2class.e-heading-base {
        font-size: 40px !important;
        line-height: 48px !important;
    }

    h1.headingh1class.e-heading-base.e-default-h1 {
        font-size: 12px !important;
        line-height: 16px !important;
    }

    .elementor-element.elementor-widget.elementor-widget-text-editor, .elementor-element.elementor-widget.elementor-widget-text-editor * {
        font-size: 16px !important;
        line-height: 24px !important;
    }

    .elementor-element.herobottomleft {
        margin-top: 16px;
    }

    body .elementor-element.herobottomleft a.elementor-button.elementor-button-link.elementor-size-sm {
        width: 100%;
    }

    body .elementor-element.herobottomleft .btn-offerte-aanvragen .elementor-button span.elementor-button-text {
        width: 100%;
    }

    body .btn-offerte-aanvragen .elementor-button-icon  {
        min-width: 40px;
    }

    .elementor-element.rightheroclass {
        padding: 8px;
        border-radius: 16px;
    }

    body .elementor-element.rightheroclass .elementor-widget-n-carousel {
        max-width: 100% !important;
    }
    body .rightheroclass div.heroprogressbar {
        right: 16px;
        width: calc(100% - 32px);
    }
    .elementor-element.herobottomleft {
        padding-bottom: 28px !important;
    }

    body .scrollrevealtexth2.elementor-widget-heading .elementor-heading-title > .word:first-child {
        padding-left: 0 !important;
    }

    .scrollrevealtexth2.elementor-widget-heading .elementor-heading-title, 
    .scrollrevealtexth2.elementor-widget-heading .elementor-heading-title .word, 
    .scrollrevealtexth2 h2.elementor-heading-title, 
    .scrollrevealtexth2 h2.elementor-heading-title .word,
    body .opdrachtgeversbox .elementor-counter-number-wrapper {
        font-size: 28px !important;
        line-height: 36px !important;
    }

    h2.e-heading-base.e-default-h2, 
	h2.e-heading-base.e-default-h2 .line, 
	h2.e-heading-base.e-default-h2 .word, 
	h2.e-heading-base.e-default-h2 strong {
        font-size: 32px !important;
        line-height: 42px !important;
    }

    h2.e-heading-base.e-default-h2,
    h2.e-heading-base.e-default-h2 * {
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        -webkit-hyphens: auto !important;
        hyphens: auto !important;
        max-width: 100%;
    }

    h2.e-heading-base.e-default-h2 strong {
        font-weight: 500 !important;
    }

    body .iv-section {
        padding: 0 !important;
    }

    body .iv-section .iv-cards {
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 16px !important;
        overflow-y: hidden !important;
    }

    body .iv-card {
        min-width: 320px !important;
        padding: 16px !important;
        min-height: 215px !important;
    }

    body .iv-card::before {
        display: none !important;
    }

    .elementor-element.opdrachtgeversbox.e-flex.e-con.e-child:not(.nonorder) > .elementor-element:nth-child(2) {
        order: 1;
        flex-direction: column-reverse;
    }
    .elementor-element.opdrachtgeversbox.e-flex.e-con.e-child:not(.nonorder) > .elementor-element:first-child {
        min-height: 300px;
        padding: 16px;
    }
    body .opdrachtgeversbox .elementor-counter-title,
    body .statesimageblock h4.elementor-image-box-title,
    h4.elementor-heading-title.elementor-size-default,
    .opdrachtgeversbox .elementor-element.elementor-widget.elementor-widget-testimonial .elementor-testimonial-wrapper .elementor-testimonial-details .elementor-testimonial-name,
    .opdrachtgeversbox .elementor-element.elementor-widget.elementor-widget-testimonial .elementor-testimonial-content {
        font-size: 20px !important;
        line-height: 30px !important;
    }

    body .statesimageblock .elementor-image-box-wrapper figure.elementor-image-box-img {
        margin-left: 0 !important;
        margin-right: auto;
        margin-bottom: 24px !important;
    }

    .elementor-element.isolatiegridsec {
        overflow: auto;
        flex-direction: row !important;
        display: flex !important;
        margin-top: 40px !important;
    }

    .elementor-element.isolatiegridsec .elementor-element.isolatieclass {
        min-width: 320px;
        height: 240px;
        padding: 24px;
    }

    .elementor-element.isolatiegridsec .elementor-element.isolatieclass .elementor-image-box-wrapper {
        display: flex;
        justify-content: space-between;
        height: 100%;
    }

    body .isolateiesec::before {
        width: 544px;
        height: 512px;
        opacity: 0.6;
        background-size: contain;
    }

    body .isolateiesec .elementor-element.isolatieclass {
        background: var(--background-primary, #17130D) !important;
    }

    body .elementor-element.isolateiesec {
        position: relative;
        isolation: isolate;
        background-image: none !important;   /* hides the un-rotated original */
    }

    body .elementor-element.isolateiesec::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image: url("https://isolatiematrassen.nl/wp-content/uploads/2026/09/Frame-7.png");
        background-size: 333px 260px;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 1;
        pointer-events: none;
        width: 333px;
        height: 260px;
        right: 0;
        left: unset;
        top: 76px;
    }
    .elementor-element.isolatieclass .elementor-image-box-wrapper h3.elementor-image-box-title {
        font-size: 18px !important;
        line-height: 26px !important;
    }

    body .elementor-element.technischesec {
        position: relative;
        isolation: isolate;
        background-image: none !important;   /* hides the un-rotated original */
    }

    body .elementor-element.technischesec::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image: url("https://isolatiematrassen.nl/wp-content/uploads/2026/09/Ellipse-183-2.png");
        background-size: 273px 1175px;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 1;
        pointer-events: none;
        width: 273px;
        height: 1175px;
        right: 0;
        left: unset;
        opacity: 0.05;
    }

    body .elementor-element.isowaargridsec {
        flex-direction: row !important;
        margin-top: 40px !important;
        overflow: auto !important;
    }

    body .elementor-element.isowaargridsec .elementor-element.isowaargridsectop {
        display: flex !important;
        flex-direction: row;
    }

    body .elementor-element.isowaargridsec .elementor-element .waarkunnenclass {
        min-width: 320px;
        height: 247px;
        opacity: 1;
        gap: 32px;
        padding: var(--spacing-lg);
        background: var(--background-tertiary, #231D16);
    }

    .elementor-element.isowaargridsec .elementor-image-box-wrapper figure.elementor-image-box-img,
    .waromkiezenclass .elementor-image-box-wrapper figure.elementor-image-box-img {
        margin-left: 0 !important;
    }

    .scroll-mobile {
        flex-wrap: nowrap;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-right: 20px;            /* small peek so users see there is more */
    }
    .scroll-mobile .werkwijzeclass {
        flex: 0 0 260px;                /* fixed card width, never shrinks */
        min-width: 260px;
        scroll-snap-align: start;
    }
    .elementor-element.opdrachtgeversbox.nonorder > .elementor-element:last-child {
        flex-direction: column !important;
        display: flex !important;
        flex-wrap: nowrap;
    }
    .prefootersec .elementor-widget-button,
    body .prefootersec .btn-offerte-aanvragen .elementor-button-text,
    .prefootersec a.elementor-button.elementor-button-link.elementor-size-sm {
        width: 100% !important;
    }

    body footer .elementor-element.elementor-widget.elementor-widget-text-editor h3 {
        font-size: 32px !important;
        line-height: 42px !important;
    }
    body footer .footerfaqclass .elementor-element.elementor-widget.elementor-widget-text-editor,
    body footer .footerfaqclass .elementor-element.elementor-widget.elementor-widget-text-editor * {
        text-align: center !important;
    }
    footer .footerfaqclass > .e-con-inner {
        padding-bottom: 24px !important;
    }

    .iv-card-title {
        font-size: 20px !important;
        line-height: 30px !important;
    }

    body .elementor-element.technischesec .elementor-element.technischecarousal .swiper-pagination, 
    body .elementor-element.technischesec .elementor-element.technischecarousal .elementor-swiper-button {
        display: none;
    }

    body .rightheroclass .swiper-wrapper .elementor-element.elementor-widget.elementor-widget-text-editor {
        padding: 0 !important;
    }

    body .rightheroclass .swiper-wrapper .elementor-element.elementor-widget.elementor-widget-text-editor h6 {
        font-size: 28px !important;
        line-height: 36px !important;
        margin-bottom: 0 !important;
    }
    body .elementor-element.rightheroclass .elementor-widget-n-carousel {
        padding: 24px 8px 24px 8px !important;
    }
    body .rightheroclass .elementor-swiper-button.elementor-swiper-button-prev {
        left: 16px !important;
    }
    body .rightheroclass .elementor-swiper-button.elementor-swiper-button-next {
        left: 20px !important;
    }
}

/* ============================================================
    14. Full-width sliders and carousels
    ============================================================ */

.fullwidthspreadsec .e-con-inner, 
.fullwidthspreadsec .e-con-inner .elementor-element.elementor-widget.elementor-widget-shortcode, 
.fullwidthspreadsec .e-con-inner .elementor-element.elementor-widget.elementor-widget-shortcode .elementor-shortcode, 
.fullwidthspreadsec .e-con-inner .elementor-element.elementor-widget.elementor-widget-shortcode .elementor-shortcode .processlist-wrapper,
.fullwidthspreadsec .e-con-inner .elementor-element.elementor-widget.elementor-widget-shortcode .elementor-shortcode .processlist-wrapper .swiper,
.fullwidthspreadsec .e-con-inner .elementor-element.elementor-widget.elementor-widget-shortcode .elementor-shortcode .hillegers-carousel-wrapper,
.fullwidthspreadsec .e-con-inner .elementor-element.elementor-widget.elementor-widget-shortcode .elementor-shortcode .hillegers-carousel-wrapper .swiper,
.fullwidthspreadsec .e-con-inner .elementor-element.elementor-widget.elementor-widget-shortcode .elementor-shortcode .projecten-hero-wrap,
.fullwidthspreadsec .e-con-inner .elementor-element.elementor-widget.elementor-widget-shortcode .elementor-shortcode .projecten-hero-wrap .swiper,
.fullwidthspreadsec .e-con-inner .avlsiderimage,
.fullwidthspreadsec .e-con-inner .avlsiderimage .elementor-image-carousel-wrapper.swiper {

    overflow: visible !important;
}

body .totallyspreadsec.fullwidthspreadsec .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
}

body .totallyspreadsec.fullwidthspreadsec .e-con-inner .limitedwidthcontainer {
    max-width: 1375px !important;
    margin: 0 auto !important;
}

.fullwidthspreadsec .e-con-inner .avlsiderimage .elementor-image-carousel-wrapper.swiper .swiper-slide {
    max-width: 382px !important;
}

body .projectenclass.fullwidthspreadsec.e-con > .e-con-inner {
    max-width: 100% !important;
}

/* Projecten slider */
.projecten-hero-wrap {
    width: 100%;
    padding: 0 0 24px;
    color: var(--text-primary);
}

.projecten-hero-wrap .projecten-slider {
    width: 100%;
    overflow: visible;
}

.projecten-hero-wrap .swiper-wrapper {
    align-items: stretch;
}

.projecten-slide {
    display: grid !important;
    grid-template-columns: minmax(280px, 40%) minmax(0, 60%);
    width: min(1328px, 92vw);
    height: min(581px, 40.5vw);
    min-height: 360px;
    background: var(--background-primary);
    overflow: hidden;
}

.projecten-hero-wrap .projecten-slider .projecten-slide {
    box-sizing: border-box;
}

.projecten-slide__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-3xl);
    gap: 16px;
}

.projecten-slide__subtitle,
.projecten-slide__title,
.projecten-slide__tags,
.projecten-slide__description {
    margin: 0;
}

.projecten-slide__subtitle {
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.25;
    margin-bottom: 8px;
}

.projecten-slide__title {
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0%;
    color: var(--text-primary, #F3F1E7);
}

.projecten-slide__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
}

.projecten-slide__tag {
    border-radius: var(--radius-full);
    padding-top: var(--spacing-xs);
    padding-right: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    padding-left: var(--spacing-sm);
    gap: 8px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-secondary, #E2DEC9);
    background: var(--background-primary, #17130D);
    border: 1px solid var(--background-primary, #17130D);
}

.projecten-slide__description {
    margin-top: auto;
    padding-top: 28px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: var(--text-secondary, #E2DEC9);
}

.projecten-slide__description p {
    margin: 0;
}

.projecten-slide__image {
    height: 100%;
    min-height: 360px;
    margin: 0;
}

.projecten-slide__image img {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

.projecten-slider__button {
    position: absolute;
    z-index: 3;
    top: 50%;
    display: grid;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: var(--text-inverted-primary) !important;
    background: var(--background-inverted) !important;
    box-shadow: none !important;
    appearance: none;
    cursor: pointer;
    place-items: center;
    transform: translateY(-50%);
    line-height: 60px;
}

.projecten-slider__button--prev { left: 12px; }
.projecten-slider__button--next { right: 12px; }
.projecten-slider__button::before,
.projecten-slider__button::after {
    display: none !important;
}

.projecten-slider__button:hover,
.projecten-slider__button:focus,
.projecten-slider__button:active {
    color: var(--text-inverted-primary) !important;
    background: var(--background-inverted) !important;
    border: 0 !important;
    box-shadow: none !important;
}

.projecten-slider__button span {
    display: block;
    font-size: 17px;
    line-height: 1;
    font-family: Arial, sans-serif;
}

.projecten-hero-wrap.projecten-is-mobile {
    padding-bottom: 42px;
}

.projecten-hero-wrap.projecten-is-mobile .projecten-slide {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    height: auto;
    min-height: 0;
}

.projecten-hero-wrap.projecten-is-mobile .projecten-slide__content {
    min-height: 260px;
    padding: 16px 16px;
}

.projecten-hero-wrap.projecten-is-mobile .projecten-slide__subtitle { font-size: 9px; }
.projecten-hero-wrap.projecten-is-mobile .projecten-slide__title { 
    font-size: 20px; 
    line-height: 30px;
}
.projecten-hero-wrap.projecten-is-mobile .projecten-slide__tags { gap: 8px; margin-top: 8px; }
.projecten-hero-wrap.projecten-is-mobile .projecten-slide__tag { 
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-secondary, #E2DEC9);
    border-radius: var(--radius-full);
    gap: 8px;
    padding-top: var(--spacing-xs);
    padding-right: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    padding-left: var(--spacing-sm);
    border: 1px solid var(--background-primary, #17130D);
    background: var(--background-primary, #17130D);
}
.projecten-hero-wrap.projecten-is-mobile .projecten-slide__description { 
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0%;
    color: var(--text-secondary, #E2DEC9);
    padding-top: 14px; 
}

.projecten-hero-wrap.projecten-is-mobile .projecten-slide__image {
    min-height: 250px;
    height: 250px;
}

.projecten-hero-wrap.projecten-is-mobile .projecten-slider__button {
    top: auto;
    bottom: -64px;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    transform: none;
}

.projecten-hero-wrap.projecten-is-mobile .projecten-slider__button--prev { left: calc(50% - 50px); }
.projecten-hero-wrap.projecten-is-mobile .projecten-slider__button--next { right: calc(50% - 50px); }

/* ============================================================
    15. Footer profile details and file uploads
    ============================================================ */
.field.fileupload p {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.field.fileupload label {
    font-weight: 500;
    font-size: var(--text-body-body-md-font-size);
    line-height: var(--text-body-body-md-line-height);
    letter-spacing: var(--text-body-body-md-letter-spacing);
    vertical-align: middle;
    color: var(--colors-white, #FFFFFF);
    display: flex;
}

.field.fileupload .wpcf7-form-control-wrap {
    display: block;
}

.field.fileupload input[type="file"] {
    width: 100%;
    font-weight: 400;
    font-size: var(--text-body-body-md-font-size);
    line-height: var(--text-body-body-md-line-height);
    letter-spacing: var(--text-body-body-md-letter-spacing);
    vertical-align: middle;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    border: 0px none !important;
    padding: 0 !important;
    color: var(--colors-color-muted-text, #9AA3B2);
}

/* The "Bestand kiezen" button */
.field.fileupload input[type="file"]::file-selector-button,
.field.fileupload input[type="file"]::-webkit-file-upload-button {
    width: 160px;
    height: 47px;
    text-align: center;
    gap: 10px;
    opacity: 1;
    border-radius: var(--radius-rd-0, 0px);
    border-width: var(--border-br-1, 1px);
    padding-top: var(--spacing-sp-12, 12px);
    padding-right: var(--spacing-sp-20, 20px);
    padding-bottom: var(--spacing-sp-12, 12px);
    padding-left: var(--spacing-sp-20, 20px);
    font-weight: 400;
    font-size: var(--text-body-body-md-font-size);
    line-height: var(--text-body-body-md-line-height);
    letter-spacing: var(--text-body-body-md-letter-spacing);
    background: var(--colors-color-secondary-light, #FAE7D9);
    color: var(--colors-color-secondary, #FF7617);
    border: none;
    cursor: pointer;
    margin-right: 12px;
    transition: all 0.3s ease;
}

.field.fileupload input[type="file"]::file-selector-button:hover,
.field.fileupload input[type="file"]::-webkit-file-upload-button:hover {
    background: var(--colors-color-secondary, #FF7617);
    color: white;
}

footer .faqsubcontainer .rightbtnarrow2 .elementor-icon-box-wrapper {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 20px;
	text-align: left !important;
    flex-wrap: wrap;
}

footer .faqsubcontainer .rightbtnarrow2 .elementor-icon-box-icon {
	flex-shrink: 0;
	margin: 0 !important;
}

/* The new name + role block */
footer .faqsubcontainer .awd-profile-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
    max-width: calc(100% - 110px);
}

footer .faqsubcontainer .awd-profile-info .awd-profile-name {
	font-family: "Caveat", cursive;
	font-weight: 400;
	font-size: var(--text-headings-heading-sm-font-size);
	line-height: var(--text-headings-heading-sm-line-height);
	letter-spacing: 1%;
	vertical-align: middle;
	color: var(--colors-color-dark, #1D1B18);
	margin: 0;
}

footer .faqsubcontainer .awd-profile-info .awd-profile-role {
	font-family: "Caveat", cursive;
	font-weight: 400;
	font-size: var(--text-headings-heading-xx-sm-font-size);
	line-height: var(--text-headings-heading-xx-sm-line-height);
	letter-spacing: 1%;
	vertical-align: middle;
	margin: 0;
	color: var(--colors-color-muted-text, #808080);
}

.file-upload-wrap {
    padding: 0;
    width: 100%;
}

.file-upload-wrap .upload-label {
    display: block;
	font-weight: 500;
	font-size: var(--text-body-body-md-font-size);
	line-height: var(--text-body-body-md-line-height);
	letter-spacing: var(--text-body-body-md-letter-spacing);
    margin-bottom: 14px;
	color: var(--colors-color-dark, #1D1B18);
}

.file-upload-wrap input[type="file"] {
    font-family: inherit;
    font-size: 15px;
    color: #a3a3a3;
	padding: 0 !important;
	background: transparent !important;
    border: 0px none !important;
    min-height: auto;
}

/* Modern standard (Chrome, Edge, Safari 16+, Firefox 82+) */
.file-upload-wrap input[type="file"]::file-selector-button {
    background-color: #F4F1EB;
    color: #C7A566;
    border: 1px solid #D8D0C4;
    border-radius: 4px;
    padding: 10px 22px;
    margin-right: 15px;
    font-size: 15px;
    font-weight: 500;
	font-weight: 400;
	font-size: var(--text-body-body-md-font-size);
	line-height: var(--text-body-body-md-line-height);
	letter-spacing: var(--text-body-body-md-letter-spacing);
	vertical-align: middle;
    cursor: pointer;
    transition: all 0.2s ease;
}

.file-upload-wrap input[type="file"]::file-selector-button:hover {
    background-color: #c9a35d;
    color: #ffffff;
}

/* Older WebKit fallback (Safari <16, older Chrome) */
.file-upload-wrap input[type="file"]::-webkit-file-upload-button {
    color: #999999;
	font-weight: 400;
	font-size: var(--text-body-body-md-font-size);
	line-height: var(--text-body-body-md-line-height);
	letter-spacing: var(--text-body-body-md-letter-spacing);
	vertical-align: middle;
    margin-right: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.file-upload-wrap input[type="file"]::-webkit-file-upload-button:hover {
    background-color: #c9a35d;
    color: #ffffff;
}

/* ============================================================
   16. Design token reference table
   ============================================================ */

.design-token-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.design-token-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    background: var(--background-inverted);
    color: var(--text-inverted-primary);
    font-family: var(--body-font);
    font-size: var(--text-body-body-md-font-size);
    line-height: var(--text-body-body-md-line-height);
    text-align: left;
}

.design-token-table caption {
    padding: var(--spacing-sp-16);
    background: var(--background-tertiary);
    color: var(--text-primary);
    font-size: var(--text-headings-heading-sm-font-size);
    font-weight: var(--font-weight-heading-5-desktop);
    text-align: left;
}

.design-token-table th,
.design-token-table td {
    padding: var(--spacing-sp-12) var(--spacing-sp-16);
    border-bottom: var(--border-br-1) solid var(--border-primary);
    vertical-align: middle;
}

.design-token-table th {
    background: var(--background-accent-secondary);
    color: var(--text-inverted-primary);
    font-size: var(--text-body-body-medium-font-size);
    font-weight: var(--font-weight-label-1);
    white-space: nowrap;
}

.design-token-table td:first-child {
    color: var(--text-accent-alt);
    font-weight: var(--font-weight-label-1);
}

.design-token-table tr:last-child td {
    border-bottom: 0;
}

.design-token-table tr:hover td {
    background: var(--background-state-layer-dark-hover);
}

.design-token-swatch {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: var(--spacing-sp-8);
    border: var(--border-br-1) solid var(--border-primary);
    border-radius: var(--radius-rd-0);
    vertical-align: middle;
}

/* Mobile token values from the typography sheet */
@media (max-width: 767px) {
    :root {
        --text-display-display-x-lg-font-size: 40px;
        --text-display-display-x-md-font-size: 32px;
        --text-display-display-sm-font-size: 32px;
        --text-headings-heading-md-font-size: 28px;
        --text-headings-heading-md-sm-font-size: 24px;
        --text-headings-heading-sm-font-size: 20px;
        --text-headings-heading-xx-sm-font-size: 14px;
        --text-body-body-lg-font-size: 16px;
        --text-body-body-md-font-size: 14px;
        --text-body-body-medium-font-size: 12px;
    }

    .design-token-table {
        min-width: 560px;
        font-size: var(--text-body-body-md-font-size);
    }

    .design-token-table caption {
        padding: var(--spacing-sp-12);
        font-size: var(--text-headings-heading-sm-font-size);
    }

    .design-token-table th,
    .design-token-table td {
        padding: var(--spacing-sp-8) var(--spacing-sp-12);
    }
}