.site-header {
    position: relative;
}

.site-header {
    margin-bottom: 40px;
}

/* row */
    .bb-bldr-row {
        display: grid;
        align-items: center;
        -webkit-align-items: center;
        gap: 20px;
        padding: 20px 0;
    }

    header .bb-bldr-row.row-one {
        padding: 50px 0 20px;
    }

    body.blog-postx-dark-mode .site .bb-bldr-row {
        border-color: #575757;
    }

    /* column one */
    .bb-bldr-row.column-1.layout-one {
        grid-template-columns: 100%;
    }

    /* column two */
    .bb-bldr-row.column-2.layout-one {
        grid-template-columns: repeat(2, 1fr);
    }

    .bb-bldr-row.column-2.layout-two {
        grid-template-columns: 4fr 1fr;
    }

    .bb-bldr-row.column-2.layout-three {
        grid-template-columns: 1fr 4fr;
    }

    /* column three */
    .bb-bldr-row.column-3.layout-one {
        grid-template-columns: repeat(3, 1fr);
    }

    .bb-bldr-row.column-3.layout-two {
        grid-template-columns: 3fr 1fr 1fr;
    }

    .bb-bldr-row.column-3.layout-three {
        grid-template-columns: 1fr 1fr 3fr;
    }

    .bb-bldr-row.column-3.layout-four {
        grid-template-columns: 1fr 3fr 1fr;
    }

    .bb-bldr-row.column-3.layout-five {
        grid-template-columns: 2fr 1fr 2fr;
    }

    /* column four */
    .bb-bldr-row.column-4.layout-one {
        grid-template-columns: repeat(4, 1fr);
    }

    .bb-bldr-row.column-4.layout-two {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }

    .bb-bldr-row.column-4.layout-three {
        grid-template-columns: 1fr 1fr 1fr 2fr;
    }

    .bb-bldr-row.column-4.layout-four {
        grid-template-columns: 1fr 2fr 1fr 1fr;
    }

/* responsive */
@media (min-width: 769px) {
    .bb-bldr--responsive {
        display: none;
    }
}

@media (max-width: 769px) {
    header .bb-bldr--normal,
    .bb-bldr-row.mobile-canvas,
    #site-navigation button.menu-toggle {
        display: none;
    }

    .bb-bldr-row.mobile-canvas.open {
        display: block;
        position: absolute;
        z-index: 999;
        width: 100%;
        left: 0;
        max-height: 300px;
        overflow-y: auto;
        padding: 20px;
        background-color: var(--blog-postx-white-dark-color);
    }

    .blog-postx-dark-mode .bb-bldr-row.mobile-canvas.open {
        background: #333;
    }

    .main-navigation ul {
        display: block;
    }

    .bb-bldr-row.mobile-canvas.open .bb-bldr-widget + .bb-bldr-widget {
        margin-top: 20px;
    }

    .bb-bldr-row.mobile-canvas.open .bb-bldr-widget .header-custom-button-wrapper {
        display: inline-block;
    }

    /* scrollbar design */
    .bb-bldr-row.mobile-canvas.open::-webkit-scrollbar {
        width: 2px;
    }
    
    .bb-bldr-row.mobile-canvas.open::-webkit-scrollbar-thumb {
        background-color: var(--blog-postx-global-preset-theme-color);
        border-radius: 40px;
    }

    /* column layout two */
    .bb-bldr--responsive .bb-bldr-row.column-2.tablet-layout-one,
    footer .bb-bldr-row.column-2.tablet-layout-one {
        grid-template-columns: repeat(2, 1fr);
    }

    .bb-bldr--responsive .bb-bldr-row.column-2.tablet-layout-two,
    footer .bb-bldr-row.column-2.tablet-layout-two {
        grid-template-columns: 4fr 1fr;
    }

    .bb-bldr--responsive .bb-bldr-row.column-2.tablet-layout-three,
    footer .bb-bldr-row.column-2.tablet-layout-three {
        grid-template-columns: 100%;
    }

    /* column layout three */
    .bb-bldr--responsive .bb-bldr-row.column-3.tablet-layout-one,
    footer .bb-bldr-row.column-3.tablet-layout-one {
        grid-template-columns: repeat(3, 1fr);
    }

    .bb-bldr--responsive .bb-bldr-row.column-3.tablet-layout-two {
        grid-template-columns: 3fr 1fr 1fr;
    }

    .bb-bldr--responsive .bb-bldr-row.column-3.tablet-layout-three,
    footer .bb-bldr-row.column-3.tablet-layout-two {
        grid-template-columns: 100%;
    }

    /* column four */
    footer .bb-bldr-row.column-4.tablet-layout-one {
        grid-template-columns: repeat(4, 1fr);
    }

    footer .bb-bldr-row.column-4.tablet-layout-two {
        grid-template-columns: 100%;
    }
}

