.bottom-nav{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:480px;
  height:70px;
  background:#10182B;
  border-radius:22px 22px 0 0;
  display:flex;
  justify-content:space-around;
  align-items:center;
  box-shadow:0 -4px 20px rgba(0,0,0,0.3);
  z-index:40;
}

.bottom-nav .nav-item{
  color:#ffffff;
  font-size:22px;
  opacity:0.6;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.bottom-nav .nav-item.active{
  opacity:1;
  color:#a855f7;
}

.bottom-nav .nav-label{
  font-size:11px;
  margin-top:2px;
}

.bottom-nav .nav-item.active .nav-label{
  color:#a855f7;
}

.bottom-nav .floating-btn{
  position:absolute;
  top:-28px;
  left:50%;
  transform:translateX(-50%);
  background:#3b47ff;
  width:65px;
  height:65px;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#ffffff;
  font-size:26px;
  box-shadow:0 6px 20px rgba(0,0,0,0.25);
  border:4px solid #0f0f16;
  transition: left 0.18s ease-out;
}

.bottom-nav .nav-item i,
.bottom-nav .floating-btn i{
  font-size:24px;
}