/* --- Custom Tab Styles --- */

/* Changes the color of the bottom border for the entire tab component */

.nav-tabs {
  /*border-bottom: 1px solid #28a745;*/
}

/* Styles the active tab link */

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: #ffffff;
    background-color: #bf4bf9;
    border: 1px solid #bf4bf9; /* top, left, right borders */
    border-bottom: 4px solid #4a006e; /* thicker bottom border */
}
/* Optional: Changes the text color of non-active tabs for better consistency */

.nav-tabs .nav-link {
  color: #bf4bf9;
}

/* Optional: Style for the tab link on hover (but not the active one) */

.nav-tabs .nav-link:not(.active):hover {
  border-color: transparent transparent #bf4bf9;
  background-color: #f2f2f2;
}