:root { 
  --alabaster: #f9fafb;
  --alabaster-2: #fafafa;
  --black: #000000;
  --gray-900: #18181b;
  --gray-800: #27272a;
  --gray-600: #4B5563;
  --gray-400: #A1A1AA;
  --gray-300: #D1D5DB;
  --gray-50: #F9FAFB;
  --chambray: #2f408d;
  --chambray-2: #2f408d1a;
  --christi: #77a514;
  --cinnabar: #f04535;
  --cod-gray: #09090b;
  --eerie-black: #18181b;
  --fuscous-gray: #555555;
  --iron: #d4d4d8;
  --lima: #84b51b;
  --lima-2: #84b51b1a;
  --mercury: #e4e4e7;
  --mercury-2: #e5e7eb;
  --mirage: #111827;
  --mischka: #d1d5db;
  --ogre-odor: #ef52441a;
  --ogre-odor-2: #ef5244;
  --pale-sky: #6b7280;
  --santas-gray: #a1a1aa;
  --santas-gray-2: #9ca3af;
  --scarpa-flow: #4b5563;
  --shark: #27272a;
  --ship-gray: #3f3f46;
  --sonic-silver: #71717a;
  --trout: #52525b;
  --white: #ffffff;
  --white-2: #ffffff1a;
  --white-3: #ffffff14;
  --wild-sand: #f4f4f5;
  --wild-sand-2: #f3f4f6;
 
  --font-size-36px: 36px;
  --font-size-48px: 48px;
  --font-size-55px: 55px;
  --font-size-l: 16px;
  --font-size-m: 14px;
  --font-size-s: 12px;
  --font-size-xl: 18px;
  --font-size-xxl: 20px;
  --font-size-xxxl: 24px;
  --font-size-xxxxl: 30px;
 
  --font-family-poppins: "Poppins", Helvetica;
  --font-family-suit-extrabold: "SUIT-ExtraBold", Helvetica;
}
.caption1-400 {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.14px;
}

.small-400 {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.12px;
}

.h6-500 {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.18px;
  line-height: 1.5;
}

.SectionTitle {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xxxxl);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.9px;
  line-height: 1.5;
}

.Body1-400 {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.16px;
  line-height: 1.5;
}

.Body1-600 {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.16px;
  line-height: 1.5;
}

.H5-600 {
  font-family: va r(--font-family-poppins);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 1.3;
}

.h1-600 {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-48px);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -1.44px;
  line-height: 1.2;
}

.H4-500 {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.72px;
  line-height: 1.2;
}
.H5-600 {
font-family: Poppins;
font-size: var(--xl, 20px);
font-style: normal;
font-weight: 600;
line-height: 28px; /* 140% */
letter-spacing: -0.4px;
}

.Body2-300 {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 300;
  letter-spacing: -0.14px;
  line-height: 1.5;
}

.body1-600 {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.16px;
  line-height: 1.5;
}

.Body2-400 {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.16px;
  line-height: 1.5;
}


.h1-400 {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-48px);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -1.44px;
  line-height: 1.3;
}

.h6-600 {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.18px;
  line-height: 1.3;
}

.h4-400 {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.72px;
  line-height: 1.3;
}

.h4-600 {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.72px;
  line-height: 1.3;
}

.h6-400 {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.18px;
  line-height: 1.5;
}

.h3-500 {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xxxxl);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.9px;
  line-height: 1.5;
}



.h2-500 {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-36px);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -1.08px;
  line-height: 1.3;
}

.hero {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-55px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -1.65px;
  line-height: 1.3;
}

.Small-400 {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.12px;
  line-height: 1.3;
}

.caption1-400 {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.14px;
  line-height: 20px;
}

.poppins-medium-black-16px {
  color: var(--black);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 500;
}

.poppins-bold-eerie-black-8px {
  color: var(--eerie-black);
  font-family: var(--font-family-poppins);
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
}

.poppins-medium-eerie-black-12px {
  color: var(--eerie-black);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 500;
}

.suit-extra-extra-bold-santas-gray-16px {
  color: var(--santas-gray-2);
  font-family: var(--font-family-suit-extrabold);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 800;
}

.poppins-semi-bold-eerie-black-9px {
  color: var(--eerie-black);
  font-family: var(--font-family-poppins);
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
}

.poppins-semi-bold-chambray-9px {
  color: var(--chambray);
  font-family: var(--font-family-poppins);
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
}

.poppins-medium-ogre-odor-12px {
  color: var(--ogre-odor-2);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 500;
}

.poppins-semi-bold-black-12px {
  color: var(--black);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 600;
}

.poppins-semi-bold-christi-9px {
  color: var(--christi);
  font-family: var(--font-family-poppins);
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
}

.poppins-bold-black-12px {
  color: var(--black);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 700;
}

.poppins-medium-lima-12px {
  color: var(--lima);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 500;
}

.poppins-medium-chambray-12px {
  color: var(--chambray);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 500;
}

.suit-extra-extra-bold-white-16px {
  color: var(--white);
  font-family: var(--font-family-suit-extrabold);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 800;
}

.gray-900 {
  color: var(--gray-900);
}

@media (max-width: 768px) {
  .h1-600 {
    font-size: 38px;
    line-height: 1.2;
  }
  .h1-400 {
    font-size: 38px;
    line-height: 1.2;
  }
  .SectionTitle {
    font-family: Poppins;
    font-size: var(--3xl, 25px);
    font-style: normal;
    font-weight: 600;
    line-height: 36px; /* 144% */
    letter-spacing: -0.75px;
  }
  .h2-500 {
    font-size: 26px;
    line-height: 1.5;
  }
  .h3-500 {
  font-family: Poppins;
  font-size: var(--3xl, 25px);
  font-style: normal;
  font-weight: 500;
  line-height: 40px; /* 160% */
  letter-spacing: -0.75px;
  }
  .h4-400 {
    font-size: 20px;
    line-height: 1.5;
  }
  .h4-600 {
    font-size: 20px;
    line-height: 1.5;
    font-weight: 600;
  }
  .h6-400 {
    font-size: var(--font-size-12px);
  }

  
  .btn-text, .Body2-400 {
    font-size: 13px;
    line-height: 1.8;
  }
}