:root {
  --dark100: #b8b8b8;
  --dark200: #a3a3a3;
  --dark300: #8f8f8f;
  --dark400: #7a7a7a;
  --dark500: #666666;
  --dark600: #525252;
  --dark700: #3d3d3d;
  --dark800: #292929;
  --dark900: #141414;
  --dark1000: #090909;
  --light100: #f8f8f8;
  --light200: #f4f4f4;
  --light300: #f0f0f0;
  --light400: #e9e9e9;
  --light500: #dcdcdc;
  --light600: #c0c0c0;
  --light700: #a0a0a0;
  --light800: #8a8a8a;
  --light900: #6f6f6f;
  --primary100: #ffd8c2;
  --primary200: #ffbd99;
  --primary300: #ffa370;
  --primary400: #ff8947;
  --primary500: #ff6f1f;
  --primary600: #f55700;
  --primary700: #cc4900;
  --primary800: #a33a00;
  --primary900: #7a2c00;
  --primary1000: #521d00;
  --secondary100: #c2e2ff;
  --secondary200: #99ceff;
  --secondary300: #70baff;
  --secondary400: #47a7ff;
  --secondary500: #1f93ff;
  --secondary600: #007ff5;
  --secondary700: #006acc;
  --secondary800: #0055a3;
  --secondary900: #00407a;
  --secondary1000: #002a52;

  --font-title: "Almarai", sans-serif;
  --font-text: var(--font-text);
}

/* GLOBAL */
* {
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased; /*CHROME: Passar para os navegadores que usam webkit */
  -moz-osx-font-smoothing: grayscale; /*SAFARI: Passar para os navegadores que usam webkit */
}
body,
html {
  background-color: var(--dark1000);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
  padding: 0;
  margin: 0;
  text-decoration: none;
  font-family: var(--font-text);
}
button {
  background-color: transparent;
  border: none;
}

ul,
li {
  list-style: none;
  text-decoration: none;
  padding: 0;
  margin: 0;
}

/* SCROLL */
::-webkit-scrollbar {
  width: 8px;
  background-color: var(--dark1000);
}
::-webkit-scrollbar-thumb {
  width: 11px;
  background-color: var(--dark1000);
  background-image: linear-gradient(var(--secondary300), var(--secondary700));
  border-radius: 10px;
}

/* ANIMATES */

/* FONTS - TEXT */
.body-xl-bold {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 18px;
}
.body-xl {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 18px;
}
.body-lg-bold {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 16px;
}
.body-lg {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 16px;
}
.body-md-bold {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 14px;
}
.body-md {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 14px;
}
.body-sm-bold {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 10px;
}
.body-sm {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 10px;
}

/* FONTS - TITLE */
.super-heading {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 48px;
}
.master-heading {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 40px;
}
.big-heading {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 32px;
}
.small-heading {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 24px;
}

/* UTILS */
.p-8 {
  padding: 8px;
}
.p-16 {
  padding: 16px;
}
.p-32 {
  padding: 32px;
}
.p-64 {
  padding: 64px;
}
.pl-0 {
  padding-left: 0;
}
.pr-0 {
  padding-right: 0;
}
.pt-8 {
  padding-top: 8px;
}
.pr-8 {
  padding-right: 8px;
}
.pb-8 {
  padding-bottom: 8px;
}
.pl-8 {
  padding-left: 8px;
}
.pt-16 {
  padding-top: 16px;
}
.pr-16 {
  padding-right: 16px;
}
.pb-16 {
  padding-bottom: 16px;
}
.pl-16 {
  padding-left: 16px;
}
.pt-32 {
  padding-top: 32px;
}
.pr-32 {
  padding-right: 32px;
}
.pb-32 {
  padding-bottom: 32px;
}
.pl-32 {
  padding-left: 32px;
}
.pt-64 {
  padding-top: 64px;
}
.pr-64 {
  padding-right: 64px;
}
.pb-64 {
  padding-bottom: 64px;
}
.pl-64 {
  padding-left: 64px;
}
.pt-128 {
  padding-top: 128px;
}
.pr-128 {
  padding-right: 128px;
}
.pb-128 {
  padding-bottom: 128px;
}
.pl-128 {
  padding-left: 128px;
}
.pb-256 {
  padding-bottom: 256px;
}
.mb-8 {
  margin-bottom: 8px;
}
.mb-16 {
  margin-bottom: 16px;
}
.ml-16 {
  margin-left: 16px;
}
.mr-16 {
  margin-left: 16px;
}
.mr-32 {
  margin-left: 32px;
}
.mb-32 {
  margin-bottom: 32px;
}
.mb-64 {
  margin-bottom: 64px;
}
.mt-32 {
  margin-top: 32px;
}
.mt-64 {
  margin-top: 64px;
}
.pb-24 {
  padding-bottom: 24px;
}
.gap-4px {
  gap: 4px;
}
.gap-8px {
  gap: 8px;
}
.gap-16px {
  gap: 16px;
}
.gap-24px {
  gap: 24px;
}
.gap-32px {
  gap: 32px;
}
.gap-48px {
  gap: 48px;
}
.gap-64px {
  gap: 64px;
}

