.transformational-scroller-widget-container * {
    box-sizing: border-box;
}

.transformational-scroller-widget-container {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Inter', sans-serif;

    /* Responsive scaled properties */
    --scale-factor: 1;
    --font-size-active-scaled: calc(var(--font-size-active, 172px) * var(--scale-factor));
    --font-size-disabled-scaled: calc(var(--font-size-disabled, 172px) * var(--scale-factor));
    --line-height-active-scaled: calc(var(--line-height-active, 132px) * var(--scale-factor) * 0.8);
    --line-height-disabled-scaled: calc(var(--font-size-disabled, 172px) * var(--scale-factor) * 1.05);
    --heading-left-scaled: calc(var(--heading-left, 64px) * var(--scale-factor));
    --heading-gap-scaled: calc(var(--heading-gap, 64px) * var(--scale-factor));
    --img-right-scaled: calc(var(--img-right, 39px) * var(--scale-factor));
}

.transformational-scroller-widget-container .main_container {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    position: relative;
    display: flex;
    overflow: hidden;
    /* Red-to-dark gradient (default). Overridden inline via the "Background Image"
       Style control — when a custom image is set it is rendered centered and
       scaled to cover the section (background-position: center; background-size: cover). */
    background-image: linear-gradient(135deg, #121358 0%, #172554 50%, #0a0f29 100%);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    flex-direction: column;
    gap: 0;
    transition: background-image 0.85s cubic-bezier(0.25, 1, 0.3, 1), background 0.85s cubic-bezier(0.25, 1, 0.3, 1);
}

/* Background image overlay — sits behind all content but above the gradient */
.transformational-scroller-widget-container .ts-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.transformational-scroller-widget-container .ts-bg-overlay img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    object-fit: cover;
    /* transform: translate() set inline from widget controls */
}

.transformational-scroller-widget-container .heading_container {
    display: flex;
    position: absolute;
    top: var(--heading-top, 40%);
    left: var(--heading-left-scaled);
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: var(--heading-gap-scaled);
    height: auto;
    transition: transform var(--transition-duration, 0.85s) cubic-bezier(0.25, 1, 0.3, 1);
    z-index: 5;
}

.transformational-scroller-widget-container h3 {
    margin: 0;
    padding: 0;
    font-weight: 700;
    color: #FFF;
    font-family: 'Inter', sans-serif;
    border: none;
    background: none;
}

.transformational-scroller-widget-container .heading_active {
    font-size: var(--font-size-active-scaled);
    line-height: var(--line-height-active-scaled);
    opacity: var(--active-opacity, 1);
    background: linear-gradient(135deg, #FFFFFF 20%, #dbeafe 60%, #60a5fa 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    transition: opacity var(--transition-duration, 0.85s) cubic-bezier(0.25, 1, 0.3, 1);
}

.transformational-scroller-widget-container .heading_disabled {
    font-size: var(--font-size-active-scaled);
    line-height: var(--line-height-active-scaled);
    opacity: var(--disabled-opacity, 0.25);
    background: none !important;
    color: rgba(255, 255, 255, 0.25) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.25) !important;
    transition: opacity var(--transition-duration, 0.85s) cubic-bezier(0.25, 1, 0.3, 1);
}

.transformational-scroller-widget-container .main_img {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    /* Height grows from 50% to 80% as you scroll */
    height: var(--img-container-height, 50%);
    pointer-events: none;
    z-index: 10;
    overflow: hidden;
    transition: height var(--transition-duration, 0.85s) cubic-bezier(0.25, 1, 0.3, 1);
}

.transformational-scroller-widget-container .main_img img.img_frame {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity var(--transition-duration, 0.85s) cubic-bezier(0.25, 1, 0.3, 1);
}

.transformational-scroller-widget-container .main_img img.img_frame.active {
    opacity: 1;
    z-index: 12;
}

.transformational-scroller-widget-container .progress_track {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 160px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    z-index: 100;
}

.transformational-scroller-widget-container .progress_thumb {
    width: 100%;
    height: 25%;
    background: #FFF;
    border-radius: 4px;
    position: absolute;
    top: 0;
    transition: top var(--transition-duration, 0.85s) cubic-bezier(0.25, 1, 0.3, 1);
}

/* ============================================================
   Responsive Breakpoints
   ============================================================ */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
    .transformational-scroller-widget-container {
        --scale-factor: 0.65;
    }
    .transformational-scroller-widget-container .progress_track {
        right: 20px;
    }
}

/* ============================================================
   MOBILE (≤ 767px)
   - Image smaller, fixed on right side
   - Text transitions with scroll (same as desktop)
   - No progress indicator
   ============================================================ */
@media (max-width: 767px) {

    .transformational-scroller-widget-container .main_container {
        --scale-factor: 1;
        height: 60vh !important;
        height: 60dvh !important;
    }

    .transformational-scroller-widget-container .heading_container {
        z-index: 20;
        left: 20px !important;
        right: auto;
        top: 15% !important;
    }

    .transformational-scroller-widget-container .heading_active {
        font-size: clamp(36px, 10.5vw, 68px) !important;
        line-height: 1.05 !important;
        letter-spacing: -0.02em;
        text-shadow: 0 2px 16px rgba(0,0,0,0.45);
    }

    .transformational-scroller-widget-container .heading_disabled {
        font-size: clamp(30px, 9vw, 56px) !important;
        line-height: 1.1 !important;
    }

    .transformational-scroller-widget-container .main_img {
        height: var(--img-container-height, 70%) !important;
    }
    .transformational-scroller-widget-container .main_img img.img_frame {
        transform: translateX(-50%) !important;
    }

    .transformational-scroller-widget-container .progress_track {
        display: none !important;
    }
}

/* Ensure Elementor preview doesn't break scrolling experience */
.elementor-editor-active .transformational-scroller-widget-container .main_container {
    /* Optional editor mode adjustments if needed */
}