[x-cloak] { display: none !important; }
#breadcrumb::-webkit-scrollbar {
  height: 0px !important;
}

.asidebar::-webkit-scrollbar {
    width: 2px !important;
}

.asidebar::-webkit-scrollbar-thumb, .navbar::-webkit-scrollbar-thumb {
    background: transparent !important;
    transition: background 0.3s !important;
}

.asidebar:hover::-webkit-scrollbar-thumb, .navbar:hover::-webkit-scrollbar-thumb {
    background: rgb(140, 136, 136) !important;
}

.navbar::-webkit-scrollbar {
    height: 2px;
}

#Category-main a:nth-of-type(1){
  margin-left: 0px;
}

.carousel__arrow.disabled{
  opacity: 0.5;
}

.m-auto{
  margin: auto !important;
}

.active{
  background: #0000ff1f  !important;
  color: #0000ff94  !important;
}

.active svg{
  color: #0000ff94  !important;
}

.dark .active{
  background: #374151 !important;
  color: white !important;
}

.dark .active svg{
  color: white !important;
}

.feture-container::-webkit-scrollbar {
  display: none;
}

/* Hide default slider track */
/* Style for the slider thumb */
#volumeRange {
  appearance: none; /* Removes default browser styling */
}

#volumeRange::-webkit-slider-thumb {
  appearance: none; /* Ensures no default styles */
  width: 16px;
  height: 16px;
  background: #ff006c; /* Bright red color */
  border-radius: 50%; /* Makes the thumb circular */
  cursor: pointer;
  opacity: 0; /* Initially hidden */
  transition: opacity 0.2s ease-in-out; /* Smooth fade-in effect */
}

#volumeRange:hover::-webkit-slider-thumb {
  opacity: 1; /* Fully visible on hover */
}

#volumeRange::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #ff006c;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0; /* Initially hidden */
  transition: opacity 0.2s ease-in-out;
}

#volumeRange:hover::-moz-range-thumb {
  opacity: 1; /* Fully visible on hover */
}

#volumeRange::-ms-thumb {
  width: 16px;
  height: 16px;
  background: #ff006c;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0; /* Initially hidden */
  transition: opacity 0.2s ease-in-out;
}

#volumeRange:hover::-ms-thumb {
  opacity: 1; /* Fully visible on hover */
}


@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%; 
  }
  100% {
    background-position: 0% 50%;
  }
}

.animate-gradient {
  animation: gradient 6s linear infinite;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(270deg, #ff7356, #ff59e2 25.52%, #52ddf6 50%, #eadf4e 76.04%, #f25902);
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 200% auto;
}