// @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import './theme/variables.sass'
body
    .wizrd-blog-theme
        font-family: 'Inter', sans-serif !important
        .container
            max-width: 1115px
        .btn
            font-size: 20px
            font-weight: bold
            line-height: 1.5
            letter-spacing: 0.5px
            border-radius: 25px
            padding: 7px 41px
            &:focus,
            &:active,
            &:hover
                outline: none
                box-shadow: none
        .form-control
            color: #252733
            font-size: 16px
            line-height: 2
            border-radius: 0
            padding: 9px 20px
            height: auto
            &::-webkit-input-placeholder
                color: #252733
                opacity: 0.4
            &::-moz-placeholder
                color: #252733
                opacity: 0.4
            &:-ms-input-placeholder
                color: #252733
                opacity: 0.4
            &:-moz-placeholder
                color: #252733
                opacity: 0.4
            &:focus,
            &:active,
            &:hover
                outline: none
                box-shadow: none
            &:-webkit-autofill,
            &:-webkit-autofill:hover,
            &:-webkit-autofill:focus,
            &:-webkit-autofill:active
                -webkit-box-shadow: 0 0 0 30px white inset !important
                border-radius: 100px
            &:-webkit-autofill
                -webkit-text-fill-color: #252733 !important
        .wizrd-form-wrapper
            width: 100%
            //display: inline-block
            iframe
                max-width: 100%
            .wizrd-newsletter
                width: 430px
                max-width: 100%
                background-color: #ffffff
                border-radius: 100px
                padding: 5px
                display: flex
                justify-content: space-between
                margin: 0 auto
                box-shadow: 0 0 10px 10px rgba(0,0,0,.02)
                .btn
                    &.btn-primary
                        width: 140px
                        font-size: 16px
                        padding: 15px 5px
                        line-height: 1.3
                        border-radius: 100px
                .form-group
                    margin: 0
                    display: inline-block
                    position: relative
                    .field_error
                        color: red
                        font-size: 14px
                        position: absolute
                        bottom: -30px
                        left: 20px
                        white-space: nowrap
                    label
                        width: 100%
                        margin: 0
                    .form-control
                        background-color: transparent !important
                        border: none !important
        .wizrd-site-header
            width: 100%
            display: inline-block
            position: relative
            .wizrd-main-header
                width: 100%
                display: flex
                justify-content: space-between
                align-items: center
                padding: 20px 20px
                .wizrd-header-logo
                    display: inline-block
                    max-width: 300px
                    &.longLogoText
                        a
                            font-size: 16px
                            font-weight: 700
                    a
                        font-size: 20px
                        line-height: 1.3
                        font-weight: 900
                        font-family: 'Nunito Sans', sans-serif
                        display: inline-block
                        white-space: nowrap
                        text-overflow: ellipsis
                        overflow: hidden
                        width: 100%
                        vertical-align: middle
                        //max-width: 235px
                        &:hover,
                        &:focus,
                        &:active
                            outline: none
                            text-decoration: none
                        &.wizrd-logo-img
                            font-size: 24px
                            img
                                display: inline-block
                                max-width: 100%
                                margin-right: 15px
                                max-height: 50px
                                width: auto
                .wizrd-site-navigation
                    display: inline-block
                    text-align: right
                    &.wizrd-site-navigation-center
                        position: absolute
                        left: 50%
                        transform: translateX(-50%)
                    ul
                        margin: 0
                        padding: 0
                        list-style: none
                        li
                            display: inline-block
                            vertical-align: middle
                            &.wizrd-mobile-nav
                                display: none
                                a
                                    width: 100%
                                    display: inline-block
                            a
                                font-weight: 600
                                font-size: 16px
                                line-height: 1.3
                                letter-spacing: -0.2px
                                padding: 9px 25px
                                text-transform: capitalize
                                &:hover,
                                &:focus,
                                &:active
                                    outline: none
                                    text-decoration: none
                            .btn.btn-primary
                                font-size: 16px
                                line-height: 1.3
                                border-radius: 100px
                                padding: 9px 27px
                                line-height: 1.3
                            &.wizrd-header-social-links
                                a
                                    padding-left: 0
                                    padding-right: 25px
                                    cursor: pointer
                                    opacity: .6
                                    &:hover,
                                    &:focus,
                                    &:active
                                        opacity: 1
                    .wizrd-mobile-icon
                        display: none
                        cursor: pointer
                        .wizrd-mobile-close-icon
                            display: none
                        .wizrd-mobile-open-icon
                            display: inline-block
                        .bar1, .bar2, .bar3
                            width: 22px
                            height: 3px
                            margin: 4px 0
                            transition: 0.4s
                        &.change
                            .wizrd-mobile-close-icon
                                display: inline-block
                            .wizrd-mobile-open-icon
                                display: none
                            .bar1
                                -webkit-transform: rotate(-45deg) translate(-9px, 6px)
                                transform: rotate(-45deg) translate(-9px, 6px)
                            .bar2
                                opacity: 0
                            .bar3
                                -webkit-transform: rotate(45deg) translate(-8px, -8px)
                                transform: rotate(45deg) translate(-8px, -8px)
                            & + ul
                                display: block
        .wizrd-site-main
            width: 100%
            display: inline-block
            .wizrd-home-banner
                width: 100%
                display: inline-block
                background-repeat: no-repeat
                background-size: cover
                background-position: center center
                text-align: center
                padding: 95px 0
                position: relative
                &::before
                    content: ''
                    position: absolute
                    top: 0
                    bottom: 0
                    left: 0
                    right: 0
                    opacity: .4
                    //display: none
                &.black-text
                    &::before
                        background-color: rgba(255,255,255,1)
                &.white-text
                    &::before
                        background: rgba(0,0,0,1)
                .container
                    max-width: 870px
                    position: relative
                    z-index: 1
                h1
                    font-size: 55px
                    line-height: 1.1
                    letter-spacing: -1px
                    font-weight: 600
                    margin: 0
                    span
                        //background: rgba(255, 255, 255, 0.5)
                        width: auto
                        display: inline-block
                        //padding: 16px 15px
                .wizrd-description
                    font-size: 24px
                    font-weight: 500
                    line-height: 1.4
                    letter-spacing: 0.5px
                    //width: 513px
                    max-width: 100%
                    display: inline-block
                    margin: 30px 0 40px
                    opacity: .8
                    //background: rgba(255, 255, 255, 0.5)
            .wizrd-recent-blogs
                padding: 50px 0 0
                .container
                    max-width: 900px
                .tabs
                    width: 100%
                    display: inline-block
                    text-align: center
                    .tab-content
                        p
                            font-size: 22px
                            font-weight: bold
                    .nav-tabs
                        //border-bottom: 1px solid #000000
                        //width: 100%
                        display: inline-block
                        margin: 0 0 32px
                        border: 1px solid rgba(0,0,0,.2)
                        border-radius: 100px
                        width: auto
                        padding: 8px
                        .nav-item
                            width: auto
                            display: inline-block
                            .nav-link
                                // font-weight: normal
                                // font-size: 24px
                                // line-height: 1.3
                                //border-bottom: 5px solid transparent
                                min-width: 186px
                                text-align: center
                                padding: 9px 20px
                                border: none
                                cursor: pointer
                                font-size: 16px
                                font-weight: 500
                                letter-spacing: -0.2px
                                line-height: 1.4
                                opacity: 0.6
                                border-radius: 100px
                                &:hover,
                                &:focus
                                    font-weight: 700
                                    opacity: 1
                                &.active
                                    background: $black-color
                                    font-weight: 700
                                    opacity: 1
                                    color: $white-color
                .wizrd-blog-list
                    list-style: none
                    margin: 0
                    padding: 0
                    border: none
                    li
                        width: 100%
                        margin: 0 0 30px
                        a
                            cursor: pointer
                            width: 100%
                            display: inline-block
                            border: none
                            &:hover
                                //box-shadow: 0px 1px 3px 4px #ccc
                                outline: none
                                text-decoration: none
                            &:focus,
                            &:active
                                outline: none
                                text-decoration: none
                            .wizrd-blog-box
                                //padding: 18px 34px
                                //background-color: $white-color
                                //border: 1px solid rgba(51,51,51,.3)
                                //border-radius: 5px
                                display: flex
                                white-space: normal
                                &::after
                                    display: none
                                .wizrd-blog-img
                                    width: 200px
                                    margin-right: 32px
                                    position: relative
                                    .wizrd-blog-img-inner
                                        position: relative
                                    img
                                        width: 100%
                                        //min-height: 180px
                                        height: 150px
                                        object-fit: cover
                                    .wizrd-blog-category
                                        position: absolute
                                        left: 0
                                        bottom: 0
                                        min-width: 80px
                                        padding: 7px 22px
                                        background: rgba(255,255,255,.5)
                                        border-radius: 0px 100px 100px 0px
                                        font-weight: bold
                                        font-size: 12px
                                        display: flex
                                        align-items: center
                                        justify-content: center
                                        color: #000
                                    .lazyloading
                                        filter: blur(3px)
                                .wizrd-blog-detail
                                    width: 60%
                                    width: calc(100% - 286px)
                                    .wizrd-blog-detail-inner
                                        height: 100%
                                        display: flex
                                        flex-direction: column
                                        justify-content: space-between
                                    h2
                                        font-size: 26px
                                        font-weight: bold
                                        line-height: 1.4
                                        letter-spacing: -0.2px
                                        margin: -5px 0 11px
                                        text-align: left
                                        word-break: break-word
                                        // -webkit-hyphens: auto
                                        // -moz-hyphens: auto
                                        // -ms-hyphens: auto
                                        // hyphens: auto
                                        // word-break: break-all
                                    .wizrd-blog-excerpt-detail
                                        display: flex
                                        justify-content: space-between
                                        align-items: flex-end
                                        padding: 0
                                        .wizrd-blog-view
                                            min-width: 130px
                                            background-color: #e9e9e9
                                            border-radius: 100px
                                            font-size: 12px
                                            font-weight: 600
                                            letter-spacing: -0.2px
                                            padding: 7px 10px 7px 15px
                                            svg
                                                margin-right: 8px
                                    .wizrd-blog-author
                                        // width: 100%
                                        // display: inline-block
                                        text-align: left
                                        .wizrd-blog-author-img
                                            display: inline-block
                                            vertical-align: middle
                                            margin-right: 5px
                                            img
                                                width: 33px
                                                height: 33px
                                                border-radius: 100%
                                        .wizrd-blog-author-name
                                            display: inline-block
                                            vertical-align: middle
                                            text-transform: uppercase
                                            font-size: 14px
                                            line-height: 1.4
                                            font-weight: 800
                                            letter-spacing: 0.5px
                                            opacity: 0.6
                                    .wizrd-blog-date
                                        width: 100%
                                        display: inline-block
                                        text-align: left
                                        font-size: 14px
                                        line-height: 1.4
                                        margin: 0
                                        opacity: 1
        .wizrd-site-footer
            width: 100%
            display: inline-block
            //margin: 53px 0 0
            margin: 0
            .wizrd-top-footer
                width: 100%
                display: inline-block
                //background-color: $white-color
                padding: 89px 0
                position: relative
                .wizrd-footer-dots
                    position: absolute
                    top: 0
                    left: 0
                    right: 0
                    bottom: 0
                    text-align: center
                    svg
                        max-width: 100%
                        max-height: 100%
                        opacity: .5
                .wizrd-footer-box
                    display: flex
                    flex-direction: column
                    width: 100%
                    text-align: center
                    vertical-align: bottom
                    position: relative
                    z-index: 1
                    // &:first-child
                    //     width: 39%
                    //     margin-right: 4%
                    // &:last-child
                    //     width: 57%
                    h2
                        font-size: 40px
                        line-height: 1.1
                        font-weight: 600
                        display: inline-block
                        vertical-align: middle
                        width: auto
                        margin: 0 0 26px
                        letter-spacing: -1px
                    h3
                        font-size: 24px
                        line-height: 1
                        font-weight: 900
                        text-decoration: underline
                        text-align: left
                    ul
                        list-style: none
                        margin: 0
                        padding: 0
                        text-align: left
                        li
                            display: inline-block
                            margin-left: 15px
                            text-align: center
                            &:first-child
                                margin-left: 0
                            span
                                display: block
                            img
                                margin-bottom: 15px
                            a
                                font-size: 14px
                                line-height: 1
                                font-weight: 900
                                &:hover,
                                &:active,
                                &:focus
                                    text-decoration: none
            .wizrd-copyright
                text-align: center
                padding: 25px 0
                font-size: 14px
                font-weight: 500
                text-transform: capitalize
                a
                    cursor: pointer
                    text-decoration: none
                    img
                        //margin-left: 4px
                        display: inline-block
                        vertical-align: middle
                        max-width: 230px
                span
                    display: inline-block
                    vertical-align: middle
