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

@layer base {
    section{
        @apply max-w-full w-[1440px] px-5 mx-auto 
    }
}

@layer components {
    .container {
        @apply max-w-full w-[1440px] px-5 mx-auto my-16
    }

    .btn {
        @apply bg-primaryColor py-[15px] px-[35px] rounded-[50px] text-white font-[600] mt-[38px] 
    }

    .heading {
        @apply text-[44px] leading-[54px] font-[700] text-headingColor
    }

    .text__para {
        @apply text-[18px] leading-[30px] font-[400] text-textColor mt-[18px]  
    }

    .header {
        @apply bg-[url('./assets/images/mask.png')] bg-no-repeat bg-center bg-cover w-full h-[100px] leading-[100px]
    }

    .hero__section {
        @apply bg-[url('./assets/images/hero-bg.png')] bg-no-repeat bg-center bg-cover h-auto pb-16
    }

    .form__label { 
        @apply text-textColor font-semibold text-base leading-7 mb-2
    }

    .form__input {
        @apply w-full px-4 py-3 border border-solid border-[#0066ff61] focus:outline-none
        focus:border-primaryColor text-base leading-7 text-headingColor placeholder:text-textColor
        cursor-pointer rounded-md
    }
}

@media only screen and (max-width: 1024px) {
    .container {
        @apply w-full my-10
    }

    section {
        @apply py-[35px] 
    }
}

@media only screen and (max-width: 768px) {
    .heading {
        @apply text-[26px] leading-[36px]
    }

    .text__para {
        @apply text-[16px] leading-7 mt-3
    }
}