Service displaying with icon and danger hover effect on div hover

        
        <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

 <!-- font awesome  -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">


<section id="services" class="services py-5 bg-light">
  <div class="container">
    <div class="col-md-12">
      <div class="col-md-12 pb-3 text-center">
        <h2 class="mt-0 title_backdrop_c" data-content="CP"><span class="title_backdrop_c2">Services</span></h2>

        <p class="mt-2">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae suscipit, officia tempore, repudiandae maxime laboriosam illum. Odit repellat animi maiores voluptas officiis consequuntur non delectus ut totam, aspernatur
          dolores culpa.
        </p>
      </div>
    </div>

    <div class="row d-flex justify-content-center">
      <div class="col-md-6 col-lg-3 d-flex align-items-stretch my-3">
        <div class="icon-box" data-aos="fade-up" data-aos-delay="100">
          <div class="icon"><i class="fab fa-accusoft"></i></div>
          <h4 class="title2"><a href="">Lorem ipsum dolor sit amet</a></h4>
          <!-- <p class="description">Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi</p> -->
          <a href="#" class="btn btn-primary rounded wow fadeInUp delay-2"><span>Know more</span></a>
        </div>
      </div>

      <div class="col-md-6 col-lg-3 d-flex align-items-stretch my-3">
        <div class="icon-box" data-aos="fade-up" data-aos-delay="100">
          <div class="icon"><i class="fab fa-accusoft"></i></div>
          <h4 class="title2"><a href="">Lorem ipsum dolor sit amet</a></h4>
          <!-- <p class="description">Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi</p> -->
          <a href="#" class="btn btn-primary rounded wow fadeInUp delay-2"><span>Know more</span></a>
        </div>
      </div>

      <div class="col-md-6 col-lg-3 d-flex align-items-stretch my-3">
        <div class="icon-box" data-aos="fade-up" data-aos-delay="100">
          <div class="icon"><i class="fab fa-accusoft"></i></div>
          <h4 class="title2"><a href="">Lorem ipsum dolor sit amet</a></h4>
          <!-- <p class="description">Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi</p> -->
          <a href="#" class="btn btn-primary rounded wow fadeInUp delay-2"><span>Know more</span></a>
        </div>
      </div>

      <div class="col-md-6 col-lg-3 d-flex align-items-stretch my-3">
        <div class="icon-box" data-aos="fade-up" data-aos-delay="100">
          <div class="icon"><i class="fab fa-accusoft"></i></div>
          <h4 class="title2"><a href="">Lorem ipsum dolor sit amet</a></h4>
          <!-- <p class="description">Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi</p> -->
          <a href="#" class="btn btn-primary rounded wow fadeInUp delay-2"><span>Know more</span></a>
        </div>
      </div>

      <div class="col-md-6 col-lg-3 d-flex align-items-stretch my-3">
        <div class="icon-box" data-aos="fade-up" data-aos-delay="100">
          <div class="icon"><i class="fab fa-accusoft"></i></div>
          <h4 class="title2"><a href="">Lorem ipsum dolor sit amet</a></h4>
          <!-- <p class="description">Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi</p> -->
          <a href="#" class="btn btn-primary rounded wow fadeInUp delay-2"><span>Know more</span></a>
        </div>
      </div>

      <div class="col-md-6 col-lg-3 d-flex align-items-stretch my-3">
        <div class="icon-box" data-aos="fade-up" data-aos-delay="100">
          <div class="icon"><i class="fab fa-accusoft"></i></div>
          <h4 class="title2"><a href="">Lorem ipsum dolor sit amet</a></h4>
          <!-- <p class="description">Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi</p> -->
          <a href="#" class="btn btn-primary wow f roundedadeInUp delay-2"><span>Know more</span></a>
        </div>
      </div>
    </div>
  </div>
</section>
        
    

        
        /*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services .icon-box {
  padding: 30px;
  position: relative;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);
  transition: all 0.3s ease-in-out;
  border-radius: 8px;
  z-index: 1;
}

.services .icon-box::before {
  content: "";
  position: absolute;
  background: #ffe3ba;
  right: -60px;
  top: -40px;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  transition: all 0.3s;
  z-index: -1;
}

.services .icon-box:hover::before {
  background: #000000;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 0px;
}

.services .icon {
  margin: 0 auto 20px auto;
  padding-top: 10px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background: #fe8e5a;
  transition: all 0.3s ease-in-out;
}

.services .icon i {
  font-size: 36px;
  line-height: 1;
  color: #fff;
}

.services .title2 {
  /*font-weight: 700;
  margin-bottom: 15px;
  font-size: 18px;*/
}

.services .title2 a {
  color: #424242;
}

.services .description {
  font-size: 15px;
  line-height: 28px;
  margin-bottom: 0;
}

.services .icon-box:hover .title2 a,
.services .icon-box:hover .description {
  color: #fff;
}

.services .icon-box:hover .icon {
  background: #fff;
}

.services .icon-box:hover .icon i {
  color: #3498db;
}

.btn-primary {
  color: #fff;
  background-color: #fe8e5a;
  border-color: #fe8e5a;
}