*{margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,sans-serif
}
body{background:#0b1120;color:#fff}
nav{display:flex;justify-content:space-between;padding:18px 8%;background:#111827;position:sticky;top:0}
nav ul{display:flex;gap:20px;list-style:none}
nav a{color:#fff;text-decoration:none}
.hero{display:flex;justify-content:space-between;align-items:center;min-height:90vh;padding:8%}
.hero span{color:#38bdf8}
.photo img{width:260px;height:260px;border-radius:50%;object-fit:cover;border:4px solid #38bdf8}
.buttons{margin-top:20px}
.btn{display:inline-block;padding:12px 20px;border-radius:30px;background:#38bdf8;color:#000;text-decoration:none;margin-right:10px}
.secondary{background:#1e293b;color:#fff}
section{padding:70px 8%}
h2{text-align:center;color:#38bdf8;margin-bottom:25px}
.card{background:#1e293b;padding:25px;border-radius:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px}
.grid div{background:#1e293b;padding:18px;border-radius:10px;text-align:center}
a{color:#38bdf8}
footer{text-align:center;padding:20px}
@media(max-width:768px){.hero{flex-direction:column;text-align:center}.photo{margin-top:30px}nav{flex-direction:column;gap:10px}nav ul{flex-wrap:wrap;justify-content:center}}
.skills-container{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.skill-card{
    background:#1e293b;
    padding:20px;
    border-radius:12px;
    transition:.3s;
    border-left:5px solid #38bdf8;
}

.skill-card:hover{
    transform:translateX(10px);
    box-shadow:0 0 20px rgba(56,189,248,.3);
}

.skill-card h3{
    color:#38bdf8;
    margin-bottom:10px;
}

.skill-card p{
    color:#ddd;
    line-height:1.7;
}