/* Add custom CSS to adjust the modal width */
.modal-lg {
  max-width: 70%; /* Adjust the width as needed */
}

@media (max-width: 768px) {
  .carousel-para-text {
    font-size: 17px !important;
  }
}

@media (max-width: 576px) {
  .modal-dialog {
    max-width: 100%;
    margin: 0 auto; /* Center the modal horizontally */
  }
}

.modal-content {
  border-radius: 30px !important;
}

/* Ensure the image is responsive */
.img-fluid {
  width: 100%;
  height: auto;
}

/* Center the modal vertically */
.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 3.5rem);
}

/* Custom scroll class to hide scrollbar but allow scrolling */
.custom-scroll {
  max-height: 80vh; /* Adjust based on your preference */
  overflow-y: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.custom-scroll::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}