.ServiceListing {
    margin: 100px 0;

    @media (max-width: 991px) {
        margin: 70px 0;
    }

    @media (max-width: 767px) {
        margin: 50px 0;
    }

    .Header {
        margin-bottom: 50px;
        text-align: center;

        @media (max-width: 991px) {
            margin-bottom: 35px;
        }

        @media (max-width: 767px) {
            margin-bottom: 25px;
        }
    }

    ul {
        display: flex;
        align-items: center;
        gap: 24px;
        flex-flow: row wrap;

        @media (max-width: 991px) {
            gap: 20px;
        }

        @media (max-width: 767px) {
            gap: 16px;
        }

        li {
            padding: 40px;
            background-color: #FBF5E7;
            border-radius: 20px;
            width: calc(33.33% - 16px);

            @media (max-width: 991px) {
                width: calc(50% - 10px);
                padding: 30px;
            }

            @media (max-width: 767px) {
                width: 100%;
                padding: 24px;
                border-radius: 16px;
            }

            h3 {
                margin: 15px 0;
                font-size: 24px;
                font-weight: 500;

                @media (max-width: 991px) {
                    font-size: 22px;
                }

                @media (max-width: 767px) {
                    font-size: 20px;
                    margin: 12px 0;
                }
            }

            p {
                font-size: 18px;

                @media (max-width: 991px) {
                    font-size: 16px;
                }

                @media (max-width: 767px) {
                    font-size: 15px;
                }
            }

            i {
                font-size: 32px;
                background-color: var(--white-color);
                width: 70px;
                height: 70px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;

                @media (max-width: 991px) {
                    width: 60px;
                    height: 60px;
                    font-size: 28px;
                }

                @media (max-width: 767px) {
                    width: 55px;
                    height: 55px;
                    font-size: 24px;
                }
            }

            &:hover {
                background-color: var(--primary-color);

                h3,
                p {
                    color: var(--white-color);
                }
            }
        }
    }
}