@use '../utils' as *;

/*=============================
    	14. Testimonial
===============================*/
.testimonial {
    &__area {
        position: relative;
        z-index: 1;
        background: var(--tg-color-gray-1);
        padding: 245px 0 140px;
        margin-top: -105px;
        @media #{$xs} {
            padding: 210px 0 100px;
        }
        &-two {
            position: relative;
            z-index: 1;
            &::before {
                content: "";
                position: absolute;
                right: -300px;
                top: 0;
                width: 560px;
                height: 560px;
                @include border-radius(50%);
                background: #7838FF;
                filter: blur(150px);
                opacity: .1;
                z-index: -1;
            }
        }
        &-three {
            position: relative;
            z-index: 1;
            &::before {
                content: "";
                position: absolute;
                left: -244px;
                top: 70px;
                width: 460px;
                height: 460px;
                @include border-radius(50%);
                background: #7838FF;
                filter: blur(125px);
                opacity: .1;
                z-index: -1;
            }
        }
        &-six {
            padding: 130px 0 130px;
            margin-top: 0;
            @media #{$xs} {
                padding: 100px 0;
            }
        }
        &-seven {
            position: relative;
            z-index: 1;
        }
    }
    &__bg {
        background-position: center;
        background-size: cover;
        position: relative;
        z-index: 1;
        &-two {
            background-size: cover;
            background-position: center;
            position: relative;
            z-index: 1;
            padding: 140px 0 225px;
            @media #{$xs} {
                padding: 100px 0 185px;
            }
        }
        &-three {
            background-size: cover;
            background-position: center;
            position: relative;
            z-index: 1;
        }
        &-four {
            background-size: cover;
            background-position: center;
            background-color: var(--tg-theme-primary);
            position: relative;
            z-index: 1;
        }
    }
    &__wrap {
        padding: 0 110px;
        position: relative;
        @media #{$md} {
            padding: 0 70px;
        }
        @media #{$xs} {
            padding: 0 0;
        }
        &-two {
            padding: 0 120px;
            @media #{$md} {
                padding: 0 70px;
            }
            @media #{$xs} {
                padding: 0 0;
            }
        }
        &-three {
            position: relative;
        }
    }
    &__item {
        text-align: center;
        &-two {
            background: var(--tg-color-white-default);
            border-radius: 20px;
            border: 1px solid var(--tg-border-9);
            padding: 35px 35px;
            position: relative;
            z-index: 1;
            & > p {
                margin-bottom: 22px;
            }
        }
        &-three {
            @include border-radius(20px);
            border: 1px solid var(--tg-border-9);
            background: var(--tg-color-white-default);
            padding: 40px 35px;
            position: relative;
            overflow: hidden;
            z-index: 1;
            @media #{$xs} {
                padding: 30px 30px;
            }
        }
        &-five {
            border: none;
            box-shadow: -13px 10px 20px 0px rgba(0, 0, 0, 0.15);
            @include border-radius(15px);
            & > p {
                font-size: 16px;
                font-weight: 500;
                font-style: italic;
                margin-bottom: 15px;
            }
            & .testimonial__icon-two {
                color: #E3E3E3;
            }
            & .testimonial__author {
                gap: 10px;
                & .thumb {
                    width: 50px;
                    height: 50px;
                }
            }
        }
        &-six {
            border: 1px solid #E5E5E5;
            padding: 40px 40px;
            @include border-radius(15px);
            background: var(--tg-color-white-default);
            @media #{$lg} {
                padding: 30px 30px;
            }
        }
        &-seven {
            @include border-radius(0);
        }
        &-wrap {
            &-two {
                margin-right: 100px;
                @media #{$lg} {
                    margin-right: 0;
                }
            }
            &-three {
                position: relative;
                z-index: 1;
            }
        }
    }
    &__icon {
        width: 82px;
        height: 82px;
        margin: 0 auto 28px;
        @include flexbox();
        align-items: center;
        justify-content: center;
        background: var(--tg-color-white-default);
        border: 1px solid var(--tg-border-5);
        @include border-radius(10px);
        color: var(--tg-theme-primary);
        &-two {
            & svg {
                position: absolute;
                right: 35px;
                bottom: 45px;
                z-index: -1;
            }
        }
        &-three {
            & svg {
                position: absolute;
                right: 35px;
                bottom: -1px;
                z-index: -3;
                width: 56px;
                height: auto;
            }
        }
    }
    &__content {
        & > p {
            font-size: 20px;
            font-weight: 500;
            font-style: italic;
            text-transform: capitalize;
            margin-bottom: 30px;
        }
        &-bottom {
            & .title {
                font-size: 24px;
                font-weight: 600;
                margin-bottom: 5px;
            }
            & span {
                display: block;
            }
            &-two {
                & .title {
                    color: var(--tg-color-white-default);
                }
                & span {
                    color: #B3CCFF;
                }
            }
            &-three {
                & .title {
                    margin-bottom: 6px;
                    font-size: 18px;
                    font-weight: 600;
                    text-transform: capitalize;
                }
                & span {
                    display: block;
                    line-height: 1;
                    color: #7F838C;
                }
            }
        }
        &-top {
            @include flexbox();
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: wrap;
            margin-bottom: 30px;
            & .testimonial__rating-two {
                margin-bottom: 0;
            }
        }
        &-two {
            & > p {
                margin-bottom: 0;
                font-size: 18px;
                line-height: 1.55;
                color: var(--tg-border-1);
            }
        }
        &-three {
            text-align: center;
            & > p {
                margin-bottom: 30px;
                font-size: 22px;
                font-weight: 500;
                color: var(--tg-color-white-default);
                font-style: italic;
                text-transform: capitalize;
                line-height: 1.63;
                @media #{$xs} {
                    font-size: 20px;
                }
            }
            & .testimonial__rating {
                margin-bottom: 20px;
            }
        }
        &-four {
            @media #{$md} {
                margin-bottom: 50px;
            }
            & .section__title {
                & .title {
                    font-size: 40px;
                    @media #{$lg} {
                        font-size: 36px;
                    }
                    @media #{$xs} {
                        font-size: 30px;
                    }
                }
            }
            & p {
                margin-bottom: 20px;
                width: 95%;
                @media #{$lg} {
                    width: 100%;
                }
            }
        }
        &-five {
            & p {
                margin-bottom: 12px;
            }
        }
        &-six {
            margin-right: 90px;
            @media #{$lg} {
                margin-right: 0;
            }
        }
        &-seven {
            & p {
                color: var(--tg-color-white-default);
            }
        }
    }
    &__author {
        @include flexbox();
        align-items: center;
        gap: 20px;
        & .thumb {
            width: 60px;
            height: 60px;
            flex: 0 0 auto;
            & img {
                width: 100%;
                @include border-radius(50%);
            }
        }
        & .content {
            & .title {
                margin-bottom: 8px;
                font-size: 18px;
                font-weight: 600;
            }
            & span {
                display: block;
                line-height: 1;
                font-weight: 500;
                font-size: 15px;
            }
        }
        & .rating {
            @include flexbox();
            align-items: center;
            color: var(--tg-color-yellow-light);
            gap: 4px;
        }
        &-two {
            gap: 15px;
            margin-bottom: 12px;
        }
    }
    &__rating {
        @include flexbox();
        align-items: center;
        justify-content: center;
        font-size: 22px;
        color: var(--tg-color-yellow-light);
        gap: 5px;
        margin-bottom: 15px;
        &-two {
            @include flexbox();
            align-items: center;
            gap: 4px;
            color: var(--tg-color-yellow-light);
            margin-bottom: 15px;
        }
    }
    &__nav {
        & .swiper-wrapper {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 30px;
            justify-content: center;
            & .swiper-slide {
                width: auto !important;
            }
            & button {
                border: none;
                background: transparent;
                padding: 0;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                -o-border-radius: 50%;
                -ms-border-radius: 50%;
                border-radius: 50%;
                position: relative;
                width: 65px;
                & img {
                    -webkit-border-radius: 50%;
                    -moz-border-radius: 50%;
                    -o-border-radius: 50%;
                    -ms-border-radius: 50%;
                    border-radius: 50%;
                    width: 100%;
                    filter: grayscale(1);
                }
            }
        }
        & .swiper-slide-thumb-active {
            & button {
                & img {
                    filter: grayscale(0);
                }
            }
        }
        &-two {
            @media #{$xs} {
                display: none;
            }
            & button {
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 60px;
                height: 60px;
                @include flexbox();
                align-items: center;
                justify-content: center;
                border: none;
                @include border-radius(50%);
                background: var(--tg-color-white-default);
                color: var(--tg-theme-primary);
                &.testimonial-button-next {
                    left: auto;
                    right: 0;
                }
                &.testimonial-button-prev {
                    transform: translateY(-50%) rotate(180deg);
                }
                &:hover {
                    background: var(--tg-theme-primary);
                    color: var(--tg-color-white-default);
                }
            }
        }
        &-three {
            & .swiper-wrapper {
                & button {
                    border: 3px solid var(--tg-color-white-default);
                    width: 50px;
                }
            }
        }
        &-four {
            & button {
                width: 50px;
                height: 50px;
                background: #0039CB;
                color: var(--tg-color-white-default);
                &:hover {
                    background: var(--tg-theme-secondary);
                }
            }
        }
        &-five {
            @media #{$md} {
                @include flexbox();
                align-items: center;
                justify-content: center;
                margin-top: 50px;
                gap: 20px;
            }
            & button {
                width: 50px;
                height: 50px;
                background: #0039CB;
                color: var(--tg-color-white-default);
                @include flexbox();
                align-items: center;
                justify-content: center;
                @include border-radius(50%);
                border: none;
                position: absolute;
                left: -85px;
                top: 50%;
                transform: translateY(-50%);
                z-index: 1;
                @media #{$xl} {
                    left: -55px;
                }
                @media #{$lg} {
                    left: -15px;
                }
                @media #{$md} {
                    position: inherit;
                    transform: translateY(0);
                }
                &:hover {
                    background: var(--tg-theme-secondary);
                }
                &.testimonial-button-next {
                    left: auto;
                    right: -85px;
                    @media #{$xl} {
                        right: -55px;
                    }
                    @media #{$lg} {
                        right: -15px;
                    }
                }
                &.testimonial-button-prev {
                    transform: translateY(-50%) rotate(-180deg);
                    @media #{$md} {
                        transform: translateY(0) rotate(-180deg);
                    }
                }
            }
        }
        &-six {
            @include flexbox();
            align-items: center;
            gap: 10px;
            & button {
                width: 60px;
                height: 60px;
                border: none;
                @include border-radius(50%);
                background: var(--tg-color-gray-1);
                color: var(--tg-theme-primary);
                padding: 0;
                & svg {
                    width: 26px;
                    height: auto;
                }
                &.testimonial-button-prev {
                    transform: rotate(-180deg);
                }
                &:hover {
                    background: var(--tg-theme-primary);
                    color: var(--tg-color-white-default);
                }
            }
        }
        &-seven {
            @media #{$md} {
                @include flexbox();
                align-items: center;
                justify-content: center;
                margin-top: 30px;
                gap: 15px;
            }
            & button {
                width: 60px;
                height: 60px;
                @include flexbox();
                align-items: center;
                justify-content: center;
                border: none;
                @include border-radius(50%);
                padding: 0;
                background: var(--tg-color-gray-1);
                color: var(--tg-theme-primary);
                position: absolute;
                left: -85px;
                top: 50%;
                transform: translateY(-50%);
                z-index: 2;
                @media #{$xl} {
                    left: -50px;
                }
                @media #{$lg} {
                    left: -20px;
                }
                @media #{$md} {
                    position: inherit;
                    transform: translateY(0);
                }
                &:hover {
                    background: var(--tg-theme-primary);
                    color: var(--tg-color-white-default);
                }
                &.testimonial-button-next {
                    left: auto;
                    right: -85px;
                    @media #{$xl} {
                        right: -50px;
                    }
                    @media #{$lg} {
                        right: -20px;
                    }
                }
            }
        }
        &-eight {
            & button {
                @include border-radius(0);
                &:hover {
                    background: var(--tg-theme-secondary);
                }
            }
        }
    }
    &__shape-wrap {
        & img {
            position: absolute;
            z-index: -1;
            &:nth-child(1) {
                left: 0;
                top: 0;
                @media #{$xl} {
                    max-width: 230px;
                }
                @media #{$xs} {
                    max-width: 160px;
                }
            }
            &:nth-child(2) {
                left: 10%;
                top: 0;
            }
            &:nth-child(3) {
                left: 0;
                bottom: 0;
                @media #{$md} {
                    max-width: 180px;
                }
                @media #{$xs} {
                    max-width: 140px;
                }
            }
            &:nth-child(4) {
                right: 0;
                bottom: 0;
                @media #{$xl} {
                    max-width: 350px;
                }
                @media #{$md} {
                    max-width: 250px;
                }
                @media #{$xs} {
                    max-width: 160px;
                }
            }
            &:nth-child(5) {
                right: 0;
                bottom: 26%;
                @media #{$xl} {
                    max-width: 130px;
                }
                @media #{$md} {
                    max-width: 90px;
                    bottom: 13%;
                }
                @media #{$xs} {
                    max-width: 60px;
                    bottom: 8%;
                }
            }
            &:nth-child(6) {
                left: 50%;
                transform: translateX(-50%);
                bottom: 10%;
            }
        }
        &-two {
            & img {
                position: absolute;
                left: 115px;
                bottom: 0;
                z-index: -1;
                @media #{$xs} {
                    left: 40px;
                }
            }
        }
    }
    &__shape {
        &-two {
            & img {
                position: absolute;
                z-index: -1;
                left: 50%;
                top: 18%;
                transform: translateX(-50%);
            }
        }
        &-three {
            & img {
                position: absolute;
                right: 19%;
                top: 0;
                z-index: -1;
                @media #{$xl} {
                    right: 8%;
                }
                @media #{$lg} {
                    right: 7%;
                    width: 500px;
                }
            }
        }
    }
}

.testimonial-active-four {
    margin-right: 1px;
}

.testimonial-active-five {
    height: 536px;
    @media #{$xs} {
        height: 355px;
    }
}