.services-hero{
  position:relative;
  padding:180px 0 120px;
  text-align:center;

  background:
  linear-gradient(rgba(0,0,0,.78),rgba(0,0,0,.82)),
  url('https://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=1600&auto=format&fit=crop');

  background-size:cover;
  background-position:center
}

.hero-tag{
  display:inline-block;
  color:#d4af37;
  letter-spacing:2px;
  font-size:14px;
  margin-bottom:20px
}

.services-hero h1{
  font-size:68px;
  line-height:1.05;
  max-width:900px;
  margin:auto auto 25px
}

.services-hero p{
  max-width:760px;
  margin:auto;
  color:#bdbdbd;
  line-height:1.9;
  font-size:17px
}



.services-section{
  padding:120px 0
}


.service-list{
  display:flex;
  flex-direction:column;
  gap:35px
}

.service-item{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:60px;
  align-items:center;

  padding:45px;
  border-radius:30px;

  background:
  linear-gradient(
    135deg,
    rgba(212,175,55,.08),
    rgba(255,255,255,.03)
  );

  border:1px solid rgba(255,255,255,.08);

  transition:.35s
}

.service-item:hover{
  transform:translateY(-6px);
  border-color:rgba(212,175,55,.35)
}

.service-image{
  overflow:hidden;
  border-radius:24px
}

.service-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.5s
}

.service-item:hover img{
  transform:scale(1.05)
}

.service-content small{
  color:#d4af37;
  letter-spacing:2px;
  display:block;
  margin-bottom:15px
}

.service-content h3{
  font-size:42px;
  margin-bottom:20px
}

.service-content p{
  color:#bdbdbd;
  line-height:1.9;
  margin-bottom:30px
}

.service-features{
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  margin-bottom:35px
}

.service-features span{
  padding:10px 18px;
  border-radius:30px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:#d6d6d6;
  font-size:14px
}



.service-cta{
  padding-bottom:120px
}

.cta-box{
  border-radius:35px;
  padding:70px;
  text-align:center;

  background:
  linear-gradient(
    135deg,
    rgba(212,175,55,.15),
    rgba(255,255,255,.03)
  );

  border:1px solid rgba(255,255,255,.08)
}

.cta-box h2{
  font-size:54px;
  margin-bottom:20px
}

.cta-box p{
  color:#bdbdbd;
  max-width:760px;
  margin:auto auto 35px;
  line-height:1.9
}

.cta-actions{
  display:flex;
  justify-content:center;
  gap:20px
}



@media(max-width:992px){

  .services-hero h1{
    font-size:52px
  }

  .section-title h2{
    font-size:42px
  }

  .service-item{
    grid-template-columns:1fr
  }

  .service-content h3{
    font-size:34px
  }

  .cta-box h2{
    font-size:42px
  }

}

@media(max-width:576px){

  .services-hero{
    padding:150px 0 90px
  }

  .services-hero h1{
    font-size:40px
  }

  .section-title h2{
    font-size:34px
  }

  .service-item{
    padding:28px
  }

  .service-content h3{
    font-size:28px
  }

  .cta-box{
    padding:45px 25px
  }

  .cta-box h2{
    font-size:32px
  }

  .cta-actions{
    flex-direction:column
  }

}