:root {
  /* Variable collection*/

  /* Text body variables*/
  --color-brand: #d32131;
  --color-body-100: #1a1a1a;
  --color-body-75: rgba(26, 26, 26, 0.75);
  --color-body-60: rgba(26, 26, 26, 0.6);
  --color-body-40: rgba(26, 26, 26, 0.4);
  --color-yellow: #dd9904;
  /* Text style variables*/

  /* Text/PC/14/14/MEDIUM */
  --text-pc-14-medium-font-size: 0.875rem;
  --text-pc-14-medium-font-family: "Shopee Display";
  --text-pc-14-medium-font-style: normal;
  --text-pc-14-medium-font-weight: 500;
  --text-pc-14-medium-line-height: 140%;

  /* Text/PC/14/14/REGULAR */
  --text-pc-14-regular-font-size: 0.875rem;
  --text-pc-14-regular-font-family: "Shopee Display";
  --text-pc-14-regular-font-style: normal;
  --text-pc-14-regular-font-weight: 400;
  --text-pc-14-regular-line-height: 140%;

  /* Text/PC/16/16/MEDIUM */
  --text-pc-16-regular-font-size: 1rem;
  --text-pc-16-regular-font-family: "Shopee Display";
  --text-pc-16-medium-font-style: normal;
  --text-pc-16-medium-font-weight: 500;
  --text-pc-16-medium-line-height: 140%;

  /* Text/PC/16/16/REGULAR */
  --text-pc-16-regular-font-size: 1rem;
  --text-pc-16-regular-font-family: "Shopee Display";
  --text-pc-16-regular-font-style: normal;
  --text-pc-16-regular-font-weight: 400;
  --text-pc-16-regular-line-height: 140%;

  /* Text/PC/18/18/REGULAR */
  --text-pc-18-regular-font-size: 1.125rem;
  --text-pc-18-regular-font-family: "Shopee Display";
  --text-pc-18-regular-font-style: normal;
  --text-pc-18-regular-font-weight: 400;
  --text-pc-18-regular-line-height: 140%;

  /* Text/PC/20/20/MEDIUM */
  --text-pc-20-medium-font-size: 1.25rem;
  --text-pc-20-medium-font-family: "Shopee Display";
  --text-pc-20-medium-font-style: normal;
  --text-pc-20-medium-font-weight: 500;
  --text-pc-20-medium-line-height: 140%;

  /* Heading/PC/H1/BOLD */
  --heading-pc-h1-bold-font-size: 3.0625rem;
  --heading-pc-h1-bold-font-family: "Shopee Display";
  --heading-pc-h1-bold-font-style: normal;
  --heading-pc-h1-bold-font-weight: 700;
  --heading-pc-h1-bold-line-height: normal;

  /* Heading/PC/H3/BOLD */
  --heading-pc-h3-bold-font-size: 1.9375rem;
  --heading-pc-h3-bold-font-family: "Shopee Display";
  --heading-pc-h3-bold-font-style: normal;
  --heading-pc-h3-bold-font-weight: 700;
  --heading-pc-h3-bold-line-height: normal;

  /* Text/MB/14/REGULAR */
  --text-mb-14-regular-font-size: 0.875rem;
  --text-mb-14-regular-font-family: "Shopee Display";
  --text-mb-14-regular-font-style: normal;
  --text-mb-14-regular-font-weight: 400;
  --text-mb-14-regular-line-height: 140%;

  /* Heading/MB/H1/BOLD */
  --heading-mb-h1-bold-font-size: 1.5rem;
  --heading-mb-h1-bold-font-family: "Shopee Display";
  --heading-mb-h1-bold-font-style: normal;
  --heading-mb-h1-bold-font-weight: 700;
  --heading-mb-h1-bold-line-height: normal;

  /* Heading/MB/H2/BOLD */
  --heading-mb-h2-bold-font-size: 1.25rem;
  --heading-mb-h2-bold-font-family: "Shopee Display";
  --heading-mb-h2-bold-font-style: normal;
  --heading-mb-h2-bold-font-weight: 700;
  --heading-mb-h2-bold-line-height: normal;
}

