.mobile-navbar-container {
  display: none;
}

@media (max-width: 450px) {
  .mobile-navbar-container {
    background-color: var(--green);
    z-index: 9 !important;
    display: block;
    width: 100%;
    height: 19vw;
    position: fixed;
    border-radius: 0.5vw 0.5vw 0 0;
    bottom: -2vw;
    left: 0;
    box-shadow: rgba(0, 0, 0, 0.15) 0 1vw 2vw;
  }
  .navbar-items {
    background-color: var(--green);
    position: relative;
    width: 100%;
    height: 100%;
    justify-content: space-around !important;
    z-index: 3!important;
  }
  .navbar-item {
    display: flex;
    height: 100%;
    align-items: center !important;
  }
  .navbar-item a {
    gap: 1.4vw;
    position: relative;
  }
  .navbar-item div {
    gap: 1.4vw;
    position: relative;
    cursor: pointer;
  }
  .bottom-active {
    position: absolute;
    top: 12.2vw;
    width: 17vw;
    height: 2.9vw;
    border-radius: 2vw;
    background-color: var(--light-bg);
    transition: all 0.4s ease-in-out;
  }
  .bottom-active-1 {
    position: absolute;
    top: 12.1vw;
    width: 17vw;
    height: 2.9vw;
    border-radius: 2vw;
    background-color: var(--light-bg);
    transition: all 0.4s ease-in-out;
  }

  .navbar-items .navbar-item a > svg {
    width: 6vw;
    height: 6vw;
  }
  .navbar-items .navbar-item div > svg {
    width: 6vw;
    height: 6vw;
  }
  .navbar-items .navbar-item p {
    font-size: 2.7vw;
    color: var(--light-bg);
  }
  .login-text {
    font-size: 2.7vw;
    color: var(--light-bg);
  }
  .login-mobile {
    display: flex !important;
  }
  .login-mobile > svg {
    width: 6vw;
    height: 6vw;
  }
}