:root {
    /* CONTAINER */
    --container-fullwidth: 1366px;
    --container-1160: 1160px;

    /* SECTION - PADDING */
    --section-padding-default: var(--section-padding-80);
    --section-padding-default-half: var(--section-padding-80-half);
    --section-padding-10: 10px;
    --section-padding-10-half: calc(var(--section-padding-10) / 2);
    --section-padding-20: 20px;
    --section-padding-20-half: calc(var(--section-padding-20) / 2);
    --section-padding-30: 30px;
    --section-padding-30-half: calc(var(--section-padding-30) / 2);
    --section-padding-40: 40px;
    --section-padding-40-half: calc(var(--section-padding-40) / 2);
    --section-padding-50: 50px;
    --section-padding-50-half: calc(var(--section-padding-50) / 2);
    --section-padding-60: 60px;
    --section-padding-60-half: calc(var(--section-padding-60) / 2);
    --section-padding-70: 70px;
    --section-padding-70-half: calc(var(--section-padding-70) / 2);
    --section-padding-80: 80px;
    --section-padding-80-half: calc(var(--section-padding-80) / 2);
    --section-padding-90: 90px;
    --section-padding-90-half: calc(var(--section-padding-90) / 2);
    --section-padding-100: 100px;
    --section-padding-100-half: calc(var(--section-padding-100) / 2);

    /* SECTION - GAP */
    --section-gap-default: var(--section-gap-10);
    --section-gap-4: 4px;
    --section-gap-8: 8px;
    --section-gap-10: 10px;
    --section-gap-16: 16px;
    --section-gap-20: 20px;
    --section-gap-30: 30px;
    --section-gap-40: 40px;

    /* SECTION - RADIUS */
    --section-radius-default: var(--section-radius-16);
    --section-radius-0: 0px;
    --section-radius-8: 8px;
    --section-radius-10: 10px;
    --section-radius-16: 16px;
    --section-radius-32: 32px;

    /* BUTTON - PADDING */
    --desktop-btn-padding-vertical-default: var(--desktop-btn-padding-vertical-md);
    --desktop-btn-padding-horizontal-default: var(--desktop-btn-padding-horizontal-md);
    --desktop-btn-padding-gap-default: var(--desktop-btn-padding-gap-md);
    --desktop-btn-padding-vertical-sm: 8px;
    --desktop-btn-padding-vertical-md: 15px;
    --desktop-btn-padding-vertical-lg: 18px;
    --desktop-btn-padding-vertical-xl: 20px;
    --desktop-btn-padding-horizontal-sm: 20px;
    --desktop-btn-padding-horizontal-md: 36px;
    --desktop-btn-padding-horizontal-lg: 42px;
    --desktop-btn-padding-horizontal-xl: 45px;
    --desktop-btn-padding-gap-sm: 6px;
    --desktop-btn-padding-gap-md: 16px;
    --desktop-btn-padding-gap-lg: 16px;
    --desktop-btn-padding-gap-xl: 20px;
    --mobile-btn-padding-vertical-default: var(--mobile-btn-padding-vertical-md);
    --mobile-btn-padding-horizontal-default: var(--mobile-btn-padding-horizontal-md);
    --mobile-btn-padding-gap-default: var(--mobile-btn-padding-gap-md);
    --mobile-btn-padding-vertical-sm: 6px;
    --mobile-btn-padding-vertical-md: 12px;
    --mobile-btn-padding-vertical-lg: 14px;
    --mobile-btn-padding-vertical-xl: 16px;
    --mobile-btn-padding-horizontal-sm: 16px;
    --mobile-btn-padding-horizontal-md: 26px;
    --mobile-btn-padding-horizontal-lg: 30px;
    --mobile-btn-padding-horizontal-xl: 32px;
    --mobile-btn-padding-gap-sm: 4px;
    --mobile-btn-padding-gap-md: 12px;
    --mobile-btn-padding-gap-lg: 14px;
    --mobile-btn-padding-gap-xl: 16px;

    /* BUTTON - RADIUS */
    --btn-radius-default: var(--btn-radius-8);
    --btn-radius-0: 0px;
    --btn-radius-8: 8px;
    --btn-radius-10: 10px;
    --btn-radius-16: 16px;
    --btn-radius-32: 32px;
    --btn-radius-rounded: 1000px;

    /* TYPE */
    --font-family-heading: "Inter";
    --font-family-body: "Spline Sans";
    --desktop-heading-regular-hero-family: var(--font-family-heading);
    --desktop-heading-regular-hero-size: 48px;
    --desktop-heading-regular-hero-weight: 400;
    --desktop-heading-regular-hero-style: normal;
    --desktop-heading-regular-2xl-family: var(--font-family-heading);
    --desktop-heading-regular-2xl-size: 72px;
    --desktop-heading-regular-2xl-weight: 400;
    --desktop-heading-regular-2xl-style: normal;
    --desktop-heading-regular-xl-family: var(--font-family-heading);
    --desktop-heading-regular-xl-size: 60px;
    --desktop-heading-regular-xl-weight: 400;
    --desktop-heading-regular-xl-style: normal;
    --desktop-heading-regular-lg-family: var(--font-family-heading);
    --desktop-heading-regular-lg-size: 48px;
    --desktop-heading-regular-lg-weight: 400;
    --desktop-heading-regular-lg-style: normal;
    --desktop-heading-regular-md-family: var(--font-family-heading);
    --desktop-heading-regular-md-size: 36px;
    --desktop-heading-regular-md-weight: 400;
    --desktop-heading-regular-md-style: normal;
    --desktop-heading-regular-sm-family: var(--font-family-heading);
    --desktop-heading-regular-sm-size: 30px;
    --desktop-heading-regular-sm-weight: 400;
    --desktop-heading-regular-sm-style: normal;
    --desktop-heading-regular-xs-family: var(--font-family-heading);
    --desktop-heading-regular-xs-size: 24px;
    --desktop-heading-regular-xs-weight: 400;
    --desktop-heading-regular-xs-style: normal;
    --desktop-heading-regular-2xs-family: var(--font-family-heading);
    --desktop-heading-regular-2xs-size: 18px;
    --desktop-heading-regular-2xs-weight: 400;
    --desktop-heading-regular-2xs-style: normal;
    --desktop-heading-medium-hero-family: var(--font-family-heading);
    --desktop-heading-medium-hero-size: 48px;
    --desktop-heading-medium-hero-weight: 500;
    --desktop-heading-medium-hero-style: normal;
    --desktop-heading-medium-2xl-family: var(--font-family-heading);
    --desktop-heading-medium-2xl-size: 72px;
    --desktop-heading-medium-2xl-weight: 500;
    --desktop-heading-medium-2xl-style: normal;
    --desktop-heading-medium-xl-family: var(--font-family-heading);
    --desktop-heading-medium-xl-size: 60px;
    --desktop-heading-medium-xl-weight: 500;
    --desktop-heading-medium-xl-style: normal;
    --desktop-heading-medium-lg-family: var(--font-family-heading);
    --desktop-heading-medium-lg-size: 48px;
    --desktop-heading-medium-lg-weight: 500;
    --desktop-heading-medium-lg-style: normal;
    --desktop-heading-medium-md-family: var(--font-family-heading);
    --desktop-heading-medium-md-size: 36px;
    --desktop-heading-medium-md-weight: 500;
    --desktop-heading-medium-md-style: normal;
    --desktop-heading-medium-sm-family: var(--font-family-heading);
    --desktop-heading-medium-sm-size: 30px;
    --desktop-heading-medium-sm-weight: 500;
    --desktop-heading-medium-sm-style: normal;
    --desktop-heading-medium-xs-family: var(--font-family-heading);
    --desktop-heading-medium-xs-size: 24px;
    --desktop-heading-medium-xs-weight: 500;
    --desktop-heading-medium-xs-style: normal;
    --desktop-heading-medium-2xs-family: var(--font-family-heading);
    --desktop-heading-medium-2xs-size: 18px;
    --desktop-heading-medium-2xs-weight: 500;
    --desktop-heading-medium-2xs-style: normal;
    --desktop-heading-semi-bold-hero-family: var(--font-family-heading);
    --desktop-heading-semi-bold-hero-size: 48px;
    --desktop-heading-semi-bold-hero-weight: 600;
    --desktop-heading-semi-bold-hero-style: normal;
    --desktop-heading-semi-bold-2xl-family: var(--font-family-heading);
    --desktop-heading-semi-bold-2xl-size: 72px;
    --desktop-heading-semi-bold-2xl-weight: 600;
    --desktop-heading-semi-bold-2xl-style: normal;
    --desktop-heading-semi-bold-xl-family: var(--font-family-heading);
    --desktop-heading-semi-bold-xl-size: 60px;
    --desktop-heading-semi-bold-xl-weight: 600;
    --desktop-heading-semi-bold-xl-style: normal;
    --desktop-heading-semi-bold-lg-family: var(--font-family-heading);
    --desktop-heading-semi-bold-lg-size: 48px;
    --desktop-heading-semi-bold-lg-weight: 600;
    --desktop-heading-semi-bold-lg-style: normal;
    --desktop-heading-semi-bold-md-family: var(--font-family-heading);
    --desktop-heading-semi-bold-md-size: 36px;
    --desktop-heading-semi-bold-md-weight: 600;
    --desktop-heading-semi-bold-md-style: normal;
    --desktop-heading-semi-bold-sm-family: var(--font-family-heading);
    --desktop-heading-semi-bold-sm-size: 30px;
    --desktop-heading-semi-bold-sm-weight: 600;
    --desktop-heading-semi-bold-sm-style: normal;
    --desktop-heading-semi-bold-xs-family: var(--font-family-heading);
    --desktop-heading-semi-bold-xs-size: 24px;
    --desktop-heading-semi-bold-xs-weight: 600;
    --desktop-heading-semi-bold-xs-style: normal;
    --desktop-heading-semi-bold-xs-family: var(--font-family-heading);
    --desktop-heading-semi-bold-xs-size: 18px;
    --desktop-heading-semi-bold-xs-weight: 600;
    --desktop-heading-semi-bold-xs-style: normal;
    --desktop-heading-bold-hero-family: var(--font-family-heading);
    --desktop-heading-bold-hero-size: 48px;
    --desktop-heading-bold-hero-weight: 700;
    --desktop-heading-bold-hero-style: normal;
    --desktop-heading-bold-2xl-family: var(--font-family-heading);
    --desktop-heading-bold-2xl-size: 72px;
    --desktop-heading-bold-2xl-weight: 700;
    --desktop-heading-bold-2xl-style: normal;
    --desktop-heading-bold-xl-family: var(--font-family-heading);
    --desktop-heading-bold-xl-size: 60px;
    --desktop-heading-bold-xl-weight: 700;
    --desktop-heading-bold-xl-style: normal;
    --desktop-heading-bold-lg-family: var(--font-family-heading);
    --desktop-heading-bold-lg-size: 48px;
    --desktop-heading-bold-lg-weight: 700;
    --desktop-heading-bold-lg-style: normal;
    --desktop-heading-bold-md-family: var(--font-family-heading);
    --desktop-heading-bold-md-size: 36px;
    --desktop-heading-bold-md-weight: 700;
    --desktop-heading-bold-md-style: normal;
    --desktop-heading-bold-sm-family: var(--font-family-heading);
    --desktop-heading-bold-sm-size: 30px;
    --desktop-heading-bold-sm-weight: 700;
    --desktop-heading-bold-sm-style: normal;
    --desktop-heading-bold-xs-family: var(--font-family-heading);
    --desktop-heading-bold-xs-size: 24px;
    --desktop-heading-bold-xs-weight: 700;
    --desktop-heading-bold-xs-style: normal;
    --desktop-heading-bold-2xs-family: var(--font-family-heading);
    --desktop-heading-bold-2xs-size: 18px;
    --desktop-heading-bold-2xs-weight: 700;
    --desktop-heading-bold-2xs-style: normal;
    --desktop-heading-light-hero-family: var(--font-family-heading);
    --desktop-heading-light-hero-size: 48px;
    --desktop-heading-light-hero-weight: 300;
    --desktop-heading-light-hero-style: normal;
    --desktop-heading-light-2xl-family: var(--font-family-heading);
    --desktop-heading-light-2xl-size: 72px;
    --desktop-heading-light-2xl-weight: 300;
    --desktop-heading-light-2xl-style: normal;
    --desktop-heading-light-xl-family: var(--font-family-heading);
    --desktop-heading-light-xl-size: 60px;
    --desktop-heading-light-xl-weight: 300;
    --desktop-heading-light-xl-style: normal;
    --desktop-heading-light-lg-family: var(--font-family-heading);
    --desktop-heading-light-lg-size: 48px;
    --desktop-heading-light-lg-weight: 300;
    --desktop-heading-light-lg-style: normal;
    --desktop-heading-light-md-family: var(--font-family-heading);
    --desktop-heading-light-md-size: 36px;
    --desktop-heading-light-md-weight: 300;
    --desktop-heading-light-md-style: normal;
    --desktop-heading-light-sm-family: var(--font-family-heading);
    --desktop-heading-light-sm-size: 30px;
    --desktop-heading-light-sm-weight: 300;
    --desktop-heading-light-sm-style: normal;
    --desktop-heading-light-xs-family: var(--font-family-heading);
    --desktop-heading-light-xs-size: 24px;
    --desktop-heading-light-xs-weight: 300;
    --desktop-heading-light-xs-style: normal;
    --desktop-heading-light-2xs-family: var(--font-family-heading);
    --desktop-heading-light-2xs-size: 18px;
    --desktop-heading-light-2xs-weight: 300;
    --desktop-heading-light-2xs-style: normal;
    --desktop-body-light-xl-family: var(--font-family-body);
    --desktop-body-light-xl-size: 20px;
    --desktop-body-light-xl-weight: 300;
    --desktop-body-light-xl-style: normal;
    --desktop-body-light-lg-family: var(--font-family-body);
    --desktop-body-light-lg-size: 18px;
    --desktop-body-light-lg-weight: 300;
    --desktop-body-light-lg-style: normal;
    --desktop-body-light-md-family: var(--font-family-body);
    --desktop-body-light-md-size: 16px;
    --desktop-body-light-md-weight: 300;
    --desktop-body-light-md-style: normal;
    --desktop-body-light-sm-family: var(--font-family-body);
    --desktop-body-light-sm-size: 14px;
    --desktop-body-light-sm-weight: 300;
    --desktop-body-light-sm-style: normal;
    --desktop-body-light-xs-family: var(--font-family-body);
    --desktop-body-light-xs-size: 12px;
    --desktop-body-light-xs-weight: 300;
    --desktop-body-light-xs-style: normal;
    --desktop-body-regular-xl-family: var(--font-family-body);
    --desktop-body-regular-xl-size: 20px;
    --desktop-body-regular-xl-weight: 400;
    --desktop-body-regular-xl-style: normal;
    --desktop-body-regular-lg-family: var(--font-family-body);
    --desktop-body-regular-lg-size: 18px;
    --desktop-body-regular-lg-weight: 400;
    --desktop-body-regular-lg-style: normal;
    --desktop-body-regular-md-family: var(--font-family-body);
    --desktop-body-regular-md-size: 16px;
    --desktop-body-regular-md-weight: 400;
    --desktop-body-regular-md-style: normal;
    --desktop-body-regular-sm-family: var(--font-family-body);
    --desktop-body-regular-sm-size: 14px;
    --desktop-body-regular-sm-weight: 400;
    --desktop-body-regular-sm-style: normal;
    --desktop-body-regular-xs-family: var(--font-family-body);
    --desktop-body-regular-xs-size: 12px;
    --desktop-body-regular-xs-weight: 400;
    --desktop-body-regular-xs-style: normal;
    --desktop-body-medium-xl-family: var(--font-family-body);
    --desktop-body-medium-xl-size: 20px;
    --desktop-body-medium-xl-weight: 500;
    --desktop-body-medium-xl-style: normal;
    --desktop-body-medium-lg-family: var(--font-family-body);
    --desktop-body-medium-lg-size: 18px;
    --desktop-body-medium-lg-weight: 500;
    --desktop-body-medium-lg-style: normal;
    --desktop-body-medium-md-family: var(--font-family-body);
    --desktop-body-medium-md-size: 16px;
    --desktop-body-medium-md-weight: 500;
    --desktop-body-medium-md-style: normal;
    --desktop-body-medium-sm-family: var(--font-family-body);
    --desktop-body-medium-sm-size: 14px;
    --desktop-body-medium-sm-weight: 500;
    --desktop-body-medium-sm-style: normal;
    --desktop-body-medium-xs-family: var(--font-family-body);
    --desktop-body-medium-xs-size: 12px;
    --desktop-body-medium-xs-weight: 500;
    --desktop-body-medium-xs-style: normal;
    --desktop-body-semi-bold-xl-family: var(--font-family-body);
    --desktop-body-semi-bold-xl-size: 20px;
    --desktop-body-semi-bold-xl-weight: 600;
    --desktop-body-semi-bold-xl-style: normal;
    --desktop-body-semi-bold-lg-family: var(--font-family-body);
    --desktop-body-semi-bold-lg-size: 18px;
    --desktop-body-semi-bold-lg-weight: 600;
    --desktop-body-semi-bold-lg-style: normal;
    --desktop-body-semi-bold-md-family: var(--font-family-body);
    --desktop-body-semi-bold-md-size: 16px;
    --desktop-body-semi-bold-md-weight: 600;
    --desktop-body-semi-bold-md-style: normal;
    --desktop-body-semi-bold-sm-family: var(--font-family-body);
    --desktop-body-semi-bold-sm-size: 14px;
    --desktop-body-semi-bold-sm-weight: 600;
    --desktop-body-semi-bold-sm-style: normal;
    --desktop-body-semi-bold-xs-family: var(--font-family-body);
    --desktop-body-semi-bold-xs-size: 12px;
    --desktop-body-semi-bold-xs-weight: 600;
    --desktop-body-semi-bold-xs-style: normal;
    --desktop-body-bold-xl-family: var(--font-family-body);
    --desktop-body-bold-xl-size: 20px;
    --desktop-body-bold-xl-weight: 700;
    --desktop-body-bold-xl-style: normal;
    --desktop-body-bold-lg-family: var(--font-family-body);
    --desktop-body-bold-lg-size: 18px;
    --desktop-body-bold-lg-weight: 700;
    --desktop-body-bold-lg-style: normal;
    --desktop-body-bold-md-family: var(--font-family-body);
    --desktop-body-bold-md-size: 16px;
    --desktop-body-bold-md-weight: 700;
    --desktop-body-bold-md-style: normal;
    --desktop-body-bold-sm-family: var(--font-family-body);
    --desktop-body-bold-sm-size: 14px;
    --desktop-body-bold-sm-weight: 700;
    --desktop-body-bold-sm-style: normal;
    --desktop-body-bold-xs-family: var(--font-family-body);
    --desktop-body-bold-xs-size: 12px;
    --desktop-body-bold-xs-weight: 700;
    --desktop-body-bold-xs-style: normal;
    --mobile-heading-light-hero-family: var(--font-family-heading);
    --mobile-heading-light-hero-size: 48px;
    --mobile-heading-light-hero-weight: 300;
    --mobile-heading-light-hero-style: normal;
    --mobile-heading-light-2xl-family: var(--font-family-heading);
    --mobile-heading-light-2xl-size: 72px;
    --mobile-heading-light-2xl-weight: 300;
    --mobile-heading-light-2xl-style: normal;
    --mobile-heading-light-xl-family: var(--font-family-heading);
    --mobile-heading-light-xl-size: 60px;
    --mobile-heading-light-xl-weight: 300;
    --mobile-heading-light-xl-style: normal;
    --mobile-heading-light-lg-family: var(--font-family-heading);
    --mobile-heading-light-lg-size: 48px;
    --mobile-heading-light-lg-weight: 300;
    --mobile-heading-light-lg-style: normal;
    --mobile-heading-light-md-family: var(--font-family-heading);
    --mobile-heading-light-md-size: 36px;
    --mobile-heading-light-md-weight: 300;
    --mobile-heading-light-md-style: normal;
    --mobile-heading-light-sm-family: var(--font-family-heading);
    --mobile-heading-light-sm-size: 30px;
    --mobile-heading-light-sm-weight: 300;
    --mobile-heading-light-sm-style: normal;
    --mobile-heading-light-xs-family: var(--font-family-heading);
    --mobile-heading-light-xs-size: 24px;
    --mobile-heading-light-xs-weight: 300;
    --mobile-heading-light-xs-style: normal;
    --mobile-heading-light-2xs-family: var(--font-family-heading);
    --mobile-heading-light-2xs-size: 18px;
    --mobile-heading-light-2xs-weight: 300;
    --mobile-heading-light-2xs-style: normal;
    --mobile-heading-regular-hero-family: var(--font-family-heading);
    --mobile-heading-regular-hero-size: 48px;
    --mobile-heading-regular-hero-weight: 400;
    --mobile-heading-regular-hero-style: normal;
    --mobile-heading-regular-2xl-family: var(--font-family-heading);
    --mobile-heading-regular-2xl-size: 72px;
    --mobile-heading-regular-2xl-weight: 400;
    --mobile-heading-regular-2xl-style: normal;
    --mobile-heading-regular-xl-family: var(--font-family-heading);
    --mobile-heading-regular-xl-size: 60px;
    --mobile-heading-regular-xl-weight: 400;
    --mobile-heading-regular-xl-style: normal;
    --mobile-heading-regular-lg-family: var(--font-family-heading);
    --mobile-heading-regular-lg-size: 48px;
    --mobile-heading-regular-lg-weight: 400;
    --mobile-heading-regular-lg-style: normal;
    --mobile-heading-regular-md-family: var(--font-family-heading);
    --mobile-heading-regular-md-size: 36px;
    --mobile-heading-regular-md-weight: 400;
    --mobile-heading-regular-md-style: normal;
    --mobile-heading-regular-sm-family: var(--font-family-heading);
    --mobile-heading-regular-sm-size: 30px;
    --mobile-heading-regular-sm-weight: 400;
    --mobile-heading-regular-sm-style: normal;
    --mobile-heading-regular-xs-family: var(--font-family-heading);
    --mobile-heading-regular-xs-size: 24px;
    --mobile-heading-regular-xs-weight: 400;
    --mobile-heading-regular-xs-style: normal;
    --mobile-heading-regular-2xs-family: var(--font-family-heading);
    --mobile-heading-regular-2xs-size: 18px;
    --mobile-heading-regular-2xs-weight: 400;
    --mobile-heading-regular-2xs-style: normal;
    --mobile-heading-medium-hero-family: var(--font-family-heading);
    --mobile-heading-medium-hero-size: 48px;
    --mobile-heading-medium-hero-weight: 500;
    --mobile-heading-medium-hero-style: normal;
    --mobile-heading-medium-2xl-family: var(--font-family-heading);
    --mobile-heading-medium-2xl-size: 72px;
    --mobile-heading-medium-2xl-weight: 500;
    --mobile-heading-medium-2xl-style: normal;
    --mobile-heading-medium-xl-family: var(--font-family-heading);
    --mobile-heading-medium-xl-size: 60px;
    --mobile-heading-medium-xl-weight: 500;
    --mobile-heading-medium-xl-style: normal;
    --mobile-heading-medium-lg-family: var(--font-family-heading);
    --mobile-heading-medium-lg-size: 48px;
    --mobile-heading-medium-lg-weight: 500;
    --mobile-heading-medium-lg-style: normal;
    --mobile-heading-medium-md-family: var(--font-family-heading);
    --mobile-heading-medium-md-size: 36px;
    --mobile-heading-medium-md-weight: 500;
    --mobile-heading-medium-md-style: normal;
    --mobile-heading-medium-sm-family: var(--font-family-heading);
    --mobile-heading-medium-sm-size: 30px;
    --mobile-heading-medium-sm-weight: 500;
    --mobile-heading-medium-sm-style: normal;
    --mobile-heading-medium-xs-family: var(--font-family-heading);
    --mobile-heading-medium-xs-size: 24px;
    --mobile-heading-medium-xs-weight: 500;
    --mobile-heading-medium-xs-style: normal;
    --mobile-heading-medium-2xs-family: var(--font-family-heading);
    --mobile-heading-medium-2xs-size: 18px;
    --mobile-heading-medium-2xs-weight: 500;
    --mobile-heading-medium-2xs-style: normal;
    --mobile-heading-semi-bold-hero-family: var(--font-family-heading);
    --mobile-heading-semi-bold-hero-size: 48px;
    --mobile-heading-semi-bold-hero-weight: 600;
    --mobile-heading-semi-bold-hero-style: normal;
    --mobile-heading-semi-bold-2xl-family: var(--font-family-heading);
    --mobile-heading-semi-bold-2xl-size: 72px;
    --mobile-heading-semi-bold-2xl-weight: 600;
    --mobile-heading-semi-bold-2xl-style: normal;
    --mobile-heading-semi-bold-xl-family: var(--font-family-heading);
    --mobile-heading-semi-bold-xl-size: 60px;
    --mobile-heading-semi-bold-xl-weight: 600;
    --mobile-heading-semi-bold-xl-style: normal;
    --mobile-heading-semi-bold-lg-family: var(--font-family-heading);
    --mobile-heading-semi-bold-lg-size: 48px;
    --mobile-heading-semi-bold-lg-weight: 600;
    --mobile-heading-semi-bold-lg-style: normal;
    --mobile-heading-semi-bold-md-family: var(--font-family-heading);
    --mobile-heading-semi-bold-md-size: 36px;
    --mobile-heading-semi-bold-md-weight: 600;
    --mobile-heading-semi-bold-md-style: normal;
    --mobile-heading-semi-bold-sm-family: var(--font-family-heading);
    --mobile-heading-semi-bold-sm-size: 30px;
    --mobile-heading-semi-bold-sm-weight: 600;
    --mobile-heading-semi-bold-sm-style: normal;
    --mobile-heading-semi-bold-xs-family: var(--font-family-heading);
    --mobile-heading-semi-bold-xs-size: 24px;
    --mobile-heading-semi-bold-xs-weight: 600;
    --mobile-heading-semi-bold-xs-style: normal;
    --mobile-heading-semi-bold-2xs-family: var(--font-family-heading);
    --mobile-heading-semi-bold-2xs-size: 18px;
    --mobile-heading-semi-bold-2xs-weight: 600;
    --mobile-heading-semi-bold-2xs-style: normal;
    --mobile-heading-bold-hero-family: var(--font-family-heading);
    --mobile-heading-bold-hero-size: 48px;
    --mobile-heading-bold-hero-weight: 700;
    --mobile-heading-bold-hero-style: normal;
    --mobile-heading-bold-2xl-family: var(--font-family-heading);
    --mobile-heading-bold-2xl-size: 72px;
    --mobile-heading-bold-2xl-weight: 700;
    --mobile-heading-bold-2xl-style: normal;
    --mobile-heading-bold-xl-family: var(--font-family-heading);
    --mobile-heading-bold-xl-size: 60px;
    --mobile-heading-bold-xl-weight: 700;
    --mobile-heading-bold-xl-style: normal;
    --mobile-heading-bold-lg-family: var(--font-family-heading);
    --mobile-heading-bold-lg-size: 48px;
    --mobile-heading-bold-lg-weight: 700;
    --mobile-heading-bold-lg-style: normal;
    --mobile-heading-bold-md-family: var(--font-family-heading);
    --mobile-heading-bold-md-size: 36px;
    --mobile-heading-bold-md-weight: 700;
    --mobile-heading-bold-md-style: normal;
    --mobile-heading-bold-sm-family: var(--font-family-heading);
    --mobile-heading-bold-sm-size: 30px;
    --mobile-heading-bold-sm-weight: 700;
    --mobile-heading-bold-sm-style: normal;
    --mobile-heading-bold-xs-family: var(--font-family-heading);
    --mobile-heading-bold-xs-size: 24px;
    --mobile-heading-bold-xs-weight: 700;
    --mobile-heading-bold-xs-style: normal;
    --mobile-heading-bold-2xs-family: var(--font-family-heading);
    --mobile-heading-bold-2xs-size: 18px;
    --mobile-heading-bold-2xs-weight: 700;
    --mobile-heading-bold-2xs-style: normal;
    --mobile-body-light-xl-family: var(--font-family-body);
    --mobile-body-light-xl-size: 20px;
    --mobile-body-light-xl-weight: 300;
    --mobile-body-light-xl-style: normal;
    --mobile-body-light-lg-family: var(--font-family-body);
    --mobile-body-light-lg-size: 18px;
    --mobile-body-light-lg-weight: 300;
    --mobile-body-light-lg-style: normal;
    --mobile-body-light-md-family: var(--font-family-body);
    --mobile-body-light-md-size: 16px;
    --mobile-body-light-md-weight: 300;
    --mobile-body-light-md-style: normal;
    --mobile-body-light-sm-family: var(--font-family-body);
    --mobile-body-light-sm-size: 14px;
    --mobile-body-light-sm-weight: 300;
    --mobile-body-light-sm-style: normal;
    --mobile-body-light-xs-family: var(--font-family-body);
    --mobile-body-light-xs-size: 12px;
    --mobile-body-light-xs-weight: 300;
    --mobile-body-light-xs-style: normal;
    --mobile-body-regular-xl-family: var(--font-family-body);
    --mobile-body-regular-xl-size: 20px;
    --mobile-body-regular-xl-weight: 400;
    --mobile-body-regular-xl-style: normal;
    --mobile-body-regular-lg-family: var(--font-family-body);
    --mobile-body-regular-lg-size: 18px;
    --mobile-body-regular-lg-weight: 400;
    --mobile-body-regular-lg-style: normal;
    --mobile-body-regular-md-family: var(--font-family-body);
    --mobile-body-regular-md-size: 16px;
    --mobile-body-regular-md-weight: 400;
    --mobile-body-regular-md-style: normal;
    --mobile-body-regular-sm-family: var(--font-family-body);
    --mobile-body-regular-sm-size: 14px;
    --mobile-body-regular-sm-weight: 400;
    --mobile-body-regular-sm-style: normal;
    --mobile-body-regular-xs-family: var(--font-family-body);
    --mobile-body-regular-xs-size: 12px;
    --mobile-body-regular-xs-weight: 400;
    --mobile-body-regular-xs-style: normal;
    --mobile-body-medium-xl-family: var(--font-family-body);
    --mobile-body-medium-xl-size: 20px;
    --mobile-body-medium-xl-weight: 500;
    --mobile-body-medium-xl-style: normal;
    --mobile-body-medium-lg-family: var(--font-family-body);
    --mobile-body-medium-lg-size: 18px;
    --mobile-body-medium-lg-weight: 500;
    --mobile-body-medium-lg-style: normal;
    --mobile-body-medium-md-family: var(--font-family-body);
    --mobile-body-medium-md-size: 16px;
    --mobile-body-medium-md-weight: 500;
    --mobile-body-medium-md-style: normal;
    --mobile-body-medium-sm-family: var(--font-family-body);
    --mobile-body-medium-sm-size: 14px;
    --mobile-body-medium-sm-weight: 500;
    --mobile-body-medium-sm-style: normal;
    --mobile-body-medium-xs-family: var(--font-family-body);
    --mobile-body-medium-xs-size: 12px;
    --mobile-body-medium-xs-weight: 500;
    --mobile-body-medium-xs-style: normal;
    --mobile-body-semi-bold-xl-family: var(--font-family-body);
    --mobile-body-semi-bold-xl-size: 20px;
    --mobile-body-semi-bold-xl-weight: 600;
    --mobile-body-semi-bold-xl-style: normal;
    --mobile-body-semi-bold-lg-family: var(--font-family-body);
    --mobile-body-semi-bold-lg-size: 18px;
    --mobile-body-semi-bold-lg-weight: 600;
    --mobile-body-semi-bold-lg-style: normal;
    --mobile-body-semi-bold-md-family: var(--font-family-body);
    --mobile-body-semi-bold-md-size: 16px;
    --mobile-body-semi-bold-md-weight: 600;
    --mobile-body-semi-bold-md-style: normal;
    --mobile-body-semi-bold-sm-family: var(--font-family-body);
    --mobile-body-semi-bold-sm-size: 14px;
    --mobile-body-semi-bold-sm-weight: 600;
    --mobile-body-semi-bold-sm-style: normal;
    --mobile-body-semi-bold-xs-family: var(--font-family-body);
    --mobile-body-semi-bold-xs-size: 12px;
    --mobile-body-semi-bold-xs-weight: 600;
    --mobile-body-semi-bold-xs-style: normal;
    --mobile-body-bold-xl-family: var(--font-family-body);
    --mobile-body-bold-xl-size: 20px;
    --mobile-body-bold-xl-weight: 700;
    --mobile-body-bold-xl-style: normal;
    --mobile-body-bold-lg-family: var(--font-family-body);
    --mobile-body-bold-lg-size: 18px;
    --mobile-body-bold-lg-weight: 700;
    --mobile-body-bold-lg-style: normal;
    --mobile-body-bold-md-family: var(--font-family-body);
    --mobile-body-bold-md-size: 16px;
    --mobile-body-bold-md-weight: 700;
    --mobile-body-bold-md-style: normal;
    --mobile-body-bold-sm-family: var(--font-family-body);
    --mobile-body-bold-sm-size: 14px;
    --mobile-body-bold-sm-weight: 700;
    --mobile-body-bold-sm-style: normal;
    --mobile-body-bold-xs-family: var(--font-family-body);
    --mobile-body-bold-xs-size: 12px;
    --mobile-body-bold-xs-weight: 700;
    --mobile-body-bold-xs-style: normal;

    /* COLORS */
    --blue-default: #1681ff;
    --blue-border: #a2cdff;
    --blue-background: #f1f8ff;
    --blue-dark: #005cc9;
    --yellow-default: #fad03d;
    --yellow-border: #fdecb1;
    --yellow-background: #fffcf4;
    --yellow-dark: #e5b306;
    --red-default: #f43232;
    --red-border: #fbadad;
    --red-background: #fff3f3;
    --red-dark: #ce0b0b;
    --green-default: #21cf32;
    --green-border: #a6ecad;
    --green-background: #f2fcf3;
    --green-dark: #168d22;
    --black-default: #1e1e1e;
    --black-paragraph: #575757;
    --grey-border: #cecece;
    --grey-background: #e3e3e3;
    --grey-background-2: #ededed;
    --grey-background-3: #f5f5f5;
    --grey-background-4: #d9d9d9;
    --grey-background-5: #fafafa;
    --white-default: #ffffff;
    --white-transparent: rgba(255 255 255 / 0);

    /* SHADOWS */
    --default-small: 0 7px 15px 0 rgba(0 0 0 / 0.14);
    --default-medium: 0 9px 20px -4px rgba(0 0 0 / 0.15);
    --default-large: 0 15px 29px -8px rgba(0 0 0 / 0.22);
}


/* MENGGANTI FONT STYLE */

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

body,
p,
li,
span,
input,
button {
    /* font-family: var(--font-family-body); */
}