*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins,Arial;
scroll-behavior:smooth;
}


body{

background:#020609;
color:white;
overflow-x:hidden;

}



.background{

position:fixed;
width:100%;
height:100%;

background:
radial-gradient(circle at top,#00eaff40,transparent 35%),
radial-gradient(circle at bottom,#0066ff40,transparent 40%);

z-index:-1;

}




.glass{

background:
rgba(255,255,255,0.08);

border:
1px solid rgba(255,255,255,0.2);

backdrop-filter:
blur(20px);

box-shadow:
0 0 30px rgba(0,255,255,.1);

}




.navbar{

width:90%;
margin:30px auto;
padding:20px 40px;

border-radius:20px;

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

}



nav a{

color:#aaa;
text-decoration:none;
margin:20px;

transition:.3s;

}


nav a:hover{

color:#00eaff;

text-shadow:
0 0 15px #00eaff;

}




.glow-btn,
.main-btn{

background:
linear-gradient(90deg,#00eaff,#0077ff);

border:none;

padding:14px 30px;

border-radius:30px;

color:white;

cursor:pointer;

box-shadow:
0 0 20px #00eaff;

transition:.4s;

}


button:hover{

transform:scale(1.1);

box-shadow:
0 0 40px #00eaff;

}





.hero{

width:90%;
margin:100px auto;

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

}



.hero-text{

padding:50px;

width:55%;

border-radius:30px;

}



.tag{

color:#00eaff;

}



h1{

font-size:70px;

line-height:1.1;

}



.hero span{

color:#00eaff;

text-shadow:
0 0 20px #00eaff;

}



p{

color:#aaa;

margin:20px 0;

line-height:1.6;

}



.stats{

display:flex;

gap:50px;

margin-top:40px;

}



.stats h2{

color:#00eaff;

}





.cube{

height:350px;
width:350px;

border-radius:50%;

display:flex;

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

position:relative;

}



.circle{

width:250px;
height:250px;

border-radius:50%;

background:
linear-gradient(
45deg,
#00ffff,
#0044ff
);

filter:
blur(20px);

animation:
rotate 5s infinite;

}



.floating-card{

position:absolute;

font-size:90px;

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

padding:40px;

border-radius:30px;

animation:
float 3s infinite;

}



@keyframes float{

50%{

transform:
translateY(-30px);

}

}



@keyframes rotate{

100%{

transform:
rotate(360deg);

}

}




.title{

text-align:center;

margin:80px;

color:#00eaff;

}



.cards{

width:90%;
margin:auto;

display:flex;

gap:30px;

}



.card{

padding:40px;

border-radius:25px;

transition:.4s;

}



.card:hover{

transform:
translateY(-20px);

box-shadow:
0 0 40px #00eaff;

}



.project,
.contact{

width:80%;
margin:100px auto;

padding:50px;

border-radius:30px;

transition:.4s;

}


.project:hover,
.contact:hover{

box-shadow:
0 0 50px #0077ff;

}



@media(max-width:900px){

.hero{

flex-direction:column;

}

.hero-text{

width:100%;

}


h1{

font-size:45px;

}


.cards{

flex-direction:column;

}

}