/* Client-specific styles for Magixs Child Theme */

/* Add custom styles for each client below */
/* Example: 
.client-1 .site-header {
    background-color: #1a3c5e;
}
.client-2 .site-footer {
    color: #cc3366;
}
*/

ul li{
    list-style: none;
}

/* ...but keep normal list markers inside editorial content (Text Editor
   widget, Prismo Rich Text / Post Content / Blog Single bodies). The reset
   above is for menus and widget lists. Prismo's own bullet-list widget
   (.prismo-bullet-list) draws custom icons, so it is excluded. */
.elementor-widget-text-editor ul:not(.prismo-bullet-list) > li,
.prismo-rich-text ul:not(.prismo-bullet-list) > li,
.prismo-post-content ul:not(.prismo-bullet-list) > li,
.prismo-blogpost-body ul:not(.prismo-bullet-list) > li {
    list-style: disc;
}

.elementor-widget-text-editor ol > li,
.prismo-rich-text ol > li,
.prismo-post-content ol > li,
.prismo-blogpost-body ol > li {
    list-style: decimal;
}

/* Buttons with the "btn-arrow" CSS class: arrow nudges forward on hover */
.btn-arrow .elementor-button-icon,
.btn-arrow .elementor-button .elementor-button-icon {
    display: flex !important;
    transition: transform 0.3s ease !important;
}

.btn-arrow:hover .elementor-button-icon,
.btn-arrow:hover .elementor-button .elementor-button-icon,
.btn-arrow .elementor-button:hover .elementor-button-icon {
    transform: translateX( 8px ) !important;
}

/* Buttons with the "btn-phone" CSS class: phone icon nudges left on hover */
.btn-phone .elementor-button-icon,
.btn-phone .elementor-button .elementor-button-icon {
    display: flex !important;
    transition: transform 0.3s ease !important;
}

.btn-phone:hover .elementor-button-icon,
.btn-phone:hover .elementor-button .elementor-button-icon,
.btn-phone .elementor-button:hover .elementor-button-icon {
    transform: translateX( -8px ) !important;
}

/* Go-to-top button */
.prismo-go-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #3C88C4;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba( 0, 0, 0, 0.2 );
    opacity: 0;
    visibility: hidden;
    transform: translateY( 12px );
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.prismo-go-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY( 0 );
}

.prismo-go-top:hover,
.prismo-go-top:focus,
.prismo-go-top:active {
    background-color: #59AD31;
    color: #ffffff;
}

.prismo-go-top svg {
    display: block;
}

