/* Ensure Lucide icons are properly styled */
/* .lucide-icon {
  width: 1.25rem;
  height: 1.25rem;
}  */

html {
  scroll-behavior: smooth;
}

/* Hide scrollbar completely but allow scrolling */
.scrollbar-hidden::-webkit-scrollbar {
  display: none; /* Hides scrollbar in Webkit-based browsers */
}

.scrollbar-hidden {
  -ms-overflow-style: none; /* Hides scrollbar in IE */
  scrollbar-width: none; /* Hides scrollbar in Firefox */
}

/* Custom scrollbar styling */
.scrollbar-custom {
  scrollbar-width: thin;
  scrollbar-color: rgba(209, 213, 219, 0.7) transparent; /* Lighter gray, Tailwind's gray-300 */
}

/* For webkit browsers (Chrome, Safari, etc.) */
.scrollbar-custom::-webkit-scrollbar {
  width: 12px; /* Slightly wider scrollbar */
}

.scrollbar-custom::-webkit-scrollbar-track {
  background: transparent; /* Transparent track */
  margin: 4px; /* Slight offset from the edges */
}

.scrollbar-custom::-webkit-scrollbar-thumb {
  background-color: rgba(209, 213, 219, 0.7); /* Lighter gray (Tailwind's gray-300) */
  border-radius: 9999px; /* Fully rounded ends */
  border: 3px solid transparent; /* Slight gap between the scrollbar and the content */
}

.scrollbar-custom::-webkit-scrollbar-thumb:hover {
  background-color: rgba(209, 213, 219, 0.9); /* Darker on hover */
}

.scrollbar-custom::-webkit-scrollbar-button {
  display: none; /* Hides the up and down arrows on the scrollbar */
}