.hiring_steps_common_container {
    @media (max-width: 992px) {
        flex-wrap: wrap;
    }
}
.hiring_steps_content_container {
    position: relative;
    flex: 1 1 50%;

    &:after {
        content: '';
        position: absolute;
        background: url('./assets/icon/long_arrow.svg') no-repeat center;
        width: 100px;
        height: 12px;
        top: 34px;
        left: 100%;
        transform: translateX(-50%);
        display: block;
    }
    &:last-child {
        &:after {

            content: unset !important;    
        }
    }

    @media (max-width: 992px) {
        &:after {
            display: none;
        }
    }

}

.hiring_content_box {
    h3 {
        font-size: 20px;

        @media (min-width: 992px) {
            min-height: 60px;
        }
    }
}

.count_box {
    position: relative;
    display: inline-block;
    width: 60px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background-color: black;
    height: 69px;
    color: white;

    span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 38px;
        font-weight: 700;
    }
}

/* MERN / MEAN cards use a 4-logo strip (2048x512) instead of a square icon.
   Bootstrap's .img-fluid forces height:auto, which squashed them to 16px tall,
   so pin the height to match the 64px square icons on the sibling cards. */
.hiring_service_list .stack_icon {
    height: 64px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}