body {
  
  font-family: 'Cairo';
      /* font-family: Arial, Helvetica, sans-serif; */
    font-size: 18px;
    font-weight: bold;
    color: aliceblue;
  
}

.hero1 {
  min-height: auto;
  padding: 10px 0 8px 0;

}
.serv1 {
  color: white;
  background-image: url('../img/serv2.gif');
}

.serv2 {
  color: white;
  background-image: url('../img/serv3.gif');
}

.serv3 {
  color: white;
  background-image: url('../img/serv3.gif');
}

.serv4 {
  color: white;
  background-image: url('../img/serv2.gif');
}


@media screen and (max-width: 768px){
  .hero {
  
    min-height: auto;
    /* max-height: 150px; */

  }
  .hero img {
    /* -o-object-fit:none;
    object-fit: none; */
    /* z-index: 1; */
  }
  
  .hero div h2,h3 {
    /* color: blue; */
    margin: 5px 0 0 0;
    font-size: 20px;
  }

  .hero p {
    font-size: 18px;
  }

  .hero div h2,h3 {
    /* color: blue; */
    margin: 5px 0 0 0;
    font-size: 20px;
  }
  .hero .icon-box i{
    color: white;
  }
 
}

.about .icon-box i {
  background-color: var(--primary-color);
  color: var(--contrast-color);
}


.services .service-item .icon i {
  background-color: var(--primary-color);
  color: var(--contrast-color);
}
.services .service-item::after {
  right: 0;
  border-left: 5px solid var(--background-color);
}

.services .service-item .icon {
  margin-left: 50px;
}


.services .service-item .icon:before {
  left: -15px;
}