.services-container{
    display: grid;
    grid-template-columns: 1fr;
}

.service-card{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    text-decoration: none;
}


.service-card .content{
    grid-column: span 8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
}
.content .heading{
    display: flex;
    align-items: center;
}
.service-card .content h4{
    align-self: flex-start;
    font-size: 25px;
    font-weight: 500;
    color: #050505;
}
.service-card .content h2{
    margin-left: 60px;
    font-size: 25px;
    font-weight: 500;
    color: #050505;
}
.service-card .content p{
    line-height: 25px;
    margin-left: 93px;
    width: 80%;
}
.service-card .content ul {
    display: flex;
    list-style: none;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: 93px;
    width: 80%;
}
.service-card .content ul li{
    padding: 7px 14px;
    background-color: #323232;
  box-shadow: var(--svg-shadow);
    color: #fafafa;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
}
.service-card .img{
    grid-column: span 4;
}
.service-card img{
    width: 100%;
    height: 250px;
    object-position: center;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: var(--svg-shadow);
}


@media (max-width: 1000px) {
    .service-card .content{
       gap: 16px;
    }
    .service-card .content h2{
    margin-left: 40px;
}
.service-card .content p{
    margin-left: 77px;
    line-height: 20px;
}
.service-card .content ul {
    margin-left: 77px;
}
.service-card .content ul li{
    font-size: 10px;
}
}

@media (max-width: 900px) {
    .service-card{
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .service-card .content{
        grid-column: span 1;
        order: 2;
    }
    .service-card .img{
        grid-column: span 1;
        order: 1;
    }
    .service-card img{
        height: 300px;
    }
}

@media (max-width: 600px) {
    .service-card{
        gap: 20px;
    }
    .service-card .heading h4{
        display: none;
    }
    .service-card .content h2{
        margin-left: 0;
    }
    .service-card .content p{
        margin-left: 0;
        font-size: 15px;
        width: 100%;
    }
    .service-card .content ul{
        margin-left: 0;
    }
    .service-card .content ul li{
        font-size: 9px;
        padding: 5px 10px;
    }
    .service-card img{
        height: 240px;
    }
}