@media only screen and (max-width: 868px) {
      .material-symbols-outlined {
          color: white;
          margin: .3125rem;
          font-size: 6vmin !important;
      }
      .container {
          height: 8%;
      }
      .container ul {
          position: fixed;
          height: 100vh;
          width: 100%;
          left: -100%;
          top: 0%;
          display: block;
          padding: 40px 0;
          text-align: center;
          background: rgb(0, 0, 0);
          transition: all 0.3s ease;
          /* z-index: 999; */
      }
      .container ul li {
          display: block;
          margin: 20px;
          border-bottom: 2px dotted rgb(60, 108, 148);
          font-size: 6vmin;
          text-align: left;
          line-height: 60px;
          text-align: center;
      }
      .menu-toggle {
          position: absolute;
          left: 2%;
          top: 2%;
          cursor: pointer;
          visibility: visible !important;
          font-size: 4em !important;
      }
      .menu-btn {
          font-size: 1.2vmin !important;
          font-size: 1.5vmax !important;
      }
      section {
          padding-left: 5%;
          padding-right: 5%;
      }
      .ul .cancel-btn {
          position: absolute;
          right: 30px;
          top: 20px;
      }
      .icon {
          display: block;
      }
      .icon.hide {
          display: none;
      }
      .container .activee.show {
          left: 0%;
      }
      body.disabled {
          overflow: hidden;
      }
  }