@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,500;0,9..40,700;1,9..40,400&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-blackColor;
  }
  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;
}