.single__service {
    display: flex;
    align-items: start;

    gap: 64px;

    padding: 64px 6vw;

    .total__services {
        padding: 20px;
        border-radius: 10px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        min-width: 320px;

        display: flex;
        flex-direction: column;

        gap: 24px;

        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        overflow-y: scroll;
        max-height: 450px;

        position: sticky;

        top: 180px;

        .title {
            font-size: 24px;
            padding-bottom: 12px;

            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }

        .service__list {
            display: flex;
            flex-direction: column;
            gap: 20px;

            .list {

                /* Layout */

                display: flex;
                align-items: center;
                gap: 10px;

                font-size: 18px;

                color: var(--dark-color);

                >img {
                    width: 60px;
                    border-radius: 50%;
                }
            }

            .text {
                color: var(--primary-color);
            }
        }
    }

    .total__services::-webkit-scrollbar {
        width: 4px;
    }

    .total__services::-webkit-scrollbar-thumb {
        background-color: var(--primary-color);
        cursor: pointer;

        border-radius: 0 8px 8px 0;
    }

    .service__detail {
        display: flex;
        flex-direction: column;

        gap: 64px;

        .service__img {
            max-width: 100%;
            overflow: hidden;
            max-height: 800px;

            border-radius: 10px;

            >img {
                width: 100%;
            }
        }

        .paragraph {
            color: #999;
        }

        .service__maintenance {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 32px;

            .li {
                color: var(--dark-color);

                display: flex;
                align-items: center;
                gap: 12px;

                font-weight: 600;
                font-size: 18px;

                >i {
                    font-size: 24px;
                    color: var(--primary-color);
                }
            }
        }
    }
}


@media (max-width:1162px) {
    .single__service {
        flex-direction: column;

        .total__services {
            position: static;
            min-width: 100%;
            max-height: 340px;
        }
    }
}


@media (max-width:1162px) {
    .single__service {
        flex-direction: column;

        .service__detail {
            .service__maintenance{
                grid-template-columns: repeat(1, 1fr);
            }
        }
    }
}