/* Algemene opmaak */
body {
    overflow-x: hidden;
    margin: 0;
    font-family: 'Nexa';
    padding-top: 50px;
}

p {
    font-family: 'NexaLight';
}

li {
    font-family: 'NexaLight';
}

ul {
    font-family: 'NexaLight';
}

.accordion-body {
    font-family: 'NexaLight';
}

.accordion-title {
    font-family: 'NexaLight';
    font-weight: bold;
}

/* Luxe container en kaartstijl */
.card {
    border-radius: 30px;
}

.card-img-top {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.custom-card-header {
    border-bottom: 2px solid #4db5bb; /* rand */
}

.card-body {
    font-size: 1.6rem;
}

/* accenten voor de tekst */
.custom-color-text {
    color: #4db5bb; /* kleur */
}

.card-header h2 {
    font-size: 2rem;
    font-weight: bold;
}

a.custom-color-text {
    color: #4db5bb;
    text-decoration: none;
    font-weight: bold;
}

    a.custom-color-text:hover {
        text-decoration: underline;
    }

/* Verbeterde footer en links */
.card-footer {
    background-color: #1c1c1c;
    color: #fff;
    border-top: 3px solid #4db5bb;
}

/* Navbar stijlen */
.navbar {
    background-color: #fff;
    z-index: 1050;
    width: 100%;
    padding: 10px;
    border-bottom: 3px solid #4db5bb; /* rand */
}

.navbar-toggler {
    border: none;
    background: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.navbar-color-icon {
    color: #4db5bb;
    font-size: 3rem;
}

.z-index {
    z-index: 1000;
}


.nav-link.active {
    font-weight: bold;
    color: #4db5bb !important; /* donkere kleur voor actieve link */
}

.blink {
    animation: blinkColor 2s infinite alternate;

}

/* Animatie definities */
@keyframes blinkColor {
    from {
        background-color: transparent; /* originele achtergrond */
        color: #4db5bb; /* originele tekstkleur */
    }
    to {
        background-color: #4db5bb44; /* blinkkleur */
        color: #fff; /* tekstkleur tijdens blink */
    }
}

.pill-button:hover {
    background-color: #4db5bb1f;
}

.nav-link:hover {
    font-weight: bold;
    color: #4db5bb !important; /* donkere kleur voor actieve link */
}

/* Overlay om de rest te laten vervagen */
#custom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    z-index: 1000;
    display: none;
}

.custom-overlay-active {
    display: block;
}

/* accenten */
.custom-color-text {
    color: #4db5bb; /* Donkerder */
}

.custom-color-icon {
    color: #4db5bb;
    font-size: 1.5rem;
}

.custom-color-badge {
    background-color: #4db5bb;
    opacity: 0.8;
    font-size: 0.9rem;
}


.custom-color-icon-bigger {
    color: #4db5bb;
    font-size: 2rem;
}

.custom-color-border {
    border-color: #4db5bb !important;
}

.custom-color-bg:hover {
    transform: scale(1.01); /* Beetje vergroten */
    box-shadow: 0 5px 10px rgba(104, 104, 104, 0.3); /* Extra schaduw voor een 3D-effect */
}

/* Footer links */
.custom-footer-link {
    color: #4db5bb;
    text-decoration: none;
    transition: color 0.3s;
}

.custom-footer-link:hover {
    font-weight: bold;
    color: #4db5bb !important; /* donkere kleur voor actieve link */
}

/* Footer links */
.custom-color-link {
    color: #4db5bb;
    text-decoration: none;
    transition: color 0.3s;
}

.custom-color-link:hover {
    color: #2693a1; /* donkere kleur voor actieve link */
    text-decoration: none;
}

    /* Footer links */
.custom-color-link2 {
    color: #ebebeb;
    text-decoration: none;
    transition: color 0.3s;
}

    .custom-color-link2:hover {
        color: #2693a1; /* donkere kleur voor actieve link */
        text-decoration: none;
    }

/* Social media icons */
.custom-social-link {
    color: #4db5bb;
    font-size: 1.8rem;
    margin: 0 10px;
    transition: transform 0.3s, color 0.3s;
}

    /* Hover effect: lichte gloed, goed zichtbaar op wit en zwart */
    .custom-social-link:hover {
        color: #4db5bb; /* Lichtere kleur voor zichtbaarheid */
        text-shadow: 0 0 8px rgba(33, 166, 255, 0.24); /* Gloed-effect */
    }

/* Footer */
.custom-footer {
    border-top: 3px solid #4db5bb; /* rand */
}

.footerandheader-background-color {
    background-color: #f9ffff;
}
/* Fonts */

/* font */
@font-face {
    font-family: 'Nexa';
    src: url('fonts/Nexa-Heavy.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NexaLight';
    src: url('fonts/Nexa-ExtraLight.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ChaletNewYorkNineteenSeventy';
    src: url('fonts/Chalet NewYorkNineteenSeventy.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.mono {
    font-family: 'ChaletNewYorkNineteenSeventy', Arial, sans-serif;
}


main {
    font-family: 'Nexa', Arial, sans-serif;
}

.custom-font {
    font-family: 'Nexa', Arial, sans-serif;
}

/* Nieuwe stijlen voor de contactkaart en foto's */
.contact-container {
    display: flex;
    flex-wrap: wrap;
}

.product-img {
    width: 100%; /* Zorgt ervoor dat de afbeelding zich aanpast aan de kolombreedte */
    height: 250px; /* Zorgt ervoor dat alle afbeeldingen even hoog zijn */
    object-fit: cover; /* Zorgt ervoor dat de afbeelding netjes wordt uitgesneden om de container te vullen */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Soepele animatie */
}
.category-img {
    vertical-align: middle;
    width: 100%; /* Zorgt ervoor dat de afbeelding zich aanpast aan de kolombreedte */
    height: 150px; /* Zorgt ervoor dat alle afbeeldingen even hoog zijn */
    object-fit: cover; /* Zorgt ervoor dat de afbeelding netjes wordt uitgesneden om de container te vullen */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Soepele animatie */
    margin-bottom: 5px;
}
.category-img2 {
    width: 100%; /* Zorgt ervoor dat de afbeelding zich aanpast aan de kolombreedte */
    height: 170px; /* Zorgt ervoor dat alle afbeeldingen even hoog zijn */
    object-fit: cover; /* Zorgt ervoor dat de afbeelding netjes wordt uitgesneden om de container te vullen */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Soepele animatie */
}
.color-img {
    vertical-align: middle;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Soepele animatie */
}
.colorresult-img {
    width: 100px; /* Zorgt ervoor dat de afbeelding zich aanpast aan de kolombreedte */
    height: 70px; /* Zorgt ervoor dat alle afbeeldingen even hoog zijn */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Soepele animatie */
    margin-bottom: 5px;
}
.info-img {
    width: 100%; /* Zorgt ervoor dat de afbeelding zich aanpast aan de kolombreedte */
    height: auto; /* Zorgt ervoor dat alle afbeeldingen even hoog zijn */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Soepele animatie */
}
/* Hover-effect: Vergroting en extra schaduw */
.product-img:hover {
    transform: scale(1.05); /* Beetje vergroten */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Extra schaduw voor een 3D-effect */
}

.category-img:hover {
    transform: scale(1.05); /* Beetje vergroten */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Extra schaduw voor een 3D-effect */
}

.category-img2:hover {
    transform: scale(1.05); /* Beetje vergroten */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Extra schaduw voor een 3D-effect */
}

.color-img:hover {
    transform: scale(1.08); /* Beetje vergroten */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Extra schaduw voor een 3D-effect */
}
.colorresult-img:hover {
    transform: scale(1.05); /* Beetje vergroten */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Extra schaduw voor een 3D-effect */
}

/* Zorgt ervoor dat de video responsief is */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    margin-bottom: 100px;
}

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

/* Contactpagina - Algemene opmaak */
.contact-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
    gap: 40px;
    padding: 40px 20px;
    text-align: left;
}

/* Contactgegevens opmaak */
.contact-info {
    flex: 1;
    max-width: 500px;
}

    .contact-info p {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

/* Contactformulier opmaak */
.contact-form {
    flex: 1;
    max-width: 500px;
}

.contact-form .form-control {
    border-radius: 10px;
    border: 1px solid #4db5bb;
    background: rgba(255, 215, 0, 0.1);
    padding: 12px;
}

.contact-form textarea {
    resize: none;
}

.contact-form .btn-custom-color {
    width: 100%;
}

/* Zorg ervoor dat de iframe goed wordt gecentreerd */
.map-container iframe {
    width: 100%; /* Zorg ervoor dat de iframe de volledige breedte van de container gebruikt */
    max-width: 600px; /* Zet een maximale breedte zodat het niet te groot wordt */
    height: 300px; /* Stel een vaste hoogte in voor de iframe */
    border: none;
    margin: 0 auto; /* Zorg ervoor dat de iframe wordt gecentreerd */

}

/* Spatie tussen de boxen (contactgegevens en formulier) */
.row.g-4 {
    gap: 20px; /* Verhoog de ruimte tussen de kolommen */
}

/* Zorg ervoor dat de contact en formulier boxes goed op responsieve schermen werken */
@media (min-width: 768px) {
    .contactcard {
        flex: 0 0 48%; /* Zorg ervoor dat de kolommen naast elkaar staan */
        max-width: 48%; /* Zorg ervoor dat ze niet te breed worden */
    }
}

.form-group {
    text-align: left;
}
    /* Vergroot de tekst in het formulier */
    .form-group label {
        font-size: 1.1rem; /* Vergroot de tekst van de labels */
    }

    .form-group .form-control {
        font-size: 1rem; /* Vergroot de tekst in de formuliervelden */
    }

.faq-container {
    width: 100%;
    padding: 20px;
}

.faq-item {
    background-color: #ffffff;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

    .faq-item h2 {
        font-size: 1.5rem;
        color: #333;
        margin-bottom: 10px;
    }

    .faq-item p {
        font-size: 1rem;
        color: #555;
        line-height: 1.6;
    }
/* Verwijder de blauwe achtergrond van de geopende knop */
.accordion-button:not(.collapsed) {
    background-color: transparent;
    color: #4db5bb;
}

/* Verwijder de blauwe focus als je op de knop klikt */
.accordion-button:focus {
    outline: none;
    box-shadow: none;

}
.accordion-title {
    font-size: 1.5rem;
}
.accordion-body {
    font-size: 1.3rem;
}


.activecat {
    color: #4db5bb;
}

/* The actual timeline (the vertical ruler) */
.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

    /* The actual timeline (the vertical ruler) */
    .timeline::after {
        content: '';
        position: absolute;
        width: 10px;
        background-color: #4db5bb;
        top: 0;
        bottom: 0;
        left: 50%;
        margin-left: -3px;
    }

/* Container around content */
.box {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}

    /* The circles on the timeline */
    .box::after {
        content: '';
        position: absolute;
        width: 25px;
        height: 25px;
        right: -15px;
        background-color: #4db5bb;
        top: 15px;
        border-radius: 50%;
        z-index: 1;
    }

/* Place the container to the left */
.left {
    left: 0;
}

/* Place the container to the right */
.right {
    left: 50%;
}



    /* Fix the circle for containers on the right side */
    .right::after {
        left: -10.5px;
    }

/* The actual content */
.content {
    padding: 20px 30px;
    position: relative;
    border-radius: 6px;
    border: solid 2px #4db5bb;
    font-size: 1.4rem;
}

.carousel-thumbnails img {
    width: 80px; 
    height: 50px; 
    cursor: pointer;
    opacity: 0.6;
}
.carousel-thumbnails img.active {
    opacity: 1;
    border: 2px solid #4db5bb;
}

.selected-color {
    border: 3px solid #4db5bb;
}

.icon-marquee {
    width: 100%;
    overflow: hidden;
    padding: 1rem 0;
}

.swiper-slide {
    padding: 0;
    box-sizing: border-box;
}

.swiper-slide i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.swiper-slide div {
    font-weight: 600;
    font-size: 1rem;
}

@media (min-width: 768px) {
    .swiper-slide i { font-size: 2.5rem; }
    .swiper-slide div { font-size: 1.2rem; }
}

.widget-wrapper {
  max-width: 100%;
  overflow-x: hidden; /* voorkomt horizontaal scrollen */
}

.elfsight-app-c2780a1e-b22e-4cf6-aa2e-3cd879e6f121 {
  width: 100% !important; /* laat widget altijd de volle breedte gebruiken */
  box-sizing: border-box;
}

.widget-wrapper iframe {
  max-width: 100%;
  display: block;
}

.team-card {
    transition: transform 0.7s ease;
}


.team-card:hover {
    transform: translateY(-10px);
}

.werking-card {
    transition: transform 0.7s ease;
}


.werking-card:hover {
    transform: translateY(-10px);
}

.important-bar {
    background-color: #4db5bb; /* blauw */
    font-size: 1rem;
    font-weight: 500;
    color: white;
    position: fixed;
    top: 100px; /* hoogte van de navbar */;
    left: 0;
    width: 100%;
    z-index: 1040; /* net onder navbar (1050) */
}

.modalacceptbtn {
    background-color: #4db5bb;
    color: white;
}

.modalacceptbtn:hover {
    background-color: white; /* donkere kleur voor hover */
    color: #4db5bb;
}