@media ( max-width: 600px ) {
    .prismo-go-top {
        right: 16px;
        bottom: 16px;
        width: 42px;
        height: 42px;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Home V2 header only — animated underline on the main menu.
   Scoped by the "prismo-line-menu" CSS class on the ElementsKit Nav Menu
   widget inside the "Header 2" template (post 751), which is displayed only
   on the Home V2 page. On hover the line draws in from the first letter to
   the last (left → right), and on mouse-out it wipes out to the right.
   ────────────────────────────────────────────────────────────────────────── */
.prismo-line-menu .elementskit-navbar-nav > li > a.ekit-menu-nav-link {
    position: relative;
}

.prismo-line-menu .elementskit-navbar-nav > li > a.ekit-menu-nav-link::after {
    content: "";
    position: absolute;
    left: 15px;   /* align with the link's horizontal padding */
    right: 15px;
    top: 50%;
    margin-top: 12px;  /* sit just under the text */
    height: 2px;
    background-color: #59AD31;  /* theme secondary / green */
    transform: scaleX( 0 );
    transform-origin: right center;
    transition: transform 0.5s ease-in-out;
    pointer-events: none;
}

.prismo-line-menu .elementskit-navbar-nav > li > a.ekit-menu-nav-link:hover::after,
.prismo-line-menu .elementskit-navbar-nav > li > a.ekit-menu-nav-link:focus::after,
.prismo-line-menu .elementskit-navbar-nav > li:hover > a.ekit-menu-nav-link::after {
    transform: scaleX( 1 );
    transform-origin: left center;
}

/* Desktop nav only — hide the underline in the mobile/off-canvas menu. */
@media ( max-width: 1024px ) {
    .prismo-line-menu .elementskit-navbar-nav > li > a.ekit-menu-nav-link::after {
        display: none;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   "Read More" reveal (planty-style) for an Elementor Button widget.
   At rest only the arrow icon shows; hovering the surrounding service card
   (class "prismo-service-card") — or the button itself — slides the
   "Read More" text in from the left and nudges the arrow to the right.

   Setup in Elementor:
     1. On the service-card container add CSS class:  prismo-service-card
     2. Add a Button widget inside it:
          - Text: Read More
          - Icon: an arrow (e.g. Font Awesome "arrow-right"),  Position: After
          - Link: the service page
          - Advanced → CSS Classes:  prismo-more-reveal
   ────────────────────────────────────────────────────────────────────────── */
.prismo-more-reveal .elementor-button {
    overflow: hidden;
}

.prismo-more-reveal .elementor-button-content-wrapper {
    display: inline-flex;
    flex-direction: row;      /* text, then icon */
    align-items: center;
}

.prismo-more-reveal .elementor-button-text {
    max-width: 0;
    opacity: 0;
    margin-right: 0;
    white-space: nowrap;
    overflow: hidden;
    transition: max-width 0.45s ease, opacity 0.4s ease, margin-right 0.4s ease;
}

.prismo-more-reveal .elementor-button-icon {
    flex: 0 0 auto;
    margin: 0;                /* kill Elementor's default icon gap while collapsed */
    transition: transform 0.3s ease;
}

.prismo-service-card:hover .prismo-more-reveal .elementor-button-text,
.prismo-more-reveal .elementor-button:hover .elementor-button-text,
.prismo-more-reveal .elementor-button:focus .elementor-button-text {
    max-width: 240px;
    opacity: 1;
    margin-right: 8px;
}

/* Home V2 — inline text links in the FAQ description and the "Get in touch"
   blurb: default blue, green on hover. */
.elementor-element-04e4895 a,
.elementor-element-57d497d a {
    color: #3C88C4;
    transition: color 0.2s ease;
}

.elementor-element-04e4895 a:hover,
.elementor-element-04e4895 a:focus,
.elementor-element-57d497d a:hover,
.elementor-element-57d497d a:focus {
    color: #59AD31;
}

/* Contact form (Forminator #1054) — shorter Message box, no character counter */
.forminator-custom-form-1054 .forminator-textarea {
    --forminator-textarea-min-height: 90px;
    min-height: 90px !important;
}

.forminator-custom-form-1054 .forminator-field-textarea .forminator-description {
    display: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   Marquix logo/text marquee — horizontal layout fallback.
   The Marquix plugin loads its own marquee.css too late for the Elementor
   editor (and on AJAX widget re-render), so the marquee stacks its logos
   vertically while editing. These layout-only rules keep it horizontal even
   without the plugin CSS; the plugin still supplies the scroll animation.
   (Early loading of the plugin stylesheet is handled in functions.php.)
   ────────────────────────────────────────────────────────────────────────── */
.marquixfe-marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
}

.marquixfe-logo-marquee .marquixfe-marquee-group {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-shrink: 0;
}

.marquixfe-logo-marquee .marquixfe-logo-item {
    flex: 0 0 auto;
}

.marquixfe-logo-marquee .marquixfe-logo-item img {
    width: 120px;
    height: auto;
    max-width: none;
    display: block;
}

.marquixfe-text-marquee .marquixfe-marquee-item {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────────────────
   Site header (HFE "Header", post 1370) — sticky + animated underline on the
   main menu items.
   ────────────────────────────────────────────────────────────────────────── */

/* 1. Sticky */
.ehf-header #masthead {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 999;
    background: #ffffff;           /* fallback so it never sits transparent over content */
}

/* 2. Left-to-right line effect on hover of each top-level menu item */
.elementor-1370 .elementor-element-cd988a8 .elementskit-navbar-nav > li > a.ekit-menu-nav-link {
    position: relative;
}

.elementor-1370 .elementor-element-cd988a8 .elementskit-navbar-nav > li > a.ekit-menu-nav-link::after {
    content: "";
    position: absolute;
    left: 15px;                     /* matches the link's horizontal padding */
    right: 15px;
    top: 50%;
    margin-top: 14px;              /* sit just below the vertically-centred label */
    height: 2px;
    background-color: #47A3EC;     /* live-site primary blue */
    transform: scaleX( 0 );
    transform-origin: right center;
    transition: transform 0.35s ease;
    pointer-events: none;
}

.elementor-1370 .elementor-element-cd988a8 .elementskit-navbar-nav > li > a.ekit-menu-nav-link:hover::after,
.elementor-1370 .elementor-element-cd988a8 .elementskit-navbar-nav > li > a.ekit-menu-nav-link:focus::after,
.elementor-1370 .elementor-element-cd988a8 .elementskit-navbar-nav > li:hover > a.ekit-menu-nav-link::after {
    transform: scaleX( 1 );
    transform-origin: left center;
}

/* not in the mobile off-canvas menu */
@media ( max-width: 1024px ) {
    .elementor-1370 .elementor-element-cd988a8 .elementskit-navbar-nav > li > a.ekit-menu-nav-link::after {
        display: none;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   About Us — "Talk With Our Expert" contact form (Forminator form 1876).
   Forminator loads its own generated stylesheet AFTER this file and with a
   higher-specificity selector, so these overrides are marked !important and
   use Forminator's own selector prefix.
   ────────────────────────────────────────────────────────────────────────── */

/* Submit button — full-width blue pill, white 16px/400 text, no border. */
.forminator-ui#forminator-module-1876.forminator-design--default .forminator-button-submit {
    display: block !important;
    width: 100% !important;
    padding: 0.55rem 0.75rem !important;
    border: 0 !important;
    border-radius: 50rem !important;
    background: #47A3EC !important;
    background-color: #47A3EC !important;
    color: #ffffff !important;
    font-family: "Open Sans", -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
}

.forminator-ui#forminator-module-1876.forminator-design--default .forminator-button-submit:hover,
.forminator-ui#forminator-module-1876.forminator-design--default .forminator-button-submit:focus,
.forminator-ui#forminator-module-1876.forminator-design--default .forminator-button-submit:active {
    background: #47A3EC !important;
    background-color: #47A3EC !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Inputs + textarea — 1px solid #ced4da border, .675rem .75rem padding. */
.forminator-ui#forminator-module-1876.forminator-design--default .forminator-input,
.forminator-ui#forminator-module-1876.forminator-design--default .forminator-textarea,
.forminator-ui#forminator-module-1876.forminator-design--default input.forminator-input--phone,
.forminator-ui#forminator-module-1876.forminator-design--default textarea {
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    padding: 0.675rem 0.75rem !important;
    box-shadow: none !important;
}

.forminator-ui#forminator-module-1876.forminator-design--default .forminator-input:focus,
.forminator-ui#forminator-module-1876.forminator-design--default .forminator-textarea:focus,
.forminator-ui#forminator-module-1876.forminator-design--default textarea:focus {
    border-color: #47A3EC !important;
    box-shadow: none !important;
    outline: none !important;
}

/* keep the wrapper row full-width so the button can stretch edge to edge */
.forminator-ui#forminator-module-1876 .forminator-row:last-child,
.forminator-ui#forminator-module-1876 .forminator-col.forminator-col-12:last-child {
    width: 100%;
}

/* ──────────────────────────────────────────────────────────────────────────
   Sustainability page (post 1503) — CSS-only tweaks to match the live
   prismo.ae/about-us/sustainability/ page. No Elementor structure touched.
   ────────────────────────────────────────────────────────────────────────── */

/* (Banner title/divider are now set in Elementor via the shared "prismo-hero"
   banner settings — see the inner-page hero block below.) */

/* "% Under review, anticipated completion shortly." headings in the three
   capital cards — live gives them a soft drop shadow
   (.key-highlights-contant .member-img h2 { text-shadow: 0 3px 10px #0000004D }). */
.elementor-1503 .elementor-element-f27c8e5 .elementor-heading-title,
.elementor-1503 .elementor-element-cdf465b .elementor-heading-title,
.elementor-1503 .elementor-element-d544c78 .elementor-heading-title {
    text-shadow: 0px 3px 10px #0000004D;
}

/* ──────────────────────────────────────────────────────────────────────────
   Social Value page (post 1602) — vertical tab section (ElementsKit Simple
   Tab #38b3a35). Live swaps three icon images per tab (black default / green
   hover / white active); the ElementsKit widget only holds one image, so the
   tab icons are the black "default" PNGs and CSS filters do the other states.
   ────────────────────────────────────────────────────────────────────────── */
.elementor-1602 .elementor-element-38b3a35 .elementkit-nav-link .elementskit-tab-icon img {
    filter: none;                       /* black default (matches live) */
    transition: filter 0.25s ease;
}
.elementor-1602 .elementor-element-38b3a35 .elementkit-nav-link:hover .elementskit-tab-icon img {
    /* ≈ Prismo green #59AD31 */
    filter: brightness(0) saturate(100%) invert(56%) sepia(58%) saturate(431%) hue-rotate(46deg) brightness(94%) contrast(87%);
}
.elementor-1602 .elementor-element-38b3a35 .elementkit-nav-link.active .elementskit-tab-icon img,
.elementor-1602 .elementor-element-38b3a35 .elementkit-nav-link.active:hover .elementskit-tab-icon img {
    filter: brightness(0) invert(1);    /* white on the green active pill */
}

/* active tab label — ElementsKit hard-codes #000; live is white */
.elementor-1602 .elementor-element-38b3a35 .elementkit-nav-link.active,
.elementor-1602 .elementor-element-38b3a35 .elementkit-nav-link.active .elementskit-tab-title {
    color: #ffffff !important;
}

/* tab look to match live (.social-tab-section .nav-pills .nav-link). Padding
   (32px 22px), 20px Open Sans and #878787 are set in the widget's Style tab. */
.elementor-1602 .elementor-element-38b3a35 .elementkit-tab-nav .elementkit-nav-link:not(.active) {
    background-color: #ffffff;
}
/* live tab column is a fixed 400px (col-lg-4 minus me-3); the widget's %
   "Vertical Nav Width" shrinks with the panel, so pin it here. */
@media (min-width: 1025px) {
    .elementor-1602 .elementor-element-38b3a35 .elementkit-tab-wraper.vertical .elementkit-tab-nav {
        flex: 0 0 400px;
        max-width: 400px;
    }
}
/* live: only the first tab has mb-3 (16px); tabs 2 and 3 sit border-to-border */
.elementor-1602 .elementor-element-38b3a35 .elementkit-tab-nav .elementkit-nav-item:nth-child(2) {
    margin-top: 16px;
}
.elementor-1602 .elementor-element-38b3a35 .elementkit-nav-link .elementskit-tab-title {
    flex: 1;
    text-align: left;
}
.elementor-1602 .elementor-element-38b3a35 .elementkit-nav-link .elementskit-tab-icon img {
    width: 60px;
    height: auto;
}
.elementor-1602 .elementor-element-38b3a35 .elementkit-nav-link:not(.active) .elementskit-tab-title {
    color: #878787;
}
.elementor-1602 .elementor-element-38b3a35 .elementkit-nav-link {
    text-align: left;
}
/* tab panel text like live (16px/24px justified); ElementsKit's Tab widget has
   no typography control for the panel body. */
.elementor-1602 .elementor-element-38b3a35 .elementkit-tab-content,
.elementor-1602 .elementor-element-38b3a35 .elementkit-tab-content p {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 24px;
    text-align: justify;
}

/* ──────────────────────────────────────────────────────────────────────────
   Services landing page (post 1285) — the service-card grid section.
   Live wraps it in .services-sections { background: #EDF1FA87 }. Scoped to the
   section container that holds the Prismo Post Grid widget. */
.elementor-1285 .elementor-element-1717356 {
    background-color: rgba( 237, 241, 250, 0.53 );
}

/* ──────────────────────────────────────────────────────────────────────────
   Services landing page (post 1285) — "Paints For Road Marking" image
   collage in the right column (#60d5fb2), reproducing live's
   .manufactured-products-image-set(-small) + .et_more layout: a large
   right-aligned photo, a smaller photo overlapping its bottom-left corner,
   and a green "8 / More..." badge poking out past the small photo.
   ────────────────────────────────────────────────────────────────────────── */
.elementor-1285 .elementor-element-mpwrap01 {
    position: relative;
    width: 100%;
    min-height: 580px;
}

/* big "airfield" photo — right-aligned */
.elementor-1285 .elementor-element-mpbig01 {
    position: relative;
    width: 520px;
    max-width: 100%;
    margin-left: auto;
    margin-right: 0;
    z-index: 1;
}
.elementor-1285 .elementor-element-mpbigimg img {
    border: solid 10px #8BC1FF;
    width: 100%;
    display: block;
}
.elementor-1285 .elementor-element-mpbigtxt {
    position: absolute;
    right: 40px;
    bottom: 52px;
    width: 230px;
    max-width: calc( 100% - 60px );
    z-index: 2;
}
.elementor-1285 .elementor-element-mpbigtxt .elementor-heading-title {
    border-bottom: 4px solid #47A3EC;
    padding-bottom: 15px;
}

/* small "thermoplastic road" photo — overlaps the big one's bottom-left */
.elementor-1285 .elementor-element-mpsmall01 {
    position: absolute;
    left: -40px;
    top: 205px;
    width: 430px;
    max-width: 90%;
    z-index: 2;
}
.elementor-1285 .elementor-element-mpsmallimg img {
    border: solid 10px #ffffff;
    width: 100%;
    display: block;
}
.elementor-1285 .elementor-element-mpsmalltxt {
    position: absolute;
    left: 32px;
    bottom: 52px;
    width: 200px;
    z-index: 3;
}
.elementor-1285 .elementor-element-mpsmalltxt .elementor-heading-title {
    border-bottom: 4px solid #47A3EC;
    padding-bottom: 15px;
}

/* green "8 / More..." badge */
.elementor-1285 .elementor-element-mpbadge {
    position: absolute;
    right: -118px;
    top: 177px;
    width: auto;
    min-width: 110px;
    z-index: 4;
}
/* (1285, products worker) badge sits just right of the small photo like live
   (.et_more right:-118px) — the old 992-1599px clamp made it overlap the photo. */
.elementor-1285 .elementor-element-mpbadgemore .elementor-heading-title a {
    color: #ffffff;
    text-decoration: none;
}

@media ( max-width: 991px ) {
    .elementor-1285 .elementor-element-mpwrap01 {
        min-height: 0;
    }
    .elementor-1285 .elementor-element-mpbig01,
    .elementor-1285 .elementor-element-mpsmall01 {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        max-width: 100%;
        margin: 0 0 20px;
    }
    .elementor-1285 .elementor-element-mpbadge {
        position: relative;
        right: auto;
        top: auto;
        margin: -40px 20px 20px auto;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Contact Us page (post 1540) — match live's form card: grey labels, blue
   gradient pill submit button. Scoped to this page only since Forminator
   form 1054 is shared with the Home page variants, and to Forminator's own
   selector prefix + !important since its generated stylesheet loads after
   this file with higher specificity.
   ────────────────────────────────────────────────────────────────────────── */
.elementor-1540 .forminator-ui#forminator-module-1054.forminator-design--default .forminator-label {
    color: #A8A8A8 !important;
    font-family: "Open Sans", -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    margin-bottom: 10px !important;
}

.elementor-1540 .forminator-ui#forminator-module-1054.forminator-design--default .forminator-input,
.elementor-1540 .forminator-ui#forminator-module-1054.forminator-design--default .forminator-textarea {
    padding: 0.675rem 0.75rem !important;
}

.elementor-1540 .forminator-ui#forminator-module-1054.forminator-design--default .forminator-button-submit {
    background: linear-gradient( 180deg, #49A4EC, #0079D9 ) !important;
    padding: 12px 35px !important;
    font-family: "Open Sans", -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    border-radius: 50rem !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
}

.elementor-1540 .forminator-ui#forminator-module-1054.forminator-design--default .forminator-button-submit:hover,
.elementor-1540 .forminator-ui#forminator-module-1054.forminator-design--default .forminator-button-submit:focus,
.elementor-1540 .forminator-ui#forminator-module-1054.forminator-design--default .forminator-button-submit:active {
    background: linear-gradient( 180deg, #49A4EC, #0079D9 ) !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
}
/* ──────────────────────────────────────────────────────────────────────────
   Inner-page hero banners — add CSS class "prismo-hero" to the banner
   container (Advanced → CSS Classes). Reproduces live prismo.ae exactly:
   live's banner is a 500px-tall "cover" box anchored top-left that starts
   behind the 90px header, so visitors see a 410px strip of an image scaled
   to 500px height. Here the box sits below the header, so: 410px tall, image
   at least 500px high (500 × 3.212 = 1606px wide for the 2560×797 banners)
   and shifted up 90px. The image itself is still chosen in Elementor.
   ────────────────────────────────────────────────────────────────────────── */
.e-con.prismo-hero {
    --min-height: 410px;
    min-height: 410px;
    height: 410px;
    --padding-top: 0px;
    --padding-bottom: 0px;
    --justify-content: center; /* overridable per page via Elementor "Justify Content" */
    background-size: max(100%, var(--prismo-hero-img-w, 1606px)) auto !important;
    background-position: left 0 top -90px !important;
}
/* Banner image not 2560×797? Add a width class: live scales it to 500px high,
   so width = 500 × (image width ÷ height). Safety (1171×400) = 1464px. */
.e-con.prismo-hero-w1464 {
    --prismo-hero-img-w: 1464px;
}
/* Images narrower than 2.88:1 (square blog image, product photos): live just
   fits them to the full width, so no minimum width is needed. */
.e-con.prismo-hero-wfit {
    --prismo-hero-img-w: 0px;
}
/* ──────────────────────────────────────────────────────────────────────────
   Our Partners page (post 1583) — partner logos (#2dccad8 Jetting, #3405e8e
   SWARCO) are Elementor Video widgets (YouTube, image overlay = logo,
   lightbox on). Keep the logo at its natural size instead of Elementor's
   full-width 16:9 cover crop, and pin the small blue play icon to the card's
   top-right corner like live (.play-btn-video).
   ────────────────────────────────────────────────────────────────────────── */
.elementor-1583 .elementor-element-25faefd,
.elementor-1583 .elementor-element-9688cea {
    position: relative;
}
.elementor-1583 .elementor-element-2dccad8 .elementor-custom-embed-image-overlay,
.elementor-1583 .elementor-element-3405e8e .elementor-custom-embed-image-overlay {
    position: static;
}
.elementor-1583 .elementor-element-2dccad8,
.elementor-1583 .elementor-element-3405e8e,
.elementor-1583 .elementor-element-2dccad8 > .elementor-widget-container,
.elementor-1583 .elementor-element-3405e8e > .elementor-widget-container {
    width: auto;
    position: static;
    transform: none; /* Elementor's translateZ(0) would trap the play icon */
    overflow: visible;
}
/* Drop the Video widget's 16:9 box so the card keeps live's 150px height and
   the play icon anchors to the card corner, not the video box. */
.elementor-1583 .elementor-element-2dccad8 .elementor-wrapper,
.elementor-1583 .elementor-element-3405e8e .elementor-wrapper {
    aspect-ratio: auto;
    position: static;
    height: auto;
    background: transparent;
    overflow: visible;
}
.elementor-1583 .elementor-element-2dccad8 .elementor-custom-embed-image-overlay img,
.elementor-1583 .elementor-element-3405e8e .elementor-custom-embed-image-overlay img {
    width: 180px;
    max-width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    margin: 0 auto;
}
.elementor-1583 .elementor-element-2dccad8 .elementor-custom-embed-play,
.elementor-1583 .elementor-element-3405e8e .elementor-custom-embed-play {
    top: 12px;
    right: 12px;
    left: auto;
    transform: none;
}
/* Live's outline video-camera icon (assets/img/video.svg) instead of the
   YouTube glyph; the glyph stays in the DOM for the accessible label. */
.elementor-1583 .elementor-element-2dccad8 .elementor-custom-embed-play i,
.elementor-1583 .elementor-element-3405e8e .elementor-custom-embed-play i,
.elementor-1583 .elementor-element-2dccad8 .elementor-custom-embed-play svg,
.elementor-1583 .elementor-element-3405e8e .elementor-custom-embed-play svg {
    display: none;
}
.elementor-1583 .elementor-element-2dccad8 .elementor-custom-embed-play::after,
.elementor-1583 .elementor-element-3405e8e .elementor-custom-embed-play::after {
    content: "";
    display: block;
    width: 24px;
    height: 16px;
    background: url("assets/img/video.svg") no-repeat center / contain;
}

/* Service Single Template (post 1284) — content box follows live's Bootstrap
   .container widths (minus 24px gutters), so tab buttons get the same size and
   their background photos the same crop as live at every screen width. */
.elementor-1284 .elementor-element.elementor-element-972620b.e-con {
    --content-width: 1296px;
}
@media (max-width: 1399px) {
    .elementor-1284 .elementor-element.elementor-element-972620b.e-con { --content-width: 1116px; }
}
@media (max-width: 1199px) {
    .elementor-1284 .elementor-element.elementor-element-972620b.e-con { --content-width: 936px; }
}
@media (max-width: 991px) {
    .elementor-1284 .elementor-element.elementor-element-972620b.e-con { --content-width: 696px; }
}
@media (max-width: 767px) {
    .elementor-1284 .elementor-element.elementor-element-972620b.e-con { --content-width: 100%; }
}

/* Contact Us (post 1540) — pages worker: contact-info icon circles are exactly
   60px tall (no inline line-box gap) so each info row matches live's spacing. */
.elementor-1540 .elementor-element-9c6020c .elementor-icon-wrapper,
.elementor-1540 .elementor-element-8769db6 .elementor-icon-wrapper,
.elementor-1540 .elementor-element-dc35171 .elementor-icon-wrapper {
	line-height: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   GLOBAL (header post 1370, go-to-top) — 2026-10-13 audit fixes #7, #10.
   Live nav: link padding 0 3px (set in the ElementsKit widget), 2px #47A3EC
   underline 6px below the text spanning the full link, kept on the active item.
   ────────────────────────────────────────────────────────────────────────── */
.elementor-1370 .elementor-element-cd988a8 .elementskit-navbar-nav > li > a.ekit-menu-nav-link::after {
    left: 0;
    right: 0;
    margin-top: 16px;
}

.elementor-1370 .elementor-element-cd988a8 .elementskit-navbar-nav > li.current-menu-item > a.ekit-menu-nav-link::after,
.elementor-1370 .elementor-element-cd988a8 .elementskit-navbar-nav > li.current-menu-ancestor > a.ekit-menu-nav-link::after {
    transform: scaleX( 1 );
}

/* Go-to-top: live is 44px, #47A3EC, flat (no shadow), 15px from the corner */
.prismo-go-top {
    right: 15px;
    bottom: 15px;
    width: 44px;
    height: 44px;
    background-color: #47A3EC;
    box-shadow: none;
}

/* Meet Our Staff (post 1592) — pages worker: staff grid rebuilt like live
   prismo.ae (column-sorter.css): 5 columns, rounded photos at 40% opacity;
   clicking a photo (script in the page's HTML widget) adds .is-open, which
   enlarges it to 300px with a white ring and reveals name / designation /
   close button. Photo widths, names and designations are edited per person
   in Elementor (Image widget width, two Heading widgets). */
.prismo-staff > .prismo-staff-col {
	flex: 1 1 0;
	min-width: auto;
}
.prismo-staff-item {
	position: relative;
}
.prismo-staff-item .prismo-staff-photo img {
	display: block;
	max-width: none;
	margin: 0 0 10px;
	cursor: pointer;
	transition: width 1s ease-in-out;
}
.prismo-staff-item.is-open .prismo-staff-photo {
	align-self: stretch;
}
.prismo-staff-item.is-open .prismo-staff-photo img {
	width: 300px !important;
	opacity: 1 !important;
	border: 10px solid #fff;
	box-shadow: 0 1px 6px #bbb;
	border-radius: 150px !important;
	margin: 0 auto;
}
.prismo-staff-item .prismo-staff-name,
.prismo-staff-item .prismo-staff-role {
	align-self: stretch;
}
.prismo-staff-item:not(.is-open) .prismo-staff-name,
.prismo-staff-item:not(.is-open) .prismo-staff-role,
.prismo-staff-item:not(.is-open) .prismo-staff-close {
	display: none;
}
.prismo-staff-item .prismo-staff-close {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 71px;
	width: 100%;
	opacity: .5;
	cursor: pointer;
	line-height: 0;
}
/* In the Elementor editor keep every name/designation visible so they can be edited. */
body.elementor-editor-active .prismo-staff-item:not(.is-open) .prismo-staff-name,
body.elementor-editor-active .prismo-staff-item:not(.is-open) .prismo-staff-role {
	display: block;
}
@media (max-width: 1000px) {
	.prismo-staff { flex-wrap: wrap !important; }
	.prismo-staff > .prismo-staff-col { flex: 0 0 33.333%; }
}
@media (max-width: 550px) {
	.prismo-staff > .prismo-staff-col { flex: 0 0 100%; align-items: center; }
	.prismo-staff-item { align-items: center; }
}

/* ──────────────────────────────────────────────────────────────────────────
   GLOBAL forms — 2026-10-13 audit #17 (field part), #75 (field part), #80.
   Fonts/colours/label size are set in Forminator → Appearance (custom font
   stack "Open Sans", so no third-party font request). Sizes Forminator has no
   control for are set here, to match live's Bootstrap fields:
   48px inputs (16/24 + .675rem .75rem padding), 72px textarea, 36px button.
   ────────────────────────────────────────────────────────────────────────── */
/* Page form 1876 ("Talk With Our Expert" card on most pages) */
.forminator-ui#forminator-module-1876.forminator-design--default .forminator-input,
.forminator-ui#forminator-module-1876.forminator-design--default input.forminator-input--phone,
.forminator-ui#forminator-module-1876.forminator-design--default .forminator-textarea {
    font-family: "Open Sans", sans-serif !important;
    font-size: 16px !important;
    line-height: 24px !important;
    border-radius: 6px !important;
}

.forminator-ui#forminator-module-1876.forminator-design--default .forminator-textarea {
    height: 72px !important;
    min-height: 72px !important;
}

.forminator-ui#forminator-module-1876.forminator-design--default .forminator-button-submit {
    padding: 6px 12px !important;
    line-height: 24px !important;
}

