:root {
    --oc-white: #fff;
    --oc-black: #000;
    --oc-gray-0: #f8f9fa;
    --oc-gray-1: #f1f3f5;
    --SizeSpacing4: 12px;
    --SizeSpacing5: 16px;
    --SizeSpacing6: 20px;
    --SizeSpacing7: 24px;
    --SizeSpacing8: 32px;
    --SizeSpacing9: 40px;
    --font-family-sans-serif: 'Poppins', sans-serif;
    --oc-orange-0: #fff4e6;
    --oc-orange-1: #ffe8cc;
    --oc-orange-2: #ffd8a8;
    --oc-orange-3: #ffc078;
    --oc-orange-4: #ffa94d;
    --oc-orange-5: #ff922b;
    --oc-orange-6: #fd7e14;
    --oc-orange-7: #f76707;
    --oc-orange-8: #e8590c;
    --oc-orange-9: #d9480f;
      /* font-sizes */
  --font-size-base: 1em;
  --font-size-6xs: calc(var(--font-size-base) * 0.25); /* 4px */
  --font-size-5xs: calc(var(--font-size-base) * 0.3125); /* 5px */
  --font-size-4xs: calc(var(--font-size-base) * 0.375); /* 6px */
  --font-size-3xs: calc(var(--font-size-base) * 0.5); /* 8px */
  --font-size-2xs: calc(var(--font-size-base) * 0.625); /* 10px */
  --font-size-xs: calc(var(--font-size-base) * 0.75); /* 12px */
  --font-size-sm: calc(var(--font-size-base) * 0.875); /* 14px */
  --font-size-md: var(--font-size-base); /* 16px */
  --font-size-lg: calc(var(--font-size-base) * 1.25); /* 20px */
  --font-size-xl: calc(var(--font-size-base) * 1.5); /* 24px */
  --font-size-2xl: calc(var(--font-size-base) * 2); /* 32px */
  --font-size-3xl: calc(var(--font-size-base) * 2.5); /* 40px */
  --font-size-4xl: calc(var(--font-size-base) * 3); /* 48px */
  --font-size-5xl: calc(var(--font-size-base) * 3.75); /* 60px */
  --font-size-6xl: calc(var(--font-size-base) * 4.5); /* 72px */
}
:root {
    /* viewports */
    --viewport-tablet: 48rem; /* 768px */
    --viewport-laptop: 72rem; /* 1152px */
    --viewport-desktop: 96rem; /* 1536px */
      /* color variables */
  --rgb-gray-50: 240 241 243; /* #f0f1f3 - fa-lt-gravy  */
  --rgb-gray-100: 224 226 232; /* #e0e2e8                */
  --rgb-gray-200: 195 198 209; /* #c3c6d1 - fa-gravy     */
  --rgb-gray-300: 165 171 187; /* #a5abbb                */
  --rgb-gray-400: 165 171 187; /* #8991a5                */
  --rgb-gray-500: 97 109 138; /* #616D8A - fa-md-gravy  */
  --rgb-gray-600: 81 94 123; /* #515e7b - fa-dk-gravy  */
  --rgb-gray-700: 54 71 103; /* #364767                */
  --rgb-gray-800: 24 49 83; /* #183153 - fa-navy      */
  --rgb-gray-900: 0 28 64; /* #001c40 - fa-dk-navy   */
    /* colors */
    --white: var(--oc-white);
    --black: var(--oc-black);
      /* colors: orange */
  --orange0: var(--oc-orange-0);
  --orange1: var(--oc-orange-1);
  --orange2: var(--oc-orange-2);
  --orange3: var(--oc-orange-3);
  --orange4: var(--oc-orange-4);
  --orange5: var(--oc-orange-5);
  --orange6: var(--oc-orange-6);
  --orange7: var(--oc-orange-7);
  --orange8: var(--oc-orange-8);
  --orange9: var(--oc-orange-9);
}
:root {
      /* viewport scaling */
  --font-size-root: 14px;
  --font-size-root-tablet: 16px;

    /* sizes */
    --size-base: 16px;
    --size-xs: 12px; /* 12px */
    --size-sm: 14px; /* 14px */
    --size-md: 16px; /* 16px */
    --size-lg: 18px; /* 18px */
    --size-xl: 20px; /* 20px */
    --size-2xl: 24; /* 24px */
    --size-3xl: 30px; /* 30px */
    --size-4xl: 32px/* 32px */
    --size-5xl: 40px; /* 40px */
    --size-6xl: 48px; /* 48px */
    --size-7xl: 56px; /* 56px */
    --size-8xl: 64px; /* 64px */
    --size-9xl: 72px/* 72px */

    /* font-sizes */
  --font-size-base: 14px;
  --font-size-6xs: 4px; /* 4px */
  --font-size-5xs: 5px; /* 5px */
  --font-size-4xs: 6px; /* 6px */
  --font-size-3xs: 8px; /* 8px */
  --font-size-2xs: 10px; /* 10px */
  --font-size-xs: 12px; /* 12px */
  --font-size-sm: 14px; /* 14px */
  --font-size-md: 16px; /* 16px */
  --font-size-lg: 20px; /* 20px */
  --font-size-xl: 24px; /* 24px */
  --font-size-2xl: 32px; /* 32px */
  --font-size-3xl: 40px; /* 40px */
  --font-size-4xl: 48px; /* 48px */
  --font-size-5xl: 60px; /* 60px */
  --font-size-6xl: 72px; /* 72px */

  /* size resets */
  --size-reset-base: 1rem;
  --size-reset-6xs: calc(var(--size-reset-base) * 0.25); /* 4px */
  --size-reset-5xs: calc(var(--size-reset-base) * 0.3125); /* 5px */
  --size-reset-4xs: calc(var(--size-reset-base) * 0.375); /* 6px */
  --size-reset-3xs: calc(var(--size-reset-base) * 0.5); /* 8px */
  --size-reset-2xs: calc(var(--size-reset-base) * 0.625); /* 10px */
  --size-reset-xs: calc(var(--size-reset-base) * 0.75); /* 12px */
  --size-reset-sm: calc(var(--size-reset-base) * 0.875); /* 14px */
  --size-reset-md: var(--size-reset-base); /* 16px */
  --size-reset-lg: calc(var(--size-reset-base) * 1.25); /* 20px */
  --size-reset-xl: calc(var(--size-reset-base) * 1.5); /* 24px */
  --size-reset-2xl: calc(var(--size-reset-base) * 2); /* 32px */
  --size-reset-3xl: calc(var(--size-reset-base) * 2.5); /* 40px */
  --size-reset-4xl: calc(var(--size-reset-base) * 3); /* 48px */
  --size-reset-5xl: calc(var(--size-reset-base) * 3.75); /* 60px */
  --size-reset-6xl: calc(var(--size-reset-base) * 4.5); /* 72px */

    /* headings */
    --headings-font-weight: var(--font-weight-semibold);
    --headings-font-family: var(--font-family-base);
    --headings-margin-top: 2em;
    --h1-font-size: var(--font-size-3xl); /* 40px */
    --h2-font-size: var(--font-size-2xl); /* 32px */
    --h3-font-size: var(--font-size-xl); /* 24px */
    --h4-font-size: var(--font-size-lg); /* 20px */
    --h5-font-size: var(--font-size-md); /* 16px */
    --h6-font-size: var(--font-size-xs); /* 12px */

    --h1-line-height: calc((40 + 6) / 40);
    --h2-line-height: calc((32 + 6) / 32);
    --h3-line-height: calc((24 + 6) / 24);
    --h4-line-height: calc((20 + 6) / 20);
    --h5-line-height: calc((16 + 6) / 16);
    --h6-line-height: calc((12 + 6) / 12);
    --h1-margin-bottom: calc(8em / 40);
    --h2-margin-bottom: calc(8em / 32);
    --h3-margin-bottom: calc(8em / 24);
    --h4-margin-bottom: calc(8em / 20);
    --h5-margin-bottom: calc(8em / 16);
    --h6-margin-bottom: calc(8em / 12);

      /* letter-spacing */
  --letter-spacing-0: 0;
  --letter-spacing-base: var(--letter-spacing-base);
  --letter-spacing-lg: 0.025em;
  --letter-spacing-xl: 0.05em;
  --letter-spacing-2xl: 0.1em;
  --letter-spacing-3xl: 0.25em;

    /* borders */
    --border-radius-none: 0;
    --border-radius-sm: 0.5em;
    --border-radius-md: 0.75em;
    --border-radius-lg: 1em;
    --border-radius-circle: 100%;
    --border-radius-pill: 9999px;
    --border-width-none: 0;
    --border-width-xs: 0.0625em;
    --border-width-sm: 0.125em;
    --border-width-md: 0.25em;
    --border-width-lg: 0.5em;
    --border-style: solid;
    --border-width: var(--border-width-sm);
    --border-color: var(--fa-gravy);
    --border-radius: var(--border-radius-md);
  /* shadows */
  --with-shadow-box-shadow-color: var(--border-color);
  --with-shadow-box-shadow-width: 0.25em;
  --with-shadow-box-shadow: 0 var(--with-shadow-box-shadow-width) 0 var(--with-shadow-box-shadow-color);

  /* line-length */
  --line-length-2xs: 15ch;
  --line-length-xs: 30ch;
  --line-length-sm: 45ch;
  --line-length-md: 66ch;
  --line-length-lg: 77ch;
  --line-length-xl: 90ch;
  
   /* links */
   --link-display: inline;
   --link-transition-duration: var(--timing-2xfast);
   --link-decoration-line: underline;
   --link-decoration-style: dotted;
   --link-decoration-color: currentcolor;
   --link-decoration-thickness: 0.0625em;
   --link-color: var(--fa-dk-blue);
   --link-font-weight: var(--font-weight-base);
   --link-hover-color: var(--fa-blue);
   --link-active-color: var(--fa-navy);
   --link-hover-decoration-line: underline;
   --link-hover-decoration-style: solid;
   --link-hover-decoration-color: currentcolor;
   --link-disabled-color: inherit;
   --link-disabled-opacity: var(--button-disabled-opacity);

    /* spacing */
  --spacing-base: 1em; /* ~16px */
  --spacing-0: 0;
  --spacing-1: calc(var(--spacing-base) * 1 / 16); /* 1px */
  --spacing-1px: 1px;
  --spacing-7xs: calc(var(--spacing-base) * 1 / 16); /* 1px */
  --spacing-6xs: calc(var(--spacing-base) * 2 / 16); /* 2px */
  --spacing-5xs: calc(var(--spacing-base) * 3 / 16); /* 3px */
  --spacing-4xs: calc(var(--spacing-base) * 4 / 16); /* 4px */
  --spacing-3xs: calc(var(--spacing-base) * 6 / 16); /* 6px */
  --spacing-2xs: calc(var(--spacing-base) * 8 / 16); /* 8px */
  --spacing-xs: calc(var(--spacing-base) * 10 / 16); /* 10px */
  --spacing-sm: calc(var(--spacing-base) * 12 / 16); /* 12px */
  --spacing-md: calc(var(--spacing-base) * 1); /* 16px */
  --spacing-lg: calc(var(--spacing-base) * 1.25); /* 20px */
  --spacing-xl: calc(var(--spacing-base) * 1.5); /* 24px */
  --spacing-2xl: calc(var(--spacing-base) * 2); /* 32px */
  --spacing-3xl: calc(var(--spacing-base) * 2.5); /* 40px */
  --spacing-4xl: calc(var(--spacing-base) * 3); /* 48px */
  --spacing-5xl: calc(var(--spacing-base) * 4); /* 64px */
  --spacing-6xl: calc(var(--spacing-base) * 5); /* 80px */
  --spacing-7xl: calc(var(--spacing-base) * 6); /* 96px */
  --spacing-8xl: calc(var(--spacing-base) * 8); /* 128px */
  --spacing-9xl: calc(var(--spacing-base) * 10); /* 160px */
  --spacing-10xl: calc(var(--spacing-base) * 12); /* 192px */
  --spacing-11xl: calc(var(--spacing-base) * 16); /* 256px */
  --spacing-12xl: calc(var(--spacing-base) * 20); /* 320px */

    /* font-weights */
    --font-weight-light: 300;
    --font-weight-base: normal;
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
}
.row.tablet\:flush > :is(div, main, aside, header, footer, nav, section, article, ol, ul, li, p, blockquote) {
    --padding-left: 0;
    --padding-right: 0;
  }

