/* Services Star */
.services {
  background-image: url(./assest/images/service.png);
  position: relative;
  padding: 20px 0;
}

.services .bubbles-ser img {
  position: absolute;
  left: 0;
  margin-top: -400px;
  z-index: 0;
}
.services .services-container{
  position: relative;
  z-index: 1;
}
.services .services-container .service-head {
  text-align: center;
  justify-content: center;
}

.services .service-head h2 {
  font-weight: 800;
  color: var(--title-color);
  margin-bottom: 25px;
  Font-size: 34px;
}

.services .service-head h4 {
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  font-size: 20px;
}

.service-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-content: center;
  margin-top: 60px;
  z-index: 1;
  position: relative;
}

.service-content .service-element .ser-element-text h3 {
  font-size: 22px;

}

.service-content .service-element .ser-element-text h5 {
  font-size: 18px;
  line-height: 1.4;

}

@media(min-width:711px) and (max-width:949px){
  .service-content{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
    align-items: center;
    /* text-align: center; */
  }


}

.service-content .service-element {
  display: flex;
  gap: 20px;
  justify-content: flex-start;
  margin-bottom: 40px;
}
@media(min-width:501px) and (max-width:714px){
  .service-content{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
    align-items: center;
    text-align: center;
  }

  .service-content .service-element{
    display: block;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .service-content .service-element i {
    margin-bottom: 20px;
    text-align: center;
    /* margin-right: -60px; */
  }

  .service-content .service-element .ser-element-text {
    text-align: center;
    margin: 0;
  }
}

@media(max-width:534px){
  .service-content{
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 20px;
    align-items: center;
    /* text-align: center; */
  }

    .service-content .service-element{
    display: block;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .service-content .service-element i {
    margin-bottom: 20px;
    text-align: center;
    /* margin-right: -60px; */
  }


}
.service-content .service-element i {
  font-size: 30px;

  color: var(--light-blue);
}

.service-content .service-element .ser-element-text {
  /* align-items: baseline; */
  margin-top: -10px;
}
.service-content .service-element .ser-element-text h3 {
  font-weight: 800;
}

.service-element .ser-element-text h5 {
  color: rgb(101, 101, 101);
  /* width: 280px; */
}