.process{
padding:120px 20px;
background:var(--color-bg-soft);
}

.process-container{
max-width:1200px;
margin:auto;
}

.process-header{
text-align:center;
margin-bottom:80px;
}

.process-header h2{
font-size:36px;
margin-bottom:15px;
color:var(--color-text-main);
}

.process-header p{
max-width:600px;
margin:auto;
color:var(--color-text-muted);
}

/* Timeline Layout */

.process-timeline{
position:relative;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;
text-align:center;
}

/* Horizontal Line */

.timeline-line{
position:absolute;
top:35px;
left:5%;
right:5%;
height:2px;
background:var(--color-border);
z-index:0;
}

/* Step */

.timeline-step{
position:relative;
z-index:1;
}

/* Circle */

.timeline-circle{
width:70px;
height:70px;
margin:auto;
border-radius:50%;
background:var(--color-primary);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
font-size:20px;
margin-bottom:20px;
box-shadow:var(--shadow-soft);
}

/* Title */

.timeline-step h3{
margin-bottom:10px;
color:var(--color-text-main);
}

/* Description */

.timeline-step p{
color:var(--color-text-muted);
font-size:15px;
}

/* Mobile */

@media (max-width:900px){

.process-timeline{
grid-template-columns:1fr;
gap:50px;
}

.timeline-line{
display:none;
}

}