/* Container waarin de carousel zelf is opgenomen */
.carousel-container {
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

/* Stijl voor de carrousel die de afbeeldingen bevat. Hiermee worden de afbeeldingen horizontaal naast elkaar geplaatst. */
.carousel {
    display: flex;
    transition: transform 1s ease;
}

/* Stijlen voor de afbeeldingen binnen de carrousel. Bepaalt de grootte van de afbeeldingen en hoe ze binnen de container passen. */
.carousel img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

/* Bepaalt de grootte van elke individuele slide binnen de carrousel en centreert de inhoud. */
.carousel-slide {
    flex: 0 0 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Stijlen voor de navigatieknoppen van de carrousel. */
.carousel-button {
    display: inline-block;
    margin: 10px auto;
    padding: 10px 20px;
    background-color: #3498db;
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Centreert de navigatieknoppen horizontaal en voegt marges toe. */
.button-container {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

/* Stijl voor de hover-toestand van de navigatieknoppen. */
.carousel-button:hover {
    background-color: #2980b9;
}
/* Aangepaste stijlen voor verschillende schermgroottes om de carrousel responsief te maken. */
@media (max-width: 968px) {
    .carousel-slide {
        flex: 0 0 100%;
        max-height: 150px;
    }
}

@media (max-width: 480px) {
    .carousel-slide {
        flex: 0 0 100%;
        max-height: 140px;
    }
}