/* vars */
:root {
    --primary-color: #68a40b;
    --bg-color: #0e0004;
    --white: #fff;
    --filter-white: brightness(0) saturate(100%) invert(98%) sepia(34%) saturate(0%) hue-rotate(205deg) brightness(103%) contrast(101%);
}

a:hover {cursor: pointer;}

/* Recaptcha badge */
.grecaptcha-badge {display: none;}

/* standarts */
html { scroll-behavior: smooth; scroll-padding: 200px; }
img {object-fit: cover; height: auto;}

h1 { font-family: 'Montserrat', sans-serif; font-size: 3.5rem; font-weight: 800; color: var(--primary-color);}
h2 { font-family: 'Montserrat', sans-serif; font-size: 2.5rem; font-weight: 700; color: var(--white)}
h3 { font-family: 'Montserrat', sans-serif; font-size: 1.8rem; font-weight: 700; color: var(--white)}

body {font-family: "Montserrat", sans-serif; max-width: 100vw; overflow-x: hidden;}
body, p, ul, ul li {color: var(--white);}

.btn-grouping {display: flex; gap: 12px;}

.btn {font-size: 1rem; font-weight: 500; border: 2px solid transparent; border-radius: 20px; transition: all 0.5s;}

.btn.btn-primary {background-color: var(--primary-color);}
.btn.btn-primary:hover {background-color: transparent; border-color: var(--primary-color); color: var(--primary-color);}

.btn.btn-info { color: var(--bg-color); background-color: var(--white);}
.btn.btn-info:hover {background-color: transparent; border-color: var(--white); color: var(--white);}

/* btn fixes */

.btn:focus,
.btn:active {box-shadow: none !important;}

.btn-info:not(:disabled):not(.disabled).active, 
.btn-info:not(:disabled):not(.disabled):active, 
.show>.btn-info.dropdown-toggle {background-color: transparent; border-color: var(--white);}

ul {list-style: none;}

/* nav */
.navbar-dark { position: sticky; width: 100%; top: 0; font-size: 1.125rem; transition: all 0.5s; transition-delay: 0.5s; z-index: 999;}
.navbar-dark .navbar-brand { width: 200px; transition: all 0.5s;}
.navbar-dark .navbar-brand img {object-fit: contain; max-width: 200px; height: 100%; transition: all 0.5s;}
.navbar-dark .navbar-nav .nav-item {padding: 0 12px;}
.navbar-dark .navbar-nav .nav-item .nav-link { position: relative; width: fit-content; color: var(--white);  font-weight: 500; transition: all 0.5s;}
.navbar-dark .navbar-nav .nav-item .nav-link::before {content: ''; position: absolute; width: 0%; height: 2px; background-color: var(--primary-color); bottom: 0; left: 0; transition: width 0.5s;}
.navbar-dark .navbar-nav .nav-item .nav-link:hover {color: var(--primary-color);}
.navbar-dark .navbar-nav .nav-item .nav-link:hover::before {width: 100%;}
.navbar-dark .navbar-toggler-icon {filter: var(--filter-white);}

.shrink.navbar-dark {background: rgba(14, 0, 4, 0.85) !important;}
.shrink.navbar-dark .navbar-brand {width: 120px ; height: auto;}
.shrink.navbar-dark .navbar-brand img {width: 100%; height: 80px; }

/* content */
/* Banner styling */
.banner { position: relative; display: flex; align-items: center; overflow: hidden; }

