/*!
README - STYLEGUIDE BRIEFLY

Find the style by media query screen width, using Find or CTRL + F
min-width 601px, min-width: 901px, min-width: 1300px, min-width: 1600px,
max-width: 1599px, max-width: 1299px, max-width: 900px, max-width: 600px

Make this stylesheet still readable and after using this file, dont forget to use beautify after development
Thankyou Whello Developer
*/

/* Combined & Ordered CSS Media Queries
   Comments preserved, structure simplified & grouped
*/

/* =============== BASE / GLOBAL (NO MEDIA QUERY) =============== */
/* (No base rules provided here — starting directly from media queries) */

/* Combined & Ordered CSS Media Queries — Largest → Smallest */

/* =============== MIN-WIDTH: 1600px =============== */
@media all and (min-width: 1600px) {
    /* LARGE DESKTOP */
}

/* =============== MIN-WIDTH: 1300px =============== */
@media all and (min-width: 1300px) {
    /* DESKTOP & LAPTOP */

    .section-opleidingen-kort > .inner-section > .col-6:first-child {
        padding-right: 92px;
    }

    .section-opleidingen-kort > .inner-section > .col-6:last-child {
        padding-left: 49px;
    }

    .section-card-image-people .col-6:first-child {
        padding-right: 65px;
    }

    .section-card-image-people .col-6:last-child {
        padding-right: 16px;
    }
}

/* =============== 1300px – 1599px =============== */
@media all and (min-width: 1300px) and (max-width: 1599px) {
    /* BETWEEN DESKTOP & LARGE DESKTOP */
}

/* =============== MAX-WIDTH: 1599px =============== */
@media all and (max-width: 1599px) {
    /* BELOW LARGE DESKTOP */
}

