/*******************************************************/
/******************** ## Blog Area ********************/
/*******************************************************/
.blog-meta
    display: flex
    flex-wrap: wrap
    align-items: center
    li
        display: flex
        line-height: 1.5
        margin-bottom: 5px
        align-items: center
        i
            color: $base-color
            margin: -3px 10px 0 0
        a:hover
            color: $primary-color
        &:first-child
            a
                color: $primary-color
        &:not(:last-child)
            margin-right: 25px
        
.blog-item
    margin-bottom: 30px
    .image
        position: relative
        img
            width: 100%
        .date
            +size(80px)
            @extend %h6
            +poRT(15px)
            line-height: 1.1
            padding: 18px 10px
            border-radius: 50%
            text-align: center
            background: $primary-color
    .content
        background: white
        padding: 35px 50px
        box-shadow: (0px 4px 60px rgba(0, 0, 0, 0.07))
        +res-bt(xl, lp)
            +gapLR(padding, 32px)
        +res-bt(md, lg)
            +gapLR(padding, 30px)
        +res-bl(ms)
            +gapLR(padding, 30px)
        .blog-meta
            margin-bottom: 11px
        h5
            margin-bottom: 15px
            +res-bl(xs)
                font-size: 18px
            a
                @extend %underline
    &:hover
        .read-more
            color: $primary-color
        
    &.style-two
        padding: 10px
        background: white
        position: relative
        box-shadow: (0px 4px 60px rgba(0, 0, 0, 0.07))
        .blog-header
            padding: 25px 30px
            .blog-meta
                margin-bottom: 5px
            h5
                +res-bl(xs)
                    font-size: 18px
                a
                    @extend %underline
        .image
            position: initial
            .date
                top: 5px
                right: 5px
                +size(auto)
                border-radius: 0
                padding: 6.6px 15px
        .blog-footer
            padding: 25px 30px 30px
            .read-more
                margin-top: 2px
                font-size: 14px
                padding: 6px 30px
                color: $heading-color
                background: rgba($primary-rgb, 0.1)
        &:hover
            .blog-footer .read-more
                background: $primary-color
            
    &.style-three
        .image
            .date
                top: auto
                right: 20px
                bottom: -30px
            .video-play
                +size(80px)
                +absmiddle()
                font-size: 14px
                line-height: 80px
                background: white
                border-radius: 50%
                color: $primary-color
                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7)
                animation: pulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1)
                +res-bl(ms)
                    +size(60px)
                    line-height: 60px
                &:before
                    content: ''
                    +size(60%)
                    +absmiddle()
                    border-radius: 50%;
                    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7)
                    animation: pulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1)
            &.overlay:before
                z-index: auto
                opacity: 0.65
        .content
            padding-bottom: 30px
            &.bgc-lighter
                box-shadow: none
                background-color: $lighter-color
            +res-bl(xs)
                +gapLR(padding, 20px)
            
/* Blog Standard */
.blog-details-image,
.blog-details-content,
.service-standard-wrap
    max-width: 760px

/* Blog Details */
.blog-details-image
    img
        width: 100%
        
.blog-details-content
    padding: 40px
    background: white
    box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.07)
    +res-bl(sm)
        +gapLR(padding, 25px)
    +res-bl(xs)
        +gapLR(padding, 15px)
    h4
        +res-bl(md)
            font-size: 25px
        +res-bl(sm)
            font-size: 22px
            line-height: 1.6
        +res-bl(xs)
            font-size: 20px
            
/* Blog Area Two */
.blog-area-two
    .for-contact-bg
        height: 88%
        bottom: 30%
                
blockquote
    @extend %h5
    position: relative
    padding: 35px 35px 33px 145px
    border-left: 3px solid $primary-color
    &:before
        content: "\f10d"
        line-height: 1
        +poLT(50px, 38px)
        font-size: 60px
        font-weight: 300
        color: $primary-color
        font-family: "Font Awesome 5 Pro"
    +res-bl(md)
        font-size: 20px
        padding-left: 80px
        &:before
            left: 20px
            font-size: 40px
    +res-bl(ms)
        font-size: 18px
        padding-left: 50px
        padding-right: 25px
        &:before
            left: 10px
            font-size: 25px
    +res-bl(xs)
        font-size: 16px
        padding-left: 25px
        padding-right: 15px
        &:before
            display: none
        
    .blockquote-footer
        display: block
        font-size: 0.72em
        margin-bottom: 0
        margin-top: 26px
        &:before
            content: '———'
            margin-right: 30px
            letter-spacing: -4px
            color: $heading-color                  

.tag-share
    flex-wrap: wrap
    +flexcenter(space-between)
    .item
        display: flex
        align-items: center
        margin-bottom: 15px
        b
            margin-top: 7px
            font-weight: 600
            margin-right: 12px
            color: $heading-color
    .social-style-two
        a
            +size(33px)
            font-size: 14px
            line-height: 35px
        
                
/* Next Prev Blog */
.next-prev-blog
    display: flex
    flex-wrap: wrap
    justify-content: space-between
    .item
        display: flex
        max-width: 275px
        align-items: center
        margin-bottom: 20px
        .image
            flex: none
            max-width: 100px
            margin-right: 20px
            +res-bl(xs)
                max-width: 90px
        h6
            font-size: 16px
            margin-bottom: 0
            line-height: 1.65

/* Comments */
.comment-body
    max-width: 620px
    margin-bottom: 35px
    +res-ab(ms)
        display: flex
    .author-thumb
        flex: none
        max-width: 100px
        margin-right: 40px
        margin-bottom: 20px
        +res-bl(sm)
            margin-right: 25px
        img
            border-radius: 50%
    .content
        .blog-meta
            margin-bottom: 5px
            li
                text-transform: capitalize
                &:not(:last-child)
                    margin-right: 15px
        h6
            font-size: 16px
            margin-bottom: 0
        p
            margin-bottom: 0
    &.comment-child
        margin-left: 70px
        +res-bl(md)
            margin-left: 30px
        +res-bl(xs)
            margin-left: 20px
            
.admin-comment
    .comment-body
        max-width: none
        margin-bottom: 0
        padding: 30px 40px
        align-items: center
        +res-bl(md)
            +gapLR(padding, 25px)
        .author-thumb
            +res-ab(xl)
                max-width: 160px
            +res-ab(sm)
                margin-bottom: 0
                margin-right: 40px
        .content
            h6
                font-size: 18px
                margin-bottom: 10px
            .social-icons
                margin-top: 10px
                a
                    margin-right: 20px
                    &:hover
                        color: $primary-color
                
/* Comment Form */
.comment-form
    .form-group
        margin-bottom: 20px
    .form-control
        font-size: 16px
        font-weight: 400
        background: $lighter-color