.custom-carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80vh;
}

.custom-carousel .carousel {
  width: 70%;
  max-width: 1000px;
  border-radius: 40px;
  margin: auto; 
}

.custom-carousel .carousel-item {
  height: 550px; 
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  border-radius: 40px;
}

.custom-carousel .carousel-item .scroll-content {
  height: 100%;
  scroll-snap-align: center;
  border-radius: 40px;
}

.custom-carousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  scroll-snap-align: center;
  border-radius: 40px;
  object-position: 30% center; /* Adjust object position if needed */
}

.custom-carousel .carousel-buttons {
  flex-wrap: wrap;
  margin-top: -1%;
  justify-content: center;
  border-radius: 40px;
}

.btn-primary-dbtl {
  background-color: #a38d7d;
  border-color: #837165;
  border: 0.5rem solid #a38d7d;
}

.btn-primary-dbtl:hover {
  background-color: #d5c9be;
  border-color: #978f87;
}

.image-text-container {
  position: relative;
  scroll-snap-align: center;
  height: 100%; 
}


.text-overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: rgba(98, 98, 98, 0.7);
  color: white;
  overflow-y: auto;
}

.content-wrapper-dbtl {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.text-overlay p {
  margin: 0 0 20px 0;
  text-align: left;
}

.text-overlay table {
  width: 100%;
  border-collapse: collapse;
  margin-top: auto;
}

.text-overlay th, .text-overlay td {
  border: 1px solid white;
  padding: 8px;
  text-align: left;
}

.text-overlay th {
  background-color: rgba(255, 255, 255, 0.2);
}

  .zoom-in-eng {
    transition: transform 0.5s ease-in-out;
  }
  .zoom-in-eng:hover {
    transform: scale(2.5);
  }


@media (max-width: 768px) {
  .custom-carousel .carousel {
    width: 90%; /* Increase width on smaller screens */
  }
  .custom-carousel .carousel-item {
    height: auto; 
  }
  .image-text-container img {
    max-width: 80%; 
  }
}

@media (max-width: 480px) {
  .custom-carousel .carousel {
    width: 95%; 
  }
  .custom-carousel .carousel-item {
    height: auto; 
  }
  .image-text-container img {
    max-width: 70%; 
  }
}