/* Import Montserrat font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/* Style for the tab buttons (nav-link) */
.nav-tabs .nav-link {
    font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
    font-size: 14px; /* Set font size */
    color: #4E67C8; /* Set text color */
    display: flex; /* Use flexbox for vertical alignment of text and icon */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally within the button */
    padding: 10px 15px; /* Adjust padding as needed */
    text-align: center; /* Center text if it wraps */
    border: 1px solid transparent; /* Keep Bootstrap's border structure */
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    margin-bottom: -1px; /* Bootstrap default */
}

    /* Style for the active tab */
    .nav-tabs .nav-link.active {
        color: #4E67C8; /* Keep the same color for active tab text, or change if desired */
        background-color: #fff; /* Active tab background */
        border-color: #dee2e6 #dee2e6 #fff; /* Active tab border */
    }

    /* Style for the icon within the tab */
    .nav-tabs .nav-link .tab-icon {
        width: 24px; /* Set icon width */
        height: 24px; /* Set icon height */
        margin-top: 5px; /* Space between text and icon */
        display: block; /* Ensure it takes its own line */
    }

    /* Optional: Hover state for tabs */
    .nav-tabs .nav-link:hover {
        border-color: #e9ecef #e9ecef #dee2e6; /* Bootstrap default hover border */
        color: #4E67C8; /* Keep the same color on hover */
    }