.elementor-16 .elementor-element.elementor-element-372e93b{--display:flex;}.elementor-16 .elementor-element.elementor-element-94cbf54{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-766e8ea *//*=============================
PART 1B - HERO SECTION CSS
Growth Axis Contact Page
==============================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:#0A0A0A;
color:#fff;
overflow-x:hidden;
}

/*==============================*/

.container{
width:90%;
max-width:1400px;
margin:auto;
}

/*==============================
BACKGROUND
==============================*/

.bg-blur{
position:fixed;
border-radius:50%;
filter:blur(120px);
z-index:-2;
opacity:.55;
}

.blur1{
width:420px;
height:420px;
background:#5A4FF2;
top:-120px;
left:-120px;
}

.blur2{
width:380px;
height:380px;
background:#4CC9F0;
right:-100px;
top:180px;
}

.blur3{
width:320px;
height:320px;
background:#7A3CFF;
bottom:-80px;
left:35%;
}

/*==============================
PARTICLES
==============================*/

.particles{
position:fixed;
inset:0;
overflow:hidden;
z-index:-1;
pointer-events:none;
}

.particles span{
position:absolute;
width:7px;
height:7px;
border-radius:50%;
background:#ffffff;
opacity:.4;
animation:float 14s linear infinite;
box-shadow:
0 0 15px #5A4FF2,
0 0 30px #5A4FF2;
}

.particles span:nth-child(1){
top:8%;
left:12%;
animation-delay:0s;
}

.particles span:nth-child(2){
top:22%;
right:18%;
animation-delay:2s;
}

.particles span:nth-child(3){
top:45%;
left:8%;
animation-delay:5s;
}

.particles span:nth-child(4){
bottom:18%;
left:22%;
animation-delay:8s;
}

.particles span:nth-child(5){
bottom:12%;
right:14%;
animation-delay:10s;
}

.particles span:nth-child(6){
top:70%;
right:32%;
animation-delay:12s;
}

.particles span:nth-child(7){
top:30%;
left:55%;
animation-delay:3s;
}

.particles span:nth-child(8){
bottom:32%;
right:48%;
animation-delay:6s;
}

@keyframes float{

0%{
transform:translateY(40px) scale(.6);
opacity:0;
}

30%{
opacity:.9;
}

70%{
opacity:.9;
}

100%{
transform:translateY(-120px) scale(1.4);
opacity:0;
}

}

/*==============================
HERO
==============================*/

.contact-hero{
padding:120px 0 90px;
position:relative;
}

.contact-hero .container{
display:flex;
align-items:center;
justify-content:space-between;
gap:70px;
}

/*==============================*/

.hero-left{
flex:1;
}

.hero-tag{

display:inline-block;
padding:10px 24px;
border:1px solid rgba(255,255,255,.15);

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

backdrop-filter:blur(20px);

border-radius:50px;

color:#5A4FF2;

font-size:14px;

letter-spacing:2px;

margin-bottom:30px;

}

.hero-left h1{

font-size:72px;

font-weight:800;

line-height:1.1;

margin-bottom:25px;

}

.hero-left h1 span{

background:linear-gradient(90deg,#5A4FF2,#4CC9F0);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero-left p{

font-size:19px;

line-height:1.9;

color:#cfcfcf;

max-width:620px;

margin-bottom:40px;

}

/*==============================*/

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:50px;

}

