.nav-bar {
    z-index: 9;
    position: absolute;
    bottom:0px;
    left: 50%;
    transform: translate(-50% , -50%)
}

.nav-dot-active {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: var(--color-primary) !important;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid white;
}

.nav-dot {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color:   gray;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid white;
}

.nav-dot:hover {
    cursor: pointer;
}