/* Fix for accordion arrow overlapping text */
.accordion-modern-status-arrow .card .card-header .accordion-toggle {
    padding-right: 3rem !important;
}

/* OEM Logo Filters and Sizing */
.oem-logo-card {
    transition: all 0.3s ease;
}

.oem-logo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
}

.oem-logo {
    filter: grayscale(100%);
    transition: all 0.3s ease-in-out;
}

.oem-logo-card:hover .oem-logo {
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* Standardize Specific Small Logos */
img.oem-logo[alt="Howden"],
img.oem-logo[alt="Grundfos"],
img.oem-logo[alt="Danfoss"],
img.oem-logo[alt="Krohne"],
img.oem-logo[alt="Semco"],
img.oem-logo[alt="Mita"],
img.oem-logo[alt="IMI Remosa"],
img.oem-logo[alt="Boerger"],
img.oem-logo[alt="NE"],
img.oem-logo[alt="Walter Tosto"] {
    transform: scale(1.2);
}

img.oem-logo[alt="Atlas Copco"],
img.oem-logo[alt="Tank Connection"],
img.oem-logo[alt="Siemens Automation"] {
    transform: scale(1.08);
}

.oem-logo-card:hover img.oem-logo[alt="Howden"],
.oem-logo-card:hover img.oem-logo[alt="Grundfos"],
.oem-logo-card:hover img.oem-logo[alt="Danfoss"],
.oem-logo-card:hover img.oem-logo[alt="Krohne"],
.oem-logo-card:hover img.oem-logo[alt="Semco"],
.oem-logo-card:hover img.oem-logo[alt="Mita"],
.oem-logo-card:hover img.oem-logo[alt="IMI Remosa"],
.oem-logo-card:hover img.oem-logo[alt="Boerger"],
.oem-logo-card:hover img.oem-logo[alt="NE"],
.oem-logo-card:hover img.oem-logo[alt="Walter Tosto"] {
    transform: scale(1.25);
}

.oem-logo-card:hover img.oem-logo[alt="Atlas Copco"],
.oem-logo-card:hover img.oem-logo[alt="Tank Connection"],
.oem-logo-card:hover img.oem-logo[alt="Siemens Automation"] {
    transform: scale(1.12);
}

/* Footer Ribbon Typography Fix */
#footer .footer-ribbon span {
    font-family: var(--font-family-sans-serif, Arial, Helvetica, sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.5px !important;
}


/* ============================================================
   Who We Are (#intro) — single map image presentation
   Theme shipped a 2-image cascade; only the map remains.
   ============================================================ */

/* Cascade offset existed to stagger two images — not needed for one.
   Theme also gives .cascading-images a translate3d(0,-35%,0) lift and makes
   the wrapper inline-block; both fight centring with a single image. */
#intro .custom-cascading-images-wrapper-1 {
    padding: 0;
    display: block;
    width: 100%;
}

#intro .cascading-images-wrapper .cascading-images {
    transform: none;
}

#intro .cascading-images {
    max-width: 560px;
    margin: 0 auto;
}

/* Clean framed map, replaces the notched custom-mask-img-3 */
#intro .intro-map-figure {
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 22px 55px -18px rgba(0, 0, 0, 0.38);
    line-height: 0;
}

#intro .intro-map-figure img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.6s ease;
}

#intro .intro-map-figure:hover img {
    transform: scale(1.04);
}

/* "Join Us | 1000+ clients globally!" pill, overhanging bottom-left */
#intro .intro-map-badge {
    bottom: -22px;
    left: -22px;
    white-space: nowrap;
    z-index: 2;
}

@media (max-width: 991.98px) {
    #intro .intro-map-badge {
        bottom: -18px;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 575.98px) {
    #intro .intro-map-badge {
        white-space: normal;
        text-align: center;
        max-width: 92%;
    }
}

/* Decorative blob sits behind and centred on the map, not the column.
   SVG viewBox is 36.83 x 41.92 (taller than wide), so height is derived. */
#intro .intro-bg-shape {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 88%;
    max-width: 470px;
    pointer-events: none;
    z-index: 0;
}

#intro .intro-bg-shape img,
#intro .intro-bg-shape svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Map and badge ride above the blob */
#intro .cascading-images-wrapper {
    position: relative;
    z-index: 1;
}

/* ============================================================
   Interior page heroes
   Used by about / services / industries / news / contact and the
   shared porto page-header partial. Scoped to .bg-primary so the
   home carousel and the classic portfolio header are untouched.
   ============================================================ */

.page-header.bg-primary {
    overflow: hidden;                 /* clip the decorative bleed */
}

/* Same hero height on every page, regardless of copy length */
.page-header.bg-primary > .container > .row {
    min-height: 260px;
}

