:root {
  --primary-color: #5465d7;
  --secondary-color: #adb4e5;
  --primary-text-color: #fffcf3;
  --text-color: #a1a1a1;
  --text-color-on-light: #33312f;
  --darken: #161d4b93;
  --box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

.custom-image-slider,.custom-image-slider2,.custom-image-slider3,.custom-image-slider4,.custom-image-slider5,.custom-image-slider6 {
    position: relative;
    width: auto;
    overflow: hidden;
    height:0;
    padding-bottom: 100%; /* Adjust this value according to your image aspect ratio */
    margin-top:50px;
  }

  .custom-image-slider, .custom-image-slider2{
    margin-top: 0px;
  }

  .slider-before,
  .slider-after,  .slider-before2,
  .slider-after2,  .slider-before3,
  .slider-after3,  .slider-before4,
  .slider-after4,  .slider-before5,
  .slider-after5,  .slider-before6,
  .slider-after6 {
    position: absolute;
    width: 100%;
    display: block;
    top: 0;
    left: 0;
    height: 100%;
    object-fit:contain;
  }

  .slider-after,.slider-after2,.slider-after3,.slider-after4,.slider-after5,.slider-after6 {
    overflow: hidden;
  }

  .slider-handle, .slider-handle2,.slider-handle3,.slider-handle4,.slider-handle5,.slider-handle6  {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    background-color:var(--secondary-color);
    cursor: ew-resize;
  }

.slider-handle::before,
.slider-handle::after,.slider-handle2::before,
.slider-handle2::after,.slider-handle3::before,
.slider-handle3::after,.slider-handle4::before,
.slider-handle4::after,.slider-handle5::before,
.slider-handle5::after,.slider-handle6::before,
.slider-handle6::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  cursor: ew-resize;
  transition: all 0.2s ease-out; /* Add transition property */
}

.slider-handle::before, .slider-handle2::before,.slider-handle3::before,.slider-handle4::before,.slider-handle5::before,.slider-handle6::before {
  left: -24px;
  border-right: 16px solid var(--primary-color);
}

.slider-handle::after,.slider-handle2::after,.slider-handle3::after,.slider-handle4::after, .slider-handle5::after,.slider-handle6::after {
  right: -24px;
  border-left: 16px solid var(--darken);
}