.coustom-nav {
  --bs-nav-link-padding-x: 1rem;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-color: var(--bs-link-color);
  --bs-nav-link-hover-color: var(--bs-link-hover-color);
  --bs-nav-link-disabled-color: var(--bs-secondary-color);
  border-left: 5px dotted rgb(231, 231, 231) !important; /* Dotted line */
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.coustom-nav-pills {
  --bs-nav-pills-border-radius: var(--bs-border-radius);
  --bs-nav-pills-link-active-color: #fff;
  --bs-nav-pills-link-active-bg: #0d6efd;
} 
ul.coustom-nav {
  position: relative;
}
button.active::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: var(--primary-color);
  border: 3px solid var(--primary-color);
  border-radius: 50%;
  position: absolute;
  left: -29px; /* Adjust for positioning */
  top: 15%;
  transform: translateY(-50%);
}
button {
  background: transparent;
  border: none;
  color: #ffffff;
  padding: 1rem;
  text-align: left;
}
.nav-item .btn.active h6,
.nav-item .btn.active h5 {
  color: var(--primary-color);
  font-weight: bold !important;
}