@import '../../../scss/base';

.slider-inner-wrapper {
    .swiper-wrapper{
        padding-bottom: 70px;
    }
    .trasted-client {
        position: absolute;
        left: 60px;
        top: 60px;
        z-index: 2;
        max-width: 300px;
        span  {
            margin-bottom: 44px;
            font-weight: 600;
            font-size: 30px;
            line-height: 40px;
            font-family: var(--titleFont);
            text-transform: uppercase;
            color: var(--titleColor);
            background: var(--whiteColor);
        }
    }
    .rt--slider {
        &.animation_on:hover {
            .rt_slider_animation_LeftToRight,
            .rt_slider_animation_RightToLeft{
                animation-play-state: paused;
            }
        }
        &.slider-style1 {
            display: flex;
            align-items: center;
            gap: 30px;
            will-change: transform;
            @media #{$device-sm} {
                padding-bottom: 0;
            }
            .rt_slider_animation_LeftToRight{
                animation: rtSliderMarquee_1 60s linear infinite;
            }
            .rt_slider_animation_RightToLeft{
                animation: rtSliderMarquee_2 60s linear infinite;
            }
            .slider-subtitle {
                color: #110C2D;
                font-size: 15px;
                font-style: normal;
                font-weight: 400;
                line-height: 26px;
            }
            .rt-slider-navigations {
                .rt-slider-navigation {
                    z-index: 1;
                    width: auto;
                    .slider-button {
                        i {
                            color: var(--primaryColor);
                            font-size: 16px;
                        }
                    }
                }
                .swiper-pagination-bullets {
                    text-align: center;
                    position: absolute;
                    bottom: -11px;
                    left: 0;
                    .swiper-pagination-bullet {
                        height: 8px;
                        width: 8px;
                    }
                    .swiper-pagination-bullet-active {
                        background: var(--primaryColor);
                    }
                }
            }
            .single--item {
                position: relative;
                background: var(--whiteColor);
                padding: 40px 55px 45px 40px;  
                background: #F9F8FF;
                border: 1px solid #DDD8F9;
                @media #{$device-sm} {
                    padding: 20px;
                }
                .content--box {              
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 25px;
                    @media #{$device-sm} {
                        .quote-icon {
                            position: absolute;
                            right: 15%;
                        }
                    }
                    
                    .slider-subtitle {  
                        margin: 0;                  
                    }
                    .slider-title {
                        margin-bottom: 0;
                        line-height: 1.25;
                    }    
                    .slider-btn {
                        margin-top: 40px;
                    }
                    .content-text-thumb {
                        display: flex;
                        align-items: center;
                    }
                }
                .description{                
                    margin-left: 20px;
                }    
                .review-body {
                    .desc {
                        color: #110C2D;
                        font-size: 20px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 28px;
                        margin-bottom: 25px;
                        p {
                            margin: 0;
                        }
                    }
                }
                .review-rating {
                    padding: 0 !important;
                }
                .banner-image{
                    position: relative;
                    img.banner-img {
                        height: 50px;
                        width: 50px;
                        border-radius: 50%;
                    }
                    .quote{
                        position: absolute;
                        top: 0px;
                        right: -17px;
                        top: 16px;
                    }
                }
    
                .review-end{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
                
            }
        }
        &.slider-style2 {
            .swiper-wrapper {
                padding-bottom: 0;
            }
            .slider-subtitle {
                font-weight: 500;
                font-size: 14px;
                line-height: 17px;
                color: #74787C;
            }
            .rt-slider-navigations {
                position: relative;
                top: -80px;
                .rt-slider-navigation {
                    top: 50%;
                    transform: translate(-50%, -50%);
                    z-index: 1;
                    width: auto;
                    bottom: 0;
                    .slider-button {
                        top: auto;
                        bottom: 0;
                        i {
                            color: #fff;
                            font-size: 16px;
                        }
                        &.rt-slider-prev {
                            left: 43%;
                        }
                        &.rt-slider-next {
                            left: 43%;
                        }
                    }
                }
                .swiper-pagination-bullets {
                    text-align: center;
                    position: absolute;
                    bottom: -5px;
                    .swiper-pagination-bullet-active {
                        background: #fff;
                    }
                }
            }
           
            .single--item {
                position: relative;
                padding: 40px 30px 50px 40px;
                border-radius: 4px;
                display: flex;
                align-items: center;
                gap: 50px;
                @media #{$device-md, $device-sm} {
                    flex-direction: column;
                    align-items: flex-start;
                    padding: 20px;
                    gap:20px;

                }
                .review-rating {
                    background: transparent;
                    padding-bottom: 35px;
                    margin-bottom: 10px;
                    display: flex;
                    align-items: center;
                    border-radius: 0px;
                    padding: 0px;
                    display: block;
                    max-width: max-content;
                    .star-rating{
                        .star {
                            color: #FFD335;                
                        }
                    }
                }
                .content--box {              
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: space-between;
                    .slider-subtitle {  
                        margin: 0;      
                        color: #33B89F;        
                    }
                    .slider-title {
                        font-weight: 700;
                        font-size: 22px;
                        line-height: 26px;
                        margin-bottom: 5px;
                    }    
                    .slider-btn {
                        margin-top: 40px;
                    }
                    .content-text-thumb {
                        display: flex;
                    }
                }
                .description{                
                    margin-left: 0;
                }    
                .review-body {
                    margin-top: 30px;
                    .desc {
                        font-size: 20px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 30px;
                        max-width: 70%;
                        margin-bottom: 25px;
                        text-transform: capitalize;
                        @media #{$device-md, $device-sm} {
                            max-width: 100%;
                        }
                        p {
                            margin: 0;
                            line-height: 32px;
                        }
                    }
                    .star-rating{
                        .star{
                            position: relative;
                            color: var(--titleColor);
                            display: inline-block;
                            font-family: rt-icons;
                            font-size: 20px;
                            font-style: normal;
                            font-weight: 400;
                            height: 16px;
                            line-height: 27px;
                            text-align: center;
                            text-decoration: inherit;
                            vertical-align: top;
                            width: 26px;
                            
                        }
                    }
                    .quote-icon {
                        margin-bottom: 15px;
                    }
                }
    
                .banner-image{
                    position: relative;
                    display: contents;
                    border-radius: 6px;
                    @media #{$device-sm} {
                        position: relative;
                        max-width: 100%;
                        overflow: hidden;
                        display: flex;
                        justify-content: center;
                    }
                    img {
                        border-radius: 6px;
                        min-width: max-content;
                        display: block;
                    }
                    .quote{
                        position: absolute;
                        top: 0px;
                        right: -17px;
                        top: 16px;
                    }
                }
    
                .review-end{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
                
            }
        }    
        &.slider-style3 {
            .rt--slider {
                .single--item {
                    row-gap: 20px;
                    .inner-testimonials{
                        padding-left: 60px;
                        @media only screen and (min-width: 768px) and (max-width: 991px) {
                            margin-top: 20px !important;
                            padding-left: 20px;
                        }
                        @media only screen and (max-width: 767px) {
                            padding-left: 15px;
                        }
                        .desc p{
                            max-width: 100%;
                            color: #737477;
                            font-size: 24px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 38px;
                            margin-top: 50px;
                            @media only screen and (max-width: 767px) {
                                font-size: 18px;
                            }
                        }
                        .author-area {
                            display: flex;
                            align-items: center;
                            gap: 25px;
                            img{
                                height: 60px;
                                width: 60px;
                                border-radius: 50%;
                            }
                            .author{
                                .slider-title{
                                    margin-bottom: 0;
                                    line-height: 1.24;
                                }
                            }
                        }
                    }

                }
            }
        }
        &.slider-style4 {
            .rt--slider {
                .single--item {
                    .review-body {
                        .icons {
                            height: 60px;
                            width: 60px;
                            line-height: 60px;
                            text-align: center;
                            color: var(--whiteColor);
                            background: var(--primaryColor);
                            display: inline-block;
                            position: absolute;
                            top: -30px;
                            left: -30px;
                            font-size: 30px;
                        }
                        .desc {
                            p {
                                font-size: 20px;
                                line-height: 40px;
                                font-weight: 400;
                                color: #7b8696;
                                margin: 0;
                                display: inline;
                            }
                            i {
                                color: var(--primaryColor);
                            }
                        }
                    }
                    .content--box {
                        margin-top: 45px;
                        .content-text-thumb {
                            display: flex;
                            align-items: center;
                            gap: 20px;
                            .description {
                                .slider-title {
                                    margin: 0;
                                    font-size: 20px;
                                    line-height: 32px;
                                    font-weight: 600;
                                   a {
                                        color: var(--bodyColor);
                                        &:hover {
                                            color: var(--primaryColor);
                                        }
                                   }
                                    
                                }
                                .slider-subtitle {
                                    margin: 0;
                                    color: var(--primaryColor);
                                }
                            }
                        } 
                    }

                }
            }
        }
    } 
}

