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

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

@layer base {
  h1 {
    @apply text-4xl font-extrabold leading-none tracking-tight mb-4 md:text-5xl xl:text-6xl;
  }
  h2 {
    @apply text-lg font-bold lg:text-xl  mb-2 scroll-mt-28;
  }
  h3 {
    @apply text-xl font-bold  text-red-primary xl:text-[32px] scroll-mt-28;
  }
  h4 {
    @apply text-sm font-bold text-blackText-300 xl:text-base  scroll-mt-28;
  }
  h5 {
    @apply text-base md:text-lg lg:text-2xl font-medium mb-2 scroll-mt-28;
  }
  h6 {
    @apply text-sm md:text-base lg:text-lg font-medium mb-2 scroll-mt-28;
  }

  p {
    @apply font-sans;
  }

  svg {
    display: initial;
  }

  input,
  optgroup,
  select,
  textarea {
    @apply text-black;
  }
}

@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  body.disabled {
    @apply overflow-hidden;
  }
}