﻿/* variable */
:root {
    --alt-font: 'Plus Jakarta Sans', sans-serif;
    --primary-font: 'Golos Text', sans-serif;
    --primary-color: #2946f3;
    --dark-gray: #15161d;
    --bg-black: #000000;
    --dark-slate-blue: #1e1e28;
    --medium-gray: #7a7a83;
    --extra-medium-gray: #e4e4e4;
    --light-medium-gray: #f0f2f8;
    --very-light-gray: #f4f5fa;
    --red: #e75050;
    --light-red: #ffeded;
    --green: #1b855d;
    --crusoe-green: #dbf2e7;
    --yellow: #ecab23;
    --orange: #ffa800;
    --light-yellow: #f3ebde;
    --white: #ffffff;
    --light-gray: #a8a8a8;
}

[class*=bi-] {
    display: inline-block;
}

/* Background Color */
.bg-primary-color {
    background-color: var(--primary-color);
}

.bg-dark-gray {
    background-color: var(--dark-gray);
}

.bg-black {
    background-color: var(--bg-black);
}

.bg-medium-gray {
    background-color: var(--medium-gray);
}

.bg-very-light-gray {
    background-color: var(--very-light-gray);
}

.bg-light-medium-gray {
    background-color: var(--light-medium-gray);
}

.bg-yellow {
    background-color: var(--yellow);
}

.bg-light-yellow {
    background-color: var(--light-yellow);
}

.bg-orange {
    background-color: var(--orange);
}

.bg-red {
    background-color: var(--red);
}

.bg-primary-color-transparent {
    background-color: rgb(41, 70, 243, 0.15);
}

.border-color-transparent-dark-very-light {
    border-color: rgba(35, 35, 35, 0.1) !important;
}

.bg-black-transparent-light {
    background-color: rgba(0, 0, 0,.2);
}

.bg-black-transparent-medium {
    background-color: rgba(0, 0, 0,.5);
}

.bg-black-transparent {
    background-color: rgba(0, 0, 0,.8);
}

.bg-white-transparent-extra-light,
.bg-white-transparent-extra-light:focus {
    background-color: rgba(255, 255, 255, 0.1);
}

.bg-white-transparent-very-light {
    background-color: rgba(255, 255, 255, 0.2);
}

.bg-white-transparent-light {
    background-color: rgba(255, 255, 255, 0.4);
}

.bg-white-transparent {
    background-color: rgba(255, 255, 255, 0.7);
}

/* Text Color */
.text-white, .btn-link.text-white, a.text-white-hover:hover {
    color: var(--white);
}

.text-primary-color, .btn-link.text-primary-color {
    color: var(--primary-color);
}

a.text-primary-color-hover:hover {
    color: var(--primary-color);
}

.text-black, .btn-link.text-black, a.text-black-hover:hover {
    color: var(--black);
}

.text-dark-gray, .btn-link.text-dark-gray, a.text-dark-gray-hover:hover {
    color: var(--dark-gray) !important;
}

.text-medium-gray, .btn-link.text-medium-gray, a.text-medium-gray-hover:hover {
    color: var(--medium-gray);
}

.text-red, .btn-link.text-red, a.text-red-hover:hover {
    color: var(--red);
}

.text-green, .btn-link.text-green, a.text-green-hover:hover {
    color: var(--green);
}

.text-yellow, .btn-link.text-yellow, a.text-yellow-hover:hover {
    color: var(--yellow);
}
/* text gradient color */
.text-gradient-dark-purple {
    background: linear-gradient(to right top, rgb(255, 30, 128) 15.923566878980886%, rgb(156, 50, 176) 50.63694267515923%, rgb(96,0,255) 99.68152866242038%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Border Color */
.border-color-transparent-white-light {
    border-color: rgba(255, 255, 255, .1) !important;
}

.border-color-transparent, .border-color-transparent-on-hover:hover {
    border-color: transparent !important;
}

.border-color-primary-color {
    border-color: var(--primary-color) !important;
}

.border-color-white {
    border-color: var(--white) !important;
}

.border-color-dark-gray {
    border-color: var(--dark-gray) !important;
}

.border-color-medium-gray {
    border-color: var(--medium-gray) !important;
}

.border-color-light-gray {
    border-color: var(--light-gray) !important;
}

.border-color-very-light-gray {
    border-color: var(--very-light-gray) !important;
}

.border-color-light-medium-gray {
    border-color: var(--light-medium-gray) !important;
}

.border-color-extra-medium-gray {
    border-color: var(--extra-medium-gray) !important;
}