@use '../utils' as *;

/*----------------------------------------*/
/*  38. testimonial css start
/*----------------------------------------*/

.it-testimonial {
    &-area {
        @media #{$xs}{
            overflow: hidden;
        }
    }
    &-shape {
        &-1 {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
        &-2 {
            position: absolute;
            top: -8%;
            left: 1%;
            z-index: -1;            
            @media #{$xxl}{
                left: -2%;
            }            
            @media #{$xl}{
                left: -4%;
            }            
            @media #{$lg}{
                left: -9%;
                top: -10%;
            } 
            @media #{$md,$xs}{
                display: none;
            }  
            & img {
                @media #{$xxl}{
                    transform: scale(.8);
                }            
                @media #{$xl}{
                    transform: scale(.7);
                }            
                @media #{$lg}{
                    transform: scale(.6);
                }
            }                      
        }
        &-3 {
            position: absolute;
            top: -15%;
            right: 0;
            z-index: -1;
        }
        &-4 {
            position: absolute;
            top: -21.5%;
            left: 0;
            z-index: -1;
        }
        &-5 {
            position: absolute;
            top: -18%;
            right: 0;
            z-index: -1;
        }
        &-6 {
            position: absolute;
            bottom: -20%;
            left: 0;
            z-index: -1;
        }
        &-7 {
            position: absolute;
            top: -9%;
            left: 0;
            height: 100%;
            width: 100%;
            object-fit: cover;
            @media #{$lg,$md,$xs}{
                display: none;
            }
        }
    }
    &-item {
        padding: 30px;
        border-radius: 20px;
        background-color: var(--it-common-white);
        border: 1px solid rgba(108, 117, 125, 0.2);
        @media #{$xs}{
            padding: 15px;
            padding-bottom: 30px;
        }
        @media #{$sm}{
            padding: 30px;
        }
    }
    &-text {
        & h5 {
            line-height: 1.5;
            @media #{$lg,$md,$xs}{
                font-size: 15px;
            }
        }
    }
    &-quote {
        @media #{$lg,$md,$xs}{
            margin-bottom: 15px !important;
        }
        & svg {
            @media #{$lg,$md,$xs}{
                height: 15px;
            }
        }
    }
    &-bottom {
        & img {
            @media #{$lg,$md,$xs}{
                display: none;
            }
        }
    }
    &-avatar-name {
        font-size: 24px;
        @media #{$xl}{
            font-size: 20px;
        }
        @media #{$lg,$md,$xs}{
            font-size: 17px;
        }
    }
    &-thumb {
        margin-right: 20px;
        @media #{$xs}{ 
            margin-right: 0;
        } 
        & img {
            @media #{$xs}{ 
                width: 100%;
            }
        }
    }
    &-content {
        margin-right: 30px;
        transform: translateX(-24px);
        @media #{$xl,$lg,$md}{
            margin-right: 0;
        }
        @media #{$xs}{
            margin-right: 0;
            margin-top: 40px;
            transform: translateX(0);
        }
    }
    &-arrow-wrap {
        @media #{$xs}{ 
            display: none;
        } 
        & button {
            display: inline-block;
            height: 50px;
            width: 50px;
            line-height: 1;
            text-align: center;
            border-radius: 50%;
            padding: 0;
            border: 1px solid var(--it-theme-1);
            background-color: var(--it-common-white);
            &.arrow-prev {
                position: absolute;
                top: 50%;
                left: -25px;
                z-index: 1;
                transform: translateY(-50%);
            }
            &.arrow-next {
                position: absolute;
                top: 50%;
                right: -25px;
                z-index: 1;
                transform: translateY(-50%);
            }
        }
    }
    &-style-2 {
        @media #{$md,$xs}{
            overflow: hidden;
        }
        & .it-testimonial-thumb {
            margin-right: 0;
            & img {
                max-width: inherit;
                @media #{$xl,$lg,$md,$xs}{
                    width: 100%;
                }
            }
        }
        & .it-course-rating {
            padding-bottom: 0;
            margin-bottom: 0;
            border-bottom: none;
            @media #{$xs}{
                margin-top: 10px;
            }
            @media #{$sm}{
                margin-top: 0;
            }
        }
        & .it-course-author {
            & .title {
                display: block;
                font-weight: 600;
                color: var(--it-common-black);
            }
        }
        & .it-btn-yellow {
            background-color: var(--it-theme-1);
        }
        & .it-course-title {
            font-size: 24px;
            @media #{$xl}{
                font-size: 22px;
            }
            @media #{$lg,$xs}{
                font-size: 18px;
            }
        }
        & .it-testimonial-content {
            margin-right: 0;
            margin-left: 45px;
            @media #{$xl,$lg}{
                margin-left: 20px;
            }
            @media #{$md}{
                margin-top: 40px;
                margin-left: 30px;
            }
            @media #{$xs}{
                margin-top: 40px;
                margin-left: 0;
            }
            & .categories {
                border-radius: 5px;
                line-height: 1;
                padding: 8px 20px;
                margin-bottom: 30px;
                display: inline-block;
                background-color: #FDF1DB;
                color: var(--it-common-black);
                font-family: var(--it-ff-spartan-medium);
                border: 1px solid rgba(248, 198, 47, 0.3);
                 @media #{$xl,$lg,$md,$xs}{
                    font-size: 12px;
                }
            }
        }
        & .it-course-meta {
            padding-top: 30px;
            border-top: 1px solid #D9D9D9;
            & span {
                @media #{$md,$xs}{
                    font-size: 14px;
                }
                &:first-child {
                    margin-right: 50px;
                    padding-right: 50px;
                    @media #{$xs}{
                        padding-right: 0;
                    }
                }
            }
        }
        & .it-testimonial-icon {
            position: absolute;
            left: 40px;
            top: 30px;
            border-radius: 5px;
            padding: 0 15px;
            height: 35px;
            line-height: 31px;
            display: inline-block;
            color: var(--it-common-white);
            border: 1px solid var(--it-common-white);
            background: rgba(31, 36, 50, 0.5);
        }
    }
}
.it-testimonial-2 {
    &-item {
        border-radius: 20px;
        background-color: var(--it-common-white);
        border: 1px solid rgba(3, 89, 78, 0.3);
        @media #{$xs}{
            padding: 20px;
        }
        &:hover {
            & .it-testimonial-2-thumb {
                & img {
                    transform: scale(1.2);
                }
            }
        }
    }
    &-thumb {
        height: 100%;
        margin-right: 41px;
        overflow: hidden;
        @media #{$xl,$lg}{
            margin-right: 30px;
        }
        @media #{$xs}{
            margin-right: 0;
        }
        & img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            transition: 1.3s all ease;
        }
        & .it-about-thumb-icon {
            width: 56px;
            height: 56px;
            line-height: 54px;
            & svg,i{
                color: var(--it-common-black);
            }
        }
        &.thumb-overlay {
            &::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                border-radius: 20px;
                background-color: rgba($color: #1F2432, $alpha: .4);
            }
        }
    }
    &-avatar {
        &-name{
            font-size: 20px;
            margin-bottom: 0;
        }
        &-info{
            margin-bottom: 18px;
            & span {
                font-size: 14px;
            }
        }
    }
    &-text {
        & p {
            line-height: 1.75;
            margin-bottom: 20px;
            margin-right: 10px;
            color: var(--it-common-black);
            @media #{$xl}{
                font-size: 14px;
                margin-right: 0;
            }
            @media #{$lg}{
                font-size: 13px;
                margin-right: 0;
            }
            @media #{$md}{
                margin-right: 0;
            }
            @media #{$xs}{
                font-size: 14px;
                margin-right: 0;
            }
        }
    }
    &-date {
        font-size: 20px;
        color: var(--it-common-black);
        @media #{$xl,$lg,$md,$xs}{
            font-size: 14px;
        }
    }
    &-content { 
        padding: 20px 40px;
        padding-left: 0;
        @media #{$xs}{
            padding-right: 0;
        }
        @media #{$sm}{
            padding-left: 20px;
        }
        &-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }
    }
    &-active {
        margin: -2px;
        padding: 2px;
    }
    &-quote {
        & svg {
            @media #{$xl,$lg,$md,$xs}{
                height: 20px;
            }
        }
    }
    &-shape {
        &-1 {
            position: absolute;
            top: -10%;
            right: 0;
            z-index: -1;
        }
        &-2 {
            position: absolute;
            top: 12%;
            left: 5%;
            z-index: -1;
            @media #{$xl,$lg}{
                transform: scale(.6);
            }
            @media #{$md,$xs}{
                display: none;
            }
            & img {
                animation: itrotate2 3s ease-in-out 3s infinite alternate forwards;
            }
        }
        &-3 {
            position: absolute;
            z-index: -1;
            top: 0;
            right: 0;
        }
        &-4 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 59%;
            z-index: -1;
            object-fit: cover;
            @media #{$xs}{
                height: 40%;
            }
            @media #{$sm}{
                height: 59%;
            }
        }
    }
    &-area {
        & .it-testimonial-arrow-wrap button.arrow-prev {
            top: 39%;
        }
        & .it-testimonial-arrow-wrap button.arrow-next {
            top: 39%;
        }
    }
    &-style-2 {
        & .it-about-thumb-icon svg {
            height: 19px;
            width: 20px;
            padding-left: 4px;
            color: var(--it-theme-1);
        }
        & .it-testimonial-2-avatar-name {
            font-size: 24px;
            font-family: var(--it-ff-edensor-regular);
        }
        & .it-testimonial-2-text p {
            color: rgba($color: #1F2432, $alpha: .8);
        }
    }
    &-style-3 {
        & .it-about-thumb-icon svg {
            height: 19px;
            width: 20px;
            color: var(--it-theme-1);
        }
        & .it-testimonial-dots {
            & .swiper-pagination-bullet {
                z-index: 2;
                opacity: 1;
                width: 30px;
                height: 7px;
                transition: .4s;
                position: relative;
                border-radius: 10px;
                display: inline-block;
                margin: 0 6px !important;
                background-color: var(--it-gray-1);
                &::after{
                    display: none;
                }
            }
            & .swiper-pagination-bullet-active {
                width: 40px;
                background-color: var(--it-theme-1); 
            }
        }
    }
    &-style-4 {
        & .it-testimonial-2-item {
            border-radius: 0;
        }
        & .it-testimonial-2-thumb {
            border-radius: 0;
            &::after {
                border-radius: 0;                
            }
            & img {
                border-radius: 0;
            }
        }
    }
}
.it-testimonial-3 {
    &-right {
        & .it-testimonial-2-content-wrap {
            padding: 27px 40px;
            padding-bottom: 25px;
            border-radius: 30px;
            background-color: var(--it-gray-1);
            
            @media #{$xs}{
                padding: 25px 20px;
            }
        }
        & .it-testimonial-2-ratting {
            margin-bottom: 20px;
            & i {
                display: inline-block;
                padding-right: 2px;
                color: var(--it-theme-2);
            }
        }
        & .it-testimonial-2-avatar-info {
            margin-bottom: 0;
        }
        &  .it-testimonial-2-content {
            padding: 0;
            & p {
                margin-bottom: 18px;
                margin-right: 45px;
                @media #{$md,$xs}{
                    margin-right: 0;              
                }
            }
        }
        & .it-testimonial-2-avatar-name {
            @media #{$md,$xs}{
                font-size: 16px;                
            }
        } 
        & .slick-vertical .slick-slide {
           display: block;    
           margin-bottom: 30px;      
        }
        & .slick-vertical .slick-slide:last-child {
           margin-bottom: 0;
        }    
    }
    &-play-icon {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0 30px 30px 0;
        border-radius: 0 0 100px 0;
        background-color: var(--it-common-white);
        &::before {
            content: "";
            position: absolute;
            top: -1px;
            right: -65px;
            width: 65px;
            height: 65px;
            -webkit-transform: scale(-1) rotate(90deg);
            transform: scale(-1) rotate(90deg);
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg' transform='rotate(0)'%3E%3Cg transform='rotate(90 100 100)'%3E%3Cpath d='M0,0 L0,200 Q0,0 200,0 Z' fill='white' /%3E%3C/g%3E%3C/svg%3E");
            background-size: cover;
            background-repeat: no-repeat;
        }
        &::after {
            content: "";
            position: absolute;
            bottom: -64px;
            left: 0px;
            width: 65px;
            height: 65px;
            -webkit-transform: scale(-1) rotate(90deg);
            transform: scale(-1) rotate(90deg);
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg' transform='rotate(0)'%3E%3Cg transform='rotate(90 100 100)'%3E%3Cpath d='M0,0 L0,200 Q0,0 200,0 Z' fill='white' /%3E%3C/g%3E%3C/svg%3E");
            background-size: cover;
            background-repeat: no-repeat;
        }
        & a {
            display: inline-block;
            height: 152px;
            width: 152px;
            line-height: 152px;
            text-align: center;
            border-radius: 50%;
            color: var(--it-common-white);
            background-color: var(--it-theme-1);
            @media #{$xs}{
                height: 75px;
                width: 75px;
                line-height: 73px;
            }
            @media #{$sm}{
                height: 125px;
                width: 125px;
                line-height: 123px;
            }
            & svg {
                padding-left: 4px;
                color: var(--it-common-white);
                @media #{$xs}{
                    height: 17px;
                }
            }
        }
    }
    &-thumb {
        height: 100%;
        @media #{$md,$xs}{
            height: auto;
            margin-bottom: 70px;
        }
        & img {
            height: 100%;
            object-fit: cover;
            border-radius: 30px;
            @media #{$md,$xs}{
                width: 100%;
            }
        }
    }
    &-style-2 {
        & .it-testimonial-3-play-icon {
            & a {
                background-color: var(--it-theme-5);
                height: 152px;
                width: 152px;
                line-height: 152px;
                @media #{$xs}{
                    height: 75px;
                    width: 75px;
                    line-height: 73px;               
                }
                @media #{$sm}{
                    height: 115px;
                    width: 115px;
                    line-height: 113px;               
                }
                & svg {
                    height: 45px;
                    @media #{$xs}{
                        height: 17px;           
                    }
                }
            }
        }
        & .it-testimonial-2-avatar-info span {
            color: var(--it-theme-5);
        }
        & .it-testimonial-2-avatar-name {
            font-weight: 600;
            font-family: var(--it-ff-oxanium);
        }
    }
    &-inner-style {
        & .it-testimonial-3-play-icon {
            background-color: var(--it-gray-1);
            &::before {
                background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg' transform='rotate(0)'%3E%3Cg transform='rotate(90 100 100)'%3E%3Cpath d='M0,0 L0,200 Q0,0 200,0 Z' fill='%23F0F4F5' /%3E%3C/g%3E%3C/svg%3E");
            }
            &::after {
                background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg' transform='rotate(0)'%3E%3Cg transform='rotate(90 100 100)'%3E%3Cpath d='M0,0 L0,200 Q0,0 200,0 Z' fill='%23F0F4F5' /%3E%3C/g%3E%3C/svg%3E");
            }
        }
        & .it-testimonial-3-right .it-testimonial-2-content-wrap {
            background-color: var(--it-common-white);
        }
    }
}
.it-testimonial-4 {
    &-area {
        @include background;
        background-color: #CD935A;
        @media #{$md,$xs}{
            padding: 100px 0;
        }
    }
    &-item {
        text-align: center;
    }
    &-text {
        & p {
            font-size: 40px;
            line-height: 1.25;
            margin-bottom: 55px;
            color: var(--it-common-white);
            font-family: var(--it-ff-newyork);
            @media #{$md}{
                font-size: 30px;
            }
            @media #{$xs}{
                font-size: 24px;
            }
        }
    }
    &-quote {
        @media #{$xs}{
            margin-bottom: 30px !important;
        }
        & svg {
            @media #{$xs}{
                height: 20px;
            }
        }
    }
    &-avatar {
        &-thumb {
            margin-right: 15px;
            flex: 0 0 auto;
            & img {
                height: 72px;
                width: 72px;
                border-radius: 50%;
                @media #{$xs}{
                    height: 42px;
                    width: 42px;
                }
            }
        }
        &-title {
            font-size: 24px;
            margin-bottom: 5px;
            color: var(--it-common-white);
            font-family: var(--it-ff-spartan-semibold);
            @media #{$xs}{
                font-size: 18px;
            }
        }
        &-info {
            & span {
                font-size: 16px;
                color: rgba(255, 255, 255, 0.8);
                @media #{$xs}{
                    font-size: 14px;
                }
            }
        }
    }
}

.it-testimonial-dots {
    & .swiper-pagination-bullet {
        height: 14px;
        width: 14px;
        border-radius: 50%;
        position: relative;
        display: inline-block;
        margin: 0 6px !important;
        z-index: 2;
        opacity: 1;
        background-color: var(--it-text-body);
        &::after{
            position: absolute;
            content: '';
            top: 50%;
            left: 50%;
            height: 100%;
            width: 100%;
            border-radius: 50%;
            border: 1px solid var(--it-theme-1);
            transform: translate(-50%,-50%) scale(1.6);
            opacity: 0;
            visibility: hidden;
            transition: .3s;
        }
    }
    & .swiper-pagination-bullet-active {
        background-color: var(--it-theme-1);        
        &::after{
            opacity: 1;
            visibility: visible;
        }
    }
}