/*===========================
     17.HIW IT WORK css 
===========================*/


.how-it-work{}


.work-wrapper{
    & .work-col{
        &:nth-child(6n+1){
            .single-work{
                & .work-icon{
                    & span{
                        background-color: $theme-color;

                        &::before,
                        &::after{
                            background-color: $theme-color;
                        }
                    }
                    & .sub-title{
                        color: $theme-color;
                    }
                }
            }
        }
        &:nth-child(6n+2){
            .single-work{
                & .work-icon{
                    & span{
                        background-color: $theme-color-2;

                        &::before,
                        &::after{
                            background-color: $theme-color-2;
                        }
                    }
                    & .sub-title{
                        color: $theme-color-2;
                    }
                }
            }
        }
        &:nth-child(6n+3){
            .single-work{
                & .work-icon{
                    & span{
                        background-color: $theme-color-3;

                        &::before,
                        &::after{
                            background-color: $theme-color-3;
                        }
                    }
                    & .sub-title{
                        color: $theme-color-3;
                    }
                }
            }
        }
        &:nth-child(6n+4){
            .single-work{
                & .work-icon{
                    & span{
                        background-color: $theme-color-4;

                        &::before,
                        &::after{
                            background-color: $theme-color-4;
                        }
                    }
                    & .sub-title{
                        color: $theme-color-4;
                    }
                }
            }
        }
        &:nth-child(6n+5){
            .single-work{
                & .work-icon{
                    & span{
                        background-color: $theme-color-5;

                        &::before,
                        &::after{
                            background-color: $theme-color-5;
                        }
                    }
                    & .sub-title{
                        color: $theme-color-5;
                    }
                }
            }
        }
        &:nth-child(6n+6){
            .single-work{
                & .work-icon{
                    & span{
                        background-color: $theme-color-7;

                        &::before,
                        &::after{
                            background-color: $theme-color-7;
                        }
                    }
                    & .sub-title{
                        color: $theme-color-7;
                    }
                }
            }
        }
    }
}

.single-work{
    & .work-icon{
        & span{
            width: 30px;
            height: 30px;
            line-height: 30px;
            position: relative;
            background-color: $theme-color;
            z-index: 5;
            
            &::before,
            &::after{
                width: 100%;
                height: 100%;
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                @include transform(rotate(25deg));
                background-color: $theme-color;
                z-index: -1;
            }
            
            &::after{
                @include transform(rotate(60deg));
            }
            
            & i{
                font-size: 16px;
                color: $white;
            }
        }
        & .sub-title{
            display: inline-block;
            padding-left: 10px;
            font-size: 18px;
        }
    }
    & .title{
        font-size: 24px;
        font-weight: 700;
        margin-top: 20px;
        
        @media #{$xs}{
            font-size: 20px;
        }
        @media #{$sm}{
            font-size: 24px;
        }
    }
    & p{
        margin-top: 20px;
    }
}