@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: 'Inter', sans-serif;
  background-color: #f8f8f8;
  color: #333;
}

.nav-link {
  @apply text-gray-700 hover:text-black transition duration-300;
}

.card-hover {
  @apply transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg;
}

.gallery-filter {
  @apply px-4 py-2 mx-1 my-2 bg-white rounded-full cursor-pointer transition-all duration-300 border border-gray-200 hover:bg-gray-100;
}

.gallery-filter.active {
  @apply bg-gray-900 text-white border-gray-900;
}

.gallery-item {
  @apply overflow-hidden rounded-lg shadow-md transition-all duration-300 hover:shadow-xl;
}

.article-card {
  @apply bg-white rounded-xl overflow-hidden shadow-md transition-all duration-300 hover:shadow-lg;
}

.carousel-image {
  @apply w-full h-full object-cover transition-opacity duration-500;
}

.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.slide-enter {
  transform: translateX(100%);
}

.slide-enter-active {
  transform: translateX(0);
  transition: transform 300ms ease-out;
}

.slide-exit {
  transform: translateX(0);
}

.slide-exit-active {
  transform: translateX(-100%);
  transition: transform 300ms ease-out;
}