@media (max-width: 426px) {
    /* column layout two */
    .bb-bldr--responsive .bb-bldr-row.column-2.smartphone-layout-one,
    footer .bb-bldr-row.column-2.smartphone-layout-one {
        grid-template-columns: repeat(2, 1fr);
    }

    .bb-bldr--responsive .bb-bldr-row.column-2.smartphone-layout-two,
    footer .bb-bldr-row.column-2.smartphone-layout-two {
        grid-template-columns: 4fr 1fr;
    }

    .bb-bldr--responsive .bb-bldr-row.column-2.smartphone-layout-three,
    footer .bb-bldr-row.column-2.smartphone-layout-three {
        grid-template-columns: 100%;
    }

    /* column layout three */
    .bb-bldr--responsive .bb-bldr-row.column-3.smartphone-layout-one,
    footer .bb-bldr-row.column-3.smartphone-layout-one {
        grid-template-columns: repeat(3, 1fr);
    }

    .bb-bldr--responsive .bb-bldr-row.column-3.smartphone-layout-two {
        grid-template-columns: 3fr 1fr 1fr;
    }

    .bb-bldr--responsive .bb-bldr-row.column-3.smartphone-layout-three,
    footer .bb-bldr-row.column-3.smartphone-layout-two {
        grid-template-columns: 100%;
    }

    /* column four */
    footer .bb-bldr-row.column-4.smartphone-layout-one {
        grid-template-columns: repeat(4, 1fr);
    }

    footer .bb-bldr-row.column-4.smartphone-layout-two {
        grid-template-columns: 100%;
    }
}

/* column */
    .bb-bldr-row .bb-bldr-column {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        align-items: center;
        -webkit-align-items: center;
        min-width: 0;
    }

/* alignment */
    .bb-bldr-row .alignment-left,
    .bb-bldr-row .alignment-left .menu {
        justify-content: left;
        -webkit-justify-content: left;
    }

    .bb-bldr-row .alignment-center,
    .bb-bldr-row .alignment-center .menu {
        justify-content: center;
        -webkit-justify-content: center;
    }

    .bb-bldr-row .alignment-right,
    .bb-bldr-row .alignment-right .menu {
        justify-content: right;
        -webkit-justify-content: right;
    }

    @media (max-width: 769px) {
        .bb-bldr-row .tablet-alignment--left {
            justify-content: left;
            -webkit-justify-content: left;
        }

        footer .bb-bldr-row .tablet-alignment--center .social-icons-wrap,
        footer .bb-bldr-row .tablet-alignment--center .footer-logo,
        footer .bb-bldr-row .tablet-alignment--center .blog-postx-scroll-btn,
        footer .bb-bldr-row .tablet-alignment--center .site-info {
            text-align: left;
        }
    
        .bb-bldr-row .tablet-alignment--center {
            justify-content: center;
            -webkit-justify-content: center;
        }

        footer .bb-bldr-row .tablet-alignment--cente .social-icons-wrap,
        footer .bb-bldr-row .tablet-alignment--cente .footer-logo,
        footer .bb-bldr-row .tablet-alignment--cente .blog-postx-scroll-btn,
        footer .bb-bldr-row .tablet-alignment--cente .site-info {
            text-align: center;
        }

        .bb-bldr-row .tablet-alignment--right {
            justify-content: right;
            -webkit-justify-content: right;
        }

        footer .bb-bldr-row .tablet-alignment--right .social-icons-wrap,
        footer .bb-bldr-row .tablet-alignment--right .footer-logo,
        footer .bb-bldr-row .tablet-alignment--right .blog-postx-scroll-btn,
        footer .bb-bldr-row .tablet-alignment--right .site-info {
            text-align: right;
        }
    }

    @media (max-width: 610px) {
        .bb-bldr-row .smartphone-alignment--left {
            justify-content: left;
            -webkit-justify-content: left;
        }

        footer .bb-bldr-row .smartphone-alignment--center .social-icons-wrap,
        footer .bb-bldr-row .smartphone-alignment--center .footer-logo,
        footer .bb-bldr-row .smartphone-alignment--center .blog-postx-scroll-btn,
        footer .bb-bldr-row .smartphone-alignment--center .site-info {
            text-align: left;
        }
    
        .bb-bldr-row .smartphone-alignment--center {
            justify-content: center;
            -webkit-justify-content: center;
        }

        footer .bb-bldr-row .smartphone-alignment--cente .social-icons-wrap,
        footer .bb-bldr-row .smartphone-alignment--cente .footer-logo,
        footer .bb-bldr-row .smartphone-alignment--cente .blog-postx-scroll-btn,
        footer .bb-bldr-row .smartphone-alignment--cente .site-info {
            text-align: center;
        }

        .bb-bldr-row .smartphone-alignment--right {
            justify-content: right;
            -webkit-justify-content: right;
        }

        footer .bb-bldr-row .smartphone-alignment--right .social-icons-wrap,
        footer .bb-bldr-row .smartphone-alignment--right .footer-logo,
        footer .bb-bldr-row .smartphone-alignment--right .blog-postx-scroll-btn,
        footer .bb-bldr-row .smartphone-alignment--right .site-info {
            text-align: right;
        }
    }

