/** Shopify CDN: Minification failed

Line 74:18 Expected identifier but found whitespace
Line 74:19 Unexpected "30px"

**/
.bf-hero-section {
    margin-top: 20px;
}


.bf-hero-section .right-item {
    border-radius: 30px 0 30px 0;
}

.bf-hero-section .right-grid {
    display: grid;
    gap: 40px;
}

.bf-hero-section div.grid__item.right-grid>div:nth-child(odd) {
    background-color: #E27100;
    background-image: url(/cdn/shop/files/Intersection_5_oranje.png?v=1741185058);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.bf-hero-section div.grid__item.right-grid>div:nth-child(even) {
    background-color: #367C4C;
    background-image: url(/cdn/shop/files/Intersection_1.png?v=1741184995);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.bf-hero-section .right-item:nth-child(odd) .icon-button {
    background-image: url(/cdn/shop/files/bf_pijltje_oranje.svg?v=1741185131);

}

.bf-hero-section .right-item:nth-child(even) .icon-button {
    background-image: url(/cdn/shop/files/bf_pijltje_groen.svg?v=1741185132);

}

.bf-hero-section .right-item .icon-button {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 40px;
    /* Pas aan naar wens */
    height: 40px;
    text-indent: -9999px;
    /* Verberg tekst */
}

/* Optioneel: Verberg de <img> als fallback */
.bf-hero-section .icon-button img {
    display: none;
}


/* .bf-hero-section .left-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* 50% zwarte overlay */
    border-radius: 30px 0 30px 0;
} */

.bf-hero-section p,
.bf-hero-section h3,
.bf-hero-section h2 {
    color: white;
}

.bf-hero-section .left-content>div {
    z-index: 1;
    color: white;
    position: relative;
}


.bf-hero-section .right-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 30px 0 30px 0;
}

.bf-hero-section .right-item {
    display: grid;
    grid-template-columns: 2fr 3fr;
}

.bf-hero-section .right-item-image {
    display: flex;
}

.bf-hero-section .right-item-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin-top: -20px;
}

.bf-hero-section .right-item-text {
    display: grid;
    padding: 20px;
    padding-right: 40px;
    color: white;
    grid-template-columns: 1fr 40px;
    gap: 20px;

}

.bf-hero-section .right-item-text h3 {
    grid-area: 1 / 1 / 2 / 3;
    margin: 0px;
    padding: 0px;
    font-size: 25px
}

.bf-hero-section .right-item-text p {
    grid-area: 2 / 1 / 3 / 2;
    margin: 0px;
    padding: 0px;
}

.bf-hero-section .right-item-text a {
    grid-area: 2 / 2 / 3 / 3;

    margin: 0px;
    padding: 0px;
}

.left-content-text h2 {
    font-size: 35px;
    max-width: 75%;
    word-break: unset;
}

.custom-banner__content__inner h2 {
    font-size: 35px;
}

.right-item-text .button {
    display: none;
}


@media all and (max-width: 980px) {
    .bf-hero-section .right-item {
        grid-template-columns: 1fr 2.5fr;
        /* direction: rtl; */
    }

    .right-item-text {
        text-align: left;
        display: flex !important;
        flex-direction: column;
        padding-left: 30px !important;
        align-items: flex-start;
        justify-content: center;
    }

    .right-item-text a {
        direction: ltr;
        max-width: fit-content;
    }

    .right-item-text .button {
        display: flex;
    }


    .bf-hero-section .left-content {
        padding: 20px;
    }

    .right-item-image {
        padding-right: 10px
    }
}

.right-item-text .icon-button {
    max-height: 100%;
}

@media all and (max-width: 767px) {
    .bf-hero-section .right-item {
        grid-template-columns: 0fr 1fr;
    }

    .bf-hero-section .left-content {
        padding: 20px;
    }
}

.bf-hero-section .button {
    background: #E27100;
}


@media all and (max-width: 767px) {
    .bf-hero-section .grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .bf-hero-section .grid .grid__item {
        width: 100%;
        max-width: 100%;
    }

    .bf-hero-section .right-grid {
        gap: 20px;
    }
}

@media all and (max-width: 980px) {
    .left-content-text h2 {
        font-size: 35px;
        max-width: 100%;
    }

    .right-item-text .icon-button {
        max-height: 0;
    }

    .bf-hero-section .right-item-text {
        gap: 0;
    }

    .bf-hero-section .right-item-text p {
        margin-block: 20px;
    }
}