/*******************************************************/
/******************* 08. Page Banner *******************/
/*******************************************************/
.banner-inner
    h1
        font-size: 75px
        font-weight: 400
        text-transform: capitalize
        +res-ab(xs)
            margin-bottom: 20px
        +res-ab(md)
            margin-bottom: 30px
        +res-bl(lg)
            font-size: 60px
        +res-bl(md)
            font-size: 55px
        +res-bl(sm)
            font-size: 45px
        +res-bl(xs)
            font-size: 35px
            line-height: 1.25
        span
            z-index: 1
            position: relative
            &:after
                position: absolute
                content: ''
                z-index: -1
                left: 0
                top: 80%
                height: 20px
                width: 100%
                background: url(../images/shapes/page-title-bg-line.png) no-repeat center/contain
.breadcrumb
    padding: 0
    margin: 0
    font-size: 24px
    background: transparent
    text-transform: capitalize
    +res-bl(sm)
        font-size: 20px
    +res-bl(xs)
        font-size: 18px
    .breadcrumb-item
        padding: 0
        +flexcenter(center)
        a
            &:not(:hover)
                color: $heading-color
        &.active
            color: $primary-color
            text-decoration: underline
        &+.breadcrumb-item::before
            +gapLR(margin, 15px)
            flex: none
            content: "\f101"
            color: $heading-color
            font-family: "Font Awesome 5 Pro"
            
/* Banner Shapes */
.banner-shapes
    .circle
        +size(770px)
        z-index: -2
        top: -300px
        left: -200px
        background: white
        border-radius: 50%
        position: absolute
        +res-bl(lg)
            +size(400px)
    .shape-one,
    .shape-two
        z-index: -1
        max-width: 10%
        position: absolute
    .shape-one
        left: 6%
        top: 35%
        animation: down-up-two 15s infinite
    .shape-two
        right: 6%
        top: 65%
        animation: upDownLeft 20s infinite
    &:after,
    &:before
        position: absolute
        border: 2px solid
        content: ''
        +size(15px)
        z-index: -1
        border-radius: 50%
    &:before
        left: 10%
        top: 65%
        border-color: $secondary-color
        animation: shapeAnimationOne 30s infinite
    &:after
        right: 10%
        top: 20%
        border-color: $yellow-color
        animation: shapeAnimationTwo 30s infinite