@import "../../../../assets/scss/mixin";
.g5plus-process-ctn{
    text-align: center;
    &.style1{
        margin: 0 -15px;
        .process-item{
            .box-process-item{
                p{
                    font-size: 30px;
                    font-weight: 700;
                    line-height: 1;
                }
                a{
                    font-size: 32px;
                    font-weight: 700;
                    line-height: 1;
                    color: var(--g5-color-accent);
                    display: block;
                    margin-bottom: 30px;
                    @include transition(all 0.5s);
                    &:hover{
                        color: #fff !important;
                    }
                }
                span{
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 1.71;
                    padding-top: 12px;
                    margin-bottom: 0;
                }
            }
        }
        &.color-dark{
            span,
            p{
                color: #000 !important;
            }
        }
        &.color-light{
            span,
            p{
                color: #fff !important;
            }
        }
    }

    &.style2{
        position: relative;
        margin: 20px -15px;
        .box-process-item{
            padding: 40px 20px;
            z-index: 1;
            @include transition(all 0.5s);
            &:before{
                content: "";
                display: block;
                position: absolute;
                top: 0;
                left: 15px;
                bottom: 0;
                right: 15px;
                @include transform(scale(0));
                background-color: var(--g5-color-accent);
                z-index: 0;
                @include transition(all 0.5s);
            }
            p{
                font-size: 60px;
                font-weight: 700;
                line-height: 1;
                @include transition(all 0.5s);
            }
            a{
                font-size: 20px;
                font-weight: 700;
                line-height: 1;
                padding-top: 6px;
                text-align: center;
                letter-spacing: 0.02em;
                display: block;
                margin-bottom: 30px;
                @include transition(all 0.5s);
            }
            span{
                font-size: 14px;
                font-weight: 400;
                line-height: 1.71;
                padding-top: 12px;
                margin-bottom: 0;
                @include transition(all 0.5s);
            }
            i{
                position: absolute;
                bottom: 25px;
                left: 0;
                right: 0;
                color: #F2F2F2;
                @include transition(all 0.5s);
                z-index: -1;
                font-size: 100px;
            }
        }
        &.color-dark{
            .box-process-item{
                background-color: rgba(var(--g5-text-color-light-r),var(--g5-text-color-light-g),var(--g5-text-color-light-b),0.1);
                a{
                    color: var(--g5-text-color-medium);
                }
                span,
                p{
                    color: var(--g5-text-color-light) !important;
                }
            }
            .process-item:hover{
                .box-process-item{
                    &:before{
                        @include transform(scale(1));
                    }
                    span,
                    p,
                    a{
                        position: relative;
                        color: #fff !important;
                    }
                    a:hover{
                        color: var(--g5-text-color-medium) !important;
                    }
                    i{
                        color: rgba(255,255,255,0.3);
                        z-index: 0;
                    }
                }
            }
        }

        &.color-light{
            .process-item{
                .box-process-item{
                    background: var(--g5-color-secondary) !important;
                    a,
                    span,
                    p{
                        position: relative;
                        color: #fff !important;
                    }
                    i{
                        z-index: 0 !important;
                        opacity: 0.3 !important;
                    }
                }
            }
            .process-item:hover{
                .box-process-item{
                    background: none !important;
                    &:before{
                        @include transform(scale(1));

                        z-index: 0 !important;
                    }
                    span,
                    p,
                    a{
                        color: #000 !important;
                        z-index: 0 !important;
                    }
                    a:hover{
                        color: #fff !important;
                    }
                    i{
                        color: rgba(255,255,255,0.2);
                        z-index: 0 !important;
                        opacity: 1 !important;
                    }
                }
            }
        }
    }

    .g5plus-slick-slider{
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 991px){
    .g5plus-process-ctn{
        &.style2 .process-item{
            margin-bottom: 30px;
        }
    }
}