website-new/frontend/src/styles/text.css

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

@layer components {
  .heading {
    @apply font-secondary font-bold text-dark-gray dark:text-white text-n-head-mobile md:text-n-head;
  }

  .subheading {
    @apply tracking-widest text-subhead font-secondary uppercase text-dg-secondary font-semibold;
  }

  .h3-heading {
    @apply font-secondary text-title font-semibold capitalize;
  }

  .title {
    @apply border-dg-primary-1000 capitalize text-dg-primary-1000 hover:border-dg-primary-1200 hover:text-white transition-all hover:transition-all;
  }
  .paragraph {
    @apply text-p-mobile md:text-p text-dark-gray dark:text-white;
  }

  .display-number {
    @apply text-display-numb font-secondary font-bold  text-dg-primary-1000;
  }
  .number-title {
    @apply text-title-24 font-secondary font-normal text-dark-gray;
  }

  .title-card {
    @apply text-title font-semibold;
  }

  .subtitle-card-italic {
    @apply text-p-italic italic font-light text-dg-primary-900;
  }
  .subtitle-card-italic-gray {
    @apply text-p-italic italic font-light;
  }

  .title-italic {
    @apply text-italic-title text-dg-primary-400 font-semibold italic my-8p capitalize;
  }

  .n-heading {
    @apply font-secondary font-bold text-dark-gray dark:text-white text-n-head-mobile md:text-n-head;
  }
  .n-subheading{
    @apply text-n-subhead-mobile md:text-n-subhead font-secondary uppercase text-dg-secondary font-semibold;
  }
  .n-h3-heading{
    @apply text-n-h3-heading-mobile md:text-n-h3-heading font-secondary text-dg-primary-900 font-bold;
  }
  .n-paragraph {
    @apply text-n-paragraph-mobile md:text-n-paragraph font-secondary text-dark-gray font-normal
  }
  .n-paragraph-title {
    @apply text-n-paragraph-title-mobile md:text-n-paragraph-title font-secondary text-dark-gray font-semibold
  }
}

.no-wrap {
  flex-wrap: nowrap;
}

.title-colored {
  background: linear-gradient(270deg, #90278f 0%, #8468bf 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.italic {
  font-style: italic;
}