:root {

    /* Colours */
    --color-beek-red: #D71019;
    --color-dark-red: #980C12;
    --color-beek-green: #74C11B;
    --color-green: #4E9F42;
    --color-dark-green: #005640;
    --color-beek-blue: #0F4372;
    --color-light-blue: #7BADD3;
    --color-orange: #E86931;
    --color-white: #FFFFFF;
    --color-black: #1D1D1B;
    --color-grey: #AAAAAA;
    --color-greyish: #DADADA;


    /* Containers */
    --container-padding: 32px;
    --container-padding-tablet: 26px;
    --container-padding-mobile: 21px;
    --container-max-width: calc(1440px + calc(var(--container-padding) * 2));
    --container-max-width-tablet: calc(1440px + calc(var(--container-padding-tablet) * 2));
    --container-max-width-mobile: calc(1440px + calc(var(--container-padding-mobile) * 2));

    /* Font */
    --font-manrope: 'Manrope', sans-serif;
    --font-mulish: 'Mulish', sans-serif;
    --font-divenire: 'divenire', sans-serif;
    --font-ubuntu: 'Ubuntu', sans-serif;
    --font-family: var(--font-manrope);
    --font-size: 16px;
    --h1-font-size: calc(74px / var(--font-size) * 1rem);
    --h2-font-size: calc(48px / var(--font-size) * 1rem);
    --h3-font-size: calc(34px / var(--font-size) * 1rem);
    --h4-font-size: calc(24px / var(--font-size) * 1rem);
    --h5-font-size: calc(18px / var(--font-size) * 1rem);
    --h6-font-size: calc(16px / var(--font-size) * 1rem);
    --body-text-font-size: calc(16px / var(--font-size) * 1rem);

    --arrow-btn-bg: var(--color-beek-red);
    --arrow-btn-bg-hover: var(--color-dark-red);
    --arrow-btn-text-color: var(--color-white);
}


body {
    background-color: var(--color-white);
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: var(--body-text-font-size);
    margin: 0;
    /* padding:0 48px; */
    padding: 0 33px;
}

body.montage {
    --font-family: var(--font-manrope);
}

body.agri {
    --font-family: var(--font-ubuntu);
}

body.deuren {
    --font-family: var(--font-divenire);
}


.container {
    padding-inline: var(--container-padding);
    max-width: var(--container-max-width);
    margin: 0 auto;

    @media (max-width: 1024px) {
        padding-inline: var(--container-padding-tablet);
        max-width: var(--container-max-width-tablet);
    }

    @media (max-width: 768px) {
        padding-inline: var(--container-padding-mobile);
        max-width: var(--container-max-width-mobile);
    }
}

h1,
.h1 {
    font-size: var(--h1-font-size);
}

h2,
.h2 {
    font-size: var(--h2-font-size);
}

h3,
.h3 {
    font-size: var(--h3-font-size);
}

h4,
.h4 {
    font-size: var(--h4-font-size);
}

h5,
.h5 {
    font-size: var(--h5-font-size);
}

h6,
.h6 {
    font-size: var(--h6-font-size);
}


