* {
box-sizing:border-box;
}


body {

margin:0;
font-family:Arial, Helvetica, sans-serif;
background:#08111f;
color:#e5e7eb;

}


nav {

display:flex;
justify-content:space-between;
padding:25px 8%;
background:#050b16;
border-bottom:1px solid #1e40af;

}


nav a {

color:#93c5fd;
text-decoration:none;
margin-left:20px;

}


.logo {

font-size:22px;
font-weight:bold;
color:#38bdf8;

}


.hero {

padding:90px 8%;
display:flex;
justify-content:space-between;
align-items:center;

}


.hero h1 {

font-size:52px;
margin-bottom:10px;

}


.hero h2 {

color:#38bdf8;

}


.hero p {

font-size:20px;

}


.profile {

width:280px;
height:280px;
border-radius:50%;
object-fit:cover;
border:5px solid #38bdf8;

}



.button {

display:inline-block;
padding:12px 25px;
background:#2563eb;
color:white;
border-radius:8px;
text-decoration:none;
margin:15px 10px 0 0;

}


.outline {

background:transparent;
border:1px solid #38bdf8;

}


section {

padding:60px 8%;

}


.card {

background:#111827;
border:1px solid #1e40af;
padding:25px;
border-radius:12px;
margin:20px 0;

}


h2 {

color:#38bdf8;

}


.grid {

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

}


footer {

text-align:center;
padding:40px;
background:#050b16;
color:#94a3b8;

}



@media(max-width:700px){

.hero {

flex-direction:column;

}

.hero h1 {

font-size:36px;

}

.profile {

margin-top:40px;

}

}