/*** Basic style v1 ***/

/*** ---------- Font Display Optimization ---------- ***/
@font-face {
    font-family: 'Font Awesome 6 Pro';
    font-display: swap;
    src: local('Font Awesome 6 Pro');
}

@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-display: swap;
    src: local('Font Awesome 6 Brands');
}

/*** ---------- Global ---------- ***/
:root {
    --ts-100: 1000ms; --ts-95: 950ms; --ts-90: 900ms; --ts-85: 850ms; --ts-80: 800ms; --ts-75: 750ms; --ts-70: 700ms; --ts-65: 650ms; --ts-60: 600ms; --ts-55: 550ms; --ts-50: 500ms; --ts-45: 450ms; --ts-40: 400ms; --ts-35: 350ms; --ts-30: 300ms; --ts-25: 250ms; --ts-20: 200ms; --ts-15: 150ms; 
}

/*** Disable animations & transitions ***/
@media (prefers-reduced-motion) {
    *, *::before, *::after { transition: 0s; animation: none; }
    :root {
        --ts-100: 0; --ts-95: 0; --ts-90: 0; --ts-85: 0; --ts-80: 0; --ts-75: 0; --ts-70: 0; --ts-65: 0; --ts-60: 0; --ts-55: 0; --ts-50: 0; --ts-45: 0; --ts-40: 0; --ts-35: 0; --ts-30: 0; --ts-25: 0; --ts-20: 0; --ts-15: 0;
    }
}

