/* Custom Range Slider Styling */
.custom-range {
  -webkit-appearance: none;
  background: transparent;
}

.custom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #6366f1; /* Indigo 500 */
  cursor: pointer;
  margin-top: -8px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
  transition: all 0.2s ease;
}

.custom-range::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.8);
}

.custom-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: #374151; /* Gray 700 */
  border-radius: 2px;
}

.custom-range:focus {
  outline: none;
}

/* Ambient Background Animation */
@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}