@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-purple-accent: #7B2D8E;
  --color-purple-dark: #2D1B4E;
  --color-gold: #F5D547;
  --font-poppins: 'Poppins', sans-serif;
  --font-script: 'Tangerine', cursive;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }
}

@layer components {
  .service-card {
    @apply relative overflow-hidden rounded-lg shadow-lg transition-transform duration-300 hover:scale-105;
  }

  .service-card-overlay {
    @apply absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent;
  }

  .service-card-title {
    @apply absolute bottom-0 left-0 right-0 p-4 text-white font-semibold text-lg;
  }
}