/*******************************************************/
/******************* ## Banner Area *******************/
/*******************************************************/
.category-banner-item
    padding: 40px
    color: white
    z-index: 1
    margin-bottom: 30px
    position: relative
    background-size: cover
    background-position: center center
    &:before
        +poLT(0)
        z-index: -1
        content: ''
        +size(100%)
        background: linear-gradient(115.23deg, #0E1317 11.42%, rgba(14, 19, 23, 0) 74.78%)
    .price
        display: block
        font-size: 24px
        margin-top: -5px
        margin-bottom: 10px
        color: $secondary-color
        font-family: $heading-font
    h3
        color: white
        line-height: 1
        max-width: 200px
        +res-ab(ms)
            font-size: 50px
    .ratting
        display: flex
        margin-bottom: 20px
        
    &.style-two
        &:before
            display: none
        .price
            color: white
            +res-bl(xs)
                font-size: 20px
        h3
            max-width: 250px
            margin-bottom: 16px
            +res-ab(xl)
                font-size: 60px
        .ratting
            margin-bottom: 26px
        .theme-btn
            font-size: 16px
            padding: 7px 30px
            &:hover
                outline: 1px solid white
        .food-image
            z-index: -1
            max-width: 45%
            +poRT(25px, 50%)
            transform: translateY(-50%)
        &.color-black
            h3,
            .price,
            .ratting,
            .ratting i
                color: $heading-color
            .food-image
                max-width: 40%
                
    &.style-three
        padding: 190px 60px 50px
        height: calc(100% - 30px)
        &:before
            background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%)
        h3
            margin-bottom: 20px
        h2
            color: white
            max-width: 305px
            +res-bl(lp)
                font-size: 45px
            +res-bl(xs)
                font-size: 40px
        .theme-btn
            padding: 7px 30px
        .quality
            color: white
            font-size: 18px
            font-weight: 500
            padding: 3px 20px
            border: 1px solid
            margin-bottom: 20px
            border-radius: 30px
            display: inline-block
        &.gradient-two
            padding-top: 85px
            +res-bl(lp)
                +gapLR(padding, 44px)
            &:before
                background: linear-gradient(295.64deg, rgba(236, 61, 8, 0.2) 0.49%, rgba(236, 61, 8, 0.7) 100%)
        &.gradient-three
            padding-top: 85px
            +res-bl(lp)
                +gapLR(padding, 44px)
            &:before
                background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%)
            
    &.style-four
        +flexcenter(center)
        text-align: center
        flex-direction: column
        height: calc(100% - 30px)
        &:before
            display: none
        h3
            max-width: none
            margin-bottom: 0
            +res-ab(xl)
                font-size: 120px
        .get-one
            display: block
            font-size: 24px
            margin-bottom: 22px
        .theme-btn
            padding: 6px 30px
            border: 1px solid white
            
    &.style-five
        display: flex
        flex-direction: column
        justify-content: flex-end
        .badge
            color: white
            +size(85px)
            z-index: 1
            +poRT(40px)
            font-size: 25px
            font-weight: 400
            line-height: 72px
            background-image: url(../images/offer/badge-bg-two.png)
            background-size: cover
        .price
            font-size: 20px
        h3
            max-width: 250px
        .read-more
            color: white
            margin-top: 55px
            background-size: cover
        &.height-100
            padding-top: 150px
            height: calc(100% - 30px)
            
/* Category Banner Five */
.category-banner-area-five
    position: relative
    &:before
        +poLT(0)
        content: ''
        z-index: -1
        +size(100%, 60%)
        background: $lighter-color

.page-banner-area
    +overlay(#030303, 0.8)
    &:before
        mix-blend-mode: multiply
    
.page-title
    +res-bl(lg)
        font-size: 90px
    +res-bl(md)
        font-size: 70px
    +res-bl(sm)
        font-size: 50px
    +res-bl(xs)
        font-size: 40px

.breadcrumb
    padding: 0
    margin: 0
    font-size: 24px
    background: transparent
    text-transform: capitalize
    +res-bl(sm)
        font-size: 18px
    +res-bl(xs)
        font-size: 16px
    .breadcrumb-item
        padding: 0
        font-weight: 400
        +flexcenter(center)
        a
            color: white
            &:hover
                color: $primary-color
        &.active
            color: $secondary-color
            text-decoration: underline
            text-underline-offset: 3px
            text-decoration-thickness: 1px
        &+.breadcrumb-item::before
            flex: none
            color: white
            content: "\f105"
            font-size: 1.1em
            font-weight: 300
            margin-left: 25px
            margin-right: 15px
            font-family: "Font Awesome 5 Pro"
            +res-bl(sm)
                margin-left: 15px
                margin-right: 5px