:root {
    /* Colors */
    --primary-color: #bababa;
    --dark-color: #fefefe;
    --bg-color: #fefefe;

    --white: #ffffff;
    --black: #000000;

    --filter-white: brightness(0) saturate(100%) invert(100%) sepia(6%) saturate(0%) hue-rotate(70deg) brightness(108%) contrast(108%);

    /* Icons */
    --font-awesome: "Font Awesome 6 Free";
    --icon-envelope: '\f0e0';
    --icon-phone: '\f095';
    --icon-play: '\f144';
    --icon-check: '\f00c';
    --icon-check-filled: '\f058';
    --icon-briefcase: '\f0b1';

    --container-width: 1320px;
}

body {font-family: 'Geneva', sans-serif; font-size: 1.125rem; line-height: 1.2; font-weight: 500; color: var(--white) !important; background-color: var(--primary-color); }
h1, h2, h3, h4 {font-family: 'Dexens', serif; font-weight: normal; color: var(--white); margin-bottom: 24px;}

h1 {font-size: 4.375rem;}
h2 {font-size: 1.5rem;}
h3 {font-size: 1.125rem; margin-bottom: 12px;}
h4 {}

p a,
ul li a {color: var(--primary-color); text-decoration: underline;}

p a:hover,
ul li a:hover {color: var(--primary -color); text-decoration: none;}

.btn { position: relative; font-family: 'Dexens', serif; font-size: 0.875rem !important; font-weight: 400 !important; padding: 12px 32px; border: 2px solid var(--white) !important; border-radius: 12px;}

.btn.btn-primary {background-color: transparent; color: var(--white); border-width: 1px !important; transition: all 0.5s;}
.btn.btn-primary::before { content: ''; position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border: 1px solid var(--white); border-radius: 10px; pointer-events: none;}
.btn.btn-primary:hover {background-color: var(--white); color: var(--primary-color) !important;}

.btn.btn-secondary {background-color: var(--primary-color); color: var(--white); transition: all 0.5s;}
.btn.btn-secondary:hover {background-color: transparent; color: var(--primary-color); border-color: var(--primary-color) !important;}

.btn[type="submit"]:hover {background-color: var(--white) !important; color: var(--primary-color) !important; border-color: var(--white) !important;}

p:has(.btn + .btn) {display: flex; flex-wrap: wrap; gap: 24px;}

figure {margin: 0;}

.content ul {}
.content ul li {list-style: none; position: relative; padding-bottom: 12px;}
.content ul li::before {content: var(--icon-check-filled); font-family: var(--font-awesome); font-weight: 700; color: var(--primary-color); position: absolute; right: calc(100% + 12px);}

.text-small {max-width: 750px; margin: 0 auto;}

/* Navigatie */
.navbar {font-family: 'Dexens', serif !important;}
.navbar .navbar-brand {max-width: 350px;}
.navbar .navbar-brand img {object-fit: cover; filter: var(--filter-white);}
.navbar .navbar-collapse {}
.navbar .navbar-collapse .navbar-nav { align-items: center; gap: 0 30px;}
.navbar .navbar-collapse .navbar-nav .nav-item { position: relative; height: fit-content;}
.navbar .navbar-collapse .navbar-nav .nav-item .nav-link { font-size: 1.125rem; font-weight: 400; color: var(--white); padding: 0; }

.navbar .navbar-collapse .navbar-nav .nav-item:nth-last-child(1) {background-color: var(--primary-color); padding: 12px 32px; border-radius: 12px; border: 2px solid var(--white); transition: all 0.5s;}
.navbar .navbar-collapse .navbar-nav .nav-item:nth-last-child(1) .nav-link {font-size: 0.875rem; transition: all 0.5s;}

/* Hover */
.navbar .navbar-collapse .navbar-nav .nav-item::after {content: ''; position: absolute; width: 0; height: 3px; background-color: var(--white); transition: all 0.5s;}
.navbar .navbar-collapse .navbar-nav .nav-item:hover::after {width: 100%;}

