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

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

@layer base {
  body {
    @apply font-['Lato'] text-[#4a4a4a] bg-[#fdfdfd] antialiased selection:bg-[#B5915F] selection:text-white;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-['Playfair_Display'] text-[#1A2639];
  }
}

@layer components {
  .btn-gold {
    @apply inline-flex items-center justify-center px-8 py-4 bg-[#B5915F] text-white font-medium uppercase tracking-widest text-xs hover:bg-[#96764B] transition-all duration-300;
  }
  
  .btn-outline {
    @apply inline-flex items-center justify-center px-8 py-4 border border-[#1A2639] text-[#1A2639] font-medium uppercase tracking-widest text-xs hover:bg-[#1A2639] hover:text-white transition-all duration-300;
  }
}

.bg-navy {
  background-color: #1A2639;
}

.text-navy {
  color: #1A2639;
}

.text-gold {
  color: #B5915F;
}

.border-gold {
  border-color: #B5915F;
}

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

.hero-overlay {
  background: linear-gradient(to right, rgba(26,38,57,0.9) 0%, rgba(26,38,57,0.4) 100%);
}

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

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

.service-card:hover .service-icon {
  background-color: #B5915F;
  color: white;
}