*, *::before, *::after { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; box-sizing: border-box; margin: 0; padding: 0; }
html { font-family: var(--font-primary); font-size: 10px; height: -webkit-fill-available; scroll-behavior: smooth; }
body { font-size: var(--fs); line-height: var(--lh); color: var(--clr-text); min-height: 100dvh; overflow-x: hidden; min-height: -webkit-fill-available; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; 
    --no-scroll { overflow: hidden; }
}
.wpb-pagewrapper { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

/*** ---------- Buttons ---------- ***/
a { color: var(--clr-text); }

.btn, .gform_button, .gform_next_button, .gform_previous_button, .button, .swiper-button-prev, .swiper-button-next { 
    --fs: 1.6rem; 
    --lh: 1; 
    --base-p: .6rem;
    --p: var(--base-p); 
    --br: 5rem; 
    --gap: 1.6rem;
    --tsd: var(--ts-20);
    --tsf: var(--ts-function);
    --tsp: color, opacity, background-color, border-color, box-shadow, -webkit-box-shadow;

    --icon-clr: var(--clr-text);
    --icon-bg-clr: #fff;
    --hover-icon-clr: var(--icon-clr);
    --focus-icon-clr: var(--hover-icon-clr);
    --active-icon-clr: var(--focus-icon-clr);

    --clr: #fff; --bg-clr: var(--clr-primary); --border: 1px solid var(--clr-primary); --box-shadow: none; 
    --hover-clr: var(--clr); --hover-bg-clr: var(--bg-clr); --hover-border: var(--border); --hover-box-shadow: var(--box-shadow); 
    --focus-clr: var(--hover-clr); --focus-bg-clr: var(--hover-bg-clr); --focus-border: var(--hover-border); --focus-box-shadow: none;
    --active-clr: var(--focus-clr); --active-bg-clr: var(--focus-bg-clr); --active-border: var(--focus-border); --active-box-shadow: var(--focus-box-shadow); 

    display: inline-flex; justify-content: start; align-items: center; min-height: 5.2rem; font-weight: 600; gap: 0; font-size: var(--fs); line-height: var(--lh); padding: var(--p); color: var(--clr); background-color: var(--bg-clr); border-radius: var(--br); border: var(--border); box-shadow: var(--box-shadow); text-align: start; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; transition-duration: var(--tsd); transition-timing-function: var(--tsf); font-family: var(--font-primary); transition-property: var(--tsp);

    span { font: inherit; color: inherit; }

    i { --size: 4rem; width: var(--size); height: var(--size); border-radius: 50%; display: inline-grid; place-items: center;  transition-duration: var(--tsd); transition-timing-function: var(--tsf); transition-property: opacity, width, transform, margin, background-color, color;

        &.icon-before{ margin-right: var(--gap); }
        &.icon-after{ margin-left: 0px; transform: scale(0); opacity: 0; width: var(--gap); }
    }
    &:has(> *:not(svg)){ padding-right: var(--gap); }
    &:has(.icon-after){ padding-right: var(--base-p); 
        &:hover i.icon-before{ transform: scale(0); opacity: 0; width: var(--gap); margin-right: 0px; }
        &:hover i.icon-after{ transform: scale(1); opacity: 1; width: var(--size); margin-left: var(--gap); }
    }

    i[class*="fa-"] { color: var(--icon-clr); background-color: var(--icon-bg-clr); flex-shrink: 0; }
    i.wpb-icon { --clr: var(--icon-clr); background-color: var(--icon-bg-clr); 
        &::after { background: var(--icon-clr); }
    }

    &:hover { color: var(--hover-clr)!important; background-color: var(--hover-bg-clr)!important; border: var(--hover-border)!important; box-shadow: var(--hover-box-shadow)!important;
        i { color: var(--hover-icon-clr); }
    }
    &:focus { color: var(--focus-clr)!important; background-color: var(--focus-bg-clr)!important; border: var(--focus-border)!important; box-shadow: var(--focus-box-shadow)!important; 
        i { color: var(--focus-icon-clr); }
    }
    &:active { color: var(--active-clr)!important; background-color: var(--active-bg-clr)!important; border: var(--active-border)!important; box-shadow: var(--active-box-shadow)!important; 
        i { color: var(--active-icon-clr); }
    }

    /* Button sizes */
    &.btn--small { --p: 0 1.6rem; --fs: 1.6rem; min-height: 4rem; }
    &.btn--large { --p: 0 2.4rem; --fs: 1.6rem; min-height: 5.4rem; }

    /* Ghost button */
    &.btn--ghost::before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

    /* Button variations */
    &.btn--primary { --border: 1px solid transparent; --hover-border: 1px solid var(--hover-bg-clr); }
    &.btn--square { --p: 0; aspect-ratio: 1/1; }
    &.btn--white { --icon-clr: var(--clr-dark); --icon-bg-clr: var(--clr-light); --clr: var(--clr-dark); --bg-clr: #fff; --border: 1px solid #fff; --box-shadow: none; }
    &.btn--transparent { --clr: var(--clr-dark); --bg-clr: transparent; --border: 1px solid transparent; --box-shadow: none; --icon-bg-clr: transparent; }
    /* &.btn--outline { --clr: var(--clr-dark); --bg-clr: transparent; --border: 1px solid var(--clr-border); --hover-border: 1px solid transparent; --hover-bg-clr: var(--clr-tertiary); --box-shadow: none; } */
    &.btn--link { --base-p: 0px; --gap: 1rem; --clr: var(--clr-dark); --bg-clr: transparent; --border: 1px solid transparent; --box-shadow: none; --icon-bg-clr: var(--clr-light); gap: var(--gap);
        & i{ --size: 4rem; }
        &:hover{ opacity: .7; }
    }

    &.btn--bookmark {
        i { pointer-events: none; }
        i.fa-solid { display: none; }
        &[data-bookmarked="true"] i.fa-regular { display: none; }
        &[data-bookmarked="true"] i.fa-solid { display: block; }
    }
}

.btn-group { --gap: 1.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); --mt: 2.4rem; 
    &.btn-group--center { justify-content: center; }
}  

/*** ---------- Snippets ---------- ***/
.wpb-google-review { text-decoration: none; font-size: 1.4rem!important; display: inline-grid; grid-template-columns: 1.6rem 1fr auto; column-gap: 1.2rem; align-items: center;
    .wpb-google-review__icon { width: 1.6rem; height: 1.6rem; }
}

.wpb-usps { --usp-count: 1; --gap: 3.2rem; --gc: min(var(--usp-count), 1);
    .wpb-usps__lines { --clr-lines: var(--clr-border); height: 2.8rem; overflow: hidden; display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: var(--gap); margin-bottom: -2.8rem;
        .wpb-usp__line { position: relative; width: calc(100% + var(--gap)); height: 2.8rem; border-top: 1px solid var(--clr-lines);
            &:first-child { width: calc(100% + 2rem); margin-left: 2rem;
                &::before { left: 0; bottom: 0; }
                &::after { left: 0; }
            }
            &:last-child { width: 2.1rem; }
        }
    }
    .wpb-usps__items { padding-left: 0; overflow: hidden; list-style: none; color: var(--clr-contrast); display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: var(--gap); 
        .wpb-usp { --icon-size: 4rem; padding-top: 2.3rem; display: flex; align-items: start; column-gap: 1.6rem; position: relative; margin-top: .4em;
            &::before { content: ''; position: absolute; left: 2rem; bottom: calc(100% - 2.3rem); height: 1000rem; border-left: 1px solid var(--clr-border); }
            &::after {content: ''; position: absolute; left: 2rem; top: 2rem; width: .7rem; height: .7rem; transform: rotate(45deg); transform-origin: top; background-color: var(--clr-border); z-index: 3; }  
            .wpb-usp__icon { z-index: 1; color: var(--clr-dark); display: grid; place-items: center; min-width: var(--icon-size); width: var(--icon-size); height: var(--icon-size); border-radius: .4rem; background-color: #fff;
                /* i {--icon-clr: var(--clr-light);} */
                span { font-weight: 600; }
            }
            .wpb-usp__text { line-height: 1;
                & > strong{ line-height: 1; font-size: clamp(1.6rem, 1.4vw, 1.8rem); }
                p{ margin-top: .8rem; font-size: clamp(1.4rem, 1vw, 1.6rem); line-height: 1.7; }
            }
        }
    }
}

@media (max-width: 991.98px) {
    .wpb-usps .wpb-usps__lines { display: none; }
}

.wpb-usps--vertical { --gc: 1;
    .wpb-usps__lines { display: none; }
    .wpb-usps__items { grid-template-columns: 1fr; gap: 0; overflow: visible;
        .wpb-usp{ position: relative;
            &::before{ height: 100%; }
            &::after{ display: none; }

            &:first-child::before { top: -4rem; height: calc(100% + 8.3rem); border-left: none; background: linear-gradient(to bottom, transparent 0%, var(--clr-border) 6rem, var(--clr-border) 100%); width: 1px; }
            .wpb-usp__icon{ position: relative; --offset: calc((var(--icon-size) - .7rem) / 2); --size: .7rem; background-color: var(--clr-primary); color: #FFF;
                &::before{ content: ''; position: absolute; left: var(--offset); top: calc(-1 * (var(--size) / 2)); width: var(--size); height: var(--size); transform: rotate(45deg); background-color: var(--clr-border); z-index: 3; }
                &::after{ content: ''; position: absolute; left: var(--offset); bottom: calc(-1 * (var(--size) / 2)); width: var(--size); height: var(--size); transform: rotate(45deg); background-color: var(--clr-border); z-index: 3; }

                .wpb-usp:last-child &::after{ display: none; }
            }
        }
    }
}

@media (min-width: 992px) {
    .wpb-usps { --gc: min(var(--usp-count), 2); 
        .wpb-usps__lines .wpb-usp__line:nth-child(2n) { width: 2.1rem; }
    }
}


/*** ---------- Case USP's ---------- ***/
.wpb-case-usps{ --mt: clamp(2.4rem, 3vw, 3.2rem); --main-clr: var(--clr-primary); --main-fs: clamp(2.4rem, 2.4vw, 3.2rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; padding-left: 0 !important;
    .wpb-case-usps__item{ display: flex; flex-direction: column; gap: .8rem; margin: 0;
        & strong{ font-size: var(--main-fs); font-weight: 500; color: var(--main-clr); }
        .wpb-case-usps__item__title{ font-size: clamp(1.2rem, 1.4vw, 1.6rem); }
    } 
}

/*** ---------- Check USP's ---------- ***/
.wpb-check-usps{ --mt: clamp(2.4rem, 3vw, 3.2rem); --br: .4rem; --icon-size: 2.4rem; --icon-clr: var(--clr-dark); --icon-bg-clr: #FFF; display: flex; align-items: start; flex-wrap: wrap; gap: clamp(1rem, 1.5vw, 2rem); padding-left: 0 !important;
    .wpb-check-usps__item{ display: flex; align-items: start; gap: 1rem; color: var(--clr-contrast, var(--clr-text)); margin: 0; font-size: clamp(1.4rem, 1.5vw, 1.6rem); font-weight: 500; line-height: 1.3;
        &:before{ content: '\f00c'; font-family: var(--font-fa); font-size: 1.4rem; font-weight: 900; width: var(--icon-size); height: var(--icon-size); min-width: var(--icon-size); min-height: var(--icon-size); border-radius: var(--br); color: var(--icon-clr); background-color: var(--icon-bg-clr); display: inline-grid; place-items: center; line-height: 0; }
    } 
}


/*** ---------- Block: Header ---------- ***/
.wpb-header { --pb: 0; padding-bottom: var(--pb);

    .wpb-header__body { position: relative; z-index: 2;
        .wpb-text { --mt: .5em; font-size: clamp(2.3rem, 2vw, 3rem); line-height: 1.2; 
            .btn-group { --mt: 3.2rem; }  
            .wpb-google-review { --mt: 3.2rem; }
        } 
    }
    .wpb-header__bg-assets { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; overflow: hidden; }

    /* Header dots */
    &.wpb-header--has-dots{ --mask: var(--dot-mask); --mask-clr: rgba(255,255,255,.2);
        &::before { pointer-events: none; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-mask-image: var(--mask); mask-image: var(--mask); -webkit-mask-size: 1.8rem; mask-size: 1.8rem; -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-position: left top; mask-position: left top; background: var(--mask-clr); }

        &.wpb-bg-clr--transparent{ --mask-clr: rgba(0, 0, 0, 0.1);
            &::before { -webkit-mask-image: var(--mask), var(--dot-fade); mask-image: var(--mask), var(--dot-fade); -webkit-mask-composite: source-in; mask-composite: intersect; }
        }
        &.wpb-bg-clr--dark{
            .wpb-header__bg-assets .wpb-asset { top: 0; right: 0; transform: translate(13%, -26%); opacity: .25; }
        }
    }


    /* Variations */
    &.wpb-header--home { --pb: 4.8rem; overflow: hidden;
        .wpb-header__body { display: grid; grid-template-columns: 1fr; gap: 4.8rem; padding: 0 1.8rem; }
        .wpb-text p{ font-size: clamp(1.8rem, 2.4vw, 3rem); line-height: 1.3; }
        .wpb-image { display: none; position: relative;
            &::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200%; height: 150%; border-radius: 100%; z-index: -1; background: radial-gradient(rgba(var(--clr-tertiary-rgb), .5) 0%, transparent 70%); pointer-events: none; }
            .wpb-ratio { --wpb-aspect-ratio: 81%; }
        }
        .wpb-video { position: relative;
            &::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200%; height: 150%; border-radius: 100%; z-index: -1; background: radial-gradient(rgba(var(--clr-tertiary-rgb), .5) 0%, transparent 70%); pointer-events: none; }
            .wpb-ratio { --wpb-aspect-ratio: 81%; }
        } 
        .wpb-header__usps { --mt: 3.2rem; margin-top: var(--mt); position: relative; z-index: 3;
            .wpb-usps { position: relative;
                &::before { content: ''; position: absolute; left: 2rem; bottom: 100%; width: 1px; height: calc(var(--mt) * 2); background: linear-gradient(to top, var(--clr-border) 0%, transparent 75%); }
            }
        }
    }
    &.wpb-header--subpage{ --gc: 1; --gap: 2.4rem; --overlap: clamp(1.2rem, 3vw, 5.5rem); --pt: clamp(2.4rem, 4vw, 6.4rem);
        .wpb-header__body{ overflow-x: clip; }
        .wpb-header__body h1{ text-wrap: pretty; }
        .wpb-header__body .container{ display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: var(--gap); align-items: center; }
        .wpb-header__body .wpb-image, .wpb-header__body .wpb-video{ display: inline-grid; }
        .wpb-header__body .wpb-ratio { --wpb-aspect-ratio: 90%; }
        .wpb-header__bg-assets .wpb-asset--ada-fill{ --w: clamp(32rem, 70vw, 127.5rem); top: -20rem; right: -10%; }
        
        /* Achtergrond */
        &.wpb-bg-clr--transparent{ --overlap: 0px; 
            .wpb-asset{ --asset-clr: #FFFF; }

            .wpb-header__body .wpb-ratio{ position: relative;
                &::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(to top left, rgb(var(--clr-tertiary-rgb), .4), rgb(var(--clr-primary-rgb), 0) 40%); border-radius: var(--br); pointer-events: none; }
            }
        }
        &.wpb-bg-clr--dark{
            .wpb-header__body .wpb-ratio{ position: relative; margin-bottom: calc(-1 * (var(--overlap) + var(--pb, 0px))); min-height: calc(100% + var(--overlap) + var(--pb, 0px)); }
            .wpb-header__body :is(.wpb-video, .wpb-image){ position: relative;
                &::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 180%; height: 180%; border-radius: 100%; z-index: -1; background: radial-gradient(rgba(var(--clr-tertiary-rgb), .5) 0%, transparent 50%); pointer-events: none; }
            }
            &.wpb-header--subpage-spotlight{
                .wpb-header__body .wpb-ratio{ border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
                .wpb-header__body .wpb-ratio :is(img, video){ border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

                .wpb-header__body .wpb-image,
                .wpb-header__body .wpb-video{ min-height: auto;
                    &::after { width: 200%; height: 240%; background: radial-gradient(rgba(var(--clr-tertiary-rgb), .5) 0%, transparent 50%); pointer-events: none; }
                }
            }
        }

        /* Variant */
        &.wpb-header--subpage-spotlight{ --gc: 1 !important; --overlap: 0 !important; --offset-x: 0px; overflow: hidden;
            &:has(.wpb-ratio){ padding-bottom: 0; }
            .container{ --max-width: calc(var(--wpb-width, 100%) - var(--offset-x)); max-width: var(--max-width); }
            .wpb-header__body .wpb-text{ text-align: center; max-width: 100rem; margin-left: auto; margin-right: auto; }
            .wpb-header__body .wpb-text .btn-group{ justify-content: center; }
            .wpb-header__body .wpb-ratio{ --wpb-aspect-ratio: clamp(18rem, 50%, 44rem); }
        }
        &.wpb-header--subpage-cases h1{  --fs: clamp(2.4rem, 3vw, 4.4rem); }
    }
}

@media (min-width: 576px) {
    .wpb-header {  

        /* Variations */
        &.wpb-header--home { 
            .wpb-header__body { max-width: 54rem; margin: auto;  }
            .wpb-text .btn-group { display: flex; }
        }
        &.wpb-header--subpage{ --gap: 4rem; }
        &.wpb-header--subpage.wpb-header--subpage-spotlight{ --offset-x: 3.2rem; }
    }
}

@media (min-width: 768px) {
    .wpb-header {

        /* Variations */
        &.wpb-header--home { --pb: 6.4rem;  
            .wpb-header__body { max-width: 720px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .wpb-text { grid-column: span 2; }
            .wpb-image { display: block; }
            .wpb-header__usps { --mt: 6.4rem; }
        }

        &.wpb-header--subpage{ --gc: 2; }
        &.wpb-header--subpage.wpb-header--subpage-spotlight{ --offset-x: 6.4rem; }
        &.wpb-header--subpage-cases .wpb-text{ padding-top: clamp(4.8rem, 5.4vw, 7rem); }
    }
}

@media (min-width: 992px) {
    .wpb-header {  

        /* Variations */
        &.wpb-header--home { --elements-offset: 4.8rem; --pb: 8rem; 
            .wpb-header__body { max-width: 100%; padding: 0; display: grid; grid-template-columns: 1fr 3fr 1fr; }
            .wpb-text { grid-column: span 1; text-align: center;
                .btn-group { justify-content: center; }
            }
            .wpb-video, .wpb-image { width: calc(100% + var(--elements-offset)); }
            .wpb-video { order: -1; margin-left: calc(var(--elements-offset) * -1);
                .wpb-ratio { --wpb-aspect-ratio: 105%; }
            }
            .wpb-image { margin-right: calc(var(--elements-offset) * -1); 
                .wpb-ratio { --wpb-aspect-ratio: 97%; }
            }
            .wpb-header__usps { --mt: 8rem; }
        }
        &.wpb-header--subpage.wpb-header--subpage-spotlight{ --offset-x: 9.6rem; }
        &.wpb-header--subpage .wpb-header__bg-assets .wpb-asset--ada-fill{ top: -40rem; }
    }
}

@media (min-width: 1200px) {
    .wpb-header { 
        /* Variations */
        &.wpb-header--home { --elements-offset: 10rem; --pb: 10rem;
            .wpb-header__body { grid-template-columns: 1fr 2fr 1fr; column-gap: 6.4rem; align-items: center; }
            .wpb-header__usps { --mt: 13rem; 
                .wpb-usps { --gc: min(var(--usp-count), 4);
                    .wpb-usps__lines .wpb-usp__line:nth-child(2n) { width: calc(100% + var(--gap)); }
                    .wpb-usps__lines .wpb-usp__line:nth-child(4n) { width: 2.1rem; }
                }
            }
        }  
        &.wpb-header--subpage{ --gap: 7.6rem; }
        &.wpb-header--subpage.wpb-header--subpage-spotlight{ --offset-x: 12.5rem; }
    }
}

@media (min-width: 1400px) {
    .wpb-header { 
        /* Variations */
        &.wpb-header--home .wpb-header__body { column-gap: 7.2rem; grid-template-columns: 10fr 15fr 11fr; }
    }
}

@media (min-width: 1800px) {
    .wpb-header { 
        /* Variations */
        &.wpb-header--home .wpb-header__body { column-gap: 9rem; grid-template-columns: 10fr 14fr 11fr; }
    }
}



/*** ---------- Accordion ---------- ***/
.wpb-accordion { --br: 2rem; --bg: #fff; --icon-size: 4rem; --icon-bg: var(--clr-light); --gap: 2rem; --p: 1.8rem; --tsd: var(--ts-duration); --tsf: var(--ts-function); --tsp: color, background-color, border-color, box-shadow, height, border-radius; 

    .collapse:not(.show) { display: none; }

    .wpb-accordion__item { color: var(--clr); border-radius: var(--br); overflow: hidden;
        .wpb-accordion__header { --fs: 1.8rem; margin: 0; }
        .wpb-accordion__button { font: inherit; color: inherit; cursor: pointer; display: grid; grid-template-columns: var(--icon-size) 1fr; column-gap: var(--gap); align-items: center; width: 100%; font-size: 1.6rem; text-align: left; padding: var(--p); background-color: var(--bg); border: 0; overflow-anchor: none; border-radius: 0; transition-duration: var(--tsd); transition-timing-function: var(--tsf); transition-property: var(--tsp), padding-bottom;
            span { font-size: clamp(1.8rem, 2vw, 2.4rem); font-weight: 500; }
            .wpb-accordion__icon{ width: var(--icons-size); height: var(--icon-size); min-width: var(--icon-size); min-height: var(--icon-size); background-color: var(--icon-bg); border-radius: 50%; position: relative; display: inline-grid; place-items: center;
                i { position: absolute; top: auto; right: auto; bottom: auto; left: auto; transition: opacity var(--tsd) var(--tsf), transform var(--tsd) var(--tsf); }
                i.icon-open{ opacity: 0; transform: scale(2) translateX(-.5rem); }
            }
            &.is-active { padding-bottom: .4rem;
                .wpb-accordion__icon .icon-open{ opacity: 1; transform: scale(1) translateX(0); }
                .wpb-accordion__icon .icon-closed{ opacity: 0; }
            }
        }
        .wpb-accordion__body { background-color: #fff; padding: 0 var(--p) var(--p) calc(var(--p) + var(--icon-size) + var(--gap)); }    
        .collapsing { height: 0; overflow: hidden; transition: height var(--tsd) var(--tsf); }

        + .wpb-accordion__item{ margin-top: 1rem; }
    }
}
@media(min-width: 768px){
    .wpb-accordion{ --p: 2.4rem; }
}
@media(min-width: 1200px){
    .wpb-accordion{ --p: 3.2rem; }
}

/*** ---------- Images ---------- ***/
.wpb-image { --br: 2rem; position: relative;
    img { border-radius: var(--br); }
    figcaption { display: block; padding-top: .5rem; font-size: 1.4rem; }

    &.wpb-image--ada-mask { --br: 0; position: relative; 
        &::before { content: ''; display: block; padding-top: 60%; }
        > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; 
            
            -webkit-mask-image: url('/app/themes/wuxnl-theme/assets/img/ada_icon.svg'); 
            mask-image: url('/app/themes/wuxnl-theme/assets/img/ada_icon.svg'); 
            -webkit-mask-size: cover; mask-size: cover; 
            -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; 
            -webkit-mask-position: bottom; mask-position: bottom; 
        }
    }
}



img { display: block; width: 100%; height: auto; }

/*** ----- Sections ----- ***/
section { position: relative; }
.has-background-image { position: relative;
    .container { z-index: 1; }
    .wpb-text :is(h1, h2, h3, h4, h5, p, ul, ul li, ol, ol li, .wpb-breadcrumbs, .wpb-breadcrumbs *, em) { color: #fff; }
    &::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.5); }
}

img.is-background-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%!important; object-fit: cover; }
figure.is-background-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
figure.is-background-image img { width: 100%; height: 100%!important; object-fit: cover; }

