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

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

@layer base {
  body {
    @apply font-['Poppins'] text-gray-400 bg-[#111111] antialiased selection:bg-[#ccff00] selection:text-black;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-['Oswald'] text-white uppercase tracking-wide;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center px-8 py-4 bg-[#ccff00] text-black font-['Oswald'] text-lg uppercase tracking-wider hover:bg-white transition-all duration-300;
  }
  
  .btn-outline {
    @apply inline-flex items-center justify-center px-8 py-4 bg-transparent border-2 border-[#ccff00] text-[#ccff00] font-['Oswald'] text-lg uppercase tracking-wider hover:bg-[#ccff00] hover:text-black transition-all duration-300;
  }
}

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

.nav-scrolled {
  @apply bg-[#111111]/95 backdrop-blur-md border-b border-gray-800;
}

.clip-path-slant {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
}

.class-card {
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

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

.class-card:hover img {
  transform: scale(1.1);
}

.class-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(17,17,17,1) 0%, rgba(17,17,17,0.4) 50%, rgba(17,17,17,0) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  transition: all 0.4s ease;
}

.class-card:hover .class-card-overlay {
  background: linear-gradient(to top, rgba(204,255,0,0.9) 0%, rgba(17,17,17,0.6) 60%, rgba(17,17,17,0) 100%);
}

.class-card:hover h3 {
  color: black;
}

.class-card:hover p {
  color: #111;
}