/* Theme stacks py-2 (container) + py-5 (row) + py-4 (header-body).
   Drop the innermost so the text block is optically centred. */
.page-header.bg-primary .header-body {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Readable measure - long subtitles were running the full column */
.page-header.bg-primary .header-body p {
    max-width: 56ch;
}

.page-header.bg-primary .header-body h1 {
    max-width: 20ch;
}

/* Image: fixed height and fully inside the hero.
   Theme gives .custom-el-6 a -70px lift that hung it below the block. */
@media (min-width: 992px) {
    .page-header.bg-primary .custom-el-6 {
        margin-bottom: 0;
        margin-left: 0;
    }
}

.page-header.bg-primary .custom-el-6 {
    line-height: 0;
}

.page-header.bg-primary .custom-el-6 img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

@media (min-width: 1200px) {
    .page-header.bg-primary .custom-el-6 img {
        height: 230px;
    }
}

/* ============================================================
   CTA band (home_cta) — flat solid colour, no glow or halo.
   Theme's section.section adds background/border/margin; the
   badge pills shipped with shadow-sm + box-shadow-1, which read
   as a light halo against the dark red.
   ============================================================ */
.cta-flat {
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    border: 0 !important;
    text-shadow: none !important;
}

.cta-flat::before,
.cta-flat::after {
    display: none !important;
}

.cta-flat h2,
.cta-flat p,
.cta-flat span {
    text-shadow: none !important;
}

.cta-flat-pill {
    box-shadow: none !important;
    filter: none !important;
    border: 0 !important;
}

/* ============================================================
   About > "Our Comprehensive Portfolio" image mosaic.
   Theme shipped three absolutely-positioned images that piled on
   top of each other (the third covered the other two) and hid two
   of them below 576px. Replaced with a real grid.
   ============================================================ */
.portfolio-mosaic {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

/* First image spans the full width as the lead shot */
.portfolio-mosaic-wide {
    grid-column: 1 / -1;
}

.portfolio-mosaic-item {
    margin: 0;
    overflow: hidden;
    border-radius: 14px;
    background-color: #e6e6e6;
    box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.35);
}

.portfolio-mosaic-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Source images are landscape (16:9 and 3:2), so crop to suit each slot */
.portfolio-mosaic-wide img {
    aspect-ratio: 16 / 9;
}

.portfolio-mosaic-item:not(.portfolio-mosaic-wide) img {
    aspect-ratio: 4 / 3;
}

.portfolio-mosaic-item:hover img {
    transform: scale(1.05);
}

/* Single column on phones rather than two cramped thumbnails */
@media (max-width: 575.98px) {
    .portfolio-mosaic {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .portfolio-mosaic-item:not(.portfolio-mosaic-wide) img {
        aspect-ratio: 16 / 9;
    }
}

/* ============================================================
   Card media box — shared by the Services cards (.service-card)
   and the Equipment Portfolio cards (.portfolio-card). Both used
   fixed pixel image heights with no scrim; this is one ratio-based
   media box shared by the pair.
   ============================================================ */
.service-card {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 46px -18px rgba(0, 0, 0, 0.45) !important;
}

.service-card-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background-color: #e6e6e6;
    line-height: 0;
}

.service-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.service-card:hover .service-card-media img,
.portfolio-card:hover .service-card-media img {
    transform: scale(1.06);
}

/* Soft scrim so the photo settles into the white card body
   instead of ending on a hard edge */
.service-card-media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 40%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0));
    pointer-events: none;
}

/* Feature/application lists sit tighter under their headings */
.service-card .list-icons-sm > li {
    margin-bottom: 0.25rem;
}

/* ============================================================
   Blog article page (news/show)
   Typography, hero and share row. These rules previously lived
   in an 80-line inline <style> inside the template.
   ============================================================ */

/* ---- Article head: plain text, no panel -------------------- */
.article-head {
    padding-top: 3.5rem;
}

.article-head h1 {
    margin: 0 0 1rem;
    color: #14181d;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.2;
}

/* date | category | read time, separated by thin rules */
.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    font-size: 0.9rem;
    color: #6d747c;
}

.article-meta span + span {
    margin-left: 0.9rem;
    padding-left: 0.9rem;
    border-left: 1px solid rgba(0, 0, 0, 0.15);
}

.article-lead {
    margin: 1.25rem 0 0;
    font-size: 1.12rem;
    line-height: 1.7;
    color: #4a5058;
}

@media (max-width: 767.98px) {
    .article-head {
        padding-top: 2rem;
    }

    .article-head h1 {
        font-size: 1.75rem;
    }
}

/* ---- Featured image
 (its own block, below the header) ------ */
.article-featured {
    margin: 0 0 3rem;
    border-radius: 14px;
    overflow: hidden;
    background-color: #e6e6e6;
    line-height: 0;
    box-shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.4);
}

