@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
:root {
    --font-primary: "Roboto", sans-serif;
    /* --font-primary: -apple-system, BlinkMacSystemFont, 
               "Segoe UI", Roboto, 
               "Helvetica Neue", Arial, 
               sans-serif; */
    --font-secondary: "Nunito", sans-serif;
    --font-monospace: "Open Sans", sans-serif;

    --font-xxs: 12px;
    --font-xs: 14px;
    --font-sm: 18px;
    --font-md: 22px;
    --font-lg: 27px;
    --font-xl: 35px;
    --font-xxl: 45px;

    --color-dark: #333;
    --color-light: #fff;
    --color-primary: #007bff;
    --color-danger: #b23535;
    --color-success: #117418;
    --color-warning: #80860e;
}

.font-primary { font-family: var(--font-primary); }
.font-secondary { font-family: var(--font-secondary); }
.font-monospace { font-family: var(--font-monospace); }

.text-xxs { font-size: var(--font-xxs); line-height: normal; margin: 0; }
.text-xs { font-size: var(--font-xs); line-height: normal; margin: 0; }
.text-sm { font-size: var(--font-sm); line-height: normal; margin: 0; }
.text-md { font-size: var(--font-md); line-height: normal; margin: 0; }
.text-lg { font-size: var(--font-lg); line-height: normal; margin: 0; }
.text-xl { font-size: var(--font-xl); line-height: normal; margin: 0; }
.text-xxl { font-size: var(--font-xxl); line-height: var(--font-xxl); margin: 0; }

.text-extrabold { font-weight: 700; }
.text-bold { font-weight: 600; }
.text-semibold { font-weight: 500; }
.text-normal { font-weight: 400; }
.text-light { font-weight: 300; }

.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

.color-primary { color: var(--color-primary); }
.color-danger { color: var(--color-danger); }
.color-success { color: var(--color-success); }
.color-light { color: var(--color-light); }
.color-dark { color: var(--color-dark); }

.text-title{
    font-size: 70px;
    line-height: normal;
    font-weight: 400;
    margin: 0;
}
.text-sub-title{
    font-size: 35px;
    line-height: normal;
    font-weight: 500;
    margin: 0;
}
.text-body{
    font-size: 18px;
    line-height: normal;
    margin: 0;
}

@media (max-width: 991.98px) {
    :root {
        --font-xxs: 12px;
        --font-xs: 13px;
        --font-sm: 18px;
        --font-md: 22px;
        --font-lg: 25px;
        --font-xl: 32px;
        --font-xxl: 38px;
    }
    .text-title{
        font-size: 60px;
    }
    .text-sub-title {
        font-size: 35px;
    }
    .text-body {
        font-size: 18px;
    }
}

@media (max-width: 767.98px) {
    :root {
        --font-xxs: 11px;
        --font-xs: 12px;
        --font-sm: 16px;
        --font-md: 19px;
        --font-lg: 23px;
        --font-xl: 33px;
        --font-xxl: 28px;
    }
    .text-title{
        font-size: 35px;
    }
    .text-sub-title {
        font-size: 25px;
    }
    .text-body {
        font-size: 16px;
    }
}