.process-card {
    &-area {
        position: relative;
        .process-line {
            position: absolute;
            left: 50%;
            bottom: 22px;
            width: calc(100% + 82px);
            transform: translate(-50%, 0);
            text-align: center;
        }
    }
    &-wrap {
        padding: 25px 0 0 0px;
    }    
    position: relative;
    background-color: $smoke-color;
    border-radius: 50%;
    text-align: center;
    padding: 56px 30px 46px;
    max-width: 270px;
    margin-left: auto;
    margin-right: auto;
    transition: 0.4s;
    &:hover {
        background: $title-color;
        .box-title {
            color: $white-color;
        }
        .process-card_icon {
            transform: rotateY(180deg);
        }
        .process-card_text {
            color: $smoke-color;
        }
    }
    .box-title {
        font-weight: 700;
        margin-bottom: 6px;
        font-size: 22px;
        transition: 0.4s;
    }
    &_number {
        height: 50px;
        width: 50px;
        line-height: 50px;
        background-color: $theme-color;
        border-radius: 50%;
        text-align: center;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        font-size: 16px;
        font-weight: 700;
        color: $white-color;
    }
    &_icon {
        margin-bottom: 30px;
        transition: 0.4s;
    }
    &_text {
        margin-bottom: -0.53em;
        font-size: 16px;
        transition: 0.4s;
    }
}
@include ml {
    .process-card-area .process-line {
        width: 100%;
    }
}
@include lg {
    .process-card {
        &-area {
            .process-line {
                display: none;
            }
        }
    }
}

@include xs {
    .process-card {
        &-wrap {
            &:has(.pulse) {
                &:nth-child(even) {
                    padding-top: 0;
                }
            }
        }
    }
}