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

body{
background:#050816;
color:white;
}

header{
position:sticky;
top:0;
background:#071020;
padding:20px 10%;
z-index:100;
}

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

nav ul{
display:flex;
gap:30px;
list-style:none;
}

nav a{
text-decoration:none;
color:white;
}

.logo{
font-size:28px;
font-weight:700;
color:#4f8cff;
}

.hero{
display:flex;
justify-content:space-between;
align-items:center;
padding:100px 10%;
min-height:90vh;
}

.hero-left{
max-width:700px;
}

.hero h1{
font-size:4rem;
line-height:1.2;
}

.skill-grid span{
    background:rgba(79,140,255,.1);

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

    color:#fff;

    padding:12px 20px;

    border-radius:999px;
}

.hero h1 span{
background:linear-gradient(90deg,#4f8cff,#c86cff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero p{
margin-top:20px;
font-size:1.2rem;
color:#b6bfd1;
}

.hero-buttons{
margin-top:30px;
display:flex;
gap:15px;
}

.btn-primary{
background:linear-gradient(90deg,#4f8cff,#c86cff);
padding:14px 25px;
border-radius:12px;
text-decoration:none;
color:white;
}

.btn-secondary{
border:1px solid #4f8cff;
padding:14px 25px;
border-radius:12px;
text-decoration:none;
color:white;
}

.background-glow{
    position:fixed;
    inset:0;
    z-index:-1;
    background:
      radial-gradient(circle at 20% 20%, rgba(79,140,255,.25), transparent 30%),
      radial-gradient(circle at 80% 30%, rgba(200,108,255,.25), transparent 30%),
      radial-gradient(circle at 50% 80%, rgba(0,255,255,.15), transparent 35%);
}

.hero-right img{
    width:380px;
    height:380px;
    border-radius:50%;
    object-fit:cover;

    border:4px solid rgba(255,255,255,.15);

    box-shadow:
        0 0 20px #4f8cff,
        0 0 40px #4f8cff,
        0 0 80px rgba(79,140,255,.5);
}

.stats{
padding:50px 10%;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

.card,
.timeline-item{
    background:rgba(255,255,255,.03);

    backdrop-filter:blur(20px);

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

    border-radius:20px;

    transition:.3s;
}

.card h2{
font-size:2rem;
color:#4f8cff;
}

.stat-card{
    text-align:center;
}

.stat-card h2{
    font-size:2.5rem;
    margin-bottom:5px;
}

html{
    scroll-behavior:smooth;
}

.timeline{
    border-left:2px solid #4f8cff;
    padding-left:40px;
}

.timeline-item{
    position:relative;
    margin-bottom:30px;
}

.timeline-item::before{
    content:'';
    width:14px;
    height:14px;
    border-radius:50%;
    background:#4f8cff;

    position:absolute;
    left:-48px;
    top:10px;
}

.card:hover,
.timeline-item:hover{
    transform:translateY(-5px);

    box-shadow:
      0 0 20px rgba(79,140,255,.2),
      0 0 40px rgba(79,140,255,.15);
}
section{
padding:80px 10%;
}

section h2{
font-size:2rem;
margin-bottom:40px;
}

.timeline{
display:flex;
flex-direction:column;
gap:25px;
}

.timeline-item{
background:#0b1229;
padding:25px;
border-radius:15px;
}

.skill-grid{
display:flex;
flex-wrap:wrap;
gap:15px;
}

.skill-grid span{
padding:12px 20px;
background:#0b1229;
border-radius:10px;
border:1px solid #4f8cff;
}

footer{
text-align:center;
padding:40px;
background:#071020;
}

@media(max-width:900px){

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

.hero-right{
margin-top:40px;
}

.stats{
grid-template-columns:repeat(2,1fr);
}

}