/* ============================================================
   WEB.CSS — public site stylesheet.
   ============================================================ */

/* §  VARIABLES */

:root {
    /* Aliases to theme.css — three blues site-wide: primary, hover (main-color2), deep */
    --es-primary: var(--color-primary);
    --es-primary-deep: var(--color-primary-deep);
    --es-accent: var(--main-color2);
    --es-accent-deep: var(--color-primary);
    --es-text-dark: var(--color-primary-deep);
    --es-text-muted: rgba(var(--color-primary-deep-rgb), .55);
    --es-border: rgba(var(--color-primary-deep-rgb), .14);
    --es-bg-soft: #f5fcff;
    --es-whatsapp: var(--color-whatsapp);
    --es-whatsapp-rgb: var(--color-whatsapp-rgb);

    /* RGB triplets, for rgba() */
    --es-primary-deep-rgb: var(--color-primary-deep-rgb);
    --es-accent-rgb: var(--main-color2-rgb);

    --es-font-heading: var(--font-heading);
    --es-font-body: var(--font-body);
    --es-radius: 14px;
    --es-radius-lg: 24px;
    --es-radius-btn: 10px;
}


/* §  BASE */

* {
    box-sizing: border-box;
}

body {
    font-family: var(--es-font-body);
    font-weight: 400;
    color: var(--es-text-dark);
    background: #fff;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--es-font-heading);
    font-weight: 700;
    margin: 0;
}

p {
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color .15s, opacity .15s;
}

img {
    max-width: 100%;
    display: block;
}


/* §  NAV */

/* The menu already has justify-content:center (vendor CSS), which centers it inside
   its own col-lg-7 — but that column sits between a col-lg-2 logo and a col-lg-3
   button, and 2/12 != 3/12, so "centered in the column" was landing ~57px left of
   the actual nav bar's center (measured at 1440px). Decoupling the menu from the
   column widths entirely — absolutely centered on the bar itself — so it's centered
   regardless of how wide the logo or button happen to be. */
@media (min-width: 992px) {
    #sticky-header .row {
        position: relative;
        justify-content: space-between;
    }

    #sticky-header .col-lg-2,
    #sticky-header .col-lg-3 {
        flex: 0 0 auto;
        max-width: none;
        width: auto;
    }

    #sticky-header .col-lg-7 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 5;
        flex: none;
        max-width: none;
        /* width:auto would shrink-to-fit against the space implied by left:50% alone
           (half the row) instead of the menu's real content width, wrapping it early —
           measured 462px available vs. ~642px actually needed at 992px. max-content
           sizes to the content itself, ignoring that. */
        width: max-content;
    }
}

/* Scoped to the nav specifically — .solutek-btn is the same class used on the hero
   and address-area CTAs, which should stay at their own (larger) vendor size. */
.header-menu-btn .solutek-btn a {
    padding: 10px 20px;
    font-size: 13px;
    background: var(--color-navy);
}

.header-menu-btn .solutek-btn a:hover {
    background: var(--color-primary);
}

.solutek_nav_manu.style-three .solutek_menu > ul > li > a {
    margin: 23px 15px;
}

.solutek_nav_manu.style-three .solutek_menu ul .sub-menu {
    width: 170px;
}

/* 992-1349px: six menu items ("Insourcing Services" especially) don't fit the nav column
   at this margin/font-size even with the vendor's own responsive.css reductions — the
   items wrap to a second row (measured at every width from 992 up to 1300px). Tighten
   further here instead of adding more breakpoints. */
@media (min-width: 992px) and (max-width: 1349px) {
    .solutek_nav_manu.style-three .solutek_menu > ul > li > a {
        margin: 23px 8px;
        font-size: 13px;
    }
}

/* Logo is a fixed height:34px in the markup (nav.blade.php), so its width scales with
   whatever aspect ratio the uploaded logo has — at 992-1199px the col-lg-2 logo column
   is only ~138px usable, narrower than the logo renders at 34px tall, so it was
   overflowing into the menu column and overlapping "Home". */
@media (min-width: 992px) and (max-width: 1199px) {
    .logo_img img,
    .main_sticky img {
        height: 22px !important;
    }
}

.solutek_nav_manu.style-three {
    background-color: #fff;
}

.solutek_nav_manu.style-three.sticky {
    background: #fff !important;
}

.solutek_nav_manu.style-three.sticky .solutek_menu > ul > li > a,
.solutek_nav_manu.style-three.sticky .solutek_menu li a {
    color: #232323 !important;
}

.solutek_nav_manu.style-three.sticky .solutek_menu > ul > li > a:hover {
    color: var(--color-primary) !important;
}

/* Vendor bug, not ours: responsive.css sets these links back to white specifically at
   992-1199px, making them invisible on the white nav bar until you scroll (confirmed
   present on the original template's own live demo at this width too). */
.solutek_nav_manu.style-three .solutek_menu > ul > li > a {
    color: #232323 !important;
}

/* Animated underline on hover/active — a plain color swap read as flat, this gives
   the nav a bit of polish without touching layout (absolute, doesn't affect flow). */
.solutek_nav_manu.style-three .solutek_menu > ul > li {
    position: relative;
}

.solutek_nav_manu.style-three .solutek_menu > ul > li > a {
    position: relative;
}

.solutek_nav_manu.style-three .solutek_menu > ul > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -6px;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
    transition: right .25s ease;
}

.solutek_nav_manu.style-three .solutek_menu > ul > li:hover > a::after {
    right: 0;
}

/* Dropdown polish — softer shadow and rounded corners instead of the vendor's hard
   1px shadow + solid color bars top/bottom, plus a slight rise-in on open instead
   of an instant opacity snap. */
