.elementor-17 .elementor-element.elementor-element-e3a4731 .e-off-canvas__content{background-color:#02010100;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0);}.elementor-17 .elementor-element.elementor-element-e3a4731{--e-off-canvas-height:100vh;--e-off-canvas-content-overflow:auto;--e-off-canvas-overlay-opacity:0;}.elementor-17 .elementor-element.elementor-element-ae177b3{--display:flex;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-17 .elementor-element.elementor-element-be1cca2 .elementor-nav-menu--dropdown a, .elementor-17 .elementor-element.elementor-element-be1cca2 .elementor-menu-toggle{color:#FFFFFF;fill:#FFFFFF;}.elementor-17 .elementor-element.elementor-element-be1cca2 .elementor-nav-menu--dropdown{background-color:#02010100;}.elementor-17 .elementor-element.elementor-element-be1cca2 .elementor-nav-menu--dropdown a:hover,
					.elementor-17 .elementor-element.elementor-element-be1cca2 .elementor-nav-menu--dropdown a:focus,
					.elementor-17 .elementor-element.elementor-element-be1cca2 .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-17 .elementor-element.elementor-element-be1cca2 .elementor-nav-menu--dropdown a.highlighted,
					.elementor-17 .elementor-element.elementor-element-be1cca2 .elementor-menu-toggle:hover,
					.elementor-17 .elementor-element.elementor-element-be1cca2 .elementor-menu-toggle:focus{color:#FFFFFF;}.elementor-17 .elementor-element.elementor-element-be1cca2 .elementor-nav-menu--dropdown a:hover,
					.elementor-17 .elementor-element.elementor-element-be1cca2 .elementor-nav-menu--dropdown a:focus,
					.elementor-17 .elementor-element.elementor-element-be1cca2 .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-17 .elementor-element.elementor-element-be1cca2 .elementor-nav-menu--dropdown a.highlighted{background-color:#02010100;}.elementor-17 .elementor-element.elementor-element-be1cca2 .elementor-nav-menu--dropdown a.elementor-item-active{color:#FFFFFF;background-color:#02010100;}.elementor-17 .elementor-element.elementor-element-be1cca2 .elementor-nav-menu--dropdown .elementor-item, .elementor-17 .elementor-element.elementor-element-be1cca2 .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:"Raleway", Sans-serif;font-size:16px;font-weight:700;}.elementor-17 .elementor-element.elementor-element-be1cca2 .elementor-nav-menu--dropdown li:not(:last-child){border-style:none;}.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-menu-toggle{margin:0 auto;}.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-nav-menu .elementor-item{font-family:"Raleway", Sans-serif;font-size:16px;font-weight:600;line-height:145%;}.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-nav-menu--main .elementor-item:hover,
					.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-text );}.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:#0000000D;}.elementor-17 .elementor-element.elementor-element-af55c10 .e--pointer-framed .elementor-item:before,
					.elementor-17 .elementor-element.elementor-element-af55c10 .e--pointer-framed .elementor-item:after{border-color:#0000000D;}.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:var( --e-global-color-text );}.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item.elementor-item-active:before,
					.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item.elementor-item-active:after{background-color:#0000000D;}.elementor-17 .elementor-element.elementor-element-af55c10 .e--pointer-framed .elementor-item.elementor-item-active:before,
					.elementor-17 .elementor-element.elementor-element-af55c10 .e--pointer-framed .elementor-item.elementor-item-active:after{border-color:#0000000D;}.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-nav-menu--main .elementor-item{padding-left:10px;padding-right:10px;padding-top:5px;padding-bottom:5px;}.elementor-17 .elementor-element.elementor-element-af55c10{--e-nav-menu-horizontal-menu-item-margin:calc( 25px / 2 );}.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:25px;}.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-item:before{border-radius:5px;}.elementor-17 .elementor-element.elementor-element-af55c10 .e--animation-shutter-in-horizontal .elementor-item:before{border-radius:5px 5px 0 0;}.elementor-17 .elementor-element.elementor-element-af55c10 .e--animation-shutter-in-horizontal .elementor-item:after{border-radius:0 0 5px 5px;}.elementor-17 .elementor-element.elementor-element-af55c10 .e--animation-shutter-in-vertical .elementor-item:before{border-radius:0 5px 5px 0;}.elementor-17 .elementor-element.elementor-element-af55c10 .e--animation-shutter-in-vertical .elementor-item:after{border-radius:5px 0 0 5px;}.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-nav-menu--dropdown a, .elementor-17 .elementor-element.elementor-element-af55c10 .elementor-menu-toggle{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-nav-menu--dropdown a:hover,
					.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-nav-menu--dropdown a:focus,
					.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-nav-menu--dropdown a.highlighted,
					.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-menu-toggle:hover,
					.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-menu-toggle:focus{color:var( --e-global-color-text );}.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-nav-menu--dropdown a.elementor-item-active{color:var( --e-global-color-text );}.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-nav-menu--dropdown{border-radius:5px 5px 5px 5px;}.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-nav-menu--dropdown li:first-child a{border-top-left-radius:5px;border-top-right-radius:5px;}.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-nav-menu--dropdown li:last-child a{border-bottom-right-radius:5px;border-bottom-left-radius:5px;}.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-nav-menu--main .elementor-nav-menu--dropdown, .elementor-17 .elementor-element.elementor-element-af55c10 .elementor-nav-menu__container.elementor-nav-menu--dropdown{box-shadow:0px 5px 30px 0px rgba(0, 0, 0, 0.15);}.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-nav-menu--dropdown a{padding-left:10px;padding-right:10px;padding-top:5px;padding-bottom:5px;}.elementor-17 .elementor-element.elementor-element-af55c10 .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-17 .elementor-element.elementor-element-af55c10 .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:10px !important;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-size:var( --e-global-typography-accent-font-size );}}@media(max-width:767px){.elementor-17 .elementor-element.elementor-element-e3a4731{--e-off-canvas-justify-content:center;--e-off-canvas-align-items:flex-start;--e-off-canvas-height:fit-content;--e-off-canvas-content-overflow:initial;}.elementor-17 .elementor-element.elementor-element-ae177b3:not(.elementor-motion-effects-element-type-background), .elementor-17 .elementor-element.elementor-element-ae177b3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://solos-offgrid.nl/wp-content/uploads/2026/06/Rectangle-131-1.svg");background-position:top center;background-repeat:no-repeat;background-size:cover;}.elementor-17 .elementor-element.elementor-element-ae177b3{--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:flex-start;--gap:15px 10px;--row-gap:15px;--column-gap:10px;--border-radius:0px 0px 35px 35px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-size:var( --e-global-typography-accent-font-size );}.elementor-17 .elementor-element.elementor-element-be1cca2{width:100%;max-width:100%;padding:70px 0px 035px 0px;}.elementor-17 .elementor-element.elementor-element-be1cca2 .elementor-nav-menu--dropdown .elementor-item, .elementor-17 .elementor-element.elementor-element-be1cca2 .elementor-nav-menu--dropdown  .elementor-sub-item{font-size:25px;}.elementor-17 .elementor-element.elementor-element-be1cca2 .elementor-nav-menu--dropdown a{padding-left:0px;padding-right:0px;padding-top:15px;padding-bottom:15px;}.elementor-17 .elementor-element.elementor-element-be1cca2 .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-17 .elementor-element.elementor-element-be1cca2 .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:0px !important;}}/* Start custom CSS for nav-menu, class: .elementor-element-be1cca2 *//* Menu links voorbereiden */
.elementor-element-be1cca2 #menu-2-be1cca2 a.elementor-item,
.elementor-element-be1cca2 #menu-2-be1cca2 a.elementor-sub-item {
    position: relative;
    display: flex;
    align-items: center;
    overflow: visible;
}

/* Groen streepje helemaal tegen de linkerkant van de off-canvas */
.elementor-element-be1cca2 #menu-2-be1cca2 a.elementor-item::before,
.elementor-element-be1cca2 #menu-2-be1cca2 a.elementor-sub-item::before {
    content: "";
    position: absolute;
    left: -30px; /* compenseert de 20px padding van de container */
    top: 50%;
    width: 22px;
    height: 4px;
    background: linear-gradient(94deg, #fff 0%, #96CF24 100%);
    border-radius: 999px;
    opacity: 0;
    transform: translateX(-24px) translateY(-50%) scaleX(0);
    transform-origin: left center;
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.25s ease;
    pointer-events: none;
}

/* Hover + actief item */
.elementor-element-be1cca2 #menu-2-be1cca2 a.elementor-item:hover::before,
.elementor-element-be1cca2 #menu-2-be1cca2 a.elementor-sub-item:hover::before,
.elementor-element-be1cca2 #menu-2-be1cca2 a.elementor-item:focus::before,
.elementor-element-be1cca2 #menu-2-be1cca2 a.elementor-sub-item:focus::before,
.elementor-element-be1cca2 #menu-2-be1cca2 a.elementor-item-active::before,
.elementor-element-be1cca2 #menu-2-be1cca2 li.current-menu-item > a::before,
.elementor-element-be1cca2 #menu-2-be1cca2 li.current_page_item > a::before {
    opacity: 1;
    transform: translateX(0) translateY(-50%) scaleX(1);
}

/* Zorg dat het streepje niet wordt afgeknipt */
.elementor-element-be1cca2,
.elementor-element-be1cca2 #menu-2-be1cca2,
.elementor-element-be1cca2 .elementor-nav-menu,
.elementor-element-be1cca2 .elementor-nav-menu--dropdown,
.elementor-element-be1cca2 .elementor-nav-menu__container,
.elementor-element-be1cca2 nav.elementor-nav-menu--dropdown {
    overflow: visible !important;
}

/* ================================
   Off-canvas menu intro
   Alleen triggeren wanneer off-canvas open is
================================ */

/* Geen animatie standaard */
.elementor-element-be1cca2 #menu-2-be1cca2 a.elementor-item,
.elementor-element-be1cca2 #menu-2-be1cca2 a.elementor-sub-item {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
}

