.services-1 {
    .item {
        position: relative;

        img {
            border-radius: 12px;
        }

        .text-container {
            text-align: center;
            position: absolute;
            bottom: -25px;
            width: 85%;
            color: rgb(37, 37, 37);
            background-color: rgba(247, 247, 247, 0.85);
            padding: 24px 12px;
            border-radius: 12px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            backdrop-filter: blur(1px);
        }

        &:hover {
            .text-container {
                background-color: var(--accent-color);
                color: white;
            }
        }
    }
}

.services-2 {
    i {
        font-size: 40px;
    }

    .titled {
        margin-top: 16px;
    }

    .item>div {
        height: 100%;
        border-radius: 6px;
        color: var(--font-color);
        border-bottom: 3px solid var(--accent-color);
        background-color: white;
        -webkit-box-shadow: 0px 0px 13px 0px rgba(93, 93, 93, 0.21);
        -moz-box-shadow: 0px 0px 13px 0px rgba(93, 93, 93, 0.21);
        box-shadow: 0px 0px 13px 0px rgba(93, 93, 93, 0.21);

        i {
            background-color: var(--accent-color);
            padding: 26px;
            border-radius: 50%;
            color: white;
            width: 80px;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

    }

    .item:hover>div {
        color: var(--font-color-hover);
        background-color: var(--accent-color);

        i {
            aspect-ratio: 1/1;
            background-color: white;
            color: var(--accent-color);
        }
    }
}

.services-3 {
    .item>div {
        border-radius: 18px;
        -webkit-box-shadow: 0px 0px 18px -12px rgba(66, 68, 90, 1);
        -moz-box-shadow: 0px 0px 18px -12px rgba(66, 68, 90, 1);
        box-shadow: 0px 0px 18px -12px rgba(66, 68, 90, 1);

        img {
            border-radius: 12px;
        }
    }
}

.services-4 {
    .item img {
        border-start-end-radius: 12px;
        border-start-start-radius: 12px;
    }

    .item .text-container {
        width: 100%;
        border-end-end-radius: 12px;
        border-end-start-radius: 12px;
        background-color: #dedede;
    }
}