.process-sec {
    overflow: hidden;
}

.working-process {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    .process-item {
        border: 1px solid #efefef;
        flex-basis: 24%;
        max-width: 100%;
        margin: 0 auto;
        padding: 30px 15px;
        transition: all 0.5s ease-in-out;
        .icon-box {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            height: 100px;
            width: 100px;
            border-radius: 50%;
            margin-bottom: 15px;
            margin-left: auto;
            margin-right: auto;
            // line-height: 1;
            z-index: 1;
            transition: all 0.5s ease-in-out;
            box-shadow: 0 0 16px rgba(54, 186, 254, .10);

            i {
                color: #000;
                font-size: 30px;
                transition: all 0.5s ease-in-out;
            }
        }
        &:hover {
            box-shadow: 0 0 30px rgba(54, 186, 254, .10);
            .icon-box {
                background-color: $primary-clr;

                i {
                    color: #fff;
                }
            }
        }
        @include mq(991) {
            flex-basis: 47%;
            max-width: 100%;
            margin-bottom: 20px;

        }
        @include mq(575) {
            flex-basis: 100%;
            max-width: 100%;

        }
    }
    .border-icon {
        color: #ddd;
        position: absolute;
        top: -8px;
        left: -8px;
        transform: rotate(40deg);

        @include mq(991) {
            display: none;
        }
    }
    .border-icon-2 {
        color: #ddd;
        position: absolute;
        top: -8px;
        right: -38px;
        transform: rotate(-50deg);

        @include mq(991) {
            display: none;
        }
    }
    svg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;

        @include mq(991) {
            display: none;
        }
    }
    &.v2 {
        .process-item {
            position: relative;
            color: #fff;
            flex-basis: 24%;
            margin: 0 auto;
            border: none;
            background-color: $primary-clr;
            border-right: 1px solid #efefef;

            &:nth-of-type(4) {
                border: none;
            }

            &::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                height: 0;
                width: 100%;
                background-color: $primary-clr;
                transition: all .3s;
                z-index: -1;
            }

            &:hover {
                // transform: translateY(-5px);
                box-shadow: none;
                &::after {
                    height: 100%;
                }
                .icon-box {
                    background-color: #fff;
                    z-index: 1;
                    i {
                        color: #000;
                    }
                } 
            }
            @include mq(991) {
                flex-basis: 47%;
                max-width: 100%;
                margin-bottom: 20px;
    
            }
            @include mq(575) {
                flex-basis: 100%;
                max-width: 100%;
    
            }
        }
    } 
    &.v3 {
        .process-item {
            background-color: transparent !important; 
            color: #000;
            flex-basis: 25%;
            transition: all .3s;
            border: none;
            box-shadow: -10px 0px 30px 0 rgba(199, 199, 199, .3);
            &::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                height: 0;
                width: 100%;
                background-color: $primary-clr;
                transition: all .3s;
                z-index: -1;
            }
            &:hover {
                color: #fff;
                box-shadow: -10px 0px 30px 0 rgba(199, 199, 199, .3);
                &::after {
                    // height: 100%;
                }
            }
        }
    }
}