/*** ---------- Background assets ---------- ***/
:is(section, header, .wpb-block):has(.wpb-bg-assets){ position: relative; overflow-x: clip; overflow-y: visible; }
:is(section, header, .wpb-block):has(.wpb-bg-assets) > *:not(.wpb-bg-assets){ z-index: 2; position: relative; }

.wpb-bg-assets { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: -1;}
.wpb-bg-assets .wpb-icon--bg-pattern{ --size: 32rem; --w: var(--size); --h: var(--size); position: absolute; top: -8rem; right: -5rem; }
.wpb-bg-assets .wpb-icon--bg-pattern.--align-left{ left: -5rem; right: auto; }

.wpb-bg-clr--light .wpb-icon--bg-pattern{ --clr: #fff; }

@media (min-width: 992px) {
    .wpb-bg-assets .wpb-icon--bg-pattern{ --size: 48rem; }
}

/*** ---------- Block: Media ---------- ***/
.wpb-block--media .wpb-text { margin-bottom: 2rem; }


/*** ---------- Block: Logo's ---------- ***/
.wpb-block--logos{ overflow-x: clip; }
.wpb-block--logos .inner{ padding-top: 2.4rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem; }
.wpb-block--logos .inner .wpb-image{ --p: 2.4rem; display: flex; justify-content: center; align-items: center; padding: var(--p); background-color: #fff; aspect-ratio: 12/10; overflow: hidden; transition: background var(--ts-duration) var(--ts-function), padding var(--ts-duration) var(--ts-function); }
.wpb-block--logos .inner .wpb-image:hover { --p: 2rem; }

.wpb-block--logos .wpb-direction-label{ --offset: 2rem; top: -2rem; left: auto; right: 0; bottom: auto; width: 23rem; align-items: center; gap: 1.2rem; }
.wpb-block--logos .wpb-direction-label .wpb-icon{ --h: 8rem; --w: 4.5rem; }

@media (min-width: 992px) {
    .wpb-block--logos .inner{ padding-top: 4.8rem; gap: 4rem; }
    .wpb-block--logos .inner .wpb-image{ --p: 3.2rem; }
    .wpb-block--logos .inner .wpb-image:hover { --p: 2.5rem; }

    .wpb-block--logos .wpb-direction-label{ right: -6rem; }
}
@media (min-width: 1400px) {
    .wpb-block--logos .wpb-direction-label{ right: -10rem; }
}
@media (min-width: 1600px) {
    .wpb-block--logos .wpb-direction-label{ right: -15rem; }
}


.wpb-block--cta :is(h3, .h3) { --fs: clamp(2.4rem, 3vw, 3.2rem); }

/*** ---------- Block: FAQ ---------- ***/
.wpb-block--faq { --gc: 1; }

.wpb-block--faq .wpb-bg-assets .wpb-icon--bg-pattern{ top: auto; bottom: -8rem; }


@media (min-width: 992px) {
    .wpb-block--faq :is(.wpb-image, .wpb-image img) { height: 65rem; width: 100%; max-height: 65rem; }
    .wpb-block--faq .wpb-image img{ object-fit: cover; }
}

/*** ---------- Block: Blurb ---------- ***/
.wpb-block--blurb .wpb-text { margin-bottom: 2rem; }
.wpb-block--blurb .wpb-card.wpb-card--blurb .wpb-card__header img { aspect-ratio: 16/9; object-fit: cover; }


/*** ---------- Block: Pakketten ---------- ***/
.wpb-block.wpb-block--pakketten .inner{ margin-top: 5.4rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: 2.4rem; row-gap: 4rem; }
.wpb-block.wpb-block--pakketten .inner > *:nth-child(2) .wpb-card__label{ --bg-clr: var(--clr-primary); --clr: #ffff; }

@media (min-width: 992px) {
    .wpb-block.wpb-block--pakketten .inner{ grid-template-columns: repeat(auto-fit, minmax(45rem, 1fr)); }
}
@media (min-width: 1200px) {
    .wpb-block.wpb-block--pakketten .inner > *:not(:nth-child(2)){ margin-top: 4rem; }
    .wpb-block.wpb-block--pakketten .wpb-section__cta{ padding-top: 2.4rem; }
}
@media(min-width: 1400px){
    .wpb-block.wpb-block--pakketten .inner{ gap: 4rem; }
}

/*** ---------- Block: kennisbank ---------- ***/
.wpb-block--kennisbank .wpb-bg-assets .wpb-icon--bg-pattern.--align-left{ top: -25rem; left: -15rem; }
.wpb-block--kennisbank .wpb-bg-assets .wpb-icon--bg-pattern.--align-right{ right: 10rem; }

@media (min-width: 1200px) {
    .wpb-block--kennisbank .wpb-bg-assets .wpb-icon--bg-pattern.--align-right{ right: 25rem; }
}

/*** ---------- Block: Header ---------- ***/
/* .wpb-header.wpb-header--search form { position: relative; }
.wpb-header.wpb-header--search form [type="submit"] { display: inline-flex; cursor: pointer; user-select: none; padding: 0.25rem 1rem; border: none; background: none; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.wpb-header.wpb-header--search form [type="submit"] img { width: 1.5rem; } */

.wpb-header .wpb-header__toolbar { display: flex; align-items: center; gap: 3.2rem; row-gap: 1rem; flex-wrap: wrap; }
.wpb-header .wpb-header__toolbar .btn { white-space: nowrap; }
.wpb-header .wpb-header__toolbar .wpb-breadcrumbs { margin: 0; --excerpt-line-clamp: 1; display: -webkit-box; -webkit-line-clamp: var(--excerpt-line-clamp); -webkit-box-orient: vertical; overflow: hidden; }

.wpb-header .wpb-header__articlebar{ --gap: 1.2rem; display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.wpb-header .wpb-header__articlebar span{ font-size: 1.4rem; display: flex; align-items: center; gap: .8rem; }
.wpb-header .wpb-header__articlebar span i{ font-size: 1.2rem; }
.wpb-header .wpb-header__articlebar > * + *::before{ content: '|'; opacity: .7; }

/*** ---------- Block: Text media tabs ---------- ***/
.wpb-block--media-tabs .container > .wpb-text { margin-bottom: 2rem; }
.wpb-block--media-tabs .inner { gap: 3.2rem; align-items: center; }
.wpb-block--media-tabs .tab__images { display: grid; overflow: hidden; } 
.wpb-block--media-tabs .tab__images > figure { grid-row: 1/-1; grid-column: 1/-1; opacity: 0; transition: opacity var(--ts-15) ease; transition-delay: var(--ts-35); }
.wpb-block--media-tabs .tab__images figure.active { opacity: 1; transform: scale(1); }
.wpb-block--media-tabs .tab__images figure img { height: 100%; width: 100%; object-fit: contain; }
.wpb-block--media-tabs .tab__content { display: grid; position: relative; gap: 2rem; }
.wpb-block--media-tabs .tab__item { display: grid; align-items: center; }
.wpb-block--media-tabs .tab__item.has-icon { grid-template-columns: 6.4rem 1fr; -ms-grid-columns: 6.4rem 1fr; gap: 1.6rem; }
.wpb-block--media-tabs .tab__item .icon { background-color: var(--wpb-primary); border-radius: 50%; width: 6.4rem; height: 6.4rem; padding: 1.4rem; transition: box-shadow var(--ts-15) ease; }
.wpb-block--media-tabs .tab__item .icon img { width: 100%; height: 100%; object-fit: contain; }

@media (min-width: 992px) {
    .wpb-block--media-tabs .inner { gap: 8.2rem; }
}


/*** ---------- Block: Contact ---------- ***/
.wpb-block--contact .wpb-bg-assets .wpb-icon--bg-pattern{ bottom: 0; top: auto; }



/*** ---------- Block: Diensten ---------- ***/
.wpb-block--diensten .inner{ display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 2.4rem; }

.wpb-block--diensten .container + .container{ margin-top: 2.4rem; }

@media (min-width: 992px) {
    .wpb-block--diensten .inner{ gap: 4rem; grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr)); }
    .wpb-block--diensten .container + .container{ margin-top: 4.8rem; }
}

/*** ---------- Block: Reviews ---------- ***/
.wpb-block--reviews .inner{ display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 2.4rem; }
.wpb-block--reviews .container + .container{ margin-top: 2.4rem; }

@media (min-width: 992px) {
    .wpb-block--reviews .inner{ gap: 4rem; grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr)); }
    .wpb-block--reviews .container + .container{ margin-top: 4.8rem; }
}

