﻿.services-banner {
    font-family: Roboto;
    color: #242424;
    z-index: 1;
}

    .services-banner h2 {
        font-weight: bold;
        font-size: 36px;
        line-height: 43px;
        margin: 0;
        padding-bottom: 5px;
    }

    .services-banner p {
        font-size: 20px;
        line-height: 26px;
        padding-bottom: 40px;
        font-weight: 500;
    }

    .services-banner .service {
        height: 120px;
        font-family: Roboto;
        display: grid;
        grid-template-columns: 75px 1fr;
        column-gap: 32px;
        grid-template-rows: 1fr;
        align-items: center;
        color: #242424;
        text-decoration: none;
        cursor: pointer;
    }

        .services-banner .service .icon {
            justify-self: center;
            height: 68px;
        }

        .services-banner .service h3 {
            font-size: 24px;
            line-height: 32px;
            font-weight: 500;
            margin: 0;
            margin-bottom: 5px;
            color: #242424;
            text-transform: none;
        }

        .services-banner .service:hover h3 {
            color: #c30000;
        }

        .services-banner .service p.link {
            font-size: 18px;
            line-height: 24px;
            font-weight: bold;
            padding-bottom: 0;
            color: #242424;
            text-decoration: none;
        }

        .services-banner .service:hover p.link {
            color: #242424;
            text-decoration: none;
        }

        .services-banner .service p.link svg {
            stroke: #242424;
            stroke-width: 7px;
        }

        .services-banner .service p.link:hover svg {
            transform: translateX(5px) !important;
        }


@media screen and (min-width: 768px) {
    .services-banner {
        padding-left: 3.148%;
    }

        .services-banner h2 {
            padding-top: 20px;
        }

        .services-banner .services-wrapper {
            display: flex;
            flex-wrap: wrap;
        }

        .services-banner .service {
            width: 50%;
            padding-left: 14px;
        }

            .services-banner .service .text p.link {
                padding-bottom: 0;
            }
}