/* Color and Paint style classes */
.text-color-brand {
  color: var(--color-brand);
}
.text-color-body-100 {
  color: var(--color-body-100);
}
.text-color-white-75 {
  color: var(--color-body-75);
}
.text-color-body-60 {
  color: var(--color-body-60);
}
.text-color-body-40 {
  color: var(--color-body-40);
}

/* Typography classes */

/* TEXT/PC/18/BO */
.text-pc-14-medium {
  font-size: var(--text-pc-14-medium-font-size);
  font-family: var(--text-pc-14-medium-font-family);
  font-weight: var(--text-pc-14-medium-font-weight);
  line-height: var(--text-pc-14-medium-line-height);
}
/* TEXT/PC/18/R */
.text-pc-14-regular {
  font-size: var(--text-pc-14-regular-font-size);
  font-family: var(--text-pc-14-regular-font-family);
  font-weight: var(--text-pc-14-regular-font-weight);
  line-height: var(--text-pc-14-regular-line-height);
}
/* TEXT/PC/36/B */
.text-pc-16-medium {
  font-size: var(--text-pc-16-medium-font-size);
  font-family: var(--text-pc-16-medium-font-family);
  font-weight: var(--text-pc-16-medium-font-weight);
  line-height: var(--text-pc-16-medium-line-height);
  letter-spacing: -0.03375rem;
  text-transform: capitalize;
}

/* TEXT/PC/18/B */
.text-pc-18-regular {
  font-size: var(--text-pc-18-regular-font-size);
  font-family: var(--text-pc-18-regular-font-family);
  font-weight: var(--text-pc-18-regular-font-weight);
  line-height: var(--text-pc-18-regular-line-height);
}

/* TEXT/PC/20/B */
.text-pc-20-medium {
  font-size: var(--text-pc-20-medium-font-size);
  font-family: var(--text-pc-20-medium-font-family);
  font-weight: var(--text-pc-20-medium-font-weight);
  line-height: var(--text-pc-20-medium-line-height);
}

.heading-pc-h1-bold {
  font-size: var(--heading-pc-h1-bold-font-size);
  font-family: var(--heading-pc-h1-bold-font-family);
  font-weight: var(--heading-pc-h1-bold-font-weight);
  line-height: var(--heading-pc-h1-bold-line-height);
}

.heading-pc-h3-bold {
  font-size: var(--heading-pc-h3-bold-font-size);
  font-family: var(--heading-pc-h3-bold-font-family);
  font-weight: var(--heading-pc-h3-bold-font-weight);
  line-height: var(--heading-pc-h3-bold-line-height);
}

@media (max-width: 639.98px) {
  /* Mobile Text Styles */

  .text-mb-14-regular {
    font-size: var(--text-mb-14-regular-font-size);
    font-family: var(--text-mb-14-regular-font-family);
    font-weight: var(--text-mb-14-regular-font-weight);
    line-height: var(--text-mb-14-regular-line-height);
  }
  .heading-mb-h1-bold {
    font-size: var(--heading-mb-h1-bold-font-size);
    font-family: var(--heading-mb-h1-bold-font-family);
    font-weight: var(--heading-mb-h1-bold-font-weight);
    line-height: var(--heading-mb-h1-bold-line-height);
  }

  .heading-mb-h2-bold {
    font-size: var(--heading-mb-h2-bold-font-size);
    font-family: var(--heading-mb-h2-bold-font-family);
    font-weight: var(--heading-mb-h2-bold-font-weight);
    line-height: var(--heading-mb-h2-bold-line-height);
  }
}

.container {
  width: 81.25rem;
  margin-left: auto;
  margin-right: auto;
}