/* 
Theme Name:		 WIM Elementor child
Theme URI:		 https://wearewim.nl/
Description:	 WIM Elementor child theme
Author:			 Sjoerd van der Sluis
Author URI:		 https://wearewim.nl/
Template:		 wim-elementor
Version:		 1.0.0
Text Domain:	 wim-elementor-child
*/

/*
    Plaats hier de style
*/

html, body {
    overflow-x: hidden;
}

.country-selector {
	display: none!important;
}


.pops:before {
    content: "";
    display: block;
    position: absolute;
    top: -170px;
    left: -25px;
    width: 440px;
    height: 443px;
    background: url(https://covolt.eu/wp-content/themes/WIM-Elementor-child/images/background_header_pops.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform: scaleX(-1) scaleY(-1);
}


.elementor-counter-title {
    text-align: center;
}

.imagebottom:after {
    content: "";
    display: block;
    position: absolute;
    top: 40px;
    right: -45px;
    width: 440px;
    height: 443px;
    background: url(https://covolt.eu/wp-content/themes/WIM-Elementor-child/images/pops_purple.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.menu-covolt {
    height: 100%!important;
}

#wpadminbar {
    z-index: 999999999999;
}

.polygonhead {
        clip-path: polygon(30% 0%, 70% 0%, 100% 0, 100% 70%, 96% 100%, 30% 100%, 0 100%, 0 0);
}

.leftbottom {
    clip-path: polygon(20% 0%, 80% 0%, 100% 0, 100% 100%, 80% 100%, 9% 100%, 0 88%, 0 0);
}

.lefttop {
    clip-path: polygon(16% 0, 80% 0%, 100% 0, 100% 100%, 80% 100%, 20% 100%, 0 100%, 0 16%);
}

.sectiemarge {
    margin-left: 29vw!important;
}

.innermarge {
    margin-left: -14vw!important;
}

.sectiemargeright {
    margin-right: 23.5vw!important;
}

.innermargeright {
    margin-left: 12vw!important;
    margin-right: -20vw!important;
}

.sectiemargeleft {
    margin-left: 23.5vw!important;
}

.innermargeleft {
    margin-left: 12vw!important;
    margin-left: -20vw!important;
}

.popsblack:before {
    content: "";
    display: block;
    position: absolute;
    top: -120px;
    left: 15px;
    width: 440px;
    height: 443px;
    background: url(https://covolt.eu/wp-content/themes/WIM-Elementor-child/images/pops_black.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform: scaleX(-1) scaleY(-1);
}


.polygonleftbox:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 30px solid white; /* De breedte van de driehoek */
    border-bottom: 30px solid transparent; /* De hoogte van de driehoek */
    border-top: 30px solid white;
    border-right: 30px solid transparent;
    /* De kleur van de driehoek */
    z-index: 1;
}

.polygonrightbox:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 30px solid transparent; /* De breedte van de driehoek */
    border-bottom: 30px solid transparent; /* De hoogte van de driehoek */
    border-top: 30px solid white;
    border-right: 30px solid white;
    /* De kleur van de driehoek */
    z-index: 1;
}

