.blog-banner-area
    margin-bottom: 85px
    margin-top: calc( 91px + 112px )
    float: left
    width: 100%
    height: auto
    img
        width: 100%
.blog-ditail-area
    float: left
    width: 100%
    height: auto
    .post-content-area
        padding-right: 100px
        .bog-single-title-area
            display: none
            h1, h2
                color: $color-black
                font-family: $Karla-font
                font-size: 36px
                font-weight: 700
                line-height: 44px
                letter-spacing: -0.9px
                word-break: break-all
        .blog-date-area
            margin-bottom: 95px
            margin-top: 25px
            display: flex
            justify-content: flex-start
            align-items: center
            p, a
                color: $color-highlight-two
                font-family: $Karla-font
                font-size: 16px
                font-weight: 400
                padding-right: 15px
                padding-left: 15px
                border-right: 1px solid $color-highlight-two
            .cat-blgo
                a
                    padding-left: 0px
                    color: $color-black
                    border-right: 1px solid $color-highlight-two
            .date-blog
                p
            .user-blog
                p
                    padding-right: 0px
                    border-right: 0px solid $color-highlight-two
        .blog-sub-title-area
            margin-bottom: 55px
            h3
                color: $color-black
                font-family: $Karla-font
                font-size: 26px
                font-weight: 700
                line-height: 36px
                letter-spacing: -0.65px
        .blog-content-area
            margin-bottom: 110px
            h4
                color: $color-black
                font-family: $Karla-font
                font-size: 20px
                font-weight: 700
                letter-spacing: -0.5px
                margin-bottom: 45px
            p
                color: $color-highlight-one
                font-family: $Karla-font
                font-size: 16px
                font-weight: 400
                line-height: 30px
                margin-top: 20px
                a
                    display: unset
                    text-decoration: underline
                    color: #0099cc
                    margin-right: 7px
            ul
                padding-left: 15px
                margin-bottom: 50px
                margin-top: 50px
                li
                    list-style-type: disc
                    p
        blockquote.blockquote-area
            .blockquote-description
                border-left: 4px solid $color-orange
                padding-left: 95px
                p
                    color: $color-black
                    font-size: 24px
                    font-weight: 400
            .blockquote-authore
                margin-top: 40px
                margin-bottom: 55px
                padding-left: 99px
                display: flex
                justify-content: flex-start
                align-items: flex-end
                i
                    color: $color-highlight-eight
                    font-size: 40px
                    text-transform: uppercase
                    transform: rotate(180deg)
                    margin-right: 15px
                    line-height: 39px
                p
                    font-family: $Karla-font
                    font-size: 14px
                    font-weight: 700
                    letter-spacing: 0.35px
                    text-transform: uppercase
                    margin: 0
        .blog-single-other-img
            position: relative
            margin-top: 60px
            margin-bottom: 60px
            .zoom-mediam
                width: 100%
                position: relative
                img
    .post-tag-area
        margin-bottom: 30px
        float: left
        width: 100%
        height: auto
        ul
            display: flex
            justify-content: flex-start
            align-items: center
            flex-wrap: wrap
            li
                p
                    color: $color-black
                    font-family: $Karla-font
                    font-size: 16px
                    font-weight: 700
                    line-height: 30px
                    margin-right: 5px
                a
                    color: $color-highlight-two
                    font-family: $Karla-font
                    font-size: 16px
                    font-weight: 400
                    line-height: 30px
                    margin-right: 5px
                &:hover
                    p, a
                        color: $color-orange
    .share-ares-post
        float: left
        width: 100%
        height: auto
        display: flex
        justify-content: flex-start
        align-items: center
        p
            color: $color-black
            font-family: $Karla-font
            font-size: 16px
            font-weight: 700
            margin-right: 15px
        ul
            display: flex
            justify-content: flex-start
            align-items: center
            li
                a
                    i
                        color: $color-highlight-two
                        font-size: 18px
                        letter-spacing: 27px
                        line-height: 24px
                &:hover
                    a
                        i
                            color: $color-orange
    .edit-post-link-area
        float: left
        width: 100%
        height: auto
        margin-top: 10px
        p
            .btn-edit-post-link
                color: $color-white
                background: $color-orange
                padding: 3px 8px
                float: left
    .post-nagivation-area
        margin-bottom: 110px
        margin-top: 115px
        padding-top: 90px
        border-top: 1px solid #dfdfdf
        float: left
        width: 100%
        height: auto
        display: flex
        justify-content: space-between
        align-items: flex-start
        .prev-post-area, .next-post-area
            .meta-code-post
                display: flex
                align-items: center
                i
                    color: $color-highlight-two
                    font-size: 36px
                    font-weight: 400
                    letter-spacing: 0.9px
                span
                    color: $color-highlight-two
                    font-size: 24px
                    font-weight: 400
                    letter-spacing: 0.6px
            .title-postnav
                a
                    color: $color-black
                    font-family: $Karla-font
                    font-size: 16px
                    font-weight: 700
                    line-height: 36px
                    word-break: break-word
            &:hover
                .meta-code-post
                    i
                        color: $color-orange
                    span
                        color: $color-orange
                a
                    color: $color-orange
        .prev-post-area
            padding-right: 15px
            a
            .meta-code-post
                justify-content: flex-start
                i
                    margin-right: 15px
                span
            .title-postnav
                p
        .next-post-area
            padding-left: 15px
            a
            .meta-code-post
                justify-content: flex-end
                i
                    margin-left: 15px
                span
            .title-postnav
                a
                    text-align: right
                    word-break: break-word
