.inServiceBanner{
  height:420px;
  background:linear-gradient(rgba(7,11,18,.68),rgba(7,11,18,.68)),var(--bgImg) center/cover;
  display:flex;
  align-items:center;
  color:#fff;
  text-align:center;
}
.inServiceBanner span{color:#c9a45c;letter-spacing:4px;}
.inServiceBanner h1{font-size:54px;margin:12px 0;}
.inServiceBanner p{color:#d1d5db;}

.serviceArticle{background:#fff;}
.articleGrid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:70px;
  align-items:center;
}
.articleImg img{border-radius:30px;width:100%;}
.articleTxt h2{font-size:42px;margin:0 0 24px;}
.articleTxt p{color:#555;margin-bottom:18px;}

.infoCards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:50px;
}
.infoCard{
  background:#f8f6f1;
  padding:34px;
  border-radius:24px;
}
.infoCard h3{margin:0 0 12px;color:#111827;}
.infoCard p{margin:0;color:#666;}

.serviceListBox{background:#111827;color:#fff;}
.serviceListBox .titleBox h2{color:#fff;}
.listGrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.listGrid li{
  list-style:none;
  background:rgba(255,255,255,.06);
  border-radius:16px;
  padding:18px 22px;
}
.listGrid li:before{
  content:"✓";
  color:#c9a45c;
  margin-right:10px;
}

.serviceCta{
  padding:110px 0;
  background:linear-gradient(rgba(7,11,18,.86),rgba(7,11,18,.86)),url(../images/banner/service-cta.jpg) center/cover;
  color:#fff;
  text-align:center;
}
.serviceCta h2{font-size:46px;margin:0 0 18px;}
.serviceCta p{color:#d1d5db;margin-bottom:30px;}

@media(max-width:768px){
  .inServiceBanner{height:300px;}
  .inServiceBanner h1{font-size:36px;}
  .articleGrid,.infoCards,.listGrid{grid-template-columns:1fr;}
  .articleTxt h2,.serviceCta h2{font-size:32px;}
}