/* header */
    .site-header.full-width--layout .blog-postx-container,
    .site-footer.full-width--layout .blog-postx-container {
        width: initial;
        max-width: initial;
        padding: 0;
    }

    .site-header.full-width--layout .row,
    .site-footer.full-width--layout .row {
        margin: 0;
    }

    /* site logo */
    .bb-bldr-row .alignment-left .site-branding {
        text-align: left;
    }

    .bb-bldr-row .alignment-center .site-branding {
        text-align: center;
    }

    .bb-bldr-row .alignment-right .site-branding {
        text-align: right;
    }

    .bb-bldr-row .site-branding img {
        width: 160px;
    }

    /* header sticky */
        .site-header.header-sticky--disabled {
            height: initial !important;
        }

        .site-header.header-sticky--enabled .bb-bldr--normal,
        .site-header.header-sticky--enabled .bb-bldr--responsive {
            position: fixed;
            z-index: 9999;
            width: 100%;
            top: 0;
            left: 0;
            transition: transform .3s ease-out;
        }

        .site-header.header-sticky--enabled.fixed--on .bb-bldr--normal,
        .site-header.header-sticky--enabled.fixed--on .bb-bldr--responsive {
            animation: .3s smart-sticky ease-in-out;
            will-change: opacity;
            background-color: var(--blog-postx-white-dark-color);
            box-shadow: 0px 1px 7px #0000000d;
        }

        .site-header.header-sticky--enabled.fixed--off {
            transform: translateY(-1000px);
        }

        @keyframes smart-sticky {
            0% {
                transform: translateY(-250%);
            }
            
            100% {
                transform: translateY(0);
            }
        }

        .admin-bar .site-header.header-sticky--enabled .bb-bldr--normal {
            top: 32px;
        }

        .site-header.header-sticky--enabled .bb-bldr-row {
            display: none;
        }

        .site-header.header-sticky--enabled .bb-bldr-row.row-sticky {
            display: grid;
        }

        @media (max-width: 768px) {
            .admin-bar .site-header.header-sticky--enabled .bb-bldr--responsive {
                top: 46px;
            }
        }

        @media (max-width: 600px) {
            .admin-bar .site-header.header-sticky--enabled .bb-bldr--responsive {
                top: 0;
            }
        }

    /* mobile canvas */
        .site-header .toggle-button-wrapper .canvas-menu-icon span {
            background-color: var(--blog-postx-mobile-canvas-icon-color);
        }

        .blog-postx-dark-mode .site-header .toggle-button-wrapper .canvas-menu-icon span {
            background-color: #fff;
        }

        .site-header .toggle-button-wrapper .canvas-menu-icon:hover span {
            background-color: var(--blog-postx-mobile-canvas-icon-color-hover);
        }

        .bb-bldr-row.mobile-canvas.alignment--left {
            text-align: left;
        }

        .bb-bldr-row.mobile-canvas.alignment--center {
            text-align: center;
        }

        .bb-bldr-row.mobile-canvas.alignment--right {
            text-align: right;
        }

        .bb-bldr-row.mobile-canvas.alignment--right .main-navigation ul.menu li a.toggle-sub-menu {
            right: initial;
            left: 0;
        }

        .bb-bldr-row.mobile-canvas .main-navigation .menu li a {
            color: var(--blog-postx-canvas-color);
        }

    /* progress bar */
    .single-progress {
        height: 6px;
        background-color: var(--blog-postx-global-preset-theme-color);
        position: fixed;
        bottom: 0;
        z-index: 999;
    }

