@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
        
        :root {
            --card-w: 320px;
            --gap-left: 24px;
            --gap-right: 20px;
        }

        body {
            font-family: 'Helvetica Neue', sans-serif;
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        :root {
            --card-height: clamp(22rem, 32vw, 30rem);
            /* Slightly bigger vertical gap between stacked cards for clarity */
            --card-margin: 4.5vw;
            /* More top offset so the sticky stacking looks spacious */
            --card-top-offset: 1.2em;
            /* Number of stacked cards (changed to 5 to support the new card) */
            --numcards: 5;
            --outline-width: 0px;
        }

        #cards {
            padding-bottom: calc(var(--numcards) * var(--card-top-offset));
            margin-bottom: var(--card-margin);
        }

        #card_1 {
            --index: 1;
        }

        #card_2 {
            --index: 2;
        }

        #card_3 {
            --index: 3;
        }

        #card_4 {
            --index: 4;
        }

        /* New 5th card index */
        #card_5 {
            --index: 5;
        }

        .card {
            position: sticky;
            top: 0;
            padding-top: calc(var(--index) * var(--card-top-offset));
            z-index: 1;
        }

        @supports (scroll-timeline-name: none) or (animation-timeline: auto) {

            body {
                scroll-timeline-name: cards-element-scrolls-in-body;
                scroll-timeline-axis: block;
            }

            .card {
                --index0: calc(var(--index) - 1);
                --reverse-index: calc(var(--numcards) - var(--index0));
            }

            .card__content {
                transform-origin: 50% 0%;
                will-change: transform;

                --duration: calc(var(--reverse-index0) * 1s);
                --delay: calc(var(--index0) * 1s);

                animation: var(--duration) linear scale var(--delay) forwards;
                animation-timeline: cards-element-scrolls-in-body;
            }

            @keyframes scale {
                to {
                    transform: scale(calc(1.08 - (0.08 * var(--reverse-index))));
                }
            }
        }


        #debug {
            position: fixed;
            top: 1em;
            left: 1em;
        }

        #debug::after {
            content: " Show Debug";
            margin-left: 1.5em;
            color: white;
            white-space: nowrap;
        }

        #debug:checked~main {
            --outline-width: 1px;
        }

        #stacked-cards {
            background: #0745FF;
            padding-top: 4rem;
            padding-bottom: 4rem;

            /* padding-left: 20px; */
        }

        #cards {
            list-style: none;
            position: relative;
            outline: calc(var(--outline-width) * 10) solid transparent;
            width: min(1120px, calc(100% - 2rem));
            margin-inline: auto;
            margin-top: 3rem;

            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: repeat(var(--numcards), var(--card-height));
            gap: var(--card-margin);
        }

        #cards::before,
        #cards::after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 92%;
        height: calc(var(--card-height) - 1.25rem);
        background: #ffffff;
        border-radius: 1rem;
        box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.10), 0 1em 2em rgba(0, 0, 0, 0.10);
        z-index: 0;
        }

        #cards::before {
            top: 0.75rem;
            opacity: 0.85;
            width: 94%;
        }

        #cards::after {
            top: 1.75rem;
            opacity: 0.75;
            width: 96%;
        }

        .card {
            outline: var(--outline-width) solid hotpink;
        }

        .card__content {
            box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.1), 0 1em 2em rgba(0, 0, 0, 0.1);
            background: #ffffff;
            color: #0a0507;
            border-radius: 1rem;
            overflow: hidden;
            display: grid;
            grid-template-areas: "text img";
            grid-template-columns: 1.2fr 1fr;
            grid-template-rows: auto;
            align-items: stretch;
            outline: var(--outline-width) solid transparent;
        }

        .card__content>div {
            grid-area: text;
            width: 80%;
            place-self: center;
            text-align: left;

            display: grid;
            gap: 1em;
            place-items: start;
        }

        .card__content>figure {
            grid-area: img;
            overflow: hidden;
        }

        .card__content>figure>img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }



        .btn {
            background: rgb(188 87 36);
            color: rgb(255 255 255);
            text-decoration: none;
            display: inline-block;
            padding: 0.5em 0.9em;
            border-radius: 0.375em;
        }

        @media (max-width: 1024px) {

            #cards::before {
                top: 0.5rem;
                opacity: 0.9;
                width: 92%;
            }

            #stacked-cards {
                height: auto !important;
            }

            #cards {
                width: 100%;
                display: flex;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scroll-snap-type: x mandatory;
                gap: max(1rem, 3vw);
                padding-inline: 0.75rem;
                margin-inline: 0;
                grid-template-columns: unset;
                grid-template-rows: unset;
                padding-bottom: 0;
                margin-bottom: 0;
            }

            #cards::before,
            #cards::after {
                display: none;
            }

            .card {
                position: relative;
                top: auto;
                padding-top: 0;
                flex: 0 0 auto;
                width: min(85vw, 360px);
                scroll-snap-align: start;
            }

            .card__content {
                grid-template-columns: 1fr;
                grid-template-areas: "img" "text";
            }

            .card__content>div {
                width: 92%;
                padding: 1rem 0 1.5rem;
            }

            .card__content>figure>img {
                object-position: center;
                min-height: 200px;
            }
        }

        @media (max-width: 640px) {
            :root {
                --card-height: clamp(20rem, 90vw, 26rem);
            }

            #cards {
                margin-top: 2rem;
            }

            #cards::after {
                top: 0.9rem;
                opacity: 0.82;
                width: 92%;
            }
        }


        @keyframes scroll {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(calc(-50% - 12px));
            }
        }

        .animate-scroll {
            animation: scroll 40s linear infinite;
            will-change: transform;
        }

        @keyframes scroll-right {
            0% {
                transform: translateX(calc(-50% - 10px));
            }

            100% {
                transform: translateX(0);
            }
        }

        .animates-scroll {
            animation: scroll-right 40s linear infinite;
            will-change: transform;
        }

        .hover\:pause-scroll:hover {
            animation-play-state: paused;
        }

        @keyframes scroll-two-left {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(calc(-1 * ((var(--card-w) + var(--gap-left)) * 2)));
            }
        }

        @keyframes scroll-two-right {
            0% {
                transform: translateX(calc(-1 * ((var(--card-w) + var(--gap-right)) * 2)));
            }

            100% {
                transform: translateX(0);
            }
        }

        @media (max-width: 767px) {

            .animate-scroll {
                animation: scroll-two-left 12s linear infinite;
            }

            .animates-scroll {
                animation: scroll-two-right 12s linear infinite;
            }
        }


        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .stacked-card {
            min-height: 600px;
            display: none;
        }

        .stacked-card__content {
            display: none;
            flex-direction: column;
            height: 100%;
        }

        @media (max-width: 767px) {
            .stacked-card {
                display: block;
                min-height: 500px;
            }

            .stacked-card__content {
                display: flex;
            }
        }

        @media (min-width: 768px) {
            .stacked-card {
                min-height: 650px;
            }
        }

        @media (min-width: 1024px) {
            .stacked-card {
                min-height: 700px;
            }
        }

        @media (min-width: 768px) {
            .stacked-card {
                height: 100%;
            }
        }

        .stacked-card {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .stacked-card:hover {
            transform: translateY(-2px);
        }

        /* img slide css */
        [x-ref="slider"] {
            transform-style: preserve-3d;
            will-change: transform;
            backface-visibility: hidden;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }

        /* Smooth transitions for slider cards */
        [x-ref="slider"]>div {
            transform-style: preserve-3d;
            backface-visibility: hidden;
        }

        @media (max-width: 767px) {
            [data-stack-mobile] {
                position: relative;
                /* Extra bottom space so the last sticky card can fully scroll through */
                /* padding-bottom: 120px; */
            }

            [data-stack-mobile] .stacked-card {
                position: sticky;
                top: 24px;
                /* keeps the active card in view */
                z-index: var(--z, 1);
                transform-origin: center top;
                /* Smooth transform/opacity transitions driven by scroll-updated CSS vars */
                transform: translateY(calc(var(--y, 0) * 1px)) scale(calc(1 - var(--p, 0) * 0.05)) rotate(calc(var(--p, 0) * -0.35deg));
                opacity: calc(1 - var(--p, 0) * 0.08);
                will-change: transform, opacity;
            }

            /* Neutralize hover lift on mobile to avoid fighting sticky transforms */
            [data-stack-mobile] .stacked-card:hover {
                transform: translateY(calc(var(--y, 0) * 1px)) scale(calc(1 - var(--p, 0) * 0.05)) rotate(calc(var(--p, 0) * -0.35deg));
            }

            /* Ensure the card body stays visually intact on overlap */
            [data-stack-mobile] .stacked-card__content {
                background: #fff;
            }
        }

        /* CSS for flip effect */
        .rotate-y-180 {
            transform: rotateY(180deg);
            transition: transform 0.5s ease;
        }

        /* Use Tailwind's .relative (position) but keep perspective scoped to the flip-card only */
        .relative {
            position: relative;
        }

        .absolute {
            position: absolute;
        }

        /* Add a transition for the image flip */
        .object-cover {
            transition: transform 0.5s ease-in-out;
        }

        /* Flip card structure */
        .flip-card {
            perspective: 1000px;
            min-width: 0;
            /* allow flex children to shrink properly on small screens */
            min-height: 338px;
        }

        .flip-card-inner {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.6s ease;
        }

        /* Smooth transform for the slider inner wrapper; improves desktop animation.
           For mobile, scrollLeft updates are used instead of transform; scroll-behavior
           provides a smooth transition for programmatic scroll operations. */
        .slider-inner {
            will-change: transform, scroll-left;
            transition: transform 0.16s linear;
            scroll-behavior: smooth;
        }

        /* Scroll snap: make mobile swipe snap to one card per viewport */
        .slider-viewport {
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
        }

        .flip-card {
            scroll-snap-align: center;
            scroll-snap-stop: always;
        }

        /* Keep card size/shape on mobile; centering is handled by JS padding so one
           card sits centered per swipe without forcing full-viewport widths. */

        .flip-card-inner.flipped {
            transform: rotateY(180deg);
        }

        /* Ensure the front face stacks above the back when not flipped. This prevents
           the flipped-back overlay from visually covering the front image on mobile
           or in some browsers where stacking contexts can behave unexpectedly. */
        .flip-card-front {
            z-index: 20;
        }

        .flip-card-back {
            z-index: 10;
        }

        /* Make sure images are visible and fill the card area */
        .flip-card-front img,
        .flip-card-back video {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Ensure the front has a solid background so white/transparent SVGs are still visible on white pages */
        .flip-card-front {
            background-color: #ffffff;
        }

        .flip-card-back {
            z-index: 10;
            position: absolute;
            overflow: hidden;
        }

        /* Ensure video sits behind the overlay */
        .flip-card-back video {
            z-index: 1;
            /* keep the video under the overlay */
            position: absolute;
            /* ensure consistent stacking */
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Overlay to show background gradient/colour above the video */
        .flip-card-back::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 10;
            /* show above the video */
            pointer-events: none;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.20) 100%);
            transition: opacity .25s ease-in-out;
            opacity: 1;
        }

        /* Lighter overlay for cards which have video (so the video is more visible) */
        .flip-card-back.has-video::before {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.10) 100%);
        }

        .flip-card-front,
        .flip-card-back {
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            position: absolute;
            inset: 0;
        }

        .flip-card-back {
            transform: rotateY(180deg);
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.6) 100%);
        }

        /* Hover flip on pointer devices */
        @media (hover: hover) and (pointer: fine) {
            .flip-card:hover .flip-card-inner {
                transform: rotateY(180deg);
            }
        }

        /* Disable the 3D flip animation on small screens — show the back as an overlay instead
       This keeps the card responsive on mobile while allowing taps to show the back content. */
        @media (max-width: 640px) {
            .flip-card-inner.flipped {
                transform: none !important;
            }

            .flip-card-back {
                /* Remove the 3D rotation and make sure the back face sits above the front */
                transform: none !important;
                z-index: 20 !important;
                position: absolute !important;
                inset: 0 !important;
                opacity: 0;
                transition: opacity 0.28s ease-in-out;
            }

            /* When flipped on mobile, show the back face with fade-in */
            .flip-card-inner.flipped .flip-card-back {
                opacity: 1;
            }

            .flip-card-front {
                z-index: 1 !important;
            }

            .flip-card-back video {
                z-index: 18 !important;
                /* below the overlay but above the front */
            }

            /* Avoid hover-based flipping on devices that may claim hover incorrectly */
            .flip-card:hover .flip-card-inner {
                transform: none !important;
            }
        }


            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }

            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
                -webkit-overflow-scrolling: touch;
            }

            /* Webinar cards container (fallback width before Alpine measures) */
            .webinar-cards-viewport {
                width: calc(5 * 320px + 4 * 24px);
                /* 5 cards width + 4 gaps for desktop */
                max-width: 100%;
                margin: 0 auto;
            }

            @media (max-width: 1024px) {
                .webinar-cards-viewport {
                    width: calc(2 * 320px + 1 * 24px);
                    /* 2 cards on tablet */
                }
            }

            @media (max-width: 768px) {
                .webinar-cards-viewport {
                    width: 320px;
                    /* 1 card on mobile */
                }
            }

            /* Make each card a snap point when using snap-x */
            .webinar-cards>article {
                scroll-snap-align: start;
            }