/*** ---------- Block: Team ---------- ***/
.wpb-block--team .inner{ --minmax-w: 30rem; --gap: 1.2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--minmax-w), 1fr)); gap: var(--gap); }
.wpb-block--team .container + .container{ margin-top: 2.4rem; }

@media (min-width: 992px) {
    .wpb-block--team .inner{ --gap: 4rem;  }
    .wpb-block--team .container + .container{ margin-top: 4.8rem; }
}


/*** ---------- Block: Resultaten ---------- ***/
.wpb-block--resultaten .container--main{ display: grid; row-gap: 3.2rem; column-gap: 2.4rem; }
.wpb-block--resultaten .inner{ --minmax: 16.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--minmax), 1fr)); gap: 1.8rem; }
.wpb-block--resultaten .container + .container--main{ padding-top: 2.4rem; }

.wpb-block--resultaten .inner > *:is(:first-child, :nth-child(4)):before{ --url: var(--pattern-light); content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background-image: var(--url); background-size: 250%; pointer-events: none; }
.wpb-block--resultaten .inner > *:is(:first-child, :nth-child(4)) > *:is(.wpb-card__header, .wpb-card__body){ z-index: 2; }
.wpb-bg-clr--transparent.wpb-block--resultaten .inner > *:is(:first-child, :nth-child(4)):before{ opacity: .4; }


