/*
  | Pixels (px) | Rems (rem) |
  |-------------|------------|
  | 4px         | 0.25rem    |
  | 8px         | 0.5rem     |
  | 10px        | 0.625rem   |
  | 12px        | 0.75rem    |
  | 14px        | 0.875rem   |
  | 16px        | 1rem       |
  | 18px        | 1.125rem   |
  | 20px        | 1.25rem    |
  | 24px        | 1.5rem     |
  | 28px        | 1.75rem    |
  | 32px        | 2rem       |
  | 36px        | 2.25rem    |
  | 40px        | 2.5rem     |
  | 48px        | 3rem       |
  | 56px        | 3.5rem     |
  | 64px        | 4rem       |
*/
@font-face{
    font-family: 'Forma DJR Display';
    src: url('../fonts/forma-djr-display-bold.woff') format('woff');
    src: url('../fonts/forma-djr-display-bold.woff2') format('woff2');
   font-weight: 700;
}

@font-face{
    font-family: 'Forma DJR Display';
    src: url('../fonts/forma-djr-display-medium.woff') format('woff');
    src: url('../fonts/forma-djr-display-medium.woff2') format('woff2');
    font-weight: 500;
}

:root {
    --hrbl-green: #008E61;
    --hrbl-light-green: #00B87F;
    --hrbl-gray: #232323;
    --hrbl-light-gray: #EEF1EF;
    --hrbl-white: #F2F2F2;

    --bs-body-font-size: 1.25rem;
    --bs-body-font-weight: 500;
    --bs-body-line-height: 1.5;

    --bs-font-sans-serif: 'Forma DJR Display', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-body-color: var(--hrbl-gray);
}

@media(min-width: 992px) {
    :root {
        --bs-body-line-height: 1.6;
    }
}

/* TEXT AND HEADINGS */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    text-transform: uppercase;
}

h1 {
    font-size: 3.5rem;
}

h2 {
    font-size: 2.5rem;
}

.lead {
    color: var(--hrbl-green);
    font-size: 1rem;
    margin-bottom: 0;
}

a {
    color: var(--hrbl-green);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 12%;
    text-underline-offset: 23%;
    transition: all 0.3s ease-in-out;
    outline: none;
}

a:is(:hover, :focus-visible, :active) {
    text-decoration-color: var(--hrbl-light-green);;
}

@media (max-width: 425px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    a, p, span, li {
        font-size: 1rem;
    }
}

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

    h2 {
        font-size: 2.5rem;
    }
}

small {
    font-size: 1rem;
}

/* HERO */
header {
    height: 75dvh;
    min-height: 500px;
    max-height: 1050px;
    color: var(--hrbl-white);
    background-color: #004630;
    background-image: var(--bg-img);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.header-small {
    height: 600px;
}

@media (max-width: 991px) {
    header {
        height: 75dvh;
    }
}

/* NAVBAR */
body > nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100; /* Zorgt dat nav boven alles staat */
    background-image: none; /* Verwijder achtergrondafbeelding van nav */
    background-color: transparent; /* Transparante achtergrond */
}

.nav-logo {
    outline: none;
}

.nav-logo img {
    max-height: 50px;
    transition: all 0.3s ease-in-out;
}

.nav-logo:is(:hover, :focus-visible, :active) img {
    transform: scale(1.075);
}

.nav-logo:is(:focus-visible, :active) img {
    transform: scale(1.075);
    box-shadow: 0 0 5px 0.25rem color-mix(in srgb, var(--hrbl-green) 50%, transparent);
}

.nav-link {
    color: var(--hrbl-white) !important;
    font-size: 1.25rem;
    text-decoration: none;
    position: relative;
    display: inline-block;
    outline: none;
    transition: box-shadow 0.3s ease-in-out;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 3px;
    background-color: var(--hrbl-light-green);
    transition: width 0.4s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link:is(:focus-visible, :active) {
    box-shadow: 0 0 0 0.25rem var(--hrbl-green);
    background-color: color-mix(in srgb, var(--hrbl-green) 25%, transparent);
}

/* BACKGROUNDS */
.bg-green {
    background-color: var(--hrbl-green);
    color: var(--hrbl-white);
}

.bg-light-green {
    background-color: var(--hrbl-light-green);
}

/* BUTTONS */
.btn {
    --bs-btn-padding-x: 2rem;
    --bs-btn-padding-y: 1rem;
    --bs-btn-font-family: ;
    --bs-btn-font-size: 1rem;
    --bs-btn-border-radius: 100px;
    letter-spacing: .2rem;
    text-transform: uppercase;
    transition: all .3s ease-in-out;
}

.btn-primary {
    --bs-btn-color: var(--hrbl-white);
    --bs-btn-bg: var(--hrbl-green);
    --bs-btn-border-color: var(--hrbl-green);
    --bs-btn-hover-color: var(--hrbl-white);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--hrbl-green);
    --bs-btn-focus-shadow-rgb: 255, 102, 0;
    --bs-btn-active-color: var(--hrbl-white);
    --bs-btn-active-bg: var(--hrbl-green);
    --bs-btn-active-border-color: var(--hrbl-green);
}

