:root {
  --white: #FFFFFF;
  --black: #000000;
  --red: #FF4D4D;
  --gray-100: #E6E6E6;
  --gray-200: #D1D1D1;
  --gray-600: #6B6B6B;
  --gray-700: #525252;
  --gray-900: #1F1F1F;
  --yellow-50: #FFFCF6;
  --yellow-100: #FFF8EB;
  --yellow-200: #FEEECD;
  --yellow-300: #FBCB6A;
  --yellow-400: #EEAE2F;
  --yellow-500: rgba(213, 144, 8, 0.97);
  --yellow-600: #A26F0A;
  --yellow-700: #714E0A;
  --yellow-800: #422E06;
  --yellow-900: #201602;
  --purple-50: #F7F2FC;
  --purple-100: #DABEFA;
  --purple-200: #C596FB;
  --purple-300: #B274FA;
  --purple-400: #8B46DB;
  --purple-500: #6A2FD0;
  --purple-600: #52289C;
  --purple-700: #3F256B;
  --purple-800: #2B1C45;
  --purple-900: #1A0C32;
  --orange-50: #F4DED3;
  --orange-100: #F2C7B1;
  --orange-200: #F1AF8E;
  --orange-300: #F38F5D;
  --orange-400: #F86F2B;
  --orange-500: #FF5A08;
  --orange-600: #D74A04;
  --orange-700: #B0420B;
  --orange-800: #6B2908;
  --orange-900: #3F1805;
  --blue: #0090F8;
}

html, body {
  font-size: 62.5%;
  font-family: "neue-haas-grotesk-display", Helvetica, sans-serif;
  margin: 0;
  position: relative;
}
html ::-webkit-scrollbar, body ::-webkit-scrollbar {
  display: none;
}
html.modal-open, body.modal-open {
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6, h7 {
  margin: 0;
  padding: 0;
}

p, ul, li {
  margin: 0;
  padding: 0;
}

button, input, select, textarea {
  font-family: "neue-haas-grotesk-display", Helvetica, sans-serif;
}

a {
  text-decoration: none;
}
a:visited {
  color: var(--gray-600, #6B6B6B);
}

button {
  padding: 0;
  border: 1px solid transparent;
  font-family: "neue-haas-grotesk-display", Helvetica, sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 120%; /* 16.8px */
  letter-spacing: -0.14px;
  cursor: pointer;
}
button.primary-btn {
  display: flex;
  height: 40px;
  padding: 10px 20px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 20px;
  background: var(--purple-800);
  color: var(--yellow-50);
  transition: 0.2s all ease-in-out;
}
button.primary-btn > svg path {
  stroke: var(--yellow-50);
}
button.primary-btn:hover {
  background: var(--purple-700);
}
button.primary-btn:active {
  background: var(--purple-800);
}
button.primary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
button.secondary-btn {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 20px;
  color: var(--purple-800);
  font-size: 14px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -0.14px;
  cursor: pointer;
  transition: 0.2s all ease-in-out;
}
button.secondary-btn > svg path {
  stroke: var(--purple-800);
}
button.secondary-btn:hover {
  border: 1px solid var(--purple-800);
  color: var(--purple-800);
}
button.secondary-btn:hover > svg path {
  stroke: var(--purple-800);
}
button.secondary-btn:active {
  border: 1px solid var(--purple-900);
  color: var(--purple-900);
}
button.secondary-btn:active > svg path {
  stroke: var(--purple-900);
}
button.secondary-btn:disabled {
  border: 1px solid transparent;
  opacity: 0.5;
}
button.tertiary-btn {
  display: flex;
  height: 40px;
  padding: 10px 20px 10px 16px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  background: none;
  border-radius: 20px;
  border: 1px solid var(--gray-100);
  color: var(--gray-600);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -0.16px;
  cursor: pointer;
  transition: 0.2s all ease-in-out;
}
button.tertiary-btn > svg path {
  stroke: var(--gray-600);
}
button.tertiary-btn:hover {
  border: 1px solid var(--purple-500);
  color: var(--purple-500);
}
button.tertiary-btn:hover > svg path {
  stroke: var(--purple-500);
}
button.tertiary-btn:active {
  border: 1px solid var(--purple-800);
  color: var(--purple-800);
}
button.tertiary-btn:active > svg path {
  stroke: var(--purple-800);
}
button.tertiary-btn:disabled {
  border: 1px solid transparent;
  opacity: 0.5;
}
button.icon-btn {
  width: 40px;
  height: 40px;
  padding: 10px;
}
button.icon-btn > svg {
  width: 16px;
  height: 16px;
}
button.medium-btn {
  height: 32px;
  padding: 8px 16px;
  border-radius: 20px;
}
button.medium-btn.icon-btn {
  width: 32px;
  height: 32px;
  padding: 8px;
}
button.medium-btn.icon-btn > svg {
  width: 14px;
  height: 14px;
}
button.small-btn {
  height: 24px;
  padding: 4px 8px;
  border-radius: 50px;
}
button.small-btn.icon-btn {
  width: 24px;
  height: 24px;
  padding: 4px;
}
button.small-btn.icon-btn > svg {
  width: 12px;
  height: 12px;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
ul li {
  padding: 0;
  margin: 0;
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 300;
  box-shadow: 4px 4px 16px 0px rgba(63, 24, 5, 0.25);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(26, 12, 50, 0.5);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 200;
}

.mobile-only {
  display: none;
}
@media screen and (max-width: 766px) {
  .mobile-only {
    display: block;
  }
}

.description {
  font-size: 16px;
}
.description h1, .description h2, .description h3 {
  font-family: "Fjalla One";
  font-weight: 600;
  margin: 36px 0 24px;
  color: var(--purple-900);
}
.description h1 {
  font-size: 36px;
  margin-top: 16px;
}
.description h2 {
  font-size: 30px;
}
.description h3 {
  font-size: 24px;
}
.description li {
  margin-bottom: 10px;
}
.description ul {
  list-style-type: disc;
  padding-left: 36px;
}
.description p {
  font-family: "elza-text", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 22.4px */
  color: var(--purple-900);
  margin-bottom: 24px;
}

.language-select, .currency-selector {
  position: relative;
}
.language-select:after, .currency-selector:after {
  content: " ";
  position: absolute;
  top: 50%;
  margin-top: -2px;
  right: 24px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--purple-500);
}
.language-select select, .currency-selector select {
  appearance: none;
}

/*font-family: elza-text, sans-serif;
font-weight: 400;
font-style: normal;
font-family: elza-text, sans-serif;
font-weight: 500;
font-style: normal;
font-family: elza-text, sans-serif;
font-weight: 700;
font-style: normal;*/
/*
Fonts Added:

Neue Haas Grotesk Display Pro 45 Light
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 400;
font-style: normal;

Neue Haas Grotesk Display Pro 55 Roman
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;

Neue Haas Grotesk Display Pro 65 Medium
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 600;
font-style: normal;

Neue Haas Grotesk Display Pro 75 Bold
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 700;
font-style: normal;

*/