.wpb-block--resultaten .wpb-bg-assets .wpb-icon--bg-pattern{ top: auto; bottom: -8rem; }

@media (min-width: 576px) {
    .wpb-block--resultaten .inner{ --minmax: 20rem; }
}
@media (min-width: 768px) {
    .wpb-block--resultaten .inner{ --minmax: 25rem; }
    .wpb-block--resultaten .container + .container--main{ padding-top: 4.8rem; }
}
@media (min-width: 992px) {
    .wpb-block--resultaten .inner{ --minmax: 30rem; gap: 3.2rem; }
    .wpb-block--resultaten .container--main{ column-gap: 3.2rem; }
}
@media (min-width: 1200px) {
    .wpb-block--resultaten .container + .container--main{ padding-top: 6rem; }
    .wpb-block--resultaten .container--main:has(.inner + .wpb-card){ grid-template-columns: 1fr 50rem; }
    .wpb-block--resultaten .inner{ --minmax: 25rem; }
}
@media (min-width: 1400px) {
    .wpb-block--resultaten .inner{ gap: 4rem; }
    .wpb-block--resultaten .container--main:has(.inner + .wpb-card){ column-gap: 4rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*** ---------- Block: Text Shortcode ---------- ***/
/* .wpb-block--text-shortcode .container { column-gap: 2rem; row-gap: 2rem; }

@media (min-width: 992px) {
    .wpb-block--text-shortcode .container { column-gap: 3.2rem; }
    .wpb-block--text-shortcode-primary .wpb-card { order: -1; }
}

@media (min-width: 1200px) {
    .wpb-block--text-shortcode .container { column-gap: 6.4rem; }
}

@media (min-width: 1200px) {
    .wpb-block--text-shortcode .container { column-gap: 9.8rem; }
} */



/*** ---------- Block: Video ---------- ***/
.wpb-block--video .container { column-gap: 2rem; row-gap: 2rem; }
.wpb-block--video .wpb-ratio .youtube-play { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; cursor: pointer; transition: opacity var(--ts-35) ease; }
.wpb-block--video .wpb-ratio .youtube-play img { object-fit: cover; width: 100%; height: 100%; }
.wpb-block--video .wpb-ratio .youtube-play .play-icon { position: absolute; top: calc(50% - 3.2rem); left: calc(50% - 3.2rem); display: grid; place-items: center; z-index: 2; background-color: var(--clr-primary); border-radius: 50%; width: 6.4rem; height: 6.4rem; transition: .25s ease; }
.wpb-block--video .wpb-ratio .youtube-play .play-icon i { color: rgb(255,255,255); }
.wpb-block--video .wpb-ratio:hover .youtube-play .play-icon { transform: scale(1.065); }

@media (min-width: 992px) {
    .wpb-block--video .container { column-gap: 3.2rem; }
    .wpb-block--video.wpb-block--video-primary .wpb-ratio { order: -1; }
}

@media (min-width: 1200px) {
    .wpb-block--video .container { column-gap: 6.4rem; }
}

@media (min-width: 1400px) {
    .wpb-block--video .container { column-gap: 9.8rem; }
}




/*  */
.wpb-block--line .wpb-bg-assets .wpb-icon--bg-pattern{ top: -30rem; right: -3rem; z-index: -1; }




/*** ---------- Key frames ---------- ***/
@keyframes translate_x_left {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-100%, 0, 0); }
}

@keyframes translate_x_right {
    from { transform: translate3d(-100, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

.wpb-item-slide { --gap: 6.4rem; display: flex; overflow: hidden; min-height: 4rem; margin-top: 3.2rem;}
.wpb-item-slide__items { display: flex; align-items: center; justify-content: space-between; column-gap: var(--gap); padding-left: var(--gap); animation: translate_x_left 60s linear infinite; }
.wpb-item-slide__items figure { height: 100%; background: white; display: flex ; justify-content: center; align-items: center; padding: 2rem;}
.wpb-item-slide__items figure img { width: 16rem; height: auto; opacity: .8; }
.wpb-item-slide__items figure a{ transition: opacity var(--ts-25) ease; }
.wpb-item-slide__items figure a:hover{ opacity: 1; }
