:root {
  --primary-bg: #121316;
  --secondary-bg: #191a1e;
  --primary-font-color: #fff;
  --secondary-font-color: #A6A6A6;
  --burger-Btn-color: #fff;
  --accent-Color: #6c63ff;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -50vh;
  z-index: 1000;
  transition: margin .3s ease;
}

nav.sticky {
  padding: 5px 1rem;
  z-index: 100;
  margin: 0;
}

.nav-holder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border-radius: 50px;
  margin-top: 20px;
  max-height: 150px;
  height: 100px;
  max-width: 55rem;
  backdrop-filter: blur(10px);
  border: 2px solid var(--secondary-bg);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  background-color: var(--secondary-bg);
}

.nav-holder {
  @supports (backdrop-filter: blur(15px)) {
    backdrop-filter: blur(15px);
    background-color: unset;
  }
}

nav .logo {
  position: relative;
  height: 15rem;
  transition: 0.1s;
}

nav .logo:hover {
  transform: scale(1.3) rotate(-5deg);
}

nav ul {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

nav ul li {
  position: relative;
  list-style: none;
  padding: 5px;
}

nav ul li a {
  font-family: "AgencyFb", sans-serif;
  position: relative;
  color: var(--secondary-font-color);
  text-decoration: none;
  margin: 0 15px;
  transition: 0.6s;
  font-size: clamp(1.5rem, 10vw, 2rem);
  text-transform: uppercase;
}

nav ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  height: 3px;
  background-color: rgb(255, 255, 255);
  transition: 0.3s;
  width: 0;
}

nav ul li a:hover::after {
  width: 100%;
}

.contactNav:hover::after{
  width: unset;
}

nav ul li a:hover {
  color: var(--primary-font-color);
}

.menuBtn {
  display: none;
  position: relative;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  transition: 0.5s;
}

.menuBtn-burger {
  width: 50px;
  height: 3px;
  border-radius: 5px;
  transition: all 0.5s ease-in-out;
  background: var(--burger-Btn-color);
  transition: 0.5s;
}

.menuBtn-burger::before,
.menuBtn-burger::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 3px;
  border-radius: 5px;
  transition: all 0.5s ease-in-out;
  background: var(--burger-Btn-color);
}

.menuBtn-burger::before {
  transform: translateY(-16px);
}

.menuBtn-burger::after {
  transform: translateY(16px);
}

.menuBtn.open {
  position: absolute;
  right: 15px;
  top: 15px;
}

.menuBtn.open .menuBtn-burger {
  transform: translateX(-50px);
  background: transparent;
}

.menuBtn.open .menuBtn-burger::before {
  transform: rotate(45deg) translate(35px, -35px);
}

.menuBtn.open .menuBtn-burger::after {
  transform: rotate(-45deg) translate(35px, 35px);
}

.contactNav{
  margin-right: 2rem;
    background: #6c63ff;
    padding: 0.5rem;
    border-radius: 10px;
    color: white;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

@media (max-width: 820px) {
  .nav-holder {
    max-height: unset;
    max-width: 90vw;
    justify-content: center;
    transition: all .3s ease-in-out;
  }


  .contactNav{
    margin-right: unset;
  }

  nav ul li a {
    display: none;
    font-size: 2.5rem;
    margin: unset;
  }

  nav ul li a:hover::after {
    width: unset;
  }

  .menuBtn {
    display: flex;
  }

  .nav-holder.open {
    height: 80vh;
    min-width: 90vw;
    flex-direction: column;
    justify-content: flex-start;
  }

  .nav-holder.open ul li a {
    display: flex;
  }

  .nav-holder.open ul {
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;

  }
  

  nav .logo:hover {
    transform: scale(1) rotate(0);
  }
}

/* @media (max-width: 300px) {
  .nav-holder{
    width: 100vw;
    border-radius: unset;
  }

  nav .logo{
    height: 13rem;
  }
} */