:root{
    --primary-color: #1d4ed8;
    --secondary-color: #F17F05;
    --accent-color: #60a5fa;
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --bg-primary: #ffffff;
    --bg-secondary: #f1f5f9;
}
.buttton_hide{
    display: none!important;
}
#page-numbers-wrapper {
  overflow-x: auto;
  max-width: 80vw;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

#page-numbers {
  display: flex;
  gap: 4px;
  width: max-content;
  padding: 4px 0;
}

.nav-item {
    transition: transform 0.3s ease-in-out;
    perspective: 1000px;
}
.nav-item:hover {
    transform: translateZ(20px) rotateX(10deg);
}
.logo-spin {
    animation: spin 10s linear infinite;
}
@keyframes spin {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}
/* in your global styles or use Tailwind plugin for scrollbar hiding */
@media (min-width: 640px) {

}