.brouwerij-section {
    position: relative;
    text-align: left;
    
}

.image-container {
    width: 100%; /* Afbeelding neemt volledige breedte in beslag */
    max-height: 600px; /* Maximale hoogte van de afbeelding container */
    overflow: hidden; /* Verberg eventuele overloop van de afbeelding */
    
   
}

.image-container img {
    width: 100%; /* Afbeelding neemt volledige breedte in beslag */
    height: auto; /* Behoudt de aspectverhouding van de afbeelding */
    background-color: rgba(0, 0, 0, 0.945);
}

.image-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(39, 10, 10, 0.3); /* Donkere tint met 50% opaciteit */
}

.text-overlay {
    
    padding: 10px;
    text-align: left;
    color: white;
    position: absolute;
    bottom: 0;
    left: 20px;
    margin-bottom: 20px;
    width: 40%;
z-index: 2;
}

.text-overlay h2{
    font-family: "Georgia", serif;
    font-size: 52pt;
}

.text-overlay p{
    font-family: "Roboto Slab";
    font-size: 14pt;
}

.book-now{
    
    background-color:#c31212;
    color: #fff;
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    font-family: "Roboto Slab", serif;
}

.book-now a{
    font-family: "Roboto-Slab";
}

.book-now:hover {
    transform: translateZ(20px); /* Beweeg de link een beetje naar voren */
    background-color: #FBB117;
    text-decoration: none;
    color: white;
    font-family: "Roboto Slab", serif;
}

.picknick {
    
    display: flex; /* Flex container om tekst en afbeelding naast elkaar te plaatsen */
   
    display: flex; /* Flex container om tekst en afbeelding naast elkaar te plaatsen */
    margin-top: 80px;
    margin-left: 30px;
    margin-right: 30px;
    border-radius: 10px;
  box-shadow: 0px 4px 12px rgba(56, 47, 47, 0.175);

}
.picknick-content{
    margin-top: 40px;
    margin-left: 50px;   
    padding: 20px;
}

.picknick img {
    flex: 5; /* Laat de afbeelding groeien om de beschikbare ruimte in te vullen */
    border-radius: 0;
    max-height: 330px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
      }


.picknick p {
    flex: 2; /* Laat de tekst groeien om de beschikbare ruimte in te vullen */
    text-align: left; /* Tekst links uitlijnen */
    font-family: "Roboto Slab"; /* Lettertype */
    font-size: 12pt; /* Lettergrootte */
    width: 100%;
}

.picknick h2{
    font-family: "Georgia", serif;
    font-size: 18pt;
    font-weight: bold;
    width: 100%;
}


/* Stijlen voor de carousel-container */
.carousel-container {
    text-align: center;
    margin-top: 180px;
    margin-bottom: 50px;
}

.carousel-container h2 {
    font-family: "Georgia", serif;
    font-size: 28pt;
    margin-bottom: 20px;
}

.carousel-container h2 {
    font-family: "Georgia", serif;
    font-size: 28pt;
    margin-bottom: 20px;
}

.carousel {
    width: 80%; /* Verklein de breedte van de carousel */
    margin: 0 auto; /* Centreer de carousel */
}

.carousel-control-prev, .carousel-control-next {
    width: 5%; /* Stel de breedte van de pijltjes in */
}

.carousel-control-prev {
    margin-left: 5%; /* Verplaats de linker pijl naar links */
}

.carousel-control-next {
    margin-right: 5%; /* Verplaats de rechter pijl naar rechts */
    
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    
    padding: 20px;
    z-index: 3;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    width: 50px; /* Stel de breedte van de pijltjespictogrammen in */
    height: 50px; /* Stel de hoogte van de pijltjespictogrammen in */
    border: none; /* Verwijder de rand van de pijltjespictogrammen */
    color: white; /* Stel de kleur van de pijltjespictogrammen in */
    font-size: 24px; /* Stel de grootte van de pijltjespictogrammen in */
    line-height: 50px; /* Centreer de pijltjespictogrammen verticaal */
    text-align: center; /* Centreer de pijltjespictogrammen horizontaal */
    cursor: pointer; /* Wijzig de cursor naar een wijzer */
    
}



/* Stijlen voor de carousel */
.carousel {
    width: 95%;
    margin: 0 auto;
    max-height: 800px;
}

.carousel-item img {
    width: 100%;
    height: 670px;
    object-fit: cover;
    border-radius: 10px;
    
}


@media only screen and (max-width: 1380px) {
    /* Pas de stijlen aan voor schermen kleiner dan 768px breed */
    .text-overlay {
      top: 60%; /* Pas de positie van de overlay aan */
      left: 10px;
      width: calc(80% - 20px); /* Pas de breedte van de overlay aan */
    }

    .text-overlay h2{
        font-family: "Georgia", serif;
        font-size: 35pt;
    }
    
    .text-overlay p{
        font-family: "Roboto Slab";
        font-size: 14pt;
    }
  
    .picknick img {
      width: 100%; /* Maak de afbeelding volledige breedte */
      margin-bottom: 10px; /* Verklein de ruimte onder de afbeelding */
      object-fit: cover;
    }
  
    .picknick h2 {
      max-width: 100%; /* Maak de maximale breedte van de tekst 100% */
      text-align: left;
    }
    .picknick {
      margin-top: 50px;
      margin-left: 10px;
      box-shadow: 0px 4px 12px rgba(56, 47, 47, 0.175);
      margin-right: 10px;
      border-radius: 10px;
    }
  
    .picknick p {
      max-width: 100%; /* Maak de maximale breedte van de tekst 100% */
      margin-left: 10; /* Verwijder de linkermarge */
      text-align: left;
    }
  
    .picknick {
      flex-direction: column;
    }
  
    .picknick img {
      margin-bottom: -10px;
      margin-top: 20px; /* Voeg wat ruimte toe boven de afbeelding */
      border-bottom-left-radius: 10px;
      border-top-right-radius: 0px;
      border-top-left-radius: 0px;
    }
  }