.services {
    background: var(--light);
}

    .services h2 {
        color: var(--primary);
        font-weight: 700;
    }

.service-card {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    transition: .3s;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0,0,0,.08);
}

    .service-card i {
        font-size: 40px;
        color: var(--secondary);
        margin-bottom: 20px;
    }

    .service-card h4 {
        margin-bottom: 15px;
        font-weight: 600;
    }

    .service-card:hover {
        transform: translateY(-8px);
    }
@media (max-width: 767px) {

    .service-card {
        margin-bottom: 20px;
    }
}