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

.process-section{

    position: relative;

    padding: 120px 0;

    background: #F8FAFC;

    overflow: hidden;

}

.process-grid{

    position: relative;

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 35px;

    margin-top: 80px;

}

.process-grid::before{

    content:"";

    position:absolute;

    top:65px;

    left:8%;

    width:84%;

    height:3px;

    background:linear-gradient(
        90deg,
        #1D4ED8,
        #00C2FF
    );

    z-index:0;

}

.process-card{

    position:relative;

    background:#FFFFFF;

    padding:45px 30px;

    border-radius:24px;

    text-align:center;

    box-shadow:
    0 20px 45px rgba(15,23,42,.08);

    transition:.4s ease;

    z-index:2;

}

.process-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 30px 60px rgba(0,194,255,.15);

}

.process-number{

    position:absolute;

    top:-18px;

    right:20px;

    font-size:1rem;

    font-weight:700;

    color:#1D4ED8;

    background:#EAF4FF;

    padding:8px 16px;

    border-radius:30px;

}

.process-icon{

    width:90px;

    height:90px;

    margin:0 auto 30px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #1D4ED8,
        #00C2FF
    );

    color:#fff;

    font-size:2rem;

    transition:.4s ease;

}

.process-card:hover .process-icon{

    transform:rotateY(180deg) scale(1.08);

}


.process-card h3{

    color:#0B132B;

    font-size:1.5rem;

    margin-bottom:18px;

}

.process-card p{

    color:#64748B;

    line-height:1.8;

}

.process-section::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    top:-150px;

    right:-150px;

    border-radius:50%;

    background:rgba(0,194,255,.08);

    filter:blur(90px);

}

.process-section::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    bottom:-120px;

    left:-120px;

    border-radius:50%;

    background:rgba(29,78,216,.08);

    filter:blur(90px);

}

@media(max-width:1200px){

    .process-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .process-grid::before{

        display:none;

    }

}

@media(max-width:768px){

    .process-section{

        padding:80px 0;

    }

    .process-grid{

        grid-template-columns:1fr;

    }

}