body{
font-family:Poppins;
margin:0;
background:#ffffff;
color:#222;
}

.navbar{
display:flex;
justify-content:space-between;
padding:20px;
background:#000;
color:#fff;
}

.navbar ul{
display:flex;
list-style:none;
gap:20px;
}

.navbar a{
color:white;
text-decoration:none;
}

.hero{
text-align:center;
padding:80px 20px;
background:#111;
color:white;
}

.profile{
width:140px;
border-radius:50%;
border:4px solid gold;
}

.btn{
background:gold;
padding:10px 20px;
color:black;
text-decoration:none;
border-radius:5px;
}

section{
padding:60px 10%;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
}

.timeline{
list-style:none;
}

.skill{
margin:20px 0;
}

.bar{
height:8px;
background:#ddd;
border-radius:5px;
}

.bar div{
height:8px;
background:gold;
border-radius:5px;
}

.projects{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}

.card{
padding:20px;
border:1px solid #ddd;
border-radius:10px;
transition:0.3s;
}

.card:hover{
transform:translateY(-5px);
box-shadow:0 10px 20px rgba(0,0,0,0.2);
}

footer{
text-align:center;
padding:20px;
background:#000;
color:white;
}

.dark{
background:#121212;
color:white;
}

.dark .navbar{
background:#000;
}

.dark .card{
background:#1e1e1e;
.certificate-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
margin-top:30px;
}

.certificate-card{
background:white;
border-radius:10px;
box-shadow:0 10px 20px rgba(0,0,0,0.1);
padding:15px;
transition:0.3s;
text-align:center;
}

.certificate-card img{
width:100%;
border-radius:8px;
}

.certificate-card:hover{
transform:translateY(-6px);
box-shadow:0 15px 30px rgba(0,0,0,0.2);
}

.dark .certificate-card{
background:#1e1e1e;
}
}