@media screen and (max-width: 1330px) {
    .sectiemarge {
        margin-left: 10vw!important;
    }
    
    .innermarge {
        margin-left: -5vw!important;
    }

    .popsblack:before {
        content: "";
        display: block;
        position: absolute;
        top: -120px;
        left: -50px;
        width: 440px;
        height: 443px;
        background: url(https://covolt.eu/wp-content/themes/WIM-Elementor-child/images/pops_black.svg);
        background-size: contain;
        background-repeat: no-repeat;
        transform: scaleX(-1) scaleY(-1);
    }

}

@media screen and (min-width:2000px) {
    .sectiemarge {
        margin-left: 34vw!important;
    }
    
    .innermarge {
        margin-left: -16vw!important;
    }
    .popsblack:before {
        content: "";
        display: block;
        position: absolute;
        top: -120px;
        left: 170px;
        width: 440px;
        height: 443px;
        background: url(https://covolt.eu/wp-content/themes/WIM-Elementor-child/images/pops_black.svg);
        background-size: contain;
        background-repeat: no-repeat;
        transform: scaleX(-1) scaleY(-1);
    }
    .sectiemargeright {
        margin-right: 30.5vw!important;
    }
    .innermargeright {
        margin-left: 16vw!important;
        margin-right: -14.6vw!important;
    }

    .sectiemargeleft {
        margin-left: 30.5vw!important;
    }
    .innermargeleft {
        margin-right: 16vw!important;
        margin-left: -14.6vw!important;
    }
}

@media screen and (max-width:1700px) {
    .popsblack:before {
        content: "";
        display: block;
        position: absolute;
        top: -120px;
        left: -50px;
        width: 440px;
        height: 443px;
        background: url(https://covolt.eu/wp-content/themes/WIM-Elementor-child/images/pops_black.svg);
        background-size: contain;
        background-repeat: no-repeat;
        transform: scaleX(-1) scaleY(-1);
    }
    .sectiemarge {
        margin-left: 20vw!important;
    }
    .innermarge {
        margin-left: -9vw!important;
    }
}

@media screen and (max-width: 1150px) {
    .sectiemarge {
        margin-left: 0!important;
    }
    
    .innermarge {
        margin-left: 0!important;
    }
    .popsblack:before {
        display: none;
    }
    .sectiemargeright {
        margin-right: 0!important;
    }
    
    .innermargeright {
        margin-left: 0!important;
        margin-right: 0!important;
    }
    .sectiemargeleft {
        margin-right: 0!important;
    }

    .sectiemargeleft {
        margin-left: 0 !important;
    }
    
    .innermargeleft {
        margin-left: 0!important;
        margin-right: 0!important;
    }
    .imagebottom:after {
        content: "";
        display: block;
        position: absolute;
        top: -30px;
        right: 0;
        width: 200px;
        height: 200px;
        background: url(https://covolt.eu/wp-content/themes/WIM-Elementor-child/images/pops_purple.svg);
        background-size: contain;
        background-repeat: no-repeat;
    }
    
}

.referentiepops:after {
    content: "";
    display: block;
    position: absolute;
    top: -60px;
    right: -250px;
    width: 500px;
    height: 500px;
    background: url(https://covolt.eu/wp-content/themes/WIM-Elementor-child/images/pops_purple.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.linksbovenhoek {
    clip-path: polygon(10% 0, 70% 0%, 100% 0, 100% 100%, 70% 100%, 30% 100%, 0 100%, 0 12%);
}

.rechtsbovenhoek {
    clip-path: polygon(0 0, 90% 0, 100% 10%, 100% 100%, 70% 100%, 30% 100%, 0 100%, 0 0);
}

.rbh img {
    clip-path: polygon(0 0, 90% 0, 100% 10%, 100% 100%, 70% 100%, 30% 100%, 0 100%, 0 0);
}

.loh img {
    clip-path: polygon(0 0, 70% 0%, 100% 0, 100% 100%, 70% 100%, 10% 100%, 0 90%, 0 0%);
}

@media screen and (max-width:767px) {
.blockservice .linksbovenhoek {
    clip-path: unset;
}
.blockservice .rechtsbovenhoek {
    clip-path: unset;
}
.blockservice .rbh img {
    clip-path: unset;
}
.blockservice .loh img {
    clip-path: unset;
}
}

.popssingle:before {
        content: "";
        display: block;
        position: absolute;
        top: -200px;
        left: -25px;
        width: 440px;
        height: 443px;
        background: url(https://covolt.eu/wp-content/themes/WIM-Elementor-child/images/background_header_pops.svg);
        background-size: contain;
        background-repeat: no-repeat;
        transform: scaleX(-1) scaleY(-1);
}

.popfooter:before {
    content: "";
    display: block;
    position: absolute;
    top: -40px;
    right: -465px;
    width: 440px;
    height: 443px;
    background: url(https://wimternet.nl/covolt-nieuw/wp-content/themes/WIM-Elementor-child/images/background_header_pops.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform: scaleX(-1) scaleY(-1);
}

.heightfit {
    height: fit-content;
}

.vacatureblok {
    background-color: white;
    margin-top: 20px;
    color: black;
    width: 100%;
    display: flex;
    height: 100%;
}

.vacatureblok .info {
width: 60%;
float: left;
padding: 25px 50px;
}

.vacatureblok .info h3{
    color: black;
    font-family: "Space Grotesk", Sans-serif;
    font-size: 29px;
    font-weight: 700;
}

.vacatureblok .knop {
background: white;
    width: 40% !important;
    height: 100%;
    display: block;
    padding: 40px;
}

.vacatureblok .knop a {
    float: right;
    font-family: "Space Grotesk", Sans-serif;
    font-weight: 600;
    fill: #FFFFFF;
    color: #FFFFFF;
    background-color: #000000;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #000000;
    border-radius: 0px 0px 0px 0px;
    padding: 15px 100px 015px 0100px;
}

.vacatureblok .info .locatie {
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    padding-right: 20px;
}

.vacatureblok .info .contract {
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    padding-right: 20px;
}

@media screen and (max-width:767px) {
    .vacatureblok {
        display: block;
    }

    .vacatureblok {
        background-color: white;
        margin-top: 20px;
        color: black;
        width: 100%;
        display: block;
        height: 100%;
    }
    
    .vacatureblok .info {
    width: 100%;
    float: unset;
    padding-bottom: 0;
    padding-left: 40px;
    }
    
    .vacatureblok .info h3{
        font-size: 22px;
    }

    .vacatureblok .info .locatie {
        font-size: 16px;
    }
    
    .vacatureblok .info .contract {
        font-size: 16px;

    }
    
    .vacatureblok .knop {
        width: 100% !important;
    }

    .vacatureblok .knop a{
        float: unset;
        padding: 10px 20px;
    }
}

.filter-button {
    color: white;
    font-family: "Space Grotesk", Sans-serif;
    background-color: black;
    border: unset;
    border-radius: 0;
    margin-right: 10px;
}

.filter-button:hover {
    opacity: 0.8;
    background-color: black;
}

.filter-button.active {
    background-color: black;
    opacity: 0.5;
}

@media screen and (max-width:767px) {
    .filter-button {
        margin-top: 10px;
    }
}

.gfield_label {
    font-family: "Space Grotesk", Sans-serif!important;
    color: black!important;
    font-size: 15px!important;   
}

select {
    font-family: "Space Grotesk", Sans-serif!important;
    color: black!important;
    font-size: 15px!important;    
    border-radius: 0!important;
}

input {
    border-radius: 0!important;
}

textarea {
    border-radius: 0!important;
}

.gform-theme--foundation .gform_fields {
    row-gap: 15px!important;
}

.gform_button {
font-family: "Space Grotesk", Sans-serif!important;
font-weight: 600!important;
fill: #FFFFFF!important;
color: #FFFFFF!important;
background-color: #000000!important;
border-style: solid!important;
border-width: 2px 2px 2px 2px!important;
border-color: #000000!important;
border-radius: 0px 0px 0px 0px!important;
padding: 15px 100px 015px 0100px!important;
}

.spanproject .elementor-heading-title{
    background-color: black!important;
    padding: 7px 25px!important;
}

.faqkennisdeling .elementor-accordion-item{
    margin-bottom: 25px;
}

.faqkennisdeling .elementor-tab-title {
    padding: 28px!important;
}

.faqkennisdeling .elementor-tab-content {
    padding: 28px!important;
}

.partnerslider img{
    height: 100px!important;
    object-fit: contain;
}

.menuhoofd .sub-menu {
    margin-left: 0px !important;
    margin-top: 0px !important;
    display: block !important;
    position: relative !important;
    width: 100% !important;
    margin-bottom: 20px;
    background: transparent;
}

a.elementor-sub-item {
    color: white!important;
    font-family: 'Montserrat', sans-serif!important;
    font-size: 14px;
}

.menuhoofd {
    color: white!important;
    font-family: 'Montserrat', sans-serif!important;
}

.sub-arrow {
    display: none!important;
}

.menuhoofd a:hover {
    background-color: transparent;
}

.elementor-item-active {
    background-color: transparent!important;
}

.spanheadhome .elementor-heading-title {
    background-color: #F0FA59 !important;
    padding: 7px 25px !important;
    clip-path: polygon(30% 0%, 70% 0%, 100% 0, 100% 70%, 96% 100%, 30% 100%, 0 100%, 0 0);
    padding-right: 30px!important;
}

.twee a.elementor-sub-item{
    padding-left: 40px!important;
}

.drie a.elementor-sub-item{
    padding-left: 60px!important;
}

        #jouw-id {
            cursor: pointer;
        }

.elementor-button:hover {
    transform: translateY(-8px);
}

.nottranslate .elementor-button:hover {
    transform: translateY(0)!important;
}

.partnerslider img{
    height: 100px!important;
    width: 150px!important;
    object-fit: contain!important;
}

/* ====================================================== */
/* FINALE CSS VOOR MEGA MENU (MET HOGERE SPECIFICITEIT)  */
/* ====================================================== */

/* =================================================================== */
/* FINALE & GECORRIGEERDE CSS VOOR HET MEGA MENU BLOK */
/* =================================================================== */

/* --- Hoofd wrapper van het mega menu --- */
/* Dit element (.mega-menu-content-wrapper) krijgt de class 'is-visible' van JavaScript */
.mega-menu-content-wrapper {
    display: none; /* Standaard verborgen */
    background-color: #ffffff;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    padding: 30px 40px;
    box-sizing: border-box;

    /* Optioneel: als het blok onder je header moet 'hangen' */
    /* position: absolute; */
    /* left: 0; */
    /* width: 100%; */
    /* z-index: 1000; */
}

/* Zichtbare status: gebruik Flexbox voor de 2-kolommen layout */
.mega-menu-content-wrapper.is-visible {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start; /* Lijn de kolommen aan de bovenkant uit */
}

/* --- 1. Linkerkolom (met de menu-items) --- */
.megamenu-left-column {
    flex: 0 0 300px; /* Vaste breedte van 300px, pas aan indien nodig */
    padding-right: 30px;
}

/* De lijst (.sub-menu) in de linkerkolom */
.megamenu-left-column .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Dit is nu een simpele lijst, geen grid! */
}

/* De links (<a>) in de linkerkolom */
.megamenu-left-column .sub-menu a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    text-decoration: none;
    color: #00313E;
    font-family: "Poppins", Sans-serif;
    font-weight: 500;
    border-bottom: 1px solid #f0f0f0;
    transition: color 0.2s ease-in-out;
}

.megamenu-left-column .sub-menu li:last-child a {
    border-bottom: none;
}

/* Stijl voor de actieve/gehoverde link in de linkerkolom */
.megamenu-left-column .sub-menu .is-hovered a,
.megamenu-left-column .sub-menu li:hover a {
    color: #505745; /* Jouw gewenste hover-kleur */
}

/* Pijltje achter de menu-items */
.megamenu-left-column .sub-menu .anchor-arrow {
    font-size: 1.2em;
    color: #505745; /* Jouw gewenste hover-kleur */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.megamenu-left-column .sub-menu .is-hovered .anchor-arrow,
.megamenu-left-column .sub-menu li:hover .anchor-arrow {
    opacity: 1;
}

/* --- 2. Verticale separator --- */
.megamenu-separator-column {
    display: none; /* Wordt zichtbaar gemaakt door JavaScript */
    width: 1px;
    background-color: #e0e0e0;
    align-self: stretch; /* Vult de volledige hoogte */
    margin: 0 20px;
}

/* --- 3. Rechterkolom (met de ACF content) --- */
.megamenu-right-column {
    flex: 1; /* Neemt de rest van de ruimte in */
    padding-left: 30px;
    min-width: 0; /* Voorkomt dat de content de layout breekt */
}

.megamenu-image-wrapper {
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    position: relative;
    background-color: #f5f5f5;
    margin-bottom: 20px;
}

.megamenu-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.megamenu-title {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.4em;
    color: #111;
    font-family: "Poppins", Sans-serif;
}

.megamenu-description {
    font-size: 0.95em;
    line-height: 1.6;
    color: #555;
    font-family: "Poppins", Sans-serif;
}

/* --- Styling voor je hoofdnavigatie (bovenbalk) --- */
/* Deze regels kun je behouden zoals ze waren. */

.main-menu-navigation ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-menu-navigation a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: white; /* Of een andere kleur die bij je header past */
    font-family: "Poppins", Sans-serif;
}

.main-menu-navigation .js-menu-toggle-parent > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-toggle-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.active-menu-item .menu-toggle-icon {
    transform: rotate(180deg); /* Pijltje wijst naar boven als het menu open is */
}

/* =================================================================== */
/* CSS UPDATE: GECENTREERDE CONTAINER MET 70/30 VERDELING */
/* =================================================================== */

/* --- Hoofd wrapper van het mega menu --- */
/* Deze wrapper is nu alleen nog de full-width achtergrond. */
.mega-menu-content-wrapper.is-visible {
    display: block; /* Dit is niet langer de flex-container */
    padding: 30px 0; /* Verticale padding, geen horizontale */
}

/* --- NIEUW: De gecentreerde binnenste container --- */
/* Deze container is 1300px breed en wordt de nieuwe flex-container. */
.megamenu-inner-container {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto; /* Centreert de container */
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
}

/* --- 1. Linkerkolom (70% breedte) --- */
.megamenu-left-column {
    flex: 0 0 70%;
    padding-right: 40px; /* Ruimte tussen de kolommen */
    box-sizing: border-box; /* Zorgt dat padding binnen de 70% valt */
}

/* --- 2. Verticale separator --- */
.megamenu-separator-column {
    display: none;
    width: 1px;
    background-color: #e0e0e0;
    align-self: stretch;
    /* De separator staat nu tussen de padding, dus geen extra margin nodig */
}

/* --- 3. Rechterkolom (30% breedte) --- */
.megamenu-right-column {
    flex: 0 0 30%;
    padding-left: 40px; /* Ruimte tussen de kolommen */
    box-sizing: border-box; /* Zorgt dat padding binnen de 30% valt */
    min-width: 0;
}

/* De rest van je styling voor de inhoud van de kolommen (titels, afbeeldingen, etc.) blijft hetzelfde. */

/* =================================================================== */
/* DEFINITIEVE CSS VOOR HET MEGA MENU BLOK */
/* =================================================================== */

/* --- Hoofd wrapper van het mega menu --- */
.mega-menu-content-wrapper.is-visible {
    display: block;
    padding: 30px 0;
    background-color: #ffffff;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

/* --- De gecentreerde binnenste container --- */
.megamenu-inner-container {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
}

/* --- 1. Linkerkolom (70% breedte) --- */
.megamenu-left-column {
    flex: 0 0 70%;
    padding-right: 40px;
    box-sizing: border-box;
}

.megamenu-left-column .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.megamenu-left-column .sub-menu a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px; /* Padding toegevoegd voor visuele ruimte */
    text-decoration: none;
    color: #00313E;
    font-family: "Poppins", Sans-serif;
    font-weight: 500;
    border-bottom: 1px solid #f0f0f0;
    transition: color 0.2s ease-in-out;
    box-sizing: border-box; /* Belangrijk voor de breedteberekening */
}

.megamenu-left-column .sub-menu li:last-child a {
    border-bottom: none;
}

/* Pijl is nu altijd zichtbaar */
.megamenu-left-column .sub-menu .anchor-arrow {
    opacity: 1;
    font-size: 1.2em;
    color: #00313E; /* Standaardkleur */
    transition: color 0.2s ease-in-out;
}

/* Stijl voor de actieve/gehoverde link */
.megamenu-left-column .sub-menu .is-hovered a,
.megamenu-left-column .sub-menu li:hover a {
    color: #505745;
}

/* De pijl kleurt mee op hover */
.megamenu-left-column .sub-menu .is-hovered a .anchor-arrow,
.megamenu-left-column .sub-menu li:hover a .anchor-arrow {
    color: #505745;
}

/* --- 2. Rechterkolom (30% breedte) met border als separator --- */
.megamenu-right-column {
    flex: 0 0 30%;
    padding-left: 40px;
    box-sizing: border-box;
    min-width: 0;
    /* De border is de nieuwe separator. Standaard onzichtbaar. */
    border-left: 1px solid transparent;
    transition: border-color 0.2s ease-in-out;
}

/* Styling voor de content in de rechterkolom blijft hetzelfde */
.megamenu-image-wrapper {
    width: 100%;
    padding-top: 56.25%;
    position: relative;
    background-color: #f5f5f5;
    margin-bottom: 20px;
}
.megamenu-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.megamenu-title {
    margin: 0 0 10px 0;
    font-size: 1.4em;
    color: #111;
    font-family: "Poppins", Sans-serif;
}
.megamenu-description {
    font-size: 0.95em;
    line-height: 1.6;
    color: #555;
    font-family: "Poppins", Sans-serif;
}

/* =================================================================== */
/* CSS UPDATE: DYNAMISCHE KOLOMINDELING */
/* =================================================================== */

/* --- De gecentreerde binnenste container --- */
.megamenu-inner-container {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    transition: all 0.3s ease; /* Vloeiende overgang */
}

/* --- Kolom Definities (DEFAULT STATE) --- */
/* Standaard neemt de linkerkolom alle ruimte in beslag */
.megamenu-left-column {
    flex: 1 1 100%; /* Neemt 100% van de ruimte in */
    padding-right: 0; /* Geen padding als er geen rechterkolom is */
    box-sizing: border-box;
    transition: flex 0.3s ease;
}

/* De rechterkolom is standaard volledig verborgen */
.megamenu-right-column {
    flex: 0 0 0%; /* Geen breedte */
    display: block; /* Volledig verborgen */
    padding-left: 40px;
    box-sizing: border-box;
    border-left: 1px solid transparent;
    transition: flex 0.3s ease, border-color 0.3s ease;
}

/* --- Kolom Definities (ACTIVE STATE) --- */
/* Wanneer de container de class 'right-column-active' heeft... */
.megamenu-inner-container.right-column-active .megamenu-left-column {
    flex: 0 0 70%; /* ...wordt de linkerkolom 70% */
    padding-right: 40px;
}

.megamenu-inner-container.right-column-active .megamenu-right-column {
    flex: 0 0 30%; /* ...wordt de rechterkolom 30% */
    display: block; /* ...en wordt deze zichtbaar */
    border-left-color: #e0e0e0; /* De separator wordt ook zichtbaar */
}


/* --- Styling voor de menu-items zelf (ongewijzigd) --- */
.megamenu-left-column .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.megamenu-left-column .sub-menu a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    text-decoration: none;
    color: #00313E;
    font-family: "Poppins", Sans-serif;
    font-weight: 500;
    border-bottom: 1px solid #f0f0f0;
    transition: color 0.2s ease-in-out;
    box-sizing: border-box;
}

.megamenu-left-column .sub-menu li:last-child a {
    border-bottom: none;
}

/* =================================================================== */
/* CSS UPDATE: ROBUUSTE KOLOMINDELING */
/* =================================================================== */

/* --- De gecentreerde binnenste container --- */
.megamenu-inner-container {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    transition: all 0.3s ease;
}

/* --- Kolom Definities (DEFAULT STATE) --- */
.megamenu-left-column {
    flex: 1 1 100%;
    padding-right: 0;
    box-sizing: border-box;
    transition: flex 0.3s ease;
    min-width: 0; /* TOEGEVOEGD: Voorkomt dat content de kolom oprekt */
}

.megamenu-right-column {
    flex: 0 0 0%;
    display: block;
    padding-left: 40px;
    box-sizing: border-box;
    border-left: 1px solid transparent;
    transition: flex 0.3s ease, border-color 0.3s ease;
    min-width: 0; /* TOEGEVOEGD: Voorkomt dat content de kolom oprekt */
}

/* --- Kolom Definities (ACTIVE STATE) --- */
.megamenu-inner-container.right-column-active .megamenu-left-column {
    flex: 0 0 70%;
    padding-right: 40px;
}

.megamenu-inner-container.right-column-active .megamenu-right-column {
    flex: 0 0 30%;
    display: block;
    border-left-color: #e0e0e0;
}


/* --- Styling voor de menu-items (<a> tags) --- */
.megamenu-left-column .sub-menu a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    text-decoration: none;
    color: #00313E;
    font-family: "Poppins", Sans-serif;
    font-weight: 500;
    border-bottom: 1px solid #f0f0f0;
    transition: color 0.2s ease-in-out;
    box-sizing: border-box;
    
    /* TOEGEVOEGD: Deze regels voorkomen dat de link de layout breekt */
    max-width: 100%;         /* Zorg dat de link nooit breder is dan de kolom */
    white-space: nowrap;     /* Voorkom dat de tekst over meerdere regels breekt */
    overflow: hidden;        /* Verberg tekst die niet past */
    text-overflow: ellipsis; /* Voeg '...' toe aan te lange tekst */
}

.megamenu-left-column .sub-menu li:last-child a {
    border-bottom: none;
}

/* =================================================================== */
/* DEFINITIEVE CSS (ANTI-SPRINGENDE LAYOUT) */
/* =================================================================== */

/* --- De gecentreerde binnenste container --- */
.megamenu-inner-container {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
}

/* --- VASTE KOLOMINDELING (GEEN SPRINGEN MEER) --- */

/* De linkerkolom is nu ALTIJD 70% breed */
.megamenu-left-column {
    flex: 0 0 70%;
    padding-right: 40px;
    box-sizing: border-box;
    min-width: 0; 
}

/* De rechterkolom neemt ALTIJD 30% van de ruimte in beslag */
.megamenu-right-column {
    flex: 0 0 30%;
    padding-left: 40px;
    box-sizing: border-box;
    min-width: 0;
    
    /* De separator is nu een permanente border */
    border-left: unset;

    /* Standaard is de kolom onzichtbaar, maar behoudt zijn ruimte */
    opacity: 1;
/*     visibility: hidden; */
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* --- ZICHTBARE STAAT --- */
/* Als de container de class 'right-column-active' heeft... */
.megamenu-inner-container.right-column-active .megamenu-right-column {
    /* ...wordt de rechterkolom zichtbaar met een fade-in effect */
    opacity: 1;
    visibility: visible;
}


/* --- Styling voor de menu-items (ongewijzigd) --- */
.megamenu-left-column .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.megamenu-left-column .sub-menu a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    text-decoration: none;
    color: #00313E;
    font-family: "Poppins", Sans-serif;
    font-weight: 500;
    border-bottom: 1px solid #f0f0f0;
    transition: color 0.2s ease-in-out;
    box-sizing: border-box;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.megamenu-left-column .sub-menu li:last-child a {
    border-bottom: none;
}

.megamenu-inner-container {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    display: flex
;
    flex-wrap: nowrap;
    align-items: flex-start;
}

/* =================================================================== */
/* LAATSTE AANPASSING: 30% / Leeg / 30% LAYOUT */
/* =================================================================== */

/* --- De gecentreerde binnenste container --- */
/* We voegen 'justify-content' toe om de kolommen uit elkaar te duwen. */
.megamenu-inner-container {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between; /* BELANGRIJK: Deze regel duwt de kolommen naar de zijkanten */
}

/* --- VASTE KOLOMINDELING --- */

/* De linkerkolom is nu 30% breed en staat links */
.megamenu-left-column {
    flex: 0 0 30%;
    box-sizing: border-box;
    min-width: 0; 
    /* padding-right is niet meer nodig */
}

/* De rechterkolom blijft 30% breed en wordt naar rechts geduwd */
.megamenu-right-column {
    flex: 0 0 30%;
    box-sizing: border-box;
    min-width: 0;
    
    /* De separator zit nu direct naast de lege ruimte */
    border-left: unset;

    /* De kolom is standaard onzichtbaar, maar behoudt zijn ruimte */
    opacity: 1;
/*     visibility: hidden; */
    transition: opacity 0.2s ease, visibility 0.2s ease;
    /* padding-left is niet meer nodig */
}

/* --- ZICHTBARE STAAT (ongewijzigd) --- */
.megamenu-inner-container.right-column-active .megamenu-right-column {
    opacity: 1;
    visibility: visible;
}

.megamenu-column-container.is-visible,
.mega-menu-content-wrapper.is-visible {
	position: relative!important;
	width: 100%!important;
}

.active-menu-item .menu-toggle-icon {
    transform: rotate(-90deg);
}

/* --- Styling voor de menu-items (<a> tags) --- */
.megamenu-left-column .sub-menu a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    text-decoration: none;
    color: #00313E; /* Standaardkleur van tekst en SVG */
    font-weight: 500;
    border-bottom: 1px solid #f0f0f0;
    transition: color 0.2s ease-in-out;
    box-sizing: border-box;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Styling voor de SVG-pijl --- */
.megamenu-left-column .sub-menu .anchor-arrow {
    display: inline-flex;
    align-items: center;
}

.megamenu-left-column .sub-menu .anchor-arrow svg path {
    /* BELANGRIJK: De SVG erft nu de kleur van de tekst */
    fill: currentColor; 
}


/* --- HOVER-EFFECT --- */
/* Verandert de kleur van de link (en dus ook de SVG) naar jouw kleur */
.megamenu-left-column .sub-menu .is-hovered a,
.megamenu-left-column .sub-menu li:hover a {
    color: #6359FA;
}

.megamenu-sub-item.is-hovered .anchor-arrow svg path{
	fill: #6359FA!important;
}

/* =================================================================== */
/* MEGA MENU: OPTIONEEL CONTENT BLOK (per hoofditem, via ACF) */
/* Basis-technische styling; Sjoerd verzorgt de definitieve vormgeving. */
/* =================================================================== */
.megamenu-content-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    width: 100%;
}

.megamenu-content-image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 22px;
    margin-bottom: 16px;
    background-color: #f5f5f5;
}

.megamenu-content-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 22px;
}

