.services {
    margin-top: 9.375rem;

    .container {
        width: min(1785px, calc(100% - 40px));

        .title-wrapper {
            text-align: center;
        }

        .services-wrapper {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 1.0625rem;

            li {
                display: grid;

                > * {
                    grid-area: 1/1/-1/-1;
                }

                .opacity {
                    background-color: #051D67;
                    width: 100%;
                    height: 100%;
                    opacity: 0.53;
                }

                .image-wrapper {
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .button {
                    position: relative;
                    z-index: 3;
                    align-self: center;
                    justify-self: center;

                    border: 1px solid #1AE184;
                    color: #fff;
                    font-size: 2.1875rem;
                    font-weight: 600;
                    border-radius: 50px;
                    /* display: flex; */
                    display: grid;
                    grid-template-columns: minmax(0, 1fr) minmax(0, 3.4375rem);
                    align-items: center;
                    width: 20.625rem;
                    padding: .9375rem 0;                        

                    .text {
                        text-align: center;
                        transition: opacity .5s;
                    }

                    .circle {
                        display: inline-block;
                        /* margin: 15px auto 15px 15px; */
                        width: 2.5rem;
                        height: 2.5rem;
                        background-color: #1AE184;
                        border-radius: 23px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        transition: opacity .5s;

                        svg {
                            width: 27px;
                        }

                        svg * {
                            fill: #051D67;
                        }
                    }

                    .circle-hover {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        opacity: 0;
                        position: absolute;
                        top: 50%;
                        left: 50%;

                        transform: translate(-150%, -50%);
                        transition: transform 0.4s ease;

                        width: 4.3125rem;
                        height: 4.3125rem;
                        border: 1px solid #1AE184;
                        border-radius: 100%;

                        .circle {
                            display: inline-block;
                            /* margin: 15px auto 15px 15px; */
                            width: 2.5rem;
                            height: 2.5rem;
                            background-color: #051D67;
                            border-radius: 23px;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            svg {
                                width: 27px;
                            }

                            svg * {
                                fill: #1AE184;
                            }
                        }
                    }
                }

                .button:hover {
                    border: none;
                }

                .button:hover .text,
                .button:hover > .circle {
                    opacity: 0;
                }

                .button:hover .circle-hover {
                    opacity: 1;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }
}

.page-id-163 .services {
    margin-top: 7.5rem;
}

@media (max-width: 1023px) {
    .services {
        .container {
            .services-wrapper {
                grid-template-columns: minmax(0, 1fr);
            }
        }
    }
}