.btn-primary{

padding:18px 38px;

border-radius:60px;

background:linear-gradient(135deg,#5A4FF2,#4CC9F0);

color:#fff;

text-decoration:none;

font-weight:600;

transition:.4s;

box-shadow:0 0 35px rgba(90,79,242,.45);

}

.btn-primary:hover{

transform:translateY(-6px);

box-shadow:0 0 45px rgba(90,79,242,.8);

}

.btn-secondary{

padding:18px 38px;

border-radius:60px;

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

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

backdrop-filter:blur(20px);

text-decoration:none;

color:#fff;

transition:.4s;

}

.btn-secondary:hover{

border-color:#5A4FF2;

box-shadow:0 0 30px rgba(90,79,242,.45);

}

/*==============================*/

.hero-stats{

display:flex;

gap:28px;

flex-wrap:wrap;

}

.stat{

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

backdrop-filter:blur(30px);

padding:22px 28px;

border-radius:22px;

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

transition:.4s;

}

.stat:hover{

transform:translateY(-8px);

box-shadow:0 0 30px rgba(90,79,242,.4);

}

.stat h2{

font-size:34px;

color:#5A4FF2;

margin-bottom:8px;

}

.stat p{

font-size:15px;

color:#d6d6d6;

margin:0;

}
/*====================================================
PART 1C
RIGHT SIDE HERO + ANIMATIONS + RESPONSIVE
====================================================*/

/*==========================
RIGHT HERO
==========================*/

.hero-right{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}

/* Glowing Circle */

.hero-circle{
    position:absolute;
    width:480px;
    height:480px;
    border-radius:50%;

    background:radial-gradient(circle,
    rgba(90,79,242,.55),
    rgba(76,201,240,.15),
    transparent);

    filter:blur(25px);
    animation:pulseGlow 6s infinite ease-in-out;
}

/*==========================*/

.hero-glass{

    width:430px;
    padding:50px 35px;

    border-radius:30px;

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

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

    backdrop-filter:blur(30px);

    text-align:center;

    position:relative;

    overflow:hidden;

    box-shadow:
    0 25px 60px rgba(0,0,0,.45),
    0 0 50px rgba(90,79,242,.25);

    transition:.45s;

}

.hero-glass:hover{

    transform:translateY(-12px);

    box-shadow:
    0 40px 80px rgba(0,0,0,.55),
    0 0 70px rgba(90,79,242,.5);

}

/*==========================*/

.hero-glass::before{

content:"";

position:absolute;

top:-120px;
left:-120px;

width:220px;
height:220px;

background:rgba(90,79,242,.18);

border-radius:50%;

filter:blur(20px);

}

.hero-glass::after{

content:"";

position:absolute;

bottom:-120px;
right:-120px;

width:240px;
height:240px;

background:rgba(76,201,240,.15);

border-radius:50%;

filter:blur(25px);

}

/*==========================*/

.logo-circle{

width:120px;
height:120px;

margin:auto;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

font-size:42px;
font-weight:800;

background:linear-gradient(135deg,#5A4FF2,#4CC9F0);

color:#fff;

box-shadow:
0 0 35px rgba(90,79,242,.65);

margin-bottom:25px;

animation:rotateGlow 8s linear infinite;

}

.hero-glass h3{

font-size:34px;
margin-bottom:10px;

}

.hero-glass p{

color:#cccccc;
margin-bottom:35px;

}

/*==========================
FLOATING ICONS
==========================*/

.floating-icons{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:22px;

}

.icon{

height:85px;

border-radius:20px;

display:flex;
justify-content:center;
align-items:center;

font-size:28px;

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

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

transition:.4s;

backdrop-filter:blur(25px);

}

.icon:hover{

background:linear-gradient(135deg,#5A4FF2,#4CC9F0);

transform:translateY(-8px) scale(1.05);

box-shadow:
0 0 30px rgba(90,79,242,.6);

}

.icon i{

color:white;

}

/*==========================
ANIMATIONS
==========================*/

@keyframes pulseGlow{

0%{

transform:scale(.9);

opacity:.5;

}

50%{

transform:scale(1.05);

opacity:.9;

}

100%{

transform:scale(.9);

opacity:.5;

}

}

@keyframes rotateGlow{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}

/*==========================
RESPONSIVE
==========================*/

@media(max-width:1100px){

.contact-hero .container{

flex-direction:column;

text-align:center;

}

.hero-left p{

margin:auto auto 40px;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

margin-bottom:60px;

}

.hero-right{

width:100%;

}

}

@media(max-width:768px){

.contact-hero{

padding:90px 0 60px;

}

.hero-left h1{

font-size:46px;

}

.hero-left p{

font-size:16px;

}

.hero-glass{

width:100%;

padding:35px 25px;

}

.hero-circle{

width:320px;

height:320px;

}

.logo-circle{

width:90px;
height:90px;

font-size:34px;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,
.btn-secondary{

width:100%;
text-align:center;

}

.floating-icons{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:480px){

.hero-left h1{

font-size:38px;

}

.stat{

width:100%;

text-align:center;

}

.icon{

height:70px;

font-size:22px;

}

}/* End custom CSS */