.btn-primary-dark {
    --bs-btn-color: var(--hrbl-white);
    --bs-btn-bg: var(--hrbl-green);
    --bs-btn-border-color: var(--hrbl-green);
    --bs-btn-hover-color: var(--hrbl-white);
    --bs-btn-hover-bg: var(--hrbl-gray);
    --bs-btn-hover-border-color: var(--hrbl-gray);
    --bs-btn-focus-shadow-rgb: 255, 102, 0;
    --bs-btn-active-color: var(--hrbl-white);
    --bs-btn-active-bg: var(--hrbl-gray);
    --bs-btn-active-border-color: var(--hrbl-gray);
}

.btn-secondary {
    --bs-btn-color: var(--hrbl-white);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--hrbl-white);
    --bs-btn-hover-color: var(--hrbl-green);
    --bs-btn-hover-bg: var(--hrbl-white);
    --bs-btn-hover-border-color: var(--hrbl-white);
    --bs-btn-focus-shadow-rgb: 255, 102, 0;
    --bs-btn-active-color: var(--hrbl-white);
}

.btn-dark {
    --bs-btn-color: var(--hrbl-white);
    --bs-btn-bg: var(--hrbl-gray);
    --bs-btn-border-color: var(--hrbl-gray);
    --bs-btn-hover-color: var(--hrbl-white);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--hrbl-white);
    --bs-btn-focus-shadow-rgb: 255, 102, 0;
    --bs-btn-active-color: var(--hrbl-white);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: var(--hrbl-white);
}

.btn-dark-light {
    --bs-btn-color: var(--hrbl-white);
    --bs-btn-bg: var(--hrbl-gray);
    --bs-btn-border-color: var(--hrbl-gray);
    --bs-btn-hover-color: var(--hrbl-green);
    --bs-btn-hover-bg: var(--hrbl-white);
    --bs-btn-hover-border-color: var(--hrbl-white);
    --bs-btn-focus-shadow-rgb: 255, 102, 0;
    --bs-btn-active-color: var(--hrbl-green);
    --bs-btn-active-bg: var(--hrbl-white);
    --bs-btn-active-border-color: var(--hrbl-white);
}

@media (max-width: 425px) {
    .btn { font-size: 0.75rem; }
}

/* MAIN */
main#branch-bg {
    position: relative;
    overflow: hidden;
}

main#branch-bg::before {
    content: '';
    position: absolute;
    top: 2rem;
    right: 0;
    width: 667px;
    height: 722px;
    background-image: url('../img/branch.svg');
    background-repeat: no-repeat;
    background-position: top right;
    z-index: -1;
}

@media (max-width: 991px) {

    main#branch-bg::before {
        display: none;
    }
}

/* CARDS LAYOUT */
.cards-layout .card {
    border: none;
    border-radius: 12px;
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-shadow: 3px 3px 14px rgba(0, 0, 0, 0.05),
    3px 3px 8px rgba(0, 0, 0, 0.25);
}

.cards-layout .card span {
    font-size: 1rem;
}

.cards-layout .card .icon {
    max-width: 80px;
    max-height: 80px;
    margin-bottom: 1rem;
}

.cards-layout .card .position-relative {
    padding-left: 100px;
}

/* VIDEO LAYOUT */
/*.video-container {*/
/*    cursor: pointer;*/
/*}*/

/*.play-button {*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*    color: white;*/
/*    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));*/
/*    opacity: 0.9;*/
/*    transition: opacity 0.3s, transform 0.3s;*/
/*}*/

/*.video-container a:is(:focus-visible, :active) {*/
/*    outline: color-mix(in srgb, var(--hrbl-green) 75%, transparent) solid 12px;*/
/*}*/

/*.video-container a:is(:focus-visible, :active) .play-button  {*/
/*    opacity: 1;*/
/*    transform: translate(-50%, -50%) scale(1.1);*/
/*}*/

/*.video-container:hover .play-button {*/
/*    opacity: 1;*/
/*    transform: translate(-50%, -50%) scale(1.1);*/
/*}*/

