/* Verander de achtergrondkleur van de header */
.navbar {
    color: #fff;
    display: flex;
    justify-content: space-between; /* Verdeel de ruimte tussen de items in de navbar */
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Verklein het logo */
.navbar-brand img {
    max-width: 60px; /* Pas de breedte van het logo naar wens aan */
}

/* Voeg ruimte toe tussen het logo en de navigatieknoppen */
.navbar-nav {

    flex-direction: row;
}

/* Verander de afstand tussen de linkjes op de header */
.nav-item {
    margin-right: 20px; /* Pas de afstand tussen de linkjes aan naar wens */
}

/* Verander de kleur van de zoekknop */
#searchBtn {
    background-color: #6C796F; /* Pas de achtergrondkleur van de zoekknop naar wens aan */
    color: #fff; /* Pas de tekstkleur van de zoekknop naar wens aan */
    border-color: #6C796F; /* Pas de randkleur van de zoekknop naar wens aan */
}

/* Verander de kleur van de tekst van de actieve link */
.navbar-nav .nav-item.active .nav-link {
    color: #6C796F; /* Pas de kleur van de actieve link naar wens aan */
}

.bruin {
    background-color: #dad6ce; /* achtergrondkleur van de strook */
    padding: 20px; /* ruimte binnen de strook */
    text-align: left; /* tekst links uitlijnen */
}

/* Stijlen voor de afbeelding */
/* Stijlen voor de afbeelding */
.custom-image {
    width: 100%; /* Neem de volledige breedte van het scherm in */
    max-height: 500px; /* Maximaal 500px hoog */
    height: auto; /* Behoud de verhoudingen van de afbeelding */
}
/* Kleur voor de tekst */
.text-color {
    color: #6C796F; /* Pas de kleur van de tekst naar wens aan */
}
.text-color-white {
    color: #ffffff; /* Pas de kleur van de tekst naar wens aan */
}
.groen {
    background-color: #6C796F; /* achtergrondkleur van de strook */
    padding: 20px; /* ruimte binnen de strook */
    text-align: left; /* tekst links uitlijnen */
}
.white {
    background-color: #ffffff; /* achtergrondkleur van de strook */
    padding: 20px; /* ruimte binnen de strook */
    text-align: left; /* tekst links uitlijnen */
}
.link-color {
    margin-bottom: 20px; /* ruimte onder de linkjes */
    color: #6C796F;
}
.link-color:hover {
    color: #6C796F;
}
.link-color-white {
    margin-bottom: 20px; /* ruimte onder de linkjes */
    color: #ffffff;
}
.link-color-white:hover {
    color: #ffffff;
}
.footer {
    background-color: #6C796F; /* Achtergrondkleur van de footer */
    color: #ffffff; /* Tekstkleur van de footer */
    padding: 20px; /* Padding van 20px rondom de inhoud van de footer */
}

.footer a {
    color: #ffffff; /* Kleur van de linkjes in de footer */
}

.footer a:hover {
    color: #cccccc; /* Kleur van de linkjes in de footer bij hover */
}

.button-style {
    background-color: #6C796F; /* Achtergrondkleur van de knop */
    color: #ffffff; /* Tekstkleur van de knop */
    border: none; /* Geen rand om de knop */
    padding: 10px 20px; /* Padding van 10px boven/onder en 20px links/rechts */
    cursor: pointer; /* Cursor veranderen naar een handje bij hover */
    border-radius: 5px; /* Afgeronde hoeken van 5px */
}

.button-style:hover {
    background-color: #333333; /* Achtergrondkleur van de knop bij hover */
    color: #ffffff;
}


.button-style-white {
    background-color: #ffffff; /* Achtergrondkleur van de knop */
    color: #6C796F; /* Tekstkleur van de knop */
    border: none; /* Geen rand om de knop */
    padding: 10px 20px; /* Padding van 10px boven/onder en 20px links/rechts */
    cursor: pointer; /* Cursor veranderen naar een handje bij hover */
    border-radius: 5px; /* Afgeronde hoeken van 5px */
}

.button-style-white:hover {
    background-color: #ffffff; /* Achtergrondkleur van de knop bij hover */
}
.opvulling {
    margin: 70px;
}
.bullet-list {
    list-style-type: disc; /* Opsommingsteken in de vorm van een zwarte cirkel */
    padding-left: 20px; /* Ruimte aan de linkerkant voor de opsommingstekens */
    color: #ffffff;
}
.bullet-list-green {
    list-style-type: disc; /* Opsommingsteken in de vorm van een zwarte cirkel */
    padding-left: 20px; /* Ruimte aan de linkerkant voor de opsommingstekens */
    color: #6C796F;
}
.custom-image-shadow {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Horizontale offset, verticale offset, blur-radius, kleur */
    width: 100%; /* Neem de volledige breedte van het scherm in */
    max-height: 500px; /* Maximaal 500px hoog */
    height: auto; /* Behoud de verhoudingen van de afbeelding */
}
.custom-image-contact {
    width: 100%; /* Neem de volledige breedte van het scherm in */
    min-height: 500px;
    height: auto; /* Behoud de verhoudingen van de afbeelding */
}

.contactpage-img{
    background-image: url(img/indexpage.png);
    background-repeat: no-repeat;
    background-size: cover;
    
}