#progressBarContainer {
    top: 0;
    left: 0;
    width: 10px;
    background-color: #f1f1f1;
    height: 600px;
    border-radius:20px;
    display: inline-block;
    margin-right:20px;
}
.sticky {
    position: -webkit-sticky;
    position: sticky;
    display: flex;
    top: 100px;
    z-index: 4; /* Adjust as needed */

}
#progressBar {
    width: 100%;
    background-color: #0188ff;
    height: 0%;
}

#headingContainer {
    display:inline-block;
    width:80%;
    /* Additional styling as needed */
}

.active-heading {
    font-weight: bold;
}
#headingContainer h1, #headingContainer h2, #headingContainer h3, #headingContainer h4, #headingContainer h5, #headingContainer h6 {
    transition: font-weight 0.3s ease;
}
#headingContainer li:after {
    content: "";
    background: #000;
    height: 2px;
    width: 100%;
    position: absolute;
    bottom: -10px;
    left: 0px;
    opacity: 0;
     transition: all ease .5s;
    -moz-transition: all ease .5s;
    -webkit-transition: all ease .5s;
}
#headingContainer li {
    list-style-type: none; /* Remove bullet points */
    margin-bottom: 10px;
    cursor: pointer;
    position: relative;
    transition: all ease .5s;
    -moz-transition: all ease .5s;
    -webkit-transition: all ease .5s;
}
#headingContainer li:hover:after {
    opacity:1;
}
#headingContainer .active-heading {
    font-weight: bold;
    /* Additional active styling as needed */
}
@media screen and (max-width:480px){
    #progressBarContainer {
        height: auto;
    }
}