/* =========================================================
   CLEANING SCOPE
========================================================= */

.cleaning-scope {
    padding:
        var(--section-spacing)
        0;

    background:
        #ffffff;
}


/* =========================================================
   INNER
========================================================= */

.cleaning-scope__inner {
    width: 100%;

    margin-inline: auto;
}


/* =========================================================
   HEADER
========================================================= */

.cleaning-scope__header {
    width: 100%;

    margin:
        0
        auto
        30px;

    text-align: center;
}


/* =========================================================
   TITLE
========================================================= */

.cleaning-scope__title {
    margin:
        0
        0
        10px;

    color:
        var(--color-text);

    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;

    text-align: center;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.cleaning-scope__description {
    margin: 0;

    color:
        var(--color-text-secondary);

    font-size: 15px;
    line-height: 1.55;

    text-align: center;
}


/* =========================================================
   LIST
========================================================= */

.cleaning-scope__list {
    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;

    border-top:
        1px solid
        var(--color-border);
}


/* =========================================================
   ITEM
========================================================= */

.cleaning-scope__item {
    display: grid;

    grid-template-columns:
        58px
        minmax(0, 1fr);

    align-items: center;

    min-height: 54px;

    border-bottom:
        1px solid
        var(--color-border);
}


.cleaning-scope__item:nth-child(even) {
    background:
        #fafafa;
}


/* =========================================================
   NUMBER
========================================================= */

.cleaning-scope__number {
    display: flex;

    height: 100%;

    align-items: center;
    justify-content: center;

    color:
        var(--service-primary-hover);

    border-right:
        1px solid
        var(--color-border);

    font-size: 14px;
    line-height: 1;
    font-weight: 700;
}


/* =========================================================
   TEXT
========================================================= */

.cleaning-scope__text {
    display: block;

    padding:
        13px
        18px;

    color:
        #3f3f3f;

    font-size: 16px;
    line-height: 1.45;

    text-align: left;
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) {

    .cleaning-scope__item {
        transition:
            background-color
            var(--transition-fast);
    }


    .cleaning-scope__item:hover {
        background:
            var(--service-primary-soft);
    }

}


/* =========================================================
   ACTION
========================================================= */

.cleaning-scope__action {
    display: flex;

    justify-content: center;

    margin-top: 28px;
}


/* =========================================================
   BUTTON
========================================================= */

.cleaning-scope__button {
    min-width: 175px;

    padding-inline: 22px;

    border-radius: 3px;

    font-size: 16px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .cleaning-scope__title {
        font-size: 26px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .cleaning-scope__header {
        margin-bottom: 24px;

        text-align: center;
    }


    .cleaning-scope__title {
        font-size: 24px;

        text-align: center;
    }


    .cleaning-scope__description {
        font-size: 14px;

        text-align: center;
    }


    .cleaning-scope__item {
        grid-template-columns:
            46px
            minmax(0, 1fr);

        min-height: 50px;
    }
    
    .cleaning-scope__number {
    	font-size: 16px;
    }


    .cleaning-scope__text {
        padding:
            12px
            14px;

        font-size: 15px;
    }


    .cleaning-scope__button {
        width: 100%;
    }

}