/* Trigger pas wanneer Elementor off-canvas/dialog zichtbaar is */
.elementor-popup-modal[style*="display: flex"] .elementor-element-be1cca2 #menu-2-be1cca2 a.elementor-item,
.elementor-popup-modal[style*="display: flex"] .elementor-element-be1cca2 #menu-2-be1cca2 a.elementor-sub-item,
.dialog-widget[aria-hidden="false"] .elementor-element-be1cca2 #menu-2-be1cca2 a.elementor-item,
.dialog-widget[aria-hidden="false"] .elementor-element-be1cca2 #menu-2-be1cca2 a.elementor-sub-item,
.e-off-canvas[aria-hidden="false"] .elementor-element-be1cca2 #menu-2-be1cca2 a.elementor-item,
.e-off-canvas[aria-hidden="false"] .elementor-element-be1cca2 #menu-2-be1cca2 a.elementor-sub-item,
.e-off-canvas.elementor-active .elementor-element-be1cca2 #menu-2-be1cca2 a.elementor-item,
.e-off-canvas.elementor-active .elementor-element-be1cca2 #menu-2-be1cca2 a.elementor-sub-item {
    animation: solosMenuItemIntro 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Hoofdmenu stagger */
.elementor-popup-modal[style*="display: flex"] .elementor-element-be1cca2 #menu-2-be1cca2 > li:nth-child(1) > a,
.dialog-widget[aria-hidden="false"] .elementor-element-be1cca2 #menu-2-be1cca2 > li:nth-child(1) > a,
.e-off-canvas[aria-hidden="false"] .elementor-element-be1cca2 #menu-2-be1cca2 > li:nth-child(1) > a,
.e-off-canvas.elementor-active .elementor-element-be1cca2 #menu-2-be1cca2 > li:nth-child(1) > a {
    animation-delay: 0.10s;
}

