/* Custom scrollbar styling */
::-webkit-scrollbar {
  width: 8px; /* Width of the scrollbar */
  height: 8px; /* Height of the scrollbar (for horizontal scrolling) */
}

/* Style for the scrollbar track (background area) */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Style for the scrollbar thumb (draggable part) */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(
    26,
    26,
    26,
    0.5
  ); /* Same color as your footer or navigation highlight */
  border: 3px solid rgba(255, 228, 196, 0); /* Add border to thumb for separation */
}

/* Scrollbar thumb hover effect */
::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 26, 26, 0.8); /* Darker shade on hover */
}

/* Custom scrollbar for horizontal scrolling (optional) */
::-webkit-scrollbar-horizontal {
  height: 12px;
}

::-webkit-scrollbar-track-horizontal {
  background: rgba(255, 228, 196, 0);
}

::-webkit-scrollbar-thumb-horizontal {
  background: rgb(172, 111, 81);
}