/* =========================
   SERVICE DETAIL PAGE
========================= */

.service-detail-page{
  width:100%;
  padding:50px 0 80px;
  background:#ffffff;
  font-family:'Poppins', sans-serif;
}

.service-detail-container{
  width:90%;
  max-width:1200px;
  margin:auto;
}

/* =========================
   TOP SECTION
========================= */

.service-top{
  display:grid;
  grid-template-columns:48% 48%;
  justify-content:space-between;
  align-items:center;
  gap:40px;
  margin-bottom:40px;
}

/* =========================
   IMAGE
========================= */

.service-image img{
  width:100%;
  height:340px;
  object-fit:cover;
  border-radius:8px;
}

/* =========================
   HEADINGS
========================= */

.service-info h2,
.service-details h2{
  color:#0a6ef5;
  font-size:28px;
  font-weight:800;
  margin-bottom:14px;
  position:relative;
  padding-bottom:10px;
}

.service-info h2::after,
.service-details h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:60px;
  height:3px;
  background:#0a6ef5;
  border-radius:10px;
}

/* =========================
   PARAGRAPH
========================= */

.service-info p,
.service-details p{
  color:#333333;
  font-size:16px;
  line-height:1.9;
  margin-bottom:18px;
}

/* =========================
   DETAIL CONTENT
========================= */

.service-details{
  margin-top:10px;
}

.service-details h2{
  margin-top:30px;
}

.service-details h2:first-child{
  margin-top:0;
}

/* =========================
   LIST
========================= */

.service-details ul{
  margin:12px 0 22px 22px;
}

.service-details ul li{
  color:#222;
  font-size:15px;
  line-height:1.9;
  margin-bottom:5px;
}

.service-details ul li b{
  color:#000;
  font-weight:700;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:991px){

  .service-top{
    grid-template-columns:1fr;
  }

}

@media(max-width:768px){

  .service-detail-page{
    padding:40px 0 60px;
  }

  .service-image img{
    height:auto;
  }

  .service-info h2,
  .service-details h2{
    font-size:24px;
  }

  .service-info p,
  .service-details p{
    font-size:15px;
    line-height:1.8;
  }

  .service-details ul li{
    font-size:14px;
  }

}

@media(max-width:576px){

  .service-detail-container{
    width:92%;
  }

  .service-info h2,
  .service-details h2{
    font-size:21px;
  }

  .service-info p,
  .service-details p{
    font-size:14px;
  }

}