/* =====================================================
   J & C SOLUCIONES
   PORTAFOLIO
===================================================== */

.portfolio-tag{

    display:inline-block;

    padding:7px 16px;

    border-radius:30px;

    background:#eef5fb;

    color:#0b5fa5;

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.portfolio-heading{

    font-size:42px;

    margin-bottom:20px;

}

.portfolio-intro{

    max-width:760px;

    margin:auto;

    color:#666;

    line-height:1.9;

}

.portfolio-categories{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:10px;

    margin:45px 0 80px;

}

.portfolio-categories a{

    display:inline-block;

    padding:10px 18px;

    border:1px solid #dfe4e8;

    border-radius:30px;

    color:#555;

    text-decoration:none;

    font-size:14px;

    transition:.3s ease;

}

.portfolio-categories a:hover{

    background:#0b5fa5;

    border-color:#0b5fa5;

    color:#fff;

}

.portfolio-category-section{

    margin-bottom:100px;

    scroll-margin-top:40px;

}

.portfolio-category-heading{

    margin-bottom:35px;

    padding-left:22px;

    border-left:4px solid #0b5fa5;

}

.portfolio-category-heading > span{

    color:#0b5fa5;

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

}

.portfolio-category-heading h3{

    font-size:30px;

    margin:8px 0 10px;

}

.portfolio-category-heading p{

    max-width:700px;

    color:#666;

    line-height:1.8;

}

.portfolio-card{

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:16px;

    overflow:hidden;

    margin-bottom:35px;

    box-shadow:0 10px 28px rgba(0,0,0,.07);

    transition:.35s ease;

    height:100%;

}

.portfolio-card:hover{

    transform:translateY(-7px);

    box-shadow:0 20px 42px rgba(0,0,0,.12);

}

.portfolio-image{

    height:300px;

    overflow:hidden;

    background:#f4f5f6;

}

.portfolio-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.45s ease;

}

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

    transform:scale(1.04);

}

.portfolio-content{

    padding:27px;

}

.portfolio-type{

    display:inline-block;

    margin-bottom:12px;

    color:#0b5fa5;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1.5px;

}

.portfolio-content h3{

    margin-bottom:12px;

    font-size:24px;

}

.portfolio-content p{

    min-height:75px;

    margin-bottom:18px;

    color:#666;

    font-size:15px;

    line-height:1.8;

}

.portfolio-location{

    display:block;

    padding-top:15px;

    border-top:1px solid #ededed;

    color:#777;

    font-size:13px;

}

.portfolio-cta{

    margin:20px 0 80px;

    padding:55px 30px;

    text-align:center;

    background:#f5f7f9;

    border-radius:18px;

}

.portfolio-cta > span{

    color:#0b5fa5;

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

}

.portfolio-cta h2{

    margin:15px 0;

}

.portfolio-cta p{

    max-width:650px;

    margin:0 auto 28px;

    color:#666;

}

@media(max-width:767px){

    .portfolio-heading{

        font-size:32px;

    }

    .portfolio-categories{

        margin-bottom:55px;

    }

    .portfolio-categories a{

        width:100%;

    }

    .portfolio-category-section{

        margin-bottom:70px;

    }

    .portfolio-image{

        height:250px;

    }

}