/* =============== VARIABLES ===============  */
@import url("https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700;800&family=Roboto:wght@400;500;700&display=swap");
:root {
  --clr-primary-100: #D4E7FF;
  --clr-primary-200: #007BFF;
  --clr-primary-300: #325783;
  --clr-primary-400: #1E3856;
  --secondary-100: #7545FF;
  --clr-neutral-100: #ffff;
  --clr-neutral-150: #F8FBFF;
  --clr-neutral-200: #727D89;
  --clr-neutral-300: #182330;
  --clr-neutral-400: #000;
  --ff-primary: 'Roboto', sans-serif;
  --fs-50: 1.4rem;
  --fs-100: 1.6rem;
  --fs-200: 2rem;
  --fs-300: 2.4rem;
  --fs-400: 2.8rem;
  --fs-500: 3.2rem;
  --fs-600: 3.8rem;
  --fs-650: 4.2rem;
  --fs-700: 5.6rem;
  --fs-750: 6rem;
  --fs-800: 6.4rem;
  --fs-850: 8rem;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-bolder: 800;
  --lh-400: 1.8;
  --radius-100: 0.5rem;
  --radius-200: 2rem;
  --radiud-300: 4.4rem;
  --radius-300: 8rem;
  --size-50: 1rem;
  --size-100: 1.6rem;
  --size-150: 1.8rem;
  --size-200: 2rem;
  --size-250: 2.5rem;
  --size-300: 3rem;
  --size-350: 3.5rem;
  --size-400: 4rem;
  --size-450: 4.7rem;
  --size-500: 5rem;
  --size-550: 5.4rem;
  --size-600: 6.2rem;
  --size-700: 7.2rem;
  --size-750: 8.4rem;
  --size-800: 10rem;
  --size-850: 12rem;
  --size-900: 14.4rem; }

/* box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box; }

/*reset font sizes of all tags*/
* {
  font-size: inherit;
  margin: 0;
  padding: 0; }

/* reset font size 1rem to 10px */
html {
  font-size: 62.5%; }

body,
html {
  height: 100%; }

/* remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0; }

/* remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
ol,
li {
  list-style: none;
  margin: 0;
  padding: 0; }

a {
  text-decoration: none; }

/* set core root defaults */
html:focus-within {
  scroll-behavior: smooth; }

/* set core body defaults */
body {
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  background-color: var(--clr-neutral-150); }
  body .cursor {
    width: 20px;
    height: 20px;
    background-color: #FFD600;
    border-radius: 50%;
    position: absolute;
    transition-duration: 50ms;
    transition-timing-function: ease-out;
    pointer-events: none;
    z-index: 99999; }

/* a elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto; }

/* make images easier to work with */
img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  display: block; }

/* avoid text overflows */
p,
span,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  font-size: inherit; }

/* remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important; } }
@media (max-width: 1024px) {
  .cursor {
    display: none; } }
body {
  font-size: var(--fs-100);
  font-family: var(--ff-primary);
  line-height: 1.8;
  font-weight: var(--fw-regular);
  color: var(--clr-neutral-200); }

.text-primary-100 {
  color: var(--clr-primary-100); }

.text-primary-200 {
  color: var(--clr-primary-200); }

.text-primary-300 {
  color: var(--clr-primary-300); }

.text-primary-400 {
  color: var(--clr-primary-400); }

.text-neutral-100 {
  color: var(--clr-neutral-100); }

.text-neutral-200 {
  color: var(--clr-neutral-200); }

.text-neutral-300 {
  color: var(--clr-neutral-300); }

.text-neutral-400 {
  color: var(--clr-neutral-400); }

.bg-primary-100 {
  background-color: var(--clr-primary-100); }

.bg-primary-200 {
  background-color: var(--clr-primary-200); }

.bg-primary-300 {
  background-color: var(--clr-primary-300); }

.bg-primary-400 {
  background-color: var(--clr-primary-400); }

.bg-secondary-100 {
  background-color: var(--secondary-100); }

.bg-neutral-100 {
  background-color: var(--clr-neutral-100); }

.bg-neutral-200 {
  background-color: var(--clr-neutral-200); }

.bg-neutral-300 {
  background-color: var(--clr-neutral-300); }

.radius-100 {
  border-radius: var(--radius-100); }

.radius-200 {
  border-radius: var(--radius-200); }

.radius-300 {
  border-radius: var(--radius-300); }

.radius-400 {
  border-radius: var(--radius-400); }

.fs--50 {
  font-size: var(--fs-50); }

.fs--100 {
  font-size: var(--fs-100); }

.fs--200 {
  font-size: var(--fs-200); }

.fs--300 {
  font-size: var(--fs-300); }

.fs--400 {
  font-size: var(--fs-400); }

.fs--500 {
  font-size: var(--fs-500); }

.fs--600 {
  font-size: var(--fs-600); }

.fs--650 {
  font-size: var(--fs-650); }

.fs--700 {
  font-size: var(--fs-700); }

.fs--750 {
  font-size: var(--fs-750); }

.fs--800 {
  font-size: var(--fs-800); }

.fs--850 {
  font-size: var(--fs-850); }

.fw-300 {
  font-weight: var(--fw-light); }

.fw-400 {
  font-weight: var(--fw-regular); }

.fw-500 {
  font-weight: var(--fw-medium); }

.fw-600 {
  font-weight: var(--fw-semibold); }

.fw-700 {
  font-weight: var(--fw-bold); }

.fw-800 {
  font-weight: var(--fw-bolder); }

.lh--100 {
  line-height: var(--lh-100); }

.mb--100,
.my--100 {
  margin-bottom: var(--size-100); }

.mt--100,
.my--100 {
  margin-top: var(--size-100); }

.ml--100,
.mx--100 {
  margin-left: var(--size-100); }

.mr--100,
.mx--100 {
  margin-right: var(--size-100); }

.mb--150,
.my--150 {
  margin-bottom: var(--size-150); }

.mt--150,
.my--150 {
  margin-top: var(--size-150); }

.ml--150,
.mx--150 {
  margin-left: var(--size-150); }

.mr--150,
.mx--150 {
  margin-right: var(--size-150); }

.mb--200,
.my--200 {
  margin-bottom: var(--size-200); }

.mt--200,
.my--200 {
  margin-top: var(--size-200); }

.ml--200,
.mx--200 {
  margin-left: var(--size-200); }

.mr--200,
.mx--200 {
  margin-right: var(--size-200); }

.mb--250,
.my--250 {
  margin-bottom: var(--size-250); }

.mt--250,
.my--250 {
  margin-top: var(--size-250); }

.ml--250,
.mx--250 {
  margin-left: var(--size-250); }

.mr--250,
.mx--250 {
  margin-right: var(--size-250); }

.mb--300,
.my--300 {
  margin-bottom: var(--size-300); }

.mt--300,
.my--300 {
  margin-top: var(--size-300); }

.ml--300,
.mx--300 {
  margin-left: var(--size-300); }

.mr--300,
.mx--300 {
  margin-right: var(--size-300); }

.mb--350,
.my--350 {
  margin-bottom: var(--size-350); }

.mt--350,
.my--350 {
  margin-top: var(--size-350); }

.ml--350,
.mx--350 {
  margin-left: var(--size-350); }

.mr--350,
.mx--350 {
  margin-right: var(--size-350); }

.mb--400,
.my--400 {
  margin-bottom: var(--size-400); }

.mt--400,
.my--400 {
  margin-top: var(--size-400); }

.ml--400,
.mx--400 {
  margin-left: var(--size-400); }

.mr--400,
.mx--400 {
  margin-right: var(--size-400); }

.mb--450,
.my--450 {
  margin-bottom: var(--size-450); }

.mt--450,
.my--450 {
  margin-top: var(--size-450); }

.ml--450,
.mx--450 {
  margin-left: var(--size-450); }

.mr--450,
.mx--450 {
  margin-right: var(--size-450); }

.mb--500,
.my--500 {
  margin-bottom: var(--size-500); }

.mt--500,
.my--500 {
  margin-top: var(--size-500); }

.ml--500,
.mx--500 {
  margin-left: var(--size-500); }

.mr--500,
.mx--500 {
  margin-right: var(--size-500); }

.mb--600,
.my--600 {
  margin-bottom: var(--size-600); }

.mt--600,
.my--600 {
  margin-top: var(--size-600); }

.ml--600,
.mx--600 {
  margin-left: var(--size-600); }

.mr--600,
.mx--600 {
  margin-right: var(--size-600); }

.mb--700,
.my--700 {
  margin-bottom: var(--size-700); }

.mt--700,
.my--700 {
  margin-top: var(--size-700); }

.ml--700,
.mx--700 {
  margin-left: var(--size-700); }

.mr--700,
.mx--700 {
  margin-right: var(--size-700); }

.mb--750,
.my--750 {
  margin-bottom: var(--size-750); }

.mt--750,
.my--750 {
  margin-top: var(--size-750); }

.ml--750,
.mx--750 {
  margin-left: var(--size-750); }

.mr--750,
.mx--750 {
  margin-right: var(--size-750); }

.mb--800,
.my--800 {
  margin-bottom: var(--size-800); }

.mt--800,
.my--800 {
  margin-top: var(--size-800); }

.ml--800,
.mx--800 {
  margin-left: var(--size-800); }

.mr--800,
.mx--800 {
  margin-right: var(--size-800); }

.mb--900,
.my--900 {
  margin-bottom: var(--size-900); }

.mt--900,
.my--900 {
  margin-top: var(--size-900); }

.ml--900,
.mx--900 {
  margin-left: var(--size-900); }

.mr--900,
.mx--900 {
  margin-right: var(--size-900); }

.pb--50,
.py--50 {
  padding-bottom: var(--size-50); }

.pt--50,
.py--50 {
  padding-top: var(--size-50); }

.pl--50,
.px--50 {
  padding-left: var(--size-50); }

.pr--50,
.px--50 {
  padding-right: var(--size-50); }

.pb--100,
.py--100 {
  padding-bottom: var(--size-100); }

.pt--100,
.py--100 {
  padding-top: var(--size-100); }

.pl--100,
.px--100 {
  padding-left: var(--size-100); }

.pr--100,
.px--100 {
  padding-right: var(--size-100); }

.pb--150,
.py--150 {
  padding-bottom: var(--size-150); }

.pt--150,
.py--150 {
  padding-top: var(--size-150); }

.pl--150,
.px--150 {
  padding-left: var(--size-150); }

.pr--150,
.px--150 {
  padding-right: var(--size-150); }

.pb--200,
.py--200 {
  padding-bottom: var(--size-200); }

.pt--200,
.py--200 {
  padding-top: var(--size-200); }

.pl--200,
.px--200 {
  padding-left: var(--size-200); }

.pr--200,
.px--200 {
  padding-right: var(--size-200); }

.pb--250,
.py--250 {
  padding-bottom: var(--size-250); }

.pt--250,
.py--250 {
  padding-top: var(--size-250); }

.pl--250,
.px--250 {
  padding-left: var(--size-250); }

.pr--250,
.px--250 {
  padding-right: var(--size-250); }

.pb--300,
.py--300 {
  padding-bottom: var(--size-300); }

.pt--300,
.py--300 {
  padding-top: var(--size-300); }

.pl--300,
.px--300 {
  padding-left: var(--size-300); }

.pr--300,
.px--300 {
  padding-right: var(--size-300); }

.pb--350,
.py--350 {
  padding-bottom: var(--size-350); }

.pt--350,
.py--350 {
  padding-top: var(--size-350); }

.pl--350,
.px--350 {
  padding-left: var(--size-350); }

.pr--350,
.px--350 {
  padding-right: var(--size-350); }

.pb--400,
.py--400 {
  padding-bottom: var(--size-400); }

.pt--400,
.py--400 {
  padding-top: var(--size-400); }

.pl--400,
.px--400 {
  padding-left: var(--size-400); }

.pr--400,
.px--400 {
  padding-right: var(--size-400); }

.pb--500,
.py--500 {
  padding-bottom: var(--size-500); }

.pt--500,
.py--500 {
  padding-top: var(--size-500); }

.pl--500,
.px--500 {
  padding-left: var(--size-500); }

.pr--500,
.px--500 {
  padding-right: var(--size-500); }

.pb--600,
.py--600 {
  padding-bottom: var(--size-600); }

.pt--600,
.py--600 {
  padding-top: var(--size-600); }

.pl--600,
.px--600 {
  padding-left: var(--size-600); }

.pr--600,
.px--600 {
  padding-right: var(--size-600); }

.pb--700,
.py--700 {
  padding-bottom: var(--size-700); }

.pt--700,
.py--700 {
  padding-top: var(--size-700); }

.pl--700,
.px--700 {
  padding-left: var(--size-700); }

.pr--700,
.px--700 {
  padding-right: var(--size-700); }

.pb--800,
.py--800 {
  padding-bottom: var(--size-800); }

.pt--800,
.py--800 {
  padding-top: var(--size-800); }

.pl--800,
.px--800 {
  padding-left: var(--size-800); }

.pr--800,
.px--800 {
  padding-right: var(--size-800); }

.pb--900,
.py--900 {
  padding-bottom: var(--size-900); }

.pt--900,
.py--900 {
  padding-top: var(--size-900); }

.pl--900,
.px--900 {
  padding-left: var(--size-900); }

.pr--900,
.px--900 {
  padding-right: var(--size-900); }

.gap-100 {
  gap: var(--size-100); }

.gap-150 {
  gap: var(--size-150); }

.gap-200 {
  gap: var(--size-200); }

.gap-250 {
  gap: var(--size-250); }

.gap-300 {
  gap: var(--size-300); }

.gap-400 {
  gap: var(--size-400); }

.grid {
  display: grid; }

.grid--2 {
  grid-template-columns: repeat(2, 1fr); }
.grid--3 {
  grid-template-columns: repeat(3, 1fr); }
.grid--4 {
  grid-template-columns: repeat(4, 1fr); }
.grid--5 {
  grid-template-columns: repeat(5, 1fr); }

@media (min-width: 768px) {
  .grid-md {
    display: grid; }

  .grid--md-2 {
    grid-template-columns: repeat(2, 1fr); }
  .grid--md-3 {
    grid-template-columns: repeat(3, 1fr); }
  .grid--md-4 {
    grid-template-columns: repeat(4, 1fr); }
  .grid--md-5 {
    grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 992px) {
  .fs-lg--100 {
    font-size: var(--fs-100); }

  .fs-lg--200 {
    font-size: var(--fs-200); }

  .fs-lg--300 {
    font-size: var(--fs-300); }

  .fs-lg--400 {
    font-size: var(--fs-400); }

  .fs-lg--500 {
    font-size: var(--fs-500); }

  .fs-lg--600 {
    font-size: var(--fs-600); }

  .fs-lg--650 {
    font-size: var(--fs-650); }

  .fs-lg--700 {
    font-size: var(--fs-700); }

  .fs-lg--750 {
    font-size: var(--fs-750); }

  .fs-lg--800 {
    font-size: var(--fs-800); }

  .fs-lg--850 {
    font-size: var(--fs-850); }

  .mb-lg--100,
  .my-lg--100 {
    margin-bottom: var(--size-100); }

  .mt-lg--100,
  .my-lg--100 {
    margin-top: var(--size-100); }

  .ml-lg--100,
  .mx-lg--100 {
    margin-left: var(--size-100); }

  .mr-lg--100,
  .mx-lg--100 {
    margin-right: var(--size-100); }

  .mb-lg--150,
  .my-lg--150 {
    margin-bottom: var(--size-150); }

  .mt-lg--150,
  .my-lg--150 {
    margin-top: var(--size-150); }

  .ml-lg--150,
  .mx-lg--150 {
    margin-left: var(--size-150); }

  .mr-lg--150,
  .mx-lg--150 {
    margin-right: var(--size-150); }

  .mb-lg--200,
  .my-lg--200 {
    margin-bottom: var(--size-200); }

  .mt-lg--200,
  .my-lg--200 {
    margin-top: var(--size-200); }

  .ml-lg--200,
  .mx-lg--200 {
    margin-left: var(--size-200); }

  .mr-lg--200,
  .mx-lg--200 {
    margin-right: var(--size-200); }

  .mb-lg--250,
  .my-lg--250 {
    margin-bottom: var(--size-250); }

  .mt-lg--250,
  .my-lg--250 {
    margin-top: var(--size-250); }

  .ml-lg--250,
  .mx-lg--250 {
    margin-left: var(--size-250); }

  .mr-lg--250,
  .mx-lg--250 {
    margin-right: var(--size-250); }

  .mb-lg--300,
  .my-lg--300 {
    margin-bottom: var(--size-300); }

  .mt-lg--300,
  .my-lg--300 {
    margin-top: var(--size-300); }

  .ml-lg--300,
  .mx-lg--300 {
    margin-left: var(--size-300); }

  .mr-lg--300,
  .mx-lg--300 {
    margin-right: var(--size-300); }

  .mb-lg--350,
  .my-lg--350 {
    margin-bottom: var(--size-350); }

  .mt-lg--350,
  .my-lg--350 {
    margin-top: var(--size-350); }

  .ml-lg--350,
  .mx-lg--350 {
    margin-left: var(--size-350); }

  .mr-lg--350,
  .mx-lg--350 {
    margin-right: var(--size-350); }

  .mb-lg--400,
  .my-lg--400 {
    margin-bottom: var(--size-400); }

  .mt-lg--400,
  .my-lg--400 {
    margin-top: var(--size-400); }

  .ml-lg--400,
  .mx-lg--400 {
    margin-left: var(--size-400); }

  .mr-lg--400,
  .mx-lg--400 {
    margin-right: var(--size-400); }

  .mb-lg--500,
  .my-lg--500 {
    margin-bottom: var(--size-500); }

  .mt-lg--500,
  .my-lg--500 {
    margin-top: var(--size-500); }

  .ml-lg--500,
  .mx-lg--500 {
    margin-left: var(--size-500); }

  .mr-lg--500,
  .mx-lg--500 {
    margin-right: var(--size-500); }

  .mb-lg--550,
  .my-lg--550 {
    margin-bottom: var(--size-550); }

  .mt-lg--550,
  .my-lg--550 {
    margin-top: var(--size-550); }

  .ml-lg--550,
  .mx-lg--550 {
    margin-left: var(--size-550); }

  .mr-lg--550,
  .mx-lg--550 {
    margin-right: var(--size-550); }

  .mb-lg--600,
  .my-lg--600 {
    margin-bottom: var(--size-600); }

  .mt-lg--600,
  .my-lg--600 {
    margin-top: var(--size-600); }

  .ml-lg--600,
  .mx-lg--600 {
    margin-left: var(--size-600); }

  .mr-lg--600,
  .mx-lg--600 {
    margin-right: var(--size-600); }

  .mb-lg--700,
  .my-lg--700 {
    margin-bottom: var(--size-700); }

  .mt-lg--700,
  .my-lg--700 {
    margin-top: var(--size-700); }

  .ml-lg--700,
  .mx-lg--700 {
    margin-left: var(--size-700); }

  .mr-lg--700,
  .mx-lg--700 {
    margin-right: var(--size-700); }

  .mb-lg--750,
  .my-lg--750 {
    margin-bottom: var(--size-750); }

  .mt-lg--750,
  .my-lg--750 {
    margin-top: var(--size-750); }

  .ml-lg--750,
  .mx-lg--750 {
    margin-left: var(--size-750); }

  .mr-lg--750,
  .mx-lg--750 {
    margin-right: var(--size-750); }

  .mb-lg--800,
  .my-lg--800 {
    margin-bottom: var(--size-800); }

  .mt-lg--800,
  .my-lg--800 {
    margin-top: var(--size-800); }

  .ml-lg--800,
  .mx-lg--800 {
    margin-left: var(--size-800); }

  .mr-lg--800,
  .mx-lg--800 {
    margin-right: var(--size-800); }

  .mb-lg--850,
  .mx-lg--850 {
    margin-bottom: var(--size-850); }

  .mb-lg--900,
  .my-lg--900 {
    margin-bottom: var(--size-900); }

  .mt-lg--900,
  .my-lg--900 {
    margin-top: var(--size-900); }

  .ml-lg--900,
  .mx-lg--900 {
    margin-left: var(--size-900); }

  .mr-lg--900,
  .mx-lg--900 {
    margin-right: var(--size-900); }

  .pb-lg--100,
  .py-lg--100 {
    padding-bottom: var(--size-100); }

  .pt-lg--100,
  .py-lg--100 {
    padding-top: var(--size-100); }

  .pl-lg--100,
  .px-lg--100 {
    padding-left: var(--size-100); }

  .pr-lg--100,
  .px-lg--100 {
    padding-right: var(--size-100); }

  .pb-lg--150,
  .py-lg--150 {
    padding-bottom: var(--size-150); }

  .pt-lg--150,
  .py-lg--150 {
    padding-top: var(--size-150); }

  .pl-lg--150,
  .px-lg--150 {
    padding-left: var(--size-150); }

  .pr-lg--150,
  .px-lg--150 {
    padding-right: var(--size-150); }

  .pb-lg--200,
  .py-lg--200 {
    padding-bottom: var(--size-200); }

  .pt-lg--200,
  .py-lg--200 {
    padding-top: var(--size-200); }

  .pl-lg--200,
  .px-lg--200 {
    padding-left: var(--size-200); }

  .pr-lg--200,
  .px-lg--200 {
    padding-right: var(--size-200); }

  .pb-lg--250,
  .py-lg--250 {
    padding-bottom: var(--size-250); }

  .pt-lg--250,
  .py-lg--250 {
    padding-top: var(--size-250); }

  .pl-lg--250,
  .px-lg--250 {
    padding-left: var(--size-250); }

  .pr-lg--250,
  .px-lg--250 {
    padding-right: var(--size-250); }

  .pb-lg--300,
  .py-lg--300 {
    padding-bottom: var(--size-300); }

  .pt-lg--300,
  .py-lg--300 {
    padding-top: var(--size-300); }

  .pl-lg--300,
  .px-lg--300 {
    padding-left: var(--size-300); }

  .pr-lg--300,
  .px-lg--300 {
    padding-right: var(--size-300); }

  .pb-lg--350,
  .py-lg--350 {
    padding-bottom: var(--size-350); }

  .pt-lg--350,
  .py-lg--350 {
    padding-top: var(--size-350); }

  .pl-lg--350,
  .px-lg--350 {
    padding-left: var(--size-350); }

  .pr-lg--350,
  .px-lg--350 {
    padding-right: var(--size-350); }

  .pb-lg--400,
  .py-lg--400 {
    padding-bottom: var(--size-400); }

  .pt-lg--400,
  .py-lg--400 {
    padding-top: var(--size-400); }

  .pl-lg--400,
  .px-lg--400 {
    padding-left: var(--size-400); }

  .pr-lg--400,
  .px-lg--400 {
    padding-right: var(--size-400); }

  .pb-lg--500,
  .py-lg--500 {
    padding-bottom: var(--size-500); }

  .pt-lg--500,
  .py-lg--500 {
    padding-top: var(--size-500); }

  .pl-lg--500,
  .px-lg--500 {
    padding-left: var(--size-500); }

  .pr-lg--500,
  .px-lg--500 {
    padding-right: var(--size-500); }

  .pb-lg--600,
  .py-lg--600 {
    padding-bottom: var(--size-600); }

  .pt-lg--600,
  .py-lg--600 {
    padding-top: var(--size-600); }

  .pl-lg--600,
  .px-lg--600 {
    padding-left: var(--size-600); }

  .pr-lg--600,
  .px-lg--600 {
    padding-right: var(--size-600); }

  .pb-lg--700,
  .py-lg--700 {
    padding-bottom: var(--size-700); }

  .pt-lg--700,
  .py-lg--700 {
    padding-top: var(--size-700); }

  .pl-lg--700,
  .px-lg--700 {
    padding-left: var(--size-700); }

  .pr-lg--700,
  .px-lg--700 {
    padding-right: var(--size-700); }

  .pb-lg--800,
  .py-lg--800 {
    padding-bottom: var(--size-800); }

  .pt-lg--800,
  .py-lg--800 {
    padding-top: var(--size-800); }

  .pl-lg--800,
  .px-lg--800 {
    padding-left: var(--size-800); }

  .pr-lg--800,
  .px-lg--800 {
    padding-right: var(--size-800); }

  .pb-lg--900,
  .py-lg--900 {
    padding-bottom: var(--size-900); }

  .pt-lg--900,
  .py-lg--900 {
    padding-top: var(--size-900); }

  .pl-lg--900,
  .px-lg--900 {
    padding-left: var(--size-900); }

  .pr-lg--900,
  .px-lg--900 {
    padding-right: var(--size-900); }

  .gap-lg-100 {
    gap: var(--size-100); }

  .gap-lg-200 {
    gap: var(--size-200); }

  .gap-lg-300 {
    gap: var(--size-300); }

  .gap-lg-350 {
    gap: var(--size-350); }

  .gap-lg-400 {
    gap: var(--size-400); }

  .gap-lg-500 {
    gap: var(--size-500); }

  .gap-lg-600 {
    gap: var(--size-600); }

  .grid-lg {
    display: grid; }

  .grid--lg-2 {
    grid-template-columns: repeat(2, 1fr); }
  .grid--lg-3 {
    grid-template-columns: repeat(3, 1fr); }
  .grid--lg-4 {
    grid-template-columns: repeat(4, 1fr); }
  .grid--lg-5 {
    grid-template-columns: repeat(5, 1fr); }

  .mh-100 {
    min-height: 100vh; } }
.btn {
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  color: var(--clr-neutral-100);
  line-height: 1.2;
  border-radius: var(--radius-100); }
  .btn--sm {
    padding: 1.8rem 5.3rem; }
  .btn--md {
    padding: 1.8rem 8.1rem; }
  .btn--primary {
    background-color: var(--clr-primary-200); }
    .btn--primary:hover {
      background-color: #045BB8;
      color: var(--clr-neutral-100); }
  .btn--primary-100 {
    background-color: var(--clr-primary-400); }
    .btn--primary-100:hover {
      background-color: var(--clr-primary-400);
      color: var(--clr-neutral-100); }
  .btn--secondary {
    color: var(--clr-neutral-200);
    font-weight: var(--fw-regular); }

@media (max-width: 991px) {
  .navbar-toggler:focus {
    outline: 0;
    box-shadow: none; }

  .btn-close {
    background: none;
    font-size: 3rem; }
    .btn-close:focus {
      box-shadow: none; } }
.main-head {
  font-size: var(--fs-800);
  font-weight: var(--fw-bold);
  color: var(--clr-primary-400);
  line-height: normal; }
  .main-head--warning {
    font-weight: var(--fw-regular);
    background-color: #E4A494;
    color: var(--clr-neutral-100);
    border-radius: 6rem;
    font-style: italic;
    padding: 0 2rem 0.4rem 2rem; }

.section-head {
  font-size: var(--fs-650);
  font-weight: var(--fw-semibold); }

@media (max-width: 991px) {
  .main-head {
    font-size: var(--fs-600); }
    .main-head--warning {
      padding: 0 1rem 0.3rem 1rem; }

  .section-head {
    font-size: var(--fs-500); } }
.table {
  border-color: #454878; }
  .table__top-left {
    border-top-left-radius: var(--radius-200); }
  .table__top-right {
    border-top-right-radius: var(--radius-200); }
  .table__bottom-left {
    border-bottom-left-radius: var(--radius-200);
    border-left: 0 !important; }
  .table__bottom-right {
    border-bottom-right-radius: var(--radius-200);
    border-right: 0 !important; }
  .table .table-head {
    padding: 3.8rem 5.6rem 2.4rem 5.6rem;
    white-space: nowrap;
    text-align: center;
    border-left: 0.1rem solid #454878; }
  .table .table-bg {
    background-color: var(--clr-primary-400);
    color: var(--clr-neutral-100); }
  .table .table-desc {
    padding: 1rem 0;
    border-left: 0.1rem solid #454878;
    border-right: 0.1rem solid #454878;
    white-space: nowrap; }
  .table .border-left {
    border-left: 0 !important; }

@media (max-width: 767px) {
  .table .table-head {
    padding: 3rem 5rem 2rem 5rem; } }
.footer {
  margin: var(--size-800) 0 var(--size-200); }
  .footer__logo {
    width: 7.7rem;
    height: 7.7rem;
    object-fit: contain;
    margin: auto; }
  .footer__list {
    background-color: var(--clr-neutral-100);
    padding: var(--size-250);
    border-radius: var(--radiud-300); }
  .footer__link {
    color: var(--clr-neutral-200); }
    .footer__link:hover {
      color: var(--clr-primary-400); }
  .footer__social-icon {
    width: var(--size-350);
    height: var(--size-350);
    object-fit: contain; }

@media (max-width: 767px) {
  .footer {
    margin: var(--size-600) 0 var(--size-200); }
    .footer__logo {
      width: 5.7rem;
      height: 5.7rem; }
    .footer__list {
      flex-direction: column;
      row-gap: var(--size-200);
      border-radius: var(--radius-200); } }
.header {
  stroke: 1px;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  transition: all .3s ease-in-out;
  padding: var(--size-100) 0;
  background-color: var(--clr-neutral-100); }
  .header__navbar {
    display: flex; }
  .header__nav-link {
    color: var(--clr-neutral-200);
    font-size: var(--fs-100);
    display: inline-flex;
    padding: 1.7rem 0; }
    .header__nav-link:hover {
      color: var(--clr-primary-400); }

@media (min-width: 992px) {
  .header .offcanvas {
    visibility: visible;
    position: relative;
    background: none;
    border: none;
    justify-content: end;
    color: var(--clr-neutral-200); }
  .header__logo {
    height: 7rem;
    width: 7rem;
    object-fit: contain;
    display: block; }
  .header__nav {
    gap: var(--size-400); }
  .header__nav-link {
    color: var(--clr-neutral-200);
    font-size: var(--fs-100);
    display: inline-flex;
    padding: 0; } }
@media (max-width: 991px) {
  .offcanvas {
    width: 300px !important;
    padding: var(--size-100);
    border-right: 0 !important; }

  .offcanvas-start-lg {
    top: 0;
    left: 0;
    transform: translateX(-100%); }

  .header__nav-item {
    width: 100%; }
  .header__nav-btn {
    flex-direction: column !important;
    align-items: start !important;
    row-gap: var(--size-300); }
  .header__logo {
    height: var(--size-500);
    width: var(--size-500); } }
.container {
  max-width: min(121.6rem, 100% - 1.6rem * 2); }

@media (max-width: 575px) {
  .container {
    max-width: min(121.6rem, 100% - 1.15rem * 2); } }
.hero {
  padding-top: 19rem;
  background-image: url("../img/hOME.webp");
  background-position: center;
  background-size: cover;
  height: 100%; }
  .hero__square {
    margin: auto; }

.our-purpose {
  padding: 22rem 0 15rem 0;
  position: relative;
  background-color: var(--clr-primary-400);
  border-bottom: 0.1rem solid var(--clr-primary-300); }
  .our-purpose:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -55% -45%;
    background-image: url("../img/our-purpose.png");
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 70%;
    background-size: contain; }

.step {
  background-color: var(--clr-primary-400);
  padding: 5.4rem 0 13rem 0; }

.product {
  padding: 6rem 0 10rem 0; }
  .product__list-item {
    background-color: var(--clr-neutral-100);
    border-radius: var(--radius-200);
    padding: 12rem 4rem 4rem 4rem;
    position: relative; }
    .product__list-item::before {
      content: "";
      position: absolute;
      top: 4.5rem;
      left: var(--size-400);
      width: 5.6rem;
      height: 5.6rem;
      object-fit: contain;
      background-image: url("../img/product-check.webp");
      background-repeat: no-repeat; }

.apart {
  padding: 1.6rem 0 4.4rem;
  border-bottom: 0.1rem solid #D4DDE8;
  position: relative; }
  .apart__content {
    position: absolute;
    top: 14rem;
    left: 0;
    right: 0;
    margin: auto; }

.pricing {
  padding: 9rem 7rem;
  margin: 0 6rem;
  border-top-right-radius: 6.4rem;
  border-top-left-radius: 6.4rem;
  position: relative;
  background-color: var(--clr-neutral-100); }
  .pricing::before {
    content: "";
    position: absolute;
    top: -10.5rem;
    left: 0;
    width: 100%;
    height: 37rem;
    background: radial-gradient(50% 50% at 50% 50%, #CBD7E7 0%, rgba(203, 215, 231, 0) 100%);
    border-radius: 50%;
    z-index: -1; }
  .pricing__wrapper {
    margin-top: -5rem; }

.join {
  padding-top: var(--size-500);
  background-color: var(--clr-primary-200); }

@media (min-width: 992px) {
  .join {
    overflow: hidden; }
    .join__container {
      width: calc(50vw + 60.8rem);
      margin-left: auto;
      padding-left: var(--size-200); } }
@media (max-width: 991px) {
  .our-purpose {
    padding: 7rem 0; }
    .our-purpose:before {
      content: "";
      display: none; }

  .apart {
    padding: 6rem 0;
    position: relative; }
    .apart__content {
      position: relative;
      top: 0; }

  .pricing {
    margin: 0;
    padding: var(--size-500) var(--size-50);
    border-top-right-radius: var(--radius-200);
    border-top-left-radius: var(--radius-200); }
    .pricing__wrapper {
      margin-top: var(--size-300); }

  .join__container {
    max-width: 100%;
    padding: 0 1.6rem; } }
@media (max-width: 767px) {
  .hero {
    background-image: none;
    position: relative; }
    .hero__square {
      margin-top: 6rem;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; }

  .step {
    padding: 5rem 0; }

  .product {
    padding: var(--size-500) 0; }
    .product__list-item {
      padding: 10rem 2rem 3rem 2rem;
      position: relative; }
      .product__list-item::before {
        content: "";
        top: var(--size-200);
        left: var(--size-200); } }

/*# sourceMappingURL=main.css.map */