body{

font-family:'Inter',sans-serif;
margin:0;
background:#fafafa;
color:#111;

}

.nav{

display:flex;
justify-content:space-between;
align-items:center;
padding:20px 60px;
background:white;
box-shadow:0 2px 10px rgba(0,0,0,0.05);

}

.logo{

font-weight:700;
font-size:20px;

}

nav a{

margin-left:25px;
text-decoration:none;
color:#333;
font-weight:500;

}



.hero{

text-align:center;
padding:140px 20px;
background:linear-gradient(to bottom,#ffffff,#f2f2f2);

}

.hero h1{

font-size:48px;
margin-bottom:20px;

}

.hero p{

font-size:20px;
color:#666;

}

.cta{

display:inline-block;
margin-top:30px;
padding:14px 30px;
background:#111;
color:white;
border-radius:8px;
text-decoration:none;
font-weight:600;

}



.services{

padding:80px 10%;
background:white;

}

.services-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:40px;

}

.service-card{

background:#fafafa;
padding:30px;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,0.05);

}



.about{

padding:80px 20%;
text-align:center;
background:#f7f7f7;

}



.contact{

padding:80px;
text-align:center;

}

.contact a{

display:block;
margin-top:10px;
text-decoration:none;
font-weight:600;
color:#111;

}



footer{

text-align:center;
padding:30px;
background:#111;
color:white;

}