.ui-section-heading {
    --font-size: 52px;
    --text-align: center;
    --text-color: #162749;
    --text-color-highlight: #E99335;

    --xs-font-size: 18px;
    --sm-font-size: 24px;
    --md-font-size: 36px;
    --lg-font-size: 40px;
    --xl-font-size: 44px;
    --xxl-font-size: 52px;

    --xs-text-align: center;
    --sm-text-align: center;
    --md-text-align: center;
    --lg-text-align: center;
    --xl-text-align: center;
    --xxl-text-align: center;

    @media (width <= 1440px) {
        /*--xxl*/
        --font-size: var(--xxl-font-size);
        --text-align: var(--xxl-text-align);
    }

    @media (width <= 1200px) {
        /*--xl*/
        --font-size: var(--xl-font-size);
        --text-align: var(--xl-text-align);
    }

    @media (width <= 992px) {
        /*--lg*/
        --font-size: var(--lg-font-size);
        --text-align: var(--lg-text-align);
    }

    @media (width <= 768px) {
        /*--md*/
        --font-size: var(--md-font-size);
        --text-align: var(--md-text-align);
    }

    @media (width <= 576px) {
        /*--sm*/
        --font-size: var(--sm-font-size);
        --text-align: var(--sm-text-align);
    }

    @media (width <= 320px) {
        /*--xs*/
        --font-size: var(--xs-font-size);
        --text-align: var(--xs-text-align);
    }

    font-size: var(--font-size);
    line-height: 1.325;
    font-weight: 700;
    text-align: var(--text-align);
    color: var(--text-color);
    text-transform: uppercase;
    font-family: 'IBM Plex Sans', sans-serif;

    em {
        display: contents;
        color: var(--text-color-highlight);
    }
}

.ui-subsection-heading {
    --font-size: 44px;
    --text-align: left;
    --text-color: #162749;
    --text-color-highlight: #E99335;

    --xs-font-size: 22px;
    --sm-font-size: 24px;
    --md-font-size: 28px;
    --lg-font-size: 36px;
    --xl-font-size: 40px;
    --xxl-font-size: 44px;

    --xs-text-align: left;
    --sm-text-align: left;
    --md-text-align: left;
    --lg-text-align: left;
    --xl-text-align: left;
    --xxl-text-align: left;

    @media (width <= 1440px) {
        /*--xxl*/
        --font-size: var(--xxl-font-size);
        --text-align: var(--xxl-text-align);
    }

    @media (width <= 1200px) {
        /*--xl*/
        --font-size: var(--xl-font-size);
        --text-align: var(--xl-text-align);
    }

    @media (width <= 992px) {
        /*--lg*/
        --font-size: var(--lg-font-size);
        --text-align: var(--lg-text-align);
    }

    @media (width <= 768px) {
        /*--md*/
        --font-size: var(--md-font-size);
        --text-align: var(--md-text-align);
    }

    @media (width <= 576px) {
        /*--sm*/
        --font-size: var(--sm-font-size);
        --text-align: var(--sm-text-align);
    }

    @media (width <= 320px) {
        /*--xs*/
        --font-size: var(--xs-font-size);
        --text-align: var(--xs-text-align);
    }

    font-size: var(--font-size);
    line-height: 1.325;
    font-weight: 700;
    text-align: var(--text-align);
    color: var(--text-color);
    text-transform: uppercase;
    font-family: 'IBM Plex Sans', sans-serif;

    em {
        display: contents;
        color: var(--text-color-highlight);
    }
}

.ui-section-subheading {
    --font-size: 24px;
    --text-align: center;
    --text-color: #62667F;

    --xs-font-size: 16px;
    --sm-font-size: 16px;
    --md-font-size: 18px;
    --lg-font-size: 24px;
    --xl-font-size: 24px;
    --xxl-font-size: 24px;

    --xs-text-align: center;
    --sm-text-align: center;
    --md-text-align: center;
    --lg-text-align: center;
    --xl-text-align: center;
    --xxl-text-align: center;

    @media (width <= 1440px) {
        /*--xxl*/
        --font-size: var(--xxl-font-size);
        --text-align: var(--xxl-text-align);
    }

    @media (width <= 1200px) {
        /*--xl*/
        --font-size: var(--xl-font-size);
        --text-align: var(--xl-text-align);
    }

    @media (width <= 992px) {
        /*--lg*/
        --font-size: var(--lg-font-size);
        --text-align: var(--lg-text-align);
    }

    @media (width <= 768px) {
        /*--md*/
        --font-size: var(--md-font-size);
        --text-align: var(--md-text-align);
    }

    @media (width <= 576px) {
        /*--sm*/
        --font-size: var(--sm-font-size);
        --text-align: var(--sm-text-align);
    }

    @media (width <= 320px) {
        /*--xs*/
        --font-size: var(--xs-font-size);
        --text-align: var(--xs-text-align);
    }

    font-size: var(--font-size);
    line-height: 1.325;
    font-weight: 500;
    text-align: center;
    text-transform: capitalize;
    color: var(--text-color);
    font-family: 'Poppins', sans-serif;
}

.ui-section-underheading {
    --font-size: 24px;
    --text-align: center;
    --text-color: #62667F;

    --xs-font-size: 16px;
    --sm-font-size: 16px;
    --md-font-size: 18px;
    --lg-font-size: 24px;
    --xl-font-size: 24px;
    --xxl-font-size: 24px;

    --xs-text-align: center;
    --sm-text-align: center;
    --md-text-align: center;
    --lg-text-align: center;
    --xl-text-align: center;
    --xxl-text-align: center;

    @media (width <= 1440px) {
        /*--xxl*/
        --font-size: var(--xxl-font-size);
        --text-align: var(--xxl-text-align);
    }

    @media (width <= 1200px) {
        /*--xl*/
        --font-size: var(--xl-font-size);
        --text-align: var(--xl-text-align);
    }

    @media (width <= 992px) {
        /*--lg*/
        --font-size: var(--lg-font-size);
        --text-align: var(--lg-text-align);
    }

    @media (width <= 768px) {
        /*--md*/
        --font-size: var(--md-font-size);
        --text-align: var(--md-text-align);
    }

    @media (width <= 576px) {
        /*--sm*/
        --font-size: var(--sm-font-size);
        --text-align: var(--sm-text-align);
    }

    @media (width <= 320px) {
        /*--xs*/
        --font-size: var(--xs-font-size);
        --text-align: var(--xs-text-align);
    }

    font-size: var(--font-size);
    line-height: 1.325;
    font-weight: 400;
    text-align: center;
    text-transform: capitalize;
    color: var(--text-color);
    font-family: 'Poppins', sans-serif;
}
