html{
    scroll-behavior: smooth;
}

@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}

.animate-scroll {
display: flex;
width: calc(200% + 3rem);
animation: scroll 30s linear infinite;
}

.nav-active {
  background-color: #2596be !important;
  transition: background-color 0.4s ease-in-out;
}

.nav-active a {
  color: white !important;
}

.nav-active .fa-globe,
.nav-active .fa-chevron-down {
  color: white !important;
}

.inactive {
  color: #4b5563; /* text-gray-600 */
  font-weight: 500; /* font-medium */
  padding: 0.5rem 0.25rem; /* py-2 px-1 */
}

.inactive:hover {
  color: #2596be;
}

.active {
  color: #4b5563;
  font-weight: 500;                       /* font-medium */
  border-bottom: 2px solid #4b5563;
  padding: 0.5rem 0.25rem;                /* py-2 px-1 */
}