/* ==========================================
   HERO SECTION - PART 1
========================================== */

.hero-section{
    position:relative;
    width:100%;
    min-height:100vh;
padding-top:90px;
    overflow:hidden;
    display:flex;
    align-items:center;
    background:#071224;
}

.hero-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:blur(3px) brightness(45%);
    transform:scale(1.08);
    z-index:-2;
}

.hero-overlay{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:
linear-gradient(
90deg,
rgba(5,15,35,.92) 0%,
rgba(5,20,40,.82) 45%,
rgba(5,20,40,.70) 100%
);

z-index:-1;

}

.hero-section .container{
    position:relative;
    z-index:5;
}

.hero-content{
    color:#fff;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:rgba(0,212,255,.15);
    border:1px solid rgba(0,212,255,.35);
    backdrop-filter:blur(15px);
    padding:12px 24px;
    border-radius:40px;
    color:#00d4ff;
    font-weight:600;
    margin-bottom:30px;
}

.hero-title{
    font-size:68px;
    font-weight:800;
    line-height:1.08;
    color:#fff;
    margin-bottom:25px;
}

.hero-title span{
    display:block;
    color:#00d4ff;
}

.hero-text{
    color:#d6d6d6;
    font-size:18px;
    line-height:34px;
    max-width:650px;
    margin-bottom:35px;
}

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

.btn-main{
    background:#00b7ff;
    color:#fff;
    padding:16px 34px;
    border-radius:50px;
    font-weight:600;
    transition:.35s;
}

.btn-main:hover{
    background:#0092cc;
    color:#fff;
    transform:translateY(-3px);
}

.btn-outline{
    border:2px solid rgba(255,255,255,.5);
    color:#fff;
    padding:16px 34px;
    border-radius:50px;
    transition:.35s;
}

.btn-outline:hover{
    background:#fff;
    color:#111;
}

.tech-list{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}

.tech-list span{
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(14px);
    padding:12px 18px;
    border-radius:40px;
    color:#fff;
    font-size:14px;
    transition:.35s;
}

.tech-list span:hover{
    background:#00b7ff;
}

.hero-right{
    position:relative;
    min-height:700px;
}

.hero-machine{

width:100%;
max-width:520px;

height:auto;

display:block;

margin:auto;

object-fit:contain;

position:relative;

z-index:20;

animation:floatRobot 6s ease-in-out infinite;

}

.robot-glow{

position:absolute;

width:420px;
height:420px;

border-radius:50%;

background:#00d4ff;

opacity:.22;

filter:blur(140px);

left:50%;

top:50%;

transform:translate(-50%,-50%);

z-index:1;

}

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




/* ==========================================
   HERO SECTION - PART 2
   Glass Cards | Floating Icons | Background
========================================== */


/*==========================
Animated Background
==========================*/

.hero-bg-animation{

position:absolute;
width:100%;
height:100%;
top:0;
left:0;
overflow:hidden;
z-index:2;

}

.circle{

position:absolute;
border-radius:50%;
background:rgba(0,212,255,.10);
backdrop-filter:blur(5px);
animation:circleMove 15s linear infinite;

}

.c1{

width:350px;
height:350px;
top:-120px;
left:-100px;

}

.c2{

width:220px;
height:220px;
bottom:120px;
left:40%;

animation-duration:18s;

}

.c3{

width:280px;
height:280px;
right:-80px;
top:150px;

animation-duration:22s;

}

.c4{

width:180px;
height:180px;
right:20%;
bottom:-60px;

animation-duration:16s;

}

@keyframes circleMove{

0%{

transform:translateY(0) rotate(0deg);

}

50%{

transform:translateY(-30px) rotate(180deg);

}

100%{

transform:translateY(0) rotate(360deg);

}

}


/*==========================
Glass Cards
==========================*/

.glass-card{

position:absolute;

width:190px;

padding:20px;

background:rgba(255,255,255,.10);

border:1px solid rgba(255,255,255,.20);

backdrop-filter:blur(20px);

border-radius:20px;

box-shadow:0 20px 50px rgba(0,0,0,.30);

z-index:20;

transition:.4s;

}

.glass-card:hover{

transform:translateY(-8px);

background:rgba(0,212,255,.18);

}

.glass-card i{

font-size:38px;

color:#00d4ff;

margin-bottom:15px;

}

.glass-card h5{

color:#fff;

font-size:20px;

font-weight:700;

margin-bottom:8px;

}

.glass-card p{

color:#d8d8d8;

font-size:14px;

margin:0;

}

.card1{

top:40px;

left:-40px;

animation:cardFloat1 5s ease-in-out infinite;

}

.card2{

right:-30px;

top:210px;

animation:cardFloat2 6s ease-in-out infinite;

}

.card3{

bottom:30px;

left:20px;

animation:cardFloat3 7s ease-in-out infinite;

}

@keyframes cardFloat1{

0%{transform:translateY(0);}
50%{transform:translateY(-12px);}
100%{transform:translateY(0);}

}

@keyframes cardFloat2{

0%{transform:translateY(0);}
50%{transform:translateY(15px);}
100%{transform:translateY(0);}

}

