.hero{
text-align:center;
margin-top:80px;
padding-top:80px;
}

.profile-img{
margin-top:-80px;
width:250px;
height:250px;
border-radius:50%;
object-fit:cover;
}

.name{
font-size:40px;
margin-top:20px;
}

.role{
margin-top:8px;
font-size:18px;
color:#444;
}

.intro{
max-width:650px;
width:90%;
margin:auto;
margin-top:10px;
color:#666;
}

.hero-buttons{
margin-top:20px;
}

.btn{
background:#111;
color:white;
padding:10px 20px;
border-radius:5px;
}

.btn-outline{
border:2px solid #111;
padding:10px 20px;
border-radius:5px;
color:#111;
}

.stack-icons span{
background:black;
color:white;
padding:6px 12px;
margin:5px;
border-radius:15px;
display:inline-block;
}

/* mobile */

@media(max-width:768px){

.name{
font-size:28px;
}

.profile-img{
width:180px;
height:180px;
margin-top:10px;
}

.hero-buttons{
flex-direction:column;
display:flex;
gap:10px;
align-items:center;
}

.btn,.btn-outline{
width:180px;
text-align:center;
}

}