.construction-process{
display:flex;
justify-content:space-between;
position:relative;
margin-top:60px;
gap:20px;
}

.construction-process::before{
content:"";
position:absolute;
top:190px;   /* ajusta para baixo */
left:0;
width:100%;
height:3px;
background:#2b2b2b;
z-index:0;
}

.process-step{
text-align:center;
width:22%;
position:relative;
}

.process-img{
width:250px;
margin-bottom:15px;
}

.step-dot{
width:40px;
height:40px;
background:#101828;
color:white;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 15px auto;
font-weight:bold;
position:relative;
z-index:2;
top:15px; /* sobe um pouco para alinhar na linha */
}

.process-step h4{
margin-top:5px;
font-size:18px;
}

.process-step p{
font-size:14px;
color:#6c757d;
}

@media (max-width:768px){

.construction-process{
flex-direction:column;
align-items:flex-start;
padding-left:40px;
gap:50px;
}

.construction-process::before{
width:3px;
height:100%;
left:20px;
top:0;
}

.process-step{
width:100%;
text-align:left;
padding-left:40px;
}

.step-dot{
position:absolute;
left:-5px;
top:120px;
}

.process-img{
width:200px;
}

}

.process-img{
transition:transform .3s;
}

.process-step:hover .process-img{
transform:translateY(-8px);
}

@media (max-width: 400px){

.process-img{
width:150px;
}

.process-step{
padding-left:35px;
}

.step-dot{
top:100px;
}

.process-step h4{
font-size:16px;
}

.process-step p{
font-size:13px;
}

}