@media (max-width: 1200px) {

    .section-seo-block .inner-section::before {
        opacity: 20%;
    }
    .people-slider-wrapper {
        overflow: hidden;
        position: relative;
        width: 100%;
    }

    .section-soorten-advies .listing-advies {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .section-soorten-advies .item-advies.item-popular {
        margin: 20px 0 20px 0;
    }

    .section-soorten-advies .item-advies:not(.item-popular),
    .section-soorten-advies .item-advies.item-popular,
    .row-list-advies {
        max-width: 100%;
        width: 100%;
        height: 100%;
    }

    .section-text-with-employee .contact-employee {
        margin-left: 64px;
    }

    .section-opleadingen-uitgebreid
        .listing-opleidingen-grid
        .item-opleiding-wrapper {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 calc(50% - 32px);
                flex: 0 0 calc(50% - 32px);
    }

    .section-opleadingen-uitgebreid .listing-opleidingen-grid .item-opleiding {
        max-width: 100%;
    }

    
    .contact-employee {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr; 
        -ms-grid-rows: auto 20px auto; 
        grid-template-rows: auto auto; 
        gap: 20px;
        padding: 20px;
        margin-bottom: 20px;
    }

    
    .contact-employee > *:nth-child(1) {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }

    
    .contact-employee > *:nth-child(2) {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
    }

    /* description tetap di atas */
    .contact-employee .employee-desc {
        -ms-grid-column: 1;
        grid-column: 1;
        -ms-grid-row: 1;
        grid-row: 1;
    }

    /* foto + info jadi row kedua */
    .contact-employee .employee-photo {
        -ms-grid-row: 2;
        grid-row: 2;
        -ms-grid-column: 1;
        grid-column: 1;
        width: 80px; 
        height: 80px;
    }

    .contact-employee .employee-photo img {
        -o-object-position: center top;
           object-position: center top;
    }

    .contact-employee .employee-info {
        -ms-grid-row: 2;
        grid-row: 2;
        -ms-grid-column: 1;
        grid-column: 1;
        margin-left: 100px; 
    }

   


}

@media all and (min-width: 1021px) and (max-width: 1299px) {
    .section-opleidingen-kort > .inner-section > .col-6:first-child {
        padding-right: 46px;
    }

    .contact-details {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .contact-details .contact-mail {
        margin-right: 0;
        margin-bottom: 20px;
    }
}

@media all and (min-width: 1021px)  {
    .section-contact .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }
}



@media all and (max-width: 1020px) {
    .section-opleidingen-kort > .inner-section {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .section-opleidingen-kort > .inner-section > .col-6 {
        width: 100%;
    }

    .section-pop-image > .inner-section,
    .section-pop-image.image-right > .inner-section {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .section-pop-image .col-6,
    .section-pop-image.image-right .col-6 {
        width: 100%;
    }

    .section-pop-image .col-6:last-child,
    .section-pop-image.image-right .col-6:last-child {
        padding-left: 0;
    }

    .section-pop-image .col-6:first-child,
    .section-pop-image.image-right .col-6:first-child {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        width: 100%;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        padding-bottom: 65px;
    }

    .section-card-image-people > .inner-section {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
            -ms-flex-direction: column !important;
                flex-direction: column !important;
    }

    .section-card-image-people .col-6 {
        width: 100%;
        max-width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .section-testimonials .item-testimonial {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .section-testimonials .testimonial-content {
        font-size: 18px;
    }

    .section-testimonials .item-testimonial .col-content,
    .section-testimonials .item-testimonial .testimonial-image {
        width: 100%;
    }

    .section-testimonials .item-testimonial .testimonial-image {
        padding-right: 0;
        position: relative;
        margin-bottom: 60px;
    }

    .section-testimonials .item-testimonial .testimonial-image::after {
        content: "";
        position: absolute;
        bottom: -20px;
        left: 0;

        width: 88px;
        height: 64px;

        background: url(/wp-content/uploads/2025/11/‘.svg) no-repeat center /
            contain;
        pointer-events: none;
    }

    .section-testimonials .item-testimonial .col-content:before {
        display: none !important;
    }

    .listing-about-zest {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 20px;
    }

    .listing-about-zest .item-about-zest:not(.card-none) {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        padding: 40px 20px !important;
    }

    .listing-about-zest .item-about-zest img {
        max-height: 232px;
        -o-object-position: center 30%;
           object-position: center 30%;
    }

    .listing-about-zest .item-about-zest:last-child {
        -webkit-box-ordinal-group: 5;
            -ms-flex-order: 4;
                order: 4;
    }

    .listing-about-zest .item-about-zest:nth-child(4) {
        -webkit-box-ordinal-group: 6;
            -ms-flex-order: 5;
                order: 5;
    }

    .section-about-zest > .inner-section {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .section-about-zest .col-6 {
        max-width: 100%;
        width: 100%;
    }

    .section-about-zest .heading-title {
        padding-right: 0;
    }

    .section-contact .container{
        padding-top: 80px;
        padding-bottom: 80px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .section-contact .col-6,
    .section-contact .col-6:first-child,
    .section-contact .col-6:last-child {
        padding-right: 0;
        padding-left: 0;
        width: 100%;
    }

    .section-contact .col-6:first-child {
        padding-bottom: 64px;
    }

    .employee-info {
        max-width: unset;
    }

    .faqs-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 16px;
    }


     /* ===========================
        SIMPLE CARD SLIDER STYLES
    =========================== */

    .section-simple-card .zest-slider-track {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        overflow-x: auto;
        padding-bottom: 20px;
        -webkit-box-pack: start !important;
            -ms-flex-pack: start !important;
                justify-content: flex-start !important;
        -ms-scroll-snap-type: x mandatory;
            scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        cursor: -webkit-grab;
        cursor: grab;
        -ms-flex-wrap: nowrap !important;
            flex-wrap: nowrap !important;
    }

    .listing-simple-card .item-simple-card {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        max-width: 405px;
        scroll-snap-align: start;
    }


    .listing-simple-card .zest-slider-track.grabbing {
        cursor: grabbing;
        cursor: -webkit-grabbing;
    }

    /* Hide scrollbar */
    .section-simple-card .zest-slider-track::-webkit-scrollbar {
        display: none;
    }

    /* PROGRESS BAR WRAPPER */
    .section-simple-card .zest-progress-wrap {
        width: 100%;
        height: 2px;
        background: #f4f4f4;
        border-radius: 5px;
        overflow: hidden;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    /* PROGRESS BAR FILL */
    .section-simple-card .zest-progress-bar {
        width: 0%;
        height: 100%;
        background: #383838;
        border-radius: 5px;
        -webkit-transition: width 0.18s linear;
        -o-transition: width 0.18s linear;
        transition: width 0.18s linear;
    }


    .section-simple-card .zest-slider-track::-webkit-scrollbar {
        display: none;
    }



    #section-simple-card3 .col-12 {
        width: 100%;
        display: block;
    }

    .section-simple-card .col-6 {
        width: 100%;
        max-width: 100%;
    }

    .section-simple-card .description-text {
        padding-left: 0px;
    }

    .section-simple-card > .inner-section {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .section-opleidingen-kort {
        padding-top: 80px;
    }

    .section-text-with-employee .inner-section {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .section-text-with-employee .col-6 {
        width: 100%;
    }


    .section-contact-sidebar > .inner-section {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .section-contact-sidebar .col-6 {
        width: 100%;
        position: relative;
    }

    .section-contact-sidebar .col-6:last-child {
        margin-left: 0px;
    }

    .section-contact-sidebar:after {
        display: none;
    }

    .section-main-faq > .inner-section {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .section-main-faq .col-6 {
        width: 100%;
    }

    .section-main-faq .col-6 .col-wrapper {
        position: relative;
        padding-right: 0;
        padding-bottom: 64px;
    }

    .section-card-image-people.grid-list .listing-card-people {
        -webkit-box-pack: start !important;
            -ms-flex-pack: start !important;
                justify-content: start !important;
        -ms-flex-wrap: nowrap !important;
            flex-wrap: nowrap !important;
    }


    .section-card-image-people .listing-card-people {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 16px;
        overflow-x: auto;
        padding-bottom: 20px;
        -webkit-box-pack: start !important;
            -ms-flex-pack: start !important;
                justify-content: flex-start !important;
        -ms-scroll-snap-type: x mandatory;
            scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        cursor: -webkit-grab;
        cursor: grab;
    }

    .listing-card-people:active {
        cursor: -webkit-grabbing;
        cursor: grabbing;
    }

    .listing-card-people .item-people {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        max-width: 247px !important;
        margin-right: 0 !important;
        scroll-snap-align: start;
    }
    
    .section-card-image-people .zest-slider-track::-webkit-scrollbar {
        display: none;
    }

    .section-card-image-people .zest-slider-track.grabbing {
        cursor: grabbing;
        cursor: -webkit-grabbing;
    }


    .section-card-image-people .zest-progress-wrap {
        width: 100%;
        height: 2px;
        background: #f4f4f4;
        border-radius: 5px;
        overflow: hidden;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .section-card-image-people .zest-progress-bar {
        width: 0%;
        height: 100%;
        background: #383838;
        border-radius: 5px;
        -webkit-transition: width 0.18s linear;
        -o-transition: width 0.18s linear;
        transition: width 0.18s linear;
    }

    .section-text-with-employee .contact-employee {
        margin-left: 0;
        margin-top: 20px;
    }




}

/* =============== MIN-WIDTH: 901px =============== */
@media all and (min-width: 901px) {
    /* TABLET LARGE */

    .row-with-sidebar .block-sidebar {
        max-width: 100% !important;
    }
}

/* =============== MIN-WIDTH: 601px =============== */
@media all and (min-width: 601px) {
    /* SMALL TABLET / SMALL DESKTOP */
}

/* =============== 601px – 1299px =============== */
@media all and (min-width: 601px) and (max-width: 1299px) {
    /* MOBILE → TABLET RANGE */
}

/* =============== MAX-WIDTH: 1299px =============== */
@media all and (max-width: 1299px) {
    /* LARGE TABLET */

    .section-zest-values .item-zest-card:not(:last-child) {
        margin-right: 0px;
    }

    .section-zest-values .listing-zest-card {
        position: relative;
        width: 100%;
    }

    .section-zest-values .zest-slider-track {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        overflow-x: auto;
        gap: 24px;
        -ms-scroll-snap-type: x mandatory;
            scroll-snap-type: x mandatory;
        padding-bottom: 28px;
        scrollbar-width: none;
    }

    .section-zest-values .item-zest-card {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        scroll-snap-align: start;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
    }

    .section-zest-values .zest-slider-track::-webkit-scrollbar {
        display: none;
    }

    .section-zest-values .zest-slider-track.grabbing {
        cursor: grabbing;
        cursor: -webkit-grabbing;
    }

    .item-zest-card h4 {
        margin-top: 0;
        margin-bottom: 10px;
    }

    .item-zest-card p {
        margin: 0;
    }

    .section-zest-values .zest-progress-wrap {
        width: 100%;
        height: 2px;
        background: #f4f4f4;
        border-radius: 5px;
        overflow: hidden;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .section-zest-values .zest-progress-bar {
        width: 0%;
        height: 100%;
        background: #383838;
        border-radius: 5px;
        -webkit-transition: width 0.18s linear;
        -o-transition: width 0.18s linear;
        transition: width 0.18s linear;
    }
}

/* =============== MAX-WIDTH: 900px =============== */
@media all and (max-width: 900px) {
    /* TABLET */

    .section-card-image-people .whbutton,
    .section-pop-image .whbutton,
    .section-pop-image.image-right .whbutton {
        width: 100%;
        text-align: center;
    }

    .contact-details {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .contact-details .contact-mail {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .section-contact .gform_button {
        width: 100% !important;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    .section-list-faqs .flex-center.transparant-button {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        width: 100%;
    }

    .footer-newsletter-content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        height: 100%;
        padding: 64px 20px;
    }

    .newsletter-info {
        padding-bottom: 32px;
    }

    .section-opleadingen-uitgebreid
        .listing-opleidingen-grid
        .item-opleiding-wrapper {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 100%;
                flex: 0 0 100%;
    }
    .section-opleadingen-uitgebreid .item-opleiding {
        max-width: 100%;
    }

    .section-opleadingen-uitgebreid > .inner-section {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .section-opleadingen-uitgebreid .col-6 {
        width: 100%;
        max-width: 100%;
    }

    .section-opleadingen-uitgebreid .col-6 .description,
    .section-opleadingen-uitgebreid .col-6 .heading_description {
        padding-right: 0;
        padding-left: 0;
    }

    .section-seo-block::before {
        opacity: 0.5;
    }

    .section-seo-block .content-text {
        padding-right: 0;
    }

    .section-seo-block .col-6 {
        max-width: 100%;
        width: 100%;
    }

    .row-with-sidebar .row-content-opleidingen .sidebar {
        display: none;
    }

   .section-card-image-people.image-card-desc .listing-card-people {
        margin-top: 30px;
    }

    .section-listing-vacature-list {
        padding-top: 0;
        padding-bottom: 64px;
    }
   
    .section-listing-vacature-list .block-sidebar {
        max-width: 100% !important;
        width: 100%;
    }
}

/* =============== MAX-WIDTH: 600px =============== */
@media all and (max-width: 600px) {
    /* MOBILE */

    .item-opleiding:nth-child(2n + 1),
    .item-opleiding:nth-child(2n) {
        width: 100%;
        max-width: 100%;
    }

    .item-opleiding-wrapper,
    .item-opleiding-wrapper:last-child,
    .item-opleiding-wrapper:nth-child(2n) {
        -webkit-box-pack: center !important;
            -ms-flex-pack: center !important;
                justify-content: center !important;
    }

    .section-opleidingen-kort .whbutton {
        width: 100%;
        text-align: center;
    }

    .section-pop-image .col-6:first-child,
    .section-pop-image.image-right .col-6:first-child {
        padding-bottom: 25px;
    }

    .section-about-zest {
        padding-top: 50px;
        padding-bottom: 64px;
    }

    .section-contact {
        padding-top: 64px;
        padding-bottom: 100px;
    }

    .section-contact .gform-body .gfield_radio,
    .section-contact-sidebar .gform-body .gfield_radio {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .section-accordion-content .accordion-title {
        padding: 20px 62px 20px 16px;
    }

    .section-list-faqs .faq-question, 
    .section-main-faq .faq-question {
        padding: 16px 62px 16px 16px; 
    }

    .section-list-faqs .faq-icon,
    .section-main-faq .faq-icon {
        width: 32px;
        height: 32px;
    }

    .section-list-faqs h2 {
        padding: 0 16px;
    }

    .newsletter-btn-wrap a,
    .newsletter-btn-wrap,
    .section-contact-sidebar .gform_button {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    .newsletter-info p {
        max-width: 100%;
    }

    .section-zest-values:after {
        display: none;
    }

    .row-with-sidebar .row-content-opleidingen {
        padding-top: 64px;
    }

    .section-accordion-content .item-accordion {
        margin-bottom: 16px;
    }

    .section-accordion-content .accordion-icon,
    .section-list-faqs .faq-icon, .section-main-faq .faq-icon {
        width: 32px;
        height: 32px;
    }

    
    .item-zest-card,
    .section-simple-card .item-simple-card {
        max-width: 247px;
        height: 302px;
        padding: 40px 20px;
    }
    

    .section-simple-card .item-simple-card:not(:last-child) {
        margin-right: 16px;
    }

    .section-simple-card .item-simple-card p {
        display: block;
    }

    .section-simple-card .item-simple-card.card-green::before,
    .section-simple-card .item-simple-card.card-blue::before,
    .section-simple-card .item-simple-card.card-rose::before {
        top: 0;
        left: -60px;
    }

    .section-opleidingen-kort .col-wrapper,
    .item-opleiding {
        padding-bottom: 48px;
    }

    .section-pop-image {
        padding-top: 26px;
        padding-bottom: 100px;
    }

    .section-seo-block {
        padding-top: 0;
        padding-bottom: 64px;
    }

    .section-card-image-people,
    .section-list-faqs,
    .section-pop-image {
        padding-bottom: 64px;
    }

    .section-testimonials {
        padding-top: 64px;
        padding-bottom: 50px;
    }

    .section-contact .container {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .faqs-list {
        padding-bottom: 32px;
    }

    .section-seo-block .inner-section:before,
    .section-zest-values .inner-section:after {
        display: none;
    }

    .section-soorten-advies,
    .section-zest-values,
    .section-main-faq {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .section-card-image-people.grid-list {
        padding-top: 64px;
    }

    .section-card-image-people.image-card-desc .col-6 {
        padding-bottom: 24px;
    }

    .blog-info .category-filter select {
        min-width: unset !important;
        width: 100%;
    }

    .section-contact .gform-body .gfield_checkbox#input_2_14,
    .section-contact-sidebar .gform-body .gfield_checkbox#input_3_16,
    .section-contact .gform-body .gfield_checkbox#input_4_14,
    .section-contact .gform-body .gfield_checkbox#input_5_14 {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

}