/* ===========================
   Journey Map
=========================== */


.journey-map{

    display:flex;

    flex-direction:column;

    align-items:center;

}



/* Nodes */

.journey-node{

    display:flex;

    align-items:center;

    gap:30px;

    width:min(900px,100%);

}



.node-icon{

    width:80px;

    height:80px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2.5rem;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(15px);

}



.node-card{

    flex:1;

    padding:30px;

    background:rgba(20,20,20,.65);

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    transition:.3s;

}



.node-card:hover{

    transform:translateX(15px);

}




/* ===========================
   SVG Connectors
=========================== */


.connector{

    width:300px;

    height:120px;

}



.connector svg{

    width:100%;

    height:100%;

}



.connector path{

    fill:none;

    stroke:white;

    stroke-width:3;

    stroke-dasharray:8;

    animation:flow 2s linear infinite;

}



.connector polygon{

    fill:white;

}




@keyframes flow{


    from{

        stroke-dashoffset:20;

    }


    to{

        stroke-dashoffset:0;

    }


}




/* ===========================
   Resume
=========================== */


.resume-node{

    text-align:center;

    padding:40px;

    background:rgba(20,20,20,.65);

    border-radius:25px;

    border:1px solid rgba(255,255,255,.1);

}




@media(max-width:700px){


    .journey-node{

        flex-direction:column;

        text-align:center;

    }


    .connector{

        transform:rotate(90deg);

        height:200px;

    }


}