.wizrd-blog-detail-wrapper
    display: flex
    justify-content: center
    padding: 50px 17px 0 8px
    img
        max-width: 100%
    .wizrd-blog-title
        margin-bottom: 30px
        h1
            font-size: 44px
            line-height: 1.4
            font-weight: 700
            letter-spacing: -0.2px
            margin: 0 0 30px
            word-break: break-word
        .span-user
            font-weight: 800
            font-size: 18px
            letter-spacing: -0.2px
            text-transform: uppercase
            display: block
            color: $black-color !important
            opacity: .6
            .wizrd-blog-date
                font-weight: 600
                font-size: 14px
                letter-spacing: -0.2px
                text-transform: uppercase
                color: $black-color !important
                opacity: 1
    .wizrd-blog-detail
        //width: calc(100% - 450px)
        width: 100%;
        max-width: 650px
        //width: calc(100% - 565px)
        margin: 0 15px 0 15px
        .wizrd-blog-comments
            margin: 0 15px 45px 35px
            h4
                font-size: 20px
                line-height: 1.3
        .wizrd-blog-detail-inner
            border: none
            margin: 0 0 0 0
        .wizrd-blog-feature-img
            width: 100%
            display: inline-block
            img
                object-fit: cover
                width: 100%
                height: 300px
        .wizrd-blog-description
            //padding: 30px 0 70px
            padding: 50px 0 70px
            h1
                font-size: 40px
                line-height: 1.2
                font-weight: 600
                letter-spacing: -1.5px
            .wizrd-blog-author-detail
                width: 100%
                display: inline-block
                font-size: 20px
                line-height: 1.3
                letter-spacing: 0.18px
                margin: 0 0 12px
                img
                    display: inline-block
                    vertical-align: middle
                    margin-right: 10px
                    border-radius: 100%
                    object-fit: cover
                    width: 52px
                    height: 52px
                span
                    display: inline-block
                    vertical-align: middle
            .wizrd-blog-date
                font-size: 14px
                line-height: 1.3
            .wizrd-blog-article
                width: 100%
                display: inline-block
                margin: 0 0 0
                text-align: center
                & > *
                    text-align: left
                p,
                ul,
                ol,
                li
                    font-size: 18px
                    line-height: 1.4
                    letter-spacing: 0.18px
                p,
                ul,
                ol,
                    margin: 0 0 33px
                p
                    &:last-child
                        margin-bottom: 0
                ul
                    list-style: disc
                ul,
                ol
                    list-style-position: inside
                li
                    margin: 0 0 10px
                h1,
                h2,
                h3,
                h4,
                h5,
                h6
                    margin: 0 0 20px
                    font-weight: 600
                h1
                    font-size: 45px
                h2
                    font-size: 40px
                h3
                    font-size: 30px
                h4
                    font-size: 28px
                h5
                    font-size: 25px
                h6
                    font-size: 20px
                a
                    color: #007bff
                    &:hover
                        text-decoration: none
                blockquote
                    margin: 1em
                    font-size: 22px
                img
                    margin: 0 auto 45px
                    display: inline-block
                    width: auto !important
                    height: auto !important

    .blog-sidebar
        width: 282px
        order: 3
        .blog-widget
            border: 1px solid rgba(51, 51, 51, 0.3)
            background-color: $white-color
            margin: 0 0 19px
            &:last-child
                margin-bottom: 0
            .author-widget
                width: 100%
                display: inline-block
                padding: 10px 23px
                .author-info
                    width: 100%
                    display: inline-block
                    border-bottom: 2px solid $light-grey-color
                    .author-img
                        display: inline-block
                        vertical-align: middle
                        width: auto
                        margin-right: 10px
                        padding: 0 0 8px
                        img
                            object-fit: cover
                            border-radius: 100%
                            width: 61px
                            height: 63px
                    .author-name
                        display: inline-block
                        vertical-align: middle
                        width: auto
                        h2
                            color: $light-grey-color
                            font-size: 14px
                            line-height: 1.4
                            font-weight: normal
                            margin: 0
                        h3
                            font-size: 20px
                            line-height: 1.3
                            font-weight: bold
                            letter-spacing: 0.18px
                            margin: 0
                .author-bio
                    width: 100%
                    display: inline-block
                    font-size: 18px
                    line-height: 1.4
                    padding: 15px 0
            .newsletter-widget
                text-align: center
                width: 100%
                display: inline-block
                margin: 0 0 12px
                .newsletter
                    width: 207px
                    max-width: 100%
                    display: inline-block
                    .form-group
                        margin: 0 0 11px
                        .form-control
                            font-size: 14px
                            line-height: 1.4
                            color: $light-grey-color
                            border: 1px solid $grey-color
                            border-radius: 5px
                            text-align: left
                    .btn
                        &.btn-primary
                            font-size: 14px
                            line-height: 1.4
                            border-radius: 5px
            .social-follow-widget
                position: absolute
                margin-top: 14%
                width: 100%
                display: inline-block
                h4
                    font-size: 16px
                    line-height: 1.5
                    font-weight: normal
                    margin: 0 0 7px
                ul
                    width: 100%
                    display: inline-block
                    margin: 0
                    padding: 0
                    list-style: none
                    li
                        display: inline-block
                        vertical-align: top
                        margin-right: 10px
                        &:last-child
                            margin-right: 0
                        a
                            display: inline-block
                            img
                                display: inline-block
                                max-width: 30px
            .top-wizrd-blog-article-widget
                width: 100%
                display: inline-block
                padding: 10px 16px
                h3
                    font-size: 20px
                    line-height: 1.3
                    font-weight: bold
                    margin: 0
                ul
                    width: 100%
                    display: inline-block
                    margin: 0
                    padding: 0
                    list-style: none
                    li
                        width: 100%
                        display: inline-block
                        margin: 17px 0 0
                        .top-wizrd-blog-article
                            width: 100%
                            display: inline-block
                            .top-wizrd-blog-article-img
                                display: inline-block
                                vertical-align: middle
                                margin-right: 10px
                                img
                                    width: 131px
                                    height: 75px
                                    object-fit: cover
                                    display: inline-block
                            h2
                                font-size: 13px
                                line-height: 1.4
                                font-weight: bold
                                display: inline-block
                                vertical-align: middle
                                width: 60%
                                width: calc(100% - 145px)
                                text-align: center

    .like-share
        width: 57px
        ul
            margin: 0
            padding: 0
            list-style: none
            li
                width: 100%
                display: inline-block
                vertical-align: top
                text-align: center
                margin: 0 0 12px
                &:last-child
                    margin-bottom: 0
                a
                    font-size: 20px
                    line-height: 1.3
                    width: 100%
                    display: inline-block
                    span
                        display: inline-block
                        width: 100%
