/*=========================================================
    HOW IT WORKS
=========================================================*/

.process{

    padding:100px 0;

    background:#F8FAFC;

}

.process-header{

    text-align:center;

    margin-bottom:70px;

}

.process-header h2{

    margin:15px 0;

}

.process-header p{

    max-width:700px;

    margin:auto;

}

.process-grid{

    display:grid;

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

    gap:35px;

}

.process-card{

    position:relative;

    background:#ffffff;

    padding:40px 30px;

    border-radius:20px;

    text-align:center;

    border:1px solid var(--border);

    box-shadow:var(--shadow);

    transition:.3s;

}

.process-card:hover{

    transform:translateY(-10px);

}

.process-number{

    width:70px;

    height:70px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:var(--primary);

    color:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.6rem;

    font-weight:bold;

}

.process-card h3{

    margin-bottom:15px;

}

.process-card p{

    color:var(--text-light);

}

@media(max-width:992px){

.process-grid{

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

}

}

@media(max-width:768px){

.process-grid{

grid-template-columns:1fr;

}

}