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

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

@layer base {
  body {
    @apply font-['Roboto'] text-[#444] bg-[#f8f9fa] antialiased selection:bg-[#ff6b00] selection:text-white;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-['Exo_2'] text-[#1a202c];
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 bg-[#0056b3] text-white font-bold uppercase tracking-wider text-sm rounded shadow hover:bg-[#003d82] hover:shadow-lg transition-all duration-300;
  }
  
  .btn-accent {
    @apply inline-flex items-center justify-center px-6 py-3 bg-[#ff6b00] text-white font-bold uppercase tracking-wider text-sm rounded shadow hover:bg-[#cc5500] hover:shadow-lg transition-all duration-300;
  }
}

.text-primary { color: #0056b3; }
.bg-primary { background-color: #0056b3; }
.text-accent { color: #ff6b00; }
.bg-accent { background-color: #ff6b00; }

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

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

.service-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  border-color: #0056b3;
}

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

.service-box:hover .service-icon {
  background-color: #0056b3;
  color: white;
}