/*=========================================
    SERVICES
==========================================*/

#services{
    padding:100px 0;
    background:#faf8f8;
}

/*==============================
    TITULO
===============================*/

.services-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:60px;
}

.services-header span{
    display:block;
    color:#B8902E;
    text-transform:uppercase;
    letter-spacing:3px;
    font-size:13px;
    font-weight:600;
    margin-bottom:12px;
}

.services-header h2{
    margin:0;
    font-family:'Playfair Display', serif;
    font-size:48px;
    font-weight:700;
    color:#222;
}

.services-link{
    color:#B8902E;
    text-decoration:none;
    text-transform:uppercase;
    font-weight:600;
    font-size:13px;
    transition:.35s;
}

.services-link:hover{
    color:#000;
    text-decoration:none;
}

.services-link i{
    margin-left:6px;
}

/*==============================
    TARJETAS
===============================*/

.service-card{
    background:#FFF;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.35s;
    margin-bottom:35px;
    cursor:pointer;
    overflow:hidden;
    position:relative;
    height:100%;
}

.service-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(0,0,0,.15);
}

/* Imagen */

.service-image{
    position:relative;
    
}

.service-image img{
    width:100%;
    height:230px;
    object-fit:cover;
    transition:.5s;
}

.service-card:hover img{
    transform:scale(1.08);
}

/* Icono */

.service-icon{
    width:70px;
    height:70px;
    background:#0F0F0F;
    border:3px solid #D4AF37;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    position:absolute;
    left:5px;
    bottom:-35px;
    z-index:10;
    transition:.35s;
}

.service-icon i{
    color:#D4AF37;
    font-size:28px;
}

.service-card:hover .service-icon{
    transform:scale(1.1);
}

/* Contenido */

.service-content{
    padding:55px 15px 25px 3px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.service-content h3{
    margin:0 0 15px;
    color:#222;
    font-size:24px;
    font-weight:700;
}

.service-content p{
    color:#666;
    line-height:28px;
    min-height:80px;
    flex-grow:1;
}

.service-content span{
    color:#B8902E;
    font-weight:600;
    display:inline-block;
    margin-top:15px;
    transition:.3s;
}

.service-content span i{
    margin-left:6px;
    transition:.3s;
}

.service-card:hover span i{
    transform:translateX(6px);
}

.service-card::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:4px;
    background:#D4AF37;
    transition:.35s;
}

.service-card:hover::after{
    width:100%;
}

/*==============================
    PANEL
===============================*/

#serviceDetail{
    display:none;
    background:#FFF;
    border-radius:12px;
    box-shadow:0 20px 45px rgba(0,0,0,.12);
    margin-top:20px;
    padding:45px;
}

#serviceDetail h3{
    margin-top:0;
    color:#222;
    font-size:34px;
    font-family:'Playfair Display', serif;
}

#serviceDetail p{
    color:#666;
    line-height:30px;
}

/*==============================
    PRODUCTOS
===============================*/

.products-gallery{
    margin-top:35px;
}

.products-gallery .col-xs-6,
.products-gallery .col-sm-4,
.products-gallery .col-md-3{
    margin-bottom:30px;
}

.product-item{
    text-align:center;
}

.product-item img{
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:10px;
    transition:.35s;
}

.product-item:hover img{
    transform:scale(1.05);
}

.product-item h5{
    margin-top:15px;
    color:#222;
    font-size:18px;
    font-weight:600;
}

/*==============================
    BOTONES
===============================*/

.service-buttons{
    margin-top:35px;
}

.btn-whatsapp{
    display:inline-block;
    background:#D4AF37;
    color:#000;
    padding:14px 30px;
    border-radius:5px;
    text-decoration:none;
    font-weight:600;
    margin-right:15px;
    transition:.35s;
}

.btn-whatsapp:hover{
    background:#B8902E;
    color:#FFF;
    text-decoration:none;
}

.btn-close-detail{
    display:inline-block;
    background:#FFF;
    border:2px solid #DDD;
    padding:14px 30px;
    border-radius:5px;
    cursor:pointer;
    transition:.35s;
}

.btn-close-detail:hover{
    background:#222;
    color:#FFF;
}

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

@media(max-width:992px){

    .services-header{
        display:block;
        text-align:center;
    }

    .services-link{
        display:inline-block;
        margin-top:20px;
    }

    .service-content{
        text-align:center;
        align-items:center;
    }

    .service-icon{
        left:50%;
        transform:translateX(-50%);
    }

    .service-card:hover .service-icon{
        transform:translateX(-50%) scale(1.08);
    }

}

@media(max-width:768px){

    #services{
        padding:70px 0;
    }

    .services-header h2{
        font-size:36px;
    }

    .service-image img{
        height:180px;
    }

    #serviceDetail{
        padding:25px;
    }

    .service-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    .btn-whatsapp,
    .btn-close-detail {
        display: block;
        width: 100%;
        max-width: 280px;
        text-align: center;
        margin-right: 0 !important;
        margin-left: 0 !important;
        box-sizing: border-box;
    }

}

@media(max-width:480px){

    .product-item img{
        height:140px;
    }

}