.sf-how{
    padding:90px 0;
    background:#f8fafc;
}

.sf-step-card{

    position:relative;

    background:#ffffff;

    border-radius:24px;

    padding:45px 30px;

    text-align:center;

    border:1px solid #eef2f5;

    transition:all .35s ease;

    overflow:hidden;

    height:100%;
}

.sf-step-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.sf-step-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        #198754,
        #36c275
    );

    transform:scaleX(0);

    transition:.35s;

}

.sf-step-card:hover::before{

    transform:scaleX(1);

}

.sf-step-number{

    position:absolute;

    top:18px;

    right:18px;

    width:42px;

    height:42px;

    border-radius:50%;

    background:#198754;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:18px;

}

.sf-step-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    background:#eafaf1;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

}

.sf-step-icon i{

    font-size:38px;

    color:#198754;

}

.sf-step-card h4{

    font-weight:700;

    margin-bottom:18px;

    color:#222;

}

.sf-step-card p{

    color:#6c757d;

    line-height:1.8;

    margin-bottom:0;

}

@media(max-width:991px){

.sf-how{

padding:70px 0;

}

}

@media(max-width:768px){

.sf-step-card{

padding:35px 24px;

}

.sf-step-icon{

width:75px;

height:75px;

}

.sf-step-icon i{

font-size:30px;

}

}