.elementor-popup-modal[style*="display: flex"] .elementor-element-be1cca2 #menu-2-be1cca2 > li:nth-child(2) > a,
.dialog-widget[aria-hidden="false"] .elementor-element-be1cca2 #menu-2-be1cca2 > li:nth-child(2) > a,
.e-off-canvas[aria-hidden="false"] .elementor-element-be1cca2 #menu-2-be1cca2 > li:nth-child(2) > a,
.e-off-canvas.elementor-active .elementor-element-be1cca2 #menu-2-be1cca2 > li:nth-child(2) > a {
    animation-delay: 0.17s;
}

.elementor-popup-modal[style*="display: flex"] .elementor-element-be1cca2 #menu-2-be1cca2 > li:nth-child(3) > a,
.dialog-widget[aria-hidden="false"] .elementor-element-be1cca2 #menu-2-be1cca2 > li:nth-child(3) > a,
.e-off-canvas[aria-hidden="false"] .elementor-element-be1cca2 #menu-2-be1cca2 > li:nth-child(3) > a,
.e-off-canvas.elementor-active .elementor-element-be1cca2 #menu-2-be1cca2 > li:nth-child(3) > a {
    animation-delay: 0.24s;
}

.elementor-popup-modal[style*="display: flex"] .elementor-element-be1cca2 #menu-2-be1cca2 > li:nth-child(4) > a,
.dialog-widget[aria-hidden="false"] .elementor-element-be1cca2 #menu-2-be1cca2 > li:nth-child(4) > a,
.e-off-canvas[aria-hidden="false"] .elementor-element-be1cca2 #menu-2-be1cca2 > li:nth-child(4) > a,
.e-off-canvas.elementor-active .elementor-element-be1cca2 #menu-2-be1cca2 > li:nth-child(4) > a {
    animation-delay: 0.31s;
}

.elementor-popup-modal[style*="display: flex"] .elementor-element-be1cca2 #menu-2-be1cca2 > li:nth-child(5) > a,
.dialog-widget[aria-hidden="false"] .elementor-element-be1cca2 #menu-2-be1cca2 > li:nth-child(5) > a,
.e-off-canvas[aria-hidden="false"] .elementor-element-be1cca2 #menu-2-be1cca2 > li:nth-child(5) > a,
.e-off-canvas.elementor-active .elementor-element-be1cca2 #menu-2-be1cca2 > li:nth-child(5) > a {
    animation-delay: 0.38s;
}

/* Submenu-items */
.elementor-popup-modal[style*="display: flex"] .elementor-element-be1cca2 #menu-2-be1cca2 .sub-menu li:nth-child(1) > a,
.dialog-widget[aria-hidden="false"] .elementor-element-be1cca2 #menu-2-be1cca2 .sub-menu li:nth-child(1) > a,
.e-off-canvas[aria-hidden="false"] .elementor-element-be1cca2 #menu-2-be1cca2 .sub-menu li:nth-child(1) > a,
.e-off-canvas.elementor-active .elementor-element-be1cca2 #menu-2-be1cca2 .sub-menu li:nth-child(1) > a {
    animation-delay: 0.30s;
}

.elementor-popup-modal[style*="display: flex"] .elementor-element-be1cca2 #menu-2-be1cca2 .sub-menu li:nth-child(2) > a,
.dialog-widget[aria-hidden="false"] .elementor-element-be1cca2 #menu-2-be1cca2 .sub-menu li:nth-child(2) > a,
.e-off-canvas[aria-hidden="false"] .elementor-element-be1cca2 #menu-2-be1cca2 .sub-menu li:nth-child(2) > a,
.e-off-canvas.elementor-active .elementor-element-be1cca2 #menu-2-be1cca2 .sub-menu li:nth-child(2) > a {
    animation-delay: 0.36s;
}

