@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap');

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

@layer base {
  body {
    @apply font-['Montserrat'] text-gray-600 bg-gray-50 antialiased selection:bg-[#0E2E50] selection:text-white;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-['Lora'] text-[#0E2E50] font-semibold;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center px-8 py-3.5 bg-[#0E2E50] text-white font-medium text-sm hover:bg-[#1a4470] transition-colors duration-300;
  }
  
  .btn-outline {
    @apply inline-flex items-center justify-center px-8 py-3.5 border border-[#0E2E50] text-[#0E2E50] font-medium text-sm hover:bg-[#0E2E50] hover:text-white transition-colors duration-300;
  }
}

.text-primary { color: #0E2E50; }
.bg-primary { background-color: #0E2E50; }

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

.property-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(14, 46, 80, 0.1);
}

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

.hero-overlay {
  background: linear-gradient(rgba(14,46,80,0.8), rgba(14,46,80,0.4));
}

.search-box {
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}