.container2 {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
  }
  
 
  .bal-list3 {
    list-style-type: none;
    padding: 0;
    width: 50%;
    margin: 0;
  }
  
  .bal-list3 li {
    padding: 5px;
    margin: 5px 0;
    background-color: #f4f4f4;
    cursor: pointer;
    transition: all 0.3s ease; 
    border: 2px solid transparent; 
  }
  
  /* .bal-list3 li:hover {
    background-color: #ddd;
    border-color: #007bff;
    transform: scale(1.05); 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
  } */
  
  
  .bal-list3 li.active {
    background-color: #0066ff; 
    color: white; 
    border-color: #0056b3; 
    transform: scale(1.05); 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
  }
  
  
  .image-container {
    width: 50%;
    overflow: hidden;
    position: sticky;
    top: 20px;
  }
  
  .carousel-inner {
    display: flex;
    width: 1000%; /* 100% multiplied by the number of images (10 images = 1000%) */
    transition: transform 0.5s ease-in-out; 
  }
  
  .carousel-inner img {
    width: 10%; 
    height: auto;
    border: 2px solid #ccc;
    border-radius: 10px;
    opacity: 0; 
    transition: opacity 0.5s ease-in-out; 
  }
  
  .carousel-inner img.active {
    opacity: 1; 
  }