/*=========================================
        DARA AFFILIATION
        ROADMAP PREMIUM FUTURISTE
=========================================*/


.roadmap{

    background:#050914;

    padding:56px 0;

    position:relative;

    overflow:hidden;

}


/* Lumière arrière-plan */

.roadmap::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:#0066ff;

    filter:blur(180px);

    opacity:.15;

    top:20%;

    left:-200px;

}




.roadmap-circle-line{

    width:950px;

    max-width:90%;

    margin:80px auto;

    position:relative;

}



/* Ligne centrale */

.roadmap-circle-line::before{

    content:"";

    position:absolute;

    top:0;

    bottom:0;

    left:50%;

    width:4px;

    background:

    linear-gradient(

        #0066ff,

        #00c6ff,

        transparent

    );

    transform:translateX(-50%);

    opacity:.8;

}




/* Lumière animée */

.roadmap-circle-line::after{

    content:"";

    position:absolute;

    left:50%;

    width:10px;

    height:100px;

    background:#00c6ff;

    border-radius:50px;

    box-shadow:

    0 0 40px #00c6ff;

    transform:translateX(-50%);

    animation:lineMove 5s linear infinite;

}



@keyframes lineMove{


from{

    top:-120px;

}


to{

    top:100%;

}


}




/* ETAPES */


.roadmap-step{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:60px;

    margin-bottom:110px;

    animation:fadeRoadmap 1s ease both;

}



.roadmap-step:nth-child(even){

    flex-direction:row-reverse;

}



@keyframes fadeRoadmap{

from{

    opacity:0;

    transform:translateY(50px);

}

to{

    opacity:1;

    transform:translateY(0);

}

}





/* CERCLE */


.circle{

    width:110px;

    height:110px;

    border-radius:50%;


    background:

    linear-gradient(

        135deg,

        #0066ff,

        #00c6ff

    );


    display:flex;

    align-items:center;

    justify-content:center;


    color:white;

    font-size:30px;

    font-weight:900;


    box-shadow:

    0 0 30px rgba(0,198,255,.7),

    inset 0 0 20px rgba(255,255,255,.3);


    animation:pulseCircle 3s infinite;

    z-index:2;

}



@keyframes pulseCircle{


50%{

    transform:scale(1.12);

}


}





/* CARTE */


.roadmap-text{

    width:380px;

    padding:35px;


    border-radius:30px;


    background:

    rgba(255,255,255,.07);


    border:

    1px solid rgba(0,198,255,.25);


    backdrop-filter:blur(20px);


    transition:.5s;


    position:relative;

    overflow:hidden;

}





/* Effet lumière */

.roadmap-text::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;


    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(0,198,255,.25),

        transparent

    );


    transition:.8s;

}



.roadmap-text:hover::before{

    left:100%;

}



.roadmap-text:hover{

    transform:

    translateY(-15px)

    scale(1.03);


    border-color:#00c6ff;


    box-shadow:

    0 25px 60px rgba(0,140,255,.35);

}




.roadmap-text h3{

    color:white;

    font-size:25px;

    margin-bottom:15px;

}



.roadmap-text p{

    color:#b8c5d8;

    line-height:1.8;

    font-size:16px;

}




/* MOBILE */


@media(max-width:768px){


.roadmap-circle-line{

    max-width:95%;

}



.roadmap-circle-line::before{

    left:40px;

}



.roadmap-circle-line::after{

    left:40px;

}



.roadmap-step,
.roadmap-step:nth-child(even){

    flex-direction:row;

    justify-content:flex-start;

    gap:25px;

}



.circle{

    width:75px;

    height:75px;

    font-size:20px;

}



.roadmap-text{

    width:calc(100% - 100px);

    padding:25px;

}



}