/* Contact form 1054 — labels above fields, live contact-page look */
.forminator-ui#forminator-module-1054.forminator-design--default .forminator-label {
    margin-bottom: 10px !important;
    color: #A8A8A8 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
}

.forminator-ui#forminator-module-1054.forminator-design--default .forminator-label .forminator-required {
    color: inherit !important;
}

.forminator-ui#forminator-module-1054.forminator-design--default .forminator-input,
.forminator-ui#forminator-module-1054.forminator-design--default input.forminator-input--phone,
.forminator-ui#forminator-module-1054.forminator-design--default .forminator-textarea {
    padding: 0.675rem 0.75rem !important;
    border: 1px solid #ced4da !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    color: #212529 !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 16px !important;
    line-height: 24px !important;
}

.forminator-ui#forminator-module-1054.forminator-design--default .forminator-textarea {
    height: 72px !important;
    min-height: 72px !important;
}

.forminator-ui#forminator-module-1054.forminator-design--default .forminator-row-last .forminator-field {
    text-align: left;
}

.forminator-ui#forminator-module-1054.forminator-design--default .forminator-button-submit {
    display: inline-block !important;
    width: auto !important;
    padding: 12px 35px !important;
    border: 0 !important;
    border-radius: 32px !important;
    background: linear-gradient( 180deg, #49A4EC, #0079D9 ) !important;
    color: #ffffff !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    box-shadow: none !important;
}