.wpb-section__header { --section-mw: clamp(58rem, 50vw, 84rem); margin-bottom: 3.2rem;
    .container { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 1.6rem; }
    .wpb-text { margin: 0; }
}

@media(min-width: 768px) {
    .wpb-section__header { margin-bottom: 4.8rem; }
}

@media(min-width: 1200px) {
    .wpb-section__header { margin-bottom: 6.4rem; }
}


/*** ---------- Icons ---------- ***/
.wpb-icon { --src: ; --icon-clr: var(--clr-dark); --w: 1.8rem; --h: 1.8rem; display: inline-flex; background: transparent; 
    &::after { content:''; -webkit-mask-image: var(--src); mask-image: var(--src); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; display: inline-block; width: var(--w); height: var(--h); min-width: var(--w); min-height: var(--h); background-color: var(--icon-clr); transition: background-color var(--ts-duration) var(--ts-function); }

    &.wpb-icon--ada { --src: url('/app/themes/wuxnl-theme/assets/icons/ada.svg'); --w: 1.2rem; --h: 1.3rem; }
}

/*** ---------- Typography ---------- ***/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { hyphens: auto; color: var(--clr-text); font-size: var(--fs); line-height: var(--lh); text-wrap: balance; font-weight: 500; }
h1, .h1 { --fs: clamp(3.6rem, 4vw, 7rem); --lh: 1.2; }
h2, .h2 { --fs: clamp(3.2rem, 3vw, 6rem); --lh: 1; }
h3, .h3 { --fs: clamp(2.4rem, 3vw, 4rem); --lh: 1.2; }
h4, .h4 { --fs: 1.8rem; --lh: 1.2; }
h5, .h5 { --fs: 1.6rem; --lh: 1.2; }
h6, .h6 { --fs: 1.4rem; --lh: 1.2; }