.text-sans-serif {
    font-family: 'Poppins', sans-serif;
    font-family: var(--font-family-sans-serif);
  }
.font-weight-semibold
{
    font-weight: var(--font-weight-semibold);
}
/* stylelint-disable custom-property-pattern */
/* sizes */

.size-6xs {
    font-size: var(--size-6xs); /* 4px */
  }
.size-5xs {
    font-size: var(--size-5xs); /* 5px */
  }
.size-4xs {
    font-size: var(--size-4xs);/* 6px */
  }
.size-3xs {
    font-size: var(--size-3xs); /* 8px */
  }
.size-2xs { 
    font-size: var(--size-2xs);/* 10px */
  }
.size-xs {
    font-size: var(--size-xs); /* 12px */
  }
.size-sm {
    font-size: var(--size-sm); /* 14px */
  }
.size-md {
    font-size: var(--size-md); /* 16px */
  }
.size-lg {
    font-size: var(--size-lg); /* 20px */
  }
.size-xl {
    font-size: var(--size-xl); /* 24px */
  }
.size-2xl {
    font-size: var(--size-2xl); /* 32px */
  }
.size-3xl {
    font-size: var(--size-3xl); /* 40px */
  }
.size-4xl {
    font-size: var(--size-4xl); /* 48px */
  }
