@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

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

body{
font-family:'Poppins',sans-serif;
background:linear-gradient(135deg,#0f172a,#1e293b);
color:white;
}

nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 8%;
background:#111827;
position:sticky;
top:0;
z-index:1000;
}

.logo{
font-size:24px;
font-weight:700;
color:#38bdf8;
}

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

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

nav a::after{
content:'';
position:absolute;
left:0;
bottom:-5px;
width:0;
height:2px;
background:#38bdf8;
transition:.3s;
}

nav a:hover::after{
width:100%;
}

.hero{
min-height:90vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:20px;
}

.hero img{
width:220px;
height:220px;
border-radius:50%;
object-fit:cover;
border:5px solid #38bdf8;

box-shadow:
0 0 20px #38bdf8,
0 0 40px #38bdf8;

animation:float 3s ease-in-out infinite;
}

@keyframes float{

0%{transform:translateY(0);}
50%{transform:translateY(-10px);}
100%{transform:translateY(0);}

}

.hero h1{
font-size:3rem;
margin-top:20px;
}

#nameTyping{
background:linear-gradient(45deg,#38bdf8,#60a5fa,#a855f7);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

#nameTyping::after{
content:"|";
animation:blink .8s infinite;
}

@keyframes blink{
50%{opacity:0;}
}

.hero h3{
margin:15px;
color:#38bdf8;
}

.buttons a{
display:inline-block;
padding:12px 20px;
margin:10px;
background:#38bdf8;
color:black;
text-decoration:none;
border-radius:8px;
font-weight:600;
transition:.3s;
}

.buttons a:hover{
transform:translateY(-4px);
}

section{
padding:80px 10%;
}

h2{
text-align:center;
margin-bottom:40px;
color:#38bdf8;
}

.card{
background:#1e293b;
padding:25px;
border-radius:12px;
margin-bottom:20px;
transition:.3s;
}

.card:hover{
transform:translateY(-10px) scale(1.02);
box-shadow:0 15px 30px rgba(56,189,248,.2);
}

.skills{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:15px;
}

.skill{
background:#38bdf8;
color:black;
padding:10px 20px;
border-radius:30px;
font-weight:600;
transition:.3s;
}

.skill:hover{
transform:scale(1.1);
background:white;
}

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

.card a{
display:inline-block;
margin-top:15px;
padding:10px 15px;
background:#38bdf8;
color:black;
text-decoration:none;
border-radius:8px;
}

footer{
text-align:center;
padding:20px;
background:#111827;
}

#topBtn{
position:fixed;
bottom:20px;
right:20px;
padding:12px;
border:none;
border-radius:50%;
background:#38bdf8;
cursor:pointer;
font-size:18px;
}

@media(max-width:768px){

nav{
flex-direction:column;
}

nav ul{
flex-direction:column;
margin-top:15px;
}

.hero h1{
font-size:2rem;
}

.hero img{
width:160px;
height:160px;
}

}