.wpb-text { --mt: clamp(1.6rem, 2.5vw, 3.2rem); 
    > * + *:not(.btn .blockquote) { margin-top: var(--mt); } 
    ul, ol { padding-left: 2rem;
        li { font: inherit; }
        li + li{ margin-top: .4em; }
    }
    a:not(.btn) { font: inherit; text-underline-offset: .25rem; }
    blockquote { border-left: 4px solid #f2f2f2; padding-left: 1.6rem; }
    iframe { width: 100%; height: 100%; aspect-ratio: 16/9; border-radius: 2rem; }
    &.is-sticky { position: -webkit-sticky; position: sticky; top: 4rem; }


    p{ --fs: clamp(1.4rem, 1.5vw, 1.6rem); --mt: clamp(1.2rem, 1.8vw, 2.4rem); --fw: 400; font-size: var(--fs); font-weight: var(--fw); line-height: 1.7;
        &:has(+ :is(h1, h2, h3)):has(em){ --clr: var(--clr-primary); --fs: clamp(2rem, 2.8vw, 3.6rem); font-weight: var(--fw);
            &:has(+ h3){ --fs: clamp(1.8rem, 2vw, 2.4rem); }

            em { font-size: var(--fs); font-weight: var(--fw); color: var(--clr); font-style: normal; }
        }
        &:has(em) + :is(h1, h2, h3) { --mt: clamp(1.2rem, 1.8vw, 2.4rem); }
    }
    &.wpb-text--big-paragraph p{ --fs: clamp(1.6rem, 2vw, 2.4rem); line-height: 1.5; }
}

/*** ---------- Cards ----------  ***/
.card-container { container: card-container / inline-size; 
    .wpb-card { height: 100%; }
}

.wpb-card { --br: 1rem; --p: 2rem; --bg: #FFF; border-radius: var(--br); border: 1px solid var(--clr-border); background-color: var(--bg); display: flex; flex-direction: column; position: relative; text-decoration: none; 
    a { text-decoration: none; }
    .wpb-card__header { display: flex; overflow: hidden; 
        img { width: 100%; height: auto; }
    }
    .wpb-card__body { padding: var(--p); -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
    .wpb-card__footer  { padding: var(--p); padding-top: 0; }
    .wpb-card__title { --fs: clamp(2rem, 2.2vw, 3.1rem); --fw: 500; --lh: 1.1; display: block; font-size: var(--fs); font-weight: var(--fw); line-height: var(--lh); }

    > *:first-child { border-top-left-radius: var(--br); border-top-right-radius: var(--br); 
        img { border-top-left-radius: var(--br); border-top-right-radius: var(--br); } 
    }
    > *:last-child { border-bottom-left-radius: var(--br); border-bottom-right-radius: var(--br); }
}
.wpb-card.wpb-card--news { --br: 0; --bg: transparent; --inner-clr: var(--clr-contrast-rgb, var(--clr-text-rgb)); --image-size: 10rem; border: none; border-bottom: 1px solid rgb(var(--inner-clr), .15); gap: var(--p);
    .wpb-card__header{ position: relative; padding-bottom: var(--image-size); border-radius: calc(var(--image-size) / 8); width: var(--image-size); min-width: var(--image-size); max-width: var(--image-size); height: var(--image-size); }
    .wpb-card__header img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
    .wpb-card__body { display: flex; flex-direction: column; padding: 0; padding-bottom: var(--p); }
    .wpb-card__body .btn-group{ margin-top: auto; }
    .wpb-card__body .btn{ margin-top: clamp(1.2rem, 1.4vw, 2rem); }

    .wpb-card__title{ margin-top: clamp(.8rem, 1vw, 1.6rem); color: rgb(var(--inner-clr)); transition: opacity var(--ts-duration) var(--ts-function); }
    .excerpt { --excerpt-line-clamp: 2; --fs: clamp(1.4rem, 1.5vw, 1.6rem); margin-top: clamp(1.2rem, 1.4vw, 2rem); font-size: var(--fs); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: var(--excerpt-line-clamp); -webkit-box-orient: vertical; overflow: hidden; color: rgb(var(--inner-clr)); }

    &:hover .wpb-card__title{ opacity: .7; }
}
.wpb-card.wpb-card--cases { --br: 2rem; --p: 2.4rem; --bg: #FFFF; --thumbnail-overlay: linear-gradient(to top left, rgb(var(--clr-tertiary-rgb), .67), rgb(var(--clr-primary-rgb), 0) 40%); --aspect-ratio: min(50%, 30rem); border: none;
    .wpb-card__header{ position: relative; padding-bottom: var(--aspect-ratio); overflow: hidden;
        img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--ts-duration) var(--ts-function); }
        &::before{ content: ''; position: absolute; top: 0; right: -10rem; bottom: 0; left: 0; background: var(--thumbnail-overlay); z-index: 1; pointer-events: none; transition: transform var(--ts-function) var(--ts-duration); }
    }
    .wpb-card__body{
        .wpb-card__title{ --excerpt-line-clamp: 3; --lh: 1.2; margin-top: clamp(1.2rem, 1.8vw, 2.4rem); display: -webkit-box; -webkit-line-clamp: var(--excerpt-line-clamp); -webkit-box-orient: vertical; overflow: hidden; }
        .btn{ margin-top: clamp(1.6rem, 2.4vw, 3.2rem); }
    } 

    &:hover .wpb-card__header img{ transform: scale(110%) translateX(-3%); }
    &:hover .wpb-card__header::before{ content: ''; transform: translateX(-10rem); }
}

.card-container:has( .wpb-card--blurb) { height: 100%; }
.wpb-card.wpb-card--blurb { --br: 2rem; --p: 2.4rem; --bg: #FFFF; --thumbnail-overlay: linear-gradient(to top left, rgb(var(--clr-tertiary-rgb), .67), rgb(var(--clr-primary-rgb), 0) 40%); --aspect-ratio: min(50%, 30rem); border: none;
    .wpb-card__header{ position: relative; padding-bottom: var(--aspect-ratio); overflow: hidden;
        img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--ts-duration) var(--ts-function); }
        &::before{ content: ''; position: absolute; top: 0; right: -10rem; bottom: 0; left: 0; background: var(--thumbnail-overlay); z-index: 1; pointer-events: none; transition: transform var(--ts-function) var(--ts-duration); }
    }
    .wpb-card__body{
        .wpb-card__title{ --excerpt-line-clamp: 3; --lh: 1.2; margin-top: clamp(1.2rem, 1.8vw, 2.4rem); display: -webkit-box; -webkit-line-clamp: var(--excerpt-line-clamp); -webkit-box-orient: vertical; overflow: hidden; }
        .btn{ margin-top: clamp(1.6rem, 2.4vw, 3.2rem); }
        p { font-size: 1.6rem; }
    } 

    .wpb-card__footer .btn::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%;}

    &:hover .wpb-card__header img{ transform: scale(110%) translateX(-3%); }
    &:hover .wpb-card__header::before{ content: ''; transform: translateX(-10rem); }
}

