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

.testimonials{

	&.grid{
		position: relative;

		&:before{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: url(/assets/img/dots.png);
			background-repeat: repeat;
			opacity: .1;
			z-index: -1;
		}

		.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: 80px 50px;
				border: 4px solid rgba(255,255,255,.1);
				border-top: 0;
				position: relative;

				&:after, &:before{
					content: '';
					position: absolute;
					height: 4px;
					background: rgba(255,255,255,.1);
					top: 0;
				}

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

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

				p{
					color: #fff;
					font-family: 'Cinzel', serif;
					font-size: 18px;
					font-weight: 400;
				}
			}

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

				&:after{
					content: '';
					width: 0;
					height: 0;
					border-top: 25px solid rgba(255,255,255,.1);
					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;
			}
		}
	}
}

.block-sec{

	.vid-area{
        position: absolute;
        top: -100px;
        left: 10%;
        padding: 30px 15px;
        background: #ffff;
        text-align: center;
        z-index: 2;
        
        &:after{
            content: '';
            position: absolute;
            top: 0px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            background: #fff;
            opacity: .2;
            z-index: -1;
        }

		.vid-icon{
            margin-top: 50px;

			.vid{
				width: 40px;
				height: 40px;
				border-radius: 50%;
				text-align: center;
				line-height: 40px;
				border: 2px solid #000;
				
				span{
					font-size: 10px;
					color: #000;
				}
			}
        }
        
        .text{
            color: #000;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            transform: rotate(-90deg);
            margin-top: 30px;
        }
	}

	.testim-box{
		position: relative;
        color: #000;
		padding: 80px 40px;
        margin-bottom: -120px;
        z-index: 2;
        
        &:after{
            content: "";
            position: absolute;
            left: -15px;
            top: -15px;
            right: -15px;
            bottom: -15px;
            background: #fff;
            opacity: .05;
            z-index: -4;
        }

        &:before{
            content: "";
            position: absolute;
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 0px;
            background: #272727;
            z-index: -1;
        }

		.head-box{

			h6{
				color: $main-color;
				font-size: 12px;
				font-weight: 300;
				text-transform: uppercase;
				letter-spacing: 4px;
				margin-bottom: 10px;
			}

			h4{
				margin-bottom: 40px;
			}
		}

		.item{

			p{
				font-size: 17px;
				margin-bottom: 30px;
				padding-bottom: 30px;
				border-bottom: 1px solid rgba(0,0,0,0.05);
			}

			.info{

				.img{
					display: table-cell;
					vertical-align: middle;

					.img-box{
						width: 70px;
						height: 70px;
						border-radius: 50%;
						overflow: hidden;
					}
				}

				.cont{
					display: table-cell;
					vertical-align: middle;
					padding-left: 15px;

					.author-name{
						font-size: 16px;
						margin-bottom: 5px;
						letter-spacing: 2px;
						text-transform: uppercase;
					}

					.author-details{
						font-size: 13px;
						font-weight: 300;
						text-transform: uppercase;
					}
				}
			}
		}

		.slick-dots{
			text-align: right;
		}

		.slick-dots li{
			width: 7px;
			height: 7px;
			border-radius: 50%;
			border: 1px solid $main-color;

			&.slick-active{
				background: $main-color;
			}

			button{
				display: none;
			}
		}
	}
}

.testimonials2{
	margin-top: 120px;

	.sec-head{

		h6{
			color: $main-color;
			margin-bottom: 10px;
		}

		h3{
			font-size: 50px;
		}
	}

	.box{
		position: relative;
		margin-top: -120px;
		background: #212121;
		padding: 120px 80px;

		.qoute-icon{
			position: absolute;
			top: 30px;
			right: -60px;
			width: 120px;
			height: 120px;
			line-height: 120px;
			text-align: center;
			background: $main-color;

			img{
				width: 60px;
			}
		}
	}

	.item{
		margin: 10px;
		padding: 40px 30px;
		border-radius: 5px;
		border: 5px solid rgba(255,255,255,.03);
		position: relative;

		.qoute-img{
			position: absolute;
			top: 50px;
			right: 50px;
			width: 40px;
		}

		p{
			font-size: 13px;
			font-weight: 300;
		}

		.info{

			.author{
				display: flex;
			}

			.img{
				width: 70px;
				height: 70px;
				border-radius: 50%;
				border: 2px solid $main-color;
				overflow: hidden;
				margin: 0 0 20px;
			}

			.cont{
				padding-left: 25px;
			}

			.author-name{
				letter-spacing: 1px;
				font-weight: 400;
				margin-top: 5px;
			}

			.author-details{
				font-size: 13px;
				color: #999;
			}
		}
	}

	.slick-dots{
		bottom: -30px;
	}

	.slick-dots li{
		width: 20px;
		height: 3px;
		border-radius: 0;
		border: 0;
		background: #ccc;

		&.slick-active{
			background: $main-color;
			height: 5px;
		}

		button{
			display: none;
		}
	}

	.arrows{

		.next, .prev{
			position: absolute;
			right: -50px;
			top: 50%;
			width: 50px;
			height: 50px;
			line-height: 55px;
			text-align: center;
			font-size: 20px;
			border: 1px solid #eee;
			border-radius: 50%;
			opacity: 0;
			transition: all .4s;

			&:hover{
				border-color: $main-color;
			}
		}

		.prev{
			right: auto;
			left: -50px;
		}
	}

	&:hover{

		.arrows{

			.next, .prev{
				opacity: 1;
				right: 0;
			}

			.prev{
				left: 0;
			}
		}
	}
}

.bg-blc{
	position: relative;

	&:after{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url(/assets/img/dots2.png);
		opacity: .8;
		z-index: -1;
	}
}

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