#sync1{
    margin-top: 92px;
}
#sync1 .item {
    /* background: #0c83e7; */
    /* padding: 80px 0px; */
    margin-bottom: 15px;
    color: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
    max-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
  }
  #sync1 .item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* Use "contain" for maintaining aspect ratio */
  }
  #sync2 .item {
    /* Specify a fixed width and height for thumbnails */
    width: 70px;
    height: 70px;
  }

  #sync2 img {
    /* max-width: 100%; */
    max-height: 100%;
    /* width: auto; */
    height: 100%;
    object-fit: cover;
  }
  #sync2 .owl-item{
width: auto !important;
}
  #sync2 .synced .item {
    /* background: #06a1fb; */
    opacity: 100 !important;
    border: 5px solid #06a1fb;
  }
  #sync2 .item {
    /* Your existing styles for inactive thumbnails */
    opacity: 0.5; /* Dim the inactive thumbnails */
    transition: opacity 0.3s ease-in-out;
  }

  #sync2 .item.active {
    /* Style for the active thumbnail */
    border: 1px solid #06a1fb;
    opacity: 100 !important;
  }

  .owl-prev,
  .owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    font-size: 24px; /* Adjust the font size as needed */
    color: #06a1fb; /* Change the color as needed */
    cursor: pointer;
  }

  .owl-prev {
    left: 10px; /* Adjust the position as needed */
  }

  .owl-next {
    right: 10px; /* Adjust the position as needed */
  }
  .owl-next .disabled i{
    right: 10px; /* Adjust the position as needed */
    cursor: none;
    display: none !important;
  }
  .owl-prev .disabled i {
    left: 10px; /* Adjust the position as needed */
    cursor: none;
    display: none !important;
  }
  /* EOS */