/*===========================
      11.BANNER css 
===========================*/

.banner-area{
    @media #{$xs}{
        background-position: left center;
    }
}

.banner-content{
    & .sub-title{
        font-size: 18px;
        font-weight: 300;
        color: $body-color;
        
        @media #{$xs}{
            font-size: 16px;
        }
        @media #{$sm}{
            font-size: 18px;
        }
    }
    & .main-title{
        font-size: 48px;
        font-weight: 300;
        color: $white;
        margin-top: 10px;
        
        @media #{$xs}{
            font-size: 30px;
        }
        @media #{$sm}{
            font-size: 40px;
        }
    }
    & p{
        margin-top: 30px;
        font-family: $font-2;
        font-size: 18px;
        letter-spacing: 3px;
        color: #ec296b;
        font-weight: 300;
        
        @media #{$xs}{
            font-size: 18px;
        }
        @media #{$sm}{
            font-size: 26px;
        }
    }
    & .main-btn{
        margin-top: 45px;
        background-color: transparent;
        border: 1px solid rgba($white, 0.2);
        
        &:hover{
            background-color: $theme-color-2;
            border-color: $theme-color-2;
            color: $white;
        }
    }
    
    &.banner-2{
        & p{
            color: $theme-color-7;
        }
        
        & .main-btn{
            &:hover{
                background-color: $theme-color-7;
                border-color: $theme-color-7;
                color: $white;
            }
        }
    }
}