input[type="range"] {
  -webkit-appearance: none; /* Reset default styling */

  border-radius: 3px; /* Rounded corners */
  outline: none; /* Remove focus outline */
  opacity: 0.7;
  transition: background 0.3s ease;
}


input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Reset thumb styling */
  appearance: none;
  width: 30px; /* Thumb width */
  height: 30px; /* Thumb height */
  background: #f57dff; /* Thumb color */
  border-radius: 50%; /* Circular thumb */
  cursor: pointer; /* Pointer cursor */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  transform: translateY(-35%);
}

input[type="range"]:focus::-webkit-slider-thumb {
  background: #ff784e; /* Thumb color on focus */
}


input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #00bcd4, #3f51b5); /* Gradient track */
  background: black;
  height: 10px;
  border-radius: 10px;
}