.hero-section {
position: relative;
height: 90vh; 
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
}
.video-background video {
position: absolute;
top: 0;
left: 0;
width: 100%; 
height: 100%;
object-fit: cover; 
z-index: -1; 
}
.video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5;
z-index: -1;}
.content {
z-index: 1;
width:100%;
margin: 0 auto;
text-align:left;
padding:0% 3%;
}
.content h1 {
font-size:var(--h1);
font-weight: bold;
color: #FCC726;
margin: 0;
line-height: 1;
}
.content h2 {
font-size: var(--h1-span);
margin-bottom: 20px;
color: #FCC726;
font-weight:600;
line-height: 1;
}
.content p {
font-size:var(--babanner-p);
margin: 20px 0;
font-weight: 600;
color:#ffffff;
width:55%;
line-height: 1.4;
}
.hero-section .btn { padding: 15px;
background-color: #FCC726;
color: #000000;
font-weight: bold;
border-radius: 4px;
display: inline-flex
;gap:15px;
align-items: center;
transition: background-color 0.3s ease;
text-decoration: none;
margin-top: 2%;
}
.hero-section .btn img {
vertical-align: middle; 
margin-left: 5px; }
.hero-section    .btn:hover {
background-color: #FCC726;
}