.elementor-popup-modal[style*="display: flex"] .elementor-element-be1cca2 #menu-2-be1cca2 .sub-menu li:nth-child(3) > a,
.dialog-widget[aria-hidden="false"] .elementor-element-be1cca2 #menu-2-be1cca2 .sub-menu li:nth-child(3) > a,
.e-off-canvas[aria-hidden="false"] .elementor-element-be1cca2 #menu-2-be1cca2 .sub-menu li:nth-child(3) > a,
.e-off-canvas.elementor-active .elementor-element-be1cca2 #menu-2-be1cca2 .sub-menu li:nth-child(3) > a {
    animation-delay: 0.42s;
}

.elementor-popup-modal[style*="display: flex"] .elementor-element-be1cca2 #menu-2-be1cca2 .sub-menu li:nth-child(4) > a,
.dialog-widget[aria-hidden="false"] .elementor-element-be1cca2 #menu-2-be1cca2 .sub-menu li:nth-child(4) > a,
.e-off-canvas[aria-hidden="false"] .elementor-element-be1cca2 #menu-2-be1cca2 .sub-menu li:nth-child(4) > a,
.e-off-canvas.elementor-active .elementor-element-be1cca2 #menu-2-be1cca2 .sub-menu li:nth-child(4) > a {
    animation-delay: 0.48s;
}

.elementor-popup-modal[style*="display: flex"] .elementor-element-be1cca2 #menu-2-be1cca2 .sub-menu li:nth-child(5) > a,
.dialog-widget[aria-hidden="false"] .elementor-element-be1cca2 #menu-2-be1cca2 .sub-menu li:nth-child(5) > a,
.e-off-canvas[aria-hidden="false"] .elementor-element-be1cca2 #menu-2-be1cca2 .sub-menu li:nth-child(5) > a,
.e-off-canvas.elementor-active .elementor-element-be1cca2 #menu-2-be1cca2 .sub-menu li:nth-child(5) > a {
    animation-delay: 0.54s;
}

@keyframes solosMenuItemIntro {
    0% {
        opacity: 0;
        transform: translateX(-22px) translateY(10px);
        filter: blur(5px);
        text-shadow: 0 0 18px rgba(255, 255, 255, 0.10);
    }

    100% {
        opacity: 1;
        transform: translateX(0) translateY(0);
        filter: blur(0);
        text-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .elementor-element-be1cca2 #menu-2-be1cca2 a.elementor-item,
    .elementor-element-be1cca2 #menu-2-be1cca2 a.elementor-sub-item {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for nav-menu, class: .elementor-element-af55c10 *//* =========================================================
   Elementor nav-menu customization
   Scope: widget af55c10
   ========================================================= */

.elementor-element-af55c10 {
  --solos-indicator-url: url("https://solos-offgrid.nl/wp-content/uploads/2026/06/Rectangle-123-1.svg");
  --solos-arrow-url: url("https://solos-offgrid.nl/wp-content/uploads/2026/06/keyboard_arrow_down_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24-2-1.svg");
}


/* =========================================================
   1. Top-level menu items
   Shutter background + SVG indicator
   ========================================================= */

/* Parent li zichtbaar houden zodat indicator niet wordt afgesneden */
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li {
  overflow: visible !important;
}

/* Top-level links voorbereiden */
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li > a.elementor-item {
  position: relative !important;
  overflow: visible !important;
  z-index: 1;
  isolation: isolate;
  background: transparent !important;
}

/* Elementor standaard pointer-background neutraliseren */
.elementor-element-af55c10
.elementor-nav-menu--main.e--pointer-background
.elementor-nav-menu > li > a.elementor-item::before,
.elementor-element-af55c10
.elementor-nav-menu--main.e--pointer-background
.elementor-nav-menu > li > a.elementor-item::after {
  background: none !important;
}

/* Top-level shutter background */
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li > a.elementor-item::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  z-index: 0 !important;
  display: block !important;

  background-color: #0000000D !important;

  transform: scaleX(0) !important;
  transform-origin: center center !important;
  transition: transform 0.3s ease !important;

  border-radius: inherit;
  pointer-events: none !important;
}

/* Top-level shutter zichtbaar op hover / active */
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li > a.elementor-item:hover::before,
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li > a.elementor-item:focus::before,
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li > a.elementor-item.elementor-item-active::before,
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li.current-menu-item > a.elementor-item::before,
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li.current-menu-ancestor > a.elementor-item::before,
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li.current-menu-parent > a.elementor-item::before {
  transform: scaleX(1) !important;
}

/* SVG indicator onder top-level items */
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li > a.elementor-item::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -5px !important;

  width: 100% !important;
  max-width: 52px !important;
  height: 8px !important;

  transform: translateX(-50%) scaleX(0) !important;
  transform-origin: center center !important;

  background-image: var(--solos-indicator-url) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;

  opacity: 0;
  pointer-events: none !important;
  transition: transform 0.25s ease, opacity 0.25s ease !important;
  z-index: 2 !important;
}

