/* how it works */
.how-works{
    padding:100px 0;
}

.section-header{
    text-align:center;
    margin-bottom:70px;
}

.section-header h2{
    font-size:3rem;
    color:#fff;
}

.section-header p{
    color:#999;
}

.timeline{
    max-width:900px;
    margin:auto;
    position:relative;
}

.timeline::before{
    content:"";
    position:absolute;
    left:40px;
    top:0;
    width:2px;
    height:100%;
    background:rgba(224,192,122,.4);
}

.timeline-item{
    display:flex;
    align-items:flex-start;
    gap:40px;
    margin-bottom:60px;
}

.timeline-number{
    min-width:80px;
    height:80px;
    background:#111;
    border:2px solid #e0c07a;
    color:#e0c07a;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1.8rem;
    font-weight:700;
    z-index:2;
}

.timeline-content{
    background:#111;
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    padding:30px;
    flex:1;
    transition:.3s;
}

.timeline-content:hover{
    transform:translateY(-5px);
    border-color:#e0c07a;
}

.timeline-content h3{
    color:#fff;
    margin-bottom:15px;
}

.timeline-content p{
    color:#999;
    line-height:1.8;
}