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

.process{

    max-width:1100px;
    margin:0 auto;
    padding:140px 20px;

}

.process-header{

    max-width:820px;
    margin:0 auto 90px;
    text-align:center;

}

.process-header h2{

    font-size:clamp(3rem,7vw,5rem);
    line-height:1.05;
    margin:20px 0;

}

.process-header h2 span{

    display:block;

    background:linear-gradient(
        90deg,
        var(--orange),
        #ffbf69,
        #ff8c42
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

.process-header p{

    max-width:720px;
    margin:auto;

    color:#d8d8d8;
    line-height:1.8;

}

/* ==========================
TIMELINE
========================== */

.timeline{

    position:relative;

}

.timeline::before{

    content:"";

    position:absolute;

    left:34px;

    top:0;

    bottom:0;

    width:2px;

    background:linear-gradient(
        to bottom,
        rgba(247,148,29,.15),
        rgba(247,148,29,.8),
        rgba(247,148,29,.15)
    );

}

.timeline-item{

    position:relative;

    display:grid;

    grid-template-columns:70px 1fr;

    gap:40px;

    margin-bottom:70px;

    align-items:flex-start;

}

.timeline-item:last-child{

    margin-bottom:0;

}

.timeline-number{

    width:70px;
    height:70px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--orange),
        #ffbf69
    );

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:1.3rem;
    font-weight:700;

    color:#fff;

    position:relative;
    z-index:2;

    box-shadow:0 0 35px rgba(247,148,29,.25);

}

.timeline-content{

    padding-bottom:15px;

    border-bottom:1px solid rgba(255,255,255,.08);

    transition:.35s;

}

.timeline-item:hover .timeline-content{

    border-color:rgba(247,148,29,.45);

    transform:translateX(12px);

}

.timeline-content h3{

    font-size:2rem;

    margin-bottom:15px;

}

.timeline-content p{

    max-width:650px;

    color:#d7d7d7;

    line-height:1.9;

}

@media(max-width:768px){

.timeline::before{

left:25px;

}

.timeline-item{

grid-template-columns:50px 1fr;

gap:25px;

}

.timeline-number{

width:50px;
height:50px;
font-size:1rem;

}

.timeline-content h3{

font-size:1.5rem;

}

}