.solutek_nav_manu.style-three .solutek_menu ul .sub-menu {
    border-radius: var(--es-radius);
    overflow: hidden;
    border-top: none;
    border-bottom: none;
    box-shadow: 0 18px 40px -12px rgba(var(--color-primary-deep-rgb), .28);
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

.solutek_nav_manu.style-three .solutek_menu ul li:hover > .sub-menu {
    transform: translateY(0);
}

.solutek_nav_manu.style-three .solutek_menu ul .sub-menu li a {
    font-size: 15px;
}

/* §  MOBILE MENU */

.mean-container .mean-bar::before {
    content: none;
}

.mean-bar-logo {
    height: 32px;
    width: auto;
    position: absolute;
    left: 14px;
    top: 14px;
}

.mean-container .mean-bar {
    background: #fff;
    box-shadow: 0 2px 5px -2px rgba(0, 0, 0, .1);
}

.mean-container a.meanmenu-reveal,
.mean-container a.meanmenu-reveal:hover,
.meanmenu-reveal.meanclose:hover {
    color: var(--color-primary-deep) !important;
}

.mean-container a.meanmenu-reveal span {
    background: var(--color-primary-deep) !important;
}

.mean-container .mean-nav {
    background: #fff;
}

.mean-container .mean-nav ul li {
    background: #fff;
    border-top: 1px solid var(--es-border);
}

.mean-container .mean-nav ul li a,
.mean-container .mean-nav ul li li a {
    background: #fff;
    color: #232323;
}

.mean-container .mean-nav ul li a:hover {
    background: #fff;
    color: var(--color-primary);
}

.mean-container .mean-nav ul li a.mean-expand {
    background: none;
    color: #232323;
}

.mean-container .mean-nav ul li a.mean-expand:hover {
    background: none;
    color: var(--color-primary);
}

/* Registration + Partner With Us as a 50/50 button row inside the mobile dropdown
   (the whole desktop nav, incl. its own Partner With Us button, is display:none
   under 992px by vendor design — this is where mobile users can reach both).
   Added as a real <li> in the same list meanmenu converts, so the plugin doesn't
   need to know about it; heavy overrides here beat the vendor's own
   .mean-nav ul li a full-width block styling. */
.mean-container .mean-nav ul li.mobile-menu-cta-row {
    box-sizing: border-box;
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    border-top: none;
    overflow: hidden;
}

.mean-container .mean-nav ul li.mobile-menu-cta-row a.mobile-menu-cta-btn {
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 1 1 0 !important;
    /* Flex items default to min-width:auto, which floors shrinking at the
       text's own intrinsic width — "PARTNER WITH US" (uppercase, letter-spaced)
       is wide enough that this stopped the row from ever fitting inside its
       container on narrow phones and pushed a small horizontal overflow. */
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 10px 6px !important;
    border: none !important;
    border-radius: var(--es-radius-btn);
    background: var(--color-primary);
    color: #fff !important;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .01em;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color .2s;
}

.mean-container .mean-nav ul li.mobile-menu-cta-row a.mobile-menu-cta-btn--alt {
    background: var(--color-primary-deep);
}

.mean-container .mean-nav ul li.mobile-menu-cta-row a.mobile-menu-cta-btn:hover {
    background: #232323;
}


/* §  CONTENT ALIGNMENT — top bar text/icons, nav logo/button, and hero heading all
   start and end at the same x position. Mirrors the padding tiers style.css/
   responsive.css already use for .solutek_nav_manu.style-three, so they stay in sync
   at every breakpoint. Vendor only splits left/right at the largest tier (140/90px);
   every smaller tier already uses the same value on both sides. */

:root {
    --es-content-x: 140px;
    --es-content-x-end: 90px;
}

@media (min-width: 1400px) and (max-width: 1600px) {
    :root { --es-content-x: 40px; --es-content-x-end: 40px; }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    :root { --es-content-x: 30px; --es-content-x-end: 30px; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    :root { --es-content-x: 10px; --es-content-x-end: 10px; }
}

@media (max-width: 991px) {
    :root { --es-content-x: 12px; --es-content-x-end: 12px; }
}

.top-header-area {
    padding-left: var(--es-content-x);
    padding-right: var(--es-content-x-end);
}

/* Vendor's own responsive.css flips this to text-align:left across 992-1399px
   (three separate breakpoint blocks), pulling the REGISTRATION button away from
   the column's right edge and out of alignment with the topbar's social icons. */
.solutek_nav_manu.style-three .header-menu-btn {
    text-align: right;
}


/* §  TOP BAR (includes/web/nav.blade.php) — phone / email are now real tel:/mailto:
   links (they rendered as plain inert text before), kept visible at every width
   instead of the vendor hiding the whole bar under 768px — collapsed to icon-only
   tap targets there instead, since a bare phone/envelope glyph is enough of an
   affordance and there's no room for the full number + address text. Social icons
   stay visible everywhere too now, restyled from solid white squares to a plain
   white-outline treatment, plus the brand pulse mark at the end of the row. */

.top-header-area {
    display: block;
    position: relative;
    overflow: hidden;
    padding-top: 8px;
    padding-bottom: 8px;
}

.top-header-area .row {
    position: relative;
    z-index: 1;
}

/* (Rule that hid the topbar's address below 1599px removed along with the
   address <li> itself in nav.blade.php — email is now the last item and
   should stay visible at every width.) */

.header-info ul li a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.header-info ul li:first-child {
    margin-right: 40px;
    position: relative;
}

/* Vertical divider between phone and email */
.header-info ul li:first-child::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, .3);
}

@media (max-width: 767px) {
    .header-info-text {
        display: none;
    }

    .header-info ul li {
        margin-right: 12px;
    }

    .header-info ul li:first-child {
        margin-right: 12px;
    }

    .header-info ul li:first-child::after {
        right: -6px;
    }

    .header-info ul li i {
        margin-right: 0;
        font-size: 16px;
    }
}

.top-header-area .row {
    justify-content: space-between;
}

/* Keep the topbar to one line at every width — Bootstrap's col-lg-8/col-lg-4
   have no rule below 992px, so they were falling back to plain flex items
   (100% width each), wrapping onto two lines on tablet/mobile. Info column
   shrinks and truncates first; the social/CTA column keeps its natural width. */
@media (max-width: 991px) {
    .top-header-area .row {
        flex-wrap: nowrap;
    }

    .top-header-area .col-lg-8 {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        min-width: 0;
        overflow: hidden;
    }

    .top-header-area .col-lg-4 {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    .header-info ul {
        display: flex;
        white-space: nowrap;
    }
}

.top-header-social-icon {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

@media (max-width: 767px) {
    .top-header-social-icon {
        gap: 8px;
    }

    .top-header-social-icon ul li i {
        width: 22px;
        height: 22px;
        line-height: 22px;
        font-size: 11px;
        margin-left: 8px;
    }
}

.top-header-social-icon ul {
    display: flex;
    align-items: center;
}

.top-header-social-icon ul li i {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, .55);
    color: #fff;
    border-radius: 4px;
}

.top-header-social-icon ul li i:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--color-primary-deep);
}

