/* ===== COMMON SERVICE PAGE CSS ===== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

body{
  background:#f4f7fb;
}


/* MAIN PAGE */

.service-page{

  width:100%;

  min-height:100vh;

  display:flex;

  justify-content:center;

  align-items:center;

  gap:60px;

  padding:80px 8%;

  background:#f4f7fb;
}


/* IMAGE SECTION */

.service-image{

  flex:1;

  display:flex;

  justify-content:center;

  align-items:center;
}

.service-image img{

  width:100%;

  max-width:650px;

  height:auto;

  border-radius:20px;

  object-fit:cover;

  box-shadow:0 10px 25px rgba(0,0,0,0.2);

  transition:0.4s;
}

.service-image img:hover{

  transform:scale(1.03);
}


/* CONTENT SECTION */

.service-content{

  flex:1;

  max-width:600px;
}

.service-content h1{

  font-size:52px;

  color:#0077ff;

  margin-bottom:20px;
}

.service-content p{

  font-size:20px;

  line-height:35px;

  color:#555;

  margin-bottom:25px;
}


/* POINTS */

.service-content ul{

  margin-bottom:35px;
}

.service-content ul li{

  font-size:20px;

  color:#333;

  margin-bottom:15px;

  line-height:30px;
}


/* BUTTON */

.btn{

  display:inline-block;

  background:#0077ff;

  color:white;

  text-decoration:none;

  padding:15px 35px;

  border-radius:10px;

  font-size:18px;

  transition:0.3s;
}

.btn:hover{

  background:#005ad1;
}


/* MOBILE RESPONSIVE */

@media(max-width:950px){

  .service-page{

    flex-direction:column;

    text-align:center;

    padding:50px 20px;
  }

  .service-content h1{

    font-size:38px;
  }

  .service-content p{

    font-size:18px;

    line-height:30px;
  }

  .service-content ul{

    text-align:left;
  }

  .service-content ul li{

    font-size:18px;
  }

  .service-image img{

    max-width:100%;
  }

}

.service-content ul li{

  font-size:20px;

  margin-bottom:15px;

  color:#333;
}

.btn{

  display:inline-block;

  background:#0077ff;

  color:white;

  text-decoration:none;

  padding:15px 35px;

  border-radius:10px;

  font-size:18px;

  transition:0.3s;
}

.btn:hover{

  background:#005ad1;
}

@media(max-width:900px){

  .service-page{

    flex-direction:column;

    text-align:center;
  }

  .service-content h1{

    font-size:38px;
  }

  .service-content ul{

    text-align:left;
  }
}