.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 white !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;
  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;
}
.dotted-line-black{
  border-left: 5px dotted black !important; /* Dotted line */
}
.coustom-nav h5.step-title{
  color:var(--primary-color)!important;
}
.dotted-line-black>li>button.active::before{
  border-color:#fff!important;
}
.dotted-line-black {
  border-left: 5px dotted black !important; /* Dotted line */
}
.coustom-nav h5.step-title {
  color: var(--primary-color) !important;
}
.dotted-line-black > li > button.active::before {
  border-color: #fff !important;
}
.dotted-line-black > li > button.active h6 {
  color: var(--primary-color) !important;
}