.forminator-ui#forminator-module-1054.forminator-design--default .forminator-button-submit:hover,
.forminator-ui#forminator-module-1054.forminator-design--default .forminator-button-submit:focus {
    background: linear-gradient( 180deg, #3D97DF, #006CC2 ) !important;
}

/* GLOBAL forms (cont.) — live keeps 20px between fields at every form width
   (Forminator switches to 30px once the form is wider than 480px). */
.forminator-ui#forminator-module-1876.forminator-custom-form .forminator-row:not(:last-child),
.forminator-ui#forminator-module-1054.forminator-custom-form .forminator-row:not(:last-child) {
    margin-bottom: 20px !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   About group pages (543 About Us, 1523 Safety, 1602 Social Value,
   1634 Environmental Responsibility, 1503 Sustainability) — Elementor's icon
   widget wrapper keeps a text line box under the circle (+6px), which made the
   86px Speak-to-an-Expert icons and the 60px Environmental tiles taller than live.
   ────────────────────────────────────────────────────────────────────────── */
.elementor-543 .elementor-widget-icon .elementor-icon-wrapper,
.elementor-1523 .elementor-widget-icon .elementor-icon-wrapper,
.elementor-1602 .elementor-widget-icon .elementor-icon-wrapper,
.elementor-1634 .elementor-widget-icon .elementor-icon-wrapper,
.elementor-1503 .elementor-widget-icon .elementor-icon-wrapper {
    line-height: 0;
}