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

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', 'Poppins', 'Roboto', sans-serif;
  background-color: #ffffff;
  color: #1a1a1a;
}

/* Custom utilities */
.container-custom {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.btn-primary {
  @apply bg-primary-600 text-white px-6 py-3 rounded-md font-semibold hover:bg-primary-700 transition-colors duration-300;
}

.btn-secondary {
  @apply bg-white text-primary-600 px-6 py-3 rounded-md font-semibold border-2 border-primary-600 hover:bg-primary-50 transition-colors duration-300;
}

.btn-accent {
  @apply bg-accent-red text-white px-6 py-3 rounded-md font-semibold hover:bg-red-700 transition-colors duration-300;
}

.section-title {
  @apply text-3xl md:text-4xl font-bold text-gray-900 mb-2;
}

.section-subtitle {
  @apply text-lg text-gray-600 mb-8;
}

.card-hover {
  @apply transform transition-transform duration-300 hover:scale-105;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.6s ease-out;
}