/* ==========================================

   HOW IT WORKS

========================================== */



.how-page {

    max-width: 1100px;

    margin: 60px auto;

    padding: 40px;

}





/* HEADER */



.how-header {

    text-align: center;

    margin-bottom: 60px;

}



    .how-header i {

        font-size: 60px;

        color: #FF7A00;

        margin-bottom: 20px;

    }



    .how-header h1 {

        color: #0d6efd;

        font-size: 42px;

        margin-bottom: 15px;

    }



    .how-header p {

        color: #666;

        font-size: 20px;

        max-width: 750px;

        margin: auto;

    }





/* TIMELINE */



.how-timeline {

    position: relative;

    margin: 50px 0;

}



    .how-timeline::before {

        content: "";

        position: absolute;

        left: 35px;

        top: 20px;

        bottom: 20px;

        width: 4px;

        background: #0d6efd;

        border-radius: 5px;

    }





.how-step {

    display: flex;

    gap: 30px;

    margin-bottom: 45px;

    position: relative;

}





.step-icon {

    width: 70px;

    height: 70px;

    min-width: 70px;

    border-radius: 50%;

    background: #ffffff;

    border: 4px solid #0d6efd;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 2;

    box-shadow: 0 6px 20px rgba(0,0,0,.10);

}





    .step-icon i {

        color: #FF7A00;

        font-size: 28px;

    }





.step-content {

    flex: 1;

    background: #fff;

    padding: 25px;

    border-radius: 16px;

    box-shadow: 0 10px 25px rgba(0,0,0,.08);

}





    .step-content h2 {

        color: #0d6efd;

        margin-bottom: 12px;

    }





    .step-content p {

        color: #555;

        line-height: 1.7;

    }





/* BENEFITS */



.benefits {

    margin-top: 70px;

}



    .benefits h2 {

        text-align: center;

        color: #0d6efd;

        margin-bottom: 35px;

    }





.benefit-grid {

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 25px;

}





.benefit-card {

    background: white;

    border-radius: 18px;

    padding: 30px;

    text-align: center;

    box-shadow: 0 10px 25px rgba(0,0,0,.08);

    transition: .25s;

}





    .benefit-card:hover {

        transform: translateY(-6px);

    }





    .benefit-card i {

        font-size: 42px;

        color: #FF7A00;

        margin-bottom: 18px;

    }





    .benefit-card h3 {

        color: #0d6efd;

        margin-bottom: 10px;

    }





    .benefit-card p {

        color: #666;

        line-height: 1.6;

    }





/* CTA */



.how-cta {

    margin-top: 70px;

    text-align: center;

    background: linear-gradient(135deg,#0d6efd,#2EA3F2);

    color: white;

    padding: 50px;

    border-radius: 20px;

}





    .how-cta h2 {

        margin-bottom: 15px;

    }





    .how-cta p {

        margin-bottom: 30px;

        font-size: 18px;

    }





.cta-buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

}





/* RESPONSIVE */



@media (max-width:900px) {



    .benefit-grid {

        grid-template-columns: repeat(2,1fr);

    }

}





@media (max-width:768px) {



    .how-page {

        padding: 20px;

    }



    .how-header h1 {

        font-size: 32px;

    }



    .how-header p {

        font-size: 17px;

    }



    .how-timeline::before {

        left: 24px;

    }



    .step-icon {

        width: 50px;

        height: 50px;

        min-width: 50px;

    }



        .step-icon i {

            font-size: 22px;

        }



    .how-step {

        gap: 18px;

    }



    .benefit-grid {

        grid-template-columns: 1fr;

    }



    .cta-buttons {

        flex-direction: column;

        align-items: center;

    }

}