/** Shopify CDN: Minification failed

Line 17:12 Expected identifier but found whitespace
Line 17:13 Unexpected "'Clash Display'"

**/
/* ============================= */
/* GOOGLE FONTS CDN */
/* ============================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap');

/* ============================= */
/* ROOT VARIABLES */
/* ============================= */
font-family: 'Clash Display', sans-serif;
:root {
  --body-font: 'Inter', sans-serif;
  --heading-font: 'Manrope', sans-serif;
  --space-grotesk-font: 'Space Grotesk', sans-serif;
}


/* ============================= */
/* GLOBAL APPLY */
/* ============================= */

body {
  font-family: var(--body-font);
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  font-weight: 700;
}


/* ============================= */
/* FONT CLASSES (INTER - BODY) */
/* ============================= */

.Inter-regular    { font-family: var(--body-font); font-weight: 400; }
.Inter-medium     { font-family: var(--body-font); font-weight: 500; }
.Inter-semibold   { font-family: var(--body-font); font-weight: 600; }
.Inter-bold       { font-family: var(--body-font); font-weight: 700; }


/* ============================= */
/* FONT CLASSES (MANROPE - HEADINGS) */
/* ============================= */

.Manrope-regular    { font-family: var(--heading-font); font-weight: 400; }
.Manrope-medium     { font-family: var(--heading-font); font-weight: 500; }
.Manrope-semibold   { font-family: var(--heading-font); font-weight: 600; }
.Manrope-bold       { font-family: var(--heading-font); font-weight: 700; }
.Manrope-extrabold  { font-family: var(--heading-font); font-weight: 800; }


/* ============================= */
/* FONT CLASSES (SPACE GROTESK - ALL WEIGHTS) */
/* ============================= */

.SpaceGrotesk-light     { font-family: var(--space-grotesk-font); font-weight: 300; }
.SpaceGrotesk-regular   { font-family: var(--space-grotesk-font); font-weight: 400; }
.SpaceGrotesk-medium    { font-family: var(--space-grotesk-font); font-weight: 500; }
.SpaceGrotesk-semibold  { font-family: var(--space-grotesk-font); font-weight: 600; }
.SpaceGrotesk-bold      { font-family: var(--space-grotesk-font); font-weight: 700; }


/* ============================= */
/* GENERIC WEIGHT UTILITIES */
/* ============================= */

.font-light    { font-weight: 300; }
.font-regular  { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-extrabold{ font-weight: 800; }


/* ============================= */
/* FONT SIZES */
/* ============================= */

.xl-font { font-size: 55px; }
.level-1 { font-size: 45px; }
.level-2 { font-size: 43px; }
.level-3 { font-size: 23px; }
.level-4 { font-size: 21px; }
.level-5 { font-size: 20px; }
.level-6 { font-size: 15px; }
.level-7 { font-size: 14px; }
.level-8 { font-size: 12px; }


/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media (max-width: 1024px) {
  .xl-font { font-size: 40px; }
  .level-1 { font-size: 38px; }
  .level-2 { font-size: 34px; }
}

@media (max-width: 576px) {
  .xl-font { font-size: 32px; }
  .level-1 { font-size: 28px; }
  .level-2 { font-size: 25px; }
}