@media (max-width: 991px) {
    .navbar-collapse {
      position: fixed!important;
      top: 0!important;
      left: 0!important;
      width: 100%;
      height: 100%;
      padding: 20% 10% 40% 10%;
      background-color: rgba(255, 255, 255);
      z-index: 9999;
      overflow-y: auto;
      transform: translateX(-100%);
      transition: transform 0.3s ease-in-out;
      justify-items: center;
      align-items: center;
    }
  
    .toggle-button {
      position: fixed;
      top: 10px;
      left: 10px;
      z-index: 99999;
    }
    .navbar-toggler {
        z-index: 99999;
      }
    .navbar-collapse.show {
      transform: translateX(0);
    }
  
    .navbar-nav {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
  
    .navbar-nav .nav-item {
      padding: 1rem;
    }
  
  }