/* =========================
   HOW IT WORKS — CLEAN WHITE
========================= */

.how-works{
    background:#ffffff;              /* PURE WHITE PAGE */
    padding:110px 0 120px;
    text-align:center;
    font-family:'Poppins',sans-serif;
    position:relative;
}

/* TITLE */
.works-title{
    font-size:44px;
    font-weight:700;
    margin-bottom:90px;
    color:#2c2f43;
}

.works-title span{
    color:#f4a11b;
}

/* STEPS WRAPPER */
.works-steps{
    display:flex;
    justify-content:space-between;
    align-items:center;
    max-width:1150px;
    margin:auto;
    position:relative;
}

/* CONNECTION LINE */
.works-steps::before{
    content:"";
    position:absolute;
    top:50px;
    left:8%;
    right:8%;
    height:3px;
    background:#e5e7eb;
    z-index:0;
}

/* STEP ITEM */
.step{
    width:200px;
    position:relative;
    z-index:2;
}

/* CIRCLE ICON */
.circle{
    width:115px;
    height:115px;
    margin:auto;
    border-radius:50%;
    border:3px solid #f4a11b;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    position:relative;
    transition:.35s ease;
}

/* ICON */
.circle i{
    font-size:36px;
    color:#f4a11b;
}

/* NUMBER BADGE */
.step-number{
    position:absolute;
    top:-14px;
    left:50%;
    transform:translateX(-50%);
    width:34px;
    height:34px;
    background:#0f2f4a;
    color:#fff;
    font-size:14px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
}

/* TEXT */
.step h4{
    margin-top:22px;
    font-size:18px;
    font-weight:600;
    color:#2c2f43;
    line-height:1.4;
}

/* HOVER EFFECT (premium feel) */
.step:hover .circle{
    transform:translateY(-10px) scale(1.05);
    box-shadow:0 18px 40px rgba(0,0,0,.08);
    border-color:#f6a623;
}

.step:hover .circle i{
    color:#f6a623;
}


/* ================= MOBILE ================= */

@media(max-width:900px){

.works-title{
    font-size:32px;
    margin-bottom:60px;
}

.works-steps{
    flex-direction:column;
    gap:55px;
}

/* remove horizontal line */
.works-steps::before{
    display:none;
}

/* vertical line */
.step::before{
    content:"";
    position:absolute;
    top:-50px;
    left:50%;
    transform:translateX(-50%);
    width:3px;
    height:50px;
    background:#e5e7eb;
}

.step:first-child::before{
    display:none;
}

.step h4{
    font-size:17px;l
}

.circle{
    width:100px;
    height:100px;
}

.circle i{
    font-size:30px;
}

}