/* --------------- variable --------------- */
:root{
    --color-main:#0066ff; 
	--color-primary:#0066ff;
	--color-secondary:#02b5ff;
    --color-blue2: #4a00e1;
    --color-blue4: #5842bc;
    --color-blue5: #157efb;
    --color-blue6: #6640f4;
    --color-blue7: #8169f1;
    --color-lightBlue:#15f1ff;
    --color-darkBlue:#010049;
    --color-darkBlue2:#1f227d;
    --color-orange1:#ff7a41;
    --color-gray:#eef4f8; 
    --color-gray2:#f0eff5;
    --color-main-grad: linear-gradient(to right, #0c3df4 0%, #02b5ff 100%);
}
  
// ------------------ colors -------------------


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

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

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

// -----------

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

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

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

// -----------

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

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

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

.hover-darkBlue {
    &:hover{
        color: var(--color-darkBlue) !important;
    }
}

// -----------

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

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

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

.hover-darkBlue2 {
    &:hover{
        color: var(--color-darkBlue2) !important;
    }
}

// -----------

.bg-gradient {
    background-image: var(--color-main-grad) !important;
}

// -----------

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

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

// -----------

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

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

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

// -----------

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

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

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

// -----------

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

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

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

// -----------

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

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

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

// -----------

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

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

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

.hover-blue7 {
    transition: all 0.3s ease;
    &:hover{
        background-color: var(--color-blue7) !important;
    }
}

// -----------

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

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

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

.hover-orange1 {
    transition: all 0.3s ease;
    &:hover{
        background-color: var(--color-orange1) !important;
    }
}