/* Default state */
.custom-nav {
    color: #333;
    background-color: transparent;
    transition: background-color 0.3s, color 0.3s;
    border-top: 0px !important;
    border-right: 0px !important;
    border-left: 0px !important;

}

.custom-nav-rounded-top-right {
    border-top-left-radius: 0.5rem; /* size you want */
}

/* Hover state */
.custom-nav:hover {
    background-color: #ffffff;
    color: #7533f9;
    border-radius: inherit;
}

/* Active state (Bootstrap uses .active on nav-link) */
.custom-nav.active {
    background-color: #7533f9 !important;
    color: white !important;
    border-bottom: 0px;
    margin-bottom: 0px;
    border-radius: inherit;
}

.custom-nav-item {
    border-top: 0.5px solid #d3d3d3;
    border-right: 0.5px solid #d3d3d3;
    border-left: 0.5px solid #d3d3d3;
}