@media(max-width:500px){


    .services-section {
    display:flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0px 30px 0px;
    gap: 20px;
    flex-wrap: wrap;
    background: #f1f4fa;
    /* border: 1px solid red; */
}
    .service-card {
    width: 90%;
    background: #fff;
    padding: 20px 15px;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
    transition: 0.3s ease;
    text-align: left;
    /* border: 1px solid red; */
}

.service-img {
    width: 100%;
    height: 200px;
    border-radius: 12px;
    position:relative;
    overflow:hidden;
    /* border: 1px solid red; */
   
} 



  .service-img .text{
    position:absolute;                           
    width: 100%;
    height: 100%;
    background:rgba(0, 0, 0, 0.377);
    text-align:center;
     transition:all 0.5s;
     top:0;
     left:-100%;
     display: flex;
     align-items: center;
     justify-content: center;
     /* border:1px solid red; */
     }

}