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

/*----------------------------------------*/
/*  7.11 Choose css
/*----------------------------------------*/
.#{$theme-prifix}-choose {
    &-1 {
        @media #{$md,$sm,$xs} {
            padding-top: 80px;
            padding-bottom: 80px;
        }
    }

    &-bg-thumb {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background-repeat: no-repeat;

        @media #{$x3l,$xxl,$xl} {
            width: 45%;
        }
    }

    &-video {
        &-action {
            position: absolute;
            top: 40px;
            right: 40px;

            & a {
                font-size: 24px;
                width: 80px;
                height: 80px;
                line-height: 80px;
                text-align: center;
                border-radius: 50%;
                display: inline-block;
                color: var(--tp-common-black);
                background-color: var(--tp-common-white);
            }

            &.tp-video-btn {
                & a {
                    color: var(--tp-common-black);
                }
            }
        }
    }

    &-line-shape {
        width: 16px;
        background: var(--tp-common-black);
        display: inline-block;
        height: 154px;
        position: absolute;
        top: 90px;
        right: -45px;
        border-radius: 30px;
    }

    &-shape {
        position: absolute;
        bottom: 0;
        right: 0;

        &-5 {
            position: absolute;
            top: 15%;
            right: 0;
            animation: tptranslateY2 3s infinite alternate;
        }
    }

    &-wrapp {
        margin-top: 20px;
        margin-left: 47px;

        @media #{$x4l,$x3l,$xxl,$xl} {
            margin-left: 70px;
        }

        @media #{$md,$sm,$xs} {
            margin-left: 0;
        }
    }

    &-title {
        &-box {
            & .tp-section {
                &-title {
                    font-weight: 800;

                    @media #{$x4l,$x3l,$xxl,$xl} {
                        font-size: 45px;
                    }

                    @media #{$xl} {
                        font-size: 40px;
                    }

                    @media #{$xs} {
                        font-size: 24px;
                    }

                    @media #{$sm} {
                        font-size: 35px;
                    }
                }
            }

            & p {
                & br {
                    @media #{$xs} {
                        display: none;
                    }
                }
            }
        }
    }

    &-progress {
        & .tp-progress {
            &-canva {
                position: relative;
                margin-right: 30px;

                & canvas {
                    position: relative;
                    z-index: 2;
                }

                & input {
                    color: #fff !important;
                    height: 120px !important;
                    width: 120px !important;
                    border: 15px solid #182936 !important;
                    border-radius: 50%;
                    right: 0;
                    bottom: 8px;
                }
            }

            &-item {
                @media #{$sm,$xs} {
                    margin-bottom: 30px;
                }
            }
        }
    }

    &-list {
        margin-right: 115px;

        @media #{$sm} {
            margin-right: 70px;
        }

        &:last-child {
            margin-right: 0;
        }

        & ul {
            & li {
                position: relative;
                font-size: 16px;
                font-weight: 600;
                list-style: none;
                color: var(--tp-common-white);
                padding-left: 25px;
                margin-bottom: 10px;

                & i {
                    position: absolute;
                    left: 0;
                    top: 7px;
                }
            }
        }
    }

    &-info {
        position: absolute;
        top: 32%;
        left: -87%;
        padding: 50px 60px;
        border-radius: 25px;
        background: var(--tp-common-white);

        @media #{$x4l,$x3l,$xxl,$xl} {
            left: -82%;
        }

        @media #{$xl} {
            left: -95%;
        }

        &-title {
            font-weight: 700;
            font-size: 24px;

            & span {
                font-style: italic;
                color: var(--tp-theme-1);
                text-decoration: underline;
            }
        }

        &-avtr {
            margin-right: 20px;

            & img {
                width: 54px;
                height: 54px;
                border-radius: 50%;
            }

            &-title {
                font-size: 22px;
                font-weight: 700;
                margin-bottom: 0;
            }
        }
    }

    &-style-2 {
        & .tp-choose {
            &-wrapp {
                @media #{$lg} {
                    margin-left: 0;
                }

                & p {
                    & br {
                        @media #{$sm,$xs} {
                            display: none;
                        }
                    }
                }
            }

            &-bg-thumb {
                top: 16%;
                width: 775px;
                height: 525px;
                border-radius: 0 15px 15px 0;

                @media #{$x3l} {
                    width: 680px;
                }

                @media #{$xxl} {
                    width: 580px;
                }

                @media #{$xl} {
                    width: 500px;
                }
            }

            &-info {
                top: auto;
                bottom: 80px;
                left: -65%;
                padding: 37px 72px 22px 40px;
                background-color: rgb(255, 255, 255);
                box-shadow: 0px 0px 60px 0px rgba(22, 17, 85, 0.08);

                @media #{$xl} {
                    left: -66%;
                }

                & p {
                    line-height: 1.5;
                }

                &-icon {
                    position: absolute;
                    top: -30px;
                    left: -30px;
                    width: 62px;
                    height: 62px;
                    font-size: 25px;
                    line-height: 62px;
                    text-align: center;
                    border-radius: 50%;
                    color: var(--tp-common-white);
                    background: var(--tp-theme-1);

                    & i {
                        margin-bottom: 0;
                    }
                }
            }

            &-featured {
                &-item {
                    border-radius: 15px;
                    padding: 15px 60px 15px 20px;
                    border: 1px solid var(--tp-border-1);
                    @include tp-transition();
                    &:not(:last-child){
                        margin-bottom: 20px;
                    }

                    &:hover {
                        background-color: rgb(255, 255, 255);
                        border: 1px solid var(--tp-common-white);
                        box-shadow: 0px 0px 40px 0px rgba(25, 11, 59, 0.08);

                        & .tp-choose {
                            &-featured {
                                &-icon {
                                    & span {
                                        color: var(--tp-common-white);
                                        background: var(--tp-theme-1);
                                    }
                                }
                            }
                        }
                    }
                }

                &-title {
                    font-weight: 700;
                    font-size: 20px;
                    display: inline-block;

                    @media #{$sm,$xs} {
                        margin-bottom: 0;
                    }

                    & br {
                        @media #{$sm,$xs} {
                            display: none;
                        }
                    }
                }

                &-icon {
                    & span {
                        width: 60px;
                        height: 60px;
                        font-size: 22px;
                        margin-bottom: 0;
                        line-height: 60px;
                        border-radius: 50%;
                        text-align: center;
                        margin-right: 15px;
                        display: inline-block;
                        color: var(--tp-theme-1);
                        background: var(--tp-common-white);
                        @include tp-transition();
                    }
                }
            }
        }
    }

    &-shape {
        &-1 {
            position: absolute;
            bottom: 5px;
            z-index: -1;
            left: -46px;
            right: 0;
            text-align: center;
            margin: auto;
        }

        &-2 {
            position: absolute;
            top: 0;
            transform-origin: top right;
            animation: spin-1 3000ms forwards infinite alternate;
        }

        &-3 {
            position: absolute;
            top: 100px;
            right: 45px;
            z-index: -1;
        }

        &-4 {
            position: absolute;
            top: 100px;
            left: 0;
        }

        &-box {
            & .tp-about-user-box {
                left: auto;
                right: -50px;
                animation: moving 5s linear infinite;
            }
        }
    }

    &-3 {
        &-title-box {
            & .tp-section-title {
                @media #{$xl} {
                    font-size: 45px;
                }

                @media #{$xs} {
                    font-size: 24px;
                }
            }
        }

        &-play {
            & a {
                position: relative;
                width: 100px;
                height: 100px;
                border-radius: 50%;
                text-align: center;
                display: inline-block;
                border: 10px solid var(--tp-common-white);
                background-color: rgb(255, 255, 255);
                box-shadow: 0px 0px 60px 0px rgba(30, 13, 54, 0.12);

                & span {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    line-height: 80px;
                    display: block;
                    text-align: center;
                    font-size: 18px;
                    color: var(--tp-common-white);
                }
            }
        }

        & .tp-choose {
            &-thumb-box {
                left: -120px;

                @media #{$xxl} {
                    left: -45px;
                }

                @media #{$xl,$sm,$xs} {
                    left: 0;
                    transform: scale(.8);
                }

                @media #{$lg,$md,$sm,$xs} {
                    left: 0;
                    right: 0;
                    text-align: center;
                    margin: auto;
                    margin-bottom: 40px;
                }
            }

            &-shape {
                &-1 {
                    @media #{$lg,$md,$xs} {
                        left: -33px;
                    }

                    @media #{$sm} {
                        left: -50px;
                    }
                }

                &-2 {
                    @media #{$lg,$md} {
                        left: 18%;
                    }

                    @media #{$sm,$xs} {
                        left: 2%;
                    }
                }

                &-3 {
                    @media #{$lg,$md,$sm} {
                        left: 0;
                        right: -24%;
                    }
                }

                &-4 {
                    @media #{$lg,$md,$sm} {
                        right: 55%;
                    }

                    @media #{$sm} {
                        right: auto;
                    }
                }

                &-box {
                    & .tp-about {
                        &-user-box {
                            @media #{$lg} {
                                right: 18%;
                            }

                            @media #{$md} {
                                right: 8%;
                            }
                        }
                    }
                }
            }

            &-list {
                & ul {
                    & li {
                        color: var(--tp-common-black);
                        margin-bottom: 0;

                        & span {
                            margin-bottom: -10px;
                            margin-right: 6px;

                            & img {
                                margin-bottom: 4px;
                            }
                        }

                        & p {
                            font-weight: 500;
                            margin-bottom: 7px;
                            display: inline-block;
                            color: var(--tp-common-black);
                        }
                    }
                }
            }
        }

        &-notes {
            &-icon {
                margin-right: 30px;

                @media #{$xs} {
                    margin-bottom: 20px;
                }

                & img {
                    border-radius: 15px;
                }
            }

            &-title {
                font-size: 24px;
                font-weight: 700;
                color: var(--tp-common-black);

                @media #{$sm} {
                    font-size: 19px;
                }

                @media #{$xs} {
                    font-size: 20px;
                }
            }

            &-number {
                font-size: 36px;
                font-weight: 700;
                color: var(--tp-theme-1);
            }
        }

        &-experience {
            &-box {
                padding: 14px 40px;
                border-left: 2px solid var(--tp-theme-1);

                @media #{$xs} {
                    padding: 14px 26px;
                }
            }

            &-icon {
                font-size: 44px;
                color: var(--tp-theme-1);
                margin-right: 30px;

                @media #{$xs} {
                    margin-bottom: 10px;
                }
            }

            &-text {
                font-size: 18px;
                font-weight: 600;
                color: var(--tp-common-black);

                & br {
                    @media #{$sm,$xs} {
                        display: none;
                    }
                }
            }
        }

        & .tp-choose-list ul li {
            @media #{$sm,$xs} {
                padding-left: 0;
            }
        }
    }

    &-4 {
        &-title-box {
            & .tp-section-title {
                @media #{$x3l} {
                    font-size: 45px;
                }

                @media #{$xs} {
                    font-size: 28px;
                }
            }
        }

        & .tp-about {
            &-user-box {
                @media #{$x3l} {
                    left: -80px;
                }

                @media #{$xl} {
                    left: -80px;
                    bottom: 50px;
                }

                @media #{$md,$sm} {
                    left: 40px;
                }
            }
        }

        & .tp-service {
            &-hurry {
                background-color: var(--tp-common-black);
            }
        }

        &-num-count {
            margin-right: 30px;

            &::before {
                width: 60px;
                height: 60px;
                font-size: 24px;
                line-height: 60px;
                color: #223645;
                font-weight: 900;
                text-align: center;
                display: inline-block;
                counter-increment: count;
                content: "0" counter(count);
                background: var(--tp-grey-1);
                border-radius: 50%;
                opacity: 1;
                @include tp-transition();
            }
        }

        &-thumb {
            position: absolute;
            top: 0;
            right: 0;

            &-shape {
                position: absolute;
                right: 0;
                bottom: 0;
            }

            @media #{$xxl,$xl} {
                width: 45%;
            }

            @media #{$lg,$md,$sm} {
                position: relative;
                text-align: center;
                padding-bottom: 50px;
            }
        }

        &-fea {
            &-item {
                position: relative;
                display: inline-block;
                margin-bottom: 15px;

                &::after {
                    position: absolute;
                    width: 1px;
                    height: 164px;
                    top: 50%;
                    left: 30px;
                    right: 0;
                    content: "";
                    transform: translateY(-50%);
                    background: var(--tp-border-1);
                    z-index: -1;
                }

                &:nth-child(2n+1) {
                    &::after {
                        display: none;
                    }
                }

                &:hover {
                    & .tp-choose-4 {
                        &-num-count {
                            &::before {
                                color: var(--tp-common-white);
                                background-color: var(--tp-theme-1);
                            }
                        }
                    }
                }
            }

            &-title {
                font-size: 22px;
                font-weight: 700;
                color: var(--tp-common-black);
            }

            &-text {
                & p {
                    line-height: 1.5;

                    & br {
                        @media #{$xs} {
                            display: none;
                        }
                    }
                }
            }
        }
    }

    &-5 {
        &-plr {
            padding-top: 120px;
            padding-bottom: 210px;

            @media #{$sm,$xs} {
                padding-top: 80px;
            }
        }

        &-thumb {
            & img {
                border-radius: 15px;

                @media #{$md,$sm,$xs} {
                    width: 100%;
                }
            }

            &-box {
                margin-left: -190px;

                @media #{$x3l} {
                    margin-left: -100px;
                }

                @media #{$xxl,$xl,$lg} {
                    margin-left: 0;
                }

                @media #{$md} {
                    margin-bottom: 40px;
                    margin-left: 0;
                }
                @media #{$sm,$xs} {
                    margin-bottom: 0;
                    margin-left: 0;
                }
            }

            &-sm {
                position: absolute;
                bottom: -45%;
                right: 50px;

                & img {
                    border-radius: 15px;
                }

                @media #{$xxl} {
                    right: -50px;
                }

                @media #{$lg} {
                    bottom: -72%;
                }

                @media #{$md,$sm,$xs} {
                    display: none;
                }
            }

            &-shape {
                position: absolute;
                left: 28%;
                bottom: -28%;
                animation: rotate2 10s linear infinite;

                @media #{$x3l,$xxl} {
                    left: 15%;
                }

                @media #{$xl} {
                    left: 4%;
                }
            }
        }

        &-shape {
            position: absolute;
            right: 14%;
            bottom: 3%;
            animation: spin-1 3000ms forwards infinite alternate;
            transform-origin: bottom right;

            &-bg {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
            }

            & img {
                width: 100%;
                height: 100%;
            }
        }

        & .tp-choose {
            &-wrapp {
                margin-left: 0;

                @media #{$xxl} {
                    margin-left: 55px;
                }

                @media #{$xl} {
                    margin-left: 30px;
                }

                @media #{$lg} {
                    margin-left: 0px;
                }

                @media #{$sm,$xs} {
                    margin-top: 50px;
                    margin-bottom: 30px;
                }
            }

            &-featured {
                &-item {
                    border: 0;
                    padding: 0;
                    margin-bottom: 30px;

                    &:hover {
                        border: 0;
                        background: none;
                        box-shadow: none;

                        & .tp-choose {
                            &-featured {
                                &-icon {
                                    & span {
                                        color: var(--tp-common-white);
                                        background: var(--tp-common-black);
                                    }
                                }
                            }
                        }
                    }
                }

                &-icon {
                    margin-right: 8px;

                    & span {
                        font-size: 36px;
                        width: 72px;
                        height: 72px;
                        line-height: 78px;
                        color: var(--tp-common-black);
                    }
                }

                &-title {
                    @media #{$lg} {
                        font-size: 16px;
                    }
                }
            }

            &-title-box {
                & .tp-section-title {
                    @media #{$lg} {
                        font-size: 40px;
                    }
                }

                & p {
                    & br {
                        @media #{$x4l,$x3l,$xxl,$xl,$lg,$md,$sm,$xs} {
                            display: none;
                        }
                    }
                }
            }
        }

        &-action {
            & .tp-theme-btn {
                font-size: 16px;
            }

            @media #{$md} {
                margin-bottom: 40px;
            }
        }
    }
}