/* Using Tailwind's @apply directive is common in projects set up with Tailwind CSS.
   If you aren't using a PostCSS build step, you can replace these with
   standard CSS or the equivalent utility classes in your HTML. */

.nav-item {
  @apply flex items-center text-gray-600 font-medium hover:text-blue-600 transition-colors duration-300;
}
.dropdown-menu {
  @apply absolute hidden group-hover:block bg-white shadow-lg mt-2 rounded-md w-48 py-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-300;
}
.dropdown-link {
  @apply block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-700;
}
.mobile-link {
  @apply block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-white hover:bg-blue-600 transition;
}
.mobile-accordion-toggle {
  @apply w-full flex justify-between items-center px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100;
}
.mobile-accordion-content {
  @apply hidden pl-7 pt-1 pb-2 space-y-1;
}
.mobile-accordion-link {
  @apply block px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:bg-gray-100;
}