.banner .banner-image {position: relative; width: 100vw; z-index: 0;}
.banner .banner-image::after {content: ''; position: absolute; width: 100%; height: 100%; inset: 0; background-color: var(--bg-color); opacity: 0.4;}
.banner .banner-image img {object-fit: cover; width: 100%; height: 400px;}
.banner .container { position: absolute; inset: 0; display: flex; align-items: center;}
.banner .container .banner-content h1 { color: #fff; font-size: 3.5rem; font-weight: 800; margin-bottom: 20px;}
.banner .container .banner-content p { color: #fff; font-size: 1.25rem; font-weight: 300; margin-bottom: 20px;}
.banner .container .banner-content hr { border-color: #fff; width: 100px; margin: 20px 0; }
.banner .container .banner-content .btn { font-size: 1rem; font-weight: 500; }
.banner .container .banner-content .btn.btn-primary {background-color: #68a40b;}
.banner .container .banner-content .btn.btn-primary:hover { background-color: transparent; border-color: #68a40b; color: #68a40b; }

.card {color: var(--white); padding: 1.25rem; position: relative; height: calc(100% + 24px); background-color: var(--bg-color); border-radius: 20px; transition: transform 0.5s;}
.card:hover {transform: translateY(-5px);}
.card .card-body {padding: 0;}
.card .card-body .card-title {color: var(--primary-color);}
.card .card-footer {padding: 0; display: flex; justify-content: space-between; align-items: flex-end;}

/* Plan modal */
.modal .modal-dialog {max-width: 1320px; }
.modal .modal-dialog .modal-content {border-radius: 20px;}
.modal .modal-dialog .modal-content .modal-header {border-bottom: none;}
.modal .modal-dialog .modal-content .modal-header .close {color: var(--white); outline: none; }
.modal .modal-dialog .modal-content .modal-body {border-bottom: none;}
.modal .modal-dialog .modal-content .modal-footer {border-top: none;}

.image {overflow: hidden; border-radius: 20px;}
.image img {transition: all 0.5s;}
.image:hover img {scale: 1.05;}

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

.close, .close:focus, .close:hover { background-color: transparent !important; }

/* Underbanner */
#underbanner .imgoverlay { width: 100vw; position: relative; min-height: 400px; display: flex; justify-content: center; align-items: center; background-image: url("../media/underbanner.webp"); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;}
#underbanner .imgoverlay::after {content: ''; position: absolute; width: 100%; height: 100%; inset: 0; background-color: var(--bg-color); opacity: 0.75;}
#underbanner .imgoverlay h2 {position: relative; font-size: 3rem; text-align: center; text-wrap: balance; padding: 0 5vw; z-index: 3;}

/* Contact */
#contact iframe {max-height: 300px;}

#contact ul { list-style-type: none; padding-left: 0; }
#contact ul li::before {content: '\2756'; display: inline-block; margin-right: 6px;}
#contact ul li { margin-bottom: 0px; }
#contact ul li a { color: var(--primary-color); text-decoration: none; position: relative;}
#contact ul li a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0%; height: 1px; background-color: var(--primary-color); transition: width 0.5s ease-in-out; }
#contact ul li a:hover::after { width: 100%; }

/* Footer styling */
.footer { padding: 40px 0; background-color: var(--bg-color);}
.footer .navbar-brand {text-decoration: none !important;}
.footer .navbar-brand::before {width: 0 !important;}
.footer h3 { color: var(--white); font-size: 1.8rem; font-weight: 700; }
.footer p { color: #ccc; /* Lichtgrijze tekstkleur voor normale tekst */}
.footer ul { list-style-type: none; padding-left: 0; }
.footer ul li { margin-bottom: 10px; }
.footer a {color: var(--primary-color); text-decoration: none !important; position: relative;}
.footer a::before {content: ''; position: absolute; bottom: 0; margin-bottom: -2px; width: 0%; height: 2px; background-color: var(--primary-color); bottom: 0; left: 0; transition: width 0.5s;}
.footer a:hover::before {width: 100%;}

.footer a:has(i) {font-size: 1.5rem; color: var(--white); transition: all 0.5s;}
.footer a:has(i)::before {display: none;}
.footer a:has(i):hover {color: var(--primary-color);}

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

    .modal .modal-dialog {max-width: 80vw;}

}

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

    html { scroll-behavior: smooth; scroll-padding: 120px; }

    .navbar-dark .navbar-brand img {max-width: 140px;}

    /* Menu */
    body:has(.navbar-dark .open) {overflow: hidden;}

    .navbar-dark { transition: height 5s ease-in-out; transition-delay: 0ms !important;}
    .navbar-dark .container {height: auto; transition: all 5s !important;}
    .navbar-dark .container .navbar-collapse {padding-top: 24px;}
    .navbar-dark .container .navbar-collapse .navbar-nav .nav-item {opacity: 0; transform: translateX(50px); transition: all 1s;}
    .navbar-dark .container .navbar-collapse .navbar-nav .nav-item:nth-child(1) {transition-delay: 0s;}
    .navbar-dark .container .navbar-collapse .navbar-nav .nav-item:nth-child(2) {transition-delay: 0.1s;}
    .navbar-dark .container .navbar-collapse .navbar-nav .nav-item:nth-child(3) {transition-delay: 0.2s;}
    .navbar-dark .container .navbar-collapse .navbar-nav .nav-item:nth-child(4) {transition-delay: 0.3s;}
    .navbar-dark .container .navbar-collapse .navbar-nav .nav-item:nth-child(5) {transition-delay: 0.4s;}

    .navbar-dark:has(.open) { height: fit-content; transition-delay: 0s; transition: all 5s;}
    .navbar-dark:has(.open) .container {height: fit-content; align-content: flex-start;}

    .navbar-dark:has(.show) .container .navbar-collapse .navbar-nav .nav-item {opacity: 1; transform: translateX(0px);}

    .shrink.navbar-dark:has(.open) {background: rgba(14, 0, 4, 0.95) !important;}

    /* Banner */
    .banner .banner-image img {min-height: 450px;}

    /* footer */
    .footer .navbar-brand {width: 100%; margin: 0; padding-bottom: 36px; display: flex; justify-content: center;}

}

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

    h2 {font-size: 2rem; line-height: 1.1;}
    h3 {font-size: 1.6rem;}

    .navbar-dark .navbar-brand img {max-width: 120px;}

    .row:has(.card) {gap: 50px 0;}
    #underbanner .imgoverlay h2 {font-size: 2.6rem;}

    .modal .modal-dialog {max-width: 100vw; margin: 12px;}

    .card {animation-delay: 0.5s !important;}

}

@media screen and (max-width: 575px) {
    
    :root {
        --nav-height: 105px;
    }

    h1 {font-size: 2.3rem;}
    h2 {font-size: 2rem;}
    h2 {font-size: 1.8rem;}


    .banner .container .banner-content h1 {font-size: 2.5rem;}
    .banner .banner-image img {height: 500px;}

    #underbanner .imgoverlay {background-attachment: scroll;}

}

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

    .card .card-footer .card-text.price { padding-left: 24p; text-align: end; text-wrap: balance;}

}