.sticky
    .social-media-icons
        position: fixed
        z-index: 10

.social-media-icons
    display: block
    list-style: none
    padding: 0

.social-media-icons
    li
        img
            width: 24px
    .youtube
        img
            height: 18px
.footer-logo
    // width: 45px
    // height: 29px
.wizrd-flags
    position: absolute
    top: 0
    bottom: 0
    right: 0
    left: 0
    display: flex
    justify-content: space-between
    flex-direction: column
    &.wizrd-home-banner-flags
        top: 80px
        bottom: 80px
    &.wizrd-footer-flags
        top: 50px
        bottom: 50px
    .wizrd-top-flags
        position: absolute
        right: 80px
        top: 0
    .wizrd-bottom-flags
        position: absolute
        left: 80px
        bottom: 0

.pagination
    width: 100%
    display: inline-block !important
    margin: 6px 0px 40px
    text-align: center
    li
        margin: 0 2px
        width: auto !important
        display: inline-block
        a
            width: auto !important
            display: inline-block
            font-size: 18px
            line-height: 18px
            font-weight: 500
            border-radius: 5px
            padding: 6px 9px
            opacity: 0.6
            &:hover
                text-decoration: none
        &.active
            a
                opacity: 1
        &.disabled
            a
                opacity: 0.5


