.services {

    padding: 20px 0;

}

.services h2 {

    font-size: 42px;

    margin-bottom: 20px;

}

.services-intro {

    max-width: 700px;

    opacity: .75;

    margin-bottom: 60px;

}

.services-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 24px;

}

.service-card {

    border: 1px solid rgba(255, 255, 255, 0.05);

    border-radius: 16px;

    padding: 32px;

    background: #111;

    transition: all .3s ease;

}

.service-card:hover {

    border-color: #3CCB7F;

    box-shadow: 0 0 20px rgba(60, 203, 127, .25);

    transform: translateY(-4px);

}

.service-number {

    display: block;

    color: #3CCB7F;

    font-size: 14px;

    margin-bottom: 10px;

}

.service-card h3 {

    font-size: 22px;

    margin-bottom: 10px;

}

.service-card p {

    opacity: .7;

}

.services-note {

    margin-top: 40px;

    opacity: .6;

}

@media (min-width:768px) {

    .services-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media (min-width:1024px) {

    .services-grid {

        grid-template-columns: repeat(4, 1fr);

    }

}