@media(max-width:575px){.elementor .steps-timeline{margin-block-end:5%;/* ==========================================================
 STEP TIMELINE — scroll-activated process steps
 ========================================================== */

/* --- Layout: make each step a positioning context for the line --- */
.step-item {
position: relative;
}

/* --- The number circle — sits ABOVE the line and always has an opaque fill --- */
.step-circle {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid #0d5c63;
background-color: #f0ede6; /* match your section's background so the line is fully masked when inactive */
color: #0d5c63;
font-weight: bold;
text-align: center;
transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

/* --- Connecting line between steps — sits BEHIND the circle --- */
.step-item:not(:last-child)::after {
content: '';
position: absolute;
z-index: 1;
left: 23px;
top: 0;
bottom: -40px;
width: 2px;
background-color: #d3dbe0;
transition: background-color 0.35s ease;
}

/* --- Active states (added by the scroll JS) --- */
.step-item.is-active .step-circle {
background-color: #0d5c63;
border-color: #0d5c63;
color: #ffffff;
}

.step-item.is-active::after {
background-color: #0d5c63;
}\n}}