.service-page-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(
      circle at 85% 35%,
      rgba(0, 102, 168, 0.16),
      transparent 32%
    ),
    radial-gradient(
      circle at 15% 70%,
      rgba(245, 196, 0, 0.08),
      transparent 30%
    ),
    #080808;
}
.service-page-content {
  max-width: 850px;
  padding: 120px 0 80px;
}
.service-page-label {
  color: #f5c400;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 13px;
  margin-bottom: 20px;
}
.service-page-content h1 {
  color: #fff;
  font-family: "Barlow Condensed";
  font-size: clamp(3rem, 7vw, 5.8rem);
  line-height: 0.94;
  text-transform: uppercase;
}
.service-page-content h1 span {
  color: #f5c400;
}
.service-page-content > p {
  max-width: 760px;
  color: #c4c4c4;
  font-size: 17px;
  line-height: 1.8;
  margin: 25px 0 35px;
}
.service-detail-section {
  padding: 100px 0;
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.96) 0%,

      rgba(0, 0, 0, 0.82) 40%,

      rgba(0, 0, 0, 0.35) 75%,

      rgba(0, 0, 0, 0.75) 100%
    ),
    url("../img/empresa-de-seguranca-em-porto-alegre-e-regiao-3.webp") top/cover;
}
.service-detail-section-limp {
  padding: 100px 0;
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.96) 0%,

      rgba(0, 0, 0, 0.82) 40%,

      rgba(0, 0, 0, 0.35) 75%,

      rgba(0, 0, 0, 0.75) 100%
    ),
    url("../img/limpeza.webp") top/cover;
}
.service-detail-section-escolta {
  padding: 100px 0;
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.96) 0%,

      rgba(0, 0, 0, 0.82) 40%,

      rgba(0, 0, 0, 0.35) 75%,

      rgba(0, 0, 0, 0.75) 100%
    ),
    url("../img/acompanhamento-preservacao-cargas-onibus.webp") center/cover;
}
.service-detail-intro {
  max-width: 850px;
  margin: 0 auto 55px;
  text-align: center;
}
.service-detail-intro h2 {
  font-family: "Barlow Condensed";
  font-size: clamp(2.4rem, 5vw, 4rem);
  text-transform: uppercase;
}
.service-detail-intro p {
  color: #666;
  line-height: 1.8;
}
.service-detail-card {
  height: 100%;
  display: flex;
  gap: 20px;
  padding: 20px;
  background: #00000080;
  border-left: 3px solid #f5c400;
  place-items: center;
}
.service-detail-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #080808;
  color: #f5c400;
}
.service-detail-card h3 {
  font-size: 18px;
  font-weight: 700;
  place-items: center;
}
.service-page-cta {
  padding: 90px 0;
  background: #101010;
  color: #fff;
  text-align: center;
}
.service-page-cta h2 {
  font-family: "Barlow Condensed";
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  text-transform: uppercase;
}
.service-page-cta p {
  max-width: 700px;
  margin: 0 auto 30px;
  color: #aaa;
  line-height: 1.7;
}
@media (max-width: 767px) {
  .service-page-content {
    padding: 90px 0 60px;
  }
  .service-detail-section {
    padding: 70px 0;
  }
}

/* Desativa o 'fixed' no Safari iOS */
@supports (-webkit-touch-callout: none) {
  .service-detail-section {
    padding: 100px 0;
    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.96) 0%,

        rgba(0, 0, 0, 0.82) 40%,

        rgba(0, 0, 0, 0.35) 75%,

        rgba(0, 0, 0, 0.75) 100%
      ),
      url("../img/empresa-de-seguranca-em-porto-alegre-e-regiao-4.webp") scroll
        center/cover no-repeat;
  }
  .service-detail-section-limp {
    padding: 100px 0;
    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.96) 0%,

        rgba(0, 0, 0, 0.82) 40%,

        rgba(0, 0, 0, 0.35) 75%,

        rgba(0, 0, 0, 0.75) 100%
      ),
      url("../img/limpeza.webp") scroll center/cover no-repeat;
  }
  .service-detail-section-limp {
    padding: 100px 0;
    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.96) 0%,

        rgba(0, 0, 0, 0.82) 40%,

        rgba(0, 0, 0, 0.35) 75%,

        rgba(0, 0, 0, 0.75) 100%
      ),
      url("../img/acompanhamento-preservacao-cargas-onibus.webp") scroll
        center/cover no-repeat;
  }
}