/*
=========================================
PROCESO
=========================================
*/

.process-section{

    position:relative;

    padding:140px 0;

    background:#FFF;

    overflow:hidden;

}

/*=========================================
WRAPPER
=========================================*/

.process-wrapper{

    position:relative;

    display:grid;

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

    gap:40px;

    margin-top:90px;

}

/*=========================================
LINEA
=========================================*/

/*=========================================
LINEA
=========================================*/

.process-line{

    position:absolute;

    top:58px;

    left:8%;

    width:84%;

    height:4px;

    background:#ECEFF5;

    border-radius:30px;

    overflow:hidden;

    z-index:1;

}

.process-line-fill{

    position:absolute;

    left:0;

    top:0;

    width:0;

    height:100%;

    border-radius:30px;

    background:linear-gradient(

        90deg,

        #7B4DFF,

        #9E78FF

    );

    transition:2s ease;

}

.process-line.animate .process-line-fill{

    width:100%;

}

/*=========================================
ITEM
=========================================*/

.process-item{

    position:relative;

    text-align:center;

    z-index:2;

    transition:.35s ease;

}

.process-item:hover{

    transform:translateY(-8px);

}

/*=========================================
NUMERO
=========================================*/

.process-number{

    position:absolute;

    left:50%;

    top:-30px;

    transform:translateX(-50%);

    font-family:"Poppins",sans-serif;

    font-size:120px;

    font-weight:800;

    color:#EEF2F7;

    line-height:1;

    z-index:-1;

    user-select:none;

}

/*=========================================
ICONO
=========================================*/

.process-icon{

    width:110px;

    height:110px;

    border-radius:50%;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#FFF;

    border:8px solid #F8F9FC;

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

    transition:.35s;

}

.process-item:hover .process-icon{

    background:var(--secondary);

    transform:scale(1.05);

}

.process-icon i{

    font-size:34px;

    color:var(--secondary);

    transition:.35s;

}

.process-item:hover .process-icon i{

    color:#FFF;

}

/*=========================================
TEXTOS
=========================================*/

.process-item h3{

    margin-top:34px;

    margin-bottom:18px;

    font-size:28px;

    color:var(--primary);

}

.process-item p{

    color:var(--gray);

    line-height:1.9;

    max-width:260px;

    margin:auto;

}

/*=========================================
ANIMACION
=========================================*/

/*=========================================
ITEM ANIMATION
=========================================*/

.process-item{

    opacity:0;

    transform:translateY(50px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.process-item.show{

    opacity:1;

    transform:translateY(0);

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1200px){

    .process-wrapper{

        gap:25px;

    }

}

@media(max-width:991px){

    .process-wrapper{

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

        row-gap:70px;

    }

    .process-line{

        display:none;

    }

}

@media(max-width:767px){

    .process-section{

        padding:90px 0;

    }

    .process-wrapper{

        grid-template-columns:1fr;

    }

    .process-number{

        font-size:90px;

    }

    .process-icon{

        width:90px;

        height:90px;

    }

    .process-icon i{

        font-size:28px;

    }

    .process-item h3{

        font-size:24px;

    }

}