/* ==========================================================
                FUTURISTIC HOW IT WORKS
========================================================== */



.how-it-works{


    position:relative;


    overflow:hidden;


}






/* ==========================================================
                STEP FLOAT EFFECT
========================================================== */



.step{


    position:relative;


    animation:


    stepFloat 6s ease-in-out infinite;


}



.step:nth-child(1){


    animation-delay:0s;


}



.step:nth-child(3){


    animation-delay:.5s;


}



.step:nth-child(5){


    animation-delay:1s;


}



.step:nth-child(7){


    animation-delay:1.5s;


}




@keyframes stepFloat{


    0%,100%{


        transform:


        translateY(0);


    }



    50%{


        transform:


        translateY(-10px);


    }


}





/* ==========================================================
                STEP ICON GLOW
========================================================== */


.step-circle{


    position:relative;


}





.step-circle::before{


    content:"";


    position:absolute;


    inset:-10px;


    border-radius:50%;


    background:


    rgba(105,144,255,.25);


    filter:


    blur(15px);


    z-index:-1;


    animation:


    iconPulse 3s infinite;


}





@keyframes iconPulse{


    0%{


        transform:scale(.8);


        opacity:.5;


    }



    50%{


        transform:scale(1.2);


        opacity:.2;


    }



    100%{


        transform:scale(.8);


        opacity:.5;


    }


}
/* ==========================================================
                ANIMATED CONNECTOR LINE
========================================================== */



.step-line{


    position:relative;


    overflow:hidden;


}





.step-line::before{


    content:"";


    position:absolute;


    left:-100%;


    top:0;


    width:100%;


    height:100%;


    background:


    linear-gradient(

        90deg,

        transparent,

        white,

        transparent

    );


    animation:


    lineMove 3s infinite;


}




@keyframes lineMove{


    from{


        left:-100%;


    }


    to{


        left:100%;


    }


}







/* ==========================================================
                STEP HOVER ENHANCEMENT
========================================================== */


.step:hover .step-circle{


    transform:


    rotate(10deg)

    scale(1.1);


}





.step-circle{


    transition:.4s;


}







/* ==========================================================
                MOBILE TIMELINE MODE
========================================================== */



@media(max-width:700px){



    .steps{


        position:relative;


    }




    .step{


        width:100%;


    }





    .step:not(:last-child)::after{


        content:"";


        position:absolute;


        width:3px;


        height:50px;


        background:


        linear-gradient(

            var(--primary-light),

            var(--primary)

        );


        left:50%;


        transform:


        translateX(-50%);


        margin-top:20px;


    }




}