/* ------------------------------------------------------------------
   Project overrides. Loaded last, so it wins over the theme.
   ------------------------------------------------------------------ */

/* The header is pulled up over the section below it (margin-bottom: -106px)
   but is not positioned, while .breadcumb-area is position:relative — so on
   the service pages the banner painted straight over the top of the header and
   it looked like there was no header at all. Lifting the header above it.
   Layout is unchanged; only the stacking order. */
.header-area {
    position: relative;
    z-index: 99;
}

/* The theme's breadcumb banner references an image the template never
   shipped (images/about-inner/breadcumb-bg.html), which left white text on a
   white background. Fall back to a brand gradient; drop a real photo at
   assets/images/breadcumb-bg.jpg and it takes over automatically. */
.breadcumb-area {
    background: linear-gradient(120deg, #0b1b33 0%, #16305c 55%, #f77b21 160%),
                url(../images/breadcumb-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    padding: 180px 0 120px;
}

.breadcumb-content ul li,
.breadcumb-content ul li a,
.breadcumb-content h4 {
    color: #fff;
}

/* Client logos: the carousel is set up for five across, so while there are only
   a couple of clients the logos would bunch up on the left. Centre them.
   Once there are five or more this rule stops having any visible effect. */
.brand_list .owl-stage {
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-thumb img {
    object-fit: contain;
}

/* ------------------------------------------------------------------
   Image placeholders.

   Any image declared via img() that is not yet on disk renders as one of
   these: it names the file to supply and the exact pixel size. Drop the real
   file at the path shown and the placeholder disappears on the next reload.
   See IMAGES-NEEDED.md for the full list.
   ------------------------------------------------------------------ */
.img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 24px 18px;
    text-align: center;
    border: 2px dashed #c9cfd8;
    border-radius: 6px;
    background: repeating-linear-gradient(
        45deg,
        #f7f8fa,
        #f7f8fa 12px,
        #eef1f5 12px,
        #eef1f5 24px
    );
    color: #5b6675;
}

.img-placeholder-icon {
    font-size: 30px;
    line-height: 1;
    color: #9aa5b3;
}

.img-placeholder strong {
    font-size: 16px;
    color: #33404f;
}

.img-placeholder code {
    font-size: 12px;
    color: #0b1b33;
    background: #fff;
    border: 1px solid #dfe4ea;
    border-radius: 4px;
    padding: 2px 8px;
    word-break: break-all;
}

.img-placeholder-size {
    font-size: 13px;
    font-weight: 700;
    color: #f77b21;
}

.img-placeholder-note {
    font-size: 12px;
    max-width: 34ch;
}

/* Service page odds and ends.

   .service-details-text-content is styled by the theme as white italic 22px —
   it was meant for a pull-quote on a dark panel. The "What You Get" list on the
   service pages reuses the class on a white background, so the text was
   invisible. Reset it to normal body copy. */
.service-details-area .service-details-text-content p {
    color: #33404f;
    font-size: 17px;
    line-height: 28px;
    font-style: normal;
    width: 100%;
}

.service-details-area .widget-category ul li a {
    color: #33404f;
}

.service-details-area .widget-category ul li a:hover {
    color: #f77b21;
}