@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');

.breadcrumb-item.active {
    font-size: large !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis !important;

}

.breadcrumb-item a {
    font-size: large !important;
    text-decoration: none !important;
    color: rgba(33, 37, 41, 0.75) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis !important;

}


.breadcrumb-item a:hover {
    text-decoration: underline !important;
    color: inherit;
    text-overflow: ellipsis !important;

}

.events-header {
    position: sticky;
    top: 0;
    border-bottom: 1px solid rgb(238, 237, 242);
    height: 70px;
    z-index: 1020;
    background-color: white; /* Optional: ensure background covers content behind */
}

#event-header-container {
    overflow-y: hidden;    /* prevent horizontal scrollbar */
    flex-wrap: nowrap;     /* keep flex items in one row */
}
/* Mobile responsive adjustments */
@media (max-width: 576px) {
    .breadcrumb-item.active,
    .breadcrumb-item a {
        font-size: 14px !important;
        max-width: 150px;
        display: inline-block;
        text-overflow: ellipsis !important;
    }

    .events-header {
        position: static !important;
    }
}