.article-featured img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}

@media (max-width: 767.98px) {
    .article-featured {
        margin-bottom: 2rem;
        border-radius: 10px;
    }

    .article-featured img {
        aspect-ratio: 16 / 9;
    }
}

/* ---- Back link --------------------------------------------- */
.article-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #690308;
    text-decoration: none;
    transition: gap 0.25s ease, opacity 0.25s ease;
}

.article-back:hover {
    color: #690308;
    gap: 0.85rem;
    opacity: 0.75;
}

/* ---- Article body ------------------------------------------ */
.post-content {
    /* Theme's custom-text-color-1 washed the copy out to a pale blue */
    color: #33383e !important;
    font-size: 1.06rem;
    line-height: 1.85;
}

.post-content > *:first-child {
    margin-top: 0;
}

.post-content p {
    margin-bottom: 1.6rem !important;
    line-height: 1.85 !important;
    color: #33383e;
}

.post-content h2,
.post-content h3,
.post-content h4 {
    color: #14181d;
    font-weight: 700;
    line-height: 1.3;
    /* Headings need far more space above than below so sections read
       as groups rather than an even stream */
    margin-top: 2.75rem;
    margin-bottom: 0.9rem;
}

.post-content h2 { font-size: 1.6rem; }
.post-content h3 { font-size: 1.32rem; }
.post-content h4 { font-size: 1.12rem; }

.post-content a {
    color: #690308;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.post-content a:hover {
    opacity: 0.75;
}

.post-content strong {
    color: #14181d;
    font-weight: 700;
}

.post-content ul,
.post-content ol {
    margin: 0 0 1.6rem;
    padding-left: 1.25rem;
}

.post-content li {
    margin-bottom: 0.6rem;
    padding-left: 0.35rem;
}

.post-content ul > li::marker {
    color: #690308;
}

.post-content ol > li::marker {
    color: #690308;
    font-weight: 700;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 2rem 0;
}

.post-content blockquote {
    margin: 2rem 0;
    padding: 0.35rem 0 0.35rem 1.4rem;
    border-left: 3px solid #690308;
    font-size: 1.12rem;
    font-style: italic;
    color: #4a5058;
}

.post-content hr {
    margin: 2.5rem 0;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.09);
}

.post-content code {
    padding: 0.15em 0.4em;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.05);
    font-size: 0.9em;
    color: #690308;
}

/* Tables shipped completely unstyled */
.post-content table {
    width: 100%;
    margin: 2rem 0;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    font-size: 0.96rem;
}

.post-content thead th {
    background: #f5f2f2;
    color: #14181d;
    font-weight: 700;
    text-align: left;
}

.post-content th,
.post-content td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    vertical-align: top;
}

.post-content tbody tr:last-child th,
.post-content tbody tr:last-child td {
    border-bottom: 0;
}

.post-content tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.018);
}

/* Wide tables scroll on small screens only. Applying display:block
   to a table on desktop stops the cells stretching to width:100%,
   which left a dead gap on the right of the last column. */
@media (max-width: 767.98px) {
    .post-content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ---- Sidebar ----------------------------------------------- */
.article-sidebar-card {
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
}

.article-sidebar-card .list-icons-style-2 > li {
    padding-left: 1.9rem;
}

/* ---- Share row --------------------------------------------- */


.share-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 50%;
    background-color: #f8f9fa;
    color: #333;
    text-decoration: none;
    cursor: pointer;
}

.share-btn:focus-visible {
    outline: 2px solid #0077b5;
    outline-offset: 2px;
}

