.main-nav {
  height: 5rem;
  width: 100%;
  background: rgb(19, 19, 19);
  background: linear-gradient(
    0deg,
    rgb(15, 15, 15) 0%,
    rgba(21, 21, 21, 0.407) 50%
  );
  /* background-color: rgba(0, 0, 0, 0.3); */
  /* background-color: var(--color-primary); */
  display: grid;
  place-items: center;
  top: 0;
  left: 0;
  z-index: 99;
  backdrop-filter: blur(15px);
}

.nav__toggle-btn {
  display: none;
}

.nav__container {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.nav__links {
  font-weight: bolder;
  display: flex;
  gap: 3.5rem;
  align-items: center;
}

.nav__links a {
  /* padding: 1rem; */
  /* border: 1px solid var(--color-primary);
  border-radius: 4rem; */
  transition: var(--transition);
  color: var(--color-white);
}
.nav__links a:hover {
  color: var(--color-primary);
}

.nav__links .active-nav {
  color: var(--color-light);
}