/* 
    MARK: footer
*/
    footer.site-footer {
        background: var(--blog-postx-white-dark-color);
    }

    body footer.site-footer .bb-bldr-row.is-vertical {
        grid-template-columns: 100%
    }

    .site-title {
        margin: 0;
    }

    footer .bb-bldr-row {
        align-items: self-start;
        -webkit-align-items: self-start;
    }

    footer .bb-bldr-row .alignment-left .social-icons-wrap,
    footer .bb-bldr-row .alignment-left .footer-logo,
    footer .bb-bldr-row .alignment-left .blog-postx-scroll-btn,
    footer .bb-bldr-row .alignment-left .site-info {
        text-align: left;
    }

    footer .bb-bldr-row .alignment-center .social-icons-wrap,
    footer .bb-bldr-row .alignment-center .footer-logo,
    footer .bb-bldr-row .alignment-center .blog-postx-scroll-btn,
    footer .bb-bldr-row .alignment-center .site-info {
        text-align: center;
    }

    footer .bb-bldr-row .alignment-right .social-icons-wrap,
    footer .bb-bldr-row .alignment-right .footer-logo,
    footer .bb-bldr-row .alignment-right .blog-postx-scroll-btn,
    footer .bb-bldr-row .alignment-right .site-info {
        text-align: right;
    }

    /* 
        MARK: FOOTER ROW
    */

        .site-footer .bb-bldr-row.row-one {
            padding: 40px 0 0;
        }

        .site-footer .bb-bldr-row.row-two {
            padding: 30px 0 40px;
        }

        .site-footer .bb-bldr-row.row-three {
            padding: 20px 0;
            border-top: 1px solid #9595952b;
        }

    /* menu */
        footer.site-footer .bb-bldr-widget:not(.has-sidebar) .menu,
        footer.site-footer .bb-bldr-widget:not(.has-sidebar) .sub-menu {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            -webkit-align-items: center;
            column-gap: 20px;
            row-gap: 10px;
        }

        footer.site-footer .bb-bldr-widget:not(.has-sidebar) .menu li {
            display: flex;
            align-items: center;
            -webkit-align-items: center;
            column-gap: 20px;
            row-gap: 10px;
        }

        footer.site-footer .bb-bldr-widget:not(.has-sidebar) .menu li a {
            text-decoration: none;
            font-family: var(--blog-postx-footer-menu-family);
            font-size: var(--blog-postx-footer-menu-size);
            font-style: var(--blog-postx-footer-menu-font-style);
            line-height: var(--blog-postx-footer-menu-lineheight);
            letter-spacing: var(--blog-postx-footer-menu-letterspacing);
            text-decoration: var(--blog-postx-footer-menu-textdecoration);
            text-transform: var(--blog-postx-footer-menu-texttransform);
            font-weight: var(--blog-postx-footer-menu-weight);
            color: var(--blog-postx-footer-menu-color);
            transition: all .3s ease-in-out;
        }

        @media (max-width: 1024px) {
            footer.site-footer .bb-bldr-widget:not(.has-sidebar) .sub-menu {
                display: none;
            }
        }

    /* column */
        footer.site-footer .bb-bldr-widget:not(.has-sidebar) .menu li a:hover {
            color: var(--blog-postx-footer-menu-color-hover);
        }

    /* 
        MARK: SOCIAL ICONS
    */

        header .social-icons-wrap a {
            text-decoration: none;
            display: inline-block;
        }

        header .social-icons-wrap a + a {
            margin-left: 15px;
        }

        header .social-icons-wrap a i {
            color: var(--blog-postx-header-social-color);
        }

        header .social-icons-wrap a:hover i {
            color: var(--blog-postx-header-social-color-hover);
        }

        footer .social-icons-wrap .blog-postx-social-icon {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
        }

        footer .social-icons-wrap a {
            color: var(--blog-postx-footer-social-color);
            text-decoration: none;
            display: inline-block;
            transition: all .3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        footer .social-icons-wrap a:hover {
            color: var(--blog-postx-footer-social-color-hover);
        }

        .bb-bldr-row .social-icons-wrap a i {
            font-size: 16px;
            border-radius: 3px;
            text-align: center;
            transition: all .25s cubic-bezier(.02,.01,.45,1);
        }

        header .social-icons-wrap .is-border a i,
        header .social-icons-wrap .is-box-shadow a i,
        header .social-icons-wrap .is-background a i {
            width: 40px;
            height: 35px;
            line-height: 35px;
        }

        footer .social-icons-wrap .is-border a i,
        footer .social-icons-wrap .is-box-shadow a i,
        footer .social-icons-wrap .is-background a i {
            font-size: 0.75rem;
            width: 28px;
            height: 26px;
            line-height: 26px;
            border-radius: 3px;
            text-align: center;
        }

        footer .social-icons-wrap .is-background a i {
            color: #fff;
            background: #c69270;
        }

        footer .social-icons-wrap .icon-count:before {
            content: '.';
            padding-right: 2px;
        }

        header .social-icons-wrap.blog-postx-show-hover-animation a .icon-label {
            display: none;
        }

        .bb-bldr-row .social-icons-wrap .is-hover-animation a:hover i,
        .widget_blog_postx_social_platforms_widget .blog-postx-social-icon.is-hover-animation a:hover {
            transform: translateY(-2px);
        }

    /* 
        MARK: FOOTER LOGO
    */
        footer .footer-logo img {
            width: 200px;
            display: block;
        }

    /* instagram */
        .bb-bldr-widget.builder-ymhm-widget {
            flex: 1;
            width: 100%;
        }

        footer .bb-bldr-widget.has-sidebar {
            width: 100%;
        }