body{
  margin:0;
  font-family:'Poppins',sans-serif;
  background:#111;
  color:#fff;
}
.nav{
  position:fixed;
  width:100%;
  display:flex;
  justify-content:space-between;
  padding:20px 60px;
  background:rgba(0,0,0,0.4);
  backdrop-filter: blur(10px);
  z-index:1000;
}
.nav a{
  color:#fff;
  text-decoration:none;
  margin-left:30px;
}
.hero{
  height:100vh;
  background:url('images/hero.jpg') center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.hero h1{
  font-family:'Playfair Display',serif;
  font-size:60px;
  line-height:1.2;
}
.section{
  padding:120px 80px;
}
.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  margin-top:40px;
}
.card{
  background:#fff;
  color:#000;
  padding:20px;
  border-radius:8px;
  text-align:center;
}
.expertise{
  background:#000;
  padding:60px;
  display:flex;
  justify-content:space-around;
}
.projects{
  background:#fafafa;
  color:#000;
  padding:100px;
}
.project-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.project-grid img{
  width:100%;
  height:250px;
  object-fit:cover;
  border-radius:6px;
}