.wpb-card.wpb-card--reviews { --br: 2rem; --p: 2.4rem; --bg: #FFFF; --thumbnail-overlay: linear-gradient(to top left, rgb(var(--clr-tertiary-rgb), .67), rgb(var(--clr-primary-rgb), 0) 40%); --aspect-ratio: min(50%, 30rem); border: none;
    .wpb-card__header{ position: relative; padding-bottom: var(--aspect-ratio); overflow: hidden;
        img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--ts-duration) var(--ts-function); }
        &::before{ content: ''; position: absolute; top: 0; right: -10rem; bottom: 0; left: 0; background: var(--thumbnail-overlay); z-index: 1; pointer-events: none; transition: transform var(--ts-function) var(--ts-duration); }
    }
    .wpb-card__body{
        .wpb-card__title{ --excerpt-line-clamp: 3; --lh: 1.2; margin-top: clamp(1.2rem, 1.8vw, 2.4rem); display: -webkit-box; -webkit-line-clamp: var(--excerpt-line-clamp); -webkit-box-orient: vertical; overflow: hidden; }
        .btn{ margin-top: clamp(1.6rem, 2.4vw, 3.2rem); }
        p { font-size: 1.6rem; }
    } 
    .wpb-card__title{ --fs: clamp(2.4rem, 2.6vw, 3.8rem); }
}

.wpb-card.wpb-card--solution { border: none; --p: 2.4rem; border-radius: 2rem; overflow: hidden; --br: 0;
    .wpb-ratio { --wpb-aspect-ratio: 53.25%; border-radius: 0; }
    img { height: 100%; }
    .wpb-card__body { display: flex; flex-direction: column; gap: 2.4rem;
            .btn-group { margin-top: auto; 
        }
    }
    * { transition: 200ms ease; }
    &:hover img {  transform: scale(1.05);  }
}

.wpb-card.wpb-card--company { border: none; aspect-ratio: 1/1; --br: 2rem;
    .wpb-card__body { display: grid; place-items: center; 
        .wpb-image { --br: 0;
            img {max-height: 12rem;}
        }
    }
}

