/*=========================
        SERVICIOS
=========================*/

.services-page{

    padding:100px 0;

    background:#fff;

}

.services-page-grid{

    display:grid;

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

    gap:20px;

}

.services-page-card{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    cursor:pointer;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.services-page-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.18);

}

.services-page-card img{

    width:100%;
    height:340px;
    object-fit:cover;
    transition:.4s;

}

.services-page-card:hover img{

    transform:scale(1.08);

}

.services-page-overlay{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    padding:25px 20px;

    background:linear-gradient(to top,
    rgba(0,0,0,.80),
    rgba(0,0,0,.15),
    transparent);

}

.services-page-overlay h3{

    color:#fff;

    font-size:20px;

    font-weight:700;

    line-height:1.3;

    margin:0;

}
.services-page-overlay h3::after{

    content:"";

    display:block;

    width:0;

    height:3px;

    background:#d71920;

    margin-top:10px;

    transition:.35s;

}

.services-page-card:hover .services-page-overlay h3::after{

    width:70px;

}
@media(max-width:768px){

.services-page-grid{

    grid-template-columns:1fr;

}

.services-page-card img{

    height:280px;

}

}