.single-comment-area
    display: flex
    justify-content: flex-start
    align-items: flex-start
    max-width: 770px
    width: 100%
    margin-bottom: 35px
    &:last-child
        margin-bottom: 0px
    .authore-comment
        margin-right: 30px
        max-width: 70px
        width: 100%
        a
            img
    .comment-ditail
        border-top: 1px solid #9999994f
        padding-top: 20px
        .header-comment
            display: flex
            justify-content: flex-start
            align-items: center
            margin-bottom: 30px
            a
                font-size: 13px
                font-weight: 600
                letter-spacing: 0.33px
                line-height: 30px
                margin-right: 5px
            span.date
                color: $color-highlight-one
                font-family: $Karla-font
                font-size: 16px
                font-weight: 400
        .connetent-comment
            margin-bottom: 23px
            p
                color: #797979
                font-size: 14px
                font-weight: 400
                line-height: 30px
        .reply-button
            margin-bottom: 28px
            a
                color: #0099cc
                font-weight: 400
                font-style: italic
                letter-spacing: 0.4px
                line-height: 18px

    input
        color: $color-highlight-two
        font-family: $Karla-font
        font-size: 16px
        width: 100%
        font-weight: 400
        padding: 15px 20px 
        letter-spacing: -0.24px
        border: 1px solid #d9d9d9
        background-color: $color-white
.sidebars-widget-area-main
    margin-top: 50px
