@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

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

@layer base {
  body {
    @apply font-['Open_Sans'] text-[#4a5568] bg-[#f7fafc] antialiased selection:bg-[#fbbf24] selection:text-white;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-['Playfair_Display'] text-[#1a365d] font-bold;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 bg-[#1a365d] text-white font-semibold rounded shadow-md hover:bg-[#2a4365] hover:shadow-lg transition-all duration-300;
  }
  
  .btn-accent {
    @apply inline-flex items-center justify-center px-6 py-3 bg-[#fbbf24] text-[#1a365d] font-bold rounded shadow-md hover:bg-[#f59e0b] hover:shadow-lg transition-all duration-300;
  }
}

.text-primary { color: #1a365d; }
.bg-primary { background-color: #1a365d; }
.text-accent { color: #fbbf24; }
.bg-accent { background-color: #fbbf24; }

.nav-scrolled {
  @apply bg-white shadow-md py-2;
}

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

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

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

.feature-card:hover .feature-icon-container {
  background-color: #1a365d;
  color: white;
}