::-webkit-scrollbar {
    width: 20px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #d6dee1;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #a8bbbf;
}

body {
    background-color: #f6f6f1;
    font-family: "Manrope", sans-serif;
}

a {
    color:#2f85ae;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.bg-tersier {
    background-color: #f0f0e4;
}

.bg-forth {
    background-color: #e8e8d8;
}

.tc-blue {
    color: #455673;
}

.bg-brown {
    background-color: #f5d001;
}

.color-red {
    color:red;
}

.btn:hover {
    background-color: #455673;
}

main.flex-shrink-0 > .container {
    padding: 60px 15px 0;
}

.footer .fa, .modal .fa {
    width: 30px;
}

.footer {
    background-image: url(/img/bg_footer.jpg);
}

.footer .container-fluid {
    background: rgba(0, 0, 0, .8);
}

.text-deconinck {
    color: #f5d001;
}

.border-color-deconinck {
    border-color: #f5d001 !important;
}

.navbar {
    background:#ffffffff;
}

.navbar li a:hover, .navbar li.active a {
    background-color: #f5d001;
    color:#ffffff;
}

.img-container {
    cursor: move;
}

.parallax-bg {
    background-image: url('/img/hero_full.jpg'); /* Set the background image */
    background-attachment: fixed; /* Creates the parallax effect */
    background-size: cover; /* Ensures the image covers the entire area */
    background-position: center; /* Centers the image */
}

.scroll-indicator {
    position: absolute;
    bottom: 20px; /* Plaats de muis 20px van de onderkant */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.mouse {
    width: 30px;
    height: 50px;
    margin: 0 auto;
    animation: bounce 1s infinite;
}

.scroll-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid white; /* Kleur van de pijl */
    margin: 5px auto; /* Ruimte tussen muis en pijl */
    animation: bounce 1s infinite; /* Voer de bounce animatie uit */
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.25); /* Black overlay with 50% opacity */
    z-index: 1; /* Ensure overlay is above the background */
}

.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Subtle shadow for better visibility */
    color: white; /* Ensure text color is white for contrast */
    position: relative; /* Ensure text is above the overlay */
    z-index: 2; /* Ensure text is above the overlay */
}

.hero-container {
    color: white; /* Ensure text color is white for contrast */
    z-index: 2; /* Ensure text is above the overlay */
    background-color: rgba(255, 255, 255, 0.5); /* Black overlay with 50% opacity */
}

.hero-bottom {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
}

.promo {
    z-index: 2;
}

.promo img {
    max-width: 20%;
    display:block;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px); /* Hoe hoog de muis omhoog gaat */
    }
    60% {
        transform: translateY(-5px); /* Hoe hoog de pijl omhoog gaat */
    }
}

.mt-110px {
    margin-top:110px;
}