/* each step behaves like a sticky card */
    .hiw-step {
        position: sticky;
        top: 120px;
        /* adjust for your navbar height */
        min-height: 80vh;
        /* each step ~one viewport */
        display: flex;
        align-items: center;
        margin-bottom: 6rem;
        /* space so next step can slide under */
    }

    /* default (inactive) state */
    .hiw-step .card {
       
        transform: translateY(40px);
        transition: all 0.4s ease;
    }

    /* active step in focus */
    .hiw-step.active .card {
        opacity: 1;
        transform: translateY(0);
    }

    .hiw-step .card {
        position: relative;
        overflow: visible;
        border-radius: 24px;
        padding: 2rem;
        background: #f8fbff;
        box-shadow: 0 20px 50px rgba(25, 37, 58, 0.1);
      }



      .img-hover-swap {
        position: relative;
        display: inline-block;
    }
    .img-hover-swap img {
        display: block;
        width: 100%;
        height: auto;
        transition: opacity .4s ease;
    }
    .img-hover-swap__secondary {
        position: absolute;
        inset: 0;
        opacity: 0;
    }
    .img-hover-swap:hover .img-hover-swap__secondary {
        opacity: 1;
    }
    .img-hover-swap:hover .img-hover-swap__primary {
        opacity: 0;
    }