.navbar .navbar-collapse .navbar-nav .nav-item:nth-last-child(1)::after {display: none;}
.navbar .navbar-collapse .navbar-nav .nav-item:nth-last-child(1):hover {background-color: var(--dark-color); border-color: var(--primary-color) !important;}
.navbar .navbar-collapse .navbar-nav .nav-item:nth-last-child(1):hover .nav-link { color: var(--primary-color); }

.navbar .navbar-toggler { border: none !important; outline: none !important; background: transparent; position: relative; right: 15px; width: 30px; height: 20px; z-index: 1000; box-shadow: none !important;}
.navbar .navbar-toggler-icon { position: absolute; height: 2px; width: 100%; background-color: var(--white); background-image: none; top: 50%; left: 0; transform: translateY(-50%); transition: all 0.3s ease;}
.navbar .navbar-toggler-icon::before,
.navbar .navbar-toggler-icon::after { content: ''; position: absolute; height: 2px; width: 100%; background-color: var(--white); transition: all 0.3s ease;}
.navbar .navbar-toggler-icon::before { top: -8px; }
.navbar .navbar-toggler-icon::after { bottom: -8px;}

.navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { background-color: transparent;}
.navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before { top: 0; transform: rotate(45deg);}
.navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after { bottom: 0; transform: rotate(-45deg);}

body:has(.navbar-toggler[aria-expanded="true"]) {overflow: hidden;}
.navbar:has(.navbar-toggler[aria-expanded="true"]) .navbar-brand {z-index: 1001;}

/* Banner */
.banner { position: relative; overflow: hidden; margin: 0 -12px;}
.banner .image {position: relative; max-height: calc(100vh - 130px);}
.banner .image::before {content: ''; position: absolute; inset: 0; width: 100%; height: 100%; min-height: 500px; background-color: var(--black); opacity: 0.8;}
.banner .image img {width: 100%; object-fit: cover;}
.banner .content {position: absolute; width: 100%; height: 100%; inset: 0; display: flex; align-items: center;}
.banner .content h1 {}

.banner.main {}
.banner.main .image {}
.banner.main .image img {}
.banner.main .content {}
.banner.main .content h1 {}
.banner.main .content .text {}
.banner.main .content .text p { margin-bottom: 24px; max-width: 780px;}
.banner.main .content .text .btn {}

/* Standaart layout */
main {}
main section {padding: 50px 0;}

/* Footer */
footer {}
footer .footer {padding: 30px 0 50px 0;}
footer .footer .footer-logo {}
footer .footer .footer-logo a {}
footer .footer .footer-logo a figure {}
footer .footer .footer-logo a figure img {filter: var(--filter-white); object-fit: cover;}
footer .footer .footer-menu {}
footer .footer .footer-menu .navbar-nav {height: 110px; display: flex; flex-wrap: wrap; }
footer .footer .footer-menu .navbar-nav .nav-item {width: 50%; max-width: 210px;}
footer .footer .footer-menu .navbar-nav .nav-item .nav-link { padding: 6px 0; transition: all 0.5s;}
/* footer .footer .footer-menu .navbar-nav .nav-item .nav-link:hover {color: var(--primary-color);} */
footer .footer .footer-contact {margin: 0 -12px;}
footer .footer .footer-contact p {}
footer .footer .footer-contact p a {color: var(--white) !important;}
footer .footer .footer-contact > a[href*='mailto:'] { display: flex; align-items: center; width: fit-content; color: var(--white); text-decoration: none; display: flex; gap: 12px; transition: all 0.5s; }
footer .footer .footer-contact > a[href*='mailto:']::before {content: var(--icon-envelope); font-family: var(--font-awesome); font-size: 1.5rem; line-height: 1; font-weight: 700; display: inline-block; transition: transform 0.5s;}
footer .footer .footer-contact .socials {display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px;}
footer .footer .footer-contact .socials .item {}
footer .footer .footer-contact .socials .item a {}
footer .footer .footer-contact .socials .item a i {font-size: 1.5rem; color: var(--white); transition: color 0.5s;}

