.card {
 width: 200px;
 height: 300px;
 position: absolute;
 background-size: cover;
 background-position: center;
 color: white;
 font-size: 24px;
 font-weight: bold;
 display: flex;
 justify-content: center;
 border-radius: 10px;
 cursor: pointer;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
 transition: transform 1s ease;
}

.content {
 border-radius: 5px;
}

button {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 background-color: rgba(0, 0, 0, 0.5);
 border: none;
 cursor: pointer;
 font-size: 24px;
 z-index: 10;
}

button.prev {
 left: 0;
}

button.next {
 right: 0;
}

button:hover {
 background-color: rgba(0, 0, 0, 0.8);
}

/* Add to the existing CSS */

.lightbox {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.8);
 display: none;
 justify-content: center;
 align-items: center;
 z-index: 1000;
}

.lightbox img {
 max-width: 90%;
 max-height: 80%;
 border-radius: 10px;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Carousel container in het midden van het scherm */
.carousel-container {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 80vw; /* Zorg ervoor dat de breedte goed is voor de carousel */
 height: 100%; /* De hoogte van de carousel */
 perspective: 1500px;
 display: flex;
 justify-content: center;
 align-items: center;
}
.evcnt{
 height: 40vh;
}
/* Carousel zelf */
.carousel {
 position: relative;
 width: 100%;
 height: 100%;
 transform-style: preserve-3d;
 transition: transform 1s ease;
 transform: rotateY(0deg);
 display: flex;
 justify-content: center;
 align-items: center;
}

/* Knoppen voor navigatie */
button {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 background-color: rgb(255, 255, 255);
 color: white;
 border: none;
 font-size: 30px;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 cursor: pointer;
 border-radius: 50%;
 transition: background-color 0.3s ease;
 z-index: 10; /* Zorg ervoor dat de knoppen boven de kaarten liggen */
}

/* Hover effect voor knoppen */
button:hover {
 background-color: rgba(0, 0, 0, 0.8);
 color: limegreen;
}

/* Positie van de knoppen net buiten de carousel */
.prev {
 color: red;
}

.next {
 color: red;
}
.evcnt{
    margin-bottom: -10vh;
}

/* Responsieve aanpassingen */

/* Voor schermen van 600px tot 1000px */
@media screen and (min-width: 600px) and (max-width: 1000px) {
 .carousel-container {
   width: 700px; /* Verklein de breedte van de carousel */
   height: 300px; /* Verklein de hoogte */
   transform: translate(-50%, -50%) scale(0.8); /* Zorg dat het gecentreerd blijft en schaal kleiner */
 }

 .card {
   width: 160px; /* Verklein de kaarten */
   height: 240px;
   font-size: 20px; /* Verklein het lettertype in de kaarten */
 }

 .carousel {
   gap: 15px; /* Iets minder ruimte tussen kaarten */
 }
}

/* Voor schermen kleiner dan 600px */
@media screen and (max-width: 600px) {
 svg {
   top: 20%;
   left: 70%;
 }

 .carousel-container {
   width: 100%; /* Nog kleinere carousel */
   height: 200px;
   transform: translate(-50%, -50%) scale(0.6); /* Zorg dat het gecentreerd blijft en schaal kleiner */
 }

 .carousel {
   gap: 10px; /* Nog minder ruimte tussen kaarten */
 }
 .evcnt{
    margin-bottom: 10vh;
}
}