/* ===========================================================
   Process Section
=========================================================== */

.process{

    position:relative;
    z-index:1;

    min-height:80vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:140px 32px;

}

.process-container{

    width:min(1000px,100%);

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:28px;

}

.process-container > .trust-end{

    margin:-110px auto 48px;

}

.process-label{

    font-size:15px;

    letter-spacing:6px;

    opacity:.65;

}

.process-title{

    font-size:clamp(46px,6vw,72px);

    line-height:1.15;

    max-width:1200px;

}

/* ===========================================================
   Timeline
=========================================================== */

.process-timeline{

    width:100%;

    margin-top:90px;

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:30px;

}

.process-step{

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:22px;

    transition:transform .35s ease;

}

.process-step:hover{

    transform:translateY(-6px);

}

.step-circle{

    width:72px;

    height:72px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(255,255,255,.12);

    background:rgba(255,255,255,.03);

    font-size:22px;

    font-weight:700;

    color:rgba(255,255,255,.46);

}

.process-step h3{

    font-size:28px;

}

.process-step p{

    line-height:1.8;

    opacity:.7;

    max-width:240px;

}

.timeline-line{

    flex:1;

    height:1px;

    margin-top:36px;

    background:linear-gradient(

        to right,

        transparent,

        rgba(255,255,255,.16),

        transparent

    );

}

.process-quote{

    max-width:900px;

    font-size:clamp(46px,6vw,72px);

    line-height:1.15;

    font-weight:700;

    font-style:normal;

}

/* ===========================================================
   Mobile
=========================================================== */

@media (max-width:768px){

    .process{

        padding:90px 22px;

    }

    .process-container > .trust-end{

        margin-top:-57px;

        margin-bottom:24px;

    }

    .process-title{

        display:block;

        font-size:clamp(34px,8.5vw,40px);

        line-height:1.12;

        text-wrap:wrap;

    }

    .process-title > span{

        display:inline;

    }

    .process-timeline{

        flex-direction:column;

        align-items:center;

        gap:35px;

        margin-top:70px;

    }

    .timeline-line{

        width:1px;

        height:50px;

        margin:0;

        background:linear-gradient(

            to bottom,

            transparent,

            rgba(255,255,255,.16),

            transparent

        );

    }

}