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

.process{

    position:relative;
    padding:140px 0;
    background:#f8f6f2;

}

.process .section-header{

    max-width:760px;
    margin:auto;
    text-align:center;
    margin-bottom:90px;

}

.process .eyebrow{

    display:inline-block;
    margin-bottom:18px;

}

.process h2{

    margin-bottom:25px;

}

.process p{

    color:#666;
    line-height:1.8;

}

/*============================*/

.process-timeline{

    position:relative;

    display:grid;

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

    gap:35px;

}

/* línea */

.process-timeline::before{

    content:"";

    position:absolute;

    left:12%;

    right:12%;

    top:110px;

    height:2px;

    background:#e7dfd5;

    z-index:0;

}

/*============================*/

.process-card{

    position:relative;

    background:white;

    border-radius:24px;

    overflow:hidden;

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

    transition:.4s;

    z-index:2;

}

.process-card:hover{

    transform:translateY(-12px);

    box-shadow:0 35px 70px rgba(0,0,0,.12);

}

/*============================*/

.process-image{

    height:260px;

    overflow:hidden;

}

.process-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

.process-card:hover img{

    transform:scale(1.08);

}

/*============================*/

.process-content{

    padding:35px;

}

.number{

    width:54px;

    height:54px;

    border-radius:50%;

    background:#ff7a00;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    margin-bottom:20px;

}

.process-content h3{

    margin-bottom:15px;

    font-size:1.35rem;

}

.process-content p{

    color:#777;

    line-height:1.8;

}

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

/*---------------------------------------------------------
1200px
---------------------------------------------------------*/

@media (max-width:1200px){

    .process {
        padding:110px 0;
    }

    .process .section-header {
        margin-bottom:70px;
    }

    .process-timeline {
        grid-template-columns:repeat(2,1fr);
        gap:30px;
    }

    .process-timeline::before {
        display:none;
    }

}


/*---------------------------------------------------------
768px
---------------------------------------------------------*/

@media (max-width:768px){

    .process {
        padding:80px 0;
    }

    .process .section-header {
        max-width:100%;
        margin-bottom:50px;
    }

    .process-timeline {
        grid-template-columns:1fr;
        gap:28px;
    }

    .process-card {
        border-radius:20px;
    }

    .process-card:hover {
        transform:none;
    }

    .process-image {
        height:220px;
    }

    .process-content {
        padding:28px;
    }

    .number {
        width:48px;
        height:48px;
        margin-bottom:16px;
    }

    .process-content h3 {
        font-size:1.25rem;
    }

}


/*---------------------------------------------------------
480px
---------------------------------------------------------*/

@media (max-width:480px){

    .process {
        padding:65px 0;
    }

    .process .section-header {
        margin-bottom:40px;
    }

    .process-image {
        height:200px;
    }

    .process-content {
        padding:24px;
    }

    .process-content h3 {
        font-size:1.15rem;
        margin-bottom:12px;
    }

    .process-content p {
        font-size:.95rem;
        line-height:1.7;
    }

    .number {
        width:44px;
        height:44px;
        font-size:.9rem;
    }

}