/* Sits between the pulse mark and the social icon list */
.top-header-divider {
    display: inline-block;
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, .3);
}

.top-header-pulse {
    height: 34px;
    width: auto;
}

/* Stays visible at every width (previously hidden under 768px) — shrunk instead,
   so it still reads as a mark without crowding the compacted topbar. */
@media (max-width: 767px) {
    .top-header-pulse {
        height: 18px;
    }
}


/* §  HERO (includes/web/hero.blade.php) — ground-up rebuild, not a re-skin of the
   vendor's "style-three" hero. White, with the same soft blue glow / gradient
   language as the CTA banner (see below) so the two read as one design system
   instead of two unrelated templates stitched together. */

:root {
    --es-header-h: 151px;
}

.es-hero {
    position: relative;
    overflow: hidden;
    background: #fff;
    padding: 64px 0;
    min-height: calc(100vh - var(--es-header-h));
    display: flex;
    align-items: center;
}

.es-hero-glow {
    position: absolute;
    top: -120px;
    right: -160px;
    width: 560px;
    height: 560px;
    background: radial-gradient(circle, rgba(var(--color-primary-rgb), .12) 0%, rgba(var(--color-primary-rgb), 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.es-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), .08);
    padding: .5rem 1rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
}

.es-hero-content h1 {
    font-size: 3.2rem;
    line-height: 1.15;
    color: var(--color-primary-deep);
    margin-bottom: 1.25rem;
}

.es-hero-content h1 span {
    color: var(--color-primary);
}

.es-hero-content p {
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--es-text-muted);
    max-width: 540px;
    margin-bottom: 2rem;
}

.es-hero-actions .es-btn {
    padding: 1.1rem 2.4rem;
    font-size: 1rem;
}

.es-hero-media {
    position: relative;
    max-width: 480px;
    margin: 48px auto 0;
}

.es-hero-media img {
    position: relative;
    z-index: 1;
    width: 100%;
    border-radius: var(--es-radius-lg);
    box-shadow: 0 30px 60px -20px rgba(var(--color-primary-deep-rgb), .35);
}

.es-hero-media-shape {
    position: absolute;
    inset: 24px -24px -24px 24px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
    border-radius: var(--es-radius-lg);
}

@media (min-width: 992px) {
    .es-hero-media {
        margin-top: 0;
    }
}

@media (max-width: 767px) {
    .es-hero {
        padding: 40px 0;
        min-height: 0;
    }

    .es-hero-content h1 {
        font-size: 2.1rem;
    }

    .es-hero-content p {
        font-size: 1rem;
    }
}


/* §  FOOTER (includes/web/footer.blade.php) — vendor shipped footer-area with a
   50px side / 35px bottom margin (a "floating card" look) and footer-bg.png was a
   literal placeholder image ("1821x587" dummy graphic), never replaced with real
   art — swapped it for the actual background from the live template demo. Full
   width edge-to-edge, flush with the bottom of the page, with room above it so it
   doesn't butt straight into whatever section comes before it. The widget content
   itself stays in a normal centered .container, same as the vendor's own footer.

   Vendor's own .row.footer padding (118px/101px) plus our gap above stacked up to
   a footer far taller than the template's (841px vs. the live demo's 583px at
   1440px) — trimmed both so it's closer to that original proportion. */
/* footer-bg.png was the vendor demo's own generic "world map + circuit board"
   decorative image — unrelated to this brand, so solid navy replaced it.
   An admin-uploaded background (Footer Content → Footer Background) is set
   inline via style="background-image" on this element when one is chosen;
   these properties make that cover the panel instead of tiling/stretching. */
.footer-area {
    margin: 0;
    background-color: var(--color-navy);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.row.footer {
    padding: 25px 0 25px;
}

/* Redesigned grid: dropped the "Services" links column — the brand column's logo
   was also dropped since the CQC/address-area banner right above it already shows
   the logo, so the two were repeating each other back to back. */
.footer-widget-text a {
    color: inherit;
}

.footer-widget-text a:hover {
    color: #fff;
}

/* Vendor spacing (38px/68px padding, 40px line-height list rows, 31px title
   margin) was tuned for a much taller footer — tightened throughout so the
   widget columns read as one compact block instead of floating text. */
p.footer-widget-text {
    padding: 0 0 20px;
}

.widget-title h2 {
    margin-top: 6px;
    margin-bottom: 10px;
}

.footer-widget.left ul li a {
    line-height: 32px;
}

p.newsletter-text {
    padding: 0 0 16px;
}

.row.copyright {
    padding: 20px 0 0;
}

/* Body text defaults to --es-text-dark (#293b5f) — identical to this section's
   own --color-navy background, so the copyright line was rendering invisible
   (same color as what's behind it) until given an explicit light color here. */
.-copyright-text p {
    color: rgba(255, 255, 255, .6);
}

/* §  CTA BANNER (address-area, includes/web/footer.blade.php) — the vendor's
   "Elevating Customer Experience" banner sits directly above the footer, sharing
   its side margin and rounded top corners so the two read as one connected block.
   Squared off / full-bleed to match our edge-to-edge footer. Carries the gap that
   used to be .footer-area's own padding-top, since this banner is now what sits
   above it. Recolored white with the real logo standing in for the vendor's generic
   headset icon — the phone icon keeps the vendor's rotating dashed-ring badge, just
   recolored (was a white icon + white dashes, meant for the vendor's orange fill,
   both invisible on white). */
.address-area {
    position: relative;
    overflow: hidden;
    background: var(--es-bg-soft);
    margin: 48px 0 0;
    border-radius: 40px 40px 0 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* Contact page (web/contact.blade.php) — the google map right above this
   already provides its own visual separation, so the usual 48px gap just
   left an oversized empty band between the two. */
.address-area--flush {
    margin-top: 0;
}

.address-area::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -90px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(120, 130, 145, .14) 0%, rgba(120, 130, 145, 0) 72%);
    border-radius: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.address-area .address-title h3 {
    color: var(--color-primary-deep);
}

.address-area .address-logo {
    margin-right: 32px;
}

.address-area .address-logo img {
    height: 48px;
    width: auto;
}

.address-area .address-box2 .address-icon {
    background: var(--color-primary);
    background-clip: content-box;
    padding: 7px;
    border-radius: 50%;
    line-height: 56px;
}

.address-area .address-icon::before {
    border-color: rgba(var(--color-primary-rgb), .3);
}

.address-area .solutek-btn a:hover {
    color: var(--color-primary);
}

@media (max-width: 767px) {
    .address-area {
        margin-top: 32px;
    }

    .address-area .address-box {
        margin-bottom: 24px;
    }
}

/* Extra horizontal breathing room on phones — .container's own gutter alone
   left the logo looking like it was touching the screen edges. */
@media (max-width: 479.98px) {
    .address-area .address-box {
        padding: 0 12px;
    }
}

/* Certificate/accreditation badge slider (owl carousel) — sits beside the
   logo in the address-area banner. Admin-managed (Certificates). Each badge
   is its own raised white card (not a bare floating logo) so the strip reads
   as a deliberate "verified by" row rather than a loose row of images. */
.certificate-slider {
    margin-top: 20px;
}

@media (min-width: 992px) {
    .certificate-slider {
        margin-top: 0;
    }
}

.certificate-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 118px;
    background: #fff;
    border: 1px solid rgba(var(--color-primary-deep-rgb), .08);
    border-radius: var(--es-radius);
    box-shadow: 0 6px 16px -8px rgba(var(--color-primary-deep-rgb), .18);
    padding: 14px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.certificate-slide:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--color-primary-rgb), .3);
    box-shadow: 0 16px 28px -12px rgba(var(--color-primary-deep-rgb), .28);
}