.social-follow-widget
    position: absolute
    margin-top: 14%
    .social-media-icons
        margin-left: 16px
        li
            a
                width: 31px
                height: 31px
                display: flex
                align-items: center
                justify-content: center
                border: 2px solid #000
                margin-bottom: 5px

.wizrd-author-box
    display: flex
    justify-content: center
    align-items: center
    max-width: 900px
    margin: 0 auto
    width: 100%
    padding: 0 15px
    .wizrd-author-avtar
        width: 100px
        height: 100px
        img
            width: 100%
            height: 100%
            object-fit: cover
            border-radius: 100%
    .wizrd-author-subscription-action
        font-size: 16px !important
        line-height: 1.3 !important
        padding: 7px 17px !important
    .wizrd-blog-author-details
        max-width: calc(100% - 280px)
        padding: 0 15px
        text-align: left
        min-width: 470px
        .author-label
            color: $white-color
            font-size: 14px
            margin: 0 0 8px
            font-weight: 700
            text-transform: uppercase
            opacity: .6
        .wizrd-author-name
            text-transform: capitalize
            font-size: 18px
            line-height: 1.4
            margin: 0 0 9px
            font-weight: 700
            display: block
        .wizrd-author-bio
            width: 100%
            text-align: left
            font-size: 14px
            line-height: 1.4
            font-weight: 500
            margin: 0 0 15px
            display: inline-block

