/*
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;}

.block-hero h2{font-size: calc( var(--base-heading-size) / 1.75 ); margin-bottom: 2rem;}
.block-hero h2 + h3{margin-top: 3rem;}
.block-hero h2 + p{margin-top: calc( var(--base-type-spacing) / 2 );}

.block-hero .slide--1 h2{font-size: calc( var(--base-heading-size) / 3 );}

.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: capitalize;}

.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;} */

.block-hero .slick-arrow{background: #fff; width: 35px; height: 35px; display: block; position: absolute; border-radius: 100%; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 1; font-size: 0; border: 0;}
.block-hero .slick-arrow::before{content: ''; background-image: url(/wp-content/themes/toast/assets/images/chevron-up-blue.svg); width: 20px; height: 16px; display: block; background-size: contain; background-repeat: no-repeat; background-position: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); scale: 1; transition: scale 0.2s;}

.block-hero .slick-arrow:hover::before{scale: 1.05; transition: scale 0.2s;}

.block-hero .slick-next{right: 2rem;}
.block-hero .slick-prev{left: 2rem;}

.block-hero .slick-next.slick-arrow::before{transform: translate(-50%, -50%) rotate(90deg);}
.block-hero .slick-prev.slick-arrow::before{transform: translate(-50%, -50%) rotate(270deg);}

.block-hero .slick-dots{position: absolute; bottom: 2rem; left: 50%; transform: translatex(-50%);}
.block-hero .slick-dots li{border: 1px solid #fff; background-color: var(--brand-1); cursor: pointer;}
.block-hero .slick-dots li.slick-active{background-color: #fff;}

.block-hero .small-inner-padding{padding: 4rem 0}

@media (max-width: 1024px) {
	.header-overlay{display: block;}
	.block-hero .container {padding: 10rem 0;}
	.block-hero .container.breadcrumbs-wrapper{padding: 5rem 0 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;}
}