.offcanvas{
  width:330px !important;
}  

   .sidebar {
       position: fixed;
       height: 100%;
       width: 330px;
       background: #11101d;
       padding: 15px;
       z-index: 99;
       direction: rtl;
   }

   .menu-content {
       position: relative;
       height: calc(100% - 60px);
       margin-top: 20px;
       overflow: hidden;
       overflow-y: scroll;
   }
   .menu-content::-webkit-scrollbar {
    display: none;
  }

   .menu-items {
       position: absolute;
       top: 0;
       right: 0;
       width: 100%;
       height: 100%;
       list-style: none;
       margin: 0;
       padding: 0;
       background: #11101d;
       transform: translateX(100%);
       transition: transform 0.4s ease;
       z-index: 0;
   }

   .menu-items.active {
       transform: translateX(0%);
       z-index: 1;
   }

   .item a {
       padding: 16px;
       display: block;
       color: #fff;
       text-decoration: none;
       border-radius: 12px;
   }

   .submenu-item {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 16px;
       color: #fff;
       cursor: pointer;
       border-radius: 12px;
   }

   .submenu-item:hover,
   .item a:hover {
       background: rgba(255, 255, 255, 0.1);
   }

   .back-button {
       background: rgba(255, 255, 255, 0.1);
   }

   .logo {
       color: white;
       font-size: 20px;
       text-decoration: none;
   }