/**************** all feature css start ****************/
.our_speciality {
   position: relative;
   z-index: 1;
   padding: 150px 0 120px;

   @media #{$tab} {
      padding: 70px 0 50px;
   }

   @media #{$medium_device} {
      padding: 80px 0 60px;
   }

   .single_feature {
      text-align: center;
      background-color: $white_color;
      padding: 50px 10px 42px;
      border-radius: 10px;
      box-shadow: 0.696px 4.951px 20px 0px rgba(111, 54, 255, 0.2);
      margin-bottom: 30px;
      @include transform_time(0.5s);
      position: relative;
      z-index: 1;

      @media #{$tab} {
         margin-bottom: 20px;
      }

      @media #{$medium_device} {}

      &:before {
         position: absolute;
         content: '';
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         @extend %custom_hover;
         transition: opacity 0.5s ease-out;
         opacity: 0;
         z-index: -1;
         border-radius: 10px;
      }

      &:hover {
         box-shadow: 0px 20px 20px 0px rgba(108, 39, 255, 0.3);
         margin-top: -15px;

         &:before {
            opacity: 1;
            border-radius: 10px;
         }

         h4 {
            color: $white_color;
         }

         p {
            color: $white_color;
         }

         .single_feature_icon {
            &:before {
               opacity: .5;
            }

            i {
               @extend %white;
            }

         }
      }
   }

   .single_feature_text {
      h2 {
         font-size: 42px;
         line-height: 1.222;
         margin-bottom: 20px;

         @media #{$small_mobile} {
            margin-top: 0px;
            font-size: 25px;
            margin-bottom: 15px;
         }

         @media #{$large_mobile} {
            margin-top: 0px;
            font-size: 30px;
            margin-bottom: 15px;
         }

         @media #{$tab_device} {
            font-size: 30px;
         }

         @media #{$medium_device} {
            margin-top: 0px;
            font-size: 35px;
         }
      }

      p {
         line-height: 1.8;
      }
   }

   .single_feature_part {
      @include transform_time(.6s);

      .single_feature_icon {
         i {
            color: $icon_color;
            font-size: 30px;
            @include transform_time(.6s);
            @extend %text_color;
            margin-bottom: 20px;
            display: inline-block;
            text-shadow: 0px 10px 20px rgba(108, 39, 255, 0.3);

         }
      }

      h4 {
         font-weight: 600;
         font-size: 20px;
         margin-bottom: 20px;

         @media #{$small_mobile} {
            margin-bottom: 15px;
         }

         @media #{$large_mobile} {
            margin-bottom: 15px;
         }

         @media #{$tab_device} {
            margin-bottom: 15px;
         }

         @media #{$medium_device} {}
      }

      p {
         line-height: 1.8;
         font-size: 16px;
         font-weight: 500;
         line-height: 1.5;
      }
   }
}