/* EBS Slideshow – Elementor widget styles */
.ebs-slideshow.pulse-hero-animation { display: block; }

.pulse-title .elementor-heading-title {
    font-family: "STC Font Family", "Segoe UI", sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em !important;
}
.pulse-intro-content .elementor-heading-title {
    font-family: "STC Font Family", "Segoe UI", sans-serif !important;
    font-weight: var(--ebs-intro-heading-weight, 400) !important;
    font-size: var(--ebs-intro-heading-size, 48px) !important;
}
.pulse-intro-content .elementor-widget-text-editor p {
    font-size: clamp(13px, 1.2vw, 16px) !important;
    line-height: 1.55 !important;
    opacity: 0.95;
}
.pulse-intro-content .elementor-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 24px !important;
    background: var(--ebs-btn-bg, #fc3c61) !important;
    color: var(--ebs-btn-color, #ffffff) !important;
    border-radius: 4px !important;
    font-family: var(--ebs-btn-font-family, "STC Font Family"), "Segoe UI", sans-serif !important;
    font-size: var(--ebs-btn-font-size, 14px) !important;
    font-weight: var(--ebs-btn-font-weight, 600) !important;
    text-transform: lowercase !important;
    border: none !important;
    text-decoration: none !important;
}
.pulse-intro-content .elementor-button:hover { filter: brightness(1.08); }

/* Settings-driven CSS variables */
.pulse-hero-animation {
    --pulse-people-height-mobile: var(--ebs-people-height-mobile, 42vh);
    --ebs-intro-bottom-mobile: var(--ebs-intro-bottom-mobile, 14vh);
    --ebs-intro-left: var(--ebs-intro-left, 7%);
    --ebs-title-color-a: #ff315d;
    --ebs-title-color-b: #4b008f;
}
.pulse-title .pulse-intelligence { color: var(--ebs-title-color-a) !important; }
.pulse-title .pulse-transform { color: var(--ebs-title-color-b) !important; }

.pulse-hero-animation {
    position: relative !important;
    background: #ffffff !important;
    width: 100% !important;

    min-height: 200vh !important;

    overflow-x: clip !important;
    overflow-y: hidden !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    /* Image canvas widths */
    --pulse-image-width: 520px;

    /* Actual diamond inside the image canvas */
    --pulse-diamond-ratio: 0.53759765625;
}


/* =========================================================
   TITLE
   ========================================================= */

.pulse-title {
    /* Completely pinned — never moves with scroll */
    position: fixed !important;

    left: 0 !important;
    right: 0 !important;
    top: 50% !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 20px !important;

    display: block !important;

    text-align: center !important;

    z-index: 1000 !important;

    pointer-events: none !important;

    overflow: visible !important;

    opacity: 1 !important;

    transform: translateY(-50%) !important;
}


.pulse-title .elementor-widget-container {
    overflow: visible !important;
}


.pulse-title .elementor-heading-title {
    position: relative !important;

    display: block !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1.08 !important;

    text-align: center !important;

    overflow: visible !important;

    z-index: 1000 !important;

    transform: none !important;

    opacity: 1 !important;
}


/* =========================================================
   TITLE COLORS
   ========================================================= */

.pulse-title .pulse-intelligence {
    color: var(--ebs-title-color-a, #ff315d) !important;
}


.pulse-title .pulse-transform {
    color: var(--ebs-title-color-b, #4b008f) !important;
}


/* =========================================================
   SOLID PINK DIAMOND
   ========================================================= */

.pulse-title .pulse-first-i {
    position: relative !important;

    display: inline-block !important;

    overflow: visible !important;

    z-index: 1002 !important;
}


.pulse-title .pulse-first-i::after {
    content: "" !important;

    position: absolute !important;

    width: 14px !important;
    height: 14px !important;

    left: 50% !important;
    top: 7px !important;

    background: var(--ebs-solid-diamond-color, #ff315d) !important;

    display: block !important;
    visibility: visible !important;

    transform:
        translate3d(
            calc(-50% + var(--ebs-solid-diamond-x, 0px)),
            calc(-50% + var(--ebs-solid-diamond-y, 0px)),
            0
        )
        rotate(45deg)
        scale(
            calc(
                1 +

                (
                    clamp(
                        0,
                        calc(
                            var(--pulse-progress, 0) / 0.38
                        ),
                        1
                    ) * 35
                )

                +

                (
                    clamp(
                        0,
                        calc(
                            (
                                var(--pulse-progress, 0) - 0.38
                            ) / 0.30
                        ),
                        1
                    ) * 20
                )
            )
        ) !important;

    transform-origin: center center !important;

    opacity:
        calc(
            1 -
            clamp(
                0,
                calc(
                    (
                        var(--pulse-progress, 0) - 0.12
                    ) / 0.08
                ),
                1
            )
        ) !important;

    z-index: 1003 !important;

    pointer-events: none !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* =========================================================
   ANIMATION STAGE
   ========================================================= */

.pulse-animation-stage {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    width: 100% !important;
    height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    pointer-events: none !important;

    z-index: 1100 !important;

    transform:
        translate3d(0, var(--pulse-stage-offset, 0px), 0) !important;
    will-change: transform;
    backface-visibility: hidden;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}



.pulse-animation-stage::before {
    content: "" !important;

    position: absolute !important;

    left:
        var(--pulse-diamond-x, 50%) !important;

    top:
        var(--pulse-diamond-y, 50%) !important;

    width:
        calc(
            var(--pulse-image-width) *
            var(--pulse-diamond-ratio) /
            1.41421356237
        ) !important;

    height:
        calc(
            var(--pulse-image-width) *
            var(--pulse-diamond-ratio) /
            1.41421356237
        ) !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;

    transform:
        translate(-50%, -50%)
        rotate(45deg)
        scale(
            calc(
                0.0708 *
                (
                    1 +

                    (
                        clamp(
                            0,
                            calc(
                                var(--pulse-progress, 0) / 0.38
                            ),
                            1
                        ) * 35
                    )

                    +

                    (
                        clamp(
                            0,
                            calc(
                                (
                                    var(--pulse-progress, 0) - 0.38
                                ) / 0.30
                            ),
                            1
                        ) * 20
                    )

                    +

                    (
                        clamp(
                            0,
                            calc(
                                (
                                    var(--pulse-progress, 0) - 0.80
                                ) / 0.16
                            ),
                            1
                        ) * 120
                    )
                )
            )
        ) !important;

    transform-origin: center center !important;

    opacity:
        clamp(
            0,
            calc(
                (
                    var(--pulse-progress, 0) - 0.34
                ) / 0.08
            ),
            1
        ) !important;

    z-index: 0 !important;

    pointer-events: none !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* =========================================================
   PINK DIAMOND
   ========================================================= */

.pulse-pink-diamond {
    position: absolute !important;

    left:
        var(--pulse-diamond-x, 50%) !important;

    top:
        var(--pulse-diamond-y, 50%) !important;

    width:
        var(--pulse-image-width) !important;

    height: auto !important;

    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity:
        calc(
            clamp(
                0,
                calc(
                    (
                        var(--pulse-progress, 0) - 0.10
                    ) / 0.08
                ),
                1
            )
            *
            (
                1 -
                clamp(
                    0,
                    calc(
                        (
                            var(--pulse-progress, 0) - 0.38
                        ) / 0.10
                    ),
                    1
                )
            )
        ) !important;

    transform:
        translate3d(-50%, -50%, 0)
        scale(
            calc(
                0.0708 *
                (
                    1 +

                    (
                        clamp(
                            0,
                            calc(
                                var(--pulse-progress, 0) / 0.38
                            ),
                            1
                        ) * 35
                    )

                    +

                    (
                        clamp(
                            0,
                            calc(
                                (
                                    var(--pulse-progress, 0) - 0.38
                                ) / 0.30
                            ),
                            1
                        ) * 20
                    )
                )
            )
        ) !important;

    transform-origin: center center !important;

    z-index: 1 !important;

    pointer-events: none !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    will-change: transform, opacity;
    backface-visibility: hidden;
}


/* =========================================================
   BLUE DIAMOND
   ========================================================= */

.pulse-blue-diamond {
    position: absolute !important;

    left:
        var(--pulse-blue-diamond-x, var(--pulse-diamond-x, 50%)) !important;

    top:
        var(--pulse-blue-diamond-y, var(--pulse-diamond-y, 50%)) !important;

    width:
        var(--pulse-image-width) !important;

    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    z-index: 2 !important;

    transform-origin: center center !important;

    transform:
        translate3d(-50%, -50%, 0)
        scale(
            calc(
                0.0708 *
                (
                    1 +

                    (
                        clamp(
                            0,
                            calc(
                                var(--pulse-progress, 0) / 0.18
                            ),
                            1
                        ) * 35
                    )

                    +

                    (
                        clamp(
                            0,
                            calc(
                                (
                                    var(--pulse-progress, 0) - 0.38
                                ) / 0.30
                            ),
                            1
                        ) * 20
                    )

                    +

                    (
                        clamp(
                            0,
                            calc(
                                (
                                    var(--pulse-progress, 0) - 0.55
                                ) / 0.45
                            ),
                            1
                        ) * 85
                    )
                )
            )
        ) !important;

    opacity:
        clamp(
            0,
            calc(
                (
                    var(--pulse-progress, 0) - 0.38
                ) / 0.10
            ),
            1
        ) !important;

    pointer-events: none !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    will-change: transform, opacity;
    backface-visibility: hidden;
}


/* =========================================================
   PEOPLE / OVERLAY
   ========================================================= */

.pulse-people {

    position: absolute !important;

    left: 50% !important;

    /* Anchor the people overlay to the bottom edge of the animation stage on every viewport. */
    top: 100vh !important;

    width: 100vw !important;

    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    visibility: visible !important;

    overflow: visible !important;

    z-index: 1200 !important;

    pointer-events: none !important;

    opacity:
        clamp(
            0,
            calc(
                (
                    var(--pulse-progress, 0) - 0.96
                ) / 0.04
            ),
            1
        ) !important;

    transform:
        translate(-50%, -100%) !important;

    transform-origin: center center !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    will-change: transform, opacity;
    backface-visibility: hidden;
}


.pulse-people .elementor-widget-container {

    width: 100% !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    border: none !important;
    outline: none !important;
}


.pulse-people img {

    display: block !important;
    
    top: 60vh !important;

    width: 100% !important;

    height: auto !important;

    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;

    visibility: visible !important;

    border: none !important;
    outline: none !important;

    box-shadow: none !important;
}


/* =========================================================
   INTRO CONTENT
   ========================================================= */

.pulse-intro-content {

    position: absolute !important;

    left: var(--ebs-intro-left, 7%) !important;
    right: auto !important;

    top: 60vh !important;

    width: min(520px, 38vw) !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    justify-content: center !important;

    text-align: left !important;

    z-index: 1300 !important;

    pointer-events: none !important;

    opacity:
        clamp(
            0,
            calc(
                (
                    var(--pulse-progress, 0) - 0.96
                ) / 0.04
            ),
            1
        ) !important;

    transform:
        translateY(
            calc(
                -50% +
                var(--pulse-stage-offset, 0px)
            )
        ) !important;

    transform-origin: center center !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* =========================================================
   INTRO HEADING
   ========================================================= */

.pulse-intro-content .elementor-widget-heading {

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    outline: none !important;

    box-shadow: none !important;
}


.pulse-intro-content .elementor-heading-title {

    margin: 0 0 18px 0 !important;

    padding: 0 !important;

    color: var(--ebs-intro-heading-color, #ffffff) !important;
    font-weight: var(--ebs-intro-heading-weight, 400) !important;
    font-size: var(--ebs-intro-heading-size, 48px) !important;

    text-align: left !important;

    line-height: 1.1 !important;

    border: none !important;
    outline: none !important;

    box-shadow: none !important;
}


/* =========================================================
   INTRO PARAGRAPH
   ========================================================= */

.pulse-intro-content .elementor-widget-text-editor {

    width: 80% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    text-align: left !important;

    border: none !important;
    outline: none !important;

    box-shadow: none !important;
}


.pulse-intro-content .elementor-widget-text-editor p {

    margin: 0 !important;

    color: #ffffff !important;

    text-align: left !important;
}


/* =========================================================
   INTRO BUTTON
   ========================================================= */

.pulse-intro-content .elementor-widget-button {

    margin-top: 28px !important;

    align-self: flex-start !important;

    border: none !important;
    outline: none !important;

    box-shadow: none !important;
}


.pulse-intro-content .elementor-button-wrapper {

    text-align: left !important;
}


.pulse-intro-content .elementor-button {

    pointer-events: auto !important;
}


/* =========================================================
   REMOVE ANY LINES / BORDERS
   ========================================================= */

.pulse-hero-animation *,
.pulse-hero-animation::before,
.pulse-hero-animation::after {

    outline: none !important;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1201px) {
    .pulse-title .elementor-heading-title {
        font-size: var(--ebs-opening-title-size-desktop, 72px) !important;
    }
}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (min-width: 1025px) and (max-width: 1200px) {
    .pulse-title .elementor-heading-title {
        font-size: var(--ebs-opening-title-size-tablet, 52px) !important;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    .pulse-hero-animation {
        --pulse-image-width: 55vw;
    }

    .pulse-title .elementor-heading-title {
        font-size: var(--ebs-opening-title-size-tablet, 52px) !important;
    }

    /* Move the diamond slightly upward on tablet */
    .pulse-title .pulse-first-i::after {
        top: 2px !important;
    }
    

}


/* =========================================================
   MOBILE: panoramic banner (match ~1024x402 / 2.55:1),
   desktop-like side-by-side, hide small paragraph
   ========================================================= */

/* Match the supplied working HTML animation layout */
@media (max-width: 1200px) {
    .pulse-people {
        left: 50% !important;
        top: 100vh !important;
        width: 100vw !important;
        height: auto !important;
        max-height: none !important;
        transform: translate(-50%, -100%) !important;
    }
}

@media (max-width: 767px) {
    .pulse-hero-animation {
        --pulse-image-width: 520px !important;
    }

    .pulse-title .elementor-heading-title {
        font-size: var(--ebs-opening-title-size-mobile, 42px) !important;
    }

    .pulse-title .pulse-first-i::after {
        width: 11px !important;
        height: 11px !important;
        top: 1px !important;
    }

    .pulse-intro-content > .elementor-widget-text-editor,
    .pulse-intro-content .elementor-widget-text-editor,
    .pulse-intro-content .elementor-widget-text-editor p {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .pulse-animation-stage {
        height: 100vh !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        transform: translateY(var(--pulse-stage-offset, 0px)) !important;
        transform-origin: center center !important;
        overflow: visible !important;
    }

    .pulse-people {
        left: 20% !important;
        top: 100vh !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: var(--ebs-people-height-mobile, 50vh) !important;
        max-height: var(--ebs-people-height-mobile, 50vh) !important;
        object-fit: cover !important;
        object-position: center bottom !important;
        transform: translate(-50%, -100%) !important;
    }

    .pulse-intro-content {
        left: 4% !important;
        right: auto !important;
        top: 45vh !important;
        width: auto !important;
        max-width: 92vw !important;
        max-height: none !important;
        align-items: flex-start !important;
        text-align: left !important;
        justify-content: center !important;
        transform: translateY(calc(-50% + var(--pulse-stage-offset, 0px))) !important;
        transform-origin: left center !important;
    }

    .pulse-intro-content .elementor-heading-title {
        font-size: clamp(18px, 4.5vw, 24px) !important;
        line-height: 1.1 !important;
        color: var(--ebs-intro-heading-color, #ffffff) !important;
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 0 10px 0 !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    .pulse-intro-content .pulse-intro-break {
        display: block !important;
    }

    .pulse-intro-content .elementor-heading-title br {
        display: none !important;
    }

    .pulse-intro-content .elementor-widget-button {
        margin-top: 8px !important;
    }

    .pulse-intro-content .elementor-button {
        display: inline-flex !important;
        padding: 8px 14px !important;
        font-size: var(--ebs-btn-font-size-tablet, 14px) !important;
        font-weight: var(--ebs-btn-font-weight, 600) !important;
        font-family: var(--ebs-btn-font-family, "STC Font Family"), "Segoe UI", sans-serif !important;
        background: var(--ebs-btn-bg, #fc3c61) !important;
    }
}

@media (max-width: 480px) {
    .pulse-intro-content .elementor-button { font-size: var(--ebs-btn-font-size-mobile, 11px) !important; }
    .pulse-title .elementor-heading-title {
        font-size: clamp(14px, calc(var(--ebs-opening-title-size-mobile, 42px) * 0.86), var(--ebs-opening-title-size-mobile, 42px)) !important;
    }

    .pulse-intro-content {
        max-width: 96vw !important;
    }

    .pulse-intro-content .elementor-heading-title {
        font-size: clamp(18px, 4.5vw, 24px) !important;
        width: 100% !important;
        max-width: 135px !important;
        white-space: normal !important;
    }
}

@media (min-width: 768px) {
    .pulse-intro-content .pulse-intro-break {
        display: block !important;
    }
}


/* =========================================================
   EBS: hide paragraph on mobile (widget class)
   ========================================================= */
@media (max-width: 767px) {
    .ebs-slideshow.ebs-hide-paragraph-mobile .pulse-intro-content > .elementor-widget-text-editor,
    .ebs-slideshow.ebs-hide-paragraph-mobile .pulse-intro-content .elementor-widget-text-editor,
    .ebs-slideshow.ebs-hide-paragraph-mobile .pulse-intro-content .elementor-widget-text-editor p {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
}

/* =========================================================
   EBS: RTL (Arabic)
   ========================================================= */
.ebs-slideshow[dir="rtl"] .pulse-intro-content,
.ebs-slideshow.ebs-dir-rtl .pulse-intro-content {
    left: auto !important;
    right: var(--ebs-intro-left, 7%) !important;
    text-align: right !important;
    align-items: flex-end !important;
}

.ebs-slideshow[dir="rtl"] .pulse-intro-content .elementor-heading-title,
.ebs-slideshow[dir="rtl"] .pulse-intro-content .elementor-widget-text-editor,
.ebs-slideshow[dir="rtl"] .pulse-intro-content .elementor-widget-text-editor p,
.ebs-slideshow[dir="rtl"] .pulse-intro-content .elementor-button-wrapper,
.ebs-slideshow.ebs-dir-rtl .pulse-intro-content .elementor-heading-title,
.ebs-slideshow.ebs-dir-rtl .pulse-intro-content .elementor-widget-text-editor,
.ebs-slideshow.ebs-dir-rtl .pulse-intro-content .elementor-widget-text-editor p,
.ebs-slideshow.ebs-dir-rtl .pulse-intro-content .elementor-button-wrapper {
    text-align: right !important;
}

.ebs-slideshow[dir="rtl"] .pulse-intro-content .elementor-widget-button,
.ebs-slideshow.ebs-dir-rtl .pulse-intro-content .elementor-widget-button {
    align-self: flex-end !important;
}

.ebs-slideshow[dir="rtl"] .pulse-title .elementor-heading-title,
.ebs-slideshow.ebs-dir-rtl .pulse-title .elementor-heading-title {
    direction: rtl;
}

/* Arabic solid diamond: independently positioned relative to the centered title */
.pulse-title .elementor-widget-container { position: relative !important; }
.pulse-title .pulse-solid-diamond-custom {
    position: absolute !important;
    left: calc(50% + var(--ebs-solid-diamond-x, 0px)) !important;
    top: calc(50% + var(--ebs-solid-diamond-y, 0px)) !important;
    width: 14px !important;
    height: 14px !important;
    display: block !important;
    background: var(--ebs-solid-diamond-color, #ff315d) !important;
    transform: translate(-50%, -50%) rotate(45deg) scale(calc(1 + clamp(0, calc(var(--pulse-progress, 0) / 0.38), 1) * 35 + clamp(0, calc((var(--pulse-progress, 0) - 0.38) / 0.30), 1) * 20)) !important;
    opacity: calc(1 - clamp(0, calc((var(--pulse-progress, 0) - 0.12) / 0.08), 1)) !important;
    z-index: 1003 !important;
    pointer-events: none !important;
}

/* Arabic opening title: no Latin i-dot diamond */
.ebs-slideshow.ebs-no-diamond-i .pulse-title .pulse-first-i::after {
    display: none !important;
    content: none !important;
}

/* Mobile RTL intro side */
@media (max-width: 767px) {
    .ebs-slideshow[dir="rtl"] .pulse-intro-content,
    .ebs-slideshow.ebs-dir-rtl .pulse-intro-content {
        left: auto !important;
        right: 4% !important;
        text-align: right !important;
        align-items: flex-end !important;
        transform-origin: right bottom !important;
    }
}


/* Arabic solid diamond: use the same scale/fade curve as the English i diamond. */
.ebs-slideshow[lang="ar"] .pulse-title .pulse-arabic-dhal {
    position: relative !important;
    display: inline-block !important;
    overflow: visible !important;
    z-index: 1002 !important;
}
.ebs-slideshow[lang="ar"] .pulse-title .pulse-arabic-dhal::after {
    content: "" !important;
    position: absolute !important;
    width: 14px !important;
    height: 14px !important;
    left: 50% !important;
    top: 7px !important;
    background: var(--ebs-solid-diamond-color, #ff315d) !important;
    display: block !important;
    visibility: visible !important;
    transform: translate3d(
        calc(-50% + var(--ebs-solid-diamond-x, 0px)),
        calc(-50% + var(--ebs-solid-diamond-y, 0px)),
        0
    ) rotate(45deg) scale(calc(
        1 +
        clamp(0, calc(var(--pulse-progress, 0) / 0.38), 1) * 35 +
        clamp(0, calc((var(--pulse-progress, 0) - 0.38) / 0.30), 1) * 20
    )) !important;
    transform-origin: center center !important;
    opacity: calc(1 - clamp(0, calc((var(--pulse-progress, 0) - 0.12) / 0.08), 1)) !important;
    z-index: 1003 !important;
    pointer-events: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Keep Arabic intro paragraph and its text right-aligned at every breakpoint. */
.ebs-slideshow[lang="ar"] .pulse-intro-content,
.ebs-slideshow[lang="ar"] .pulse-intro-content .elementor-widget-text-editor,
.ebs-slideshow[lang="ar"] .pulse-intro-content .elementor-widget-text-editor p {
    direction: rtl !important;
    text-align: right !important;
}


/* v1.3.14: align the Arabic paragraph block itself beneath the heading. */
.ebs-slideshow.ebs-lang-ar.ebs-ar-paragraph-right .pulse-intro-content .elementor-widget-text-editor {
    width: fit-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    align-self: flex-end !important;
    text-align: right !important;
    direction: rtl !important;
}
.ebs-slideshow.ebs-lang-ar.ebs-ar-paragraph-right .pulse-intro-content .elementor-widget-text-editor p {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: right !important;
    direction: rtl !important;
}
.ebs-slideshow.ebs-lang-ar.ebs-ar-paragraph-left .pulse-intro-content .elementor-widget-text-editor {
    width: fit-content !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    align-self: flex-start !important;
    text-align: left !important;
    direction: rtl !important;
}
.ebs-slideshow.ebs-lang-ar.ebs-ar-paragraph-left .pulse-intro-content .elementor-widget-text-editor p {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
    direction: rtl !important;
}


/* v1.3.15: keep Arabic CTA button below the paragraph and align it to the same side. */
.ebs-slideshow.ebs-lang-ar.ebs-ar-paragraph-right .pulse-intro-content .elementor-widget-button {
    align-self: flex-end !important;
    margin-right: 0 !important;
    margin-left: auto !important;
}
.ebs-slideshow.ebs-lang-ar.ebs-ar-paragraph-right .pulse-intro-content .elementor-button-wrapper {
    width: 100% !important;
    text-align: right !important;
}
.ebs-slideshow.ebs-lang-ar.ebs-ar-paragraph-left .pulse-intro-content .elementor-widget-button {
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}
.ebs-slideshow.ebs-lang-ar.ebs-ar-paragraph-left .pulse-intro-content .elementor-button-wrapper {
    width: 100% !important;
    text-align: left !important;
}


/* v1.3.16: center the Arabic people overlay like the English layout on mobile/tablet.
   This is scoped to Arabic only and leaves the English people positioning unchanged. */
.ebs-slideshow.ebs-lang-ar .pulse-people {
    left: 50% !important;
    transform: translate(-50%, -100%) !important;
}
@media (max-width: 1200px) {
    .ebs-slideshow.ebs-lang-ar .pulse-people {
        left: 50% !important;
        transform: translate(-50%, -100%) !important;
    }
}
@media (max-width: 767px) {
    .ebs-slideshow.ebs-lang-ar .pulse-people {
        left: 50% !important;
        width: 100vw !important;
        max-width: 100vw !important;
        transform: translate(-50%, -100%) !important;
    }
}


/* v1.3.17: anchor Arabic people overlay to the viewport center, not a possibly offset Elementor container. */
.ebs-slideshow.ebs-lang-ar .pulse-people {
    left: 50vw !important;
    margin-left: 0 !important;
    transform: translate3d(-50%, -100%, 0) !important;
}
@media (max-width: 1200px) {
    .ebs-slideshow.ebs-lang-ar .pulse-people {
        left: 50vw !important;
        width: 100vw !important;
        max-width: none !important;
        margin-left: 0 !important;
        transform: translate3d(-50%, -100%, 0) !important;
    }
}
@media (max-width: 767px) {
    .ebs-slideshow.ebs-lang-ar .pulse-people {
        left: 50vw !important;
        width: 100vw !important;
        max-width: none !important;
        margin-left: 0 !important;
        height: var(--ebs-people-height-mobile, 50vh) !important;
        max-height: var(--ebs-people-height-mobile, 50vh) !important;
        object-fit: contain !important;
        object-position: center bottom !important;
        transform: translate3d(-50%, -100%, 0) !important;
    }
}


/* v1.3.18: Arabic-only mobile refinements requested from screenshots.
   Keep desktop and all English animation styles untouched. */
@media (max-width: 767px) {
    /* Make the Arabic solid pink diamond smaller at the final title state. */
    .ebs-slideshow.ebs-lang-ar .pulse-title .pulse-arabic-dhal::after {
        width: 8px !important;
        height: 8px !important;
    }

    /* Enlarge the transparent people overlay so the visible people/diamonds
       occupy a similar proportion of the viewport as the English mobile version. */
    .ebs-slideshow.ebs-lang-ar .pulse-people {
        left: 50vw !important;
        top: 100vh !important;
        width: 135vw !important;
        max-width: none !important;
        height: 68vh !important;
        max-height: 68vh !important;
        object-fit: contain !important;
        object-position: center bottom !important;
        transform: translate3d(-50%, -100%, 0) !important;
    }

    /* Move the Arabic heading and CTA group down slightly, together. */
    .ebs-slideshow.ebs-lang-ar .pulse-intro-content {
        top: 50vh !important;
    }
}


/* v1.3.19: Arabic mobile only – smooth hand-off from the solid pink diamond
   to the pink image diamond.
   The Arabic mobile solid diamond starts at 8px (v1.3.18), but the pink image
   diamond is sized to match a 14px solid diamond. That 14/8 = 1.75x size gap
   made the pink diamond appear to "jump" bigger when it faded in.
   Here the solid diamond still starts at 8px, then grows an extra 1.75x over
   progress 0 -> 0.10, so by the time the pink image starts fading in (0.10)
   both diamonds are exactly the same size and the cross-fade is seamless.
   Desktop, tablet and English are untouched. */
@media (max-width: 767px) {
    .ebs-slideshow.ebs-lang-ar .pulse-title .pulse-arabic-dhal::after {
        transform: translate3d(
            calc(-50% + var(--ebs-solid-diamond-x, 0px)),
            calc(-50% + var(--ebs-solid-diamond-y, 0px)),
            0
        ) rotate(45deg) scale(calc(
            (
                1 +
                clamp(0, calc(var(--pulse-progress, 0) / 0.38), 1) * 35 +
                clamp(0, calc((var(--pulse-progress, 0) - 0.38) / 0.30), 1) * 20
            ) * (
                1 + clamp(0, calc(var(--pulse-progress, 0) / 0.10), 1) * 0.75
            )
        )) !important;
    }
}


/* v1.3.23: ALL screens (Arabic + English) – remove the shaking during the diamond animation.
   While scrolling inside the hero, the JS adds .ebs-stage-fixed and the stage
   (pink/blue diamonds + people) and the intro text are pinned with position:fixed,
   so the browser holds them still instead of JS chasing the scroll a frame late.
   Each breakpoint/language keeps its own intro left/right/top values.
   Sizes, timings and colours of the animation are unchanged. */
.ebs-slideshow.ebs-stage-fixed .pulse-animation-stage {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    transform: none !important;
}

.ebs-slideshow.ebs-stage-fixed .pulse-intro-content {
    position: fixed !important;
    transform: translateY(-50%) !important;
}

/* v1.3.23: mobile – keep the opening title still when the browser address bar
   shows/hides. 50% of a fixed element follows the changing visible height
   (and Chrome applies that change only after the finger is lifted = sudden jump).
   50svh never changes, so the title (and the diamond anchored to it) stays put. */
@media (max-width: 767px) {
    .ebs-slideshow .pulse-title {
        top: 50% !important;
        top: 50svh !important;
    }
}


/* v1.3.24/v1.3.25: Arabic mobile only – centre and size the PEOPLE (not the whole image) on screen.
   In the people overlay image the people + pink frame sit in the left half;
   the centre of the group is at 25.6% of the image width.
   left:50vw + translateX(-25.6%) puts that point exactly in the middle of the
   screen. Size (135vw / 68vh) and vertical position are unchanged.
   Adjust --ebs-ar-people-focus-x if a different image is uploaded. */
@media (max-width: 767px) {
    .ebs-slideshow.ebs-lang-ar .pulse-people {
        --ebs-ar-people-focus-x: 25.6%;
        /* v1.3.25: same size as the English people – sized by screen HEIGHT
           (like English) instead of width. 47vh was measured from the English
           mobile screenshot; change this one value to make them bigger/smaller. */
        --ebs-ar-people-height-mobile: 47vh;
        left: 50vw !important;
        width: auto !important;
        max-width: none !important;
        height: var(--ebs-ar-people-height-mobile) !important;
        max-height: none !important;
        transform: translate3d(calc(-1 * var(--ebs-ar-people-focus-x)), -100%, 0) !important;
    }
}


/* =========================================================
   v1.3.26: FASTER TRANSITIONS – all screens, Arabic + English
   =========================================================
   - The diamond grows at exactly the same speed as before.
   - Solid -> pink now starts when the solid is ~7.5x its size (was ~10x).
   - Pink -> blue now starts when the pink is ~16x its size (was ~36x).
   - Each cross-fade is twice as fast; sizes stay matched during every
     cross-fade because all diamonds share one growth value (--ebs-grow).
   - The finale (blue fills the screen, people + text) keeps its pace and
     the whole animation ends earlier: hero 200vh -> 172vh (scroll 100vh -> 72vh).
   Timeline below is in the new progress (0..1 over the shorter hero).
   ========================================================= */

.ebs-slideshow.pulse-hero-animation {
    min-height: 172vh !important;

    /* growth (same speed in scroll distance as before) */
    --ebs-t1: clamp(0, calc(var(--pulse-progress, 0) / 0.52778), 1);
    --ebs-t2: clamp(0, calc((var(--pulse-progress, 0) - 0.52778) / 0.41667), 1);
    --ebs-t3: clamp(0, calc((var(--pulse-progress, 0) - 0.375) / 0.625), 1);
    --ebs-t4: clamp(0, calc((var(--pulse-progress, 0) - 0.72222) / 0.22222), 1);
    --ebs-grow: calc(1 + var(--ebs-t1) * 35 + var(--ebs-t2) * 20);

    /* fades */
    --ebs-pink-in:   clamp(0, calc((var(--pulse-progress, 0) - 0.09722) / 0.05556), 1);
    --ebs-solid-out: clamp(0, calc((var(--pulse-progress, 0) - 0.11111) / 0.05556), 1);
    --ebs-white-in:  clamp(0, calc((var(--pulse-progress, 0) - 0.20278) / 0.05556), 1);
    --ebs-blue-in:   clamp(0, calc((var(--pulse-progress, 0) - 0.23056) / 0.06944), 1);
    --ebs-final-in:  clamp(0, calc((var(--pulse-progress, 0) - 0.94444) / 0.05556), 1);

    /* Arabic mobile: small solid catches up with the pink size before the fade */
    --ebs-ar-ramp:   clamp(0, calc(var(--pulse-progress, 0) / 0.09722), 1);
}

/* Solid pink diamond – English (i) */
.ebs-slideshow .pulse-title .pulse-first-i::after {
    transform:
        translate3d(
            calc(-50% + var(--ebs-solid-diamond-x, 0px)),
            calc(-50% + var(--ebs-solid-diamond-y, 0px)),
            0
        )
        rotate(45deg)
        scale(var(--ebs-grow)) !important;
    opacity: calc(1 - var(--ebs-solid-out)) !important;
}

/* Solid pink diamond – Arabic (د) */
.ebs-slideshow.ebs-lang-ar .pulse-title .pulse-arabic-dhal::after {
    transform:
        translate3d(
            calc(-50% + var(--ebs-solid-diamond-x, 0px)),
            calc(-50% + var(--ebs-solid-diamond-y, 0px)),
            0
        )
        rotate(45deg)
        scale(var(--ebs-grow)) !important;
    opacity: calc(1 - var(--ebs-solid-out)) !important;
}

/* Solid pink diamond – custom element (kept in sync) */
.ebs-slideshow .pulse-title .pulse-solid-diamond-custom {
    transform: translate(-50%, -50%) rotate(45deg) scale(var(--ebs-grow)) !important;
    opacity: calc(1 - var(--ebs-solid-out)) !important;
}

/* Arabic mobile: keep the v1.3.19 smooth hand-off (8px solid grows an extra
   1.75x so it equals the pink size exactly when the pink starts fading in). */
@media (max-width: 767px) {
    .ebs-slideshow.ebs-lang-ar .pulse-title .pulse-arabic-dhal::after {
        transform:
            translate3d(
                calc(-50% + var(--ebs-solid-diamond-x, 0px)),
                calc(-50% + var(--ebs-solid-diamond-y, 0px)),
                0
            )
            rotate(45deg)
            scale(calc(var(--ebs-grow) * (1 + var(--ebs-ar-ramp) * 0.75))) !important;
    }
}

/* White diamond behind the images */
.ebs-slideshow .pulse-animation-stage::before {
    transform:
        translate(-50%, -50%)
        rotate(45deg)
        scale(calc(0.0708 * (var(--ebs-grow) + var(--ebs-t4) * 120))) !important;
    opacity: var(--ebs-white-in) !important;
}

/* Pink image diamond */
.ebs-slideshow .pulse-pink-diamond {
    transform:
        translate3d(-50%, -50%, 0)
        scale(calc(0.0708 * var(--ebs-grow))) !important;
    opacity: calc(var(--ebs-pink-in) * (1 - var(--ebs-blue-in))) !important;
}

/* Blue image diamond – same size as the pink during the cross-fade,
   then the finale expansion (+85) as before. */
.ebs-slideshow .pulse-blue-diamond {
    transform:
        translate3d(-50%, -50%, 0)
        scale(calc(0.0708 * (var(--ebs-grow) + var(--ebs-t3) * 85))) !important;
    opacity: var(--ebs-blue-in) !important;
}

/* People + intro text appear at the (earlier) end */
.ebs-slideshow .pulse-people {
    opacity: var(--ebs-final-in) !important;
}
.ebs-slideshow .pulse-intro-content {
    opacity: var(--ebs-final-in) !important;
}