.services {
    display: flex;
    /* flex-wrap: wrap; */
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
    justify-content: center;
    padding-top: 2rem;
}

.service {
    background-color: whitesmoke;
    padding: 20px;
    border-radius: 2rem;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s, box-shadow 0.3s;
}

    .service.visible {
        transform: translateY(-10px);
        box-shadow: 10px 8px 20px rgba(0, 0, 0, 0.8); /* Blau im Hover-Effekt */
        cursor: pointer;
    }


    .service:hover {
        transform: translateY(-10px);
        box-shadow: 10px 8px 20px rgba(0, 0, 0, 0.8); /* Blau im Hover-Effekt */
        cursor: pointer;
    }




    .service img {
        margin-bottom: 15px;
        width: 75px;
    }

    .service a {
        text-decoration: none;
    }

    .service span {
        color: rgb(6, 87, 254)
    }

    .service:hover img {
        /*   align-self:end; */
    }

    .service h5 {
        margin-bottom: 15px;
        font-size: 1.25em;
        text-align: center;
        color: gray; /* Magenta für Unterüberschriften */
    }

    .service:hover h5 {
        color: black; /* Magenta für Unterüberschriften */
    }

    .service p {
        color: gray; /* Magenta für Unterüberschriften */
    }

    .service:hover p {
        color: black; /* Magenta für Unterüberschriften */
    }



    .service.red {
        border-color: #e00029;
        border-radius: 2rem;
    }

    .service.blue {
        border-color: #004a99;
        border-radius: 2rem;
    }

    .service.green {
        border-color: #54ab26;
        border-radius: 2rem;
    }

    .service.magenta {
        border-color: #e00070;
        border-radius: 2rem;
    }

    /*.service.visible {
    transform: translateY(-10px);
    box-shadow: 10px 8px 20px rgba(0, 0, 0, 0.8);*/ /* Blau im Hover-Effekt */
    /*cursor: pointer;
}*/



    .service.red:hover {
        box-shadow: 0 8px 20px rgba(224, 0, 41, 0.8);
    }

    .service.blue:hover {
        box-shadow: 0 8px 20px rgba(0, 74, 153, 0.8);
    }

    .service.green:hover {
        box-shadow: 0 8px 20px rgba(84, 171, 38, 0.8);
    }

    .service.magenta:hover {
        box-shadow: 0 8px 20px rgba(224, 0, 112, 0.8);
    }

@media (min-width: 800px) {





    .services {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service {
        flex: 1 1 45%;
        max-width: 45%;
    }

        .service:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 20px rgba(0, 79, 159, 0.3); /* Blau im Hover-Effekt */
            cursor: pointer;
        }

 
}