.sidebars-widget-area, .footer-top-area
    .title-widget, .widgettitle
        color: $color-black
        font-family: $Karla-font
        font-size: 20px
        font-weight: 700
        line-height: 50px
        text-transform: uppercase
        letter-spacing: 0.5px
        h2
            font-size: 20px
    .content-widget
        margin-bottom: 75px
        margin-top: 20px
    .widget_recent_comments
        ul
            li
                display: flex
                flex-wrap: wrap
                justify-content: flex-start
                align-items: center
                padding: 9px 0
                span
                    margin-right: 10px
                    color: $color-highlight-two
                a
                    margin-left: 10px
                    color: $color-highlight-two
                    padding: 0 !important
            li
                &:hover
                    a
                        color: $color-orange
    .widget
        table
            width: 100%
            border-top:  1px solid #00000015
            border-right:  1px solid #00000015
            caption
                border: 1px solid #00000015
                border-bottom: 0px solid #00000015
                text-align: left
                padding: 8px

        th, td
            padding: 5px
            border-left: 1px solid #00000015
            border-bottom: 1px solid #00000015
        
    .widget_archive, .widget_categories, .widget_pages, .widget_meta
        select
            color: $color-black
            font-family: $Karla-font
            font-size: 16px
            width: 100%
            font-weight: 400
            padding: 15px 20px 
            letter-spacing: -0.24px
            border: 1px solid #d9d9d9
            background-color: $color-white
        .screen-reader-text
            margin-bottom: 20px
            float: left
        ul
            li
                &:hover
                    a
                        color: $color-orange
                    li
                        a
                            color: $color-highlight-two
                        &:hover
                            a
                                color: $color-orange
                            li
                                a
                                    color: $color-highlight-two
                                &:hover
                                    a
                                        color: $color-orange
                                li
                                    a
                                        color: $color-highlight-two
                                    &:hover
                                        a
                                            color: $color-orange
            li
                width: 100%
                padding-top: 10px
                padding-bottom: 10px
                border-top: 1px solid #00000015
                &:first-child
                    border-top: 0px solid #00000015
                a
                    display: unset
                    width: 100%
                    color: $color-black
                    font-family: $Karla-font
                    font-size: 15px
                    font-weight: 400
                    span
                    i
                ul
                    width: 100%
                    li
                        &:last-child
                            padding-bottom: 0
                        a
                            color: $color-highlight-two
                .active
                    color: $color-orange
    .widget_pages
        ul
            li
                border-top: 0px solid #00000015
                ul
                    padding-left: 15px
    .content-xpand
        padding: 0 18px
        max-height: 0
        overflow: hidden
        transition: max-height 0.2s ease-out
    .widget_categories
        ul
            ul
                padding-left: 15px
                li
                    a
                        color: $color-black
                ul
                    padding-left: 10px
    .popuplar-wdget, .widget_recent_entries, .widget_rss
        ul
            li
                a
                    color: $color-black
                    font-family: $Karla-font
                    font-size: 16px
                    font-weight: 400
                    line-height: 24px
                    margin-bottom: 20px
                &:hover
                    a
                        color: $color-orange
    .widget_nav_menu
        ul
            li
                &:hover
                    a
                        color: $color-orange
                    li
                        a
                            color: $color-highlight-two
                        &:hover
                            a
                                color: $color-orange
                            li
                                a
                                    color: $color-highlight-two
                                &:hover
                                    a
                                        color: $color-orange
                                    li
                                        a
                                            color: $color-highlight-two
                                        &:hover
                                            a
                                                color: $color-orange
                                            li
                                                a
                                                    color: $color-highlight-two
                                                &:hover
                                                    a
                                                        color: $color-orange
                                                    li
                                                        a
                                                            color: $color-highlight-two
                                                        &:hover
                                                            a
                                                                color: $color-orange
                                                            li
                                                                a
                                                                    color: $color-highlight-two
                                                                &:hover
                                                                    a
                                                                        color: $color-orange
                                                                    li
                                                                        a
                                                                            color: $color-highlight-two
                                                                        &:hover
                                                                            a
                                                                                color: $color-orange
                                                                            li
                                                                                a
                                                                                    color: $color-highlight-two
                                                                                &:hover
                                                                                    a
                                                                                        color: $color-orange
                                                                                    li
                                                                                        a
                                                                                            color: $color-highlight-two
                                                                                        &:hover
                                                                                            a
                                                                                                color: $color-orange
                                                                                            li
                                                                                                a
                                                                                                    color: $color-highlight-two
                                                                                                &:hover
                                                                                                    a
                                                                                                        color: $color-orange
                                                                                                    li
                                                                                                        a
                                                                                                            color: $color-highlight-two
                                                                                                        &:hover
                                                                                                            a
                                                                                                                color: $color-orange
                                                                                                            li
                                                                                                                a
                                                                                                                    color: $color-highlight-two

        ul
            li
                a
                    color: $color-black
                    font-size: 16px
                    font-weight: 400
                    padding: 9px 0
            ul
                padding-left: 7px
                li
                    a
                        color: $color-highlight-two
    .widget_rss
        ul
            li
                float: left
                width: 100%
                margin-bottom: 20px
                .rsswidget
                    font-weight: 600
                    margin-bottom: 10px
                .rss-date, .rssSummary
                    font-size: 14px
                    font-weight: 500
                    color: $color-highlight-two
                .rssSummary
                    margin-top: 10px
                    line-height: 22px
                cite
                    font-weight: 600
                    margin-top: 10px
                    text-align: right
                    float: right
    .widget_search
        .search-form
            display: flex
        .screen-reader-text
            display: none
        .search-field
            color: $color-black
            font-family: $Karla-font
            font-size: 16px
            width: 100%
            font-weight: 400
            padding: 14px 20px 
            letter-spacing: -0.24px
            border: 1px solid #d9d9d9
            background-color: $color-white
            border-radius: 0
            border-right: 0
            border-top-left-radius: 2px
            border-bottom-left-radius: 2px
        .search-submit
            @extend .sinle-input-field
            background: $color-orange
            color: $color-white
            padding: 10px 15px
            border-radius: 0
            border-top-right-radius: 2px
            border-bottom-right-radius: 2px
            cursor: pointer
    .tagcloud
        display: flex
        flex-wrap: wrap
        align-items: center
        a
            margin-right: 5px
            font-size: 16px !important
            background: #dadada33
            padding: 3px 14px
            margin-bottom: 5px
            border-radius: 2px
            color: $color-highlight-two
            &:hover
                color: $color-orange
    .widget_text
        .textwidget
            select
                color: $color-black
                font-family: $Karla-font
                font-size: 16px
                width: 100%
                font-weight: 400
                padding: 15px 20px 
                letter-spacing: -0.24px
                border: 1px solid #d9d9d9
                background-color: $color-white
            p
                color: $color-highlight-two
                line-height: 22px
                strong
                    margin-bottom: 10px
                    margin-top: 10px
                    color: $color-black
                    font-size: 16px
                    font-weight: 700
                    float: left
                    width: 100% 
    .comments-wdget
        ul
            li
                p
                    margin-bottom: 30px
                    display: flex
                    justify-content: flex-start
                    align-items: center
                    flex-wrap: wrap
                    color: $color-black
                    font-family: $Karla-font
                    font-size: 16px
                    font-weight: 400
                    i
                        color: $color-highlight-two
                        font-size: 14px
                        margin-right: 10px
                    a.authore
                    span
                        margin: 0px 5px
                        color: $color-highlight-two
                    a.commentlink
                        margin-left: 20px
    .twiiter-wdget
        ul
            li
                p
                    margin-bottom: 35px
                    color: $color-black
                    font-family: $Karla-font
                    font-size: 16px
                    font-weight: 400
                    line-height: 30px
                    span.titls
                        color: $color-highlight-one
                        a.authore
                    a.link
                        text-decoration: underline
                        color: #0099cc
                    span.tag
                    .date
                        width: 100%
                        color: $color-highlight-two
.site-footer
    float: left
    width: 100%
    height: auto
.respons-menu-open
    display: none