/* STEP-BY-STEP LAYOUT */
/*[class^="number-bg"] {*/
/*    position: absolute;*/
/*    left: 25px;*/
/*    top: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background-size: contain;*/
/*    background-repeat: no-repeat;*/
/*}*/

/*.number-bg-1 {*/
/*    background-image: url('../img/icons/1.svg');*/
/*}*/

/*.number-bg-2 {*/
/*    background-image: url('../img/icons/2.svg');*/
/*}*/

/*.number-bg-3 {*/
/*    background-image: url('../img/icons/3.svg');*/
/*}*/

/*.number-bg-4 {*/
/*    background-image: url('../img/icons/4.svg');*/
/*}*/

/*.steps-layout .card {*/
/*    border: solid 2px var(--hrbl-white);*/
/*    border-radius: 8px;*/
/*    transition: all 0.3s ease;*/
/*}*/

/*@media (max-width: 767px) {*/
/*    .steps-layout .card { height: 190px; }*/

/*    [class^="number-bg"] { left: -10px; }*/
/*}*/

/*@media (max-width: 1199px) {*/
/*    [class^="number-bg"] {*/
/*        opacity: 0.3;*/
/*    }*/

/*    .number-card-text {*/
/*        z-index: 1;*/
/*    }*/
/*}*/

/* REVIEW SLIDER */
section:has(.review-slider) {
    overflow: hidden;
}

.review-slider {
    width: 100%;
    overflow: inherit;
    overflow-x: clip;
    --swiper-navigation-top-offset: 120%;
}

.review-slider .swiper-slide {
    scale: .9;
    padding: 3rem 2.5rem 2.5rem;
    background-color: var(--bs-body-bg);
    border-radius: 1rem;

    color: var(--hrbl-gray);
    border: solid 2px rgba(0, 0, 0, 0.15);
    transition: scale .45s ease-in-out;
}

.review-slider .swiper-slide.swiper-slide-active {
    scale: 1;
}

.review-slider .swiper-slide:before {
    content: '';
    position: absolute;
    top: 1.5rem;
    left: 2.5rem;
    width: 30px;
    height: 23px;
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='23' viewBox='0 0 30 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.88153 0.53418H13.8603C14.0908 0.53418 14.229 0.626377 14.3673 0.764675C14.4595 0.902973 14.5056 1.08737 14.4595 1.27177L11.7858 11.137V21.9704C11.7858 22.2009 11.7397 22.3853 11.6014 22.5236C11.4631 22.6619 11.2787 22.7541 11.0482 22.7541H1.41343C1.18294 22.7541 1.04464 22.6619 0.906339 22.5236C0.768041 22.3853 0.675842 22.2009 0.675842 21.9704V11.9668C0.675842 11.7363 0.721942 11.5058 0.81414 11.2292C0.86024 10.9987 0.952438 10.7682 1.09074 10.5838L7.68294 1.17957C7.82124 0.995172 8.00564 0.856876 8.23613 0.718578C8.46663 0.58028 8.65103 0.53418 8.88153 0.53418ZM23.5872 0.53418H28.7042C28.8886 0.53418 29.0269 0.626377 29.1652 0.764675C29.2574 0.902973 29.3035 1.08737 29.2574 1.27177L26.6298 11.137V21.9704C26.6298 22.2009 26.5376 22.3853 26.3993 22.5236C26.261 22.6619 26.0766 22.7541 25.8922 22.7541H16.1652C15.9347 22.7541 15.7503 22.6619 15.612 22.5236C15.4737 22.3853 15.3815 22.2009 15.3815 21.9704V11.9668C15.3815 11.7363 15.4276 11.5058 15.5198 11.2292C15.612 10.9987 15.7042 10.7682 15.8425 10.5838L22.4347 1.17957C22.573 0.995172 22.7113 0.856876 22.9418 0.718578C23.1723 0.58028 23.3567 0.53418 23.5872 0.53418Z' fill='%23008E61'/%3E%3C/svg%3E%0A");
}

.review-slider .swiper-slide blockquote {
    margin: 1rem 0 2.5rem;
}

.review-slider .swiper-slide figcaption {
    color: var(--hrbl-green);
}

.review-slider .swiper-scrollbar {
    display: none;
}

.review-slider .swiper-button-prev,
.review-slider .swiper-button-next {
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    width: 48px;
    height: 48px;
    top: 20px;
    transition: transform .3s ease-in-out;
    outline: none;
    will-change: transform;
}

