/* ======================================================
   PROFESSIONAL SERVICE CARDS
====================================================== */


.services-section{

    padding:110px 0;

    background:#f5f7fa;

}




.services-grid{

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:30px;

}





.service-card{

    background:#fff;

    padding:35px;

    border-radius:28px;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:

    0 20px 50px rgba(0,0,0,.07);

    transition:.35s ease;

    position:relative;

    overflow:hidden;

}




.service-card::before{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    right:-40px;

    top:-40px;

    border-radius:50%;

    background:

    rgba(230,0,0,.08);

}





.service-card:hover{

    transform:

    translateY(-12px);

    box-shadow:

    0 35px 70px rgba(0,0,0,.15);

}





.service-icon{

    width:75px;

    height:75px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

    rgba(230,0,0,.1);

    color:

    var(--secondary);

    font-size:2rem;

    margin-bottom:25px;

}





.service-card h3{

    font-size:1.3rem;

    margin-bottom:15px;

}





.service-card p{

    color:

    var(--text-light);

    line-height:1.8;

}





.service-points{

    margin:25px 0;

}



.service-points li{

    display:flex;

    gap:10px;

    align-items:center;

    margin-bottom:10px;

    font-size:.9rem;

}





.service-points i{

    color:

    var(--secondary);

}





.service-link{

    font-weight:700;

    color:

    var(--primary);

}



.service-link:hover{

    color:

    var(--secondary);

}





.services-footer{

    margin-top:60px;

    text-align:center;

}





@media(max-width:992px){


.services-grid{

grid-template-columns:

repeat(2,1fr);

}


}



@media(max-width:600px){


.services-grid{

grid-template-columns:1fr;

}


.service-card{

padding:30px;

}


}