header {
  position: sticky;
  top: 0px;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  padding-top: 1.3rem;
  padding-bottom: 0.8rem;
  padding-inline: 0.5rem;
  width: 100%;
  backdrop-filter: blur(20px);
  opacity: 1;
  z-index: 10;
  transition: 0.5s;
}
header.with-shadow {
  background-color: rgba(9, 9, 9, 0.386);
  -webkit-box-shadow: 0px 4px 8px -5px rgba(122, 122, 122, 0.43);
  -moz-box-shadow: 0px 4px 8px -5px rgba(122, 122, 122, 0.43);
  box-shadow: 0px 4px 8px -5px rgba(122, 122, 122, 0.43);
}
header .top-nav ul {
  color: var(--_nav-color);
  width: 100%;
  display: flex;
  gap: 1.7rem;
  justify-content: center;
  align-items: center;
}

header .top-nav li:first-child {
  margin-right: auto;
  font-size: var(--normal-Fsize);
  color: var(--white-super-transparent);
}

header ul li {
  list-style: none;
  cursor: pointer;
}

header .top-nav li .nav-link {
  font-size: var(--XS-Fsize);
  text-decoration: none;
  transition: 0.5s;
  color: var(--white-super-transparent);
}
header .top-nav li .nav-link.active{
  color: var(--main-color);
  font-size: var(--semi-small-Fsize);
}

header .top-nav li:last-child {
  margin-left: auto;
}
header .top-nav li:last-child #contact-btn {
  border: 1px solid var(--main-color);
  color: var(--main-color) !important;
  padding: 0.4rem 1rem;
  border-radius: 15px;
  cursor: pointer;
}

header .top-nav .show-side-nav-icon {
  display: none;
}

@media (width <=53.2em) {
  header .top-nav li:not(:first-child, :last-child) {
    display: none;
  }
  header .top-nav li:last-child #contact-btn {
    display: none;
  }

  header .top-nav .show-side-nav-icon {
    display: block;
    width: 1.8rem;
    cursor: pointer;
    opacity: 0.6;
  }
}