

/* ====================== [ Start Testimonials ] ====================== */

.testimonials{

	&.grid{

		.testim{
			position: relative;

			.slick-track{
				padding-top: 15px;
			}
		}

		.item{
			position: relative;
			margin: 0 20px;

			.quote-icon{
				position: absolute;
				top: -20px;
				right: 12%;
				width: 10%;
				z-index: 2;
			}

			.cont{
				padding: 50px 40px 40px;
				border: 10px solid #f7f7f7;
				border-top: 0;
				position: relative;

				&:after, &:before{
					content: '';
					position: absolute;
					height: 10px;
					background: #f7f7f7;
					top: 0;
				}

				&:after{
					width: 75%;
					left: 0;
				}

				&:before{
					width: 5%;
					right: 0;
				}

				p{
					font-size: 18px;
					font-weight: 400;
					font-style: italic;
					color: #333;
				}
			}

			.info{
				margin-top: 30px;
				padding-left: 30px;
				position: relative;

				&:after{
					content: '';
					width: 0;
					height: 0;
					border-top: 25px solid #f7f7f7;
					border-right: 30px solid transparent;
					position: absolute;
					left: 100px;
					top: -30px;
				}

				.author{
					width: 70px;
					height: 70px;
					border-radius: 50%;
					overflow: hidden;
					display: table-cell;

					img{
						width: 100%;
						height: 100%;
						object-fit: cover;
						object-position: center;
					}
				}

				h6{
					display: table-cell;
					vertical-align: middle;
					padding-left: 20px;
					font-size: 16px;

					span{
						color: $main-color;
						font-size: 13px;
						font-weight: 400;
						margin-top: 5px;
						display: block;
					}
				}
			}
		}

		.lit-box{
			
			.cont{
				background: #fff;
				box-shadow: 0px 10px 30px rgba(0,0,0,0.05);
			}

			.info{
				
				&:after{
					border-top-color: #fff !important;
				}
			}
		}

		.navs{
			position: absolute;
			top: 30%;
			left: 0;
			width: 100%;

			span{
				padding: 10px 20px;
				background: #f8f4f3;
				cursor: pointer;
				position: absolute;
				top: 0;
				left: 0;

				&:hover{
					background: $main-color;
					color: #fff;
				}
			}

			.next{
				left: auto;
				right: 0;
			}
		}
	}

	&.bg-img{

		.item{

			.cont{
				border-color: rgba(255,255,255,.15);

				&:after, &:before{
					background: rgba(255,255,255,.15);
				}

				p{
					color: #fff;
				}
			}

			.info{
				
				&:after{
					border-top-color: rgba(255,255,255,.15);
				}
			}
		}

		.navs{

			span{
				color: $main-color;

				&:hover{
					background: $main-color;
					color: #fff;
				}
			}
		}
	}
}

/* ====================== [ End Testimonials ] ====================== */