/* SVG indicator zichtbaar op hover / active */
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li > a.elementor-item:hover::after,
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li > a.elementor-item:focus::after,
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li > a.elementor-item.elementor-item-active::after,
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li.current-menu-item > a.elementor-item::after,
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li.current-menu-ancestor > a.elementor-item::after,
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li.current-menu-parent > a.elementor-item::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1) !important;
}

/* Geen SVG indicator op dropdown-items
   Let op: ::before blijft beschikbaar voor shutter */
.elementor-element-af55c10
.elementor-nav-menu--main
.sub-menu a.elementor-sub-item::after,
.elementor-element-af55c10
.elementor-nav-menu--dropdown
.sub-menu a.elementor-sub-item::after {
  content: none !important;
  display: none !important;
}


/* =========================================================
   2. Dropdown styling
   Background blur
   ========================================================= */

.elementor-element-af55c10
.elementor-nav-menu--main
ul.sub-menu.elementor-nav-menu--dropdown,
.elementor-element-af55c10
nav.elementor-nav-menu--dropdown
ul.sub-menu.elementor-nav-menu--dropdown {
    background: #FFFFFFBF;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);

}


/* =========================================================
   3. Dropdown submenu items
   Shutter out horizontally effect
   ========================================================= */

/* Dropdown links voorbereiden op shutter animatie */
.elementor-element-af55c10
.elementor-nav-menu--main
.sub-menu a.elementor-sub-item,
.elementor-element-af55c10
nav.elementor-nav-menu--dropdown
.sub-menu a.elementor-sub-item {
  position: relative !important;
  z-index: 1;
  isolation: isolate;
  overflow: hidden !important;
  border-radius: 5px;
  background: transparent !important;
  transition: color 0.25s ease;
}

/* Elementor hover background uitzetten zodat alleen shutter zichtbaar is */
.elementor-element-af55c10
.elementor-nav-menu--main
.sub-menu a.elementor-sub-item:hover,
.elementor-element-af55c10
.elementor-nav-menu--main
.sub-menu a.elementor-sub-item:focus,
.elementor-element-af55c10
.elementor-nav-menu--main
.sub-menu a.elementor-sub-item.elementor-item-active,
.elementor-element-af55c10
nav.elementor-nav-menu--dropdown
.sub-menu a.elementor-sub-item:hover,
.elementor-element-af55c10
nav.elementor-nav-menu--dropdown
.sub-menu a.elementor-sub-item:focus,
.elementor-element-af55c10
nav.elementor-nav-menu--dropdown
.sub-menu a.elementor-sub-item.elementor-item-active {
  background: transparent !important;
}

/* Dropdown shutter-laag */
.elementor-element-af55c10
.elementor-nav-menu--main
.sub-menu a.elementor-sub-item::before,
.elementor-element-af55c10
nav.elementor-nav-menu--dropdown
.sub-menu a.elementor-sub-item::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;

  background-color: #0000000D !important;

  transform: scaleX(0) !important;
  transform-origin: center center !important;
  transition: transform 0.3s ease !important;

  border-radius: inherit;
  pointer-events: none !important;
}

/* Dropdown shutter zichtbaar op hover / active */
.elementor-element-af55c10
.elementor-nav-menu--main
.sub-menu a.elementor-sub-item:hover::before,
.elementor-element-af55c10
.elementor-nav-menu--main
.sub-menu a.elementor-sub-item:focus::before,
.elementor-element-af55c10
.elementor-nav-menu--main
.sub-menu a.elementor-sub-item.elementor-item-active::before,
.elementor-element-af55c10
nav.elementor-nav-menu--dropdown
.sub-menu a.elementor-sub-item:hover::before,
.elementor-element-af55c10
nav.elementor-nav-menu--dropdown
.sub-menu a.elementor-sub-item:focus::before,
.elementor-element-af55c10
nav.elementor-nav-menu--dropdown
.sub-menu a.elementor-sub-item.elementor-item-active::before {
  transform: scaleX(1) !important;
}

/* Zorg dat Elementor geen ongewenste borders/backgrounds op subitems forceert */
.elementor-element-af55c10
.sub-menu .elementor-sub-item {
  border-left: 0 !important;
}


/* =========================================================
   4. Dropdown arrow icon vervangen
   CSS fallback + JS img support
   ========================================================= */

/* =========================================================
   Dropdown arrow - vaste positie voor wit én zwart
   ========================================================= */

/* Fallback arrow als JS nog niet actief is */
.elementor-element-af55c10 .sub-arrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: var(--solos-arrow-url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  transition: transform 250ms ease;
}

/* Zodra JS fade-arrow actief is: fallback verbergen */
.elementor-element-af55c10 .sub-arrow[data-solos-arrow-fade-ready="true"]::before,
.elementor-element-af55c10 .sub-arrow[data-solos-arrow-replaced="true"]::before {
  display: none !important;
  content: none !important;
}

/* Elementor sub-arrow zelf als vaste box */
.elementor-element-af55c10 .sub-arrow {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  margin-left: 6px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* Wrapper voor twee pijltjes */
.elementor-element-af55c10 .solos-sub-arrow-fade-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  line-height: 1 !important;
}

.elementor-element-af55c10 .solos-sub-arrow-fade-wrap .solos-submenu-arrow-icon {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  pointer-events: none !important;
  object-fit: contain !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;
  transition:
    opacity 500ms ease !important;
}