.share-facebook:hover { background-color: #1877f2 !important; color: #fff !important; border-color: #1877f2 !important; }
.share-x:hover        { background-color: #000     !important; color: #fff !important; border-color: #000     !important; }
.share-linkedin:hover { background-color: #0077b5 !important; color: #fff !important; border-color: #0077b5 !important; }
.share-whatsapp:hover { background-color: #25d366 !important; color: #fff !important; border-color: #25d366 !important; }
.share-telegram:hover { background-color: #229ed9 !important; color: #fff !important; border-color: #229ed9 !important; }
.share-email:hover    { background-color: #6c757d !important; color: #fff !important; border-color: #6c757d !important; }
.share-copy:hover     { background-color: #495057 !important; color: #fff !important; border-color: #495057 !important; }

.share-copy.share-copied {
    background-color: #28a745 !important;
    color: #fff !important;
    border-color: #28a745 !important;
}

@media (max-width: 991.98px) {
    .article-meta {
        gap: 1rem;
        font-size: 0.84rem;
    }

    .post-content {
        font-size: 1rem;
    }
}

/* Section eyebrow badge: the pill carries 2rem of its own left padding, which
   pushes its label right of the heading below it. Pull the pill back by that
   amount so both lines of text share one left edge. Only from lg up, where the
   section has room; below that the pill would overflow the container padding. */
@media (min-width: 992px) {
    .badge-align-heading {
        margin-left: -2rem;
    }
}

/* ==========================================================================
   About page
   The section blades used to carry inline `style="background: #690308"` and a
   `padding-top: 23px` nudge to fake-centre the icons. Both are replaced here so
   the palette follows the active skin's --primary and the icons centre properly.
   ========================================================================== */

/* Shared card treatment: one shadow scale and one hover across every about
   section, instead of box-shadow-1 in one place and box-shadow-2 in another. */
.about-card {
    background-color: #fff;
    border: 1px solid rgba(17, 17, 17, 0.06);
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(17, 17, 17, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.about-card:hover {
    transform: translateY(-6px);
    border-color: rgba(105, 3, 8, 0.18);
    box-shadow: 0 16px 40px rgba(17, 17, 17, 0.12);
}

/* Circular icon badge. Centring is done by the grid, so the icon stays put at
   any size — the old rule combined flex centring with padding-top and pushed
   the glyph ~23px below centre. */
.icon-circle-primary {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    flex: 0 0 auto;
    border-radius: 50%;
    background-color: var(--primary, #690308);
    color: #fff;
    box-shadow: 0 8px 20px rgba(105, 3, 8, 0.28);
}

.icon-circle-primary > i {
    font-size: 2.25rem;
    line-height: 1;
    color: #fff;
}

.icon-circle-sm {
    width: 76px;
    height: 76px;
}

.icon-circle-sm > i {
    font-size: 1.75rem;
}

/* --- Timeline ----------------------------------------------------------- */
/* The connector is a single pseudo-element behind the markers, so it can't
   drift the way the previous per-row spacer div with negative margins did. */
.about-timeline {
    position: relative;
    padding-left: 0;
}

.about-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding-bottom: 2rem;
}

.about-timeline-item:last-child {
    padding-bottom: 0;
}

.about-timeline-item::before {
    content: "";
    position: absolute;
    top: 60px;
    bottom: 0;
    left: 29px;
    width: 2px;
    background-color: rgba(105, 3, 8, 0.18);
}

.about-timeline-item:last-child::before {
    display: none;
}

.about-timeline-marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    border-radius: 50%;
    background-color: var(--primary, #690308);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(105, 3, 8, 0.28);
}

.about-timeline-card {
    flex: 1 1 auto;
    min-width: 0;
}

.about-timeline-year {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--primary, #690308);
    border-radius: 999px;
    color: var(--primary, #690308);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

@media (max-width: 575.98px) {
    .about-timeline-item {
        gap: 0.875rem;
    }

    .about-timeline-marker {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
        font-size: 1rem;
    }

    .about-timeline-item::before {
        top: 48px;
        left: 23px;
    }
}

/* --- Certifications ----------------------------------------------------- */
.cert-card-icon {
    color: var(--primary, #690308);
    font-size: 1.375rem;
    line-height: 1;
    flex: 0 0 auto;
}

.cert-card .card-body {
    gap: 0.25rem;
}

/* --- Who we are --------------------------------------------------------- */
/* Cap the measure: full-width paragraphs on a 1400px container run past the
   ~75-character line length that stays comfortable to read. */
.content-block-text {
    max-width: 60ch;
    color: #666;
}

.content-block-text p:last-child {
    margin-bottom: 0;
}

.content-block-badge {
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: 14px;
    background-color: var(--primary, #690308);
    box-shadow: 0 12px 30px rgba(17, 17, 17, 0.25);
}

@media (max-width: 575.98px) {
    .content-block-badge {
        right: 1rem;
        bottom: 1rem;
        padding: 0.875rem 1rem;
    }

    .content-block-badge strong {
        font-size: 1.75rem !important;
    }
}

/* --- CTA ---------------------------------------------------------------- */
/* The button_text / button_link fields were stored by the admin but never
   rendered; these styles are for the anchor that now surfaces them. */
.cta-flat-btn {
    background-color: #fff;
    border: 0;
    color: var(--primary, #690308);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.cta-flat-btn:hover,
.cta-flat-btn:focus {
    background-color: #f7f0e7;
    color: var(--primary, #690308);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.cta-flat-badges {
    row-gap: 0.75rem;
}

/* ============================================================
   Inner-page hero image.

   The theme masked this image with mask-image-4.png, which cuts
   a rectangular notch out of the bottom-left and so leaves a
   step/tab jutting out at the bottom-right. The mask classes are
   removed from every inner-page hero (the home slider keeps its
   own mask-image-1), which also drops the soft corners the mask
   provided — restore those here so the image still matches the
   rounded banner it sits in.
   ============================================================ */
.page-header .custom-el-6 img {
    border-radius: var(--border-radius2x, 10px);
}