.hero_video-layout {
	--global-row-spacing: 0;
	position: relative;
	color: #ffffff;
	overflow: hidden;
	height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: 800px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-bottom: max(6.25rem, calc(7.5 * var(--su)));
}

.hero_video-layout::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.05) 100%);
}

.hero_video-layout .hero-bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

.hero_video-layout.small-heading .pk-heading {
	max-width: 60%;
}

.hero_video-layout h1 {
	color: var(--odnhn-white-100);
	margin-bottom: max(2rem, calc(3 * var(--su)));
	font-weight: 700;
	font-size: var(--scaling-h1-big) !important;
}

.hero_video-layout .video-toggle {
	position: absolute;
	bottom: max(1.5rem, calc(1.5 * var(--su)));
	left: max(1.5rem, calc(1.5 * var(--su)));
	display: block;
	width: max(2.5rem, calc(2.75 * var(--su)));
	height: auto;
	outline-offset: -1px;
	aspect-ratio: 1;
	border-radius: 50%;
	cursor: pointer;
	transition: .2s ease-in-out background-color, .2s ease-in-out color, .2s ease-in-out transform;
}

.hero_video-layout .video-toggle::before {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 30%;
	height: auto;
	transform: translate(-50%, -50%);
	aspect-ratio: 1;
	background-color: var(--odnhn-white-100);
	transition: .2s ease-in-out background-color, .2s ease-in-out color, .2s ease-in-out transform;
	mask: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 14V0H14V14H8ZM0 14V0H6V14H0ZM10 12H12V2H10V12ZM2 12H4V2H2V12Z' fill='white'/%3E%3C/svg%3E%0A") no-repeat center / contain;
	  -webkit-mask: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 14V0H14V14H8ZM0 14V0H6V14H0ZM10 12H12V2H10V12ZM2 12H4V2H2V12Z' fill='white'/%3E%3C/svg%3E%0A") no-repeat center / contain;
}

.hero_video-layout .video-toggle.playing {
	background-color: var(--odnhn-black-100);
	outline: 2px solid var(--odnhn-white-100);
}

.hero_video-layout .video-toggle.playing:hover {
	background-color: var(--odnhn-white-100);
	outline: 2px solid var(--odnhn-black-100);
}

.hero_video-layout .video-toggle.playing:hover::before {
	background-color: var(--odnhn-black-100);
}

.hero_video-layout .video-toggle.paused {
	background-color: var(--odnhn-white-100);
	outline: 2px solid var(--odnhn-black-100);
}

.hero_video-layout .video-toggle.paused::before {
	mask: url("data:image/svg+xml,%3Csvg width='11' height='14' viewBox='0 0 11 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 14V0L11 7L0 14ZM2 10.35L7.25 7L2 3.65V10.35Z' fill='%23090909'/%3E%3C/svg%3E%0A") no-repeat center / contain;
	-webkit-mask: url("data:image/svg+xml,%3Csvg width='11' height='14' viewBox='0 0 11 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 14V0L11 7L0 14ZM2 10.35L7.25 7L2 3.65V10.35Z' fill='%23090909'/%3E%3C/svg%3E%0A") no-repeat center / contain;
}

.hero_video-layout .video-toggle.paused:hover {
	background-color: var(--odnhn-black-100);
	outline: 2px solid var(--odnhn-white-100);
}

.hero_video-layout .video-toggle.paused::before {
	background-color: var(--odnhn-black-100);
}

.hero_video-layout .video-toggle.paused:hover::before {
	background-color: var(--odnhn-white-100);
}

@media screen and (max-width: 992px) {
	
	.hero_video-layout.small-heading .pk-heading {
		max-width: 100%;
	}
	
}

@media screen and (max-width: 767px) {

	.hero_video-layout .video-toggle {
  		bottom: 2rem;
        left: 1.5rem;
	}
	
}