/*******************************************************/
/******************** ## Blog Area ********************/
/*******************************************************/
.blog-meta
    display: flex
    flex-wrap: wrap
    align-items: center
    li
        margin-bottom: 2px
        i
            margin-right: 5px
        img
            +size(25px)
            border-radius: 50%
            margin-right: 10px
        &:not(:last-child)
            margin-right: 30px

.blog-item
    padding: 30px
    margin-bottom: 30px
    border-radius: 20px
    background: $lighter-color
    border: 1px solid $border-color
    +res-bl(xs)
        +gapLR(padding, 25px)
    .content
        padding-bottom: 40px
        +res-ab(xxl)
            +gapLR(padding, 20px)
        .category
            font-weight: 500
            padding: 2px 15px
            background: white
            margin-bottom: 20px
            border-radius: 10px
            display: inline-block
        h5
            margin-bottom: 25px
            +res-bl(ms)
                font-size: 22px
            +res-bl(xs)
                font-size: 20px
    .theme-btn
        margin-top: 30px
        > span:before
            color: white
    &:not(:hover)
        .theme-btn
            
            background: white
            color: $heading-color
        
    &.style-two
        padding: 10px
        transition: 0.3s
        border-radius: 10px
        .image
            img
                width: 100%
                border-radius: 10px
        .content
            padding: 0 40px 25px
            +res-bl(ms)
                +gapLR(padding, 20px)
            .blog-meta
                margin-top: -22px
                padding: 6px 25px
                background: white
                position: relative
                margin-bottom: 25px
                border-radius: 10px
                justify-content: space-between
                box-shadow: 10px 4px 60px rgba(133, 133, 133, 0.25)
                li
                    i
                        font-size: 0.9em
                    &:not(:last-child)
                        margin-right: 15px
            h5
                margin-bottom: 20px
        &:not(:hover)
            background: transparent
        
    &.style-three
        padding: 10px
        +res-ab(md)
            display: flex
            align-items: center
        .image
            flex: none
            +res-ab(md)
                max-width: 45%
            +res-ab(xl)
                margin-right: 6%
            img
                +res-bl(md)
                    margin-bottom: 10px
        .content
            padding: 20px
            +res-ab(md)
                max-width: 350px
            +res-bl(xs)
                +gapLR(padding, 10px)
            .category
                margin-bottom: 15px
                box-shadow: 10px 4px 40px rgba(153, 153, 153, 0.25)
            h5
                margin-bottom: 14px
                +res-bt(lg, xl)
                    font-size: 22px
            .blog-meta
                margin-bottom: 15px
                +res-ab(xl)
                    margin-top: 15%
                li
                    &:not(:last-child)
                        +res-bt(lg, xl)
                            margin-right: 10px
            p
                margin-top: auto
            .theme-btn
                margin-top: 5px
                font-size: 14px
                padding: 4px 20px

/* Blog Details */
.blog-details-content
    h1, h2, h3, h4, h5
        margin-bottom: 15px
    .category
        color: white
        font-weight: 500
        padding: 2px 15px
        border-radius: 10px
        margin-bottom: 30px
        display: inline-block
        background: $secondary-color
    .blog-meta
        li
            flex: 1 auto
            padding: 13px
            +flexcenter(center)
            margin: 0 -1px -1px 0
            border: 1px solid $border-color
            +res-bl(ms)
                +gapTB(padding, 6px)
    .image img
        border-radius: 10px
    .list-style-two li
        font-size: 16px
        font-weight: 400
        &:before
            +size(20px)
            font-size: 10px
            line-height: 20px
            background: $primary-color
                
blockquote
    @extend %h6
    position: relative
    padding: 40px 60px 25px 130px
    background: $lighter-color
    border-radius: 7px
    border: 1px solid $border-color
    +res-bl(md)
        padding-top: 30px
        padding-left: 70px
        padding-right: 20px
        font-size: 18px
    +res-bl(xs)
        padding-right: 10px
        padding-left: 50px
        font-size: 16px
    i
        +poLT(40px, 15px)
        font-size: 70px
        color: $primary-color
        +res-bl(md)
            top: 8px
            left: 15px
            font-size: 45px
        +res-bl(xs)
            font-size: 35px
            left: 10px
    .blockquote-footer
        display: block
        color: $base-color
        margin-bottom: 0
        margin-top: 15px
        font-size: 0.9em
        &:before
            content: '————'
            margin-right: 22px
            letter-spacing: -4px

