@use '../../utils' as *;

/*----------------------------------------*/
/*  7.23 process css start
/*----------------------------------------*/

.#{$theme-prifix}-process{
    &-sa{
        &-item{
            &-count{
                position: absolute;
                top: 0;
                left: 0;
                width: 70px;
                height: 70px;
                display: inline-block;
                text-align: center;
                line-height: 70px;
            }
        }
        &-list{
            & ul{
                & li{
                    font-weight: 500;
                    font-size: 18px;
                    line-height: 144%;
                    color: var(--tp-common-white);
                    list-style: none;
                    margin-bottom: 10px;
                }
            }
        }
        &-border{
            & svg{
                width: 100%;
            }
        }
        &-shape{
            position: absolute;
            bottom: 0;
            right: 0;
            z-index: -1;
            width: 9%;
            & svg{
                width: 100%;
            }
        }
        &-link{
            @media #{$sm,$xs}{
                margin-top: 30px;
            }
        }
    }
    &-pp{
        &-video{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            right: 0;
            margin: 0 auto;
            text-align: center;
            &-inner{
                overflow: hidden;
                border-radius: 50%;
                flex: 0 0 auto;
                &:hover{
                    & .tp-process-pp-video-img{
                        transform: scale(1.1);
                    }
                }
            }
            & .popup-video{
                width: 40px;
                height: 40px;
                line-height: 38px;
                background: var(--tp-common-white);
                display: inline-block;
            }
            &-img{
                border-radius: 50%;
                transition: all .4s ease;
            }
            &-wrap{
                @media #{$lg,$md,$sm,$xs}{
                    & p{
                        & br{
                            display: none;
                        }
                    }
                }
            }
        }
        &-count{
            width: 40px;
            height: 40px;
            line-height: 40px;
            border-radius: 50%;
        }
        &-border{
            transform: translateY(32px);
            & svg{
                width: 100%;
            }
        }
    }
    &-it{
        &-bg{
            background: linear-gradient(180deg, #d5ffdd 0%, rgba(213, 255, 221, 0) 100%);
        }
        &-video{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            right: 0;
            margin: 0 auto;
            text-align: center;
            & .tp-hero-video-btn {
                display: inline-block;
                line-height: 47px;
            }
        }
        &-item{
            border: 1px solid #E0EAE4;
            border-radius: 20px;
            padding: 55px 30px 27px 30px;
            &-2{
                border-color: rgba(16, 48, 42, 0.1);
            }
        }
        &-para{
            &-2{
                background: none;
                border: 1px solid #E0EAE4;
                padding: 8px 32px 8px 30px;
            }
            &-3{
                border-color: rgba(16, 48, 42, 0.1);
            }
        }
        &-shape{
            position: absolute;
            top: -40px;
            right: 0;
            width: 15%;
            z-index: -1;
        }
    }
}