.certificate-slide a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.certificate-slide img {
    max-height: 78px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(.25);
    transition: filter .25s;
}

.certificate-slide:hover img {
    filter: grayscale(0);
}

.certificate-slider .owl-stage-outer {
    padding: 6px 2px 14px;
}

/* Media gallery (web/media/index.blade.php) — same "SOLUTEK PROJECT" carousel
   section/classes as the vendor template's about page, minus its missing
   project-bg.png (never shipped with this rebuild) — solid brand navy
   instead. project-thumb becomes a real 16:9 video embed instead of a
   static project screenshot. */
.project-area {
    background-image: none;
    background-color: var(--color-navy);
    margin-top: 48px;
    margin-bottom: 48px;
    border-radius: var(--es-radius-lg);
    overflow: hidden;
}

.project-thumb-embed {
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
}

.project-thumb-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.project_list.owl-carousel .project-single-box {
    border-radius: 20px;
    overflow: hidden;
}

/* Media gallery cards no longer link to a details page — h3.project-title
   used to only get its color from the vendor's h3.project-title A rule; a
   bare h3 (no anchor) falls through to body's default dark text, invisible
   on .project-content's own navy background (same bug class as elsewhere). */
.project-title {
    display: block;
    font-size: 22px;
    color: #fefefe;
    font-weight: 600;
    font-family: var(--es-font-heading);
    margin: 0 0 23px;
}

/* Equal-height carousel cards (media gallery + case studies), wherever the
   title lands — clamped to 2 lines (with an ellipsis) so title length can't
   push one card taller than its neighbors, and the whole card/content area
   stretches to match the tallest one in view via owl's own item wrapper. */
h3.project-title,
h3.project-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project_list.owl-carousel .owl-stage {
    display: flex;
    align-items: stretch;
}

.project_list.owl-carousel .owl-item {
    display: flex;
    height: auto;
}

.project_list.owl-carousel .owl-item > div {
    display: flex;
    width: 100%;
}

.project_list.owl-carousel .project-single-box {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.project-thumb {
    flex-shrink: 0;
}

.project-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Case studies carousel (web/case-studies/index.blade.php) — company logos
   aren't 16:9 photos like the media embeds, so contain/center them on a
   light backdrop instead of stretching to fill width like a project screenshot. */
.project-thumb-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    background: var(--es-bg-soft);
    padding: 2rem;
}

.project-thumb-logo img {
    width: auto !important;
    max-width: 100%;
    max-height: 100px;
    object-fit: contain;
}

/* Case study detail (web/case-studies/show.blade.php) — original design, not
   a reused vendor template page. Logo panel contained on a light backdrop
   (a wide company logo, not a photo, would look distorted stretched full-width
   like the vendor's own .project-details-thumb expects), plain white section
   background instead of the vendor's grey .project-details-area, and sidebar
   cards matching the site's own card language instead of .widget-category's
   plain link list. */
.es-cs-detail-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    background: var(--es-bg-soft);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-lg);
    margin-bottom: 1.5rem;
}

.es-cs-detail-logo img {
    width: auto;
    max-width: 60%;
    max-height: 100px;
    object-fit: contain;
}

.es-cs-detail-eyebrow {
    display: block;
    margin-bottom: .5rem;
    color: var(--color-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .9rem;
}

.es-cs-detail-title {
    margin: 0 0 1.25rem;
    color: var(--color-primary-deep);
    font-size: 2rem;
    font-weight: 700;
}

.es-cs-sidebar-card {
    background: var(--es-bg-soft);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-lg);
    padding: 1.5rem;
}

.es-cs-sidebar-title {
    margin: 0 0 1rem;
    color: var(--color-primary-deep);
    font-size: 1.1rem;
    font-weight: 700;
}

.es-cs-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.es-cs-sidebar-list li + li {
    border-top: 1px solid var(--es-border);
}

.es-cs-sidebar-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 0;
    color: inherit;
    text-decoration: none;
}

.es-cs-sidebar-list a:hover .es-cs-sidebar-list-title {
    color: var(--color-primary);
}

.es-cs-sidebar-list-company {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-primary);
}

.es-cs-sidebar-list-title {
    display: block;
    margin-top: .15rem;
    font-weight: 600;
    color: var(--color-primary-deep);
    transition: color .2s;
}

.es-cs-sidebar-list a i {
    flex-shrink: 0;
    font-size: 1.3rem;
    color: var(--color-primary);
}