.wpb-card.wpb-card--team-cta{ --br: 2rem; --p: 2.4rem; --aspect-ratio: min(110%, clamp(32rem, 64vw, 62rem)); overflow: hidden; border: none;
    .wpb-card__header{ position: relative; padding-bottom: var(--aspect-ratio); --backdrop-1: linear-gradient(to top left, rgb(var(--clr-tertiary-rgb), .5), rgb(var(--clr-primary-rgb), 0) 50%); --backdrop-2: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 50%);
        img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform var(--ts-duration) var(--ts-function); }
        &::before, &::after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; transition: transform var(--ts-duration) var(--ts-function); }
        &::before{ background: var(--backdrop-1); z-index: 2; transform: scale(1.2); }
        &::after{ background: var(--backdrop-2); z-index: 1; }
    }
    .wpb-card__body{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: column; justify-content: end; z-index: 5;
        .btn{ margin-top: 2.4rem; width: fit-content; }
        .wpb-card__title{ --lh: 1.2; color: #FFFF; }
    }   

    &:hover{ 
        .wpb-card__header img{ transform: scale(1.05); }
        .wpb-card__header::before{ transform: scale(1); }
    }
}
.wpb-card.wpb-card--team-story{ --br: 2rem; --p: 2.4rem; --aspect-ratio: min(110%, clamp(32rem, 64vw, 62rem)); overflow: hidden; border: none;
    .wpb-card__header{ position: relative; padding-bottom: var(--aspect-ratio); --backdrop-1: linear-gradient(to top left, rgb(var(--clr-tertiary-rgb), .2), rgb(var(--clr-primary-rgb), 0) 80%); --backdrop-2: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 70%);
        img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform var(--ts-duration) var(--ts-function); }
        &::before, &::after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; transition: transform var(--ts-duration) var(--ts-function); }
        &::before{ background: var(--backdrop-1); z-index: 2; transform: scale(1.2); }
        &::after{ background: var(--backdrop-2); z-index: 1; }
    }
    .wpb-card__body{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: column; justify-content: end; z-index: 5;
        .wpb-card__title{ --lh: 1.3; --fs: clamp(1.6rem, 2vw, 2.4rem); font-weight: 400; color: #FFFF; }
        .wpb-card__text{ color: #FFFF; margin-top: 2.4rem;  }
        .wpb-card__text strong{ display: block; font-size: clamp(1.4rem, 1.6vw, 1.8rem); font-weight: 500; }
        .wpb-card__text p{ font-size: clamp(1.3rem, 1.6vw, 1.6rem); font-weight: 400; }
    }   
}

.wpb-card.wpb-card--team{ --br: 2rem; --p: 2.4rem; --aspect-ratio: min(126%, clamp(32rem, 64vw, 62rem)); overflow: hidden; border: none;
    .wpb-card__header{ position: relative; padding-bottom: var(--aspect-ratio); --backdrop-1: linear-gradient(to top left, rgb(var(--clr-tertiary-rgb), .2), rgb(var(--clr-primary-rgb), 0) 70%); --backdrop-2: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 50%);
        img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform var(--ts-duration) var(--ts-function); }
        &::before, &::after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; transition: transform var(--ts-duration) var(--ts-function); }
        &::before{ background: var(--backdrop-1); z-index: 2; transform: scale(1.2); }
        &::after{ background: var(--backdrop-2); z-index: 1; }
    }
    .wpb-card__body{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: column; justify-content: end; z-index: 5;
        .wpb-card__title{ --lh: 1.2; font-weight: 400; color: #FFFF; }
        .wpb-card__text{ color: #FFFF; margin-top: 2.4rem;  }
        .wpb-card__text strong{ display: block; font-size: clamp(1.4rem, 1.6vw, 1.8rem); font-weight: 500; }
        .wpb-card__text p{ font-size: clamp(1.3rem, 1.6vw, 1.6rem); font-weight: 400; }
        .wpb-card__socials { margin-top: 2rem; display: flex; gap: 1rem; align-items: center;
            a > i { color: #FFF; }
        }
    }   
}

.wpb-card.wpb-card--vacancies { --br: 2rem; --p: 2.4rem; --bg: #FFFF; flex-direction: row; border: none;
    .wpb-card__body{
        .badge-group{ margin-bottom: clamp(1rem, 1.5vw, 2rem); }
        .wpb-card__text{ display: flex; align-items: end; gap: 1rem; flex-wrap: wrap; }
        .wpb-card__text small{ font-size: clamp(1.4rem, 1.5vw, 1.6rem); }
        .wpb-card__title{ --fs: clamp(2.4rem, 3vw, 3.8rem); line-height: 1; transition: color var(--ts-duration) var(--ts-function); }
    } 
    .wpb-card__footer{ padding: var(--p); padding-left: 0; flex-grow: 0; display: flex; align-items: center; }
    .wpb-card__footer .btn{ padding: 0; min-height: auto; }
    .wpb-card__footer .btn i{ margin: 0; }

    &:hover .wpb-card__title{ color: var(--clr-primary); }
    &:hover .wpb-card__footer .btn i{ background-color: var(--clr-primary); color: #FFFF; }
}

.wpb-bg-clr--dark, .wpb-bg-clr--primary, .wpb-bg-clr--gradient{  
    .wpb-card.wpb-card--news .badge--white{ --clr-contrast-rgb: 0, 0, 0; }
}

@container card-container (min-width: 300px){
    .wpb-card.wpb-card--news { flex-direction: row; }
    .wpb-card.wpb-card--reviews{ --p: 4.8rem; }
}
@container card-container (min-width: 400px){
    .wpb-card.wpb-card--news { --p: 2.6rem; --image-size: 16rem; 
        .excerpt { --excerpt-line-clamp: 3; }
    }
    .wpb-card.wpb-card--cases{ --p: 3.2rem; }
    .wpb-card.wpb-card--blurb{ --p: 4.8rem; }

}
@container card-container (min-width: 500px){
    .wpb-card.wpb-card--news { --p: 3.2rem; }
    .wpb-card.wpb-card--blurb{ --p: 4.8rem; }
}
@container card-container (min-width: 600px){
    .wpb-card.wpb-card--cases{ --p: 4.8rem; }
}

@media(min-width: 768px){
    .wpb-card.wpb-card--team { --p: 3.2rem; }
    .wpb-card.wpb-card--team-cta{ --p: 3.2rem; }
    .wpb-card.wpb-card--team-story{ --p: 3.2rem; }
    .wpb-card.wpb-card--vacancies{ --p: 3.2rem; }
     .wpb-card.wpb-card--solution { display: grid; grid-template-columns: 1fr 1fr; --p: 4.8rem;
        .wpb-card__header { order: 1; }
    }
}

@media(min-width: 992px) {
    .wpb-card.wpb-card--solution { grid-template-columns: 1fr 2fr; }
}

@media(min-width: 1200px){
    .wpb-card.wpb-card--team { --p: 4.8rem; }
    .wpb-card.wpb-card--team-cta{ --p: 4.8rem; }
    .wpb-card.wpb-card--team-story{ --p: 4.8rem; }
    .wpb-card.wpb-card--vacancies{ --p: 4.8rem; }
}

/*** ---------- Tabs ---------- ***/
.wpb-tabs { 
    --p: 0 2rem; 
    --clr: var(--clr-text); 
    --bg-clr: transparent; 
    --br: .5rem;
    --border: .1rem solid transparent; 
    --active-clr: var(--clr-primary); 
    --active-bg-clr: #fff; 
    --active-border: .1rem solid var(--clr-border);
    --tsd: var(--ts-duration);
    --tsf: var(--ts-function);
    --tsp: color, background-color, border-color;

    display: grid;

    .wpb-tabs__header { display: flex; flex-wrap: wrap; position: relative; z-index: 1; margin-bottom: -0.1rem; }
    .tab-button { font: inherit; display: inline-block; padding: var(--p); color: var(--clr); min-height: 4.3rem; background-color: var(--bg-clr); border-radius: var(--br) var(--br) 0 0; border: var(--border); text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; transition-duration: var(--tsd); transition-timing-function: var(--tsf); transition-property: var(--tsp);
        &.is-active { color: var(--active-clr); border-color: var(--active-clr); background-color: var(--active-bg-clr); border: var(--active-border); border-bottom: 1px solid transparent; }

    }
    .wpb-tabs__content { background-color: #fff; display: grid; border: .1rem solid var(--clr-border); border-radius: 0 0 var(--br) var(--br);
        .tab-pane { grid-column: 1/-1; grid-row: 1/-1; pointer-events: none; opacity: 0; padding: 2rem; transition: opacity var(--active-box-shadow) var(--tsf); 
            &.is-active { pointer-events: all; opacity: 1; }
            > * + * { margin-top: 1em; }
        }
    }
}

/*** ---------- Alignment ---------- ***/
.wpb-align--y-top .inner { -webkit-box-align: start; -ms-flex-align: start; align-items: start; }
.wpb-align--y-center .inner { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.wpb-align--y-bottom .inner { -webkit-box-align: end; -ms-flex-align: end; align-items: end; }

@media (min-width: 992px) {
    .wpb-align-left { order: -1; }
    .wpb-align-right { order: 999; }
}

/*** ---------- Badge ---------- ***/
.badge-group { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: .5rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; 
    &:has(.badge-group__logo){ column-gap: 2rem; }
    .badge-group__logo{ height: clamp(2rem, 2.25vw, 2.5rem); width: auto; }
    .badge-group__logo img{ width: auto; height: 100%; }
}
.badge { 
    --fs: 1.6rem; 
    --lh: 1; 
    --p: .5rem .8rem; 
    --br: .4rem; 
    
    --clr: #fff; --bg-clr: var(--clr-dark); --border: none; --box-shadow: none; 
    --hover-clr: var(--clr); --hover-bg-clr: var(--bg-clr); --hover-border: var(--border); --hover-box-shadow: var(--box-shadow);
    
    display: inline-block; font-size: var(--fs);  font-weight: 500; line-height: var(--lh); padding: var(--p); color: var(--clr); background-color: var(--bg-clr); border-radius: var(--br); border: var(--border); box-shadow: var(--box-shadow); text-align: center; text-decoration: none; vertical-align: middle; user-select: none; transition-duration: var(--ts-duration); transition-timing-function: var(--ts-function); transition-property: color, background-color, border-color, box-shadow; 
    
    &:hover { color: var(--hover-clr); background-color: var(--hover-bg-clr); border: var(--hover-border); box-shadow: var(--hover-box-shadow); }

    /* Badge variations */
    &.badge--primary { --clr: #fff; --bg-clr: var(--clr-primary); }
    &.badge--white { --clr: var(--clr-text); --bg-clr: #fff; }
    &.badge--light { --clr: var(--clr-text); --bg-clr: var(--clr-light); }
}

/*** ---------- backdrop ---------- ***/
.wpb-backdrop { background-color: rgba(0,0,0,.35); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1010; opacity: 0; pointer-events: none; transition: opacity var(--ts-25) ease; 
    &.active { opacity: 1; pointer-events: all; }
}  

/*** ---------- Breadcrumb ---------- ***/
.wpb-breadcrumbs { margin-bottom: .6rem;
    :is(span, a) { display: flex; align-items: center; color: inherit; text-decoration: none; font-size: 1.4rem; }
}
.wpb-breadcrumbs a:hover { text-decoration: underline }
.wpb-breadcrumbs .breadcrumb_last { font-weight: 500; }
.wpb-breadcrumbs > span { display: flex; column-gap: .8rem; }
.wpb-breadcrumbs .li--chevron-right { --w: .6rem; --h: 1rem; min-width: var(--w); }

/*** ---------- Footer CTA ---------- ***/
.wpb-footer-cta { padding-top: 4.8rem; padding-bottom: 4.8rem; background-color: #f2f2f2; }

/*** ---------- Modal ---------- ***/
.modal { 
    --br: 1.6rem; 
    --p: 2rem; 
    --backdrop-clr: rgba(0,0,0,.45); 
    
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; pointer-events: none; padding: 2rem; background-color: var(--backdrop-clr); display: none; justify-content: center; align-items: center; transition: opacity var(--ts-duration) ease-in-out; z-index: 1090; 

    .modal-dialog { display: flex; flex-direction: column; border-radius: var(--br); width: 100%; max-width: 74rem; height: auto; max-height: 80vh; transform: translateY(5rem); transition: transform var(--ts-25) ease; background-color: #fff; overflow: hidden; 
        .modal-dialog__header { display: flex; justify-content: space-between; align-items: center; padding: var(--p); background-color: #fff; font-family: inherit; 
            .modal-title { font-size: 2rem; margin: 0; } 
        }    
        .modal-dialog__body { background-color: #fff; padding: var(--p); overflow-y: auto; overflow-x: hidden; }
        .modal-dialog__footer { display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-top: 1px solid #E4E9EA; background-color: #fff; padding: var(--p); z-index: 2; margin-top: auto; }
    }
    
    &.show { display: flex; opacity: 1; pointer-events: all; 
        .modal-dialog { transform: translateY(0); }
    }

    /* Modal variations */
    &.modal--small .modal-dialog { max-width: 60rem; max-height: 60rem; }
    &.modal--large .modal-dialog { max-width: 100rem; max-height: 60rem; }
    &.modal--fullscreen { padding: 0; }
    &.modal--fullscreen .modal-dialog { height: 100%; max-height: 100%; max-width: 100%; border-radius: 0; }
}

@media (min-width: 576px) {
    .modal.modal--fullscreen { --p: 2rem calc((100% - 540px) / 2 + 2rem); }
}

@media (min-width: 768px) {
    .modal.modal--fullscreen { --p: 2rem; }
    .modal.modal--fullscreen .modal-dialog { max-width: 74rem; height: auto; max-height: 80vh; border-radius: var(--br); }
}

@media (min-width: 992px) {
    .modal { --p: 3.2rem; }
    .modal.modal--fullscreen { --p: 3.2rem; }
}

/*** ---------- Tooltips ---------- ***/
.wpb-tooltip { --bg: rgb( 255,255,255); position: absolute; pointer-events: none; opacity: 0; background-color: var(--bg); color: inherit; font-size: 1.3rem; line-height: 2rem; padding: .5rem 1rem; border-radius: .5rem; z-index: 9999; box-shadow: 0 0 .75rem .25rem rgba(0,0,0,.1);
    &::after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 0 .5rem .5rem .5rem; border-color: transparent transparent var(--bg) transparent; bottom: 100%; transform: translateX(-50%); left: 50%; }

    /* Tooltip variations */
    &.wpb-tooltip--left::after { border-width: .7rem 0 .7rem .7rem; border-color: transparent transparent transparent var(--bg); top: 50%; transform: translateY(-50%); left: calc(100% - 1px); }
    &.wpb-tooltip--right::after { border-width: .7rem .7rem .7rem 0; border-color: transparent var(--bg) transparent transparent; top: 50%; transform: translateY(-50%); right: calc(100% - 1px); left: auto; }
    &.wpb-tooltip--top::after { border-width:  .5rem .5rem 0 .5rem; border-color: var(--bg) transparent transparent transparent; top: 100%; transform: translateX(-50%); left: 50%; }

}
.wpb-tooltip.show { opacity: 1; }

/*** ---------- Dropdowns ---------- ***/
.wpb-dropdown { position: relative; 

    .wpb-dropdown__menu { opacity: 0; pointer-events: none; min-width: 10rem; border-radius: .5rem; position: absolute; top: calc(100% + .5rem); left: 0; background-color: #fff; box-shadow: 0 0.5rem 0.5rem rgb(21, 47, 51, .1); border: 1px solid rgba(var(--clr-border)); padding: 1.25rem; transition: opacity var(--ts-duration) ease-in-out; 
        ul { list-style: none; 
            .dropdown-item { white-space: nowrap; display: flex; gap: .5rem; text-decoration: none; }
        }
    }
    .wpb-dropdown__menu-right { left: auto; right: 0; }
    .wpb-dropdown__toggle[aria-expanded="true"] + .wpb-dropdown__menu { opacity: 1; pointer-events: all; z-index: 850; }  

    /* Dropdown variations */
    &.wpb-dropdown__left {
        .wpb-dropdown__menu { top: 0; right: calc(100% + .5rem); left: auto; } 
        .wpb-dropdown__toggle i { order: -1; transform: rotate(90deg); }
    } 
    &.wpb-dropdown__right {
        .wpb-dropdown__menu { top: 0; left: calc(100% + .5rem); right: auto; } 
        .wpb-dropdown__toggle i { order: 9999; transform: rotate(-90deg); }
    }
}

/*** ---------- Tables ---------- ***/
.wpb-table { overflow-x: auto; }
table { 
    --clr: var(--clr-text); 
    --border-clr: var(--clr-border); 
    --accent-bg-clr: transparent; 
    --hover-clr: var(--clr-text); 
    --hover-bg-clr: rgba(0, 0, 0, 0.075); 
    --border-width: .1rem; 
    
    border-collapse: collapse; width: 100%; color: var(--clr); vertical-align: top; border-color: var(--border-clr); border-spacing: 0; margin: 0 0 1.41575em; }
table td, table th { padding: 1em 1.41575em; text-align: left; vertical-align: top; border-color: inherit; border-style: solid; border-width: 0; border-bottom-width: var(--border-width); }
table thead { vertical-align: bottom; }

/*** ---------- Filters ---------- ***/
.wpb-toolbar .container { display: grid; grid-template-columns: 1fr; }

@media (width > 576px) {
    .wpb-toolbar .container { grid-template-columns: 1fr 20rem; }
}

/*** ---------- Pagination ---------- ***/
.wpb-pagination { --size: 4rem; --p: 0; --clr: var(--clr-text); --bg-clr: transparent; --border: 1px solid var(--clr-light); --br: .8rem; --hover-clr: #fff; --hover-bg-clr: var(--clr-primary); --hover-border: var(--border); --active-color: var(--hover-clr); --active-bg-clr: var(--hover-bg-clr); --active-border: var(--hover-border); position: relative; display: flex; justify-content: center; 
    .has-prev-next { padding-left: var(--size); padding-right: var(--size); } 
    ul { position: relative; --gap: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--gap); padding-top: clamp(2.4rem, 8vw, 9rem); }
    li {
        > * { width: var(--size); height: var(--size); min-width: var(--size); display: inline-grid; place-items: center; font-weight: 600; font-size: 1.6rem; line-height: 1.6; padding: var(--p); color: var(--clr); background-color: var(--bg-clr); border-radius: var(--br); border: var(--border); text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; transition-property: color, background-color, border-color; transition-duration: var(--ts-duration); transition-timing-function: var(--ts-function); 
            i { --w: 1.5rem; --h: 1.5rem; pointer-events: none; }    
        }
        > *:hover, > *:focus, > *:active { color: var(--hover-clr); background-color: var(--hover-bg-clr); border: var(--hover-border); }
        > *:hover i { --clr: var(--hover-clr) }
        > *.current { color: var(--active-color); background-color: var(--active-bg-clr); border: var(--active-border); }
        .page-number__prev { position: absolute; left: 0; }
        .page-number__next { position: absolute; right: 0; }
        :has([data-page="…"]), [data-page="…"] { pointer-events: none!important; }
    }
}

/*** ---------- Offcanvas ---------- ***/
.wpb-offcanvas { --p: 1.8rem; width: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: auto; flex-direction: column; z-index: 9999; background-color: #fff; transform: translate3d(100%, 0, 0); transition: transform var(--ts-35) ease; }
.wpb-offcanvas.wpb-offcanvas--left { transform: translate3d(-100%, 0, 0); top: 0; right: auto; bottom: 0; left: 0; }
.wpb-offcanvas.is-active { pointer-events: all; transform: translate3d(0%, 0, 0); }
.wpb-offcanvas .wpb-offcanvas__header { display: flex; justify-content: space-between; align-items: center; padding: var(--p); }
.wpb-offcanvas .wpb-offcanvas__body { padding: var(--p); flex-grow: 1; overflow-y: auto; }
.wpb-offcanvas .wpb-offcanvas__footer { display: grid; padding: var(--p); }
.btn[data-target="#productFilters"] { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 600; }

.wpb-offcanvas.wpb-offcanvas--filters form > * + * { margin-top: 2rem; }

@media (min-width: 576px) {
    .wpb-offcanvas { max-width: 45rem; }
}

@media (min-width: 992px) {
    .wpb-offcanvas.wpb-offcanvas--filters { --p: 0; display: flex!important; position: static; transform: none; z-index: 1; }
    .wpb-offcanvas.wpb-offcanvas--filters .wpb-offcanvas__header,
    .wpb-offcanvas.wpb-offcanvas--filters .wpb-offcanvas__footer { display: none; }
    .btn[data-target="#productFilters"] { display: none; }
}

/* Contact links */
.contact-link { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; text-decoration: none; }
.contact-link strong { display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; width: 100%; }


/*** ---------- Aspect ratio ---------- ***/
.wpb-ratio { --wpb-aspect-ratio: 100%; position: relative; width: 100%; border-radius: 2rem; overflow: hidden;
    > * { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; }
    > img, > video { object-fit: cover; }
}
.wpb-ratio::before { display: block; padding-top: var(--wpb-aspect-ratio); content: ""; }
.wpb-ratio--21x9 { --wpb-aspect-ratio: 42.8571428571%; }
.wpb-ratio--16x9 { --wpb-aspect-ratio: 56.25%; }
.wpb-ratio--1x1 { --wpb-aspect-ratio: 100%; }
.wpb-ratio--4x3 { --wpb-aspect-ratio: 75%; }

.wpb-ratio > img { object-fit: cover; } 

/*** ---------- Alerts ---------- ***/
.wpb-alert { --clr: #fff; --bg: var(--clr-primary); --br: 1.6rem; display: block; padding: 1.6rem; color: var(--clr); background-color: var(--bg); border-radius: var(--br); }
.wpb-alert.wpb-alert-icon { display: grid; grid-template-columns: 2.8rem 1fr; gap: 1.6rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.wpb-alert.wpb-alert-icon i-wrapper { width: 2.8rem; height: 2.8rem; }
.wpb-alert.wpb-alert-icon i-wrapper i { --w: 2.8rem; --h: 2.8rem; }
.wpb-alert *:not(.btn) { color: inherit; }

.wpb-alert.wpb-alert--info { --border: 1px solid rgb(0, 143, 214); --bg: rgb(0, 143, 214); }
.wpb-alert.wpb-alert--warning { --border: 1px solid rgb(194, 100, 47); --bg: rgb(194, 100, 47); }
.wpb-alert.wpb-alert--danger { --border: 1px solid rgb(216, 19, 19); --bg: rgb(216, 19, 19); }
.wpb-alert.wpb-alert--success { --border: 1px solid rgb(78, 168, 69); --bg: rgb(78, 168, 69); }

/*** ---------- Page: Search ---------- ***/
.wpb-search-results { --gc: 1; --gap: 2.2rem; }
.wpb-search-results .wpb-text { margin-bottom: 3.2rem; }
.wpb-search-results .inner { display: grid; gap: var(--gap); grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); }
.wpb-search-results .result { text-decoration: none; display: flex; gap: .5rem; padding: .75rem 1.25rem; margin-bottom: -.1rem; transition: background-color var(--ts-duration) ease-in-out; }
.wpb-search-results .result .info { display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; gap: .5rem; }
.wpb-search-results .result .info i { margin-left: auto; }
.wpb-search-results .result { border: 1px solid var(--clr-border); }
.wpb-search-results .result:hover { background-color: #f2f2f2; }
.wpb-search-results :is(.result:first-child, .no-result) { margin-top: 1.6rem; }

/*** ---------- Wux Advanced Search ---------- ***/
.wpb-search-results { display: grid; gap: 2.2rem; position: relative; }
.wpb-search-results h3 { --fs: 2rem; padding-bottom: .8rem; }
.wpb-search-results.--loading { min-height: 6.4rem; margin-top: 2.2rem; }
.wpb-search-results.--loading::after { content: ''; --src: url('/app/themes/wuxnl-theme/assets/icons/default/icon_loading.svg'); --clr: var(--clr-text); --w: 2rem; --h: 2rem; -webkit-mask-image: var(--src); mask-image: var(--src); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; display: inline-block; width: var(--w); height: var(--h); background-color: var(--clr); position: absolute; top: calc(50% - (var(--h) / 2)); left: calc(50% - (var(--w) / 2)); animation: rotate 0.5s linear infinite; }
.wpb-search-results.--loading .result-section { opacity: .5; }
.wpb-search-results .result-section:nth-child(1) { margin-top: 2.2rem; }
.wpb-search-results.--loading .result-section:nth-child(1) { margin-top: 0; }
.wpb-search-results .result-section .results:is(.posts, .terms) { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .8rem; }
.wpb-search-results .no-result-section { border: 1px solid var(--clr-border); padding: 2.2rem; border-radius: 1rem; margin-top: 2.2rem; }
.wpb-search-results.--loading .no-result-section { margin-top: 0; }

@media (min-width: 768px) {
    .wpb-search-results .result-section .results:is(.posts, .terms) { grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr)); }
}

/* Add to cart/bookmark animation */
.add-success, .saved-success { position: fixed; top: 3.2rem; right: 3.2rem; background-color: var(--clr-primary); z-index: 9999; width: 4.4rem; height: 4.4rem; border-radius: 50%; display: inline-grid; place-items: center; transform: scale(0); animation: scale .5s cubic-bezier(0,0,.5,1.5) forwards, transform .5s forwards; animation-delay: 0s, 1.6s; } 
.add-success i, .saved-success i { --clr: #fff; }
.add-success:after, .saved-success:after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; animation: pulse 1s forwards; animation-delay: .6s; }

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

@keyframes transform {
    0% { transform: scale(100%) translateY(0px); opacity: 1; }
    100% { transform: scale(100%)  translateY(-10rem); opacity: 0; }
}

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 var(--clr-primary); opacity: .7; }
    70% { transform: scale(1); box-shadow: 0 0 0 1.5rem var(--clr-primary); opacity: 0; }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 var(--clr-primary); opacity: 0; }
}

/*** ---------- Wux Bulk Pricing ---------- ***/
.wpb-bp-overview { margin-bottom: 2.2rem; }
.wpb-bp-overview .wpb-bp-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.wpb-bp-overview .wpb-bp-rules .wpb-bp-rule { cursor: pointer; border: 1px solid var(--clr-border); border-radius: .5rem; display: grid;}
.wpb-bp-overview .wpb-bp-rules .wpb-bp-rule > span { font-size: 1.6rem; line-height: 1; padding: 1rem 1.5rem; display: flex; gap: .5rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.wpb-bp-overview .wpb-bp-rules .wpb-bp-rule > span strong { font-size: 1.8rem; }
.wpb-bp-overview .wpb-bp-rules .wpb-bp-rule > span small { margin-left: auto; font-size: 1.2rem; line-height: 1; }
.wpb-bp-overview .wpb-bp-rules .wpb-bp-rule > span small * { font-size: inherit; line-height: inherit; }
.wpb-bp-overview .wpb-bp-rules .wpb-bp-rule > span + * { border-top: 1px solid var(--clr-border); }

@media (min-width: 992px) {
    .wpb-bp-overview { margin-bottom: 3.2rem; }
}

/*** ---------- Temlate: Contact ---------- ***/
.wpb-contact { --gc: 1; --gap: 2.2rem; }
.wpb-contact .container { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--gap); -webkit-box-align: start; -ms-flex-align: start; align-items: start; }

@media (min-width: 768px) {
    .wpb-contact .container { grid-template-columns: repeat(2, minmax(0, 1fr)); --gap: 3.2rem; }
}

@media (min-width: 992px) {
    .wpb-contact .container { grid-template-columns: minmax(0, 1fr) minmax(0, 40rem); --gap: 4.8rem; }
}

/*** ---------- Swiper ---------- ***/
.swiper.swiper--banner { overflow: hidden; 
    .swiper-wrapper { display: flex !important; width: max-content; gap: 3.2rem; }
    .swiper-slide { flex-shrink: 0; width: auto; display: inline-flex; gap: 3rem; align-items: center; 
        .wpb-text > * { font-size: 3rem; font-weight: 500;}
        .wpb-icon { --icon-clr: var(--clr-primary);  }
    }
}

.swiper {
    .swiper-button-prev, .swiper-button-next{ position: relative; top: auto; right: auto; bottom: auto; left: auto; margin: 0; }
    .swiper-button-next{ --icon-bg-clr: #FFFF; --hover-icon-clr: #FFFF; --hover-icon-bg-clr: var(--clr-primary); --focus-icon-clr: var(--icon-clr);
        &:hover i{ background-color: var(--hover-icon-bg-clr) !important; }
    }
}

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(var(--scroll-distance, -50%)); }
}


/*** ---------- Component: Profile ---------- ***/
.wpb-profile{ --image-size: 4.4rem; --br: 50%; --title-fs: clamp(1.6rem, 1.7vw, 1.8rem); --text-fs: clamp(1.4rem, 1.5vw, 1.6rem); --gap: 1.2rem; display: flex; align-items: center; gap: var(--gap);
    .wpb-profile__image{ width: var(--image-size); height: var(--image-size); min-width: var(--image-size); min-height: var(--image-size); border-radius: 50%; }
    .wpb-profile__image img{ border-radius: var(--br); width: 100%; height: 100%; object-fit: cover; object-position: top; }
    .wpb-profile__text{ line-height: 1.3; 
        & strong{ font-size: var(--title-fs); font-weight: 500; }
        & p{ font-size: var(--text-fs); font-weight: 400; }
    }
}

/*** ---------- Component: Links ---------- ***/
.wpb-links{ --fs: clamp(1.4rem, 1.6vw, 1.8rem); --clr: var(--clr-text); --icon-size: 4rem; --icon-clr: var(--clr); --icon-bg-clr: #FFFF; --hover-icon-clr: #FFFF; --hover-icon-bg-clr: var(--clr-primary); --border-clr: rgba(0, 0, 0, .15); list-style: none; padding-left: 0 !important; display: flex; flex-direction: column;
    .wpb-links__link{ text-decoration: none !important; font-size: var(--fs); font-weight: 500; color: var(--clr); display: flex; justify-content: space-between; align-items: center; column-gap: 2.4rem; text-decoration: none; padding-block: clamp(1.2rem, 2vw, 2.4rem); line-height: 1.1; border-bottom: 1px solid var(--border-clr); transition: color var(--ts-duration) var(--ts-function), border-color var(--ts-duration) var(--ts-function);
        i{ width: var(--icon-size); height: var(--icon-size); min-width: var(--icon-size); min-height: var(--icon-size); border-radius: 50%; font-size: 1.4rem; color: var(--icon-clr); background-color: var(--icon-bg-clr); line-height: 0; display: inline-grid; place-items: center; transition-property: color, background-color; transition-duration: var(--ts-duration); transition-timing-function: var(--ts-function); }
        &:hover i{ color: var(--hover-icon-clr); background-color: var(--hover-icon-bg-clr); }
    }

    /*  In het geval dat er variaties komen:

    &.wpb-links--small{ --fs: clamp(1.4rem, 1.5vw, 1.6rem); --clr: var(--clr-primary); --icon-clr: var(--clr); --gap: clamp(.6rem, .8vw, 1rem);
        .wpb-links__link{ padding-bottom: 0; border-bottom: none; line-height: 1.2; }
    } */
}

/*** ---------- Component: Circular badge ---------- ***/
.wpb-circular-badge { --image-size: 12rem; --icon-size: 3rem; --clr: #FFFF; --bg-clr: var(--clr-primary); width: fit-content; position: absolute; top: var(--top); right: var(--right); bottom: var(--bottom); left: var(--left); z-index: 3; pointer-events: none;
    .wpb-circular-badge__inner{ display: inline-grid; place-items: center; position: relative; }
    .wpb-circular-badge__image{ width: var(--image-size); height: var(--image-size); min-width: var(--image-size); height: var(--image-size); object-fit: contain; object-position: center; animation: circular-badge-rotate 10s infinite linear; }
    .wpb-circular-badge__icon{ width: var(--icon-size); height: var(--icon-size); min-width: var(--icon-size); min-height: var(--icon-size); border-radius: 50%; background-color: var(--bg-clr); display: inline-grid; place-items: center; position: absolute; top: auto; right: auto; bottom: auto; left: auto; }
    .wpb-circular-badge__icon i{ --icon-clr: var(--clr); }
}

@media(min-width: 992px){
    .wpb-circular-badge { --image-size: 18rem; --icon-size: 4rem; }
}

@keyframes circular-badge-rotate {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}