@font-face {
    font-family: 'Nunito Sans';
    src: url('../fonts/NunitoSans/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf') format('truetype');
    font-weight: 100 900; /* Specify the range of weights supported */
    font-stretch: 75% 125%; /* Specify the range of widths supported */
    font-style: normal; /* Specify if it's normal, italic, or oblique */
    font-display: swap;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url('../fonts/NunitoSans/NunitoSans-Italic-VariableFont_YTLC,opsz,wdth,wght.ttf') format('truetype');
    font-weight: 100 900; /* Specify the range of weights supported */
    font-stretch: 75% 125%; /* Specify the range of widths supported */
    font-style: italic; /* Specify if it's normal, italic, or oblique */
    font-display: swap;
}

/* ======================= Mona Sans license ======================= */
/* Regular Styles */
@font-face {
    font-family: 'MonaSans';
    src: url('../fonts/MonaSans/MonaSans-Regular.woff2') format('woff2'), url('../fonts/MonaSans/MonaSans-Regular.otf') format('opentype'), url('../fonts/MonaSans/MonaSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    /* Add this line */
}

@font-face {
    font-family: 'MonaSans';
    src: url('../fonts/MonaSans/MonaSans-Italic.woff2') format('woff2'), url('../fonts/MonaSans/MonaSans-Italic.otf') format('opentype'), url('../fonts/MonaSans/MonaSans-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    /* Add this line */
}

/* Light Styles */
@font-face {
    font-family: 'MonaSans';
    src: url('../fonts/MonaSans/MonaSans-Light.woff2') format('woff2'), url('../fonts/MonaSans/MonaSans-Light.otf') format('opentype'), url('../fonts/MonaSans/MonaSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    /* Add this line */
}

@font-face {
    font-family: 'MonaSans';
    src: url('../fonts/MonaSans/MonaSans-LightItalic.woff2') format('woff2'), url('../fonts/MonaSans/MonaSans-LightItalic.otf') format('opentype'), url('../fonts/MonaSans/MonaSans-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
    /* Add this line */
}

/* Medium Styles */
@font-face {
    font-family: 'MonaSans';
    src: url('../fonts/MonaSans/MonaSans-Medium.woff2') format('woff2'), url('../fonts/MonaSans/MonaSans-Medium.otf') format('opentype'), url('../fonts/MonaSans/MonaSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    /* Add this line */
}

@font-face {
    font-family: 'MonaSans';
    src: url('../fonts/MonaSans/MonaSans-MediumItalic.woff2') format('woff2'), url('../fonts/MonaSans/MonaSans-MediumItalic.otf') format('opentype'), url('../fonts/MonaSans/MonaSans-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
    /* Add this line */
}

/* SemiBold Styles */
@font-face {
    font-family: 'MonaSans';
    src: url('../fonts/MonaSans/MonaSans-SemiBold.woff2') format('woff2'), url('../fonts/MonaSans/MonaSans-SemiBold.otf') format('opentype'), url('../fonts/MonaSans/MonaSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    /* Add this line */
}

@font-face {
    font-family: 'MonaSans';
    src: url('../fonts/MonaSans/MonaSans-SemiBoldItalic.woff2') format('woff2'), url('../fonts/MonaSans/MonaSans-SemiBoldItalic.otf') format('opentype'), url('../fonts/MonaSans/MonaSans-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
    /* Add this line */
}

/* Bold Styles */
@font-face {
    font-family: 'MonaSans';
    src: url('../fonts/MonaSans/MonaSans-Bold.woff2') format('woff2'), url('../fonts/MonaSans/MonaSans-Bold.otf') format('opentype'), url('../fonts/MonaSans/MonaSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    /* Add this line */
}

@font-face {
    font-family: 'MonaSans';
    src: url('../fonts/MonaSans/MonaSans-BoldItalic.woff2') format('woff2'), url('../fonts/MonaSans/MonaSans-BoldItalic.otf') format('opentype'), url('../fonts/MonaSans/MonaSans-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
    /* Add this line */
}

/* ExtraBold Styles */
@font-face {
    font-family: 'MonaSans';
    src: url('../fonts/MonaSans/MonaSans-ExtraBold.woff2') format('woff2'), url('../fonts/MonaSans/MonaSans-ExtraBold.otf') format('opentype'), url('../fonts/MonaSans/MonaSans-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    /* Add this line */
}

@font-face {
    font-family: 'MonaSans';
    src: url('../fonts/MonaSans/MonaSans-ExtraBoldItalic.woff2') format('woff2'), url('../fonts/MonaSans/MonaSans-ExtraBoldItalic.otf') format('opentype'), url('../fonts/MonaSans/MonaSans-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
    /* Add this line */
}

/* Black Styles */
@font-face {
    font-family: 'MonaSans';
    src: url('../fonts/MonaSans/MonaSans-Black.woff2') format('woff2'), url('../fonts/MonaSans/MonaSans-Black.otf') format('opentype'), url('../fonts/MonaSans/MonaSans-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    /* Add this line */
}

@font-face {
    font-family: 'MonaSans';
    src: url('../fonts/MonaSans/MonaSans-BlackItalic.woff2') format('woff2'), url('../fonts/MonaSans/MonaSans-BlackItalic.otf') format('opentype'), url('../fonts/MonaSans/MonaSans-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
    /* Add this line */
}

/* Regular */
@font-face {
    font-family: 'MonaSansCondensed';
    src: url('../fonts/MonaSans/MonaSansCondensed-Regular.woff2') format('woff2'), url('../fonts/MonaSans/MonaSansCondensed-Regular.otf') format('opentype'), url('../fonts/MonaSans/MonaSansCondensed-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    /* Add this line */
}

/* Italic */
@font-face {
    font-family: 'MonaSansCondensed';
    src: url('../fonts/MonaSans/MonaSansCondensed-Italic.woff2') format('woff2'), url('../fonts/MonaSans/MonaSansCondensed-Italic.otf') format('opentype'), url('../fonts/MonaSans/MonaSansCondensed-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    /* Add this line */
}

/* Light */
@font-face {
    font-family: 'MonaSansCondensed';
    src: url('../fonts/MonaSans/MonaSansCondensed-Light.woff2') format('woff2'), url('../fonts/MonaSans/MonaSansCondensed-Light.otf') format('opentype'), url('../fonts/MonaSans/MonaSansCondensed-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    /* Add this line */
}

/* Light Italic */
@font-face {
    font-family: 'MonaSansCondensed';
    src: url('../fonts/MonaSans/MonaSansCondensed-LightItalic.woff2') format('woff2'), url('../fonts/MonaSans/MonaSansCondensed-LightItalic.otf') format('opentype'), url('../fonts/MonaSans/MonaSansCondensed-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
    /* Add this line */
}

/* Medium */
@font-face {
    font-family: 'MonaSansCondensed';
    src: url('../fonts/MonaSans/MonaSansCondensed-Medium.woff2') format('woff2'), url('../fonts/MonaSans/MonaSansCondensed-Medium.otf') format('opentype'), url('../fonts/MonaSans/MonaSansCondensed-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    /* Add this line */
}

/* Medium Italic */
@font-face {
    font-family: 'MonaSansCondensed';
    src: url('../fonts/MonaSans/MonaSansCondensed-MediumItalic.woff2') format('woff2'), url('../fonts/MonaSans/MonaSansCondensed-MediumItalic.otf') format('opentype'), url('../fonts/MonaSans/MonaSansCondensed-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
    /* Add this line */
}

/* Bold */
@font-face {
    font-family: 'MonaSansCondensed';
    src: url('../fonts/MonaSans/MonaSansCondensed-Bold.woff2') format('woff2'), url('../fonts/MonaSans/MonaSansCondensed-Bold.otf') format('opentype'), url('../fonts/MonaSans/MonaSansCondensed-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    /* Add this line */
}

/* Bold Italic */
@font-face {
    font-family: 'MonaSansCondensed';
    src: url('../fonts/MonaSans/MonaSansCondensed-BoldItalic.woff2') format('woff2'), url('../fonts/MonaSans/MonaSansCondensed-BoldItalic.otf') format('opentype'), url('../fonts/MonaSans/MonaSansCondensed-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
    /* Add this line */
}

/* Black */
@font-face {
    font-family: 'MonaSansCondensed';
    src: url('../fonts/MonaSans/MonaSansCondensed-Black.woff2') format('woff2'), url('../fonts/MonaSans/MonaSansCondensed-Black.otf') format('opentype'), url('../fonts/MonaSans/MonaSansCondensed-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    /* Add this line */
}

/* Black Italic */
@font-face {
    font-family: 'MonaSansCondensed';
    src: url('../fonts/MonaSans/MonaSansCondensed-BlackItalic.woff2') format('woff2'), url('../fonts/MonaSans/MonaSansCondensed-BlackItalic.otf') format('opentype'), url('../fonts/MonaSans/MonaSansCondensed-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
    /* Add this line */
}

.nunito-sans {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.nunito-sans-200 {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}

.nunito-sans-300 {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.nunito-sans-400 {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.nunito-sans-500 {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.nunito-sans-600 {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.nunito-sans-700 {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.nunito-sans-800 {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}

.nunito-sans-900 {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
}

.nunito-sans-1000 {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 1000;
    font-style: normal;
}

.product-subtitle {
    font-weight: 500;
    font-size: 11px;
    line-height: 13px;
}

@media (min-width: 575.8px) {
    .product-subtitle {
        font-size: 14px;
        line-height: 17px;
    }
}

.big-title {
    font-weight: 700;
    font-size: 100px;
    line-height: 1;
    margin-block: 0;
    width: 100%;
    flex-basis: 100%;
    max-width: 100%;
}

@media (min-width: 575.8px) {
    .big-title {
        font-size: 150px;
        line-height: 1;
    }
}

@media (min-width: 991.8px) {
    .big-title {
        font-size: 200px;
        line-height: 1;
    }
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: wrap;
    margin-block: 0;
}

h1, .h1 {
    font-weight: 600;
    font-size: 40px;
    line-height: 1;
    margin-block: 0;
    width: 100%;
    flex-basis: 100%;
    max-width: 100%;
    @media (min-width: 575.8px) {
        font-size: 52px;
    }
    @media (min-width: 991.8px) {
        font-size: 64px;

    }
}


h2, .h2 {
    font-weight: 600;
    font-size: 32px;
    line-height: 36px;
    margin-block: 0;
    width: 100%;
    flex-basis: 100%;
    max-width: 100%;
    margin-bottom: 24px;
}

@media (min-width: 575.8px) {
    h2, .h2 {
        font-size: 48px;
        line-height: 56px;
    }
}

h3, .h3 {
    font-size: 24px;
    line-height: 1;
    text-align: center;
    font-weight: 600;
}

@media (min-width: 575.8px) {
    h3, .h3 {
        font-size: 32px;
        line-height: 1;
    }
}

h4,
.h4{
    font-size: 24px;
    line-height: 1;
}

p {
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
}

.small {
    font-size: 12px;
    line-height: 18px;
}

@media (min-width: 575.8px) {
    .small {
        font-size: 16px;
        line-height: 20px;
    }
}

.small > * {
    font-size: 12px;
    line-height: 18px;
}

@media (min-width: 575.8px) {
    .small > * {
        font-size: 16px;
        line-height: 20px;
    }
}

.big {
    font-size: 18px;
    line-height: 24px;
}

@media (min-width: 575.8px) {
    .big {
        font-size: 24px;
        line-height: 36px;
    }
}

li {
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
}

.tiny-button {
    font-weight: 500;
    font-size: 12px;
    line-height: 100%;
    padding: 12px;
    text-decoration-line: none;
    border-radius: 100px;
    transition: 0.4s ease-out;
}

.small-button {
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    padding: 16px 24px;
    text-decoration-line: none;
    border-radius: 100px;
    transition: 0.4s ease-out;
}

.medium-button {
    font-weight: 500;
    font-size: 18px;
    line-height: 18px;
    padding: 23px 32px;
    text-decoration-line: none;
    border-radius: 100px;
    transition: 0.4s ease-out;
}

.big-button {
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    padding: 16px 32px;
    text-decoration-line: none;
    border-radius: 100px;
    transition: 0.4s ease-out;
    text-align: center;

    @media (min-width: 575.8px) {
        font-size: 22px;
        line-height: 32px;
        padding: 16px 40px;
    }
}


.orange-button {
    background-color: var(--orange-100);
    color: var(--white);
}

.orange-button:hover {
    background-color: var(--purple-100);
}

.orange-button-green {
    background-color: var(--orange-100);
    color: var(--white);
}

.orange-button-green:hover {
    background-color: var(--green-500);
}

.green-button {
    background-color: var(--green-600);
    color: var(--white);
}

.white-button-green {
    background-color: var(--white);
    color: var(--green-600);
}

.white-button-green:hover {
    background-color: var(--orange-100);
    color: var(--white);
}

.green-button:hover {
    background-color: var(--orange-100);
}

.purple-button {
    background-color: var(--purple-100);
    color: var(--white);
}

.purple-button:hover {
    background-color: var(--orange-100);
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.f-500 {
    font-weight: 500;
}

.f-600 {
    font-weight: 600;
}

.lg-text-center {
    text-align: center;
    @media (min-width: 991.8px) {
        text-align: left;
    }
}

.md-text-center {
    text-align: center;
    @media (min-width: 767.8px) {
        text-align: left;
    }
}

.uppercase {
    text-transform: uppercase;
}