/* "Call Us Anytime" sidebar widget (web/services/show.blade.php,
   web/case-studies/show.blade.php) — the vendor's own background image
   (images/inner/sidber-contact.png) was never part of this rebuild's asset
   set, so the box had no background at all; every line of text in it is
   explicitly white, rendering invisible on the page's own white background.
   Solid brand gradient instead. */
.widget-sidber-contact-box {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
}

/* The envelope icon defaults to var(--color-primary) — the exact color this
   box's own gradient background now starts at, so it nearly disappeared
   against it. White instead, to match the rest of the box's white text.
   Vendor's own selector is "span.widget-sidber-contact-gmail i" (tag+class+
   tag) — a plain ".widget-sidber-contact-gmail i" here is LESS specific and
   loses regardless of load order, so this has to match it exactly. */
span.widget-sidber-contact-gmail i {
    color: #fff;
}

/* Same root issue on the "Contact Us" button — background/border/hover-text
   were all var(--color-primary), the exact color the box gradient starts
   at, so the button had almost no visible edge against it, and its :hover
   state (transparent bg + primary-colored text) would have gone fully
   invisible. Inverted to a solid white button instead. */
.widget-sidber-contact-btn a {
    background: #fff;
    border-color: #fff;
    color: var(--color-primary-deep);
}

.widget-sidber-contact-btn a:hover {
    background: transparent;
    border-color: #fff;
    color: #fff;
}

/* Case studies list (web/case-studies/index.blade.php) — original design,
   not a reused vendor section: a clean white card with a contained logo
   panel on top (company logos are wide/landscape, not photos, so they're
   centered on a light backdrop rather than stretched to fill the card),
   consistent with the site's own established card language (contact-info-card,
   certificate-slide). */
.es-cs-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-lg);
    overflow: hidden;
    box-shadow: 0 6px 16px -8px rgba(var(--color-primary-deep-rgb), .12);
    color: inherit;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}

.es-cs-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 32px -14px rgba(var(--color-primary-deep-rgb), .22);
    color: inherit;
}

.es-cs-card-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    background: var(--es-bg-soft);
    padding: 2rem;
    flex-shrink: 0;
}

.es-cs-card-logo img {
    width: auto;
    max-width: 70%;
    max-height: 90px;
    object-fit: contain;
}

.es-cs-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.75rem;
}

.es-cs-card-eyebrow {
    display: block;
    margin-bottom: .5rem;
    color: var(--color-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .8rem;
}

.es-cs-card-title {
    margin: 0 0 .75rem;
    color: var(--color-primary-deep);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
}

.es-cs-card-desc {
    flex: 1;
    margin: 0 0 1.25rem;
    color: var(--es-text-muted);
    line-height: 1.6;
}

.es-cs-card-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--color-primary);
    font-weight: 700;
}

.es-cs-card-link i {
    font-size: 1.2rem;
    transition: transform .25s ease;
}

.es-cs-card:hover .es-cs-card-link i {
    transform: translateX(4px);
}

/* "Related" section on blog/news detail pages (includes/web/related-posts.blade.php)
   — same .blog-area.style-grid card grid as the index pages, with a top
   divider so it reads as a separate section from the article above it. */
.related-posts {
    border-top: 1px solid var(--es-border);
    padding-top: 3rem;
}

/* Blog Grid cards (web/blog/index.blade.php, web/news/index.blade.php) — a
   long title clamps to 3 lines (with an ellipsis); a short one still
   reserves that same 3-line height via min-height, so the only variable left
   is bounded to at most ~1 line's worth of slack. That bound is what makes
   whole-card equal-height safe now (an earlier attempt at this, before the
   min-height existed, left large dead gaps under short titles). */
.blog-area.style-grid .meta-blog {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.blog-area.style-grid .single-blog-box {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-area.style-grid .blog-box-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-area.style-grid .blog-box-content h3 a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Reserves space for 3 lines (34px line-height) even when a title only
       wraps to 1 or 2 — keeps the Read More button aligned across a row
       without the earlier full-height-stretch approach's dead white space. */
    min-height: 102px;
    /* Vendor's own 34px bottom padding, on top of that reserved 3-line
       height, was adding a second helping of space below the title. */
    padding-bottom: 0;
}

.blog-area.style-grid .blog-button {
    margin-top: auto;
}

/* Pagination (web/blog, web/news, web/case-studies index pages) — plain
   Laravel/Bootstrap default (generic blue, square corners) never got a brand
   pass; restyled as rounded pill buttons matching the site's own primary blue. */
.pagination {
    justify-content: center;
    gap: .4rem;
    margin-top: 1rem;
}

.pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 .75rem;
    border-radius: 50px !important;
    border: 1px solid var(--es-border);
    color: var(--color-primary-deep);
    font-weight: 600;
}

.pagination .page-link:hover {
    background: rgba(var(--color-primary-rgb), .08);
    border-color: rgba(var(--color-primary-rgb), .3);
    color: var(--color-primary-deep);
}

.pagination .page-item.active .page-link {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    color: var(--es-text-muted);
    background: transparent;
    border-color: var(--es-border);
}

/* "Registered With" footer column — text sits above the badge image (not
   side by side), reusing .newsletter-text's exact font/size/color for
   visual consistency with the Newsletter column's own intro line. */
.footer-cqc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-cqc-logo {
    height: 56px;
    width: auto;
    flex-shrink: 0;
    border-radius: 8px;
    background: #fff;
    padding: 4px;
}

/* The vendor's white text color only ever targeted ul li a — fine for the
   "Company" links column, but "Get in Touch"'s address lines are plain text
   inside the <li> (no anchor), so they fell through to body's default
   --es-text-dark, identical to this section's own navy background. */
.footer-widget.left ul li {
    color: rgba(255, 255, 255, .6);
    line-height: 1.6;
    padding: 6px 0;
}

.footer-widget.left ul li strong {
    color: #fff;
}

/* Vendor's link hovers turned var(--color-primary) blue — flattened to white
   so every hoverable text element in the footer reacts the same way. */
.footer-widget.left ul li a:hover {
    color: #fff;
}

.footer-widget.left ul li a:hover::before {
    background: #fff;
}

/* "Get in Touch" list — each line gets a small round icon badge (mail/phone/pin),
   matching the circular treatment already used for social + legal-page icons
   elsewhere in this footer, instead of a bare glyph floating next to the text. */