* {
     transition: all 0.2s ease;
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, p {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;

    &:not([class]) {
        color: var(--arrow-btn-bg);

        &:hover, &:focus {
            color: var(--arrow-btn-bg-hover);
        }
    }
}

ul {
    list-style-type: none;
}


.d-flex {
    display: flex;
    flex-wrap: wrap;

}

.f-w500 {
    font-weight: 500 !important;
}

.text-right {
    text-align: right;
}

.border-top {
    border-top: 1px solid #e1e1e1;
}

.position-relative {
    position: relative;
}

.pt-0 {
    padding-top: 0px !important;
}

.pb-150 {
    padding-bottom: 150px !important;
}

.mt-0 {
    margin-top: 0px !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.pb-0 {
    padding-bottom: 0px !important;
}

.bg-none {
    background: none !important;
}

.f-direction-reverse {
    flex-direction: row-reverse;
}

.o-hidden {
    overflow: hidden;
}

.aos-init span, span.aos-init {
    display: block;
}

.aos-animate .drop-anim {
    animation: drop-in 1000ms ease 100ms backwards;
}

.footer-address-book {
    img {
        max-width: 100%;
        height: auto;
    }
}

.img-fluid {
    img {
        max-width: 100%;
        height: auto;
    }
}

.merketeers-icon {
    img {
        max-width: 100%;
        height: auto;
    }
}

.header-lft {
    img {
        max-width: 100%;
        height: auto;
    }
}

.team-gallery-inner-item .galleryImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.animate-text {
    .mask {
        overflow: hidden;
    }

    .line {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }

    &.y-pop-up {
        .mask {
            .line {
                transition: all;
                opacity: 0;
                transform: translateY(100px);
            }
        }
    }
}

.breadcrumb {
    margin: 0 0 1px;


    ul {
        margin: 0;
        padding: 0;
        gap: 32px;

        li {
            font-size: 0.825rem;
            font-weight: 500;


            &:not(:last-child) {
                position: relative;

                &::after {
                    content: "";
                    width: 1px;
                    height: 10px;
                    display: block;
                    background-color: currentColor;
                    position: absolute;
                    top: 0;
                    right: -16px;
                    transform: translate(-50%, 50%);
                }
            }

        }
    }
}


.btn-dot {
    background-color: var(--color-light-blue);
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    border: 0 solid transparent;
    display: inline-block;
    text-transform: uppercase;
    line-height: 1.2;
    padding: 16px 32px 15px 54px;

    &:before {
        content: '';
        position: absolute;
        left: 33px;
        top: 50%;
        transform: translateY(-50%);
        width: 7px;
        height: 7px;
        background-color: rgba(1, 78, 120, 0.2);
        border-radius: 50%;
        display: block;
    }

    span {
        position: relative;
        transform: translateY(0);
    }

    &:has(span[data-text]) {
        span[data-text] {
            transition: all ease-out 0.2s;
            display: inline-block;
            /*opacity: 1;*/

            &::after {
                content: attr(data-text);
                position: absolute;
                left: 0;
                top: calc(100% + 40px);
                opacity: 0;
                transition: all ease-out 0.2s;
            }
        }

        &:hover, &:focus {
            span[data-text] {
                /*opacity: 0;*/

                &::after {
                    opacity: 1;
                }
            }
        }
    }

    &:hover, &:focus {
        span {
            /**/
            /*top: calc(-100% - 40px);*/
            transform: translateY(calc(-100% - 40px));
        }
    }

    &.btn-orange {
        background-color: #E86931;
        overflow: hidden;

        span {
            letter-spacing: .32px;
        }

        &:before {
            background-color: rgba(186, 84, 39, 1);
        }

        &[data-amount] {
            overflow: visible;

            &:after {
                content: attr(data-amount);
                width: 36px;
                height: 36px;
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                right: -14px;
                top: -17px;
                background-color: #BA5427;
                color: white;
                font-size: 1rem;
                font-weight: 700;
                border-radius: 50%;
            }
        }
    }

    &.btn-blue {
        background-color: #003B71;
        padding: 16px 28px 16px 47px;

        span {
            /*letter-spacing: .32px;*/
        }

        &:before {
            background-color: #7BADD3;
            left: 23px;
        }
    }
}

.btn-arrow {
    border-radius: 30px;
    background-color: var(--arrow-btn-bg);
    color: var(--arrow-btn-text-color);
    font-size: 1rem;
    font-weight: 600;
    padding-block: 16px;
    padding-inline: 59px 34px;
    position: relative;
    overflow: hidden;
    border: 0 solid transparent;
    display: inline-block;
    line-height: 1.2;


    @media (max-width: 767px) {
        font-size: .875rem;
        font-weight: 600;
        padding-block: 14px;
        padding-inline: 59px 24px;
    }

    &::before {
        content: '';
        position: absolute;
        left: 8px;
        top: 8px;
        background-color: var(--arrow-btn-bg-hover);
        border-radius: 30px;
        width: 38px;
        height: 38px;
        transition: all ease-out 0.2s;
        z-index: 0;

        @media (max-width: 767px) {


            width: 35px;
            height: 35px;
            top: 5px;
            left: 7px;


        }
    }

    &::after {
        content: '';
        position: absolute;
        left: 20px;
        top: 20px;
        z-index: 2;
        display: block;
        width: 14px;
        height: 15px;
        background-repeat: no-repeat;
        background-position: center center;
        background-image: url(/assets/templates/img/btn-arrow.svg);

        @media (max-width: 767px) {


            top: 15px;
            left: 17px;


        }
    }

    &:hover, &:focus {
        &:before {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }

    &:has(span[data-text]) {
        span[data-text] {
            transition: all ease-out 0.2s;
            display: inline-block;
            /*opacity: 1;*/

            &::after {
                content: attr(data-text);
                position: absolute;
                left: 0;
                top: 40px;
                color: var(--color-black);
                opacity: 0;
            }
        }

        &:hover, &:focus {
            span[data-text] {
                /*opacity: 0;*/

                &::after {
                    opacity: 1;
                }
            }
        }
    }

    span {
        position: relative;
        top: 0;
    }

    &.arrow-down {
        &::after {
            rotate: 90deg;
        }
    }

    &.transparent-bg {
        background-color: transparent;
        border: 1px solid var(--color-white);

        &::before {
            background-color: var(--color-white);
        }

        &::after {
            background-image: url(/assets/templates/img/btn-arrow-black.svg);
        }

        &:hover, &:focus {
            span {
                top: -40px;
            }
        }

        &.black {
            border: 1px solid var(--color-black);
            color: var(--color-black);

            &::before {
                background-color: var(--color-black);
            }

            &::after {
                background-image: url(/assets/templates/img/btn-arrow.svg);
            }

            &:has(span[data-text]) {
                & span[data-text] {
                    &:after {
                        color: var(--color-white);
                    }
                }
            }
        }
    }

    &.white-bg {
        background-color: var(--color-white);
        border: 1px solid var(--color-white);
        color: var(--color-black);

        &.with-border {
            border-color: var(--color-black);
        }

        &::before {
            background-color: var(--color-black);
        }

        &::after {
            background-image: url(/assets/templates/img/btn-arrow.svg);
        }

        &:has(span[data-text]) {
            & span[data-text] {
                &:after {
                    color: var(--color-white);
                }
            }
        }

        &:hover, &:focus {
            span {
                top: -40px;

                &::after {
                    color: var(--color-white);
                }
            }
        }
    }

    &.red-bg {
        background-color: var(--color-beek-red);
        border: 1px solid var(--color-beek-red);
        color: var(--color-white);

        &::before {
            background-color: var(--color-dark-red);
        }

        &::after {
            background-image: url(/assets/templates/img/btn-arrow.svg);
        }

        &:has(span[data-text]) {
            & span[data-text] {
                &:after {
                    color: var(--color-white);
                }
            }
        }

        &:hover, &:focus {
            span {
                top: -40px;

                &::after {
                    color: var(--color-white);
                }
            }
        }
    }

    &.green-bg {
        background-color: var(--color-beek-green);
        border: 1px solid var(--color-beek-green);
        color: var(--color-white);

        &::before {
            background-color: var(--color-dark-green);
        }

        &::after {
            background-image: url(/assets/templates/img/btn-arrow.svg);
        }

        &:hover, &:focus {
            span[data-text] {
                top: -40px;

                &::after {
                    color: var(--color-white);
                }
            }
        }

        &.dark {
            background-color: #00794E;
            border-color: #00794E;
            padding: 20px 31px 16px 71px;
        }
    }

    &.download-icon {
        background-color: transparent;
        border: 1px solid rgba(255, 255, 255, 0.2);

        &::before {
            background-color: var(--color-white);
            top: 50%;
            transform: translateY(-50%);
        }

        &::after {
            background-image: url("/assets/templates/img/icon-download.svg");
            top: 50%;
            transform: translateY(-50%);
        }

        &:hover, &:focus {
            span[data-text] {
                top: -40px;
            }
        }
    }


}

.btn-with-icon {
    display: inline-flex;
    align-items: center;
    background-color: var(--arrow-btn-bg-hover);
    border-radius: 38px;
    position: relative;
    padding: 17px 100px 17px 22px;
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.375;
    gap: 22px;
    transition: all ease-out 0.2s;

    &::after {
        content: '';
        position: absolute;
        right: 0;
        background-image: url("/assets/templates/img/icon-arrow-toepassingen.svg");
        width: 79px;
        height: 79px;
        background-repeat: no-repeat;
        background-position: center center;
        background-color: var(--color-beek-red);
        border-radius: 50%;
        transition: all ease-out 0.2s;
    }

    &:hover, &:focus {
        background-color: var(--arrow-btn-bg);

        &::after {
            background-color: var(--arrow-btn-bg-hover);
        }
    }

}

.submit-contact-btn {
    button {
        padding: 16px 28px 16px 58px;
        position: relative;
        top: -20px;
    }
}

footer {
    .footer-address-box {
        a {
            overflow: hidden;
            z-index: 1;
            display: inline-block;

            &:hover, &:focus {
                span {
                    top: -40px;
                }
            }

            span {
                position: relative;
                top: 0;
                transition: all ease-out 0.2s;

                &:after {
                    content: attr(data-text);
                    position: absolute;
                    left: 0;
                    top: 40px;
                }
            }
        }
    }

    .footer-address-book {
        a {
            &:hover, &:focus {
                i {
                    transform: rotate(45deg);
                }
            }
        }
    }
}

.banner-project-link {
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    border-bottom: 1px solid #fff;
    padding: 0 0 8px;
    overflow: hidden;
    /* margin-top: -15px; */
    display: inline-block;


    @media (max-width: 767px) {
        font-size: 0.875rem;
    }


    span {
        display: block;
        position: relative;
        transition: all ease-out 0.2s;
        top: 0;

        &::after {
            content: attr(data-text);
            position: absolute;
            left: 0;
            top: 40px;
        }
    }

    &:hover, &:focus {
        border-color: var(--site-color);

        span {
            top: -40px;
        }
    }
}

@keyframes drop-in {

    0% {
        opacity: 0;
        transform: translateY(200px);
    }

    100% {
        opacity: 1;
        transform: translate(0px);
    }

}


@media (max-width: 767px) {
    body {
        padding: 0 0px;
    }
}

.rte {
    line-height: 2;
    font-weight: 500;

    > strong, h2 {
        font-size: 1.3125rem;
        font-weight: 700;
        line-height: 1.52;
    }

    h3 {
        font-size: 1.125rem;
    }

    h4, h5, h6 {
        font-size: 1rem;
    }

    strong, b {
        font-weight: 700;
    }

    i, em {
        font-style: italic;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    ol {
        margin: 0;
        padding-left: 45px;


        li {
            text-indent: 15px;
        }
    }


    ul {
        margin: 0;
        padding-left: 0;
        list-style: none;

        li {
            text-indent: 56px;
            position: relative;


            &::before {
                content: '•';
                position: absolute;
                left: -28px;
            }
        }
    }

    ul, p, ol {
        margin-bottom: 32px;
    }
}

a:not([class]) {
    &:has(span[data-text]) {
        overflow: hidden;

        span[data-text] {
            transition: all ease-out 0.2s;
            display: inline-block;
            /*opacity: 1;*/
            position: relative;
            top: 0;

            &::after {
                content: attr(data-text);
                position: absolute;
                left: 0;
                top: 40px;
                color: var(--color-black);
                opacity: 0;
            }
        }

        &:hover, &:focus {
            span[data-text] {
                top: -40px;

                &::after {
                    opacity: 1;
                }
            }
        }
    }

    &:has(img) {
        display: flex;
        gap: 10px;
        align-items: center;
    }
}

.grecaptcha-badge {
    visibility: hidden;
    opacity: 0;
}


.language-switch {
    border-radius: 30px;
    padding: 18px 20px;
    position: relative;
    background-color: #F6F6F6;
    z-index: 2;

    &.show-mobile {
        display: none;
        /*max-width: 86px;*/
        @media (max-width: 991px) {
            display: block;
            max-width: 110px;
        }
    }

    &:hover, &:focus, &.active {
        border-radius: 30px 30px 0 0 ;
        ul {
            display: flex;
        }
    }

    ul {
        display: none;
        flex-direction: column;
        gap: 20px;
        border-radius: 0 0 30px 30px;
        padding:10px 20px 18px 20px;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #f6f6f6;
        margin-top: 0;

        li {
            padding: 0;
            margin: 0;
        }
    }

    img {
        max-width: 100%;
        height: auto;
        border-radius: 50%;
        overflow: hidden;
    }

    span {
        padding-right: 18px;
        position: relative;

        &::before {
            content: '';
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 11px;
            height: 6px;
            background-image: url("/assets/templates/img/icon-dropdown-lang-switch.svg");
        }
    }

    span, a {
        display: inline-flex;
        gap: 14px !important;
        text-transform: uppercase;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1;
    }
}


.form-group {
    &.has-error {
        span {
            color: red;
            font-weight: 700;
            display: block;
            padding-block: 0.5rem;
        }
    }
}