/* GLOBAL */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'Inter',sans-serif;
background:#050510;
color:white;
line-height:1.6;
overflow-x:hidden;

}

/* glowing background */

body::before{
content:"";
position:fixed;
width:700px;
height:700px;
background:radial-gradient(circle,#7c4dff55,transparent);
top:-250px;
left:-250px;
filter:blur(120px);
z-index:-2;
}

body::after{
content:"";
position:fixed;
width:700px;
height:700px;
background:radial-gradient(circle,#00d0ff55,transparent);
bottom:-250px;
right:-250px;
filter:blur(120px);
z-index:-2;
}

/* container */

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

/* NAVBAR */

.navbar{

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

padding:20px 0;

position:fixed;
top:0;
left:50%;
transform:translateX(-50%);

width:90%;
max-width:1100px;

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

backdrop-filter:blur(20px);

border-radius:30px;

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

padding:14px 24px;

z-index:100;

}

.logo{

font-weight:700;
font-size:20px;

}

.nav-links{

display:flex;
list-style:none;
gap:25px;

}

.nav-links a{

text-decoration:none;
color:white;
font-weight:500;

transition:0.3s;

}

.nav-links a:hover{

color:#7c4dff;

}

/* HERO */

.hero{

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

min-height:100vh;

gap:40px;

}

.hero-left{

max-width:600px;

}

.hero-title{

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

background:linear-gradient(90deg,#00d0ff,#7c4dff);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.hero-subtitle{

margin-top:15px;
opacity:0.8;

font-size:18px;

}

/* buttons */

.hero-buttons{

margin-top:30px;
display:flex;
gap:15px;

}

.btn{

padding:12px 22px;
border-radius:10px;
text-decoration:none;
font-weight:600;

transition:0.4s;

}

/* primary button */

.primary-btn{

background:linear-gradient(90deg,#00d0ff,#7c4dff);

color:black;

box-shadow:0 10px 30px rgba(124,77,255,0.5);

}

.primary-btn:hover{

transform:translateY(-4px);
box-shadow:0 20px 60px rgba(124,77,255,0.8);

}

/* secondary button */

.secondary-btn{

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

}

.secondary-btn:hover{

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

}

/* hero image */

.hero-right img{

width:280px;

border-radius:20px;

border:2px solid rgba(255,255,255,0.1);

}

/* SECTION TITLES */

.section-title{

font-size:36px;
font-weight:700;

margin-bottom:20px;

}

/* ABOUT */

.about{

margin-top:120px;

}

.about-text{

max-width:700px;

opacity:0.85;

margin-bottom:20px;

}

/* skills */

.skills{

display:flex;
flex-wrap:wrap;

gap:10px;

}

.skills span{

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

padding:8px 14px;

border-radius:20px;

font-size:14px;

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

}

/* PROJECTS */

.projects{

margin-top:120px;

}

.project-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:25px;

margin-top:30px;

}

/* project cards */

.project-card{

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

padding:25px;

border-radius:18px;

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

transition:0.4s;

backdrop-filter:blur(20px);

}

.project-card:hover{

transform:translateY(-10px);

box-shadow:
0 20px 60px rgba(0,0,0,0.5),
0 0 30px rgba(124,77,255,0.3);

border-color:#7c4dff;

}

/* CONTACT */

.contact{

margin-top:120px;

text-align:center;

}

.contact p{

margin-bottom:20px;

opacity:0.8;

}

/* FOOTER */

.footer{

margin-top:100px;

text-align:center;

padding:30px;

opacity:0.6;

}

/* RESPONSIVE */

@media(max-width:900px){

.hero{

flex-direction:column;

text-align:center;

}

.hero-title{

font-size:42px;

}

.hero-right img{

width:220px;

}

}