.menu_cir {
    z-index: 1000;
    top: 0px;
    left: 20px;
    position: fixed;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (max-width: 575px) {
    .menu_cir {
        z-index: 1;
    }
}
.menu_cir li {
    list-style: none;
    position: absolute;
    left: 0;
    transform-origin: 100px;
    transition: 0.5s;
    transform: rotate(0deg) translateX(80px);
}

.menu_cir.active li {
    transform: rotate(calc(360deg / 8 * var(--i)));
}

    .menu_cir li a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        background-color: #fff;
        border: 1px solid #23d3fe;
        border-radius: 50%;
        transform: rotate(calc(360deg / -8 * var(--i)));
        box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
    }
        .menu_cir li a i {
            color: #03a84e;
            font-weight: 300;
        }
        .menu_cir .toggle {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #07d0f73b;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            border-radius: 50%;
            cursor: pointer;
            font-size: 32px;
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
            transition: transform 1.25s;
        }

.menu_cir.active .toggle {
    transform: rotate(315deg);
}


/* menu scale */

.menu_cir.scale {
    top: 400px;
}

.menu_cir.scale li {
    transform-origin: 20px 20px;
    transform: rotate(calc(360deg / 8 * var(--i))) scale(0);
    transition: all linear 0.3s;
    visibility: hidden;
    opacity: 0;
}

.menu_cir.scale.show li {
    transform-origin: 100px;
    visibility: visible;
    opacity: 1;
    transform: rotate(calc(360deg / 8 * var(--i))) scale(1);
}