/* HERO SECTION */

.hero{
padding:40px 0;   /* blank space removed */
background:#f9fafc;
position:relative;
overflow:hidden;
}

/* VIDEO POPUP */

.video-modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.85);
justify-content:center;
align-items:center;
z-index:9999;
}

.video-content{
position:relative;
width:90%;
max-width:900px;
}

.video-content iframe{
width:100%;
height:500px;
border-radius:10px;
}

.close-video{
position:absolute;
top:-40px;
right:0;
color:white;
font-size:35px;
cursor:pointer;
}
/* GRADIENT BACKGROUND WAVE */

.hero-gradient{
position:absolute;
width:600px;
height:600px;
background:linear-gradient(135deg,#2563eb,#0ea5a4);
filter:blur(160px);
opacity:.15;
top:-200px;
left:-150px;
animation:waveMove 10s infinite alternate;
}

@keyframes waveMove{
0%{transform:translate(0,0)}
100%{transform:translate(120px,80px)}
}


/* CURSOR GLOW */

.cursor-glow{
position:fixed;
width:300px;
height:300px;
border-radius:50%;
background:radial-gradient(circle,#2563eb33,transparent);
pointer-events:none;
z-index:0;
transform:translate(-50%,-50%);
}

/* CONTAINER */

/*.container{
width:90%;
max-width:1200px;
margin:auto;
position:relative;
z-index:2;
}*/

/* GRID */

.hero-wrapper{
display:grid;
grid-template-columns:1.1fr 1fr;
align-items:center;
gap:40px;
}

/* TEXT */

.hero-title{
font-size:58px;
font-weight:700;
line-height:1.15;
margin-bottom:18px;
color:#111827;
}

.gradient-text{
background:linear-gradient(90deg,#2563eb,#0ea5a4);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero-desc{
font-size:18px;
color:#6b7280;
margin-bottom:25px;
}

/* BUTTONS */

.hero-buttons{
display:flex;
gap:20px;
margin-bottom:30px;
}

.btn-primary{
background:#2563eb;
color:white;
padding:14px 34px;
border-radius:10px;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.btn-primary:hover{
transform:translateY(-3px);
box-shadow:0 15px 35px rgba(37,99,235,.35);
}

/* SLIDER */

.hero-slider{
display:flex;
gap:12px;
flex-wrap:wrap;
}

.slide{
background:white;
padding:10px 18px;
border-radius:20px;
font-size:14px;
box-shadow:0 5px 15px rgba(0,0,0,.05);
animation:slideMove 6s infinite alternate;
}

@keyframes slideMove{
0%{transform:translateX(0)}
100%{transform:translateX(10px)}
}


/* RIGHT IMAGE */

.hero-image-wrapper{
position:relative;
display:flex;
justify-content:center;
height:420px;
}

/* BACKGROUND */

.hero-bg{
width:380px;
}

/* GIRL */

.hero-girl{
position:absolute;
bottom:0;
right:10px;
width:600px;
}

/* BIG FLOATING ICONS */

.icon{
position:absolute;
width:130px;
animation:float 6s infinite ease-in-out;
}

.icon1{top:-30px;right:-70px;}
.icon2{bottom:-30px;left:50px;}
.icon3{bottom:80px;right:-60px;}
.icon4{top:70px;left:-90px;}
.icon5{top:-60px;left:-10px;}

@keyframes float{
0%{transform:translateY(0)}
50%{transform:translateY(-18px)}
100%{transform:translateY(0)}
}

.watch-demo{
display:flex;
align-items:center;
gap:10px;
font-weight:600;
color:#111827;
text-decoration:none;
background:white;
padding:12px 22px;
border-radius:10px;
box-shadow:0 8px 25px rgba(0,0,0,0.08);
transition:.3s;
}

.watch-demo img{
width:24px;
}

.watch-demo:hover{
transform:translateY(-3px);
box-shadow:0 15px 35px rgba(0,0,0,0.15);
}

/* RESPONSIVE */

@media(max-width:992px){

.hero-wrapper{
grid-template-columns:1fr;
text-align:center;
}

.hero-title{
font-size:40px;
}

.hero-buttons{
justify-content:center;
}

.hero-slider{
justify-content:center;
}

.hero-image-wrapper{
margin-top:30px;
height:320px;
}

.hero-girl{
width:260px;
}

.hero-bg{
width:300px;
}

.icon{
width:70px;
}

}
/* =========================
HERO RESPONSIVE
========================= */

@media(max-width:992px){

.hero{
padding:100px 20px;
text-align:center;
}

.hero-title{
font-size:40px;
}

}

@media(max-width:600px){

.hero-title{
font-size:30px;
}

.hero-desc{
font-size:14px;
}

.hero-buttons{
flex-direction:column;
gap:12px;
}

}