// video-bx
.video-bx1{
	display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 15px 8px 8px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(var(--bs-secondary-rgb), 0.1);
	
	.video-btn{
		width: 48px;
		min-width: 48px;
		height: 48px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;		
		
		i{
			color: #fff;
			font-size: 16px;
			margin-left: 2px;
		}
	}
	span{
		font-size: 16px;
		color: var(--bs-secondary);
		font-weight: 500;
	}
	.btn-link{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: auto;
		text-decoration: none;
		font-size: 18px;
	}
	&.video-sm{
		gap: 8px;
		padding: 8px 15px 8px 8px;

		.video-btn{
			width: 35px;
			min-width: 35px;
			height: 35px;
			
			i{
				font-size: 14px;
			}
		}
		span{
		    font-size: 14px;
		}
		.btn-link{
			font-size: 16px;
			width: 20px;
			height: 20px;
		}
	}
	&.video-lg{
		gap: 15px;
		padding: 15px;

		.video-btn{
			width: 60px;
			min-width: 60px;
			height: 60px;
			
			i{
				font-size: 20px;
			}
		}
		span{
		    font-size: 18px;
		}
		.btn-link{
			font-size: 24px;
			color: #000;
			width: 30px;
			height: 30px;
		}
		@include respond('phone-land'){
			gap: 10px;
			padding: 10px;
			
			.video-btn{
				width: 42px;
				min-width: 42px;
				height: 42px;
				
				i{
					font-size: 16px;
				}
			}
			span{
				font-size: 15px;
			}
			.btn-link{
				font-size: 20px;
				width: 25px;
				height: 25px;
			}
		}
	}
}
.video-bx2{
	position: relative;
	
	span{
		font-weight: 500;
		font-size: 16px;
		display: inline-block;
		margin-left: 10px;
	}
	.video-btn {
		position: relative;
		text-align: center;
		display: inline-block;
		height: 55px;
		width: 55px;
		min-width: 55px;
		line-height: 55px;
		font-size: 20px;
		background-color: #fff;
		color: var(--bs-primary);
		border-radius: 50%;
		z-index: 1;
		
		&.video-lg{
			height: 100px;
			width: 100px;
			min-width: 100px;
			line-height: 100px;
			font-size: 32px;
			
			@include respond('phone-land'){
				height: 60px;
				width: 60px;
				min-width: 60px;
				line-height: 60px;
				font-size: 20px;
			}
		}
		&:before,
		&:after{
			content: "";
			position: absolute;
			top: 0;
			#{$dz-pos-left}: 0;
			width: 100%;
			height: 100%;
			display: block;
			background-color: rgba(255, 255, 255, 0.2);
			z-index: -1;
			-moz-transition:all 0.5;
			-o-transition:all 0.5;
			-webkit-transition:all 0.5;
			-ms-transition:all 0.5;
			transition:all 0.5;
			border-radius: 50%;
		}
		&:before{
			animation: animationSignal1;
			animation-iteration-count: infinite;
			animation-duration: 3s;
			-webkit-animation: animationSignal1;
			-webkit-animation-iteration-count: infinite;
			-webkit-animation-duration: 3s;
			transform:  scale(1);
			-moz-transform: scale(1);
			-webkit-transform: scale(1);
			-ms-transform: scale(1);
			-o-transform: scale(1);
		}
		&:after{
			animation: animationSignal2;
			animation-iteration-count: infinite;
			animation-duration: 3s;
			-webkit-animation: animationSignal2;
			-webkit-animation-iteration-count: infinite;
			-webkit-animation-duration: 3s;
			transform:  scale(1);
			-moz-transform:  scale(1);
			-webkit-transform:  scale(1);
			-ms-transform:  scale(1);
			-o-transform:  scale(1);
		}
	}
	svg{
		margin-#{$dz-pos-right}:5px;
	}
	.text{
		color:#000;
		font-weight: 500;
		font-size: 16px;
		line-height: 22px;
	}
}
.video-bx3{
	.video-btn{
		background-color: rgba(255, 255, 255, 0.8);
		width: 100px;
		height: 100px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #000;
		font-size: 30px;
		
		@include respond('phone-land'){
			width: 60px;
			height: 60px;
			font-size: 20px;		
		}
	}
}
@keyframes animationSignal1 {
	0% {
		opacity: 0.8;
		transform: scale(0.9);
		-moz-transform: scale(0.9);
		-ms-transform: scale(0.9);
		-o-transform: scale(0.9);
		-webkit-transform: scale(0.9);
	}
	100% {
		transform:  scale(1.5);
		-moz-transform:  scale(1.5);
		-ms-transform:  scale(1.5);
		-o-transform:  scale(1.5);
		-webkit-transform:  scale(1.5);
		opacity: 0;
	}
}
@-webkit-keyframes animationSignal1 {
	0% {
		transform: scale(0.9);
		-moz-transform: scale(0.9);
		-ms-transform: scale(0.9);
		-o-transform: scale(0.9);
		-webkit-transform: scale(0.9);
	}
	100% {
		transform:  scale(1.5);
		-moz-transform:  scale(1.5);
		-ms-transform:  scale(1.5);
		-o-transform:  scale(1.5);
		-webkit-transform:  scale(1.5);
		opacity: 0;
	}
}
@keyframes animationSignal2 {
	0% {
		transform: scale(0.9);
		-moz-transform: scale(0.9);
		-webkit-transform: scale(0.9);
		-ms-transform: scale(0.9);
		-o-transform: scale(0.9);
	}
	100% {
		transform:  scale(1.9);
		-moz-transform:  scale(1.9);
		-webkit-transform:  scale(1.9);
		-ms-transform:  scale(1.9);
		-o-transform:  scale(1.9);
		opacity: 0;
	}
}
@-webkit-keyframes animationSignal2 {
	0% {
		transform: scale(0.9);
		-moz-transform: scale(0.9);
		-webkit-transform: scale(0.9);
		-ms-transform: scale(0.9);
		-o-transform: scale(0.9);
	}
	100% {
		transform:  scale(1.9);
		-moz-transform:  scale(1.9);
		-webkit-transform:  scale(1.9);
		-ms-transform:  scale(1.9);
		-o-transform:  scale(1.9);
		opacity: 0;
	}
}

.video-wrapper{
	display:flex;
	align-items:center;
}
.btn-video{
	padding: 15px 20px;
	background-color:var(--bs-secondary);
	color:#fff;
}
.video-wrapper2{
	height: 750px;
    display: flex;
    align-items: center;
    justify-content: center;
	
	@include respond('laptop'){
		height: 600px;
	}
	@include respond('tab-land'){
		height: 500px;
	}
	@include respond('phone-land'){
		height: 300px;
	}
}