/* Normale zwarte pijl */
.elementor-element-af55c10 .solos-sub-arrow-fade-wrap .solos-arrow-default {
  opacity: 1;
}

/* Witte/switch pijl */
.elementor-element-af55c10 .solos-sub-arrow-fade-wrap .solos-arrow-switch {
  opacity: 0;
}

/* In zwarte header-state: fade naar switch pijl */
body.vm-header-switched .elementor-element-af55c10 .solos-sub-arrow-fade-wrap .solos-arrow-default {
  opacity: 0;
}

body.vm-header-switched .elementor-element-af55c10 .solos-sub-arrow-fade-wrap .solos-arrow-switch {
  opacity: 1;
}

/* Rotatie behouden zonder positie te verliezen */
.elementor-element-af55c10 a.has-submenu[aria-expanded="true"] .sub-arrow::before {
  transform: rotate(180deg);
}

.elementor-element-af55c10 .solos-sub-arrow-fade-wrap {
  transition: transform 250ms ease !important;
  transform-origin: center center !important;
}

.elementor-element-af55c10 a.has-submenu[aria-expanded="true"] .solos-sub-arrow-fade-wrap {
  transform: rotate(180deg);
}


/* =========================================================
   5. Mobiel dropdown-menu basiscompatibiliteit
   ========================================================= */

/* Hoofditems in mobiele dropdown krijgen géén SVG indicator onder de tekst */
.elementor-element-af55c10
nav.elementor-nav-menu--dropdown
> ul > li > a.elementor-item::after {
  content: none !important;
  display: none !important;
}

/* Mobiele dropdown container mag ook blur hebben */
.elementor-element-af55c10
nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* =========================================================
   FIX: top-level shutter zonder ::before conflict
   Werkt op Home, Diensten, Het team, Kennisbank, Contact
   ========================================================= */

/* Zet oude top-level pseudo shutter uit */
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li > a.elementor-item::before {
  content: none !important;
  display: none !important;
}

/* Top-level menu items krijgen shutter via background-size */
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li > a.elementor-item {
  position: relative !important;
  overflow: visible !important;

  background-image: linear-gradient(
    #0000000D,
    #0000000D
  ) !important;

  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 0% 100% !important;
  border-radius: 5px;

  transition:
    background-size 0.3s ease,
    color 0.25s ease !important;
}

/* Shutter openen op hover / active */
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li > a.elementor-item:hover,
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li > a.elementor-item:focus,
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li > a.elementor-item.elementor-item-active,
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li.current-menu-item > a.elementor-item,
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li.current-menu-ancestor > a.elementor-item,
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li.current-menu-parent > a.elementor-item {
  background-size: 100% 100% !important;
}

/* =========================================================
   SVG indicator alleen voor losse top-level menu items
   (dus NIET voor dropdown items zoals Diensten)
   ========================================================= */

/* Zorg dat het streepje ruimte krijgt */
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li:not(.menu-item-has-children) {
  position: relative;
  overflow: visible !important;
}

.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li:not(.menu-item-has-children) > a.elementor-item {
  position: relative !important;
  overflow: visible !important;
}

/* Basis van het streepje */
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li:not(.menu-item-has-children) > a.elementor-item::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -5px !important;

  width: 0 !important;
  height: 2px !important;

  transform: translateX(-50%) !important;
  transform-origin: center center !important;

  background-image: url("https://solos-offgrid.nl/wp-content/uploads/2026/06/Rectangle-123-1.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 2px !important;

  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: none !important;
  z-index: 10 !important;

  transition:
    width 0.25s ease,
    opacity 0.2s ease !important;
}

/* Zichtbaar op hover / active / current */
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li:not(.menu-item-has-children) > a.elementor-item:hover::after,
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li:not(.menu-item-has-children) > a.elementor-item:focus::after,
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li:not(.menu-item-has-children) > a.elementor-item.elementor-item-active::after,
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li:not(.menu-item-has-children).current-menu-item > a.elementor-item::after,
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li:not(.menu-item-has-children).current-menu-ancestor > a.elementor-item::after,
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li:not(.menu-item-has-children).current-menu-parent > a.elementor-item::after {
  width: 22px !important;
  opacity: 1 !important;
  transform: translateX(-50%) !important;
}

/* =========================================================
   Diensten geen shutter-effect geven
   ========================================================= */

.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li.menu-item-64 > a.elementor-item {
  background-image: none !important;
  background-size: initial !important;
}

/* Voor het geval je nog een ::before shutter gebruikt */
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li.menu-item-64 > a.elementor-item::before {
  content: none !important;
  display: none !important;
  transform: none !important;
}

/* Specifieke dropdown van Diensten */
.elementor-element-af55c10
.elementor-nav-menu--main
li.menu-item-64 > ul.sub-menu.elementor-nav-menu--dropdown{
    width: 195px !important;
    padding: 22px 15px 22px 15px;
    border-radius: 10px;
    background: #FFFFFFBF;
      backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
}

.elementor-element-af55c10
.elementor-nav-menu--main
li.menu-item-64 > ul.sub-menu.elementor-nav-menu--dropdown > li > a.elementor-sub-item{
    margin-bottom: 5px;
    font-family: raleway;
    font-weight: 600;
}

