/* Algemeen */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Voorkom horizontaal scrollen */
    background-color: #293339;
    font-family: Arial, sans-serif;
}

p {
    font-size: 25px;
}

html {
    scroll-behavior: smooth;
}

header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #293339;
    padding: 20px;
    margin-top: 20px;
    color: white;
}

header h1 {
    margin: 0;
    flex: 1;
    text-align: left;
}

header p {
    margin: 0;
    flex: 1;
    text-align: center;
}

header nav {
    flex: 1;
    text-align: right;
}

header nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-end;
}

header nav li {
    margin: 0 10px;
}

header nav a {
    text-decoration: none;
    color: white;
    font-size: 20px;
}

#tbm-color {
    color: #96B536;
}

/* Voorpagina */
.container {
    width: 100%;
    height: 100%;
    overflow-x: hidden; /* Voorkom horizontaal scrollen */
    margin-top: 60px;
}

section {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%; /* Zorg ervoor dat secties niet breder zijn dan de viewport */
    padding: 20px;
    box-sizing: border-box;
}

section img {
    width: 300px;
    height: auto;
    margin: 20px auto; /* Gebruik auto voor horizontale marge om centreren te bereiken */
    display: block; /* Zorg ervoor dat de afbeelding als blokelement wordt weergegeven voor correcte centrering */
}

section ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    flex: 2;
}

.service-item {
    margin: 40px auto; /* Midden uitlijning */
    max-width: 80%; /* Maximale breedte voor betere responsiviteit */
    text-align: center; /* Centreer de tekst */
}

.service-item li {
    color: #96B536;
    margin-top: 30px;
    font-size: 2rem;
    line-height: 1.5; /* Verbeter de leesbaarheid door een goede regelhoogte */
}

/* Over ons pagina */
.about {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    text-align: center;
    margin-top: 80px;
}

.about h2 {
    font-size: 2.5rem;
    color: #96B536;
    margin-bottom: 20px;
    text-align: center;
}

.slideshow-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 100%; /* Verhoog max-width naar 100% */
}

.slide {
    flex: 1 0 300px;
    margin: 10px;
    width: 100%;
    height: auto;
    max-width: 400px;
    max-height: 400px;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Contactpagina */
.contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #293339;
    padding: 20px;
    margin-top: 200px;
    box-sizing: border-box;
}

.contacttext {
    margin-top: 20px;
    text-align: center;
}

h2 {
    font-size: 2.5rem;
    color: #96B536;
}

.infotbm{
    color: white;
    margin-top: 20px;
    font-size: 3.5rem;
    text-align: center;
}

.infotbmtel {
    color: white;
    margin-top: 20px;
    font-size: 1.5rem;
    text-align: center;
}


/* Footer */
.footer {
    background: #78922a;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    margin-top: 50px;
}

.footer .social-icon, .footer .menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 10px 0;
}

.footer .social-icon__item, .footer .menu__item {
    list-style: none;
    margin: 5px 10px;
}

.footer .social-icon__link {
    font-size: 2rem;
    color: #fff;
    transition: 0.5s;
}

.footer .social-icon__link:hover {
    transform: translateY(-10px);
}

.footer .menu__link {
    font-size: 1.2rem;
    color: #fff;
    transition: 0.5s;
    text-decoration: none;
    opacity: 0.75;
}

.footer .menu__link:hover {
    opacity: 1;
}

.footer p {
    font-size: 1rem;
}

/* Specifieke styling voor logo afbeelding */
.logo {
    margin-left: 0; /* Zorg ervoor dat de logo afbeelding links uitlijnt */
    display: block; /* Zorg ervoor dat de logo afbeelding als blokelement wordt weergegeven */
}

/* Media Queries voor Responsiviteit */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        text-align: center;
    }
    
    header h1, header p, header nav {
        flex: none;
        margin: 10px 0;
    }

    header nav ul {
        justify-content: center;
    }

    .service-item li {
        font-size: 1.4rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    .infotbm, .infotbmtel {
        font-size: 2rem;
    }

    section img {
        margin: 10px auto; /* Gebruik auto voor horizontale marge om centreren te bereiken */
        max-width: 80%;
    }

    .slide {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    /* Specifieke styling voor logo afbeelding op mobiel */
    .logo {
        margin-left: -20px; /* Zorg ervoor dat de logo afbeelding links uitlijnt op mobiel */
        width: auto; /* Zorg ervoor dat de breedte automatisch is */
    }
    .footer, .about, .contact, .container{
        margin-top: 0px;
    }

}

/* Media Queries voor grotere schermen */
@media (min-width: 769px) {
    .slideshow-container {
        max-width: 100%;
    }

    .slide {
        width: 400px;
        height: 400px;
    }

    .slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .logo {
        margin-left: -20px; /* Zorg ervoor dat de logo afbeelding links uitlijnt op mobiel */
    }
    
}