.data-flow{

padding:170px 0;

background:#ffffff;

}

.timeline{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:90px;

position:relative;

gap:25px;

flex-wrap:wrap;

}

.node{

width:170px;

text-align:center;

position:relative;

z-index:2;

}

.icon{

width:100px;

height:100px;

margin:auto;

margin-bottom:20px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:42px;

background:linear-gradient(135deg,#22C55E,#2F855A);

color:#fff;

box-shadow:0 20px 50px rgba(34,197,94,.25);

transition:.35s;

}

.node:hover .icon{

transform:translateY(-10px) scale(1.05);

}

.node h3{

font-size:24px;

margin-bottom:15px;

}

.node p{

line-height:1.7;

color:#6b7280;

}

.line{

height:4px;

flex:1;

min-width:60px;

background:linear-gradient(

90deg,

#22C55E,

#84CC16

);

border-radius:20px;

position:relative;

overflow:hidden;

}

.line::after{

content:"";

position:absolute;

left:-40px;

top:0;

width:40px;

height:100%;

background:#fff;

animation:dataMove 2s linear infinite;

}

@keyframes dataMove{

0%{

left:-40px;

}

100%{

left:100%;

}

}

@media(max-width:1200px){

.timeline{

flex-direction:column;

}

.line{

width:4px;

height:70px;

min-width:4px;

background:linear-gradient(

180deg,

#22C55E,

#84CC16

);

}

.line::after{

width:100%;

height:40px;

top:-40px;

left:0;

animation:dataMoveVertical 2s linear infinite;

}

}

@keyframes dataMoveVertical{

0%{

top:-40px;

}

100%{

top:100%;

}
}