:root {
    --fs-xsm: 14px;
    --fs-sm: 16px;
    --fs-md: 18px;
    --fs-lg: 18px;
    --fs-xl: 20px;
    --fs-2xl: 22px;
    --fs-3xl: 26px;
    --fs-4xl: 30px;
    --fs-5xl: 35px;
    --color-dark_blue: #000958;
    --color-light_blue: #5E6085;
    --color-half_blue_opecity: #656689;
    --color-yellow: #FABF3E;
    --color-skyblue: #48496A;
    --color-light_black: #141414;
    --bg-orange: #ff5b2e;
    --bg-orange_100: #FFfAf5;
    --bg-orange_200: #fff4ea;
    --bg-orange_300: #ffe4c8;
    --bg-orange_400: #f9bf6a;

}

.color_dark_blue {
    color: var(--color-dark_blue);
}

.color_light_blue {
    color: var(--color-light_blue);
}

.color_half_opcity_blue {
    color: var(--color-half_blue_opecity);
}

.color_yellow {
    color: var(--color-yellow);
}

.color_skyblue {
    color: var(--color-skyblue);
}

.color_light_black {
    color: var(--color-light_black);
}

.bg_orange {
    background-color: var(--bg-orange);
}

.bg_orange_100 {
    background-color: var(--bg-orange_100);
}

.bg_orange_200 {
    background-color: var(--bg-orange_200);
}

.bg_orange_300 {
    background-color: var(--bg-orange_300);
}

.bg_orange_400 {
    background-color: var(--bg-orange_400);
}

.fs_xsm {
    font-size: var(--fs-xsm);
}

.fs_sm {
    font-size: var(--fs-sm);
}

.fs_md {
    font-size: var(--fs-md);
}

.fs_lg {
    font-size: var(--fs-lg);
}

.fs_xl {
    font-size: var(--fs-xl);
}

.fs_2xl {
    font-size: var(--fs-2xl);
}

.fs_3xl {
    font-size: var(--fs-3xl);
}

.fs_4xl {
    font-size: var(--fs-4xl);
}

.fs_5xl {
    font-size: var(--fs-5xl);
}

@media (min-width:576px) {
    :root {
        --fs-xsm: 14px;
        --fs-sm: 16px;
        --fs-md: 18px;
        --fs-lg: 20px;
        --fs-xl: 22px;
        --fs-2xl: 24px;
        --fs-3xl: 28px;
        --fs-4xl: 35px;
        --fs-5xl: 40px;
    }


}

@media (min-width:768px) {
    :root {
        --fs-xsm: 14px;
        --fs-sm: 16px;
        --fs-md: 18px;
        --fs-lg: 20px;
        --fs-xl: 22px;
        --fs-2xl: 26px;
        --fs-3xl: 30px;
        --fs-4xl: 40px;
        --fs-5xl: 45px;
    }

}

@media (min-width:992px) {
    :root {
        --fs-xsm: 14px;
        --fs-sm: 16px;
        --fs-md: 18px;
        --fs-lg: 20px;
        --fs-xl: 22px;
        --fs-2xl: 27px;
        --fs-3xl: 35px;
        --fs-4xl: 45px;
        --fs-5xl: 55px;
    }
}