:root {
    /* Color */
    --clr-primary: #0064A7;
    --clr-secondary: #E2ECEE;

    --clr-orange-dark: #E67E22;
    --clr-orange: #F29C30;

    --clr-blue-darkest: #031432;
    --clr-blue-dark: #0064A7;
    --clr-blue: #0492D4;
    --clr-blue-light: #EAF2FD;
    
    --clr-light-gray: #D3D8E0;

    --clr-bg-light: #F9FBFC;
    --clr-bg-dark: #E2ECEE;

    --clr-text: #3A4E6B;
    --clr-text-lighter: #6B7A90;

    --clr-neutral100: #ebeff4;
    --clr-neutral200: #f7fafb;

    --clr-white: #ffffff;
    --clr-black: #000000;

    /* Gradients */
    --grad-primary: linear-gradient(233.64deg,
            rgba(255, 255, 255, 0) 18.77%,
            #6c82a6 84.43%);

    --blue-gradient-bg: linear-gradient(96deg, #0064A7 -10.84%, #0492D4 196.74%)
}

/* Texts and backgrounds classes */

.text-primary {
    color: var(--clr-primary) !important;
}

.bg-primary {
    background-color: var(--clr-primary) !important;
}

.text-secondary {
    color: var(--clr-secondary) !important;
}

.bg-secondary {
    background-color: var(--clr-secondary) !important;
}

.text-neutral100 {
    color: var(--clr-neutral100) !important;
}

.bg-neutral100 {
    background-color: var(--clr-neutral100) !important;
}

.text-neutral200 {
    color: var(--clr-neutral200) !important;
}

.bg-neutral200 {
    background-color: var(--clr-neutral200) !important;
}

.text-white {
    color: var(--clr-white) !important;
}

.bg-white {
    background-color: var(--clr-white) !important;
}

.bg-grad {
    background-image: var(--grad-primary) !important;
}

.text-black {
    color: var(--clr-black) !important;
}

.bg-black {
    background-color: var(--clr-black) !important;
}