.nav {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(160deg, #f8f0e7 0%, #efe1d3 42%, #e7d2c0 100%);
  padding: 10cqw 0;
}

.nav-inner {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-inner #help-notice .privacy-inner {
    width: 100%;
    margin-top: 10cqw;
}

.nav-app {
  margin-top: 4cqw;
}

.nav-selector-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  padding: 5cqw 0;
  border-radius: 4cqw;
  position: relative;
  overflow: hidden;
}

.nav-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8cqw;
    margin-top: 4cqw;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2cqw;
}

.nav-item-icon {
    width: 20cqw;
    height: 20cqw;
    border-radius: 4cqw;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);
}

.nav-ani {
  display: block;
  width: 0.58cqw;
  height: 18.6cqw;
  border-radius: 99px;
  background-color: rgba(0,0,0,0.2);
  position: relative;
}

.nav-ani::before {
  content: "";
  position: absolute;
  background: var(--accent);
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  border-radius: 99px;
  animation: moving 3s ease-in-out infinite;
  ;
}

@keyframes moving {
  50% {
    height: 100%;
  }

  100% {
    height: 0;
    top: 0;
  }
}

.parking {
    margin-top: 10cqw;
}

.parking-info-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.88);
    padding: 5cqw;
    overflow: hidden;
    border-radius: 4cqw;
}

.parking-info-container .secondary-btn-text {
    margin-top: 2cqw;
}

.parking-map {
  margin-top: 4cqw;
}

.parking-map-image {
    width: 100%;
    border-radius: 2cqw;
}

.parking-function-btn:first-of-type {
    margin-top: 3cqw;
}

.parking-function-btn {
    margin-top: 2cqw;
}

.map {
    margin-top: 10cqw;
}

.big-map-container,
.nav-map-container,
.info-box {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    backdrop-filter: blur(5px);
}

.big-map-container.is-open,
.nav-map-container.is-open,
.info-box.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.info-box {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 0, 0, 0.35);
    z-index: 10000;
}

body.nav-info-box-open .menu,
body.nav-info-box-open .secondary-menu {
    bottom: -24cqw !important;
    pointer-events: none !important;
}

html.page-scroll-locked,
body.page-scroll-locked {
    overflow: hidden;
}

body.page-scroll-locked {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    transition: none;
}

.big-map-inner {
    width: 700px;
    height: 100%;
    background: rgba(255, 255, 255, 0.88);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12cqw;
}

.big-map-video {
    width: 90%;
    border-radius: 4cqw;
}

.nav-video {
    width: 70%;
    border-radius: 4cqw;
}

.close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10cqw;
    height: 10cqw;
    font-size: 6cqw;
    cursor: pointer;
}

.nav-app {
  width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3cqw;
}

.parking {
    display: flex;
    flex-direction: column;
    gap: 3cqw;
}

.info-box-media {
    width: 100%;
    border-radius: 2cqw;
}