.bottom-menu{

    width:100%;

    max-width:320px;

    margin:40px auto 40px;

    display:flex;

    justify-content:space-between;

    gap:8px;

}

.bottom-item{

    flex:1;

    background:rgba(16,22,32,.92);

    border:1px solid rgba(255,255,255,.10);

    border-radius:25px;

    padding:16px 10px;

    text-align:center;

    text-decoration:none;

    color:#fff;

    backdrop-filter:blur(15px);

    box-shadow:0 12px 35px rgba(0,0,0,.35);

}

.bottom-icon{

    width:52px;
    height:52px;

    margin:0 auto 8px;

    display:flex;
    justify-content:center;
    align-items:center;

    color:#24A8FF;

    border-radius:16px;

    background:rgba(36,168,255,.08);

    border:1px solid rgba(36,168,255,.25);

    box-shadow:
        0 0 8px rgba(36,168,255,.45),
        inset 0 0 8px rgba(36,168,255,.18);

    transition:.3s;

}

.bottom-item span{

    display:block;

    font-size:13px;

    font-weight:600;

}

.bottom-item small{

    display:block;

    margin-top:4px;

    color:#8d96a4;

    font-size:10px;

}

.bottom-icon{

    width:48px;
    height:48px;

    margin:0 auto 8px;

    display:flex;
    justify-content:center;
    align-items:center;

    color:#27A8FF;

    border-radius:14px;

    background:rgba(39,168,255,.08);

    border:1px solid rgba(39,168,255,.25);

    box-shadow:
        0 0 10px rgba(39,168,255,.35),
        inset 0 0 10px rgba(39,168,255,.18);

}

.bottom-icon svg{

    width:28px;
    height:28px;

    stroke:currentColor;
    fill:none;

}

.bottom-item:hover .bottom-icon{

    box-shadow:
        0 0 18px rgba(39,168,255,.9),
        0 0 35px rgba(39,168,255,.45),
        inset 0 0 12px rgba(39,168,255,.3);

}

.bottom-item:hover{

    border-color:#24A8FF;

    box-shadow:
        0 0 18px rgba(36,168,255,.20),
        0 10px 35px rgba(0,0,0,.35);

}

.bottom-item:hover .bottom-icon{

    color:#58BEFF;

    box-shadow:
        0 0 12px rgba(36,168,255,.8),
        0 0 28px rgba(36,168,255,.45),
        inset 0 0 10px rgba(36,168,255,.25);

}