@import 'tailwindcss';

@theme {
  --color-background: #fff;
  --color-foreground: #f4f4f2;
  --color-text-primary: #2c2926;
  --color-text-secondary: #959595;
  --font-sans: var(--font-montserrat);
}

body {
  font-family: var(--font-sans);
}

@utility show-on-mobile {
  @apply lg:hidden;
}

@utility show-on-desktop {
  @apply max-lg:hidden;
}

@utility malek-containter {
  @apply mx-auto max-w-screen-2xl;
}

@utility title-h1 {
  @apply text-3xl md:text-[40px] xl:text-6xl;
}

@utility title-h2 {
  @apply text-xl md:text-4xl xl:text-5xl;
}
@utility title-h3 {
  @apply text-base md:text-2xl xl:text-3xl;
}

button {
  cursor: pointer;
}