/*===========================
     04.Banner css 
===========================*/


.banner-area{    
    &.banner-bg{
        background-color: #f1f1f1;

        @media #{$md}{
            padding-top: 70px;
        }
        @media #{$xs}{
            padding-top: 70px;
        }
    }
}

.banner-image{
    overflow: hidden;
    margin-top: -200px;
    position: relative;
    z-index: 5;
    
    @media #{$laptop}{
        margin-top: -50px;
    }
    @media #{$lg}{
        margin-top: -80px;
    }
    @media #{$md}{
        margin-top: 30px;
    }
    @media #{$xs}{
        margin-top: 30px;
    }
    
    & a{
        display: block;
        
        & img{
            width: 100%;
            @include transition(0.3s);
        }
    }
    
    &:hover{
        & a{
            & img{
                @include transform(scale(1.1));
            }
        }
    }

    &.banner-2{
        margin-top: 30px;
        
        & img{
            width: 100%;
        }
    }
}