@keyframes cardFloat3{

0%{transform:translateY(0);}
50%{transform:translateY(-18px);}
100%{transform:translateY(0);}

}


/*==========================
Floating Icons
==========================*/

.floating-icon{

position:absolute;

width:65px;

height:65px;

border-radius:50%;

background:rgba(255,255,255,.12);

backdrop-filter:blur(15px);

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

color:#00d4ff;

box-shadow:0 15px 35px rgba(0,0,0,.25);

animation:iconFloat 5s ease-in-out infinite;

z-index:30;

}

.f1{

top:100px;

right:40px;

}

.f2{

top:300px;

left:40px;

animation-delay:1s;

}

.f3{

bottom:120px;

right:50px;

animation-delay:2s;

}

.f4{

bottom:30px;

right:220px;

animation-delay:3s;

}

@keyframes iconFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}


/*==========================
Glow Animation
==========================*/

.robot-glow{

animation:glowPulse 4s ease-in-out infinite;

}

@keyframes glowPulse{

0%{

opacity:.20;

transform:translateX(-50%) scale(.9);

}

50%{

opacity:.45;

transform:translateX(-50%) scale(1.1);

}

100%{

opacity:.20;

transform:translateX(-50%) scale(.9);

}

}


/*==========================
Hover Effects
==========================*/
.hero-machine{

filter:

drop-shadow(0 30px 60px rgba(0,0,0,.35));


transition:.4s;

cursor:pointer;

}

.hero-machine:hover{

transform:scale(1.04);

}

.tech-list span{

transition:.35s;

}

.tech-list span:hover{

background:#00d4ff;

transform:translateY(-5px);

box-shadow:0 10px 25px rgba(0,212,255,.35);

}




/* ==========================================
   HERO SECTION - PART 3 (FINAL)
   Statistics | Scroll | Responsive
==========================================*/

/*==========================
Statistics
==========================*/

.hero-statistics{

position:absolute;
bottom:0;
left:0;
width:100%;
padding:35px 0;
background:rgba(255,255,255,.08);
backdrop-filter:blur(20px);
border-top:1px solid rgba(255,255,255,.15);
z-index:50;

}

.stat-box{

text-align:center;
color:#fff;

}

.stat-box h2{

font-size:48px;
font-weight:800;
color:#00d4ff;
margin-bottom:8px;

}

.stat-box p{

margin:0;
font-size:16px;
color:#d6d6d6;
letter-spacing:.5px;

}

/*==========================
Scroll Down
==========================*/

.scroll-down{

position:absolute;
left:50%;
bottom:140px;
transform:translateX(-50%);
width:55px;
height:55px;
border-radius:50%;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.25);
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:22px;
text-decoration:none;
backdrop-filter:blur(10px);
animation:scrollMove 2s infinite;
z-index:60;

}

.scroll-down:hover{

background:#00d4ff;
color:#fff;

}

@keyframes scrollMove{

0%{

transform:translateX(-50%) translateY(0);

}

50%{

transform:translateX(-50%) translateY(12px);

}

100%{

transform:translateX(-50%) translateY(0);

}

}

/*==========================
Video Fade
==========================*/

.hero-video{

transition:opacity 1s ease;

}

.hero-video.fade{

opacity:0;

}

/*==========================
Section Spacing
==========================*/

.hero-section .row{

padding-top:90px;
padding-bottom:170px;

}

/*==========================
Responsive
==========================*/

@media(max-width:1200px){

.hero-title{

font-size:56px;

}

.hero-machine{

max-width:430px;

}

}

@media(max-width:992px){

.hero-section{

min-height:auto;
padding:120px 0 180px;

}

.hero-title{

font-size:42px;
text-align:center;

}

.hero-text{

text-align:center;

}

.hero-badge{

display:table;
margin:0 auto 25px;

}

.hero-buttons{

justify-content:center;

}

.tech-list{

justify-content:center;

}

.hero-right{

position:relative;

display:flex;

justify-content:center;

align-items:center;

min-height:650px;

}

.hero-machine{

max-width:340px;

}

.card1{

top:30px;

left:-30px;

}

.card2{

top:220px;

right:-20px;

}
.card3{

bottom:30px;

left:20px;

}
.floating-icon{

display:none;

}

.hero-statistics{

position:relative;

}

.scroll-down{

display:none;

}

}

@media(max-width:768px){

.hero-title{

font-size:34px;

}

.hero-text{

font-size:16px;
line-height:30px;

}

.btn-main,
.btn-outline{

width:100%;
text-align:center;

}

.hero-buttons{

flex-direction:column;

}

.tech-list span{

font-size:13px;
padding:10px 16px;

}

.glass-card{

position:relative;
width:100%;
margin:15px 0;

}

.card1,
.card2,
.card3{

top:auto;
left:auto;
right:auto;
bottom:auto;

}

.hero-right{

min-height:auto;

}

.hero-machine{

max-width:280px;
margin-bottom:30px;

}

.stat-box{

margin-bottom:30px;

}

}

@media(max-width:480px){

.hero-title{

font-size:30px;

}

.hero-machine{

max-width:230px;

}

.hero-badge{

font-size:13px;
padding:10px 18px;

}

.stat-box h2{

font-size:34px;

}

}