html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}
button#navbarSideClose {
    display: none;
}


@media (max-width: 991.98px) {
  .offcanvas-collapse {
    position: fixed;
    top: 0px; /* Height of navbar */
    bottom: 0;
    left: 100%;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    visibility: hidden;
    background-color: #fff;
    transition: transform .3s ease-in-out, visibility .3s ease-in-out;
  }
  .offcanvas-collapse.open {
    visibility: visible;
    transform: translateX(-100%);
	z-index:999;
  }
  ul#menu-main-menu li::after{content:none !important;}
  div#navbarsExampleDefault {
    justify-content: right;
}
button#navbarSideCollapse svg {
    padding: 6px;
    background: #fff;
    width: 30px;
    height: 30px;
}
	button#navbarSideClose:focus-visible, button#navbarSideClose:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none  !important;
}
	
    .offcanvas-close {
        display: flex !important;
        align-items: center;
        gap: 6px;
        background: none;
        border: none;
        font-size: 1rem;
        color: #333;
        cursor: pointer;
		padding-top:1rem;
        width: 100%;
        justify-content: right;
        font-weight: 600;
    }
    .offcanvas-close svg {
        width: 30px;
        height: 30px;
        background: #f0f0f0;
        border-radius: 50%;
        padding: 3px;
    }

.offcanvas-close:hover {
    color: #000;
}	
	
}

.nav-scroller .nav {
  color: rgba(255, 255, 255, .75);
}

.nav-scroller .nav-link {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: .875rem;
  color: #6c757d;
}

.nav-scroller .nav-link:hover {
  color: #007bff;
}

.nav-scroller .active {
  font-weight: 500;
  color: #343a40;
}

.bg-purple {
  background-color: #6f42c1;
}