/*==================================================
                SERVICE CARD
==================================================*/

.service-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    transition:.35s ease;

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

    height:100%;

}

.service-card:hover{

    transform:translateY(-12px);

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

}

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

#servicios{

    background: var(--color-secundario);

    padding: 90px 0!important;

}


/*==================================================
                HEADER
==================================================*/

#servicios .section-header h2{

    color:var(--color-primario)!important;

}

#servicios .section-header p{

    color:rgba(243,230,200,.85)!important;

}


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

.services-grid{

    display:grid;

    grid-template-columns:repeat(3,320px);

    justify-content:center;

    gap:35px;

    margin-top:70px;

}


.services-grid .service-card:nth-child(4),
.services-grid .service-card:nth-child(5){

    transform:translateX(160px);

}



@media(max-width:1024px){

    .services-grid{

        grid-template-columns:repeat(2,320px);

    }


    .services-grid .service-card:nth-child(4),
    .services-grid .service-card:nth-child(5){

        transform:none;

    }

}


@media(max-width:768px){

    .services-grid{

        grid-template-columns:minmax(280px,320px);

    }

}

/*==================================================
                IMAGEN
==================================================*/

.service-image{

    position:relative;

    height:270px;

    overflow:hidden;

}

.service-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s ease;

}

.service-card:hover .service-image img{

    transform:scale(1.08);

}

/*==================================================
                BODY
==================================================*/

.service-body{

    position:relative;

    text-align:center;

    padding:60px 28px 35px;

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

.service-icon{

    position:absolute;

    top:-40px;

    left:50%;

    transform:translateX(-50%);

    width:82px;

    height:82px;

    border-radius:50%;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 8px 25px rgba(0,0,0,.12);

}

.service-icon img{

    width:42px;

    height:42px;

    object-fit:contain;

    transition:.3s ease;

}

.service-body h3{

    font-size:24px;

    color:var(--color-secundario);

    margin-bottom:15px;

}

.service-body p{

    color:#666;

    line-height:1.8;

    font-size:15px;

}