//Review Rating
.review-rating {
    padding-bottom: 35px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    padding: 3px 7px;
    display: block;
    max-width: max-content;
    .star-rating {
        position: relative;
        .star {
            position: relative;
            color: var(--primaryColor);
            display: inline-block;
            font-family: rt-icons;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            height: 16px;
            line-height: 27px;
            text-align: center;
            text-decoration: inherit;
            vertical-align: top;
            width: 26px;
        }
        .star.star-full::before {
            content: "";
            font-family: 'rt-icons';
            position: absolute;
            left: 0;
            top: 0;
        }
        .star.star-half::before {
            content: "";
            position: absolute;
            font-family: 'rt-icons';
            left: 0;
            top: 0;
        }
        .star.star-empty::before {
            content: "";
            font-family: 'rt-icons';
            position: absolute;
            left: 0;
            top: 0;
        }
        
    }
}


//Slider Nav
.rt-slider-navigation {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 110%;
    .rt-slider-prev,
    .rt-slider-next {
        display: inline-block;
        text-align: center;
        background: transparent;
        transition: .3s;
        &:hover {
            i {
                color: var(--secondaryColor);
            }
        }
        i {
            font-size: 26px;
            background: transparent;
            color: var(--titleColor);
            font-weight: 200;
            transition: 0.3s;
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
    }
}

//swipper slider bullets nav
.testimonial_slider_wraper {
    .swiper-pagination-bullets {
        bottom: -40px !important;
        text-align: left;
        span.swiper-pagination-bullet {
            width: 8px;
            height: 8px;
        }
        .swiper-pagination-bullet-active {
            background: var(--primaryColor);
        }
    }
}


//Swipper Pagination
#swiper-pagination {
    float: right;
    display: flex;
    align-items: end;
    position: absolute;
    top: 50%;
    right: 0;
    gap: 5px;
    max-width: max-content;
    left: 50%;
    bottom: auto;
    transform: translateX(-50%);
    z-index: 3;
    .swiper-pagination-bullet {
        cursor: pointer;
        font-size: 15px;
        border: none;
        background: var(--primaryColor);
        height: 8px;
        width: 8px;
        line-height: 40px;
        text-align: center;
        display: block;
        z-index: 1;
    }
}
.swiper-pagination-bullets.swiper-pagination-horizontal {
    left: 100%;
    z-index: 1;
}

//Testimonial Style 4 Nav Button
.testimonila_style4  {
    .rt-slider-navigation {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: absolute;
        left: 46%;
        top: 90%;
        transform: translate(-50%, -50%);
        z-index: 1;
        width: 110%;
        gap: 1px;
        .rt-slider-prev,
        .rt-slider-next {
            display: inline-block;
            width: 60px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background: var(--whiteColor);
            transition: .3s;
            &:hover {
                background: var(--primaryColor);
                i {
                    color: var(--whiteColor);
                }
            }
            i {
                font-size: 22px;
                background: transparent;
                color: var(--titleColor);
                font-weight: 200;
                transition: 0.3s;
                display: inline-block;
                width: 40px;
                height: 40px;
                line-height: 40px;
                text-align: center;
            }
        }
    }
}


// Swipper Clickable Slider
.hero__course .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets {
    display: flex;
    flex-direction: row;
    gap: 3px;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    .swiper-pagination-bullet {
        font-size: 0;
    }
}

@keyframes rtSliderMarquee_1 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
@keyframes rtSliderMarquee_2 {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}