footer .endpage { position: relative; background: var(--bg-color); display: flex; align-items: center; height: 50px;}
footer .endpage .container { position: relative; z-index: 1;}
footer .endpage p { color: var(--primary-color); margin: 0;}
footer .endpage ul { display: flex; justify-content: end; gap: 12px; padding: 0; margin: 0;}
footer .endpage ul li {list-style: '';}
footer .endpage ul li::after {content: '/'; display: inline; padding-left: 12px;}
footer .endpage ul li:nth-last-child(1)::after {display: none;}
footer .endpage ul li a {color: var(--primary-color); text-decoration: none; }

/* Footer hovers */
footer .footer-contact > a[href*='mailto:']:hover::before {transform: translateY(-3px);}

/* Afbeeldingen effect */
.row > [class*="col"] > figure.image {position: relative; overflow: hidden;}
.row > [class*="col"] > figure.image::before {content: ''; position: absolute; inset: 0; width: 100%; height: 100%; background-color: var(--black); opacity: 0.5; z-index: 1;}
.row > [class*="col"] > figure.image::after {content: ''; position: absolute; inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); border: 4px solid var(--primary-color); border-bottom: unset; z-index: 2;}
.row > [class*="col"] > figure.image img { width: 100%; object-fit: cover;}

.row > [class*="col"]:nth-child(even) figure.image::after {border-left: unset;}
.row > [class*="col"]:nth-child(odd) figure.image::after {border-right: unset;}

.content.small-center {max-width: 60%; margin: 0 auto;}

/* Swiper */
.swiper {}
.swiper .swiper-wrapper {}
.swiper .swiper-wrapper .swiper-slide {}

.swiper-arrow {width: fit-content;}
.swiper-arrow i {color: var(--white); font-size: 2rem;}
.swiper-arrow::after {display: none;}
.swiper-arrow.swiper-button-prev { left: unset; right: calc(100% + 24px);}
.swiper-arrow.swiper-button-prev i {}
.swiper-arrow.swiper-button-next { right: unset; left: calc(100% + 24px);}
.swiper-arrow.swiper-button-next i {}

/* Standaart styling opties */
.bg-color {background-color: var(--bg-color);}
.bg-color * {color: var(--primary-color) !important;}

.bg-dark {background-color: var(--dark-color) !important;}

.text-vertical-center {height: 100%; display: flex; align-items: center;}

/* Formulieren */
.form {}
.form form {}
.form form .row {gap: 12px 0;}
.form form .row > div {}
.form form .row > div .form-group {}
.form form .row > div .form-group input { color: var(--primary-color) !important; font-family: 'Geneva', sans-serif; font-size: 0.875rem; width: 100%; padding: 6px 24px; border-radius: 5px; border: 3px solid transparent; outline: none; transition: all 0.5s;}
.form form .row > div .form-group input:focus {border-color: var(--primary-color);}
.form form .row > div .form-group input::placeholder {font-family: 'Geneva', sans-serif; font-size: 0.875rem; font-style: normal; font-weight: 400; color: var(--black);}
.form form .row > div .form-group input:disabled {opacity: 0.5;}
.form form .row > div .form-group:has(.btn) {text-align: end;}

.form form .row > div .form-group input.btn { font-family: 'Dexens', serif; width: fit-content; color: var(--white) !important; }
.form form .row > div .form-group input.btn:hover { color: var(--primary-color) !important; }

.form form .row > div .form-group textarea {color: var(--primary-color) !important; font-family: 'Geneva', sans-serif; font-size: 0.875rem; width: 100%; height: 60px; padding: 6px 24px; border-radius: 5px; border: 3px solid transparent; outline: none; transition: border 0.5s;}
.form form .row > div .form-group textarea:focus {border-color: var(--primary-color);}
.form form .row > div .form-group textarea::placeholder {font-family: 'Geneva', sans-serif; font-size: 0.875rem; font-style: normal; font-weight: 400; color: var(--black);}

