:root {
  --primary-color: #639708;
  --primary-color-rgb: 75, 100, 80;
  --secondary-color: #9aae0d;
  --secondary-color-rgb: 90, 75, 56;
}


/* For all scrollable elements globally */
* {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: transparent transparent; /* Hide scrollbar for Firefox */
}

/* Hide scrollbar visually for WebKit browsers */
*::-webkit-scrollbar {
  width: 20px; /* Set width for the scrollbar */
  background-color: transparent; /* Hide scrollbar track */
}

*::-webkit-scrollbar-thumb {
  background-color: transparent; /* Hide scrollbar thumb */
}

/* Show scrollbar on hover */
*::-webkit-scrollbar-track {
  background-color: transparent; /* Keep track background hidden */
}

*:hover::-webkit-scrollbar-track {
  background-color: #F5F8FC; /* Track background on hover */
}

*:hover::-webkit-scrollbar-thumb {
  background-image: linear-gradient(180deg, #d0368a 0%, #708ad4 99%);
  border-radius: 100px;
  box-shadow: inset 2px 2px 5px 0 rgba(255, 255, 255, 0.5);
}

/* Additional styling for Firefox when hovered */
*:hover {
  scrollbar-color: #639708 #F5F8FC; /* Thumb color and track color for Firefox */
}