.nav-desktop {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
}

.nav-mobile {
  position: fixed;
  top: 8.4rem;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 3.6rem;
  z-index: 2999;
}

@media (min-width: 1280px) {
  .nav-desktop {
    display: flex;
  }

  .nav-mobile {
    display: none;
  }
}

.nav-link {
  transform: translateX(-9.6rem);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  font-family: montserrat, sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  text-decoration: none;
  pointer-events: none;
  opacity: 0;
  border-radius: 0 100rem 100rem 0;
  color: var(--dark-grey);
  background-color: var(--light-grey);
  box-shadow: 0 0 1.2rem 0 var(--shadow);
  padding: 1.2rem 2.4rem;
  transition: all 0.3s ease-in-out;
}

.nav-link.show {
  transform: translateX(0);
  pointer-events: all;
  opacity: 1;
}

.nav-link:active,
.nav-link:focus {
  color: var(--green-yellow);
}

@media (min-width: 1280px) {
  .nav-link {
    transform: translateX(0);
    pointer-events: all;
    opacity: 1;
    border-radius: 0;
    color: var(--dark-grey);
    background-color: transparent;
    box-shadow: none;
    padding: 1.2rem;
  }

  .nav-link:hover,
  .nav-link:focus {
    color: var(--green-yellow);
  }

  .nav-link:active {
    color: var(--dark-grey);
  }
}

.nav-mobile-cta {
  transform: translateX(-9.6rem);
  pointer-events: none !important;
  opacity: 0 !important;
  border-radius: 0 100rem 100rem 0 !important;
  box-shadow: 0 0 1.2rem 0 var(--shadow) !important;
  padding: 1.2rem 2.4rem !important;
}

.nav-mobile-cta.show {
  transform: translateX(0) !important;
  pointer-events: all !important;
  opacity: 1 !important;
}

.nav-social-link-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
  margin-left: 2.4rem;
}

.nav-social-link {
  transform: translateX(-9.6rem);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100rem;
  color: var(--light-grey);
  background-color: var(--dark-grey);
  box-shadow: 0 0 1.2rem 0 var(--shadow);
  padding: 0.6rem;
  transition: all 0.3s ease-in-out;
}

.nav-social-link.show {
  transform: translateX(0);
}