.container {
  position: relative;
  width: 100%;
  
  overflow: hidden;
}

.image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: clip-path 0.3s ease; /* Smooth transition for clip-path */
}

.image-left {
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

.image-right {
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

#slider {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  z-index: 10;
  appearance: none;
  background: transparent;
}

#slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 2px solid #000;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease; /* Smooth thumb movement */
}

#slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #fff;
  border: 2px solid #000;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease; /* Smooth thumb movement */
}

.text-overlay {
  position: absolute;
  bottom: 20px;

  transform: translateX(-50%);
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  z-index: 5;
  transition: transform 0.3s ease; /* Smooth transition for text movement */
  width: 100%;
  text-align: center; /* Default alignment */
}