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

.process{

    padding:6rem 0;

    background:var(--color-surface);

}

.process__timeline{

    position:relative;

    margin-top:4rem;

}

.process__timeline::before{

    content:"";

    position:absolute;

    left:32px;

    top:0;

    bottom:0;

    width:2px;

    background:var(--color-border);

}

.process-step{

    display:grid;

    grid-template-columns:80px 1fr;

    gap:2rem;

    margin-bottom:3rem;

    position:relative;

}

.process-step:last-child{

    margin-bottom:0;

}

.process-step__number{

    width:64px;

    height:64px;

    border-radius:50%;

    background:var(--color-primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:1.1rem;

    position:relative;

    z-index:2;

}

.process-step__content{

    padding-bottom:1rem;

}

.process-step__content h3{

    margin-bottom:.75rem;

}

.process-step__content p{

    color:var(--color-text-muted);

    line-height:1.8;

}

.process__summary{

    display:grid;

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

    gap:2rem;

    margin-top:5rem;

}

.process__summary .metric{

    padding:2rem;

    text-align:center;

    background:var(--color-background);

    border:1px solid var(--color-border);

    border-radius:20px;

}

.process__summary h3{

    margin-bottom:.75rem;

}

.process__summary p{

    color:var(--color-text-muted);

}

@media(max-width:768px){

    .process__timeline::before{

        left:28px;

    }

    .process-step{

        grid-template-columns:64px 1fr;

        gap:1.5rem;

    }

    .process-step__number{

        width:56px;

        height:56px;

        font-size:1rem;

    }

    .process__summary{

        grid-template-columns:1fr;

    }

}