/* ========================================
   Custom Scrollbar for Montor Theme
   ======================================== */

/* Custom Scrollbar for Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #E8F4F5;
  border-radius: 0;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #019EB2 0%, #017A8A 100%);
  border-radius: 6px;
  border: 2px solid #E8F4F5;
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #01B5CC 0%, #019EB2 100%);
  border-color: #D8E9EB;
}

::-webkit-scrollbar-thumb:active {
  background: #017A8A;
}

/* Custom Scrollbar for Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #019EB2 #E8F4F5;
}

/* Horizontal scrollbar */
::-webkit-scrollbar:horizontal {
  height: 12px;
}

/* Corner where vertical and horizontal scrollbars meet */
::-webkit-scrollbar-corner {
  background: #E8F4F5;
}

/* Smooth scrolling behavior */
html {
  scroll-behavior: auto !important; /* Let JavaScript handle this */
}

/* Optional: Custom scrollbar for specific elements */
.testimonials-slider::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.testimonials-slider::-webkit-scrollbar-thumb {
  background: #019EB2;
  border-radius: 4px;
}

/* Mobile - Hide scrollbar but keep functionality */
@media (max-width: 768px) {
  /* For mobile, you can optionally hide the scrollbar */
  /* Uncomment below if you want to hide on mobile */
  /*
  ::-webkit-scrollbar {
    width: 6px;
  }

  ::-webkit-scrollbar-thumb {
    border-width: 1px;
  }
  */
}

/* Scrollbar appearance during smooth scroll animation */
body.is-scrolling ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #01B5CC 0%, #019EB2 100%);
}