/*======================================================
PROCESS
======================================================*/

.process{

    padding:120px 0;

    background:#fff;

}

.process-header{

    max-width:760px;

    margin-bottom:80px;

}

.process-header .section-kicker{

    display:inline-block;

    margin-bottom:18px;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--secondary);

}

.process-header h2{

    margin-bottom:24px;

    font-size:clamp(2.6rem,4vw,4rem);

    line-height:1.05;

    color:var(--dark);

}

.process-header p{

    max-width:700px;

    font-size:1.1rem;

    line-height:1.9;

    color:var(--gray-600);

}

.process-list{

    position:relative;

}

.process-list::before{

    content:"";

    position:absolute;

    left:38px;

    top:25px;

    bottom:25px;

    width:2px;

    background:linear-gradient(
        var(--secondary),
        rgba(226,106,44,.15)
    );

}

.step{

    position:relative;

    display:grid;

    grid-template-columns:80px 1fr;

    gap:40px;

    align-items:flex-start;

    margin-bottom:55px;

}

.step:last-child{

    margin-bottom:0;

}

.step-number{

    width:76px;

    height:76px;

    border-radius:50%;

    background:var(--secondary);

    color:#fff;

    font-size:1.45rem;

    font-weight:800;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 14px 35px rgba(226,106,44,.28);

    position:relative;

    z-index:2;

}

.step-content{

    background:#fff;

    border:1px solid var(--gray-200);

    border-radius:20px;

    padding:34px 38px;

    transition:.35s;

}

.step-content:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-md);

    border-color:rgba(18,53,90,.15);

}

.step-content h3{

    margin-bottom:12px;

    color:var(--primary);

    font-size:1.45rem;

}

.step-content p{

    margin:0;

    line-height:1.85;

    color:var(--gray-600);

}

@media(max-width:768px){

    .process{

        padding:80px 0;

    }

    .process-header{

        margin-bottom:50px;

    }

    .process-list::before{

        left:26px;

    }

    .step{

        grid-template-columns:55px 1fr;

        gap:20px;

    }

    .step-number{

        width:52px;

        height:52px;

        font-size:1rem;

    }

    .step-content{

        padding:24px;

    }

}