/*==========================================================================
Testimonial CSS
==========================================================================*/
.testimonial__area {
    position: relative;
    z-index: 1;
    overflow: hidden;
    &-shape {
        position: absolute;
        top: -210px;
        right: 20px;
        z-index: -1;        
    }
    &-item {
        border: 1px solid var(--color-10);
        padding: 50px;
        padding-bottom: 45px;
        transition: 0.4s;
        position: relative;
        &-icon {
            position: absolute;
            right: 50px;
            bottom: 45px;
            color: var(--text-heading-color);
            opacity: 0.05;
            font-size: 50px;
        }
        &-client {
            display: flex;
            align-items: center;
            gap: 30px;
            margin-bottom: 30px;
            &-image {
                img {
                    width: 80px;
                    height: 80px;
                    max-width: 80px;
                    object-fit: cover;
                    border-radius: 50% !important;
                }
            }
            &-title { 
                h5 {
                    transition: 0.4s;
                } 
                span {
                    color: var(--color-2);
                    transition: 0.4s;
                }
            }
        }
        p {
            font-size: 19px;
            line-height: 34px;
            transition: 0.4s;
        }
        &-reviews {
            margin-top: 30px;
            i {
                color: var(--primary-color-1);
                transition: 0.4s;
            }
        }
        &:hover {
            background: var(--primary-color-1);
            border-color: var(--primary-color-1);
            p {
                color: var(--text-white);
            }
            .testimonial__area-item {
                &-icon {
                    color: var(--text-white);
                    opacity: 0.09;
                }
                &-client-title {
                    h5 {
                        color: var(--text-white);                 
                    }
                    span {
                        color: var(--color-9);                 
                    }
                }
                &-reviews i {
                    color: var(--text-white);
                }
            }
        }
    }
	&-button {
		padding-right: 23px;
		&-next {			
            display: inline-block;
            position: static;
            margin: 0;
            margin-left: 40px;
			i {
                width: 60px;
                height: 60px;
                line-height: 60px;
                display: inline-block;
                text-align: center;
                border: 1px solid var(--color-10);
                font-size: 22px;
                color: var(--text-heading-color);
                border-radius: 50%;
                transition: 0.4s;	
                &:hover {
                    background: var(--primary-color-1);
                    color: var(--text-white);
                    border-color: var(--primary-color-1);
                }  
			}
		}
		&-prev {		
			display: inline-block;
			position: static;
            margin: 0;
			i {
                width: 60px;
                height: 60px;
                line-height: 60px;
                display: inline-block;
                text-align: center;
                border: 1px solid var(--color-10);
                font-size: 22px;
                color: var(--text-heading-color);
                border-radius: 50%;
                transition: 0.4s;	
                &:hover {
                    background: var(--primary-color-1);
                    color: var(--text-white);
                    border-color: var(--primary-color-1);
                }  
			} 
		}
	}
}
/*==========================================================================
Testimonial Two CSS
==========================================================================*/
.testimonial__two {
    &-item {
        padding: 40px;
        box-shadow: var(--box-shadow-2);
        &-top {
            display: flex;
            align-items: center;
            gap: 30px;
            margin-bottom: 20px;
            img {
                max-width: 60px !important;
            }
            &-reviews {
                h6 {
                    font-size: 17px;
                    line-height: 27px;
                }
                ul {
                    padding: 0;
                    margin: 0;
                    li {
                        display: inline-block;
                        i {
                            color: var(--primary-color-1);
                        }
                    }
                }
            }
        }
        &-bottom {
            display: flex;
            align-items: center;
            gap: 20px;
            border: 1px solid var(--border-color-1);
            padding: 20px;
            margin-top: 40px;
            border-radius: 6px;
            position: relative;
            &::before {
                content: '';
                position: absolute;
                left: 30px;
                top: -10px;
                transform: rotate(45deg);                
                width: 20px;
                height: 20px;
                background: var(--bg-white);
                border-top: var(--border-color-1) solid 1px;
                border-left: var(--border-color-1) solid 1px;                
            }
            img {
                max-width: 60px !important;
                border-radius: 50% !important;
            }
        }
    }
}
@media (max-width: 1399px) {
    .testimonial__area {
        &-item {
            padding: 40px 30px;
            padding-bottom: 35px;
            &-icon {
                right: 30px;
                bottom: 40px;
            }
            &-client {
                margin-bottom: 25px;
            }
            &-reviews {
                margin-top: 25px;
            }
        }
	}
    .testimonial__two-item {
        padding: 40px 30px;
    }   
}
@media (max-width: 991px) {
    .testimonial__two-item {
        padding: 35px 25px;
    }    
}
@media (max-width: 359px) {
    .testimonial__area {
        &-item {
            padding: 35px 30px;
            padding-bottom: 30px;
            &-icon {
                right: 30px;
                bottom: 35px;
            }
            &-client {
                gap: 20px;
                &-image img {
                    width: 65px;
                    height: 65px;
                    max-width: 65px;
                }                
            }
            p {
                font-size: 15px;
                line-height: 28px;
            }
        }
	}   
}