.animate-on-scroll {
        opacity: 0;
        transition: all 0.8s ease-out;
        will-change: transform, opacity;
    }

    /* Desktop: slide from left/right initially */
    @media (min-width: 768px) {
        .animate-left {
            transform: translateX(-80px);
        }

        .animate-right {
            transform: translateX(80px);
        }
    }

    /* Mobile: only slide-up initially */
    @media (max-width: 767px) {

        .animate-left,
        .animate-right {
            transform: translateY(40px);
        }
    }

    /* Once visible → reset everything */
    .animate-on-scroll.show {
        opacity: 1;
        transform: translate(0, 0) !important;
        /* ✅ ensures alignment */
    }


    /* Fixed image wrapper with exact aspect ratio */
    .fixed-img {
        width: 100%;
        max-width: 1031px;
        /* ensures it doesn’t stretch too wide */
        aspect-ratio: 16 / 9;
        /* keeps 16:9 ratio → 486 × 291 */
        overflow: hidden;
        border-radius: 12px;
        margin: auto;
        /* centers inside column */
    }

    .fixed-img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        /* makes any image fit neatly */
        object-position: center;
        border-radius: 12px;
    }

    @media (max-width: 768px) {
        .fixed-img {
            max-width: 100%;
            /* allow scaling on small screens */
        }
    }