.services-area{
    background: #13151b;
    .single-services{
        position: relative;
        .services-img{
            img {
                width: 100%;
            }
        }
        .services-caption {
            background: #fff;
            width: 100%;
            padding: 33px 20px 30px 72px;
            @include transition(.4s);
            transform: translateY(-0px);
            position: absolute;
            h3 {
                margin-bottom: 15px;
                line-height: 13px;
                font-family: $font_2;
                position: relative;
                @include transition(.4s);
                a{
                    color: #222222;
                    font-weight: 700;
                    font-size: 24px;
                    display: block;
                    &:hover{
                        color: $theme-color;
                    }
                }
               &::before {
                    position: absolute;
                    content: "";
                    width: 35px;
                    height: 2px;
                    top: 0;
                    left: -46px;
                    top: 50%;
                    transform: translateY(-50%);
                    background: #ff1313;
                    @include transition(.4s);
                }
            }
            p{
                color:#2c234d;
                font-size: 16px;
                margin: 0;
                padding: 0;
                @include transition(.4s);
                line-height: 1.5;
            }
            .pera1{
                display: block;
               @include transition(.3s);
               line-height: 1.5;

            }
            .pera2{
               display: none;
               @include transition(.3s);
               line-height: 1.5;
            }
        }

        // Hover
       &:hover {
           .services-caption {
               background: $theme-color;
              transform: translateY(-40px);
               @include transition(.4s);
               h3 {
                   color: #FFF;
                a{
                    color: #fff;
                }
                &::before {
                    background: #ffffff;
                }
            }
            p{
                color:#fff;
            }
            .pera1{
                display: none;
            }
            .pera2{
                display: block;
            }
           }
       }
    }
}