.footer-contact-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.footer-contact-list li:has(.d-block) {
    align-items: flex-start;
}

.footer-contact-list li i {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: 15px;
    color: #fff;
    transition: .3s;
}

.footer-contact-list li:hover i {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.footer-contact-list li a {
    line-height: 1.5;
}

.footer-contact-list li span {
    line-height: 1.6;
}

/* Social icons now sit under the Newsletter form instead of their own column.
   Vendor style was a bare grey glyph with 30px right-margin spacing — restyled
   as the same circular badge used by the contact-list and legal-page icons,
   so every icon in this footer reads as one consistent design. */
.footer-widget-newsletter .footer-social {
    margin-top: 18px;
}

.footer-widget-social {
    display: flex;
    gap: 10px;
}

.footer-widget-social a i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: 15px;
    color: #fff;
    transition: .3s;
}

.footer-widget-social a i:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Newsletter input defaulted to background:var(--color-navy) — identical to
   .footer-area's own background, so the field had no visible edge — plus a
   #777 placeholder that's near-illegible on the same dark navy. Lightened
   both so the field reads as a field and the placeholder stays readable. */
.form-field2 input {
    background-color: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
}

.form-field2 input::placeholder {
    color: rgba(255, 255, 255, .5);
}

/* Success/error alert after subscribing — Bootstrap's default .alert padding
   (1rem all round) and body-size text were sized for a full-width page
   banner, way oversized for this small newsletter field underneath it. */
.Subscribe-form2 [data-form-alert] .alert {
    margin: 10px 0 0;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.4;
    border-radius: 8px;
}

/* Inline per-field validation message (web.js showFieldErrors) — was
   unstyled, rendering as plain black block text with no visual distinction
   from the label/input around it. */
.footer-widget-newsletter .es-field-error {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #ffb4b4;
}

/* Legal page icon links (footer copyright row) */
.footer-legal-links {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.footer-legal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    font-size: 16px;
    transition: .3s;
}

.footer-legal-icon:hover {
    background: #fff;
    border-color: #fff;
    color: var(--color-primary-deep);
}

@media (max-width: 767px) {
    .footer-legal-links {
        justify-content: flex-start;
        margin-top: 12px;
    }
}


/* §  PAGE HEADER (includes/web/page-header.blade.php) — used by every inner page
   (contact, blog/news/media/case-studies index + detail). Replaces two old patterns:
   the vendor's .breadcumb-area, which desaturated its own background image into a
   flat blue block via background-blend-mode:color, and our own flat-gradient
   .es-page-header with no image and no real breadcrumb trail. This one shows a
   background image (assets/web/images/inner/page-header-bg.jpg — its own file,
   separate from the footer's, so it can be swapped without touching the footer)
   at full color, under a plain translucent overlay for text contrast — not a
   color-blend — plus an actual Home / Page breadcrumb link.

   page-header-bg.jpg is 1152x768 (3:2) — narrower than this banner's own shape (a
   measured 281px-tall, full-width strip), so background-size:cover scales it up
   ~1.25-1.7x and only ever shows a ~170-330px-tall horizontal slice of it. Plain
   "center" landed on bare gown fabric — no mask, no hands, unrecognizable.
   Positioned instead to keep the gloved hands (the actual subject of the photo,
   lower-third of the frame) in that slice. */
.es-page-header {
    position: relative;
    overflow: hidden;
    padding: 8rem 0 3.5rem;
    background-image: linear-gradient(rgba(var(--color-primary-deep-rgb), .55), rgba(var(--color-primary-deep-rgb), .55)),
        url(../images/inner/page-header-bg.jpg);
    background-size: cover;
    background-position: center 78%;
    color: #fff;
}

.es-page-header-glow {
    position: absolute;
    top: -140px;
    right: -110px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* Redesigned as a pill-style trail (subtle glass background, icons) instead
   of plain inline text — also now supports more than 2 levels (Home / Blog /
   {post title}), each page able to override the whole $breadcrumbs trail or
   just its own last-crumb label (SeoPage.breadcrumb_label, admin-editable). */
.es-breadcrumb {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    padding: .45rem .9rem;
    width: fit-content;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    backdrop-filter: blur(6px);
}

.es-breadcrumb a,
.es-breadcrumb-current {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.es-breadcrumb a {
    color: rgba(255, 255, 255, .75);
    transition: color .2s;
}

.es-breadcrumb a i {
    font-size: 1rem;
}

.es-breadcrumb a:hover {
    color: #fff;
}

.es-breadcrumb-sep {
    display: inline-flex;
    color: rgba(255, 255, 255, .4);
    font-size: .95rem;
}

.es-breadcrumb-current {
    color: #fff;
    font-weight: 700;
}

@media (max-width: 767px) {
    .es-page-header {
        padding: 6.5rem 0 2.5rem;
    }
}


/* §  BUTTONS — base + modifiers, reused across nav / hero / cards / forms */

.es-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    max-width: 100%;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.2;
    padding: .9rem 1.9rem;
    border-radius: var(--es-radius-btn);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}

.es-btn-loading {
    opacity: .65;
    pointer-events: none;
}

.es-btn svg {
    flex-shrink: 0;
}

/* Color modifiers */
.es-btn-primary {
    background: var(--es-primary);
    color: #fff !important;
}

.es-btn-primary:hover {
    background: var(--es-primary-deep);
    transform: translateY(-2px);
    color: #fff;
}

/* Size modifier */
.es-btn-sm {
    padding: .6rem 1.4rem;
    font-size: .85rem;
}


/* §  UTILITIES */

.es-section {
    padding: 3rem 10px;
}

/* Contact page — "other ways to reach us" cards (web/contact.blade.php),
   below the hero + form. Simple raised cards, consistent with the
   certificate-slide / es-legal-body treatment elsewhere on the site. */
.contact-info-card {
    height: 100%;
    text-align: center;
    background: #fff;
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius);
    box-shadow: 0 6px 16px -8px rgba(var(--color-primary-deep-rgb), .12);
    padding: 2rem 1.5rem;
    transition: transform .25s ease, box-shadow .25s ease;
}

.contact-info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 28px -12px rgba(var(--color-primary-deep-rgb), .2);
}

