#header {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

#header-nav { padding: 0; }

#header nav ul li { position: relative; }

#header nav ul li a {
  text-decoration: none;
  position: relative;
  display: inline-block;
  color: #fff;
  padding: 0.75rem 0;
  transition: color .3s ease;
}

#header nav ul li a:hover { color: #ff3575; }

#header nav ul li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0%;
  height: 3px;
  background: #ff0051;
  border-radius: 3em;
  transition: width .25s ease;
}

#header nav ul li:hover::after { width: 100%; }
#header nav ul li.active::after { width: 100% !important; }
#header nav ul li.active a { color: #ff3575 !important; }

#header,
#header-mobile {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #0000009a;
  backdrop-filter: blur(30px);
}

#header-mobile nav ul li.active a { color: #ff0051 !important; }

#header-mobile nav ul li:hover a,
#header-mobile nav ul li:focus a { color: #ff0051 !important; }