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

@layer components{
    .animate-in-show{
        animation: grow linear forwards;
        animation-timeline: view();
        animation-range:entry 100px;
        opacity: 0;transform: translate(-50%);
    }

    @keyframes grow {
        to {
          opacity: 1;transform: translate(0);
        }
    }

    .input_group {
        @apply flex flex-col justify-normal items-start w-full
    }

    .input_group input {
        @apply border-b-2 pb-1 w-full;
    }

    .input_group input::placeholder , textarea::placeholder{
        @apply text-sm text-gray-400
    }

    .input_group input:focus, textarea:focus{
        @apply border-principal outline-0
    }

    .btn{
        @apply hover:transform basis-2/4 hover:scale-105 hover:transition-all font-semibold text-lg rounded-full bg-transparent text-white p-8 py-2 flex justify-center flex-nowrap items-center gap-4;
    }

    .back-third{
        @apply bg-third text-black
    }

    .footer-section{
        @apply bg-principal py-20 px-4 ;
    }

    .card-bg{
        @apply bg-gradient-to-r bg-white hover:shadow-xl;
    }
}