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

    body.blogmatic-dark-mode .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);
    }

    /* 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;
    }

    /* column four */
    .bb-bldr-row.column-4.layout-one {
        grid-template-columns: repeat(4, 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: #fff;
    }

    .blogmatic-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(--blogmatic-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: 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: 1fr 1fr 3fr;
    }

    .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: 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: 1fr 1fr 3fr;
    }

    .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;
    }

/* 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 .blogmatic-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 .blogmatic-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 .blogmatic-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 .blogmatic-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 .blogmatic-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 .blogmatic-scroll-btn,
        footer .bb-bldr-row .smartphone-alignment--right .site-info {
            text-align: right;
        }
    }

/* header */
    .site-header.full-width--layout .blogmatic-container,
    .site-footer.full-width--layout .blogmatic-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;
    }

    /* header sticky */
        .site-header.header-sticky--enabled {
            position: fixed;
            z-index: 9999;
            width: 100%;
            top: 0;
            left: 0;
        }

        .site-header.header-sticky--enabled {
            animation: .3s smart-sticky ease-out;
            transition: transform .3s ease-out;
            will-change: opacity;
        }

        .site-header.header-sticky--enabled.fixed--off,
        .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 {
            top: 32px;
        }

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

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

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

        .blogmatic-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(--blogmatic-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,
        .bb-bldr-row.mobile-canvas .top-date-time .date,
        .bb-bldr-row.mobile-canvas .top-date-time .time,
        .bb-bldr-row.mobile-canvas .search-trigger i,
        .bb-bldr-row.mobile-canvas .social-icons-wrap a,
        .site-header .bb-bldr-row.mobile-canvas .mode-toggle i {
            color: var(--blogmatic-canvas-color);
        }

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

/* footer */
    body footer.site-footer {
        background-color: #fff;
    }

    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 .blogmatic-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 .blogmatic-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 .blogmatic-scroll-btn,
    footer .bb-bldr-row .alignment-right .site-info {
        text-align: right;
    }

    /* 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(--blogmatic-footer-menu-family);
            font-size: var(--blogmatic-footer-menu-size);
            font-style: var(--blogmatic-footer-menu-font-style);
            line-height: var(--blogmatic-footer-menu-lineheight);
            letter-spacing: var(--blogmatic-footer-menu-letterspacing);
            text-decoration: var(--blogmatic-footer-menu-textdecoration);
            text-transform: var(--blogmatic-footer-menu-texttransform);
            font-weight: var(--blogmatic-footer-menu-weight);
            color: var(--blogmatic-footer-menu-color);
        }

        @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(--blogmatic-footer-menu-color-hover);
        }

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

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

        body footer.site-footer.boxed--layout .bb-bldr-row.is-vertical.insta-slider--enabled .bb-bldr-column.builder-instagram-widget {
            max-width: 1316px;
        }

        /* column two */
        footer.boxed--layout .bb-bldr-row.column-2.layout-one .bb-bldr-column .has-sidebar .swiper-initialized {
            max-width: 648px;
        }

        /* column three */
        footer.boxed--layout .bb-bldr-row.column-3.layout-one .bb-bldr-column .has-sidebar .swiper-initialized {
            max-width: 425px;
        }

        /* column four */
        footer.boxed--layout .bb-bldr-row.column-4.layout-one .bb-bldr-column .has-sidebar .swiper-initialized {
            max-width: 314px;
        }

        /* full width */
        /* column two */
        footer.full-width--layout .bb-bldr-row.column-2.layout-one .bb-bldr-column .has-sidebar .swiper-initialized {
            max-width: 942px;
        }

        /* column three */
        footer.full-width--layout .bb-bldr-row.column-3.layout-one .bb-bldr-column .has-sidebar .swiper-initialized {
            max-width: 613px;
        }

        /* column four */
        footer.full-width--layout .bb-bldr-row.column-4.layout-one .bb-bldr-column .has-sidebar .swiper-initialized {
            max-width: 455px;
        }

        @media screen and (max-width: 1400px) {
            footer.boxed--layout .bb-bldr-row.column-2 .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: 548px;
            }

            footer.boxed--layout .bb-bldr-row.column-3 .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: 358px;
            }

            footer.boxed--layout .bb-bldr-row.column-4 .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: 264px;
            }
        }
        
        @media (max-width: 769px) {
            /* boxed layout*/
            /* column two */
            footer.boxed--layout .bb-bldr-row.column-2.tablet-layout-one .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: 248px;
            }

            footer.boxed--layout .bb-bldr-row.column-2.tablet-layout-two .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: initial;
            }

            /* column three */
            footer.boxed--layout .bb-bldr-row.column-3.tablet-layout-one .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: 160px;
            }

            footer.boxed--layout .bb-bldr-row.column-3.tablet-layout-two .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: initial;
            }

            /* column four */
            footer.boxed--layout .bb-bldr-row.column-4.tablet-layout-one .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: 165px;
            }

            footer.boxed--layout .bb-bldr-row.column-4.tablet-layout-two .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: initial;
            }

            /* full layout*/
            /* column two */
            footer.full-width--layout .bb-bldr-row.column-2.tablet-layout-one .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: 340px;
            }

            footer.full-width--layout .bb-bldr-row.column-2.tablet-layout-two .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: initial;
            }

            /* column three */
            footer.full-width--layout .bb-bldr-row.column-3.tablet-layout-one .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: 220px;
            }

            footer.full-width--layout .bb-bldr-row.column-3.tablet-layout-two .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: initial;
            }

            /* column four */
            footer.full-width--layout .bb-bldr-row.column-4.tablet-layout-one .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: 170px;
            }

            footer.full-width--layout .bb-bldr-row.column-4.tablet-layout-two .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: initial;
            }
        }

        @media (max-width: 426px) {
            /* column two */
            footer.boxed--layout .bb-bldr-row.column-2.smartphone-layout-one .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: 188px;
            }

            footer.boxed--layout .bb-bldr-row.column-2.smartphone-layout-two .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: initial;
            }

            /* column three */
            footer.boxed--layout .bb-bldr-row.column-3.smartphone-layout-one .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: 160px;
            }

            footer.boxed--layout .bb-bldr-row.column-3.smartphone-layout-two .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: initial;
            }

            /* column four */
            footer.boxed--layout .bb-bldr-row.column-4.smartphone-layout-one .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: 135px;
            }

            footer.boxed--layout .bb-bldr-row.column-4.smartphone-layout-two .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: initial;
            }

            /* full layout*/
            /* column two */
            footer.full-width--layout .bb-bldr-row.column-2.smartphone-layout-one .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: 200px;
            }

            footer.full-width--layout .bb-bldr-row.column-2.smartphone-layout-two .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: initial;
            }

            /* column three */
            footer.full-width--layout .bb-bldr-row.column-3.smartphone-layout-one .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: 130px;
            }

            footer.full-width--layout .bb-bldr-row.column-3.smartphone-layout-two .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: initial;
            }

            /* column four */
            footer.full-width--layout .bb-bldr-row.column-4.smartphone-layout-one .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: 100px;
            }

            footer.full-width--layout .bb-bldr-row.column-4.smartphone-layout-two .bb-bldr-column .has-sidebar .swiper-initialized {
                max-width: initial;
            }
        }