.service-block{
   @include clearfix();
   background: $white;
   max-width: 600px;
   margin: 0 auto 30px;
   position: relative;
   overflow: hidden;
   .service-icon{
      @include size(100px, 100px);
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -50px;
      margin-top: -50px;
      border-bottom: 3px solid $white;
      z-index: 11;
      background: $theme-color;
      text-align: center;
      @include scale(1);
      svg, img{
         width: 62px;
         fill: $white;
         position: absolute;
         bottom: -1px;
         left: 50%;
         margin-left: -31px;
      }
   }
   .service-thumbnail{
      position: relative;
      &:after{
         content: '';
         @include size(100%, 100%);
         background: #192437;
         position: absolute;
         top: 0;
         left: 0;
         z-index: 9;
         @include transition(all 0.35s);
         @include opacity(0.3);
      }
   }
   .service-content{
      border-top: 0;
      text-align: left;
      position: absolute;
      top: 50%;
      left: 0;
      @include translateY(-50%);
      margin-top: 60px;
      opacity: 0;
      transition: all 0.35s;
      z-index: 11;
      .content-inner{
         padding: 30px;
         position: relative;
         z-index: 9;
         @include media-breakpoint-down(lg){
            padding: 30px;
         }
         .title{
            font-size: 20px;
            margin: 0 0 20px;
            a{
               color: $white;
            }
         }
         .desc{
            margin: 0 0 20px;
            color: rgba(255, 255, 255, 0.8);
            font-size: 16px;
            @include media-breakpoint-down(lg){
               margin: 0 0 10px;
            }
         }
         .readmore{
             a{
               &:hover{
                  color: $white;
                  span{
                     &:after{
                        background: $white;
                     }
                  }
               }
             }
         }
      }
   }
   &:hover{
      .service-icon{
         opacity: 0;
         @include scale(0);
      }
      .service-thumbnail{
         &:after{
            opacity: 0.8;
         }
      }
      .service-content{
         opacity: 1;
         margin-top: 0;
      }
   }
}

.owl-item.center{
   .service-block{
      .service-icon{
         @include scale(0);
      }
      .service-thumbnail{
         &:after{
            opacity: 0.8;
         }
      }
      .service-content{
         margin-top: 0;
         opacity: 1;
      }
   }
}
.service-item-v1{
   max-width: 500px;
}
.service-item-v2{
   transition: all 0.35s;
   margin-bottom: 30px;
   .service-image{
      position: relative;
      &:after{
         content: '';
         @include size(100%, 100%);
         background: #192437;
         position: absolute;
         top: 0;
         left: 0;
         z-index: 9;
         @include transition(all 0.35s);
         @include opacity(0);
      }
      .service-icon{
         @include size(100px, 100px);
         position: absolute;
         bottom: -40px;
         left: 35px;
         border-bottom: 3px solid $black;
         z-index: 11;
         background: $white;
         text-align: center;
         svg, img{
            width: 62px;
            fill: $black;
            position: absolute;
            bottom: -1px;
            left: 50%;
            margin-left: -31px;
         }
      }
   }
   .service-content{
      padding: 50px 35px 50px 35px;
      border: 1px solid $border-color;
      border-top: 0;
      background: $white;
      .title{
         font-size: 22px;
      }
      .desc{
         margin-top: 28px;
      }
      .readmore{
         margin-top: 16px;
      }
   }
   &:hover{
      box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.04);
      .service-image{
         &:after{
            @include opacity(0.3);
         }
         .service-icon{
            bottom: 45px;
            background: $theme-color;
            border-bottom-color: $white;
            svg{
               fill: $white;
            }
         }
      }
   }
}

.service-item-v3{
   transition: all 0.35s;
   padding: 60px 60px;
   border: 1px solid $border-color;
   background: $white;
   text-align: center;
   margin-bottom: 30px;
   @include media-breakpoint-down(lg){
      padding: 60px 40px;
   }
   @include media-breakpoint-down(md){
      padding: 50px 30px;
   }
   .service-icon{
      @include size(100px, 100px);
      border-bottom: 3px solid $black;
      background: #F4F4F5;
      text-align: center;
      position: relative;
      margin: 0 auto;
      svg, img{
         width: 62px;
         fill: $black;
         position: absolute;
         bottom: -1px;
         left: 50%;
         margin-left: -31px;
      }
   }
   .service-content{
      margin-top: 35px;
      .title{
         font-size: 20px;
      }
      .desc{
         margin-top: 28px;
         font-size: 18px;
      }
      .readmore{
         margin-top: 16px;
      }
   }
   &:hover{
      box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.04);
      .service-icon{
         background: $black;
         border-bottom-color: $theme-color;
         svg{
            fill: $theme-color;
         }
      }
   }
}

.owl-carousel{
   .service-item-v1, .service-item-v2, .service-item-v3{
      margin-bottom: 0;
   }
}


.service-block-single{
   .service-images{
      position: relative;
      .image-item{
         position: relative;
         &:after{
            content: '';
            @include size(100%, 100%);
            background: rgba(0, 0, 0, 0.6);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 9;
            @include transition(all 0.35s);
            @include opacity(0);
         }
         .zoomGallery{
            position: absolute;
            @include size(36px, 36px);
            top: 50%;
            left: 50%;
            margin-top: -15px;
            margin-left: -15px;
            z-index: 11;
            text-align: center;
            @include border-radius(50%);
            background: $white;
            line-height: 36px;
            @include opacity(0);
         }
      }
      .service-thumbnail{
         .owl-carousel{
            .owl-nav{
               .owl-next{
                  right: 15px!important;
               }
               .owl-prev{
                  left: 15px!important;
               }
            }
         }
      }
      .service-icon{
         @include size(100px, 100px);
         position: absolute;
         bottom: 0;
         left: 50px;
         border-bottom: 3px solid $black;
         z-index: 11;
         background: $white;
         text-align: center;
         svg, img{
            width: 62px;
            fill: $black;
            position: absolute;
            bottom: -1px;
            left: 50%;
            margin-left: -31px;
         }
      }
      &:hover{
         .service-icon{
            bottom: 45px;
            background: $theme-color;
            border-bottom-color: $white;
            svg{
               fill: $white;
            }
         }
         .zoomGallery{
            @include opacity(1);
         }
         .image-item{
            &:after{
               @include opacity(1);
            }
         }
      }
   }
   .service-title{
      margin-top: 30px;
   }
}

.single.single-service{
   .main-page-content{
      padding: 75px 0 45px;
   }
}