@media (max-width: 1000px) {
  .navbar-offcanvas {
    position: fixed;
    display: block;
    width: 100%;
    max-width: 250px;
    height: 100%;
    right: -40px;
    top: 0;
    padding-left: 15px;
    padding-right: 15px;
    z-index: 999;
    overflow: auto;
    transform: translateX(250px); /* Off-screen to the right */
    transition: transform 0.5s ease; /* Smooth transition */
    background-color: #f8f8f8; /* Optional: Add background color to ensure it's visible */
  }

  /* Menu slides in */
  .menu-slide-in {
    transform: translateX(0); /* Slide into view */
  }

  /* Menu slides out */
  .menu-slide-out {
    transform: translateX(250px); /* Slide out of view */
  }
}