.navbar-element {
  opacity: 0;
}

.navbar-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  height: var(--navbar-height);
  pointer-events: none;
}

.navbar {
  padding: 2rem 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-blend-mode: difference;
  mix-blend-mode: difference;
}

.navbar-logo {
  color: var(--white);
  pointer-events: auto;
}
.navbar-logo-svg {
  height: 48px;
}

.burger-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  pointer-events: auto;
  cursor: pointer;
  padding: 0.875rem 0.5rem;
  transition: width 200ms var(--cubic);
}

.burger-container:hover .burger-item:nth-child(1) {
  width: 1.25rem;
  transition: width 200ms var(--cubic);
}

.burger-item {
  height: 2px;
  width: 1.5rem;
  background: var(--white);
  cursor: pointer;
}

.navbar-links-wrapper {
  position: absolute;
  top: calc(2rem + 15px);
  right: calc(4rem + 1.5rem + 6rem);
  display: flex;
  align-items: top;
  gap: 6rem;
  z-index: 1000;
}

.navbar-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
}

.navbar-link {
  color: var(--white);
  text-decoration: none;
  font: var(--f-l-m);
  pointer-events: auto;
  transition: color 200ms var(--cubic);
}

.navbar-link:hover {
  color: var(--primary-500);
}

.navbar-social-formation:hover {
  color: var(--secondary-500);
}

.navbar-cta {
  align-self: flex-start;
}

.burger-content {
  display: flex;
  width: 600px;
  padding: 2rem;
  flex-direction: column;
  gap: 6rem;
  border-radius: 0.75rem;
  background: var(--white);
  position: fixed;
  top: 2rem;
  right: 4rem;
  z-index: 9999;
  visibility: hidden;
  transform: scaleY(0.9);
  opacity: 0;
  transform-origin: top;
  transition: var(--t400);
}

.burger-content--active {
  transition: var(--t400);
  visibility: visible;
  transform: scaleY(1);
  opacity: 1;
}

.burger-content-bg {
  visibility: visible;
  background-color: var(--black);
  opacity: 0.3;
  z-index: 9998;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: var(--t200);
}

.burger-content-bg--inactive {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: var(--t200);
}

.burger-nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.burger-nav-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
}

.burger-nav-link {
  font: var(--f-h-h5);
  color: var(--black);
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 140% !important;
}

.burger-nav-link--hover,
.burger-nav-link--text {
  display: block;
}

.burger-nav-link--hover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-style: italic;
  font-size: inherit;
  line-height: inherit;
  color: var(--primary-500);
  text-shadow: 0px 0px 12px hsla(234, 100%, 73%, 15%);
  text-wrap: nowrap;
}

.burger-nav-link--text {
  position: relative;
  z-index: 1;
}

.burger-nav-social-wrapper {
  overflow: hidden;
}

.burger-nav-social {
  font: var(--f-h-h6);
  color: var(--neutral-600);
  transition: color 300ms var(--cubic);
  display: block;
}

.burger-nav-social:hover {
  color: var(--primary-500);
}

.burger-nav-cancel--svg {
  width: 2rem;
  height: 2rem;
  stroke: var(--black);
  transition: var(--t200);
}

.burger-nav-cancel {
  cursor: pointer;
}

.burger-nav-cancel .navbar-logo-svg {
  display: none;
}

.burger-nav-cancel:hover .burger-nav-cancel--svg {
  stroke: var(--primary-500);
  transition: var(--t200);
}

.burger-nav-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.burger-nav-footer-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.burger-nav-footer-link-wrapper {
  overflow: hidden;
}

.burger-nav-footer-link {
  font: var(--f-l-m);
  color: var(--neutral-600);
  transition: color 300ms var(--cubic);
  display: block;
}

.burger-nav-footer-link:hover {
  color: var(--primary-500);
}

.burger-nav-footer--svg {
  width: 2.5rem;
  height: 2.5rem;
  fill: var(--primary-500);
}

/* === RESPONSIVE === */
@media screen and (max-width: 1200px) {
}

@media screen and (max-width: 768px) {
  .navbar-logo-svg {
    height: 40px;
  }
  .navbar-links-wrapper {
    display: none;
  }

  .navbar {
    padding: 2rem;
  }

  .burger-content {
    position: fixed;
    top: 0rem;
    right: 0rem;
    width: 100%;
    height: 100dvh;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4rem;
    transform: scaleY(0);
    transform-origin: top;
    border-radius: 0rem;
    background: var(--white);
    transition: var(--t400);
    z-index: 9999;
  }

  .burger-content--active {
    transition: var(--t400);
    transform: scaleY(1);
  }

  .burger-content-bg {
    display: none;
  }

  .burger-nav-link {
    font: var(--f-h-h6);
  }
  .burger-nav-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2rem;
  }

  .burger-nav-cancel--svg {
    width: 2rem;
    height: 2rem;
    stroke: var(--black);
    transition: var(--t200);
  }

  .burger-nav-container {
    order: 2;
  }

  .burger-nav-cancel {
    cursor: pointer;
    order: 1;
    align-self: flex-end;
    display: flex;
    align-items: center;
    color: var(--primary-500);
    width: 100%;
    justify-content: space-between;
  }

  .burger-nav-cancel .navbar-logo-svg {
    display: flex;
  }

  .burger-nav-cancel:hover .burger-nav-cancel--svg {
    stroke: var(--primary-500);
    transition: var(--t200);
  }

  .burger-nav-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  .burger-nav-footer-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .burger-nav-footer--svg {
    width: 2.5rem;
    height: 2.5rem;
    fill: var(--primary-500);
  }
}

@media screen and (max-width: 480px) {
}