.navigate-ux {

  position: fixed;

  bottom: 0;
  left: 0;

  width: 100%;
  height: 70px;

  display: flex;

  align-items: center;
  justify-content: space-around;

  background: #0b0b0f;

  border-top: 1px solid #22222a;

  z-index: 1000;

}


.navigate-ux-item {

  flex: 1;

  height: 100%;

  display: flex;

  flex-direction: column;

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

  gap: 5px;

  color: #ffffff;

  font-family: Arial, sans-serif;

  font-size: 12px;
  font-weight: 500;

  cursor: pointer;

  user-select: none;

  transition:
    background 0.2s ease,
    color 0.2s ease;

}


.navigate-ux-icon {

  width: 24px;
  height: 24px;

  display: block;

  flex-shrink: 0;

}


.navigate-ux-item:hover {

  background: #15151c;

}


.navigate-ux-item:active {

  background: #20202a;

  color: #a855f7;

}