.sidebar{
  min-height:95vh;
  background:linear-gradient(180deg,#191818,#2e2d2d);
  padding:5px;
  position:relative;
  overflow-y:auto;
  transition:0.4s ease;
  border-radius: 8px;
}

.sidebar::before{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:450px;
  background:radial-gradient(circle,#0f5cff22 2px,transparent 2px);
  background-size:30px 20px;
}

.menu-title{
  background:#fff;
  color:#2e2d2d;
  font-size:18px;
  font-weight:bold;
  text-align:center;
  padding:5px;
  margin-bottom:15px;
  position:relative;
  z-index:1;
}

.menu{
  list-style:none;
  position:relative;
  z-index:1;
  
}

.menu li{
  margin-bottom:8px;
}

.menu-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-decoration:none;
  padding:5px 10px;
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-size:17px;
  font-weight:600;
  transition:0.3s ease;
  backdrop-filter:blur(5px);
}

.menu-link span{
  display:flex;
  align-items:center;
  gap:15px;
}

.menu-link i{
  transition:0.3s ease;
  font-size:17px;
  transition:all 0.3s ease;
  transform: translateY(1.0); transition: max-height 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
  width:20px;
}

.menu-link:hover{
  background:#fff;
  color:#000;
  transition:0.3s ease;
  transform:translateX(5px);
  transform:scale(1.02);
}

.has-submenu.active > .menu-link{
  background:#fff;
  color:#000;
  margin-bottom: 10px;
}

.arrow{
  transition:0.3s ease;
}

.has-submenu.active .arrow{
  transform:rotate(180deg);
}

.submenu{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.5s ease;
  margin:5px 0 0 15px;
}

.has-submenu.active .submenu{
  max-height:300px;
  background-color: #404040;
}

.submenu li{
  margin-bottom:2px;
}

.submenu a{
  display:block;
  text-decoration:none;
  color:#fff;
  padding:5px 10px;
  transition:0.3s ease;
  font-size:17px;
  transition:all 0.3s ease;
  transform: translateY(1.0); transition: max-height 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.submenu a:hover,
.submenu a.active{
  background:#fff;
  color:#2e2d2d;
  padding:5px 10px;
  transition:0.3s ease;
  transform:translateX(5px);
  transform:scale(1.02);
}

@media screen and (max-width: 480px) {
.sidebar {
    display: none;
}
	
}