.steps-section{
padding:120px 0;
background:#f7f7fb;
font-family: 'Inter', sans-serif;
}

.steps-wrapper{
width:1200px;
max-width:90%;
margin:auto;
}

.steps-title{
text-align:center;
font-size:34px;
font-weight:700;
margin-bottom:80px;
color:#2d2d2d;
}

/* GRID */

.steps-grid{
display:grid;
grid-template-columns:1fr 1fr 1fr;
align-items:center;
gap:40px;
}

/* LEFT STEPS */

.steps-left{
position:relative;
}

.step{
display:flex;
align-items:flex-start;
margin-bottom:50px;
gap:15px;
}

.step-circle{
width:14px;
height:14px;
background:#5c4df2;
border-radius:50%;
margin-top:8px;
}

.step-content h4{
font-size:17px;
font-weight:600;
color:#333;
margin-bottom:6px;
}

.step-content p{
font-size:14px;
color:#777;
line-height:1.6;
}

/* CENTER IMAGE */

.steps-center{
display:flex;
justify-content:center;

}

.image-frame{
width:300px;
height:50px;
border-radius:50% / 60%;
background:white;
box-shadow:0 25px 60px rgba(0,0,0,0.15);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
animation:float 4s ease-in-out infinite;
}

.image-frame img{
width:100%;
height:95%;
object-fit:cover;
}

/* FLOAT ANIMATION */

@keyframes float{

0%{transform:translateY(0px);}
50%{transform:translateY(-15px);}
100%{transform:translateY(0px);}

}

/* RIGHT STATS */

.steps-right{
padding-left:40px;
}

.stat{
margin-bottom:35px;
}

.stat h3{
font-size:30px;
font-weight:700;
color:#333;
}

.stat p{
color:#777;
font-size:14px;
}

/* RESPONSIVE */

@media(max-width:900px){

.steps-grid{
grid-template-columns:1fr;
text-align:center;
}

.steps-right{
padding-left:0;
}

.step{
justify-content:center;
}

}