.kf-header-with-video {
	position: relative;
	width: 100%;
	color: #fff;

	margin-top: 40px;
	border-radius: 50px;
	overflow: hidden;
}

.kf-header-with-video.kf-header-with-video.kf-header-with-video.kf-header-with-video.kf-header-with-video.kf-header-with-video.kf-header-with-video {
	max-width: 100%;
}

@media (max-width: 1050px) {
    .kf-header-with-video.kf-header-with-video.kf-header-with-video.kf-header-with-video.kf-header-with-video.kf-header-with-video.kf-header-with-video {
        width: calc(100% + var(--wp--style--root--padding-left, 40px) + var(--wp--style--root--padding-right, 40px));
        max-width: none;
        margin-left: calc(-1 * var(--wp--style--root--padding-left, 40px));
        margin-right: calc(-1 * var(--wp--style--root--padding-right, 40px));
        box-sizing: border-box;
    }
}


.kf-header-with-video__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.kf-header-with-video__bg.kf-header-with-video__bg {
    margin: 0;
    width: 100%;
    max-width: none;
}

.kf-header-with-video__picture {
	display: block;
	width: 100%;
	height: 100%;
}

.kf-header-with-video__image {
	display: block;
	width: 100%;
	height: 100%;
	/* object-fit: contain; */
    object-fit: cover;
	object-position: bottom center;
}

.kf-header-with-video__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-areas: "content media";
	grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
	align-items: center;
	gap: 40px 60px;
	min-height: 750px;	
	padding: 180px 0 80px;
}

.kf-header-with-video__inner.kf-header-with-video__inner {
    margin: 0 auto;
}

.kf-header-with-video__content {
	grid-area: content;
}

.kf-header-with-video__media {
	grid-area: media;
	width: 100%;
	max-width: 100%;
	justify-self: end;
	align-self: center;

    position: relative;
    overflow: hidden;
    border-radius: 20px;

    aspect-ratio: 645 / 363;
}

.kf-header-with-video__media::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0px;
 
  border-radius: inherit;
  /* this is the border width */
  padding: 1px;
  background: linear-gradient(211.14deg, #FFFFFF 2.22%, rgba(255, 255, 255, 0) 81.17%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
}

.kf-header-with-video__media > .video-wrapper {
    max-width: 100%;
    height: 100%;
}

.kf-header-with-video__media > .video-wrapper > * {
	max-width: 100%;
}

.kf-header-with-video__media > * {
	max-width: 100%;
}

.kf-header-with-video__media iframe,
.kf-header-with-video__media video,
.kf-header-with-video__media embed,
.kf-header-with-video__media object {
	display: block;
	width: 100%;
	max-width: 100%;
}

.kf-header-with-video__overline {
	margin: 0 0 16px;

	font-weight: 600;
	font-size: clamp(14px, 13.27px + 0.23vw, 16px);
	line-height: 125%;
	letter-spacing: 8%;
	text-transform: uppercase;

}

.kf-header-with-video__title {
	margin: 0;

	font-weight: 200;
	font-style: Thin;
	font-size: var(--wp--preset--font-size--x-60);
	line-height: 100%;

}

.kf-header-with-video__title.kf-header-with-video__title {
    margin-top: .5em;
}

.kf-header-with-video__subtitle {
	margin: 20px 0 0;
	max-width: 680px;

    font-weight: 400;
    font-size: var(--wp--preset--font-size--default);
    line-height: 150%;

    opacity: .85;
}

.kf-header-with-video__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 40px;
}

.kf-header-with-video .kf-header-with-video__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-decoration: none;
	background: none;
	border: none;
	padding: 0;
	margin: 0;

	font-family: 'Degular', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;

	gap: 10px;

    padding: 14px 24px;
    border-radius: 50vw;
    text-decoration: none;
    transition: all 0.3s ease;

    border: 1px solid transparent;
}

.kf-header-with-video .kf-header-with-video__button:hover,
.kf-header-with-video .kf-header-with-video__button:focus-visible {
  transform: translateY(-1px);
}

.kf-header-with-video .kf-header-with-video__button--fill {
    background-color: #1A1A1A;
    color: #ffffff;
    border: none;
}

.kf-header-with-video .kf-header-with-video__button--fill:hover,
.kf-header-with-video .kf-header-with-video__button--fill:focus-visible {
    background-color: #5f61ff;
}

.kf-header-with-video .kf-header-with-video__button--outline {
    background-color: transparent;
    color: #1A1A1A;
    border: 1px solid #1A1A1A;
}

.kf-header-with-video .kf-header-with-video__button--outline:hover,
.kf-header-with-video .kf-header-with-video__button--outline:focus-visible {
  background-color: #5f61ff;
  border-color: #5f61ff;
}

.kf-header-with-video .kf-header-with-video__button--glass {
    --c-light: #ffffff8c;
    --c-dark: #ffffff24;
    --glass-reflex-dark: 1;
    --glass-reflex-light: 1;
    --saturation: 150%;
    background-color: #ffffff08;
    backdrop-filter: blur(8px) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    box-shadow: inset 0 0 0 1px 
 color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 1.8px 3px 0px -2px 
 color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -2px -2px 0px -2px 
 color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent), inset -3px -8px 1px -6px 
 color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -0.3px -1px 4px 0px 
 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent), inset -1.5px 2.5px 0px -2px 
 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 0px 3px 4px -2px 
 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 2px -6.5px 1px -4px 
 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 1px 5px 0px 
 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 6px 16px 0px 
 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
    transition: background-color 400ms cubic-bezier(1, 0.0, 0.4, 1), box-shadow 400ms cubic-bezier(1, 0.0, 0.4, 1);
}

.kf-header-with-video .kf-header-with-video__button--glass:hover,
.kf-header-with-video .kf-header-with-video__button--glass:focus-visible {
	--c-light: #ffffffa5;
	--c-dark: #ffffff3d;
	background-color: #ffffff35;
}

@media (max-width: 767px) {
	.kf-header-with-video__inner {
		grid-template-areas:
			"content"
			"media";
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		min-height: 0;
		padding: 140px 0px 40px;
	}

	.kf-header-with-video__content {
		max-width: 100%;
	}

	.kf-header-with-video__media {
		justify-self: stretch;
	}

    .kf-header-with-video__overline,
    .kf-header-with-video__title,
    .kf-header-with-video__subtitle {
        text-align: center;
    }

    .kf-header-with-video__buttons {
        justify-content: center;
		text-align: center;
    }
}