.bottom-nav{

    position:fixed;

    left:50%;

    bottom:18px;

    transform:translateX(-50%);

    width:calc(100% - 24px);

    max-width:430px;

    height:74px;

    padding:8px;

    display:flex;

    justify-content:space-around;

    align-items:center;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border-radius:24px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.08),
        0 2px 8px rgba(0,0,0,.04);

    z-index:1000;

}

.nav-item{

    flex:1;

    height:58px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:5px;

    border-radius:18px;

    color:#A2A2A2;

    transition:.25s;

}

.nav-item span{

    font-size:11px;

    font-weight:600;

    transition:.25s;

}

.nav-icon-wrapper{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.25s;

}

.nav-icon{

    width:22px;

    height:22px;

    opacity:.65;

    transition:.25s;

}

.nav-item:hover{

    color:#E58AB3;

}

.nav-item:hover .nav-icon-wrapper{

    background:#FFF4F8;

}

.nav-item:hover .nav-icon{

    opacity:1;

    transform:translateY(-2px);

}

.nav-item.active{

    color:#E58AB3;

}

.nav-item.active .nav-icon-wrapper{

    background:linear-gradient(
        135deg,
        #FCE6EF,
        #F7D6E6
    );

    box-shadow:0 8px 20px rgba(229,138,179,.20);

}

.nav-item.active .nav-icon{

    opacity:1;

    transform:scale(1.08);

}

.nav-item:active{

    transform:scale(.96);

}