/* XXL */
@media (max-width: 1399.98px) {
  .body-xl-bold-xxl {
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 18px;
  }
}

/* XL */
@media (max-width: 1199.98px) {
  .gap-xl-32px {
    gap: 32px;
  }
  .gap-xl-4px {
    gap: 4px;
  }
  .pb-0-xl {
    padding-bottom: 0;
  }
  .body-md-bold-xl {
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 14px;
  }
  .big-heading-xl {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 32px;
  }
  .body-md-bold-xl {
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 14px;
  }
  .body-lg-bold-xl {
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 16px;
  }
  .small-heading-xl {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 24px;
  }
}
@media (max-width: 991.98px) {
  .big-heading-lg {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 32px;
  }
  .pb-16-lg {
    padding-bottom: 16px;
  }
  .p-32-lg {
    padding: 32px;
  }
  .pb-32-lg {
    padding-bottom: 32px;
  }
  .pt-64-lg {
    padding-top: 64px;
  }
  .pb-64-lg {
    padding-bottom: 64px;
  }
  .pt-32-lg {
    padding-top: 32px;
  }
  .pt-16-lg {
    padding-top: 16px;
  }
  .mt-16-lg {
    margin-top: 16px;
  }
  .mt-8-lg {
    margin-top: 8px;
  }
  .pr-0-lg {
    padding-right: 0;
  }
  .pl-0-lg {
    padding-left: 0;
  }
  .mb-32-lg {
    margin-bottom: 32px;
  }
  .gap-32px-lg {
    gap: 32px;
  }
  .gap-16px-lg {
    gap: 16px;
  }
}
@media (max-width: 575.98px) {
  .small-heading-sm {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 24px;
  }
  .pt-16-sm {
    padding-top: 16px;
  }
  .p-16-sm {
    padding: 16px;
  }
  .pb-32-sm {
    padding-bottom: 32px;
  }
  .body-md-bold-sm {
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 14px;
  }
  .body-lg-bold-sm {
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 16px;
  }
  .body-md-sm {
    font-family: var(--font-text);
    font-weight: 300;
    font-size: 14px;
  }
  .body-xl-bold-sm {
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 18px;
  }
  .body-sm-bold-sm {
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 10px;
  }
  .body-sm-sm {
    font-family: var(--font-text);
    font-weight: 300;
    font-size: 10px;
  }
  .small-heading-sm {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 24px;
  }
  .body-lg-sm {
    font-family: var(--font-text);
    font-weight: 300;
    font-size: 16px;
  }
  .pr-8-sm {
    padding-right: 8px;
  }
  .pl-8-sm {
    padding-left: 8px;
  }
  .pb-8-sm {
    padding-bottom: 8px;
  }
  .pt-8-sm {
    padding-top: 8px;
  }
}
@media (max-width: 349.98px) {
  .body-xl-bold-xs {
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 18px;
  }
  .body-lg-bold-xs {
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 16px;
  }
  .body-md-bold-xs {
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 14px;
  }
}