/* ===== CORXOR Sub-Banner (works with your exact markup) ===== */
.sub-banner {
    padding: clamp(16px, 3vh, 28px) 0;
    /*background: linear-gradient(180deg, #0f172a 0%, #111827 100%);*/ /* dark slate */
    color: #fff;
    box-shadow: 0 10px 24px rgba(2,6,23,.15);
    border-bottom: 2px solid rgba(255,255,255,.06);
}

    /* keep width consistent with rest of site even if container-fluid is used */
    .sub-banner .container-fluid {
        max-width: 1140px;
        margin: 0 auto;
        padding-inline: clamp(12px, 3vw, 24px);
    }

    /* breadcrumb reset + contrast */
    .sub-banner .breadcrumb {
        background: transparent;
        margin: 0;
    }

        .sub-banner .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
            color: rgba(255,255,255,.7);
        }

        .sub-banner .breadcrumb .breadcrumb-item a {
            color: #e5e7eb;
            text-decoration: none;
        }

            .sub-banner .breadcrumb .breadcrumb-item a:hover {
                color: #ffffff;
                text-decoration: underline;
                text-underline-offset: 2px;
            }

        .sub-banner .breadcrumb .breadcrumb-item.active {
            color: rgba(255,255,255,.85);
        }

/* OPTIONAL: If you add a page title under the breadcrumb, it will look right */
.sub-banner-title {
    font-weight: 800;
    line-height: 1.15;
    margin: 6px 0 0 0;
    font-size: clamp(1.5rem, 3.8vw, 2.25rem);
    max-width: 28ch; /* prevents super-wide headlines */
    text-wrap: balance;
}

/* small screens */
@media (max-width: 576px) {
    .sub-banner .container-fluid {
        padding-inline: 16px;
    }
}