:root {
    --main-color: #0C1926;
    --second-color:#93adcf;
    --third-color:#6c7888;
    --fourth-color: #27111a;
    --fifht-color: #e20074;
}

.bg-main {
     background-color: var( --main-color) !important;
 }
.bg-second {
    background-color: var( --second-color)  !important;
}
.bg-third {
    background-color: var( --third-color)  !important ;
}
.bg-fourth {
    background-color: var(--fourth-color)  !important;
}
.bg-fifth {
    background-color: var(--fifht-color)  !important ;
}
.text-main {
   color: var( --main-color)  !important;
}
.text-second {
    color: var( --second-color)  !important;
}
.text-third{
    color: var( --third-color)  !important;
}
.text-fourht{
    color: var(--fourht-color)  !important;
}
.text-fifth{
    color: var(--fifht-color)  !important;
}
.same-bg:hover {
    background: inherit !important;
}
.same-text:hover {
    color: inherit !important;
}
.bg-content {
    border-radius: 20px;
    background-color: rgba(12, 25, 38, .9);
}
.bg-content, .bg-content a {
    color: #fff;
}
.border-fifth-2 {
    border: 2px solid var(--fifht-color) !important;
}
ul.main-dot  li::before {
    content: "";
    background:var(--main-color);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: 0;
    left: -5px;
    position: relative;
}

ul.fifth-dot  li::before {
    content: "";
    background:var(--fifht-color);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: 0;
    left: -5px;
    position: relative;
}