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

/*----------------------------------------*/
/*  7.5 funfact css
/*----------------------------------------*/

.#{$theme-prifix}-funfact {
    &-wrapp {
        position: relative;
        border-radius: 25px;
        margin-top: -90px;
        background-color: rgb(255, 255, 255);
        box-shadow: 0px 0px 60px 0px rgba(29, 24, 51, 0.08);

        @media #{$md,$sm,$xs} {
            top: 60px;
            margin-top: -250px;
        }

        & .row {
            [class*="col-"] {
                &:last-child {
                    & .tp-funfact {
                        &-item {
                            border-right: 0;

                            @media #{$xs} {
                                border: 0;
                            }
                        }
                    }
                }

                &:nth-child(2n+2) {
                    & .tp-funfact {
                        &-item {
                            @media #{$md,$sm} {
                                border-right: 0;
                            }

                            @media #{$xs} {
                                border: 0;
                            }
                        }
                    }
                }
            }
        }
    }

    &-item {
        padding: 40px;
        text-align: center;
        border-right: 1px solid var(--tp-border-1);

        @media #{$xs} {
            border: 0;
        }

        & p {
            font-weight: 500;
            color: #000;
            margin: 0;
        }
    }

    &-title {
        font-size: 50px;
        font-weight: 700;
        line-height: 1;
        color: var(--tp-theme-1);
        margin: 0;

        & .purecounter {
            color: var(--tp-common-black);
        }

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

    &-2 {
        @media #{$sm,$xs} {
            padding-top: 0;
        }
        &-shape {
            position: absolute;
            right: -50px;
            bottom: 50px;
            z-index: -1;
            animation: spin-1 3000ms forwards infinite alternate;
            transform-origin: bottom left;

            @media #{$xl,$lg} {
                right: 0;
            }
        }

        & .tp-funfact {
            &-wrapp {
                @media #{$md} {
                    margin: 0;
                }
                @media #{$sm,$xs} {
                    top: 0;
                    margin: 0;
                }

                & .row {
                    [class*="col-"] {
                        &:nth-child(2n+2) {
                            & .tp-funfact {
                                &-item {
                                    @media #{$md} {
                                        margin-bottom: 0;
                                    }

                                    @media #{$sm} {
                                        border-right: 0;
                                    }
                                }
                            }
                        }

                        &:nth-child(1) {
                            & .tp-funfact {
                                &-item {
                                    border-radius: 25px 0 0 0;
                                }
                            }
                        }

                        &:nth-child(4) {
                            & .tp-funfact {
                                &-item {
                                    border-radius: 0 25px 0 0;
                                }
                            }
                        }
                    }
                }
            }

            &-item {
                border-top: 2px solid var(--tp-common-white);
                @include tp-transition();

                &:hover{
                    border-top: 2px solid var(--tp-theme-1);
                }
            }
        }

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

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

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

    &-3 {
        @media #{$sm,$xs} {
            padding-bottom: 0;
        }
        &-item {
            @media #{$lg,$md,$sm,$xs} {
                margin-bottom: 30px;
            }
        }

        &-number {
            font-size: 48px;
            font-weight: 800;
            margin-right: 20px;
            color: var(--tp-common-black);
        }

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

        &-text {
            & p {
                margin-bottom: 0;

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

                @media #{$md,$xs} {
                    font-size: 14px;
                }
            }
        }

        &-icon {
            & span {
                margin-bottom: 0;
                color: var(--tp-theme-1);
            }
        }

        &-border {
            position: relative;

            &::after {
                position: absolute;
                width: 1270px;
                height: 1px;
                bottom: -65px;
                left: -50px;
                content: "";
                background: var(--tp-border-1);

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

    &-4 {
        & .tp-funfact {

            &-wrapp {
                background: var(--tp-theme-1);
            }

            &-item {
                border-right: 1px solid #ec4a73;

                @media #{$xs} {
                    border: 0;
                    border-bottom: 1px solid #ec4a73;
                }

                & p {
                    color: var(--tp-common-white);
                }
            }

            &-title {
                color: var(--tp-common-white);

                & span {
                    color: var(--tp-common-white);
                }
            }
        }
    }

    &-5 {
        & .tp-funfact {
            &-item {
                position: relative;

                &::after {
                    position: absolute;
                    width: 0;
                    height: 2px;
                    left: 0;
                    right: 0;
                    margin: auto;
                    text-align: center;
                    bottom: 0;
                    content: "";
                    background: var(--tp-theme-1);
                    @include tp-transition();
                }

                &:hover {
                    &::after {
                        width: 58%;
                    }
                }

                & p {
                    color: var(--tp-text-body);
                }
            }
        }
    }

    &-inner {
        @media #{$md,$sm,$xs} {
            padding-bottom: 0;
        }

        & .tp-funfact {
            &-item {
                @media #{$md,$sm,$xs} {
                    padding-bottom: 0;
                }

                & p {
                    font-weight: 600;
                }
            }

            &-box {
                & .row {
                    [class*="col-"] {
                        &:last-child {
                            & .tp-funfact {
                                &-item {
                                    border-right: 0;

                                    @media #{$xs} {
                                        border: 0;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}