.blog-detail-video .blog-detail-video-wrapper {
        position: relative;
    }

    .blog-detail-video .blog-detail-video-wrapper video {
        width: 100%;
        display: block;
        height: 100%;
        border-radius: 15px;
    }

    /* YouTube embed. The script sets aspect-ratio inline from the iframe's
       width/height attributes; 9 / 16 is only the fallback. */
    .blog-detail-video .blog-detail-video-wrapper iframe {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 9 / 16;
        border: 0;
        border-radius: 15px;
    }

    .blog-detail-video .blog-detail-video-wrapper .blog-detail-video-control {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80px;
        cursor: pointer;
        z-index: 10;
        transition: opacity 0.3s ease;
        opacity: 0.8;
    }

    .blog-detail-video {
        margin-top: 30px;
    }

    .blog-detail-video.mobile {
        display: none;
    }

    .blog-detail-video .blog-detail-video-wrapper.playing .blog-detail-video-control {
        opacity: 0;
    }

    .blog-detail-video .blog-detail-video-wrapper.playing:hover .blog-detail-video-control {
        opacity: 0.8;
    }

    .blog-detail-video .blog-detail-video-wrapper.cursor-still.playing .blog-detail-video-control {
        opacity: 0 !important;
    }


   
   




    @media (max-width: 767px) {
        .blog-detail-video.mobile {
            display: block;
        }

        .blog-detail-video .blog-detail-video-wrapper .blog-detail-video-control {
            width: 43px;
        }

        .blog-detail-video .blog-detail-video-wrapper {
            width: 90%;
            display: block;
            margin: auto;
        }

        .blog-detail-video .blog-detail-video-wrapper.played-once .blog-detail-video-control {
            display: none;
        }


    }




    @media (min-width: 768px) and (max-width: 991.98px) {
        .blog-detail-video.mobile {
            display: block;
        }

        .blog-detail-video .blog-detail-video-wrapper {
            width: 90%;
            display: block;
            margin: auto;
        }

        .blog-detail-video .blog-detail-video-wrapper.played-once .blog-detail-video-control {
            display: none;
        }

        

    }

    @media (min-width: 992px) and (max-width: 1199.98px) {
        .blog-detail-video .blog-detail-video-wrapper .blog-detail-video-control {
            width: 50px;
        }

     

    }






    /* =========================================================
       FLOATING MINI PLAYER (YouTube-style picture-in-picture)
    ========================================================= */

    /* ---- Preview left behind in the article while the video floats ---- */

    .blog-detail-video-placeholder {
        position: relative;
        border-radius: 15px;
        overflow: hidden;
        background-color: #0b0b0b;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .blog-detail-video-placeholder::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .55);
    }

    .blog-detail-video-placeholder span {
        position: relative;
        display: inline-block;
        max-width: 80%;
        padding: 9px 16px;
        border: 1px solid rgba(255, 255, 255, .35);
        border-radius: 999px;
        background: rgba(0, 0, 0, .35);
        font-family: "Red Hat Display", sans-serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        text-align: center;
        line-height: 1.3;
        color: #fff;
    }

    /* ---- Drag handle ---- */

    .bdv-mini-bar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 34px;
        display: none;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 0 6px 0 12px;
        background: linear-gradient(to bottom, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
        z-index: 14;
        cursor: grab;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
    }

    .bdv-mini-bar-label {
        font-family: "Red Hat Display", sans-serif;
        font-size: 11px;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .85);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: none;
    }

    /* Buttons in the mini player's top bar: fullscreen (left), close (right).
       SVG icons rather than a text glyph, so they sit centred at any size. */
    .bdv-mini-btn {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: #fff;
        line-height: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background-color .15s ease;
    }

    .bdv-mini-btn svg {
        width: 18px;
        height: 18px;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
        pointer-events: none;
    }

    .bdv-mini-btn:hover,
    .bdv-mini-btn:focus-visible {
        background: rgba(255, 255, 255, .18);
    }

    .bdv-mini-btn:focus-visible {
        outline: 2px solid #fff;
        outline-offset: -2px;
    }

    /* ---- Bottom controls: rewind / play-pause / forward, seek bar below ----
       Mini player only; visibility is driven inline by syncBar() together
       with the top bar. */
    .bdv-mini-bottom {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 14;
        flex-direction: column;
        gap: 2px;
        padding: 18px 4px 4px;
        background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
    }

    .blog-detail-video-wrapper.is-mini .bdv-mini-bottom {
        display: flex;
    }

    /* [-10s] [play/pause] [+10s], centred with clear space between them */
    .bdv-mini-bottom-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 22px;
    }

    /* Let the buttons give a little if the player is pinched very small */
    .bdv-mini-bottom-row .bdv-mini-btn {
        flex: 0 1 auto;
        min-width: 0;
    }

    .bdv-mini-play svg {
        fill: currentColor;
        stroke: none;
    }

    /* Play/pause is the main button - a little bigger than the skip buttons */
    .blog-detail-video-wrapper .bdv-mini-play {
        width: 34px;
        height: 34px;
    }

    .blog-detail-video-wrapper .bdv-mini-play svg {
        width: 22px;
        height: 22px;
    }

    .blog-detail-video-wrapper .bdv-mini-seek svg {
        width: 22px;
        height: 22px;
        stroke-width: 2;
    }

    /* Tap-to-restore / double-tap-to-enlarge: the size change is animated as
           a transform (see setMiniWidth), so it runs smoothly on the GPU */
    .blog-detail-video-wrapper.is-mini.bdv-resizing {
        transition: transform .3s cubic-bezier(.2, .8, .2, 1);
        will-change: transform;
    }

    @media (prefers-reduced-motion: reduce) {
        .blog-detail-video-wrapper.is-mini.bdv-resizing {
            transition: none;
        }
    }

    @media (max-width: 767px) {

        /* Spacing scales with the player, so it stays even at any size */
        .bdv-mini-bottom-row {
            gap: 10%;
        }

        .blog-detail-video-wrapper .bdv-mini-play {
            width: 30px;
            height: 30px;
        }

        .blog-detail-video-wrapper .bdv-mini-play svg {
            width: 20px;
            height: 20px;
        }

        .blog-detail-video-wrapper .bdv-mini-seek svg {
            width: 20px;
            height: 20px;
        }
    }

    /* Seek bar: a thin track with a tall invisible hit area for fingers */
    .bdv-mini-scrub {
        position: relative;
        display: flex;
        align-items: center;
        height: 16px;
        margin: 0 7px;
        cursor: pointer;
        touch-action: none;
        -webkit-tap-highlight-color: transparent;
    }

    .bdv-mini-scrub:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
        border-radius: 4px;
    }

    .bdv-mini-scrub-track {
        position: relative;
        width: 100%;
        height: 3px;
        border-radius: 3px;
        background: rgba(255, 255, 255, .35);
    }

    .bdv-mini-scrub-fill {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 0;
        border-radius: inherit;
        background: #fff;
    }

    .bdv-mini-scrub-thumb {
        position: absolute;
        top: 50%;
        left: 0;
        width: 12px;
        height: 12px;
        margin: -6px 0 0 -6px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
        transition: transform .1s ease;
    }

    .bdv-mini-scrub.is-scrubbing .bdv-mini-scrub-thumb {
        transform: scale(1.25);
    }

    /* The thin always-on progress line gives way to the seek bar */
    .blog-detail-video-wrapper.is-mini.bdv-controls-visible .bdv-mini-progress {
        opacity: 0;
    }

    @media (max-width: 767px) {
        .bdv-mini-bottom {
            padding: 14px 2px 2px;
            gap: 0;
        }

        .bdv-mini-scrub {
            height: 14px;
            margin: 0 6px;
        }

        .bdv-mini-scrub-thumb {
            width: 10px;
            height: 10px;
            margin: -5px 0 0 -5px;
        }
    }

    .blog-detail-video-wrapper:fullscreen .bdv-mini-bottom {
        display: none !important;
    }

    .blog-detail-video-wrapper:-webkit-full-screen .bdv-mini-bottom {
        display: none !important;
    }


    /* The big centre play/pause circle real Android phones showed in the mini
       player is part of Chrome's native controls, which page CSS cannot
       style. So the mini player turns the native controls off altogether
       (see applyMiniControls in the script) and uses its own buttons plus
       this thin YouTube-style progress line. Fullscreen and the in-article
       player keep the native controls. */
    .bdv-mini-progress {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: rgba(255, 255, 255, .3);
        z-index: 13;
        pointer-events: none;
    }

    .bdv-mini-progress span {
        display: block;
        width: 0;
        height: 100%;
        background: #0066ff;
    }

    .blog-detail-video-wrapper.is-mini .bdv-mini-progress {
        display: block;
    }

    .blog-detail-video-wrapper:fullscreen .bdv-mini-progress {
        display: none !important;
    }

    .blog-detail-video-wrapper:-webkit-full-screen .bdv-mini-progress {
        display: none !important;
    }

    /* Our own centre play/pause image is also redundant in the mini player on
       touch screens (no hover to reveal/hide it) */
    @media (hover: none),
    (pointer: coarse) {
        .blog-detail-video-wrapper.is-mini .blog-detail-video-control {
            display: none !important;
        }
    }

    /* Fullscreen: drop the mini player's rounded corners */
    .blog-detail-video-player:fullscreen {
        border-radius: 0 !important;
        object-fit: contain !important;
        aspect-ratio: auto !important;
    }

    .blog-detail-video-player:-webkit-full-screen {
        border-radius: 0 !important;
        object-fit: contain !important;
        aspect-ratio: auto !important;
    }

    /* ---- Whole player in fullscreen (from the mini player's button) ----
       !important is needed to beat the inline left/top/width/transform the
       drag and pinch code leaves on the wrapper. Rules are duplicated for
       the -webkit- prefix: an unknown pseudo-class in a selector list would
       drop the whole rule. */
    .blog-detail-video-wrapper:fullscreen {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        transform: none !important;
        animation: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #000 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .blog-detail-video-wrapper:-webkit-full-screen {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        transform: none !important;
        animation: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #000 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .blog-detail-video-wrapper:fullscreen video {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        border-radius: 0 !important;
    }

    .blog-detail-video-wrapper:-webkit-full-screen video {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        border-radius: 0 !important;
    }

    .blog-detail-video-wrapper:fullscreen iframe {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
        border-radius: 0 !important;
    }

    .blog-detail-video-wrapper:-webkit-full-screen iframe {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
        border-radius: 0 !important;
    }

    /* ---- Pointer layer over a YouTube iframe (mini player only) ----
       An iframe swallows every pointer event, so without this the page never
       sees the drag, pinch, tap or hover that drive the mini player. It sits
       under the bars (z-index 13/14), so their buttons still work. In the
       article and in fullscreen it is gone and YouTube's own controls work. */
    .bdv-mini-shield {
        display: none;
        position: absolute;
        inset: 0;
        z-index: 12;
    }

    .blog-detail-video-wrapper.is-mini .bdv-mini-shield {
        display: block;
    }

    .blog-detail-video-wrapper:fullscreen .bdv-mini-shield {
        display: none !important;
    }

    .blog-detail-video-wrapper:-webkit-full-screen .bdv-mini-shield {
        display: none !important;
    }

    /* ---- YouTube embed in the mini player (.bdv-embed.is-mini) ----
       In the article and in fullscreen the embed keeps YouTube's own controls.
       In the mini player only the player's own buttons are wanted, but
       YouTube's controls cannot be switched off without reloading the video,
       and its title / channel bar cannot be switched off at all. So the iframe
       is made taller than the mini player by --bdv-embed-crop at the top and
       at the bottom. YouTube fits the video to the width and letterboxes it,
       drawing its title / channel bar and its controls in those extra strips,
       and the mini player (overflow: hidden) cuts them off. The video itself
       is not cropped. The mini player takes the video's shape from
       --bdv-embed-ratio, set by the script from the iframe's width/height. */
    .blog-detail-video-wrapper.bdv-embed.is-mini {
        /* Tall enough to hide YouTube's title bar (top) and its control bar
           and seek bar (bottom). 30px left them visible. */
        --bdv-embed-crop: 140px;
        height: auto;
        aspect-ratio: var(--bdv-embed-ratio, 9 / 16);
    }

    .blog-detail-video-wrapper.bdv-embed.is-mini iframe {
        position: absolute;
        left: 0;
        top: calc(-1 * var(--bdv-embed-crop));
        width: 100%;
        height: calc(100% + 2 * var(--bdv-embed-crop));
        border-radius: 0;
    }

    /* ---- Poster cover with the play icon (YouTube embed) ----
       Covers YouTube's start and end screens until the video first plays,
       and again once it ends. Clicking it starts the video; after that the
       main video shows YouTube's own controls. */
    .bdv-embed-cover {
        position: absolute;
        inset: 0;
        z-index: 15;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #000 center / cover no-repeat;
        border-radius: 15px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .bdv-embed-cover[hidden] {
        display: none;
    }

    .blog-detail-video-wrapper.is-mini .bdv-embed-cover {
        border-radius: inherit;
    }

    .bdv-embed-play {
        width: 80px;
        opacity: .8;
        transition: opacity .3s ease;
        pointer-events: none;
    }

    .bdv-embed-cover:hover .bdv-embed-play,
    .bdv-embed-cover:focus-visible .bdv-embed-play {
        opacity: 1;
    }

    .blog-detail-video-wrapper.is-mini .bdv-embed-play {
        width: 44px;
    }

    @media (max-width: 767px) {
        .bdv-embed-play {
            width: 43px;
        }

        .blog-detail-video-wrapper.is-mini .bdv-embed-play {
            width: 28px;
        }
    }

    /* Top bar: always visible in fullscreen, X only, bigger tap target,
       clear of the notch / status bar */
    .blog-detail-video-wrapper:fullscreen .bdv-mini-bar {
        display: flex !important;
        justify-content: flex-end !important;
        height: auto !important;
        padding: calc(12px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) 24px 12px !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 20;
    }

    .blog-detail-video-wrapper:-webkit-full-screen .bdv-mini-bar {
        display: flex !important;
        justify-content: flex-end !important;
        height: auto !important;
        padding: calc(12px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) 24px 12px !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 20;
    }

    .blog-detail-video-wrapper:fullscreen .bdv-mini-fullscreen {
        display: none !important;
    }

    .blog-detail-video-wrapper:-webkit-full-screen .bdv-mini-fullscreen {
        display: none !important;
    }

    .blog-detail-video-wrapper:fullscreen .bdv-mini-close {
        width: 44px !important;
        height: 44px !important;
        background: rgba(0, 0, 0, .45);
    }

    .blog-detail-video-wrapper:-webkit-full-screen .bdv-mini-close {
        width: 44px !important;
        height: 44px !important;
        background: rgba(0, 0, 0, .45);
    }

    .blog-detail-video-wrapper:fullscreen .bdv-mini-close svg {
        width: 24px !important;
        height: 24px !important;
    }

    .blog-detail-video-wrapper:-webkit-full-screen .bdv-mini-close svg {
        width: 24px !important;
        height: 24px !important;
    }

    .blog-detail-video-wrapper:fullscreen .blog-detail-video-control {
        width: 64px !important;
    }

    .blog-detail-video-wrapper:-webkit-full-screen .blog-detail-video-control {
        width: 64px !important;
    }


    /* NOTE: these rules must NOT depend on a .blog-detail-video ancestor.
       While floating, the player is moved to <body> to escape the stacking
       context created by the sticky left sidebar, so the base player rules
       (width/height/radius on the video, centring of the control) no longer
       reach it and are re-declared here. */

    .blog-detail-video-wrapper.is-mini video {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 12px;
    }

    .blog-detail-video-wrapper.is-mini .blog-detail-video-control {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 44px;
        cursor: pointer;
        z-index: 10;
        opacity: .8;
        transition: opacity .3s ease;
    }

    .blog-detail-video-wrapper.is-mini.playing .blog-detail-video-control {
        opacity: 0;
    }

    .blog-detail-video-wrapper.is-mini.playing:hover .blog-detail-video-control {
        opacity: .8;
    }

    .blog-detail-video-wrapper.is-mini.cursor-still.playing .blog-detail-video-control {
        opacity: 0 !important;
    }

    .blog-detail-video-wrapper.is-mini {
        position: fixed;
        right: 24px;
        bottom: 24px;
        top: auto;
        left: auto;
        width: 190px;
        max-width: calc(100vw - 32px);
        margin: 0;
        z-index: 1111111111;
        /* above #myHeader, below BS modals (1050+) */
        border-radius: 14px;
        overflow: hidden;
        /* background: #000; */
        background: #00000045;
        box-shadow: 0 12px 34px rgba(0, 0, 0, .35);

        /* The whole player is a drag surface, so the browser must not claim
           the touch for panning. Without this the browser starts scrolling,
           fires pointercancel, and the drag dies mid-gesture. */
        touch-action: none;
    }

    .blog-detail-video-wrapper.is-mini video {
        border-radius: 6px;
    }

    .blog-detail-video-wrapper.is-mini iframe {
        display: block;
        width: 100%;
        height: auto;
        border: 0;
        border-radius: 6px;
    }

    /* One-shot entry animation. Kept on its own class, removed once it has
       run: if it lived on .is-mini, every toggle of .is-dragging would
       restart it and the player would visibly blink. */
    .blog-detail-video-wrapper.is-mini.is-entering {
        animation: bdv-mini-in .25s ease-out both;
    }

    .blog-detail-video-wrapper.is-mini .bdv-mini-bar {
        display: flex;
        justify-content: space-between;
        padding: 2px 4px 0;
    }

    /* While dragging: grabbing cursor, lift the shadow */
    .blog-detail-video-wrapper.is-mini.is-dragging {
        box-shadow: 0 20px 48px rgba(0, 0, 0, .5);
        cursor: grabbing;
    }

    .blog-detail-video-wrapper.is-mini.is-dragging .bdv-mini-bar {
        cursor: grabbing;
    }

    /* Don't fight the "Book a strategy call" modal */
    body.modal-open .blog-detail-video-wrapper.is-mini {
        display: none;
    }


    /* The handle - with its close button - shows and hides together with the
       video's native controls. The script adds .bdv-controls-visible on the
       same cues the browser uses (see "Close icon follows the native
       controls"); a tap reveals it on touch screens. Kept visible mid-drag,
       and while the close button has keyboard focus.

       visibility (delayed until the fade has finished) stops a hidden close
       button from catching a tap or click. */
    .bdv-mini-bar {
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility 0s linear .2s;
    }

    .blog-detail-video-wrapper.is-mini.bdv-controls-visible .bdv-mini-bar,
    .blog-detail-video-wrapper.is-mini.is-dragging .bdv-mini-bar,
    .blog-detail-video-wrapper.is-mini .bdv-mini-bar:focus-within {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }


    @keyframes bdv-mini-in {
        from {
            opacity: 0;
            transform: translateY(16px) scale(.96);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .blog-detail-video-wrapper.is-mini.is-entering {
            animation: none;
        }
    }

    @media (max-width: 991.98px) {

        /* Mirrors the in-article rule, which no longer reaches the portaled player */
        .blog-detail-video-wrapper.is-mini.played-once .blog-detail-video-control {
            display: none;
        }
    }

    @media (max-width: 767px) {
        .blog-detail-video-wrapper.is-mini {
            width: 121px;
            /* YouTube-sized mini player: 121 x 209 */
            right: 12px;
            bottom: 12px;
            border-radius: 10px;
        }

        .blog-detail-video-wrapper.is-mini .blog-detail-video-control {
            width: 28px;
        }

        /* Lock the mini player to 121:209, so it is 121 x 209 at the default
           width (and keeps that shape when pinched bigger). The video is
           cropped a few percent to fill it rather than letterboxed. */
        .blog-detail-video-wrapper.is-mini video {
            aspect-ratio: 121 / 209;
            height: auto;
            object-fit: cover;
        }

        .bdv-mini-bar {
            height: 28px;
            padding-left: 8px;
        }

        .bdv-mini-bar-label {
            display: none;
        }

        .blog-detail-video-placeholder span {
            font-size: 11px;
            padding: 7px 12px;
        }

        .blog-detail-video-wrapper.is-mini .bdv-mini-bar {
            height: 32px;
            padding: 2px 2px 0;
        }

        .bdv-mini-btn {
            width: 28px;
            height: 28px;
        }

        .bdv-mini-btn svg {
            width: 16px;
            height: 16px;
        }
    }


    @media (min-width: 1200px) and (max-width: 1399.98px) {
        .blog-detail-video-wrapper.is-mini {
            width: 190px;
        }
    }


    .faq-sec .faq-content-sec .accordion-item h4 .accordion-button, .faq-sec .faq-content-sec .accordion-item h4{        white-space: unset !important;}