:root {
    /*--main-color: #000;*/
    /*--second-color:#fff;*/

    /*--third-color:#fff;*/
    /*--fourth-color: #fff;*/
    /*--fifht-color: #000;*/
    /*--text-color: #000;*/
    --main-color: #DDE0E4;
    --second-color: #404652;
    --third-color:#69737F;
    --fourth-color:  #fca53e;
    --fifht-color: #404652;
}
/*// #563b44*/
.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( --text-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;
}
.border-fifth-2 {
    border: 2px solid var(--fifht-color) !important;
}
.btn-fifth {
    background-color: var( --fifht-color)  !important;
    border: none !important;
    color:#fff !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;
}