.contact-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
    background: rgba(var(--color-primary-rgb), .1);
    color: var(--color-primary);
    border-radius: 50%;
    font-size: 1.5rem;
}

.contact-info-card h3 {
    margin-bottom: .5rem;
    color: var(--color-primary-deep);
}

.contact-info-card p {
    margin: 0;
    color: var(--es-text-muted);
    line-height: 1.6;
}

.contact-info-card a {
    color: inherit;
}

/* Force LTR rendering for embedded Latin/numeric content inside RTL text (phone numbers, emails) */
.es-ltr {
    direction: ltr;
    unicode-bidi: embed;
}


/* §  WHATSAPP */

.es-whatsapp-float {
    position: fixed;
    bottom: 24px;
    inset-inline-end: 24px;
    z-index: 150;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--es-whatsapp);
    color: #fff;
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(var(--es-whatsapp-rgb), .4);
    transition: transform .2s;
}

.es-whatsapp-float:hover {
    transform: scale(1.08);
}

.es-scroll-top {
    position: fixed;
    bottom: 24px;
    inset-inline-start: 24px;
    z-index: 150;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    border: 3px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), .4);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s, visibility .25s, transform .2s, background .2s;
}

.es-scroll-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.es-scroll-top:hover {
    background: var(--color-primary-deep);
    transform: translateY(-3px);
}


/* §  PRELOADER (includes/web/preloader.blade.php) — vendor's version was a full-black
   overlay with two curtain panels sliding open around a plain spinner. Replaced with a
   light overlay centered on the actual logo (nav-init.js still just toggles .loaded on
   body — this only needed new CSS/markup to react to it). */
.es-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    transition: opacity .5s ease, visibility .5s ease;
}

.es-preloader-logo {
    height: 52px;
    width: auto;
    animation: es-preloader-pulse 1.4s ease-in-out infinite;
}

.es-preloader-bar {
    width: 140px;
    height: 4px;
    border-radius: 2px;
    background: rgba(var(--color-primary-rgb), .15);
    overflow: hidden;
}

.es-preloader-bar span {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: 2px;
    background: var(--color-primary);
    animation: es-preloader-slide 1.2s ease-in-out infinite;
}

@keyframes es-preloader-pulse {
    0%, 100% { opacity: .5; transform: scale(.94); }
    50% { opacity: 1; transform: scale(1); }
}

@keyframes es-preloader-slide {
    0% { transform: translateX(-140%); }
    100% { transform: translateX(350%); }
}

.loaded .es-preloader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* §  SERVICES (web/services/index.blade.php, web/services/show.blade.php) — reuses
   the vendor's inner-page .sservice-area / .services-details-area / .widget-sidber
   classes as-is, minus the per-card .service-icon circle (dropped from the markup
   entirely, not just hidden, since it's just a generic decorative glyph, not the
   real specialty icon set the design assumes). */
.es-other-services-section {
    padding: 20px 0 110px;
    background: #f4f4f4;
}

.es-other-service-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 16px rgba(var(--color-primary-deep-rgb), .06);
    color: var(--es-text-dark);
    font-weight: 600;
}

.es-other-service-card i {
    color: var(--color-primary);
    font-size: 1.3rem;
    flex-shrink: 0;
}


/* §  CONTENT LISTING — News / Blog / Media / Case Studies index + detail pages
   (.es-page-header itself is defined under PAGE HEADER above) */

.es-page-header-title {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
}

.es-page-header-desc {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, .8);
    margin-top: .5rem;
    max-width: 640px;
}

@media (max-width: 767px) {
    .es-page-header-title {
        font-size: 1.9rem;
    }
}

.es-content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.75rem;
}

.es-content-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius);
    overflow: hidden;
    background: #fff;
    transition: box-shadow .2s, transform .2s;
}

.es-content-card:hover {
    box-shadow: 0 12px 32px rgba(var(--es-primary-deep-rgb), .12);
    transform: translateY(-3px);
}

.es-content-card-thumb {
    aspect-ratio: 16 / 9;
    background: var(--es-bg-soft) center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--es-accent);
    font-size: 2.5rem;
}

.es-content-card-body {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.es-content-card-meta {
    color: var(--es-text-muted);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .5rem;
}

.es-content-card-title {
    font-size: 1.15rem;
    margin-bottom: .5rem;
}

.es-content-card-title a {
    color: var(--es-text-dark);
}

.es-content-card-title a:hover {
    color: var(--es-primary);
}

.es-content-card-desc {
    color: var(--es-text-muted);
    font-size: .9rem;
    line-height: 1.6;
    margin-bottom: 0;
}

.es-content-card-logo {
    height: 44px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    margin-bottom: 1rem;
}

.es-content-empty {
    text-align: center;
    color: var(--es-text-muted);
    padding: 3rem 1rem;
}

.es-content-detail-thumb {
    width: 100%;
    border-radius: var(--es-radius-lg);
    margin-bottom: 2rem;
}

.es-content-detail-body {
    color: var(--es-text-dark);
    line-height: 1.8;
}

.es-content-detail-body h2,
.es-content-detail-body h3 {
    margin-top: 1.75rem;
    margin-bottom: .75rem;
}

/* h4/h5 (used by nested sections — e.g. the Privacy Policy's "Definitions"
   under "Interpretation and Definitions") had no spacing at all, previously
   just plain unstyled bold text running straight into the paragraph above. */
.es-content-detail-body h4 {
    margin-top: 1.5rem;
    margin-bottom: .6rem;
    font-size: 1.15rem;
}

.es-content-detail-body h5 {
    margin-top: 1.25rem;
    margin-bottom: .5rem;
    font-size: 1rem;
}

.es-content-detail-body p {
    margin-bottom: 1rem;
}

/* Links inside real content (e.g. the Privacy Policy's Google/Mailchimp/mailto
   links) inherited the site's global a{color:inherit;text-decoration:none} —
   invisible as links, indistinguishable from surrounding paragraph text. */
.es-content-detail-body a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: rgba(var(--color-primary-rgb), .35);
}

.es-content-detail-body a:hover {
    text-decoration-color: currentColor;
}

.es-content-detail-body ul {
    margin: 0 0 1.25rem;
    padding-left: 1.4rem;
}

