.dz-bnr-inr {
	video#video-background {
		width: 100%;
		height: 100%;
		object-fit: cover;
		position: absolute;
		z-index: -1;
		top: 0;
		#{$dz-pos-left}: 0;
	}
	
	&.style-1{
		overflow: hidden;
		padding-bottom: 30px;
		
		@include respond ('tab-port'){
			padding-bottom: 0;
		}
		&.dz-bnr-inr-md{
			--dz-banner-height: 500px;
			
			@include respond('laptop'){
				--dz-banner-height: 450px;
			}
			@include respond ('tab-port'){
				--dz-banner-height: 400px;
			}
			@include respond('phone-land'){
				--dz-banner-height: 350px;
			}
			@include respond('phone'){
				--dz-banner-height: 300px;
			}
		}
		&.dz-bnr-inr-sm{
			--dz-banner-height: 380px;
			
			@include respond('phone-land'){
				--dz-banner-height: 300px;
			}
			@include respond('phone'){
				--dz-banner-height: 280px;
			}
		}
		&.overlay-black-light:before,
		&.overlay-black-middle:before,
		&.overlay-black-dark:before{
			background: #07121E;
		}
		h1{
			font-weight: 600;
			color: #fff;
			margin-bottom: 15px;
			word-break: break-word;
		}
		&:after{
			content: "";
			width: 100%;
			height: calc(100% - 80px);
			position: absolute;
			bottom: 0;
			right: 0;
			z-index: 0;
			background-image: url(../../skincare/images/banner/bg.webp);
			background-repeat: no-repeat;
			background-position: right -13px top;
		}
		@include respond ('tab-port'){
			&:after{
				display: none;
			}
		}
		.blur1,
		.blur2{
			content: "";
			position: absolute;
			bottom: 0;
			right: 0;
			background-color: var(--bs-primary);
			width: 285px;
			height: 285px;
			border-radius: 50%;
			filter: blur(120px);
			opacity: 0.5;
			
			@include respond('tab-land'){
				display: none;
			}
		}
		.blur2{
			top: 25%;
			left: 0;
			bottom: auto;
			right: auto;
			opacity: 0.4;
			background-color: #FFCD37;
		}
		.breadcrumb{
			border-radius: 50px;
			background-color: #fff;
			padding: 10px 30px;
			box-shadow: 0 0 30px rgba(var(--bs-secondary-rgb), 0.05);
			
			@include respond ('tab-port'){
			    padding: 5px 20px 7px;
			}
			li {
				font-weight: 400;
				
				@include respond ('tab-port'){
					font-size: 14px;
				}
			}
		}
		.vertical-info{
			justify-content: center;
			padding: 85px 15px 30px;
			z-index: 1;
			
			.social-list li a{
				color: #fff;
			}
			&.left{
				border-right: 1px solid rgba(255, 255, 255, 0.1);
			}
		}
		.elip{
			position: absolute;
			top: 25%;
			left: 100px;
			border-radius: 50%;
			width: 65px;
			height: 65px;
			object-fit: cover;
			z-index: 2;
			
			@include respond('tab-land'){
				display: none;
			}
			img{
				border-radius: 50%;
			}
			&::after,
			&::before{
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: block;
				border: 1px solid #fff;
				-webkit-border-radius: 50%;
				-khtml-border-radius: 50%;
				-moz-border-radius: 50%;
				-ms-border-radius: 50%;
				-o-border-radius: 50%;
				border-radius: 50%;
				animation-iteration-count: infinite;
			}
			&::before{
				animation: animationSignal1;
				animation-duration: 3s;
				z-index: -1;
				transform: scale(1);
				transition: all .5
			}
			&::after{
				animation: animationSignal2;
				animation-duration: 3s;
				z-index: -1;
				transform: scale(1);
				transition: all .5
			}
		}
		.item1,
		.item2,
		.item3{
			position: absolute;
			z-index: 0;
			top: 35%;
			right: 32%;
			
			@include respond('phone-land'){
				display: none;
			}
		}
		.item2{
			top: auto;
			bottom: 0%;
			right: 38%;			
		}
		.item3{
			top: auto;
			bottom: 20%;
			right: 10%;		
		}
		&.dz-bnr-detail{
			h1{
				font-size: 65px;
				margin-bottom: 30px;
			}
			.dz-bnr-inr-entry{
				text-align: left;
			    padding: 140px 0 20px 20px;
			}
			.bg-half{
				position: absolute;
				width: 100%;
				bottom: 0;
				height: 200px;
				left: 0;
			}
			@include respond('laptop'){
				h1{
					font-size: 48px;
				}	
			}
			@include respond('tab-land'){
				.dz-bnr-inr-entry{
					padding: 120px 0 20px 0;
				}
				h1{
					font-size: 42px;
				}
			}
			@include respond('tab-port'){
				h1{
					font-size: 36px;
					margin-bottom: 10px;
				}
			}
			@include respond('phone'){
				h1{
					font-size: 30px;
				}
			}
		}
		&.detail-bx{
			.dz-bnr-bx{
				background-color: #fff;
				border-radius: var(--radius-lg);
				text-align: left;
				padding: 80px;
				
				h1{
					color: var(--bs-heading-color);
					font-size: 55px;
					line-height: 1.2;
					margin-bottom: 20px;
				}
				p{
					color: var(--bs-body-color);
					padding: 0;
					margin: 0;
				}
				.bottom-info{
					margin-top: 50px;
				}
				@include respond('laptop'){
					padding: 50px;
					
					h1{
						font-size: 45px;
					}
				}
				@include respond('tab-land'){
					padding: 30px;
					
					h1{
						font-size: 36px;
					}
				}
				@include respond('tab-port'){
					padding: 25px;
					
					h1{
						font-size: 30px;
						margin-bottom: 15px;
					}
					.bottom-info{
						margin-top: 20px;
					}
				}
			}
			.dz-media{
			    position: absolute;
				right: 0;
				top: 0;
				height: 100%;
				width: 60vw;
				z-index: 0;
				
				img{
					height: 100%;
					object-fit: cover;
				}
			}
		}
	}
	&.style-2{
		overflow: hidden;
		display: flex;
		margin-bottom: -50px;
		
		@include respond('laptop'){
			margin-bottom: 0;
		}		
		p{
			color: var(--bs-body-color);
			margin-left: 0;
			margin-right: 0;
		}
		@include respond ('phone-land'){
			margin-bottom: 0;
		}
		.container {
			height: auto;
		}
		&.dz-bnr-inr-lg{
			--dz-banner-height: 800px;
			
			@include respond('laptop'){
				--dz-banner-height: 600px;
			}
			@include respond ('tab-port'){
				--dz-banner-height: 400px;
			}
			@include respond('phone-land'){
				--dz-banner-height: 350px;
			}
			@include respond('phone'){
				--dz-banner-height: 300px;
			}
		}
		&.dz-bnr-inr-md{
			--dz-banner-height: 660px;
			
			@include respond('laptop'){
				--dz-banner-height: 550px;
			}
			@include respond ('tab-port'){
				--dz-banner-height: 400px;
				
				h1{
					font-size: 30px;
				}
			}
			@include respond('phone-land'){
				--dz-banner-height: 350px;
			}
			@include respond('phone'){
				--dz-banner-height: 300px;
			}
		}
		&.dz-bnr-inr-sm {
			--dz-banner-height: 580px;
			
			.bnr-media{
				height: 400px;
				width: 400px;
				min-width: 450px;
				margin: 0 50px 80px 0;
			}
			@include respond ('tab-port'){
				--dz-banner-height: 400px;
			}
			@include respond ('phone-land'){
				--dz-banner-height: 350px;
			}
			@include respond ('phone'){
				--dz-banner-height: 280px;
			}
		}
		h1{
			line-height: 1.2;
		}
		.breadcrumb{
			border-radius: 50px;
			background-color: #fff;
			padding: 10px 30px;
			box-shadow: 0 0 30px rgba(var(--bs-secondary-rgb), 0.05);
			
			@include respond ('tab-port'){
			    padding: 5px 20px 7px;
			}
			li {
				font-weight: 400;
				
				@include respond ('tab-port'){
					font-size: 14px;
				}
			}
		}
		.breadcrumb-row{
			@include respond ('tab-port'){
				text-align: center;
			}
			ul .breadcrumb-item + .breadcrumb-item::before{
				@include respond ('tab-port'){
					font-size: 12px;
					top: 2px;				
				}
			}
		}
		.bnr-info{
			padding: 65px 0 0;
			position: relative;
			z-index: 10;
			
			@include respond ('tab-port'){
				padding: 0;
				text-align: center;
			}
		}
		.dz-bnr-inr-entry{
			.dz-bnr-inr-flex{
				text-align: start;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 0;
				height: auto;
				min-height: auto;
				gap: 30px;
				
				@include respond ('tab-port'){
					justify-content: center;
				}
			}
		}
		.banner-shape{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: auto;
			z-index: 2;
		}
		&::after{
			content: "";
			background-image: url(../../dentist/images/hero-banner/pattern.webp);
			height: 100%;
			position: absolute;
			width: 100%;
			left: 0;
			top: 0;
			z-index: -1;
		}
		.banner-shape2,
		.banner-shape3 {
			position: absolute;
			top: 0;
			height: 160px;
			z-index: 1;
			-webkit-filter: drop-shadow(5px 5px 15px rgba(0, 0, 0, 0.01));
			filter: drop-shadow(5px 5px 15px rgba(0, 0, 0, 0.01)); 
		}
		.banner-shape2 {
			left: 0; 
		}
		.banner-shape3 {
			right: 0;
			transform: rotateY(180deg);
		}
		.banner-shape4,
		.banner-shape5 {
			width: 300px;
			aspect-ratio: 1 / 1;
			border-radius: 50%;
			height: auto;
			position: absolute;
			background-color: var(--bs-primary);
			filter: blur(100px);
			z-index: -1;
			opacity: 0.2;
		}
		.banner-shape4 {
			top: 0;
			left: 0;
		}
		.banner-shape5 {
			top: 0;
			right: 0; 
		}
		.item1,
		.item2,
		.item3{
			position: absolute;
			z-index: 9;
			
			@include respond ('tab-port'){
				display: none;
			}
		}
		.item1{
			bottom: -10px;
			left: 50px;
			width: 135px;
			
			@include respond('wide-desktop'){
				bottom: 0px;
				left: 30px;
				width: 80px;
			}
		}
		.item2{
			top: 35%;
			left: 100px;
			width: 115px;
			
			@include respond('wide-desktop'){
				top: 30%;
				left: 35px;
				width: 60px;
			}
		}
		.item3{
			right: 60px;
			bottom: 50px;
			width: 125px;
			
			@include respond('wide-desktop'){
				right: 40px;
				bottom: 30px;
				width: 80px;
			}
		}
		.bnr-media{
			height: 500px;
			width: 500px;
			min-width: 500px;
			margin: 0 30px 80px 0;
			text-align: center;
			display: flex;
			align-items: end;
			justify-content: center;
			position: relative;
			
			@include respond('wide-desktop'){
				height: 450px;
				width: 450px;
				min-width: 450px;
				margin: 0 50px 50px 0;
			}
			@include respond('laptop'){				
				height: 380px;
				width: 380px;
				min-width: 380px;
				margin: 0 50px 10px 0;
			}
			@include respond ('tab-port'){
				display: none;
			}
			img{
				min-width: 120%;
				position: absolute;
				top: 20%;
			}
			&::before{
				content: "";
				width: 100%;
				background: linear-gradient(to bottom, var(--bs-primary) 0%, rgba(0, 0, 0, 0) 100%);
				aspect-ratio: 1 / 1;
				position: absolute;
				border-radius: 50%;
				z-index: -1;
				top: 30%;
				left: 50%;
				opacity: 0.15;
				transform: translateX(-50%);
			}
		}
		.form-wrapper{
			min-width: 530px;
			width: 530px;
			z-index: 3;
			box-shadow: 0 0 50px rgba(var(--bs-secondary-rgb), 0.1);
			border-radius: var(--radius-xl);
			margin-top: 200px;
			
			@media only screen and (max-width: 1380px) {
				min-width: 480px;
				width: 480px;
				margin-top: 150px;
			}
			@include respond ('tab-port'){
				min-width: 100%;
				width: 100%;
				margin-top: 0;
			}
		}
		&.dz-bnr-content{
			.info-widget{
				margin-top: 40px;
				margin-bottom: 40px;
			}
			.bnr-info{
				margin-bottom: 30px;
			}
			@include respond ('tab-land'){
				.info-widget{
					margin-top: 25px;
					margin-bottom: 25px;
				}
			}
			@include respond ('tab-port'){
				.dz-bnr-inr-flex{
					flex-direction: column;
				}
				.dz-bnr-inr-entry{
				    padding-top: 150px !important;
				}
			}
			@include respond ('phone-land'){
				.bnr-info{
					margin-bottom: 0;
				}
			}
			@include respond ('phone-land'){
				.dz-bnr-inr-entry{
				    padding-top: 120px !important;
				}
			}
		}
		&.dz-bnr-detail{
			margin-bottom: 0px;
			
			h1{
				font-size: 65px;
				font-weight: 600;
				margin-bottom: 15px;
			}
			.bnr-info{
				width: 50%;
				padding-right: 60px;
				
				.dz-media{
					height: 300px;
					
					img{
						height: 100%;
						object-fit: cover;
					}
				}
				.media-wrapper{
					margin-top: 80px;
				}
			}
			.detail-media{
				width: 50%;
				z-index: 4;
				position: relative;
				border-radius: var(--radius-xl);
				overflow: hidden;
			}
			.dz-bnr-inr-entry{
				padding-top: 200px !important;
				
				.dz-bnr-inr-flex {
					align-items: end;
				}
			}
			.media-info{
				position: absolute;
				bottom: 20px;
				right: 28px;
				left: 28px;
				background-color: #fff;
				border-radius: 20px;
				padding: 15px 20px 15px 25px;
				display: flex;
				justify-content: space-between;
				gap: 15px;
				
				@include respond('phone-land'){
					flex-direction: column;
					padding: 15px;
				}
				@include respond('phone'){
					bottom: 15px;
					right: 15px;
					left: 15px;
				}
			}
			@include respond('laptop'){
				.bnr-info{
					padding-right: 30px;
				}
				h1{
					font-size: 55px;
				}
			}
			@include respond ('tab-land'){
				h1{
					font-size: 48px;
				}
				.bnr-info{
					padding-right: 0;
					width: 100%;
					
					.media-wrapper {
						margin-top: 30px;
					}
				}
				.dz-bnr-inr-entry{
					padding-top: 120px !important;
				}
				.detail-media{
					display: none;
				}
			}
			@include respond ('tab-port'){
				h1{
					font-size: 36px;
				}
				p{
					margin-left: auto;
					margin-right: auto;
				}
			}
			@include respond ('phone-land'){
				.bnr-info{
					.dz-media{
						height: 250px;
					}
				}
			}
			@include respond ('phone'){
				h1{
					font-size: 32px;
				}
				.bnr-info{
					.dz-media{
						height: 180px;
					}
				}
			}
		}
	}
}

.header-transparent ~ .page-content .dz-bnr-inr.style-1 .dz-bnr-inr-entry{
    @include respond('phone'){
		padding: 70px 0 20px 0;
	}
}
.header-transparent ~ .page-content .dz-bnr-inr.style-2 .dz-bnr-inr-entry{
    padding: 50px 0 30px 0;
	
	@include respond('phone'){
		padding: 50px 0 10px 0;
	}
}

@keyframes animationSignal1 {
	0% {
		opacity: .8;
		transform: scale(.9)
	}

	100% {
		transform: scale(1.5);
		opacity: 0
	}
}


@keyframes animationSignal2 {
	0% {
		opacity: .8;
		transform: scale(.9)
	}

	100% {
		transform: scale(1.9);
		opacity: 0
	}
}