/* DEMO */

* {transition: linear; transition-duration: 0.5s;  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;}
body {background-color: #F4F4F4; overflow-x: hidden;}

.py-10 {padding: 5rem 0rem;}
.btn {font-family: "Dosis", sans-serif; font-weight: 600;}
a {text-decoration: none;}

.bg-white {background-color: #fff;}
.bg-dark {color: #fff; }
.bg-dark p {color: #fff;}

.logo {font-size: 2.5rem; font-weight: bold;}
.logo i {font-size: 3rem; }
.logo span {position: relative; top: -2px;}

.topbar {background-color: #005e6d; color: #fff; font-size: 0.75rem;}
.topbar a {color: inherit;}

h1, .display-1 {
    font-size: 3rem; /* Largest */
    font-family: "Dosis", sans-serif;
}

h2, .display-2 {
    font-size: 2.5rem; 
    font-family: "Dosis", sans-serif;
}

h3, .display-3 {
    font-size: 2rem;
    font-family: "Dosis", sans-serif;
}

h4, .display-4 {
    font-size: 1.5rem;
    font-family: "Dosis", sans-serif;
}

h5, .display-5 {
    font-size: 1.25rem;
    font-family: "Dosis", sans-serif;
}

h6, .display-6 {
    font-size: 1rem; /* Smallest */
    font-family: "Dosis", sans-serif;
}


.navbar-toggler {width: 100%; padding: 1rem 1.25rem; background-color: #f4f4f4; margin-top: 1rem; text-transform: uppercase;}

       .card-columns {
            column-count: 3;
            column-gap: 1rem;
        }
 .card {
            break-inside: avoid;
            page-break-inside: avoid;
            -webkit-column-break-inside: avoid;
            -moz-column-break-inside: avoid;
            margin-bottom: 1rem; /* Adjust the margin bottom as needed */
        }
/* HEADER */

header {
	background-color: #fff;
    position: relative;
    overflow: hidden; /* Ensure the moving gradient doesn't overflow */
}

header::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 200%; /* Make it twice as wide to allow for smooth animation */
    height: 14px;
    background: linear-gradient(to right, black 0%, white 50%, black 100%);
    animation: walkGradient 5s linear infinite; /* Adjust duration for speed */
}

@keyframes walkGradient {
    0% {
        left: 0;
    }
    100% {
        left: -100%;
    }
}
.btn-dark {
    position: relative;
    overflow: hidden;
    transition: color 0.5s ease, transform 0.5s ease;
    color: white;
    z-index: 2; /* Ensure text stays on top */
}

.btn-outline-dark {    transition: color 0.5s ease, transform 0.5s ease;
}


.btn-dark:hover::before,
.btn-outline-dark:hover::before {
    transform: scaleX(1);
}

.btn-dark:hover {
    color: #fff; /* Ensure the text color is readable */
    transform: scale(1.1); /* Enlarge the button */
    z-index: 3; /* Ensure button stays on top */
}

.btn-outline-dark:hover { transform: scale(1.1); /* Enlarge the button */}


footer {
	border-top: 1px solid #ccc;
    position: relative;
    overflow: hidden; /* Ensure the moving gradient doesn't overflow */
}

footer::after {
    content: '';
    position: fixed;
    top: -14px;
    left: 0;
    width: 200%; /* Make it twice as wide to allow for smooth animation */
    height: 14px;
    background: linear-gradient(to right, black 0%, white 50%, black 100%);
    animation: walkGradient 5s linear infinite; /* Adjust duration for speed */
}

@keyframes walkGradient {
    0% {
        left: 0;
    }
    100% {
        left: -100%;
    }
}


/* EO HEADER */


p a, li a {
    text-decoration: none;
    color: inherit;
    position: relative;
    padding-bottom: 5px;
    display: inline-block;
    font-weight: bold;
}

p a::after, li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    background: linear-gradient(to right, black, transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

p a:hover::after, li a:hover::after {
    transform: scaleX(1);
}

.navbar-nav {}
.navbar-nav li  {white-space: nowrap; font-size: 1.1rem;}
.navbar-nav li a {color: inherit;  font-family: "Dosis", sans-serif; }

.btn-success {border-color: #005e6d; background-color: #005e6d;}


p, .main li { margin: 1.5rem 0rem; color: #535353;  font-size: 18px; /* Adjust to 16px-18px based on preference */
    line-height: 1.6; /* This makes the line height 28.8px for 18px font size */}
.main ul {list-style-type: circle;}


.blokken-block-img {max-height: 100px;}

.prefooter {
 height: 0px;

}
.prefooter a {margin-bottom: -15px; z-index: 99; position: relative; margin-left: 1rem;}
.btn-xl {padding: 0.5rem 1.5rem; font-size: 2rem; border-radius: 0px; border: 2px solid #fff; margin-top: -35px;}

footer {padding-top: 4rem;}
footer .footend {font-size: 1rem;}
footer p {margin: 0.5rem 0rem; font-size: 1rem;}
footer .footnav {list-style-type: none; margin: 0px; padding: 0px; margin: 0.5rem 0rem;} 
footer .footnav li {font-size: 1rem;}
footer a {color: #fff;}
footer .btn i {margin-left: 0px; margin-right: 0.3rem;}

/* EO DEMO */


/* VIDEO */

.video-container {
    width: 80%;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* EO VIDEO */


.card {border:none;}
.card:hover {transform: scale(1.05);}



/* FORM */

label {font-size: 0.85rem; font-weight: bold; margin-bottom: 0.3rem;}

/* EO FORM */



.navbar {}
.navbar li {}
.navbar li.here a {font-weight: bold;}
.navbar li a {position: relative; margin-right: 1.5rem; padding: 0.5rem 1.5rem; text-transform: uppercase; font-size: 1.35rem;}
.navbar li.last a {margin-right: 0px;}
.navbar li a::after {position: absolute; width: 0px; display: block; content:''; height: 2px; background-color: #fff; transition: linear 0.45s;}
.navbar li:hover a::after {width: 100%;}


.block--contact {}
.block--contact iframe {max-width: 100%; height: 100%;}


.theme--lichtgrijs {background-color: #f4f4f4;}
.theme--donker {background-color: #767676; color: #fff;}