
/** highlights-section **/

.highlights-section{
  position: relative;
  z-index: 2;
}

.highlights-section .inner-container{
  position: relative;
  display: block;
  background: #FFE8EE;
  border-radius: 20px;
  border: dashed;
  border-width: 1px;
  padding: 34px 50px;
  padding-bottom: 19px;
}

.highlights-section .list-item li{
  position: relative;
  display: inline-block;
  float: left;
  width: 20%;
}

.highlights-section .list-item .single-item{
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.highlights-section .list-item .single-item .icon-box{
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 60px;
  height: 60px;
  line-height: 58px;
  min-width: 60px;
  text-align: center;
  background: #fff;
  border-radius: 50%;
  border: dashed;
  border-width: 1px;
}

.highlights-section .list-item .single-item:hover .icon-box img,
.highlights-block-one:hover .inner-box .icon-box img{
  animation: toBottomFromTop .7s forwards;
}

.highlights-block-one .inner-box .icon-box{
  overflow: hidden;
}

.highlights-section .list-item .single-item h5{
  font-size: 18px;
  line-height: 24px;
}


/** highlights-style-two **/

.highlights-style-two{
  position: relative;
}

.highlights-style-two .inner-container{
  position: relative;
  margin: 0px -10px;
}

.highlights-style-two .list-item li{
  position: relative;
  /* display: table-cell; */
  /* float: left; */
  width: 20%;
  padding: 0px 10px;
}

.highlights-block-one .inner-box{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 25px;
  border-radius: 20px;
  background: #FECDB1;
  margin-bottom: 20px;
}

.highlights-style-two .list-item li:nth-child(2) .highlights-block-one .inner-box{
  background: #BBD2FF;
}

.highlights-style-two .list-item li:nth-child(3) .highlights-block-one .inner-box{
  background: #A2F8B2;
}

.highlights-style-two .list-item li:nth-child(4) .highlights-block-one .inner-box{
  background: #FFACAC;
}

.highlights-style-two .list-item li:nth-child(5) .highlights-block-one .inner-box{
  background: #FFB0DF;
}

.highlights-block-one .inner-box .icon-box{
  position: relative;
  display: inline-block;
  width: 80px;
  height: 80px;
  line-height: 80px;
  background: #fff;
  text-align: center;
  border-radius: 50%;
  min-width: 80px;
}

.highlights-block-one .inner-box h4{
  font-size: 18px;
  line-height: 24px;
}

.highlights-section .inner-container:before{
  position: absolute;
  content: '';
  background-image: url(../../images/shape/shape-82.png);
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}


/** rtl-css **/

.rtl .highlights-section .list-item li{
  float: right;
}


/** responsive-css **/

@media only screen and (max-width: 1400px){
  .highlights-style-two .list-item li{
    width: 33.333%;
  }
}

@media only screen and (max-width: 1200px){
  .highlights-section .list-item li{
    width: 33.333%;
  }
}

@media only screen and (max-width: 991px){
  .highlights-section .list-item li,
  .highlights-style-two .list-item li{
    width: 50%;
  }
}

@media only screen and (max-width: 767px){
  .highlights-section .list-item li{
    width: 100%;
  }

  .highlights-style-two{
    padding-bottom: 50px;
  }

  .highlights-section.pt_0{
    padding-top: 0px;
  }
}

@media only screen and (max-width: 599px){
  .highlights-style-two .list-item li{
    width: 100%;
  }
}

@media only screen and (max-width: 499px){
  .highlights-section .inner-container{
    padding-left: 30px;
    padding-right: 30px;
  }
}











































