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

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

@layer base {
  body {
    @apply font-['Inter'] text-[#4b5563] bg-[#ffffff] antialiased selection:bg-[#2563eb] selection:text-white;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply text-[#111827] font-semibold tracking-tight;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 bg-[#2563eb] text-white font-medium rounded hover:bg-[#1d4ed8] hover:shadow-lg transition-all duration-300;
  }
  
  .btn-outline {
    @apply inline-flex items-center justify-center px-6 py-3 bg-transparent border border-[#2563eb] text-[#2563eb] font-medium rounded hover:bg-[#eff6ff] transition-all duration-300;
  }
}

.text-primary { color: #2563eb; }
.bg-primary { background-color: #2563eb; }

.nav-scrolled {
  @apply bg-white/95 backdrop-blur-md shadow-sm py-3 border-b border-gray-100;
}

.service-card {
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.1), 0 8px 10px -6px rgba(37, 99, 235, 0.1);
  border-color: #bfdbfe;
}

.service-icon {
  transition: all 0.3s ease;
}

.service-card:hover .service-icon {
  transform: scale(1.1);
  color: #2563eb;
}