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

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

@layer base {
  body {
    @apply font-['Open_Sans'] text-gray-500 bg-white antialiased selection:bg-[#FF5E14] selection:text-white;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-['Oswald'] text-gray-900 uppercase;
  }
}

@layer components {
  .btn-accent {
    @apply inline-flex items-center justify-center px-8 py-4 bg-[#FF5E14] text-white text-sm font-semibold tracking-widest uppercase hover:bg-gray-900 transition-all duration-300;
  }
  
  .btn-dark {
    @apply inline-flex items-center justify-center px-8 py-4 bg-gray-900 text-white text-sm font-semibold tracking-widest uppercase hover:bg-[#FF5E14] transition-all duration-300;
  }
}

.text-accent { color: #FF5E14; }
.bg-accent { background-color: #FF5E14; }

.nav-scrolled {
  @apply bg-white shadow-lg py-4 border-b border-gray-100;
}

.hero-overlay {
  background: linear-gradient(to right, rgba(17, 24, 39, 0.9) 0%, rgba(17, 24, 39, 0.4) 100%);
}

.project-card {
  position: relative;
  overflow: hidden;
}

.project-card img {
  transition: transform 0.6s ease;
}

.project-card:hover img {
  transform: scale(1.05);
}

.project-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(17, 24, 39, 0.85);
  opacity: 0;
  transition: opacity 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.project-card:hover .project-overlay {
  opacity: 1;
}

.project-overlay h3 {
  transform: translateY(20px);
  transition: transform 0.4s ease;
}

.project-overlay p {
  transform: translateY(20px);
  transition: transform 0.4s ease;
  transition-delay: 0.1s;
}

.project-card:hover .project-overlay h3,
.project-card:hover .project-overlay p {
  transform: translateY(0);
}