/*
Block Name: Hero
Description: This is a hero block, designed to be used for page headers, with various customisation options.
*/

.block-hero{padding-top: 0;}
.block-hero .hero-area .grid{grid-template-columns:1fr; align-items:center; color: #fff;}
.block-hero .hero-area .container { position: relative; z-index: 2; padding: 7.5rem 0rem;}

.block-hero .hero-area {position: relative;}
.block-hero .hero-area:before {content: ""; background: #0089FF; top: 0; left: 0; width: 100%; height: 100%; position: absolute; opacity: 0.9;}
.block-hero .hero-area:after {content: ""; background: url('/wp-content/uploads/Beacon-SVG-1.png'); background-size: cover; bottom: 0; right: -7%; width: 530px; height: 500px; position: absolute; opacity: .8; z-index: 5;}

.block-hero .col-content{max-width: 50%; padding-right: 6rem; text-wrap-style: pretty;}
.block-hero .col-image{width: 50%; height: 100%; z-index: 1; left: 50%; right: 0; top: 0; bottom: 0; position: absolute; overflow: hidden;}
.block-hero .col-image .hero-image{width: 100%; height: 100%; object-fit: cover;}

.block-hero h1 { margin-bottom: 2rem; }
.block-hero h2 { max-width: 75rem; font-weight: 300;  }
.block-hero h1, .block-hero h2, .block-hero h3 {color: #fff; font-weight: 300;}

.header-overlay{display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #0089FF; opacity: 0.8; z-index: 2;}

.block-hero .hero-area .hero-buttons{display: grid; grid-template-columns: 1fr; grid-gap: 2rem; width: fit-content;}
.block-hero .hero-area .hero-buttons > a{width: 100%; justify-content: center; font-weight: 600; text-transform: uppercase;}

.block-hero .hero-area .button1{border: 2px solid #fff;}

.block-hero .hero-area.full-width .col-image{left: 0%; width: 100%;}

.block-hero .hero-area.full-width .button1{color: var(--brand-1);}
.block-hero .hero-area.full-width .button1::after{background-image: url(/wp-content/uploads/blue-arrow.png);}

.block-hero .hero-area.full-width .button1:hover{color: #fff; background-color: var(--brand-1);}
.block-hero .hero-area.full-width .button1:hover::after{background-image: url('/wp-content/uploads/white-arrow.png');}

.has-banner .container{padding: 10rem 0 7.5rem;}
/* .block-hero .hero-banner{background-color: #fff; z-index: 2; padding: 1rem 5rem; border-bottom-left-radius: 2.5rem; border-bottom-right-radius: 2.5rem; position: absolute; top: 0; left: 50%; transform: translateX(-50%); color: var(--brand-1); text-transform: capitalize; font-weight: bold;} */

@media (max-width: 1024px) {
	.header-overlay{display: block;}
	.block-hero .container {padding: 10rem 0;}

	.block-hero .col-content{max-width: 80%; padding-right: 0rem;}
	.block-hero .col-image{width: 100%; height: 100%; z-index: 0; left: 0; right: 0; top: 0; bottom: 0; position: absolute; overflow: hidden;}

	.block-hero .hero-area:after {z-index: 0; width: 350px; height: 320px;}
}

@media (max-width: 768px) {
	.block-hero .col-content{max-width: 100%; padding-right: 0rem;}
	.block-hero .hero-area:after {width: 250px; height: 220px;}
	.block-hero .hero-area:after {display: none;}

	.block-hero br{display: none;}
}

@media (max-width: 550px) {
	.block-hero .hero-buttons > a{font-size: 1.25rem;}
}