.tag-share
    flex-wrap: wrap
    +flexcenter(space-between)
    .item
        display: flex
        align-items: center
        margin-bottom: 15px
        h6
            font-size: 18px
            margin-top: 5px
            margin-right: 15px
        .social-style-one
            a
                +size(35px)
                font-size: 13px
                line-height: 35px
                border: 1px solid $border-color
                &:not(:hover)
                    color: $base-color
                &:hover
                    border-color: $primary-color
                
/* Next Prev Blog */
.next-prev-blog
    display: flex
    flex-wrap: wrap
    justify-content: space-between
    .item
        display: flex
        max-width: 340px
        align-items: center
        margin-bottom: 30px
        .image
            flex: none
            max-width: 100px
            margin-right: 30px
            +res-bl(xs)
                max-width: 80px
                margin-right: 20px
        h6
            line-height: 1.5
            margin-bottom: 5px
            +res-bl(xs)
                font-size: 17px
        .date i
            margin-right: 4px

/* Comments */
.comments
    border-radius: 10px
    border: 1px solid $border-color

.comment-body
    padding: 50px
    +res-ab(ms)
        display: flex
    +res-bl(md)
        +gapLR(padding, 25px)
    .author-thumb
        flex: none
        max-width: 85px
        margin-right: 35px
        margin-bottom: 20px
        +res-bl(sm)
            margin-right: 20px
        img
            border-radius: 50%
    .content
        h6
            font-size: 16px
            margin-bottom: 0
            font-weight: 600
        .ratting
            margin-bottom: 15px
            i
                font-size: 12px
                margin: 0 5px 0 0
        .time
            display: block
            font-weight: 500
            margin-bottom: 2px
            color: $heading-color
        .read-more
            text-decoration: none
            color: $heading-color
            i
                margin-top: 2px
                background: $heading-color
            &:hover
                i
                    background: $primary-color
    &:not(:first-child)
        border-top: 1px solid $border-color
    &.comment-child
        padding-top: 0
        border-top: none
        padding-left: 90px
        +res-bl(md)
            padding-left: 40px
             
.admin-comment
    border-radius: 10px
    border: 1px solid $border-color
    .comment-body
        max-width: none
        margin-bottom: 0
        padding: 35px 40px
        align-items: center
        +res-bl(md)
            +gapLR(padding, 25px)
        .author-thumb
            +res-ab(xl)
                max-width: 130px
            +res-ab(sm)
                margin-bottom: 0
                margin-right: 40px
        .content
            h4
                font-size: 20px
                margin-bottom: 12px
            .author
                display: block
                margin-bottom: 15px
            .social-icons
                margin-top: 10px
                a
                    margin-right: 20px
                    &:hover
                        color: $primary-color
                
/* Comment Form */
.comment-form
    padding: 50px
    border-radius: 10px
    border: 1px solid $border-color
    +res-bl(md)
        +gapLR(padding, 35px)
    +res-bl(xs)
        +gapLR(padding, 25px)
    .section-title h2
        margin-bottom: 4px
    .form-group
        margin-bottom: 20px
        label
            font-size: 18px
            font-weight: 500
            margin-bottom: 10px
            color: $heading-color
    .form-control
        background: white
        border-radius: 7px
        border-color: $border-color
        &:focus
            border-color: $heading-color
    .radio-filter
        input
            +size(25px)
            border-width: 2px
            &:before
                opacity: 1
                background: $border-color
            &:checked:before
                background: $secondary-color
        label
            font-size: 16px
            margin-bottom: 0
            font-weight: 400
        
.comment-review-wrap
    display: flex
    flex-wrap: wrap
    margin-top: -5px
    justify-content: space-between
    .comment-ratting-item
        width: 30%
        display: flex
        margin-bottom: 10px
        align-items: center
        +res-bl(md)
            width: 45%
        +res-bl(ms)
            width: 100%
        .title
            font-size: 18px
            font-weight: 500
            margin-right: 25px
        .ratting
            i
                font-size: 12px