.services {
    margin: auto;
    height: 100%;
    width: 100%;
}

.service-item {
    width: 33%;
    background-color: white;
    padding: 100px 60px 20px 60px;
    justify-content: space-between;
    gap: 20px;
    position: relative;
    height: 80vh;
    transition: 0.7s;
    transition-timing-function: ease-in-out;
}

.service-item:first-child,
.service-item:nth-child(2) {
    border-right: 1px solid var(--list-grey-opacity-5);
}

.service-item picture {
    height: 50%;
    display: flex;
    width: auto;
    object-fit: contain;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: .5;
    -webkit-transition:-webkit-filter 0.7s ease-in-out;
    -webkit-transition: opacity 0.7s ease-in-out;
    margin: auto auto 0;
    will-change: transform;
    backface-visibility: hidden;
    transition: transform 1.7s cubic-bezier(0.22, 0.44, 0, 1);
}

.service-item picture img {
    max-height: 100%;
    max-width: 100%;
    margin: auto;
}

.service-item:hover picture {
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

.service-item:hover {
     background-color: var(--main-blue);
}

.service-item h2, h3 {
    padding-bottom: 10px;
}

.service-item h2 {
    font-family: Grifter;
    font-weight: 700;
    font-size: 1.5em;
    text-transform: uppercase;
    line-height: 130%;
    text-transform: uppercase;
    color: #333333;
    letter-spacing: 0.05em;
    transition: color 0.7s ease-in-out;
}

.service-item:hover h2 {
    color: white;
}

.service-item h3 {
    font-family: Avenir;
    font-weight: normal;
    font-size: 1.9vh;
    line-height: 150%;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    transition: opacity 0.7s ease-in-out;
    opacity: 0;
}

.service-item button {
    transition-property: box-shadow;
    transition: box-shadow 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    opacity: 0;
}

.service-item:hover h3, .service-item:hover button {
    opacity: 1
}

.service-item-info {
    height: 50%;
    justify-content: space-between;
}

@media only screen and (max-width: 1200px) {
    .services-section {
        display: block !important;
    }
    .form-service {
        width: 100%;
    }
    .service-item {
        height: 100% !important;
        width: 100%;
        background-color: var(--main-blue) !important;
        padding: 0 !important;
    }

    .service-item button {
        opacity: 1;
    }

    .service-item-info {
        justify-content: flex-end;
        display: flex;
        align-items: center;
        max-width: 50%;
        margin: 0 auto;
        row-gap: 1.5rem;
    }

    .service-item h2, .service-item h3 {
        color: var(--main-white) !important;
        opacity: 1 !important;
        width: 100%;
    }

    .service-item button {
        margin-right: auto;
    }

    .service-item picture {
        -webkit-filter: none !important;
        -moz-filter: none !important;
        -o-filter: none !important;
        -ms-filter: none !important;
        filter: none !important;
        opacity: 1;
    }
    .service-item.nested-parallax.down-scroll {
        background-color: var(--main-white) !important;
    }
}

@media only screen and (max-width: 480px) {
    .service-item-info {
        max-width: 80%;
        row-gap: 0.5em;
    }
}