@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Nunito:wght@400;500;600;700&family=Oswald:wght@400;500;600;700&display=swap');

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

@layer base {
    html {
        @apply scroll-smooth;
    }
    
    body {
        @apply text-whiteColor bg-primaryColor tracking-wider font-dmsans 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__title,
    .card__title,
    .section__title {
        @apply text-4xl font-oswald font-bold uppercase lg:text-6xl;
    }

    .section__title {
        @apply text-3xl;
    }

    .card__title {
        @apply text-xl;
    }

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

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

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