header {
  width: 100%;
  padding: 22px 8%;
  background: rgb(5, 5, 5);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(60, 31, 87, 0.15);

}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.nav-bar .logo {
  color: #C084FC;
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 0 0 10px #a855f744, 0 0 20px #a855f722;
}

.list {
  display: flex;
  list-style: none;
  gap: 42px;
}

.nav-item {
  font-weight: 700;
  font-size: 18px;
}

.nav-item a {
  text-decoration: none;
  color: #F8F7FF;
  transition: 0.25s ease;
  position: relative;
}

.nav-item a:hover {
  color: #C084FC;
  text-shadow: 0 0 8px #c084fc, 0 0 12px #c084fc55;
}

span.material-symbols-outlined {
  display: none;
  color: #C084FC;
  font-size: 35px;
  cursor: pointer;
  transition: 0.2s;
}

span.material-symbols-outlined:hover {
  text-shadow: 0 0 12px #c084fc;
}

.mobile-menu {
  display: none;
}

@media screen and (max-width: 1170px) {

  .nav-bar .list,
  .nav-bar .nav-item {
    display: none;
  }

  span.material-symbols-outlined {
    display: block;
  }

  .mobile-menu {
    display: none;
  }

  .mobile-menu.active {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    padding: 16px 0;
    background: rgba(5, 5, 5, 0.65);
    backdrop-filter: blur(18px);
    border-radius: 12px;
    border: 1px solid rgba(168, 85, 247, 0.25);
  }

  .mobile-menu .mobile-nav-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    list-style: none;
  }

  .mobile-nav-list .nav-item a {
    color: #F1E6FF;
    font-size: 20px;
  }

  .mobile-nav-list .nav-item a:hover {
    color: #C084FC;
    text-shadow: 0 0 10px #c084fc;
  }
}