.scrollspyNavBar{
    padding-top: 0px;
    padding-bottom: 0px;
}

.scrollspyNavBar .container-fluid {
    display: flex;
    align-items: center;
    justify-content: start; /* Align items to the start of the container */
    gap: 10px; /* Adds space between the elements */
}
.scrollspyNavBar .scrolling-wrapper-flexbox .nav-link {
    padding: 0.3rem 0.8rem; 
    font-size: 1rem;
    border-bottom: 3px solid transparent; 
    border-radius: 0.5em;
    transition: background-color 0.3s ease, color 0.3s ease, border-radius 0.3s ease; /* Include all transitioning properties */
}

.scrollspyNavBar .scrolling-wrapper-flexbox .nav-link.active {
    color: var(--bs-body-bg);  
    background-color: var(--color-standard);
}

.scrollspyNavBar .scrolling-wrapper-flexbox .nav-link:hover {
    color: var(--color-standard);
}

.scrollspyNavBar .scrolling-wrapper-flexbox .nav-link.active:hover {
    color: var(--bs-body-bg);
}

.scrolling-wrapper-flexbox {
    display: flex;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
    flex-grow: 1; /* Allows the scrollable area to fill available space */
    -ms-overflow-style: none;  /* Hide scrollbar for IE 10+ */
    scrollbar-width: none;  /* Hide scrollbar for Firefox */
}

.scrolling-wrapper-flexbox::-webkit-scrollbar { 
    display: none;  /* Hide scrollbar for Chrome, Safari */
}

.scrolling-wrapper-flexbox .nav {
    flex-wrap: nowrap;
}

.scrolling-wrapper-flexbox .nav-item {
    display: inline-block;
}