/* ==========================================================================
   Isolated Mobile Responsiveness & Layout Fixes for iPhone 5/SE (320x568)
   ========================================================================== */

@media (max-width: 767px) {
    /* Use min-height: 100svh to let the banner container fill the screen naturally */
    .sec-banner,
    .sec-banner_img,
    .sec-banner_video {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100svh !important;
        min-height: 100dvh !important;
    }

    /* Set main overlay container to take full height of the banner */
    .sec-banner .css-arjcpd,
    .sec-banner.sec-banner_video .css-arjcpd {
        display: flex !important;
        flex-direction: column !important;
        /* justify-content: flex-start !important; */
        justify-content: center !important;
        align-items: stretch !important;
        /** Remove By Sahejad 11-07-2026 **/
        /* padding-top: 65px !important;  */
        /** Remove By Sahejad 11-07-2026 **/
        /** Added By Sahejad 11-07-2026 **/
        padding-top: 96px !important; 
        /** Added By Sahejad 11-07-2026 **/
        padding-bottom: 0px !important; /* Bottom spacing managed inside title area */
        height: auto !important;
        min-height: calc(100vh - 96px) !important;
        min-height: calc(100svh - 96px) !important;
        min-height: calc(100dvh - 96px) !important;
    }

    /* Let the inner container flow in relative space so it cannot overflow absolute limits */
    .sec-banner .css-arjcpd_inner,
    .sec-banner.sec-banner_video .css-arjcpd_inner {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        padding-bottom: 0px !important;
        padding-top: 0px !important;
        height: auto !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }

    /* Convert title area to a flex column */
    .sec-banner .css-arjcpd .css-arjcpd_inner .landingpage_title_area.canela-banner-text,
    .sec-banner .css-arjcpd .css-arjcpd_inner .landingpage_title_area {
        max-width: 94% !important;
        width: 94% !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        /* align-items: center !important; */
        align-items: flex-start !important;
        justify-content: flex-start !important;
        text-align: center !important;
        min-height: auto !important; 
        height: auto !important;

        /** Added By Sahejad 11-07-2026 **/
        max-height: none !important;
        overflow: visible !important;
        padding-right: 0 !important;
        /** Added By Sahejad 11-07-2026 **/
    }

    /* Group and order the elements correctly */
    .banner-heading-title {
        order: 1 !important;
    }

    .banner-sub-heading-title {
        order: 2 !important;
    }

    .banner-sub-sub-heading-title {
        order: 3 !important;
    }

    /* CTA button positioned directly under the subtitle text block */
    .sec-banner .css-arjcpd .css-arjcpd_inner .landingpage_title_area .yoga-plan_link {
        order: 4 !important;
        margin-top: 24px !important; /* Positions button nicely below text */
        margin-bottom: 15px !important; 
        padding: 12px 36px !important; /* Standard premium button sizing */
        font-size: 16px !important; /* Standard average button size */
        font-weight: 700 !important; /* Bold text for readability and impact */
        display: inline-block !important;
        background: linear-gradient(135deg, #b2b7ff 0%, #898eff 100%) !important; /* Premium gradient background */
        color: #0b0d17 !important; /* High contrast text */
        border-radius: 99px !important;
        border: none !important;
        box-shadow: 0 4px 15px rgba(178, 183, 255, 0.45) !important; /* Soft premium glow */
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }

    .sec-banner .css-arjcpd .css-arjcpd_inner .landingpage_title_area .yoga-plan_link:hover,
    .sec-banner .css-arjcpd .css-arjcpd_inner .landingpage_title_area .yoga-plan_link:active {
        transform: scale(0.97) !important;
        box-shadow: 0 2px 8px rgba(178, 183, 255, 0.3) !important;
        background: linear-gradient(135deg, #a1a6ff 0%, #898eff 100%) !important;
    }

    /* Standard average font sizes with high impact for mobile devices */
    .banner-heading-title,
    .banner-heading-title p,
    .banner-heading-title span,
    .banner-heading-title p span {
        /* font-size: clamp(24px, 7.5vw, 28px) !important;  */
        font-size: clamp(28px, 7.5vw, 28px) !important; 
        line-height: 1.2 !important;
        margin: 6px 0 !important;
        font-weight: 700 !important;
    }

    .banner-sub-heading-title,
    .banner-sub-heading-title p,
    .banner-sub-heading-title span,
    .banner-sub-heading-title p span {
        /* font-size: clamp(14px, 4.4vw, 16px) !important; */
        font-size: clamp(18px, 4.4vw, 16px) !important;
        line-height: 1.3 !important;
        margin: 8px 0 !important;
        color: #111827 !important; /* Highly readable dark slate color */
        font-weight: 600 !important; /* Bolder weighting to make thin font lines legible */
    }

    .banner-sub-sub-heading-title,
    .banner-sub-sub-heading-title p,
    .banner-sub-sub-heading-title span,
    .banner-sub-sub-heading-title p span {
        /* font-size: clamp(13px, 4.0vw, 15px) !important;  */
        font-size: clamp(16px, 4.0vw, 15px) !important; 
        line-height: 1.3 !important;
        margin: 8px 0 !important;
        color: #111827 !important; /* Highly readable dark slate color */
        font-weight: 600 !important; /* Bolder weighting to make thin font lines legible */
    }

    /* Force all child elements of subheadings to inherit the dark color and bold weight to override inline HTML */
    .banner-sub-heading-title *,
    .banner-sub-sub-heading-title * {
        color: #111827 !important;
        font-weight: 600 !important;

        /** Added By Sahejad 11-07-2026 **/
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        /** Added By Sahejad 11-07-2026 **/
    }

    /* Adjusted opacity overlay so background video is beautifully visible and lively */
    .sec-banner_overlay_redesign,
    .sec-banner.sec-banner_video .sec-banner_overlay_redesign {
        background: rgba(244, 243, 242, 0.45) !important;

        /** Remove By Sahejad 11-07-2026 **/
        /* position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        z-index: 5 !important; */
        /** Remove By Sahejad 11-07-2026 **/

        /** Added By Sahejad 11-07-2026 **/
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100svh !important;
        min-height: 100dvh !important;
        z-index: 5 !important;
        /** Added By Sahejad 11-07-2026 **/
    }

    /* Add strong multi-layered white text shadow to create a legibility halo on neon/bright frames */
    .banner-heading-title,
    .banner-heading-title *,
    .banner-sub-heading-title,
    .banner-sub-heading-title *,
    .banner-sub-sub-heading-title,
    .banner-sub-sub-heading-title * {
        text-shadow: 
            0 1px 8px rgba(255, 255, 255, 1),
            0 1px 4px rgba(255, 255, 255, 0.95),
            0 0 2px rgba(255, 255, 255, 0.9),
            0 0 1px rgba(255, 255, 255, 0.8) !important;
    }

}

@media (max-width: 425px) {
    /* Adjust padding-top on extra small screens to prevent overlap with header */
    .sec-banner .css-arjcpd,
    .sec-banner.sec-banner_video .css-arjcpd {
        padding-top: 60px !important;
    }
}

/* ==========================================================================
   Banner fix for 768px and above (same flow behavior)
   ========================================================================== */
@media (min-width: 768px) {
    .sec-banner,
    .sec-banner_img,
    .sec-banner_video {
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100svh !important;
        min-height: 100dvh !important;
    }

    .sec-banner .css-arjcpd,
    .sec-banner.sec-banner_video .css-arjcpd {
        padding-top: 96px !important;
        padding-bottom: 0 !important;
        height: auto !important;
        min-height: calc(100vh - 96px) !important;
        min-height: calc(100svh - 96px) !important;
        min-height: calc(100dvh - 96px) !important;
    }

    .sec-banner .css-arjcpd_inner,
    .sec-banner.sec-banner_video .css-arjcpd_inner {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: auto !important;
    }

    .sec-banner .css-arjcpd .css-arjcpd_inner .landingpage_title_area.canela-banner-text,
    .sec-banner .css-arjcpd .css-arjcpd_inner .landingpage_title_area {
        height: auto !important;
    }

    .sec-banner_overlay_redesign,
    .sec-banner.sec-banner_video .sec-banner_overlay_redesign {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100svh !important;
        min-height: 100dvh !important;
        z-index: 5 !important;
    }
}