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

@layer components {
  .underline-effect {
    @apply relative heading-text p-0;
  }

  .underline-effect::after {
    @apply content-[''] absolute w-full h-2 left-0 bottom-[-4px] bg-cyan-400 origin-bottom-right hover:origin-bottom-left scale-x-0 hover:scale-x-100 transition-transform duration-300;
  }

  .heading-text {
    @apply bg-gradient-to-br from-[#FFFFFF] to-[#AAAAAA] bg-clip-text p-4 font-radiofont text-6xl font-extrabold text-transparent;
  }
}

.container {
  max-width: 1420px !important;
}