.size-5xl {
    font-size: var(--size-5xl);  /* 60px */
  }
.size-6xl {
    font-size: var(--size-6xl); /* 72px */
  }
  
@media (min-width: 768px) {
    .tablet\:size-6xs {
      font-size: var(--size-6xs);
    }
    .tablet\:size-5xs {
      font-size: var(--size-5xs);
    }
    .tablet\:size-4xs {
      font-size: var(--size-4xs);
    }
    .tablet\:size-3xs {
      font-size: var(--size-3xs);
    }
    .tablet\:size-2xs {
      font-size: var(--size-2xs);
    }
    .tablet\:size-xs {
      font-size: var(--size-xs);
    }
    .tablet\:size-sm {
      font-size: var(--size-sm);
    }
    .tablet\:size-md {
      font-size: var(--size-md);
    }
    .tablet\:size-lg {
      font-size: var(--size-lg);
    }
    .tablet\:size-xl {
      font-size: var(--size-xl);
    }
    .tablet\:size-2xl {
      font-size: var(--size-2xl);
    }
    .tablet\:size-3xl {
      font-size: var(--size-3xl);
    }
    .tablet\:size-4xl {
      font-size: var(--size-4xl);
    }
    .tablet\:size-5xl {
      font-size: var(--size-5xl);
    }
    .tablet\:size-6xl {
      font-size: var(--size-6xl);
    }
}
@media (min-width: 1152px) {
    .laptop\:size-6xs {
      font-size: var(--size-6xs);
    }
    .laptop\:size-5xs {
      font-size: var(--size-5xs);
    }
    .laptop\:size-4xs {
      font-size: var(--size-4xs);
    }
    .laptop\:size-3xs {
      font-size: var(--size-3xs);
    }
    .laptop\:size-2xs {
      font-size: var(--size-2xs);
    }
    .laptop\:size-xs {
      font-size: var(--size-xs);
    }
    .laptop\:size-sm {
      font-size: var(--size-sm);
    }
    .laptop\:size-md {
      font-size: var(--size-md);
    }
    .laptop\:size-lg {
      font-size: var(--size-lg);
    }
    .laptop\:size-xl {
      font-size: var(--size-xl);
    }
    .laptop\:size-2xl {
      font-size: var(--size-2xl);
    }
    .laptop\:size-3xl {
      font-size: var(--size-3xl);
    }
    .laptop\:size-4xl {
      font-size: var(--size-4xl);
    }
    .laptop\:size-5xl {
      font-size: var(--size-5xl);
    }
    .laptop\:size-6xl {
      font-size: var(--size-6xl);
    }
}
@media (min-width: 1536px) {
    .desktop\:size-6xs {
      font-size: calc(1em * 0.25);
      font-size: var(--size-6xs);
    }
    .desktop\:size-5xs {
      font-size: calc(1em * 0.3125);
      font-size: var(--size-5xs);
    }
    .desktop\:size-4xs {
      font-size: calc(1em * 0.375);
      font-size: var(--size-4xs);
    }
    .desktop\:size-3xs {
      font-size: calc(1em * 0.5);
      font-size: var(--size-3xs);
    }
    .desktop\:size-2xs {
      font-size: calc(1em * 0.625);
      font-size: var(--size-2xs);
    }
    .desktop\:size-xs {
      font-size: calc(1em * 0.75);
      font-size: var(--size-xs);
    }
    .desktop\:size-sm {
      font-size: calc(1em * 0.875);
      font-size: var(--size-sm);
    }
    .desktop\:size-md {
      font-size: 1em;
      font-size: var(--size-md);
    }
    .desktop\:size-lg {
      font-size: calc(1em * 1.25);
      font-size: var(--size-lg);
    }
    .desktop\:size-xl {
      font-size: calc(1em * 1.5);
      font-size: var(--size-xl);
    }
    .desktop\:size-2xl {
      font-size: calc(1em * 2);
      font-size: var(--size-2xl);
    }
    .desktop\:size-3xl {
      font-size: calc(1em * 2.5);
      font-size: var(--size-3xl);
    }
    .desktop\:size-4xl {
      font-size: calc(1em * 3);
      font-size: var(--size-4xl);
    }
    .desktop\:size-5xl {
      font-size: calc(1em * 3.75);
      font-size: var(--size-5xl);
    }
    .desktop\:size-6xl {
      font-size: calc(1em * 4.5);
      font-size: var(--size-6xl);
    }
}