/* Each bullet had no breathing room from the one before it — browser default
   list spacing is 0, so a 12-definition list (as in the Privacy Policy) read
   as one dense, hard-to-scan block. */
.es-content-detail-body li {
    margin-bottom: .65rem;
    padding-left: .25rem;
}

.es-content-detail-body li:last-child {
    margin-bottom: 0;
}

.es-content-detail-body li > ul {
    margin-top: .65rem;
    margin-bottom: 0;
}

/* Ordered lists, blockquotes, tables, inline images, emphasis and dividers —
   none of these had any rules at all before (only ul/li were covered), so
   rich content on case study / blog / news detail pages using any of them
   fell back to bare browser defaults: numbers touching the left edge, an
   unstyled quote indistinguishable from a paragraph, a table with no
   borders/spacing/header contrast, and no overflow guard on a wide one. */
.es-content-detail-body ol {
    margin: 0 0 1.25rem;
    padding-left: 1.4rem;
}

.es-content-detail-body ol li {
    margin-bottom: .65rem;
    padding-left: .25rem;
}

.es-content-detail-body strong,
.es-content-detail-body b {
    color: var(--color-primary-deep);
    font-weight: 700;
}

.es-content-detail-body blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    border-left: 4px solid var(--color-primary);
    background: var(--es-bg-soft);
    border-radius: 0 var(--es-radius) var(--es-radius) 0;
    font-style: italic;
    color: var(--color-primary-deep);
}

.es-content-detail-body blockquote p:last-child {
    margin-bottom: 0;
}

.es-content-detail-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--es-radius);
    margin: 1rem 0;
}

.es-content-detail-body hr {
    margin: 2rem 0;
    border: none;
    border-top: 1px solid var(--es-border);
}

.es-content-detail-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    margin: 0 0 1.5rem;
    border-collapse: collapse;
}

.es-content-detail-body th,
.es-content-detail-body td {
    padding: .75rem 1rem;
    border: 1px solid var(--es-border);
    text-align: left;
    line-height: 1.5;
}

.es-content-detail-body th {
    background: var(--es-bg-soft);
    color: var(--color-primary-deep);
    font-weight: 700;
    white-space: nowrap;
}

.es-content-detail-body tbody tr:nth-child(even) {
    background: rgba(var(--color-primary-deep-rgb), .02);
}

/* §  LEGAL PAGE (web/legal/show.blade.php) — scoped separately from the
   shared .es-content-detail-body (also used by news/blog/case-studies) so
   this heavier "document" treatment doesn't spill onto those pages. Renders
   the real Privacy Policy etc. as a defined card instead of plain text
   floating on the white section background, without reintroducing the fixed
   max-width the container itself was deliberately freed from. */
.es-legal-body {
    background: var(--es-bg-soft);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-lg);
    padding: 2.5rem;
}

@media (max-width: 767px) {
    .es-legal-body {
        padding: 1.5rem;
    }
}

/* The first paragraph is always the "Company / Policy of URL / Last updated"
   meta block (bold, three <br>-separated lines) — call it out as its own
   panel instead of leaving it as a plain bold paragraph identical in weight
   to <strong> used for defined terms further down the page. */
.es-legal-body > p:first-child {
    background: #fff;
    border-left: 4px solid var(--color-primary);
    border-radius: 0 var(--es-radius) var(--es-radius) 0;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

/* Each h3 is a major section (13 of them in the Privacy Policy) — a top
   divider + accent color turns "one long scroll" into clearly separated
   chapters instead of headings that look the same weight as h4/h5. */
.es-legal-body h3 {
    color: var(--color-primary-deep);
    padding-top: 1.5rem;
    border-top: 1px solid var(--es-border);
}

.es-legal-body h3:first-of-type {
    padding-top: 0;
    border-top: none;
}

.es-legal-body h4 {
    color: var(--color-primary);
}

.es-legal-body li::marker {
    color: var(--color-primary);
}

.es-content-embed {
    position: relative;
    padding-top: 56.25%;
    border-radius: var(--es-radius-lg);
    overflow: hidden;
    margin-bottom: 2rem;
}

.es-content-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* §  RESPONSIVE */

@media (max-width: 479.98px) {
    .es-btn {
        padding: .7rem 1.3rem;
        font-size: .88rem;
    }
}

/* Footer at tablet width (≤991px — col-lg-4 stops applying below the lg
   breakpoint, so Get in Touch + Company become col-md-6 and pair up on one
   row, e.g. iPad portrait at 768px): Newsletter is the column that ends up
   alone on the row below them — center it instead of it sitting left-aligned
   under two flanking columns that no longer exist at this width. */
@media (max-width: 991px) {
    /* Newsletter's own text/form/icons were already centered, but the column
       itself (col-md-6, half-width) still sat at the left of its now-empty
       row — center the whole flex line so the block itself sits in the
       middle, not just the text inside it. */
    .row.footer {
        justify-content: center;
    }

    .footer-widget-newsletter {
        text-align: center;
    }

    .footer-widget-newsletter .Subscribe-form2,
    .footer-widget-newsletter .form-field2 {
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
    }

    .footer-widget-newsletter .footer-widget-social {
        justify-content: center;
    }
}

/* Footer at phone width: every widget column stacks full-width already (no
   xs-specific col-* was set). Everything stays left-aligned as normal — only
   the Newsletter/Subscribe column centers, since its form and social icons
   look stranded at the left edge on their own when alone on a narrow row.
   The CQC badge still stacks image-above-text (needed to fit either way at
   this width), just left-aligned instead of centered. Copyright row is the
   other exception: text + legal-page icon buttons both center, buttons above
   the copyright line rather than below it. */
@media (max-width: 479.98px) {
    /* Same edge-breathing-room treatment as .address-area above — the
       widget columns' own content (list items, form, CQC badge) otherwise
       sits flush against .container's default gutter with nothing extra. */
    .row.footer > [class*="col-"] {
        padding-left: 30px;
        padding-right: 30px;
    }

    .footer-widget-newsletter {
        text-align: center;
    }

    .footer-widget-newsletter .footer-widget-social {
        justify-content: center;
    }

    .row.copyright {
        flex-direction: column-reverse;
        align-items: center;
        text-align: center;
        gap: 12px;
    }

    .footer-legal-links {
        justify-content: center;
    }
}