input.css

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Oswald:wght@200..700&display=swap");

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

@layer base {
    html {
        @apply scroll-smooth;
    }
    body {
        @apply text-whiteColor bg-primaryColor tracking-wider dark:bg-darkColor;
    }

    section {
        @apply pt-16 pb-4 md:pt-20;
    }
}

@layer components {
    .btn {
        @apply inline-block text-sm  py-3 px-8 capitalize text-center cursor-pointer rounded-md ease-linear duration-200;
    }

    .btn-primary {
        @apply text-blackColor bg-secondaryColor hover:opacity-75;
    }
}

@layer utilities {
    .home__tilte,
    .card__title,
    .section__title {
        @apply text-4xl font-oswald font-bold uppercase lg:text-6xl;
    }

    .separator {
        @apply w-28 h-[2px] bg-secondaryColor my-5;
    }

    .paragraph {
        @apply text-paragraphColor text-xs leading-5;
    }

    .section__title {
        @apply text-3xl;
    }

    .card__title {
        @apply text-xl;
    }
}

.tabs_wrap ul li:hover,
.tabs_wrap ul li.active {
    @apply bg-secondaryColor text-blackColor;
}