.process{

    background:#111;

    padding:120px 0;

}

.container{

    max-width:1400px;

    margin:auto;

    padding:0 40px;

}

.process-tag{

    color:#D4AF37;

    letter-spacing:4px;

    font-size:14px;

    font-weight:600;

}

.process h2{

    color:white;

    font-size:52px;

    margin:20px 0;

    font-weight:800;

}

.process p{

    color:#AFAFAF;

    font-size:18px;

    max-width:620px;

    line-height:1.8;

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

.timeline{

    margin-top:90px;

    position:relative;

}

.timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    bottom:0;

    width:2px;

    background:rgba(212,175,55,.25);

    transform:translateX(-50%);

}

.timeline-item{

    width:50%;

    position:relative;

    padding-bottom:80px;

}

.timeline-item.left{

    padding-right:70px;

}
.timeline-item.right{

    margin-left:50%;

    padding-left:70px;

}

.timeline-card{

    background:#1b1b1b;

    border-radius:24px;

    padding:35px;

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

    transition:.35s;

    position:relative;

}
.timeline-item.left .timeline-card::after{

    content:"";

    position:absolute;

    top:60px;

    right:-70px;

    width:70px;

    height:2px;

    background:#D4AF37;

}
.timeline-item.right .timeline-card::before{

    content:"";

    position:absolute;

    top:60px;

    left:-70px;

    width:70px;

    height:2px;

    background:#D4AF37;

}

.timeline-card:hover{

    transform:translateY(-8px);

    border-color:#D4AF37;

    box-shadow:0 20px 50px rgba(0,0,0,.45);

}

.timeline-number{

    color:#D4AF37;

    font-size:15px;

    letter-spacing:4px;

    font-weight:700;

    margin-bottom:15px;

}

.timeline-icon{

    width:72px;

    height:72px;

    border-radius:50%;

    background:#262626;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#D4AF37;

    font-size:34px;

    margin-bottom:25px;

    box-shadow:0 0 25px rgba(212,175,55,.12);

}

.timeline-card h3{

    color:white;

    margin-bottom:18px;

    font-size:28px;

}

.timeline-card p{

    color:#bcbcbc;

    line-height:1.8;

}

@media (max-width: 992px) {

    .process {
        padding: 80px 0;
    }

    .container {
        padding: 0 24px;
    }

    .process h2 {
        font-size: 38px;
    }

    .process p {
        font-size: 16px;
    }

    .timeline {
        margin-top: 60px;
    }
}

@media (max-width: 768px) {

    .process {
        padding: 60px 0;
    }

    .process h2 {
        font-size: 32px;
    }

    .timeline::before {
        left: 18px;
        transform: none;
    }

    .timeline-item,
    .timeline-item.left,
    .timeline-item.right {
        width: 100%;
        margin-left: 0;
        padding-left: 52px;
        padding-right: 0;
        padding-bottom: 40px;
    }

    .timeline-item.left {
        padding-right: 0;
    }

    .timeline-item.left .timeline-card::after,
    .timeline-item.right .timeline-card::before {
        display: none;
    }

    .timeline-card {
        padding: 24px 20px;
        border-radius: 18px;
    }

    .timeline-card h3 {
        font-size: 22px;
    }

    .timeline-icon {
        width: 58px;
        height: 58px;
        font-size: 28px;
        margin-bottom: 18px;
    }
}

@media (max-width: 480px) {

    .container {
        padding: 0 16px;
    }

    .process h2 {
        font-size: 28px;
    }

    .timeline-item,
    .timeline-item.left,
    .timeline-item.right {
        padding-left: 44px;
    }

    .timeline-card {
        padding: 20px 16px;
    }

    .timeline-card h3 {
        font-size: 20px;
    }

    .timeline-card p {
        font-size: 15px;
    }
}