.hero-wrapper{
	width:100%;
	display: flex;
	height:calc(90vh - 3rem);
	min-height:550px;
	max-height: 750px;
	pointer-events: none;
	overflow-y:visible;
	


}

.hero-container{
	display: flex;
	flex-direction: row;
	width:90%;
	max-width: 1200px;
	gap:10px;
	opacity: 1;
	z-index:5;
	position: relative;
	top:-3rem;
	pointer-events: none;
	margin-top:70px;

	justify-content: space-between;
	align-items: center;

}

.hero-container-left{
	display: flex;
	flex-direction: column;
	pointer-events: none;
	gap:25px;
}

.hero-container-right{
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 200px;
	height:100%;


}
.cta-button{
	max-width:200px;
	pointer-events: all;
	opacity:1;
	min-width: 200px;
	padding:5px 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius:50px;
	background: rgba(255, 255, 255, 0.2); /* translucent */
  	backdrop-filter: blur(15px);          /* frosted effect */
  	-webkit-backdrop-filter: blur(15px);  /* Safari support */
  	border: 0.6px solid var(--grad-left);
  	transition: box-shadow 0.2s, backdrop-filter 0.2s, -webkit-backdrop-filter 0.2s;

}

.cta-button:hover{
	border: 0.6px solid var(--grad-right);
	opacity: 1;
	cursor: pointer;
	box-shadow: 1px 1px 4px var(--shadow);
	backdrop-filter: blur(5px);          /* frosted effect */
  	-webkit-backdrop-filter: blur(5px);  /* Safari support */
}

.cta-icon{
	position: relative;
	width:15px;
	margin-right:10px;
	top:-1px;
}

.cta-text{
	font-size:1.15rem;
	font-weight: 200;
}

.cta-text-logo{
	font-size: 1.5rem;

	font-weight: 500;
}

.hero-slogan{
	text-align: left;
	font-family: "Zain", sans-serif;
	font-size: 3rem;
	font-weight: bold;
	z-index:5;
	line-height: 45px;
	


}

.hero-tagline{
	font-size: 1.1rem;
	width:55%;
	min-width:475px;
	line-height:25px;

}

.hero-img{
	width:400px;
	filter: drop-shadow(9px 14px 6px rgba(0,0,0,0.5));

	margin-right:30px;
}



.hero-video-container{
	pointer-events: none;
	min-width:100%;
	position: relative;
	height: auto;
	overflow-x: hidden;

}

.stripvideo-hero{
	pointer-events: none;
	
	min-width: 105%;
	position: absolute;
	top:-3rem;
	height: calc(100% + 3rem);
	object-fit: cover;   /* scale & crop to cover area */
  	object-position: center; /* optional, keeps center focus */

}

.video-overlay{

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
  to right,
  rgba(255, 255, 255, 0.85) 0%,
  rgba(255, 255, 255, 0.82) 45%,
  rgba(255, 255, 255, 0) 65%,
  rgba(255, 255, 255, 0) 100%
);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index:3;
}