.service-cards{
    margin-top: 1.8rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
    place-items: center;
    padding: .8rem;

    @media (min-width:768px){
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }


    .service-card-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .8rem;
        padding: .5rem;

        .card-img-container{
            width: 8rem;
            height: 8rem;
            padding: .3rem;
            background-color: white;
            border-radius: 1rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .service-card-footer{
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .5rem;
            justify-content: center;


            h3{
                color: #1a237e;
                font-size: 1.3rem;
                font-weight: 600;
                text-align: center;
                text-transform: capitalize;

                @media (max-width:640px) {
                    font-size: .9rem;
                    font-weight: 700;
                }
            }

            button{
                padding: .6rem 1rem;
                border-radius: .5rem;
                border: 1px solid transparent;
                background-color: #e4281d29;
                color: #e4281d;
                font-weight: 600;
                transition: all .3s ease-in-out;
                cursor: pointer;

                &:hover{
                    border: 1px solid #e4281d;
                }
            }
        }
    }
}