/* ==========================================================
   1) BREADCRUMB: shared list styling (all pages)
========================================================== */
.common-breadcrumb {
    margin: 0 0 14px;
    padding: 0 0 23px 1em;
    list-style: none !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 14px;
}

.common-breadcrumb li {
    margin: 0;
    padding: 0;
    list-style: none !important;
}

.common-breadcrumb li + li::before {
    content: "/";
    padding: 0 9px;
}

.common-breadcrumb a,
.common-breadcrumb a:hover {
    text-decoration: none;
}

.common-breadcrumb a:focus {
    outline: 2px solid #69aadd;
    outline-offset: 2px;
}

/* ==========================================================
   2) BREADCRUMB BAR (light background, all pages)
   Keep your existing .common-main-breadcrumbs background/padding rules.
========================================================== */
.common-main-breadcrumbs .common-breadcrumb li,
.common-main-breadcrumbs .common-breadcrumb li + li::before {
    color: #9aa7b4;
}

.common-main-breadcrumbs .common-breadcrumb a {
    color: #3d86c2;
}

.common-main-breadcrumbs .common-breadcrumb a:hover {
    color: #ef493d;
}

/* current page (last item) */
.common-main-breadcrumbs .common-breadcrumb li:last-child,
.common-main-breadcrumbs .common-breadcrumb li.current-item,
.common-main-breadcrumbs .common-breadcrumb li[aria-current="page"] {
    color: #1d2b3a;
}

/* ==========================================================
   3) BANNER: Our Work page only
========================================================== */
.new-common-banner-all-page {
    position: relative;
    height: 280px;
    display: flex;
    align-items: center;
    text-align: left;
    background-color: #050f24; /* matches the dark edge of the image */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right center;
}

/* Light overlay, only behind the title area */
.new-common-banner-all-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5,15,36,.65) 0%, rgba(5,15,36,.25) 45%, rgba(5,15,36,0) 70%);
}

.new-common-banner-all-page .container {
    position: relative;
    z-index: 1;
}

.new-common-banner-all-page h1 {
    margin: 0;
    color: #fff;
    font-size: 40px;
    font-weight: 600;
}

/* Only needed if you un-comment the <p> subtitle */
.new-common-banner-all-page h1 + p {
    margin: 10px 0 0;
    max-width: 520px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 17px;
    line-height: 1.5;
}

/* ==============================
   Tablet
================================= */
@media (max-width: 991px) {
    .new-common-banner-all-page { height: 230px; }
    .new-common-banner-all-page h1 { font-size: 36px; }
}

/* ==============================
   Mobile
================================= */
@media (max-width: 767px) {
    .common-breadcrumb { font-size: 13px; }

    .new-common-banner-all-page {
        height: 190px;
        text-align: center;
        background-position: 65% center; /* keeps Europe, Asia and Africa in view */
    }
    .new-common-banner-all-page::before { background: rgba(5,15,36,.55); }
    .new-common-banner-all-page h1 { font-size: 30px; }
    .new-common-banner-all-page h1 + p { margin-left: auto; margin-right: auto; font-size: 15px; }
}