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

@layer components {
  .btn {
    @apply w-full
       sm:w-fit
        px-12
         py-4
          text-center
           text-btn uppercase font-semibold rounded-xl border-2 border-transparent cursor-pointer transition-all hover:transition-all;
  }

  .btn_primary {
    @apply border-none bg-gradient-to-r from-dg-secondary to-dg-primary-900 transition-all hover:bg-gradient-to-r hover:to-dg-secondary hover:from-dg-primary-900 hover:transition-all text-white;
  }

  .btn_secondary {
    @apply border-dg-primary-1000 text-dg-primary-1000 hover:border-dg-primary-1200 hover:text-white transition-all hover:transition-all;
  }

  
  .btn-secondary {
    @apply px-32p py-20p sm:px-64p  text-center
    text-btn uppercase font-semibold rounded-16 cursor-pointer border-2 border-dg-primary-400 transition-all hover:transition-all text-dg-primary-900;
  }
  .contact-us-link {
    @apply px-16p py-12p rounded-32 cursor-pointer text-p font-medium font-secondary  text-dg-primary-900 bg-dg-primary-400
  }

  //PrimaryButton
  .btn-primary {
    @apply px-32p py-20p sm:px-64p  text-center
    text-btn uppercase font-semibold rounded-16  border-transparent cursor-pointer bg-gradient-to-r from-dg-secondary to-dg-primary-900 transition-all hover:bg-gradient-to-r hover:to-dg-secondary hover:from-dg-primary-900 hover:transition-all text-white;
  }
}