/* Responsive Css */
@media (max-width: 640px){
    h1, .h1{
        font-size: 40px;
        line-height: 44px;
    }
    h2, .h2{
        font-size: 30px;
        line-height: 36px;
    }
    h3, .h3{
        font-size: 24px;
        line-height: 28px;
    }
}

@media (min-width: 641px) and (max-width: 1007px){
    h1, .h1{
        font-size: 45px;
        line-height: 52px;
    }
    h2, .h2{
        font-size: 36px;
        line-height: 42px;
    }
    h3, .h3{
        font-size: 28px;
        line-height: 32px;
    }
}

@media (min-width: 1008px) and (max-width: 1280px){
    h1, .h1{
        font-size: 60px;
        line-height: 68px;
    }
    h2, .h2{
        font-size: 50px;
        line-height: 54px;
    }
    h3, .h3{
        font-size: 32px;
        line-height: 36px;
    }
}

@media (min-width: 1281px){
    h1, .h1{
        font-size: 72px;
        line-height: 74px;
    }
    h2, .h2{
        font-size: 54px;
        line-height: 58px;
    }
    h3, .h3{
        font-size: 36px;
        line-height: 50px;
    }
}
.font-xxl{
    font-size: 24px;
    line-height: 34px;
}
.font-xl{
    font-size: 22px;
    line-height: 38px;
}
.font-lg{
    font-size: 20px;
    line-height: 28px;
}
.font-md{
    font-size: 18px;
    line-height: 30px;
}
.font-regular{
    font-size: 16px;
    line-height: 27px;
}
.font-small{
    font-size: 14px;
    line-height: 30px;
}
.font-xs{
    font-size: 13px;
    line-height: 28px;
}
.font-family-primary{
    font-family: var(--font-family-primary);
}
.font-family-secondary{
    font-family: var(--font-family-secondary);
}
.font-family-secondary-bold{
    font-family: var(--font-family-secondary-bold);
}

.font-color-primary{
    color: var( --font-color-primary);
}
.font-color-secondary{
    color: var(--font-color-secondary);
}
.body-text-color-primary{
    color: var(--body-text-color-primary);
}
.body-text-color-secondary{
    color: var(--body-text-color-secondary);
}