.elementor-element-af55c10
.elementor-nav-menu--main
li.menu-item-64 > ul.sub-menu > li:last-child > a.elementor-sub-item {
  margin-bottom: 0 !important;
}/* End custom CSS */
/* Start custom CSS */.knop-groen-vol{
    background: linear-gradient(104deg, #006838, #96CF24);
    transition: 500ms ease;
}

.knop-groen-vol::before {
  content: "";
  position: absolute;
  max-width: 131.58px;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(104deg, #006838, #96CF24);;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}


.knop-groen-vol:hover{
    background: linear-gradient(104deg, #00683800, #96CF2400);
}

.knop-groen-vol:hover::before {
 background: linear-gradient(104deg, #006838, #96CF24);;
}

/* Normale header-padding */
.elementor-location-header .elementor-element-12036a4 {
  padding-top: 45px !important;
  padding-bottom: 158.79px !important;
  transition: padding-top 0.5s ease, padding-bottom 0.5s ease;
}

/* Header-padding na scrollen */
body.solos-header-scrolled .elementor-location-header .elementor-element-12036a4 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

@media (max-width: 767px) {
  .elementor-location-header .elementor-element-12036a4 {
    padding-top: 20px !important;
    padding-bottom: 136px !important;
  }

  body.solos-header-scrolled .elementor-location-header .elementor-element-12036a4 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}

/* ===================================
   Solos off-canvas vertical in/out
   In: van boven naar beneden
   Out: van onder naar boven
   Off-canvas ID: e3a4731
=================================== */

#off-canvas-e3a4731 {
    --solos-offcanvas-duration: 0.68s;
    --solos-offcanvas-ease: cubic-bezier(0.22, 1, 0.36, 1);

    visibility: hidden;
    pointer-events: none;
}

/* Overlay basis */
#off-canvas-e3a4731 .e-off-canvas__overlay {
    opacity: 0;
    transition: opacity var(--solos-offcanvas-duration) ease;
}

/* Paneel basis / gesloten state */
#off-canvas-e3a4731 .e-off-canvas__main {
    opacity: 0;
    transform: translateY(-100%) scale(0.985);
    filter: blur(8px);
    transition:
        transform var(--solos-offcanvas-duration) var(--solos-offcanvas-ease),
        opacity 0.45s ease,
        filter 0.55s ease;
    will-change: transform, opacity, filter;
}

/* Open wrapper */
#off-canvas-e3a4731[aria-hidden="false"] {
    visibility: visible;
    pointer-events: auto;
}

/* Overlay open */
#off-canvas-e3a4731[aria-hidden="false"] .e-off-canvas__overlay {
    opacity: 0;
}

/* In animatie: van boven naar beneden */
#off-canvas-e3a4731[aria-hidden="false"] .e-off-canvas__main {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* Close wrapper */
#off-canvas-e3a4731[aria-hidden="true"] {
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear var(--solos-offcanvas-duration);
}

/* Overlay close */
#off-canvas-e3a4731[aria-hidden="true"] .e-off-canvas__overlay {
    opacity: 0;
}

/* Out animatie: van onder naar boven */
#off-canvas-e3a4731[aria-hidden="true"] .e-off-canvas__main {
    opacity: 0;
    transform: translateY(-100%) scale(0.985);
    filter: blur(8px);
}

/* Content subtiel mee laten komen */
#off-canvas-e3a4731 .e-off-canvas__content {
    opacity: 0;
    transform: translateY(-22px);
    transition:
        transform 0.75s var(--solos-offcanvas-ease),
        opacity 0.45s ease;
    transition-delay: 0s;
}

#off-canvas-e3a4731[aria-hidden="false"] .e-off-canvas__content {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.12s;
}

#off-canvas-e3a4731[aria-hidden="true"] .e-off-canvas__content {
    opacity: 0;
    transform: translateY(-22px);
    transition-delay: 0s;
}

/* Elementor no-animation neutraliseren */
#off-canvas-e3a4731.no-animation,
#off-canvas-e3a4731.no-animation .e-off-canvas__main,
#off-canvas-e3a4731.no-animation .e-off-canvas__overlay {
    animation: none !important;
}

/* Mobiel iets sneller */
@media (max-width: 767px) {
    #off-canvas-e3a4731 {
        --solos-offcanvas-duration: 0.54s;
    }

    #off-canvas-e3a4731 .e-off-canvas__main {
        filter: blur(5px);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    #off-canvas-e3a4731,
    #off-canvas-e3a4731 .e-off-canvas__overlay,
    #off-canvas-e3a4731 .e-off-canvas__main,
    #off-canvas-e3a4731 .e-off-canvas__content {
        transition: none !important;
        transform: none !important;
        filter: none !important;
    }

    #off-canvas-e3a4731[aria-hidden="false"] {
        visibility: visible;
        pointer-events: auto;
    }

    #off-canvas-e3a4731[aria-hidden="true"] {
        visibility: hidden;
        pointer-events: none;
    }
}

/* =========================================================
   Header switch animaties - 500ms
   Voor wit/zwart switch, zonder menu-pointer traag te maken
   ========================================================= */

