*{ 
  margin:0; 
  padding:0; 
  box-sizing:border-box; 
  font-family:Arial; 
} 
 
body{ 
  background:#1a0f0f; 
  color:#fff; 
} 
 
/* HERO */ 
.hero{ 
  height:90vh; 
  background:url('images/smctop.png') center/cover; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  text-align:center; 
} 
 
.hero-text h1{ 
  font-size:40px; 
  letter-spacing:3px; 
} 
 
.hero-text p{ 
  margin-top:10px; 
  font-size:14px; 
} 
 
/* COLLAGE */ 
.collage{ 
  padding:40px 20px; 
} 
 
.grid{ 
  display:grid; 
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); 
  gap:15px; 
} 
 
.grid img{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
} 
 
/* SPLIT */ 
.split{ 
  display:flex; 
  gap:15px; 
  padding:20px; 
} 
 
.split img{ 
  width:100%; 
} 
 
.left{ 
  flex:2; 
} 
 
.right{ 
  flex:1; 
  display:flex; 
  flex-direction:column; 
  gap:15px; 
} 
 
/* FULL */ 
.full img{ 
  width:100%; 
  padding:20px; 
} 
 
/* CONTACT */ 
.contact{ 
  background:#e8dfd9; 
  color:#000; 
  display:flex; 
  gap:20px; 
  padding:40px 20px; 
  align-items:center; 
} 
 
.contact-text{ 
  flex:1; 
} 
 
.contact-text h2{ 
  font-size:28px; 
} 
 
.contact-text p{ 
  margin:15px 0; 
} 
 
.btn{ 
  display:inline-block; 
  padding:10px 20px; 
  background:#000; 
  color:#fff; 
  text-decoration:none; 
} 
 
/* IMAGE */ 
.contact-img{ 
  flex:1; 
} 
 
.contact-img img{ 
  width:100%; 
} 
 
/* RESPONSIVE */ 
@media(max-width:768px){ 
 
  .split{ 
    flex-direction:column; 
  } 
 
  .contact{ 
    flex-direction:column; 
    text-align:center; 
  } 
 
  .hero-text h1{ 
    font-size:26px; 
  } 
}