.elementor-9 .elementor-element.elementor-element-483809c{--display:flex;}.elementor-9 .elementor-element.elementor-element-e14340c{width:100%;max-width:100%;}.elementor-9 .elementor-element.elementor-element-0c91d7b{--display:flex;}.elementor-9 .elementor-element.elementor-element-3b877bd{--display:flex;}.elementor-9 .elementor-element.elementor-element-5f82bef{--display:flex;}.elementor-9 .elementor-element.elementor-element-77a6776{--display:flex;}.elementor-9 .elementor-element.elementor-element-9b45350{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-e14340c */*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Poppins',sans-serif;
background:#050505;
color:#fff;
overflow-x:hidden;
}

.hero{
position:relative;
min-height:100vh;
display:flex;
align-items:center;
overflow:hidden;
padding:80px 8%;
background:
radial-gradient(circle at top right,#5a4ff230 0%,transparent 35%),
radial-gradient(circle at bottom left,#7a5cff20 0%,transparent 30%),
#050505;
}

.container{
width:100%;
max-width:1400px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:80px;
z-index:5;
}

.hero-left{
width:50%;
}

.badge{
display:inline-block;
padding:10px 22px;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.04);
border-radius:50px;
color:#b8b8ff;
margin-bottom:25px;
backdrop-filter:blur(20px);
}

.hero-left h1{
font-size:68px;
font-weight:800;
line-height:1.05;
margin-bottom:25px;
}

.hero-left h1 span{
display:block;
color:#7b6dff;
}

.hero-left p{
font-size:18px;
line-height:1.8;
color:#b8b8b8;
max-width:560px;
margin-bottom:40px;
}

.hero-buttons{
display:flex;
gap:18px;
margin-bottom:50px;
}

.btn-primary{
padding:17px 34px;
background:linear-gradient(90deg,#5A4FF2,#7A5CFF);
color:#fff;
text-decoration:none;
border-radius:50px;
font-weight:600;
transition:.35s;
box-shadow:0 0 35px rgba(90,79,242,.55);
}

.btn-primary:hover{
transform:translateY(-5px);
}

.btn-secondary{
padding:17px 34px;
border:1px solid rgba(255,255,255,.15);
background:rgba(255,255,255,.05);
border-radius:50px;
text-decoration:none;
color:#fff;
backdrop-filter:blur(20px);
transition:.35s;
}

.btn-secondary:hover{
background:#ffffff10;
}

.hero-stats{
display:flex;
gap:25px;
}

.stat-box{
width:150px;
padding:22px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
backdrop-filter:blur(20px);
}

.stat-box h2{
font-size:34px;
color:#7b6dff;
margin-bottom:10px;
}

.stat-box p{
font-size:14px;
color:#c7c7c7;
}

.hero-right{
width:50%;
display:flex;
justify-content:center;
position:relative;
}

.dashboard{
position:relative;
width:520px;
height:430px;
}

.growth-card{
position:absolute;
top:20px;
left:20px;
width:360px;
padding:35px;
border-radius:26px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(30px);
box-shadow:0 25px 60px rgba(0,0,0,.45);
}

.growth-card h2{
font-size:52px;
margin:12px 0;
color:#fff;
}

.growth-card p{
color:#9d9d9d;
}

.graph{
margin-top:35px;
height:120px;
position:relative;
}

.line{
position:absolute;
bottom:0;
width:100%;
height:3px;
background:linear-gradient(90deg,#5A4FF2,#8E7DFF);
border-radius:50px;
box-shadow:0 0 25px #5A4FF2;
}

.lead-card{
position:absolute;
right:0;
top:70px;
width:150px;
padding:24px;
background:#121212;
border-radius:20px;
border:1px solid rgba(255,255,255,.08);
}

.lead-card h2{
margin:10px 0;
font-size:34px;
}

.lead-card p{
color:#4dff8e;
}

.conversion-card{
position:absolute;
right:30px;
bottom:25px;
width:230px;
padding:28px;
background:#121212;
border-radius:22px;
border:1px solid rgba(255,255,255,.08);
}

.conversion-card h2{
margin:10px 0;
font-size:42px;
}

.conversion-card p{
color:#4dff8e;
margin-bottom:20px;
}

.circle{
width:70px;
height:70px;
border-radius:50%;
border:8px solid #5A4FF2;
border-top-color:#8b7dff;
display:flex;
align-items:center;
justify-content:center;
}

.inner-circle{
width:28px;
height:28px;
border-radius:50%;
background:#5A4FF2;
box-shadow:0 0 25px #5A4FF2;
}

.blur{
position:absolute;
border-radius:50%;
filter:blur(100px);
}

.blur1{
width:280px;
height:280px;
background:#5A4FF2;
top:-60px;
right:-60px;
opacity:.35;
}

.blur2{
width:240px;
height:240px;
background:#7A5CFF;
bottom:-60px;
left:-60px;
opacity:.30;
}

.blur3{
width:180px;
height:180px;
background:#5A4FF2;
right:40%;
bottom:0;
opacity:.22;
}

@media(max-width:992px){

.container{
flex-direction:column;
text-align:center;
}

.hero-left,
.hero-right{
width:100%;
}

.hero-left h1{
font-size:48px;
}

.hero-buttons,
.hero-stats{
justify-content:center;
flex-wrap:wrap;
}

.dashboard{
transform:scale(.82);
}

}

// ================================
// Growth Axis Premium Hero Effects
// ================================

// Floating glow animation
const glows = document.querySelectorAll(".blur");

glows.forEach((glow, index) => {

let direction = 1;
let position = 0;

setInterval(() => {

position += direction * 0.4;

if(position > 20 || position < -20){
direction *= -1;
}

glow.style.transform =
`translate(${position}px,${position/2}px)`;

},30);

});


// ================================
// Animated Graph
// ================================

const graph = document.querySelector(".line");

let value = 0;

setInterval(()=>{

value++;

graph.style.background =
`linear-gradient(
90deg,
#5A4FF2 ${value}%,
#8E7DFF 100%
)`;

if(value>=100){
value=0;
}

},80);


// ================================
// Cards Hover Effect
// ================================

const cards=document.querySelectorAll(
".growth-card,.lead-card,.conversion-card,.stat-box"
);

cards.forEach(card=>{

card.addEventListener("mousemove",(e)=>{

const rect=card.getBoundingClientRect();

const x=e.clientX-rect.left;

const y=e.clientY-rect.top;

card.style.transform=
`perspective(1000px)
rotateX(${(y-rect.height/2)/18}deg)
rotateY(${-(x-rect.width/2)/18}deg)
scale(1.03)`;

});

card.addEventListener("mouseleave",()=>{

card.style.transform=
"perspective(1000px) rotateX(0) rotateY(0) scale(1)";

});

});


// ================================
// Button Glow
// ================================

const button=document.querySelector(".btn-primary");

setInterval(()=>{

button.style.boxShadow=
"0 0 20px rgba(90,79,242,.4)";

setTimeout(()=>{

button.style.boxShadow=
"0 0 45px rgba(90,79,242,.9)";

},500);

},1000);


// ================================
// Smooth Fade In
// ================================

window.addEventListener("load",()=>{

document.querySelector(".hero").style.opacity="1";

document.querySelector(".hero").style.transform=
"translateY(0px)";

});/* End custom CSS */