.review-slider .swiper-button-prev {
    background-image: url("data:image/svg+xml,%3Csvg width='51' height='18' viewBox='0 0 51 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.4592 17.577C8.97406 15.8044 7.4411 14.2714 5.86018 12.9779C4.27925 11.6845 2.65037 10.6305 0.973633 9.8161V8.52261C4.2792 6.84587 7.44104 4.25891 10.4592 0.761719H12.9743C12.2078 2.39055 11.4413 3.82775 10.6748 5.07332C9.90826 6.27099 9.16569 7.27704 8.44709 8.09145V10.2473C9.16569 11.0138 9.90826 12.0198 10.6748 13.2654C11.4413 14.463 12.2078 15.9002 12.9743 17.577H10.4592ZM8.08785 10.6784V7.66029H50.7009V10.6784H8.08785Z' fill='%23140803'/%3E%3C/svg%3E");
    left: calc(100% - 120px);
}

.review-slider .swiper-button-next {
    background-image: url("data:image/svg+xml,%3Csvg width='51' height='18' viewBox='0 0 51 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40.9427 17.577C42.4278 15.8044 43.9608 14.2714 45.5417 12.9779C47.1226 11.6845 48.7515 10.6305 50.4282 9.8161V8.52261C47.1227 6.84587 43.9608 4.25891 40.9427 0.761719H38.4276C39.1941 2.39055 39.9606 3.82775 40.7271 5.07332C41.4936 6.27099 42.2362 7.27704 42.9548 8.09145V10.2473C42.2362 11.0138 41.4936 12.0198 40.7271 13.2654C39.9606 14.463 39.1941 15.9002 38.4276 17.577H40.9427ZM43.314 10.6784V7.66029H0.700927V10.6784H43.314Z' fill='%23140803'/%3E%3C/svg%3E");
}

.review-slider .swiper-button-prev:is(:hover, :focus-visible, :active) {
    transform: translatex(-4px);
}

.review-slider .swiper-button-next:is(:hover, :focus-visible, :active) {
    transform: translatex(4px);
}

.review-slider .swiper-navigation-elements {
    max-width: 100%;
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    margin-top: 1rem;
}

.swiper-button-next, .swiper-button-prev {
    position: initial;
}

@media (min-width: 992px) {
    .review-slider-wrapper {
        position: relative;
        left: 0;
        width: 50vw;
        max-width: 100vw;
    }

    .review-slider .swiper-slide {
        max-width: 480px;
    }

    .swiper-navigation-elements {
        max-width: none;
        width: auto;
    }

    .review-slider-wrapper .swiper-navigation-elements {
        width: 480px !important;
    }

}

/* TEAM OVERVIEW */
.team-wrapper .team-figure .team-image {
    background-color: color-mix(in srgb, var(--hrbl-green) 50%, transparent);
    border-radius: 8px;
}

.team-wrapper .team-figure .team-name {
    font-weight: 500;
    color: var(--hrbl-gray);
}

/* OFFERTE/CONTACT FORM */
.form-control {
    border: none;
    border-radius: 8px;
    padding: .75rem;
}

.form-label {
    font-size: 1rem;
    margin-bottom: 0;

}

.form-label.required::after {
    content: ' *';
    position: absolute;
    color: var(--hrbl-gray); /* rode kleur voor de asterisk */
}

.form-check-input:checked {
    background-color: var(--hrbl-light-green);
    border: 2px solid var(--hrbl-white);
    background-image: none;
}

.file-upload-text {
    color: white;
    font-size: 16px;
    font-weight: 500;
}

.file-upload-label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
}

.file-upload-input {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.form-control.file {
    display: none;
}

/* POLICY */
.policy-wrapper .last-changed {
    font-size: 1rem;
}

.policy-wrapper .policy {
    margin-bottom: 2.5rem;
}

.policy-wrapper .policy:last-of-type {
    margin-bottom: 0;
}

.policy-wrapper .policy h2 {
    font-size: 2rem;
}


/* FOOTER */
footer {
    position: relative;
}

footer .container {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.footer-logo img {
    transition: all 0.3s ease-in-out;
}

.footer-logo img:is(:hover, :focus-visible, :active) {
    transform: scale(1.075);
}


.footer-menu .footer-link {
    font-size: 1rem;
    color: var(--hrbl-gray);
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.footer-menu .footer-link:is(:hover, :focus-visible, :active) {
    color: var(--hrbl-green);
    text-decoration: none;
}

.footer-copy {
    color: color-mix(in srgb, var(--hrbl-gray) 40%, transparent);
    font-size: 1rem;
    margin-bottom: 0;
    /* margin-right: 1rem; */
}


/* reCAPTCHA badge */
div:has(.grecaptcha-badge) {
    display: none !important;
}