:root {
    --blue: #0075DA;
    --blue-light: #4dacff;
    --red: #F63356;
    --green: #26ab6d;
    --light-green: rgba(38, 171, 109, 0.31);
    --green-light: #b6f7d9;
    --transparent: rgba(255, 255, 255, 0);
    --orange: #FFA32B;
    --orange-lite: rgba(255, 163, 43, 0.28);
    --very-light-blue: #B8C3CC;
    --light-gray: #767676;
    --very-light-gray: #A8A8A8;
    --light-cream: #F5F4EF;
    --main-dark: #565656;
    --cta-dark: #696969;
    --font-black: #3a3d45;
    --mega-second-color: #0665B7;
    --mega-first-color: #0075DA;
}

/*-------------- font colors --------------*/

.font-aroco-orange {
    color: var(--orange);
}

.font-orange {
    color: var(--orange) !important;
}

.font-aroco-blue {
    color: var(--blue);
}

.font-aroco-blue-light {
    color: var(--blue-light);
}


.font-light-gray {
    color: var(--light-gray);
}

.font-very-light-gray {
    color: var(--very-light-gray);
}

.font-main-dark {
    color: var(--main-dark);
}

.font-cta-dark {
    color: var(--cta-dark);
}

.font-red {
    color: var(--red);
}

.font-white {
    color: white;
}

.font-black {
    color: var(--font-black);
}
/*----------- border colors ----------*/
.border-light-blue {
    border-color: var(--very-light-blue) !important;
}

.border-orange {
    border-color: var(--orange) !important;
}

.border-aroco-blue {
    border-color: var(--blue) !important;
}

.border-main-dark {
    border-color: var(--main-dark) !important;
}

.border-vary-light-gray {
    border-color: var(--very-light-gray) !important;
}

/*----------- background colors -------------*/

.bg-light-cream {
    background-color: var(--light-cream);
}

.bg-aroco-orange {
    background-color: var(--orange) !important;
}

.bg-aroco-blue {
    background-color: var(--blue) !important;
}

.bg-aroco-blue-light {
    background-color: var(--blue-light) !important;
}

.bg-light-orange {
    background-color: var(--orange-lite) !important;
}

.bg-light-green {
    background-color: var(--light-green);
}

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

.bg-main-dark {
    background-color: var(--main-dark);
}