.wizrd-recent-blogs
    padding: 0 0 50px
    h3
        font-size: 30px
        line-height: 1.2
        font-weight: 700
        letter-spacing: -0.2px
        margin: 0 0 22px
    .wizrd-recent-blog-tag
        width: 100%
        display: inline-block
        margin: 0 0 17px
        span
            width: auto
            display: inline-block
            font-size: 12px
            line-height: 1.4
            font-weight: 600
            background-color: #e9e9e9
            padding: 6px 21px
            border-radius: 100px
    .card
        border: 1px solid rgba(0, 0, 0, 0.12)
        box-shadow: none
        .card-block
            padding: 20px
            h5
                font-size: 20px
                line-height: 1.4
                font-weight: 600
                letter-spacing: -0.2px
                margin: 0 0 25px
        .wizrd-recent-blog-author
            display: flex
            justify-content: space-between
            padding: 0
            font-size: 14px
            line-height: 1.4
            span
                color: $black-color !important
                opacity: 0.6
                &:first-child
                    text-transform: uppercase
                    font-weight: 600
        h5
            font-weight: 600
            font-size: 20px
            letter-spacing: -0.2px
            line-height: 25px
.wizrd-blog-author-detail
    display: flex
    align-items: center
    justify-content: space-between
    .wizrd-blog-view
        min-width: 130px
        background-color: #e9e9e9
        border-radius: 100px
        font-size: 12px
        font-weight: 600
        letter-spacing: -0.2px
        padding: 7px 10px 7px 15px
        text-align: center
        svg
            margin-right: 8px
.modal
    .modal-body
        padding: 30px 30px 50px
    .wizrd-newsletter
        border: 1px solid #dee2e6
        @media (max-width: 767px)
            border: none
        .form-control
            @media (max-width: 767px)
                border: 1px solid #dee2e6 !important
    .modal-dialog
        transform: none !important
    .modal-header
        padding: 15px 30px
        h4
            font-size: 25px
            color: black
            margin: 0
.wizrd-contact
    width: 100%
    display: inline-block
    margin: 0 0 50px
    background-color: #E2E2E2
    border: 1px solid rgba(51, 51, 51, 0.3)
    border-radius: 5px
    padding: 30px
    label
        font-size: 20px
        font-weight: bold
        line-height: 1.3
        margin: 0 0 14px
        .form-group
            margin-bottom: 20px
            .form-control
                border: 1px solid rgba(51, 51, 51, 0.3)
                border-radius: 0
    .below_label
        font-size: 16px
        line-height: 1.5
        font-weight: normal
    .wizrd-contact-action
        align-items: flex-end
.related-article
    .card-image
        width: 100%
        height: 230px
        img
            width: 100%
