/* === Stijlen voor het hoofdmenu === */
.navbar-nav .nav-link {
    color: #ffffff;

    /* Witte tekstkleur */
    padding: 1rem 1rem;

    /* Padding aanpassen om de hoogte te vergroten */
}

.navbar-nav .nav-link:hover {
    color: #cccccc;

    /* Kleur bij hover */
}

/* === Stijlen voor het submenu === */
.navbar-nav .dropdown-menu {
    background-color: #007bff;

    /* Zelfde achtergrondkleur als het hoofdmenu */
    border: none;

    /* Geen rand */
    white-space: normal;

    /* Zorgen dat de tekst niet op één regel blijft */
    word-break: break-word;

    /* Woorden afbreken indien nodig */
}

.navbar-nav .dropdown-menu .dropdown-item {
    color: #ffffff;

    /* Witte tekstkleur voor submenu items */
    padding: 0.5rem 1rem;

    /* Padding aanpassen */
}

.navbar-nav .dropdown-menu .dropdown-item:hover {
    background-color: #0056b3;

    /* Donkerdere kleur bij hover */
    color: #ffffff;

    /* Tekstkleur bij hover */
}

/* Custom CSS for the sticky column */
.position-sticky {
    position: sticky;
    top: 20px;

    /* Beginpositie van de sticky kolom */
    overflow: visible;

    /* Zorg ervoor dat de inhoud zichtbaar blijft */
    margin-bottom: 100px;

    /* Voeg wat extra ruimte toe aan de onderkant van de kolom om vroegtijdig stoppen te voorkomen */
    z-index: 1000;

    /* Voeg een hoge z-index toe om ervoor te zorgen dat het boven andere elementen blijft */
}

/* Extra ruimte aan de onderkant van de container om sticky element te laten stoppen */
.container-sticky {
    padding-bottom: 150px;

    /* Voeg extra padding toe aan de onderkant van de container */
}

/* Zorg ervoor dat de contentblokken de volledige breedte gebruiken */
.content {
    width: 100%;

    /* Gebruik de volledige breedte van de container */
    max-width: 100%;

    /* Zorg ervoor dat de content niet beperkt wordt door een max-width */
    margin: 0 auto;

    /* Center de content als er een maximale breedte is */
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Maak afbeeldingen responsief en passend in hun container */
img {
    max-width: 100%;

    /* Zorg ervoor dat afbeeldingen de containerbreedte niet overschrijden */
    height: auto;

    /* Houd de hoogte in verhouding tot de breedte */
    display: block;

    /* Verwijder eventuele inline ruimte onder de afbeelding */
    margin: 0 auto;

    /* Center de afbeelding horizontaal */
}

/* Responsive adjustments for sticky elements on mobile */
@media (max-width: 767.98px) {
    .position-sticky {
        position: relative;
        top: auto;
    }

    .order-1 {
        order: 1;
    }
}