.navTakeover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: calc(var(--arrangeFront) + 4);
  padding: min(5vw, 50px);
  background-color: var(--black);
  color: var(--white);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(-100%);
  transition: all cubic-bezier(0.65,0.05,0.36,1) 0.75s;

  &.isOpen {
    transform: translateY(0);
  }

  .innerWrapper {
    width: 100%;
    max-width: var(--siteWidth);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    @media(min-width: 768px) {
      width: auto;
    }

    .navHeader {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 100px;
      margin-bottom: 50px;

      @media(min-width: 640px) {
        align-items: flex-end;
      }

      .logo {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        padding: 0;

        @media(min-width: 640px) {
          padding: 0 min(5vw, 50px);
        }

        a {
          display: block;
          width: 100%;
          max-width: 200px;

          @media(min-width: 640px) {
            max-width: 250px;
          }

          img {
            width: 100%;
            position: relative;
          }
        }
      }

      .navClose {
        &:hover {
          cursor: pointer;

          svg {
            .circle {
              stroke: var(--green);
              fill: var(--green);
            }

            .icon {
              stroke: var(--black);
            }
          }
        }

        svg {
          display: block;

          .circle,
          .icon {
            transition: var(--transitionLinearFast);
          }
        }
      }
    }

    .navContentWrapper {
      width: 100%;
      border: 2px solid var(--white);
      border-radius: var(--roundedCorners);
      flex-grow: 1;

      @media(min-width: 640px) {
        flex-grow: 0;
      }

      .top {
        .navContent {
          display: flex;
          flex-direction: column;
          gap: 25px;
          padding: 25px;

          @media(min-width: 640px) {
            flex-direction: row;
          }

          @media(min-width: 768px) {
            gap: 50px;
            padding: 50px;
          }

          .column {
            list-style: none;
            margin: 0;
            padding: 0;
            flex-grow: 1;

            .title {
              font-size: 20px;
              font-weight: 600;
              font-family: var(--primaryFont);
              border-bottom: 2px solid var(--green);
              padding-bottom: 15px;
              margin-bottom: 15px;

              @media(min-width: 768px) {
                font-size: 22px;
              }
            }

            .link {
              margin-bottom: 10px;

              a {
                font-size: 18px;
                text-decoration: none;
                color: var(--white);
                font-family: var(--secondaryFont);
                font-weight: 500;
                transition: var(--transitionLinearFast);

                &:hover {
                  color: var(--green);
                }
              }
            }
          }
        }
      }

      .bottom {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 35px 25px;
        border-top: 2px solid var(--white);
        gap: 25px;

        @media(min-width: 1024px) {
          flex-direction: row;
          justify-content: space-between;
          gap: 50px;
        }

        .socialMediaPlatforms {
          display: flex;
          flex-direction: row;
          gap: 15px;

          .platform {
            &:hover {
              .icon {
                top: -5px;
              }
            }

            .icon {
              transition: var(--transitionExpo);
              position: relative;
              top: 0;
            }

            .title {
              position: relative;
            }
          }
        }

        .companyContactLinks {
          display: flex;
          flex-direction: column;
          gap: 15px;

          @media(min-width: 768px) {
            flex-direction: row;
            gap: 25px;
          }

          .link {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--white);
            text-decoration: none;
            font-size: 16px;
            font-weight: 400;
            transition: var(--transitionLinearFast);

            &:hover {
              color: var(--green);
            }

            svg {
              position: relative;
            }
          }
        }
      }
    }

    .legal {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      gap: 15px;
      margin-top: 35px;
      padding: 0 min(5vw, 50px);

      @media(min-width: 768px) {
        flex-direction: row;
        gap: 25px;
      }

      .copyright {
        font-size: 16px;
        font-weight: 400;
      }

      .legalLinks {
        display: flex;
        gap: 25px;

        a {
          text-decoration: none;
          color: var(--green);
          font-size: 16px;
          font-weight: 400;
          transition: var(--transitionLinearFast);

          &:hover {
            color: var(--white);
          }
        }
      }
    }
  }
}

body.navIsOpen {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .navTakeover,
  .navTakeover.isOpen {
    transition: none;
  }
}