.hero-section{

position:relative;

overflow:hidden;

background:#19272B;

}


/* Visual Area */

.hero-visual{

position:relative;

width:100%;

height:600px;

display:flex;

align-items:center;

justify-content:center;

}



/* Circles */

.hero-circle{

position:absolute;

border-radius:50%;

background:#243135;

z-index:4;

}



.circle-left{

width:350px;

height:350px;

left:-120px;

top:80px;

z-index:-2;

}



.circle-right{

width:420px;

height:420px;

right:-160px;

bottom:40px;

z-index:-1;

}



/* Glow */

.hero-glow{

position:absolute;

width:250px;

height:250px;

z-index:2;

background:

radial-gradient(
circle,
rgba(79,140,255,.45),
transparent 70%
);

filter:blur(20px);

}


/* Center Orb */

.center-orb{

width:160px;

height:160px;

position:relative;

z-index:3;

border-radius:50%;

background:

linear-gradient(
135deg,
#4F8CFF,
#00E5FF
);

box-shadow:

0 0 80px rgba(79,140,255,.6),
inset 0 0 30px rgba(255,255,255,.25);

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

}



@keyframes orbFloat{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-25px);

}


}

.floating-card{

position:absolute;

padding:18px 22px;

z-index:5;

background:

rgba(36,49,53,.75);

border:

1px solid rgba(255,255,255,.1);

border-radius:18px;

backdrop-filter:blur(15px);

color:white;

box-shadow:

0 20px 50px rgba(0,0,0,.3);

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

}


.floating-card span{

color:#00E5FF;

font-size:20px;

font-weight:700;

}



.floating-card p{

margin:5px 0 0;

font-size:14px;

color:#B8C7CC;

}



.card-1{

top:120px;

left:80px;

}


.card-2{

right:40px;

top:160px;

animation-delay:1s;

}



.card-3{

bottom:120px;

left:150px;

animation-delay:2s;

}



@keyframes cardFloat{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-15px);

}

}

@media(max-width:768px){


.hero-visual{

height:400px;

margin-top:40px;

}



.circle-left{

width:220px;

height:220px;

left:-100px;

z-index:-1;

}



.circle-right{

width:250px;

height:250px;

right:-120px;

z-index:-1;
}



.center-orb{

width:110px;

height:110px;

}



.floating-card{

padding:12px 15px;

background:
linear-gradient(
145deg,
rgba(255,255,255,.08),
rgba(255,255,255,.02)
);

border:

1px solid rgba(255,255,255,.15);

backdrop-filter:blur(20px);

}



.card-1{

left:20px;

top:60px;

}



.card-2{

right:-32px;

top:209px;

}



.card-3{

left:40px;

bottom:20px;

}


}


/*hero left side*/
.hero-badge{

display:inline-flex;

padding:8px 18px;

border-radius:50px;

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

border:
1px solid rgba(79,140,255,.3);

color:#00E5FF;

font-size:13px;

font-weight:600;

letter-spacing:1px;

margin-bottom:25px;

}


.hero-title{

font-size:64px;

line-height:1.15;

font-weight:700;

color:#ffffff;

}


.hero-title span{

background:
linear-gradient(
90deg,
#4F8CFF,
#00E5FF
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}


.hero-description{

font-size:18px;

line-height:1.8;

color:#B8C7CC;

max-width:600px;

margin-top:25px;

}


.witrix-btn:hover{

padding-left:38px;

padding-right:38px;

}



.witrix-btn-outline{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 32px;

border-radius:50px;


border:10px solid rgba(255,255,255,.25);

color:#fff;

text-decoration:none;

margin-left:15px;

transition:.4s;

}


.witrix-btn-outline:hover{

border-color:#4F8CFF;

color:#4F8CFF;

transform:translateY(-4px);

}

@media(max-width:768px){


.hero-title{

font-size:40px;

}


.hero-description{

font-size:16px;

}


.witrix-btn-outline{

margin-left:0;

margin-top:15px;

}


}

/*Hero Background Add Subtle Glow*/
.hero-section::before{

content:"";

position:absolute;

width:500px;

height:500px;

left:-200px;

top:50%;

background:

radial-gradient(
circle,
rgba(79,140,255,.15),
transparent 70%
);

filter:blur(40px);

pointer-events:none;

}


.hero-section::after{

content:"";

position:absolute;

width:450px;

height:450px;

right:-200px;

bottom:0;

background:

radial-gradient(
circle,
rgba(0,229,255,.12),
transparent 70%
);

filter:blur(50px);

pointer-events:none;

}

.scroll-indicator{

position:absolute;

bottom:30px;

left:50%;

transform:translateX(-50%);

width:25px;

height:45px;

border:2px solid rgba(255,255,255,.3);

border-radius:20px;

}


.scroll-indicator span{

display:block;

width:5px;

height:10px;

background:#00E5FF;

border-radius:10px;

margin:8px auto;

animation:scrollMove 2s infinite;

}


@keyframes scrollMove{

0%{
transform:translateY(0);
opacity:1;
}

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

}