.steps-control{
    position: relative;
    margin-left: 10px;
}

.steps-control__container{
    margin: 0 auto;
}

.steps-control__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 150px;
    margin-bottom: 80px;
}

.steps-control__slogan {
    font-size: 20px;
}

.steps-control__steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 70px;
}

.steps-control__list-header {
    padding: 10px 20px;
    box-sizing: border-box;
    background-color: var(--color-accent-pink);
    color: var(--color-white);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    height: 100px;
    border-radius: 16px;
    margin-bottom: 8px;
    position: relative;
}

.steps-control__step:first-of-type .steps-control__arrow:before {
    content: "";
    background-image: url('data:image/svg+xml;utf8,<svg width="16" height="23" viewBox="0 0 16 23" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 21L8 3M8 3L2 8.51613M8 3L14 8.51613" stroke="%231F40E5" stroke-width="4" stroke-linecap="round"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    width: 16px;
    height: 23px;
    position: absolute;
    left: -32px;
}

.steps-control__step:first-of-type .steps-control__arrow:after {
    content: "";
    background-image: url('data:image/svg+xml;utf8,<svg width="359" height="16" viewBox="0 0 359 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 8L20 8M20 8L14.4839 2M20 8L14.4839 14" stroke="%231F40E5" stroke-width="4" stroke-linecap="round"/><path d="M338 8L356 8M356 8L350.484 2M356 8L350.484 14" stroke="%231F40E5" stroke-width="4" stroke-linecap="round"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    width: 359px;
    height: 16px;
    position: absolute;
    left: 75px;
    top: -44px;
    z-index: 1;
}

.steps-control__step:nth-of-type(2) .steps-control__arrow:after {
    content: "";
    background-image: url('data:image/svg+xml;utf8,<svg width="16" height="23" viewBox="0 0 16 23" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 2L8 20M8 20L14 14.4839M8 20L2 14.4839" stroke="%231F40E5" stroke-width="4" stroke-linecap="round"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    width: 16px;
    height: 23px;
    position: absolute;
    left: -32px;
    top: 10px;
}

.steps-control__step:nth-of-type(3) .steps-control__arrow:after {
    content: "";
    background-image: url('data:image/svg+xml;utf8,<svg width="341" height="16" viewBox="0 0 341 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M339 8L321 8M321 8L326.516 2M321 8L326.516 14" stroke="%231F40E5" stroke-width="4" stroke-linecap="round"/><path d="M21 8L3 8M3 8L8.51613 2M3 8L8.51613 14" stroke="%231F40E5" stroke-width="4" stroke-linecap="round"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    width: 341px;
    height: 16px;
    position: absolute;
    left: 76px;
    top: -44px;
    z-index: 1;
}

.steps-control__step:nth-of-type(3) .steps-control__arrow:before {
    content: "";
    background-image: url('data:image/svg+xml;utf8,<svg width="16" height="23" viewBox="0 0 16 23" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 2L8 20M8 20L14 14.4839M8 20L2 14.4839" stroke="%231F40E5" stroke-width="4" stroke-linecap="round"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    width: 16px;
    height: 23px;
    position: absolute;
    left: -32px;
    top: 10px;
}

.steps-control__step:nth-of-type(4) .steps-control__arrow:after {
    content: "";
    background-image: url('data:image/svg+xml;utf8,<svg width="359" height="16" viewBox="0 0 359 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 8L20 8M20 8L14.4839 2M20 8L14.4839 14" stroke="%231F40E5" stroke-width="4" stroke-linecap="round"/><path d="M338 8L356 8M356 8L350.484 2M356 8L350.484 14" stroke="%231F40E5" stroke-width="4" stroke-linecap="round"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    width: 359px;
    height: 16px;
    position: absolute;
    left: -475px;
    top: 526.5px;
    z-index: 1;
}

.steps-control__number {
    font-weight: 600;
    font-size: 32px;
    line-height: 39px;
    margin: 0;
}

.steps-control__step ul {
    padding: 0;
    margin: 0;
}

.steps-control__step {
    position: relative;
}

.steps-control__step ul li {
    border-radius: 16px;
    padding: 10px 20px;
    box-sizing: border-box;
    height: 70px;
    list-style-type: none;
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    margin-bottom: 8px;

    font-size: 18px;
    position: relative;
}

.steps-control__step ul li:before {
    content: "";
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2235%22%20height%3D%2220%22%20viewBox%3D%220%200%2035%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cline%20x1%3D%2235%22%20y1%3D%2210%22%20x2%3D%2211%22%20y2%3D%2210%22%20stroke%3D%22%23ED7180%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%2210%22%20transform%3D%22matrix%28-1%200%200%201%2020%200%29%22%20fill%3D%22%23ED7180%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%227%22%20r%3D%227%22%20transform%3D%22matrix%28-1%200%200%201%2017%203%29%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E');    
    position: absolute;
    left: -35px;
    width: 35px;
    height: 20px;
    z-index: 1;
}

.steps-control__step:nth-child(1):before {
    content: "";
    border-left: 2px solid var(--color-accent-pink);
    position: absolute;
    left: -25px;
    bottom: 35px;
    height: 500px;
}

.steps-control__step:nth-child(1):after {
    content: "";
    border-top: 2px solid var(--color-accent-pink);
    position: absolute;
    left: -25px;
    top: -37px;
    width: calc(100% + 70px);
}

.steps-control__step:nth-child(2):before {
    content: "";
    border-left: 2px solid var(--color-accent-pink);
    position: absolute;
    left: -25px;
    bottom: -35px;
    height: 570px;
}

.steps-control__step:nth-child(3):after {
    content: "";
    border-top: 2px solid var(--color-accent-pink);
    position: absolute;
    left: -25px;
    top: -37px;
    width: calc(100% + 70px);
}

.steps-control__step:nth-child(3):before {
    content: "";
    border-left: 2px solid var(--color-accent-pink);
    position: absolute;
    left: -25px;
    bottom: -35px;
    height: 570px;
}

.steps-control__step:nth-child(4):before {
    content: "";
    border-left: 2px solid var(--color-accent-pink);
    position: absolute;
    left: -25px;
    bottom: -35px;
    height: 390px;
}

.steps-control__step:nth-child(4):after {
    content: "";
    border-top: 2px solid var(--color-accent-pink);
    position: absolute;
    right: calc(100% + 24px);
    bottom: -37px;
    width: calc(100% + 70px);
}

.steps-control__show-more {
    display: none;
}

@media screen and (max-width: 1024px) {
    .steps-control {
        margin-left: 0;
    }

    .steps-control__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 20px;
    }

    .steps-control__subTitle {
        max-width: 65%;
    }

    .steps-control__slogan {
        font-size: 16px;
    }

    .steps-control__steps {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 5px;
        margin-left: 15px;
    }

    .steps-control__list-header {
        height: auto;
        min-height: 70px;
        gap: 15px;
    }

    .steps-control__step ul li:before {
        left: -24px;
        width: 24px;
        height: 14px;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='24' height='14' viewBox='0 0 24 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='24' y1='7.17139' x2='7.54286' y2='7.17139' stroke='%23ED7180' stroke-width='2'/%3E%3Ccircle cx='6.85714' cy='6.85714' r='6.85714' transform='matrix(-1 0 0 1 13.7148 0)' fill='%23ED7180'/%3E%3Ccircle cx='4.8' cy='4.8' r='4.8' transform='matrix(-1 0 0 1 11.6602 2.05713)' fill='white'/%3E%3C/svg%3E");
    }

    .steps-control__step:nth-child(1):after, .steps-control__step:nth-child(3):after, .steps-control__step:nth-child(4):after {
        content: none;
    }

    .steps-control__step:nth-child(1):before {
        height: 400px;
        bottom: -45px;
        content: none;
    }

    .steps-control__step_shown:nth-child(1):before {
        content: "";
        left: -18px;
    }

    .steps-control__step:nth-child(2):before {
        content: none;
    }

    .steps-control__step_shown:nth-child(2):before {
        content: "";
        left: -18px;
        height: 470px;
    }

    .steps-control__step:nth-child(3):before {
        left: -18px;
        height: 475px;
        content: none;
    }

    .steps-control__step_shown:nth-child(3):before {
        content: "";
    }

    .steps-control__step:nth-child(4):before {
        left: -18px;
        bottom: 37px;
        height: 405px;
        content: none;
    }

    .steps-control__step_shown:nth-child(4):before {
        content: "";
    }

    .steps-control__show-more {
        display: block;
        width: 40px;
        height: 40px;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='19.5' stroke='white'/%3E%3Cpath d='M19.9987 10.833L19.9987 29.1663M29.1654 19.9997L10.832 19.9997' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        margin-left: auto;
        cursor: pointer;
    }
    
    .steps-control__show-more_opened {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='19.5' stroke='white'/%3E%3Cpath d='M29.1654 20L10.832 20' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
    }

    .steps-control__step ul {
        display: none;
    }

    .steps-control__step_shown ul {
        display: block;
    }

    .steps-control__step:first-of-type .steps-control__arrow:before,
    .steps-control__step:first-of-type .steps-control__arrow:after,
    .steps-control__step:nth-of-type(2) .steps-control__arrow:after,
    .steps-control__step:nth-of-type(3) .steps-control__arrow:after,
    .steps-control__step:nth-of-type(3) .steps-control__arrow:before,
    .steps-control__step:nth-of-type(4) .steps-control__arrow:after {
        content: none;
    }
}

@media screen and (max-width: 768px) {
    .steps-control__step ul li {
        font-size: 14px;
    }

    .steps-control__slogan {
        font-size: 14px;
    }

    .steps-control__number {
        font-size: 20px;
        line-height: 22px;
    }
}

@media screen and (max-width: 425px) {
    .steps-control__steps {
        margin-left: 25px;
    }

    .steps-control__step:nth-child(1):before {
        height: 420px;
        bottom: -58px;
    }

    .steps-control__step:nth-child(3):before {
        height: 500px;
    }

    .steps-control__step:nth-child(4):before {
        height: 425px;
    }
}

@media screen and (max-width: 380px) {
    .steps-control__list-header {
        min-height: 88px;
    }
}