.elementor-location-header .solos-header,
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li:not(.menu-item-has-children) > a.elementor-item::after,
.elementor-element-af55c10 .sub-arrow::before,
.elementor-element-af55c10 nav.elementor-nav-menu--dropdown > ul > li > a.elementor-item,
.knop-groen-vol,
.knop-groen-vol *,
.knop-zwart-leeg,
.knop-zwart-leeg *,
.elementor-element-e8342f8,
.elementor-element-e8342f8 *,
.elementor-element-e8342f8 svg,
.elementor-element-e8342f8 svg path {
  transition:
    padding-top 500ms ease,
    padding-bottom 500ms ease,
    color 500ms ease,
    background-color 500ms ease,
    background 500ms ease,
    background-image 500ms ease,
    border-color 500ms ease,
    fill 500ms ease,
    stroke 500ms ease,
    filter 500ms ease,
    opacity 500ms ease !important;
}


.vm-logo-fade-wrap {
  position: relative !important;
  display: inline-block !important;
}

.vm-logo-fade-wrap .vm-logo-img {
  transition: opacity 500ms ease !important;
  display: block !important;
}

.vm-logo-fade-wrap .vm-logo-black {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
}

.vm-logo-fade-wrap .vm-logo-white {
  opacity: 1 !important;
}

body.vm-header-switched .vm-logo-fade-wrap .vm-logo-white {
  opacity: 0 !important;
}

body.vm-header-switched .vm-logo-fade-wrap .vm-logo-black {
  opacity: 1 !important;
}


/* =========================================================
   Header zwart-state op basis van de witte header
   Actief wanneer body.vm-header-switched bestaat
   ========================================================= */

body.vm-header-switched .elementor-element-af55c10 {
  --solos-indicator-url: url("/wp-content/uploads/2026/06/Rectangle-123-1-1.svg");
  --solos-arrow-url: url("/wp-content/uploads/2026/06/keyboard_arrow_down_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24-2-2.svg");
}

/* Header achtergrond zwart */
body.vm-header-switched .elementor-location-header .solos-header {
  background: none !important;
}

/* Top-level menu tekst wit */
body.vm-header-switched
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li > a.elementor-item {
  color: #ffffff !important;
}

/* Top-level shutter background zoals zwarte header */
body.vm-header-switched
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li > a.elementor-item {
  background-image: linear-gradient(
    #ffffff0D,
    #ffffff0D
  ) !important;
}

/* SVG indicator zoals zwarte header */
body.vm-header-switched
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li:not(.menu-item-has-children) > a.elementor-item::after {
  background-image: url("/wp-content/uploads/2026/06/Rectangle-123-1-1.svg") !important;
}

/* Diensten géén shutter-effect blijven geven */
body.vm-header-switched
.elementor-element-af55c10
.elementor-nav-menu--main
.elementor-nav-menu > li.menu-item-64 > a.elementor-item {
  background-image: none !important;
  background-size: initial !important;
}

/* Arrow icon in zwarte variant */
body.vm-header-switched
.elementor-element-af55c10 .sub-arrow::before {
  background-image: var(--solos-arrow-url) !important;
}


/* Mobiele hoofditems wit */
body.vm-header-switched
.elementor-element-af55c10
nav.elementor-nav-menu--dropdown
> ul > li > a.elementor-item {
  color: #ffffff !important;
}

body.vm-header-switched .knop-groen-vol:hover,
body.vm-header-switched .knop-groen-vol:focus {
  color: #ffffff !important;
}

body.vm-header-switched .knop-zwart-leeg{
    color: #fff;
    border-color: #fff;
}

body.vm-header-switched .knop-zwart-leeg:hover{
    color: #fff;
    border-color: #ffffff00;
}

body.vm-header-switched .elementor-element-e8342f8 {
  border-color: #ffffff1A;
}

body.vm-header-switched .elementor-element-e8342f8 .tekst {
  color: #ffffff !important;
}

body.vm-header-switched .elementor-element-e8342f8 svg,
body.vm-header-switched .elementor-element-e8342f8 svg path {
  fill: #ffffff !important;
  color: #ffffff !important;
}

.elementor-element-af55c10 .solos-sub-arrow-fade-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.elementor-element-af55c10 .solos-sub-arrow-fade-wrap .solos-submenu-arrow-icon {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
  transition:
    opacity 500ms ease,
    transform 250ms ease !important;
}

.elementor-element-af55c10 .solos-sub-arrow-fade-wrap .solos-arrow-default {
  opacity: 1;
}

.elementor-element-af55c10 .solos-sub-arrow-fade-wrap .solos-arrow-switch {
  position: absolute;
  inset: 0;
  opacity: 0;
}

body.vm-header-switched .elementor-element-af55c10 .solos-sub-arrow-fade-wrap .solos-arrow-default {
  opacity: 0;
}

body.vm-header-switched .elementor-element-af55c10 .solos-sub-arrow-fade-wrap .solos-arrow-switch {
  opacity: 1;
}

/* Rotatie behouden wanneer submenu open staat */
.elementor-element-af55c10 a.has-submenu[aria-expanded="true"] .solos-sub-arrow-fade-wrap .solos-submenu-arrow-icon {
  transform: rotate(180deg);
}/* End custom CSS */