.megamenu-content-body {
    display: flex;
    flex-direction: column;
}

.megamenu-content-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6359fa;
    margin-bottom: 6px;
}

.megamenu-content-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: #111;
    margin: 0 0 8px 0;
}

.megamenu-content-meta {
    font-size: 13px;
    color: #666;
    margin-bottom: 14px;
}

.megamenu-content-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #111;
}

.megamenu-content-cta .carr {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Menu items blijven de primaire interactie: content blok mag nooit domineren. */
.megamenu-right-column .megamenu-content-card {
    max-width: 320px;
}

/* Content blok alleen op desktop; op tablet/mobiel blijft de compacte menu-weergave ongewijzigd. */
@media screen and (max-width: 1024px) {
    .megamenu-content-block-source,
    .megamenu-right-column .megamenu-content-card {
        display: none !important;
    }
}

/* Sector lid */

.va { background:#efefef !important; border-radius:24px !important; padding:40px 48px !important; display:flex !important; align-items:center !important; gap:40px !important; flex-wrap:wrap !important; margin-bottom: 50px; }
.va-photo { position:relative !important; flex-shrink:0 !important; }
.va-photo img { width:110px !important; height:110px !important; border-radius:50% !important; object-fit:cover !important; display:block !important; }
.va-li { position:absolute !important; bottom:0 !important; right:0 !important; width:30px !important; height:30px !important; border-radius:50% !important; background:#14161a !important; border:2px solid #ffffff !important; display:flex !important; align-items:center !important; justify-content:center !important; text-decoration:none !important; transition:background .15s !important; }
.va-li:hover { background:#6359fa !important; }
.va-li svg { width:13px !important; height:13px !important; }
.va-info { flex:1 !important; min-width:200px !important; }
.va-kicker { font-size:11px !important; font-weight:700 !important; letter-spacing:.09em !important; text-transform:uppercase !important; color:#6359fa !important; margin-bottom:8px !important; }
.va-name {     font-family: "Space Grotesk", Sans-serif; font-size:26px !important; font-weight:700 !important; color:#14161a !important; line-height:1.15 !important; margin-bottom:4px !important; }
.va-role {     font-family: "Space Grotesk", Sans-serif; font-size:13px !important; font-weight:600 !important; color:#6359fa !important; margin-bottom:14px !important; }
.va-bio {     font-family: "Space Grotesk", Sans-serif; font-size:14px !important; color:#5d6364 !important; line-height:1.65 !important; max-width:340px !important; }
.va-actions {     font-family: "Space Grotesk", Sans-serif; display:flex !important; flex-direction:column !important; gap:10px !important; flex-shrink:0 !important; min-width:210px !important; }
.va-btn-p {     font-family: "Space Grotesk", Sans-serif; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; background:#14161a !important; color:#ffffff !important; font-family:'Space Grotesk',sans-serif !important; font-size:13px !important; font-weight:700 !important; padding:13px 24px !important; border-radius:999px !important; text-decoration:none !important; transition:box-shadow .15s, transform .15s !important; }
.va-btn-p:hover { transform:translateY(-1px) !important; box-shadow:0 8px 20px rgba(20,22,26,.2) !important; }
.va-btn-s { display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; background:#ffffff !important; color:#14161a !important; font-family:'Space Grotesk',sans-serif !important; font-size:13px !important; font-weight:700 !important; padding:12px 24px !important; border-radius:999px !important; border:1.5px solid #e2e5e6 !important; text-decoration:none !important; transition:border-color .15s, transform .15s !important; }
.va-btn-s:hover { border-color:#14161a !important; transform:translateY(-1px) !important; }
.va-btn-p svg, .va-btn-s svg { width:14px !important; height:14px !important; flex-shrink:0 !important; }
@media(max-width:640px){ .va { flex-direction:column !important; } .va-actions { width:100% !important; } }

/* Gedeelde basis styling */
.va-single-block {
    background-color: #f7f7f7;
    padding: 40px;
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;
	margin-bottom: 50px;
}

.va-photo-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.va-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%!important;
    object-fit: cover;
}

.va-linkedin-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 28px;
    height: 28px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.va-linkedin-badge svg { width: 16px; height: 16px; }

.va-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: #4f46e5; font-weight: 700; margin-bottom: 8px; }
.va-name { font-size: 28px; font-weight: 700; color: #14161a; margin: 0 0 6px 0; }
.va-role { font-size: 14px; color: #4f46e5; margin-bottom: 15px; }
.va-bio { font-size: 14px; line-height: 1.5; color: #4a4a4a; }


/* ==========================================================================
   SITUATIE 1: MAAR ÉÉN CONTACTPERSOON (Oude stijl behouden, button rechts)
   ========================================================================== */
@media (min-width: 992px) {
    .va-layout-single .va-column {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
    }

    .va-layout-single .va-top-content {
        display: flex;
        align-items: center;
        gap: 30px;
    }

    .va-layout-single .va-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-width: 250px; /* Geeft de grote knop een mooie vaste breedte */
    }
}

/* Grote, opvallende knoppen voor de single situatie */
.va-layout-single .va-btn-p, 
.va-layout-single .va-btn-s {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease;
    box-sizing: border-box;
}

.va-btn-p {
	width: fit-content!important;
}

.va-layout-single .va-btn-p { background-color: #14161a; color: #fff; }
.va-layout-single .va-btn-p:hover { background-color: #2e3138; }
.va-layout-single .va-btn-s { background-color: transparent; border: 1px solid #14161a; color: #14161a; }
.va-layout-single .va-btn-s:hover { background-color: #14161a; color: #fff; }
.va-layout-single .va-btn-p svg, .va-layout-single .va-btn-s svg { width: 18px; height: 18px; }

/* Mobiel voor single */
@media (max-width: 991px) {
    .va-layout-single .va-top-content { display: flex; flex-direction: column; gap: 20px; margin-bottom: 25px; }
    .va-layout-single .va-actions { display: flex; flex-direction: column; gap: 12px; }
}


/* ==========================================================================
   SITUATIE 2: TWEE CONTACTPERSONEN (Nieuwe 50/50 split stijl met subtiele links)
   ========================================================================== */
.va-layout-multi {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.va-layout-multi .va-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}

.va-layout-multi .va-photo-wrapper { margin-bottom: 20px; }

/* Subtiele text-link buttons voor de multi-situatie */
.va-layout-multi .va-btn-p,
.va-layout-multi .va-btn-s {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #14161a;
    text-decoration: none;
    padding: 8px 0;
    transition: color 0.2s ease;
}

.va-layout-multi .va-btn-p:hover,
.va-layout-multi .va-btn-s:hover { color: #4f46e5; }
.va-layout-multi .va-btn-p svg, .va-layout-multi .va-btn-s svg { width: 16px; height: 16px; }
.va-layout-multi .va-actions { display: flex; gap: 20px; flex-wrap: wrap; margin-top: auto; }

/* Desktop split voor multi */
@media (min-width: 768px) {
    .va-layout-multi.va-count-2 {
        flex-direction: row;
        gap: 0;
    }

    .va-layout-multi.va-count-2 .va-column {
        padding: 0 50px;
    }

    .va-layout-multi.va-count-2 .va-column:first-child {
        padding-left: 0;
        border-right: 1px solid #e5e5e5; /* Verticale streep */
    }

    .va-layout-multi.va-count-2 .va-column:last-child {
        padding-right: 0;
    }
}

/* Mobiel voor multi */
@media (max-width: 767px) {
    .va-layout-multi.va-count-2 .va-column:first-child {
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 35px;
    }
}

/* Covolt Market Switcher – Covolt visual system */
.covolt-market-picker,
.covolt-market-picker * {
    font-family: "Space Grotesk", Sans-serif !important;
}

.covolt-market-picker {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    z-index: 1000 !important;
}

/* Header market button – intentionally flat, black and compact. */
.covolt-market-picker .covolt-market-toggle,
button.covolt-market-toggle {
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 22px 0 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-right: 1px solid rgba(255,255,255,.42) !important;
    outline: 0 !important;
    background: #000 !important;
    color: #fff !important;
    font-family: "Space Grotesk", Sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    box-shadow: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    transition: opacity .18s ease !important;
}

.covolt-market-picker .covolt-market-toggle:hover,
button.covolt-market-toggle:hover {
    background: #000 !important;
    border-color: rgba(255,255,255,.42) !important;
    color: #fff !important;
    opacity: .72 !important;
    transform: none !important;
}

.covolt-market-picker .covolt-market-toggle:active,
button.covolt-market-toggle:active {
    background: #000 !important;
    color: #fff !important;
    transform: none !important;
}

.covolt-market-picker .covolt-market-toggle:focus,
.covolt-market-picker .covolt-market-toggle:focus-visible,
button.covolt-market-toggle:focus,
button.covolt-market-toggle:focus-visible {
    outline: 0 !important;
    box-shadow: none !important;
}

.covolt-market-picker .covolt-market-current {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-family: "Space Grotesk", Sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

/* Static arrow: no rotation or animation. */
.covolt-market-picker .covolt-market-chevron {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    font-size: 0 !important;
    line-height: 1 !important;
    transform: none !important;
    transition: none !important;
}

.covolt-market-picker .covolt-market-chevron::before {
    content: "" !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
}

.covolt-market-picker .covolt-market-toggle[aria-expanded="true"] .covolt-market-chevron,
.covolt-market-picker .covolt-market-toggle[aria-expanded="true"] .covolt-market-chevron::before {
    transform: none !important;
    transition: none !important;
}

/* Dropdown: portal/fixed positioning can escape Elementor overflow. */
.covolt-market-picker .covolt-market-popover,
.covolt-market-popover {
    position: absolute !important;
    z-index: 2147483647 !important;
    width: 280px !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    color: #153332 !important;
    border: 1px solid #dfe6df !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.22) !important;
    font-family: "Space Grotesk", Sans-serif !important;
}

.covolt-market-popover.is-portal { position: fixed !important; }
.covolt-market-popover[hidden],
.covolt-market-banner[hidden] { display: none !important; }

.covolt-market-popover p {
    margin: 4px 10px 8px !important;
    padding: 0 !important;
    color: #68776f !important;
    font-family: "Space Grotesk", Sans-serif !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

.covolt-market-popover a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    margin: 0 !important;
    border-radius: 9px !important;
    color: #153332 !important;
    background: transparent !important;
    font-family: "Space Grotesk", Sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.covolt-market-popover a:hover,
.covolt-market-popover a[aria-current="true"] {
    background: #f0edff !important;
    color: #153332 !important;
}

.covolt-market-popover a[aria-current="true"] { font-weight: 600 !important; }
.covolt-market-popover a:focus-visible { outline: 2px solid #e0e957 !important; outline-offset: 2px !important; }

/* Full-width suggestion banner with 1400px content rail. */
.covolt-market-banner,
.covolt-market-banner * {
    font-family: "Space Grotesk", Sans-serif !important;
}

.covolt-market-banner {
    width: 100% !important;
    max-width: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 20px 0 !important;
    box-sizing: border-box !important;
    background: #f0edff !important;
    color: #153332 !important;
}

.covolt-market-banner .covolt-market-banner-inner {
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 32px !important;
}

.covolt-market-banner .covolt-market-banner-content { min-width: 0 !important; }
.covolt-market-banner .covolt-market-banner-content strong {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #153332 !important;
    font-family: "Space Grotesk", Sans-serif !important;
    font-size: 26px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}
.covolt-market-banner .covolt-market-banner-content p {
    margin: 6px 0 0 !important;
    padding: 0 !important;
    color: #153332 !important;
    font-family: "Space Grotesk", Sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}

.covolt-market-banner .covolt-market-banner-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
}

.covolt-market-banner .covolt-market-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 30px !important;
    border: 0 !important;
    border-radius: 28px !important;
    background: #6550f4 !important;
    color: #fff !important;
    font-family: "Space Grotesk", Sans-serif !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
.covolt-market-banner .covolt-market-primary:hover {
    background: #6550f4 !important;
    color: #fff !important;
    opacity: .82 !important;
}

.covolt-market-banner .covolt-market-stay {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 24px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #153332 !important;
    font-family: "Space Grotesk", Sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
.covolt-market-banner .covolt-market-stay:hover {
    background: transparent !important;
    color: #153332 !important;
    opacity: .72 !important;
}
.covolt-market-banner button { font-family: "Space Grotesk", Sans-serif !important; }

@media (max-width: 850px) {
    .covolt-market-banner { padding: 18px 0 !important; }
    .covolt-market-banner .covolt-market-banner-inner {
        padding: 0 20px !important;
        display: block !important;
    }
    .covolt-market-banner .covolt-market-banner-content strong { font-size: 22px !important; }
    .covolt-market-banner .covolt-market-banner-content p { font-size: 15px !important; }
    .covolt-market-banner .covolt-market-banner-actions {
        margin-top: 16px !important;
        flex-wrap: wrap !important;
    }
}

@media (max-width: 480px) {
    .covolt-market-banner .covolt-market-banner-actions {
        align-items: stretch !important;
        flex-direction: column !important;
    }
    .covolt-market-banner .covolt-market-primary,
    .covolt-market-banner .covolt-market-stay {
        justify-content: center !important;
        width: 100% !important;
    }
    .covolt-market-picker { max-width: 100% !important; }
    .covolt-market-picker .covolt-market-toggle { max-width: 100% !important; }
}