.layout-boxed .block-hero {
	max-width: var(--max-width-x-large);
	margin: auto;
	border-radius: var(--border-radius);
	overflow: hidden;
}

.block-hero-inner {
	width: 100%;
	margin: auto;
}

.block-hero .subheader {
	font-size: clamp(20px, 17.087px + 0.777vw, 32px);
	line-height: 1.1;
	font-weight: 400;
	margin: 0 0 20px;
}

/* design 1 */

.block-hero.design-1 {
	min-height: 70vh;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: var(--spacing-xx-large) var(--side-spacing);
	position: relative;
}

.block-hero.design-1.bg-dark,
.block-hero.design-1.bg-dark h1,
.block-hero.design-1.bg-dark .subheader {
	color: #fff;
}

.block-hero.design-1 .block-hero-inner {
	max-width: 950px;
}

.block-hero.design-1 .hero-content {
	text-align: center;
	position: relative;
	z-index: 2;
}

.block-hero.design-1 .inner-block-buttons {
	justify-content: center;
}

.block-hero.design-1 .hero-image {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 100%;
	z-index: 0;
}

.block-hero.design-1 .hero-image img {
	opacity: 0.2;
	object-fit: cover;
	height: 100%;
	width: 100%;
}

/* design 2 */

.block-hero.design-2 {
	background-color: var(--color-primary);
	overflow: hidden;
}

.block-hero.design-2.bg-dark,
.block-hero.design-2.bg-dark h1,
.block-hero.design-2.bg-dark .subheader {
	color: #fff;
}

.block-hero.design-2 .block-hero-inner {
	min-height: 70vh;
	display: flex;
}

.block-hero.design-2 .hero-content {
	flex-grow: 1;
	padding: var(--spacing-x-large) var(--side-spacing);
	margin: auto;
}

.block-hero.design-2 .hero-image {
	flex-basis: 50%;
	flex-shrink: 0;
	display: block;
	position: relative;
	min-height: 100%;
}

.block-hero.design-2 .hero-image img {
	display: block;
}

.block-hero.design-2:not(.brand-style) .hero-image img {
	max-width: 100%;
	object-fit: cover;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

/* brand style */

.hero-block-brand-style {
	z-index: 1;
	position: relative;
}

.hero-block-brand-style + div {
	margin-top: -256px !important;
	margin-top: clamp(-384px, -0.879px + -14.966vw, -57px) !important;
}

.hero-block-brand-style + div > .has-background {
	padding-top: 256px;
	padding-top: clamp(57px, 0.879px + 14.966vw, 384px);
}

.hero-block-brand-style + div:not(:has(.has-background)) {
	padding-top: 256px;
	padding-top: clamp(57px, 0.879px + 14.966vw, 384px);
}

.block-hero.design-1.brand-style {
	mask-image: url('/wp-content/uploads/2025/08/waves-mask-4.svg');
	mask-repeat: no-repeat;
	mask-size: 100vw auto;
	mask-position: center bottom;
	justify-content: normal;
	align-items: normal;
	text-align: left;
	position: relative;
	background-color: transparent;
	min-height: 0;
	padding: 0;
}

.block-hero.design-1.brand-style,
.block-hero.design-1.brand-style h1,
.block-hero.design-1.brand-style .subheader {
	color: #fff;
}

.block-hero.design-1.brand-style .block-hero-inner {
	background: linear-gradient(to right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.6) 50%, rgba(0,0,0,0) 100%);
	width: 100%;
	max-width: 875px;
	height: 100%;
	min-height: clamp(400px, 276.471px + 32.941vw, 1100px);
	display: flex;
	align-items: flex-end;
	padding-top: clamp(70px, 8.215px + 16.476vw, 430px);
	padding-left: var(--side-spacing-large);
	padding-right: var(--side-spacing-large);
	padding-bottom: clamp(130px, 69.931px + 16.018vw, 480px);
	margin: 0;
}

.block-hero.design-1.brand-style .hero-content {
	width: 100%;
	text-align: left;
	padding-right: clamp(50px, -123.077px + 46.154vw, 200px);
}

.block-hero.design-1.brand-style .hero-content h1,
.block-hero.design-1.brand-style .hero-content p,
.block-hero.design-1.brand-style .hero-content .subheader {
	color: #fff;
}

.block-hero.design-1.brand-style .inner-block-buttons {
	justify-content: normal;
}

.block-hero.design-1.brand-style .hero-image {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 100%;
	z-index: -1;
}

.block-hero.design-1.brand-style .hero-image img {
	opacity: 1;
	object-fit: cover;
	object-position: center bottom;
	height: 100%;
	width: 100%;
}

.block-hero.design-1.brand-style .brand-waves-image {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

.block-hero.design-1.brand-style .brand-waves-image img {
	display: block;
	width: 100%;
}

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

	.hero-layout-boxed .block-hero {
		max-width: 100%;
	}

	.block-hero.design-2 .block-hero-inner {
		flex-wrap: wrap;
	}

	.block-hero.design-2 .hero-image {
		flex-basis: 100%;
	}

	.block-hero.design-2:not(.brand-style) .hero-image img {
		position: relative;
	}

}