#myCarousel1 {
    width: 100%;
    margin: 20px auto;
  }
  
  .carousel-inner img {
    width: 100%;
    height: 100%;
    max-height: 400px; /* Adjust the maximum height as needed */
    border-radius: 10px; /* Add rounded corners to the images */
  }
  
  .carousel-caption {
    padding: 20px;
    text-align: center; /* Center the text on larger screens */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 0 0 10px 10px; /* Rounded corners for the bottom only */
  }
  
  .carousel-caption h5 {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    margin: 0; /* Remove default margin to avoid extra space */
    padding: 10px; /* Adjust padding for spacing around the text */
    display: inline-block; /* Make the background size fit the content */
    border-radius: 5px; /* Add rounded corners to the caption background */
  }
  
  /* Make the carousel responsive */
  @media (max-width: 768px) {
    .carousel-inner img {
      max-height: 300px; /* Adjust the maximum height for smaller screens */
    }
  
    .carousel-caption {
      text-align: center; /* Align the text to the left on mobile screens */
      padding: 10px; /* Adjust padding for better spacing on mobile */
      border-radius: 0;
    }
  }