@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;0,800;1,400;1,600&display=swap');*/

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


@layer components {

  .deco-heading {
    @apply font-extrabold text-center text-primary-500 text-lg md:text-xl lg:text-2xl
  }

  .heading {
    @apply font-extrabold text-center text-5xl md:text-6xl lg:text-7xl text-white text-center
  }

  .heading-2 {
    @apply font-bold text-center text-3xl md:text-4xl text-white text-center
  }

  .sub-heading {
    @apply font-medium text-center text-base md:text-lg text-center text-gray-400
  }

  .input {
    @apply appearance-none block w-full py-3 px-4 leading-tight bg-card_background text-gray-100 focus:bg-card_background_accent border font-sans border-gray-800 focus:border-primary-500 rounded focus:outline-none
  }

  .button-1 {
    @apply rounded px-8 py-3 bg-primary-500 text-white font-extrabold text-lg text-center transition transform hover:scale-105 hover:bg-primary-600 duration-100 cursor-pointer
  }

  .button-2 {
    @apply rounded px-8 py-2 bg-primary-500 text-white font-extrabold text-lg text-center
  }

  .section-gap {
    @apply mt-48 px-12 md:px-24 lg:mx-24
  }

  /*  INPUT  */
  .formulate-input-class {
    @apply rounded border border-gray-700 text-white text-sm box-border w-full px-3 py-2 w-full bg-card_background focus:border-primary-500 outline-none leading-none
  }

  .formulate-label-class {
    @apply text-white text-sm font-bold mb-4
  }

  .formulate-placeholder-class {
    @apply text-sm mb-4 text-gray-700
  }

  .formulate-error-class {
    @apply text-xs mt-0.5 text-red-600
  }

  .formulate-help-class {
    @apply text-xs mt-0.5 text-gray-500
  }

}
