/*==================================================
Zhitu Network
Process.css
Version 2.0
==================================================*/

.process{
    position:relative;
    background:linear-gradient(180deg,#07142b 0%,#081a32 100%);
    overflow:hidden;
}

.process::before{
    content:"";
    position:absolute;
    top:-180px;
    left:50%;
    transform:translateX(-50%);
    width:600px;
    height:600px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(22,119,255,.10),
        transparent 72%);
    filter:blur(20px);
    pointer-events:none;
}

.process-wrap{
    position:relative;
    z-index:2;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
}

.step{
    flex:1;
    position:relative;
    padding:36px 24px;
    text-align:center;
    border-radius:24px;
    background:linear-gradient(
        180deg,
        rgba(255,255,255,.07),
        rgba(255,255,255,.03)
    );
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    transition:.35s;
}

.step:hover{
    transform:translateY(-8px);
    border-color:rgba(22,119,255,.35);
    box-shadow:0 22px 60px rgba(0,0,0,.35);
}

.step span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:72px;
    height:72px;
    margin-bottom:24px;
    border-radius:50%;
    font-size:26px;
    font-weight:800;
    color:#fff;
    background:linear-gradient(
        135deg,
        #1677ff,
        #6b5cff
    );
    box-shadow:0 15px 35px rgba(22,119,255,.35);
}

.step h4{
    font-size:22px;
    color:#fff;
    margin-bottom:16px;
}

.step p{
    font-size:14px;
    line-height:1.9;
    color:#afc2e3;
}

.line{
    flex:0 0 60px;
    height:2px;
    margin-top:70px;
    background:linear-gradient(
        90deg,
        rgba(22,119,255,.15),
        rgba(22,119,255,.9),
        rgba(22,119,255,.15)
    );
    position:relative;
}

.line::after{
    content:"";
    position:absolute;
    right:-6px;
    top:50%;
    transform:translateY(-50%);
    width:10px;
    height:10px;
    border-radius:50%;
    background:#1677ff;
    box-shadow:0 0 18px rgba(22,119,255,.8);
}

/*==============================
TABLET
==============================*/

@media(max-width:1200px){

    .process-wrap{
        flex-wrap:wrap;
        justify-content:center;
    }

    .step{
        min-width:280px;
        max-width:320px;
    }

    .line{
        display:none;
    }

}

/*==============================
MOBILE
==============================*/

@media(max-width:768px){

    .process{
        padding:70px 0;
    }

    .process-wrap{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:18px;
    }

    .step{
        width:100%;
        max-width:340px;
        padding:30px 24px;
    }

    .step span{
        width:60px;
        height:60px;
        font-size:22px;
        margin-bottom:20px;
    }

    .step h4{
        font-size:20px;
    }

    .step p{
        font-size:14px;
    }

    .line{
        display:block;
        width:2px;
        height:46px;
        margin:0;
        background:linear-gradient(
            180deg,
            rgba(22,119,255,.15),
            rgba(22,119,255,.9),
            rgba(22,119,255,.15)
        );
    }

    .line::after{
        left:50%;
        right:auto;
        top:auto;
        bottom:-6px;
        transform:translateX(-50%);
    }

}