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

:root {
  --primary: #2563eb;
  --secondary: #1e40af;
  --accent: #f59e0b;
}

body {
  font-family: 'Inter', sans-serif;
  scroll-behavior: smooth;
}

.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition duration-300 ease-in-out transform hover:-translate-y-1;
}

.btn-secondary {
  @apply bg-white hover:bg-gray-100 text-blue-600 border border-blue-600 font-medium py-3 px-6 rounded-lg transition duration-300 ease-in-out;
}

.service-card {
  @apply bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-2;
}

.promo-card {
  @apply rounded-2xl overflow-hidden shadow-lg transition-transform duration-300 hover:scale-105;
}

.domain-card {
  @apply bg-white rounded-xl p-6 shadow-md text-center transition-all duration-300 hover:shadow-lg;
}

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

.testimonial-card {
  @apply bg-white p-6 rounded-xl shadow-md;
}

.cookie-banner {
  @apply fixed bottom-0 left-0 right-0 bg-gray-800 text-white p-4 z-50 transition-transform duration-300 transform;
}

.mobile-menu {
  @apply fixed inset-0 bg-white z-40 transform transition-transform duration-300 ease-in-out;
}

.dropdown-menu {
  @apply absolute left-0 mt-2 w-80 bg-white rounded-lg shadow-xl z-30 transition-opacity duration-200;
}

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

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.swiper-pagination-bullet-active {
  background-color: #2563eb !important;
}