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

body{

background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);
color:white;

}

.navbar{

display:flex;
justify-content:space-between;
padding:20px 10%;
background:rgba(0,0,0,0.6);
backdrop-filter:blur(10px);
position:sticky;
top:0;

}

.navbar ul{

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

}

.navbar a{

color:white;
text-decoration:none;

}

.logo{

color:gold;

}

.hero{

height:90vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;

}

.profile{

width:160px;
border-radius:50%;
border:4px solid gold;
box-shadow:0 0 20px gold;

}

.hero h1{

margin-top:15px;
font-size:40px;

}

.typing{

margin-top:10px;
opacity:0.8;

}

.hero-btn{

margin-top:20px;

}

.btn{

background:gold;
padding:12px 25px;
border-radius:30px;
color:black;
text-decoration:none;
margin:10px;
font-weight:600;

}

.btn:hover{

box-shadow:0 0 15px gold;

}

.btn-outline{

border:2px solid gold;
padding:12px 25px;
border-radius:30px;
color:gold;
text-decoration:none;

}

section{

padding:80px 10%;

}

h2{

margin-bottom:30px;
font-size:30px;

}

.card{

background:rgba(255,255,255,0.05);
padding:25px;
border-radius:15px;
margin-bottom:20px;
backdrop-filter:blur(10px);
transition:0.4s;

}

.card:hover{

transform:translateY(-10px);
box-shadow:0 0 20px rgba(255,215,0,0.5);

}

.projects{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;

}

.skill{

margin-bottom:20px;

}

.bar{

height:10px;
background:#333;
border-radius:20px;

}

.bar div{

height:10px;
background:linear-gradient(90deg,gold,#ffcc00);
border-radius:20px;

}

.certificate-container{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:25px;

}

.certificate-card{

background:rgba(255,255,255,0.05);
padding:15px;
border-radius:15px;
transition:0.4s;

}

.certificate-card img{

width:100%;
border-radius:10px;

}

.certificate-card:hover{

transform:scale(1.05);
box-shadow:0 0 20px gold;

}

footer{

text-align:center;
padding:30px;
background:#000;

}