.hero-banner{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding:0;
	opacity: 1;
}
.hero-banner video{
	position: relative;
	display: flex;
	align-content: flex-end;
	flex-wrap: wrap;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	object-fit: cover;
	opacity: 0;
}
.hero-banner-image{
	height:70vh;
	align-items: flex-end;
	padding-bottom: 8rem;
}
.hero-banner-image .hero-banner-copy{
	position: relative;
	z-index: 3;
}
.hero-banner-content{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height:100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	z-index: 3;	 
}
.hero-banner h1{
	color:var(--white);
}
.hero-banner .line{
	position: absolute;
	bottom:-40px;
	z-index: 3;
	height:80px;
	background:var(--cta);
	width:1px;
}
 /** Home banner **/
 .home .hero-banner .hero-banner-logos{
	  position: absolute;
	  width:100%;
	  padding:0 4rem 6rem 4rem;
	  bottom:0;
	  left:0;
	  display: flex;
	  align-items: center;
	  flex-wrap: wrap;
	  gap:24px;
	  z-index: 1;
	  opacity: 0;
  }
 .home .hero-banner .hero-banner-logos img{
	  width:58px;
 }
 .home .hero-banner .hero-banner-logo{
	 position: absolute;
	 opacity: 0;
 }
 .home .hero-banner h1{
	 font-size: clamp(18px, 1.875vw, 20px);
	 position: absolute;
	 bottom:8rem;
	 opacity: 0;
 }
 .poster-image{
	 width:100vw;
	 height:100vh;
	 position: absolute;
	 left:0;
	 top:0;
	 overflow: hidden;
 }
 
 
 /* Hero Gallery  - Used in Single Villa */
 
 .hero-gallery{
	 padding:0;
	 opacity: 1;
	 position: relative;
 }
 .hero-gallery .gallery-container{
	  width:100%;
	  position: relative;
  }
  .hero-gallery .gallery{
	  width:100%;
	  position: relative;
  }
 .hero-gallery-nav{
	 position: absolute;
	 right:0;
	 z-index: 2;
	 bottom:0;
	 background: rgba(0, 0, 0, .4);
	 padding: 0 20px;
	 border:1px solid var(--white);
	 display: flex;
	 flex-direction: row;
	 align-items: center;
	 gap: 15px;
 }
 .hero-gallery-nav #acf-gallery-counter{
	 font-size:14px;
	 color:var(--white);
	 min-width:48px;
	 text-align: center;
 }
 .hero-gallery-nav #acf-gallery-enlarge{
	 border-left:1px solid var(--white);
	 padding:13px 0 13px 20px;
 }
 @media only screen and (max-width: 900px) {
	 .hero-banner-content{
		 align-content: center;
	 }
	 .home .hero-banner .hero-banner-logos img{
		 width:50px;
	 }
	 .home .hero-banner h1{
		 position: relative;
		 bottom: -3rem;
		 padding:0 2rem;
		 text-align: center;
	 }
	 .home .hero-banner .hero-banner-logo{
		 position: relative;
		 width: 55%;
	 }
	 .home .hero-banner .hero-banner-logos{
		 justify-content: center;
	 }
 }