.form form .row > div .form-group:has(input[type="checkbox"]) label {display: flex; gap: 10px;}
.form form .row > div .form-group:has(input[type="checkbox"]) label::before {content: var(--icon-check); font-family: var(--font-awesome); font-size: 1rem; font-weight: 900; color: transparent; display: inline-flex; justify-content: center; align-items: center; width: 20px; height: 20px; border: 1px solid var(--white); transition: all 0.5s;}
.form form .row > div .form-group:has(input[type="checkbox"]:checked) label::before {background-color: var(--white); color: var(--primary-color); }
.form form .row > div .form-group:has(input[type="checkbox"]) input {display: none;}

@media only screen and (max-width: 1399px) {

    :root  {
        --container-width: 1140px;
    }

    h1 {font-size: 3.375rem;}
    h2 {}

    /* Navigatie */
    .navbar .navbar-collapse .navbar-nav .nav-item .nav-link {font-size: 1rem;}  

}

@media only screen and (max-width: 1199px) {

    :root  {
        --container-width: 960px;
    }

    /* Swiper */
    .swiper-arrow.swiper-button-prev { right: calc(100% + 12px);}
    .swiper-arrow.swiper-button-next { left: calc(100% + 12px);}

}

@media only screen and (max-width: 991px) {

    :root  {
        --container-width: 720px;
    }

    .row > [class*="col"]:has(figure.image) {order: 2; margin-top: 12px;}

    .content.small-center {max-width: unset; text-align: start;}

    /* Navigatie */
    .navbar .navbar-brand img {max-height: 65px;}
    
    .navbar .navbar-collapse { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: var(--primary-color); transform: translateX(100%); transition: transform 0.3s ease-in-out; z-index: 999; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px;}
    .navbar .navbar-collapse.show {transform: translateX(0);}
    .navbar .navbar-collapse .navbar-nav { text-align: start; align-items: flex-start; flex-direction: column; gap: 12px; width: var(--container-width); height: 100%; padding-top: 120px;}
    .navbar .navbar-collapse .navbar-nav .nav-item { width: 100%; position: relative; opacity: 0; transform: translateY(20px); transition: all 0.3s ease;}
    .navbar .navbar-collapse .navbar-nav .nav-item .nav-link { font-size: 1.25rem; color: var(--white); display: block; padding: 0px; transition: color 0.3s ease;}
    .navbar .navbar-collapse.show .nav-item { opacity: 1; transform: translateY(0); text-align: start; width: fit-content;} 
    
    .navbar .navbar-nav .nav-item:nth-last-child(1) { background-color: var(--primary-color); border-radius: 12px; transition: all 0.3s ease;}
    .navbar .navbar-nav .nav-item:nth-last-child(1) .nav-link { font-size: 1rem; color: var(--white); font-weight: bold;}
    .navbar .navbar-nav .nav-item:nth-last-child(1):hover { background-color: var(--white);}
    
    /* Banner */
    .banner.main .image {max-height: calc(60vh - 130px);}
    .banner.main .image img {height: 100%; min-height: 500px;}

    /* Footer / endpage */
    footer .endpage {height: fit-content; padding: 12px 0;}
    footer .endpage p {text-align: center; margin-bottom: 12px;}
    footer .endpage ul {justify-content: center;}

}

@media only screen and (max-width: 767px) {

    :root  {
        --container-width: 540px;
    }

    /* Swiper */
    .swiper-arrow.swiper-button-prev { right:unset; left: -12px;}
    .swiper-arrow.swiper-button-next {left: unset; right: -12px;}

    /* Footer / endpage */
    footer .footer {padding: 30px 0 40px 0;}
    footer .footer .footer-contact {margin: 0;}
    footer .footer .footer-menu {margin: 24px 0;}

}

@media only screen and (max-width: 575px) {

    :root  {
        --container-width: 100%;
    }

    h1 {font-size: 1.75rem;}
    h2 {font-size: 1.25rem;}

    .container {max-width: var(--container-width) !important;}

    /* Navigatie */
    .navbar .navbar-toggler {margin-right: 12px;}

    .navbar .navbar-brand img {max-height: 50px; width: 250px;}

    /* Banner / Slider */
    .banner.main {min-height: 250px}

    /* SAwiper */
    .swiper {width: calc(var(--container-width) - 48px);}


}

@media only screen and (max-width: 479px) {
    
}