// Services Section 01
.categories-area {
    padding-top: 100px;
    padding-bottom: 70px;
    @media #{$sm}{
        padding-top: 60px;
        padding-bottom: 39px;
    }
    @media #{$xs}{
        padding-top: 60px;
        padding-bottom: 39px;
    }
    .single-cat{
        @include transition(.4s);
        background:#fff;
        padding: 30px 20px 25px 20px;
        position: relative;
        z-index: 1;
        border-radius: 5px;
        &::before {
            position: absolute;
            content: "";
            width: 100%;
            height: 0;
            background:#fdfdfd;
            transition: .6s;
            bottom: 0;
            left: 0;
            z-index: -1;
            border-radius: 5px;
        }
        .cat-icon{
            margin-bottom: 25px;
            img{

            }
        }
        .cat-cap{
            h5{
                color: $heading-color;
                @include transition(.2s);
                font-size: 20px;
                font-weight: 500;
                margin-bottom: 10px;
                display: block;
                text-decoration: underline transparent;
                @media #{$sm}{
                    font-size: 21px;
                }
                @media #{$xs}{
                    font-size: 21px;
                }
            }
            p{
                margin-bottom: 36px;
                color: #66816A;
                font-size: 16px;
                @include transition(.2s);
                margin: 0;
                @media #{$sm}{
                    font-size: 15px;

                }
            }
            .browse-btn2{
               opacity: 0;
               visibility: hidden;
            }
        }


        // Hover Effect In single 
        &:hover{
            -webkit-box-shadow: 0 20px 30px rgba(35, 47, 85,.1);
            &::before {
                height: 100%;
            }
            .cat-cap{
                h5{
                  a{
                    color: $theme-color;
                  }

                }
                .browse-btn2{
                    visibility: visible;
                    opacity: 1;
                }
            }
       }
    }
}