:root{
  /* font family */
  --ff-body: "Roboto", sans-serif;
  --fw-body: 400;

  --fs-body: 0.875rem;
  --fs-sm: 0.75rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;

  --fs-h6: 0.875rem;
  --fs-h5: 1rem;
  --fs-h4: 1.5rem;
  --fs-h3: 2rem;
  --fs-h2: 3rem;
  --fs-h1: 3.75rem;
  --fs-3xl: 2.5rem;
  /* Theme template color setting */
  --clr-body: #000000;

  --clr-primary: #ff0c00;
  --clr-primary-400: rgba(113, 5, 0, 0.43);

  --clr-black: #000000;
  --clr-black-500: rgba(0,0,0, 0.5);
  --clr-black-600: rgba(0,0,0, 0.6);
  --clr-black-700: rgba(0,0,0, 0.7);
  --clr-black-800: rgba(0,0,0, 0.8);


  --clr-white: #ffffff;
  --clr-white-400: rgba(217, 217, 217, 0.4);
  --clr-white-700: rgba(255, 255, 255, 0.69);

  --clr-gray: #667085;
  --clr-gray-300: #d0d5dd;
  --clr-gray-500: #f3f3f3;
  --clr-gray-600: #eaecf0;
  --clr-gray-700: #f9fafb;
  --clr-gray-800: #999fb5;
  --clr-gray-900: #e9ebf1;

  --clr-gradient-bg: #f8f3ea;
  --clr-gradient-mental: #d2ecff;

  --clr-border: rgba(217, 217, 217, 0.4);

  --hero-gradient: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.1) 100%
  );
  --testimonial-bg: linear-gradient(180deg, #f3f3f3 0%, #f9fafb 36.98%);
  --clr-join-vox-bg: linear-gradient(
    0deg,
    rgba(164, 14, 0, 0.4) 0%,
    rgba(164, 14, 0, 0.4) 100%
  ),
    linear-gradient(180deg, #ff0c00 9.43%, #ce004c 182.32%);
  --shadow-dropdown: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
  0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  --shadow-card: 0 14px 16px rgba(14, 15, 59, 0.12);
  --shadow-join-vox: 0px 264px 74px 0px rgba(163, 9, 10, 0),
  0px 169px 68px 0px rgba(163, 9, 10, 0.02),
  0px 95px 57px 0px rgba(163, 9, 10, 0.08),
  0px 42px 42px 0px rgba(163, 9, 10, 0.13),
  0px 11px 23px 0px rgba(163, 9, 10, 0.15);

}