/* =========================================================
           GENERAL
        ========================================================= */

        .dropdown-menu{

            left: 0% !important;
        }
        a {
            text-decoration: none;
        }

        .dropdown-toggle::after {
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-left: 5px;
            vertical-align: middle;
            content: "";
            background-color: currentColor;

            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;

            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;

            border: 0;
        }


        /* =========================================================
           TOP BAR
        ========================================================= */

        .q-topbar {
            height: 40px;
            background: var(--bs-primary);
            color: #fff;
        }

        .q-topbar-inner {
            max-width: 1620px;
            height: 100%;
            margin: auto;

            display: flex;
            align-items: center;
            justify-content: space-between;

            padding: 0 110px;
        }

        .q-topbar-left {
            font-size: 14px;
            font-weight: 500;
        }

        .q-topbar-right {
            display: flex;
            align-items: center;
            gap: 24px;
        }

        .q-topbar-right a {
            color: #fff;
            font-size: 14px;
            font-weight: 500;
        }


        /* =========================================================
           MAIN NAVBAR
        ========================================================= */

        .q-navbar {
            /*height: 67px;*/
            background: #fff;
            /*border-bottom: 1px solid #e5e7eb;*/

            position: relative;
            z-index: 1000;
        }

        .q-navbar-inner {
            max-width: 1620px;
            height: 100%;
            margin: auto;

            padding: 0 110px;

            display: flex;
            align-items: center;

        }


        /* =========================================================
           LOGO
        ========================================================= */

        .q-logo {
            flex-shrink: 0;

            font-size: 30px;
            font-weight: 700;

            color: #111827;

            letter-spacing: -1px;
        }

        .q-logo:hover {
            color: #111827;
        }


        /* =========================================================
           DESKTOP MAIN NAV
        ========================================================= */

        .q-main-nav {
            flex: 1;

            display: flex;
            align-items: center;
            justify-content: center;

            gap: 8px;

            /*margin-left: 100px;*/
        }

        .q-main-link {
            height: 67px;

            display: flex;
            align-items: center;

            padding: 0 18px;

            color: #111827;

            font-size: 16px;
            font-weight: 500;

            white-space: nowrap;
        }

        .q-main-link:hover,
        .q-main-link.show {
            color: #111827;
        }


        /* Bootstrap arrow */

        .q-main-link::after {
            margin-left: 8px;
            vertical-align: middle;
        }


        /* Pricing has no arrow */

        .q-pricing-link::after {
            display: none;
        }


        /* =========================================================
           RIGHT NAV
        ========================================================= */

        .q-navbar-right {
            display: flex;
            align-items: center;

            gap: 18px;

            flex-shrink: 0;
        }


        /* Currency */

        .q-currency {
            color: #111827;

            font-size: 16px;
            font-weight: 500;

            border: 0;
            background: transparent;

            padding: 8px 5px;
        }

        .q-currency::after {
            margin-left: 7px;
        }


        /* Cart */

        .q-cart {
            position: relative;

            width: 34px;
            height: 34px;

            display: flex;
            align-items: center;
            justify-content: center;

            color: #111827;
        }

        .q-cart i {
            font-size: 22px;
        }

        .q-cart-count {
            position: absolute;

            top: -3px;
            right: -6px;

            min-width: 19px;
            height: 19px;

            padding: 0 5px;

            border-radius: 20px;

            display: flex;
            align-items: center;
            justify-content: center;

            background: #0d6efd;
            color: #fff;

            font-size: 10px;
            font-weight: 700;
        }


        /* Sign In */

        .q-signin {
            color: #111827;

            font-size: 16px;
            font-weight: 500;

            white-space: nowrap;
        }

        .q-signin:hover {
            color: #111827;
        }


        /* Sign Up */

        .q-signup {
            height: 44px;

            display: inline-flex;
            align-items: center;
            justify-content: center;

            padding: 0 22px;

            border-radius: 7px;

            background: #087df5;
            border: 1px solid #087df5;

            color: #fff;

            font-size: 16px;
            font-weight: 600;

            white-space: nowrap;
        }

        .q-signup:hover {
            color: #fff;
            background: #066ed9;
            border-color: #066ed9;
        }


        /* =========================================================
           MEGA MENU
        ========================================================= */

        .q-mega-parent {
            position: static !important;
        }

        .q-mega-menu {
            position: absolute;

            top: 67px;
            left: 0;
            right: 0;

            width: 100%;

            margin: 0;

            padding: 28px 0 34px;

            border: 0;
            border-radius: 0px;

            background: #fff;

            min-height: 360px;
        }

        .q-mega-menu.show {
            display: block;
            margin-top: 12px !important;
            border-top: 1px solid #f3f3f3;
        }


        /* =========================================================
           MEGA INNER
        ========================================================= */

        .q-mega-inner {
            max-width: 1320px;
            margin: auto;

            display: flex;

            gap: 58px;

            padding: 0 20px;
        }


        /* =========================================================
           LEFT SIDE
        ========================================================= */

        .q-side-menu {
            width: 310px;

            flex-shrink: 0;

            padding: 18px 16px;

            background: #f6f8fa;

            border: 1px solid #e0e5e9;

            border-radius: 17px;
        }

        .q-side-title {
            padding: 12px 18px 16px;

            color: #697386;

            font-size: 15px;
            font-weight: 700;

            text-transform: uppercase;
            letter-spacing: .3px;
        }

        .q-side-link {
            width: 100%;

            min-height: 58px;

            padding: 0 18px;

            display: flex;
            align-items: center;
            justify-content: space-between;

            border-radius: 11px;

            color: #172033;

            font-size: 14px;
            font-weight: 600;

            margin-bottom: 4px;
        }

        .q-side-link span {
            font-size: 13px;
            line-height: 1;

            color: #5d6674;
        }

        .q-side-link:hover {
            color: var(--bs-primary);
        }

        .q-side-link.active {
            background: #fff !important;
            color: #222;
        }

        .q-side-link.active span {
            /*color: #006b76;*/
        }


        /* =========================================================
           RIGHT CONTENT
        ========================================================= */

        .q-menu-content {
            display: none;

            flex: 1;

            padding-top: 8px;
        }

        .q-menu-content.active {
            display: block;
        }

        .q-menu-content h5 {
            margin: 0 0 30px;

            color: #111827;

            font-size: 25px;
            font-weight: 700;
        }


        /* =========================================================
           PRODUCT LINK
        ========================================================= */

        .q-product {
            display: block;

            padding: 8px 0;

            color: #111827;
        }

        .q-product strong {
            display: block;

            margin-bottom: 7px;

            color: #20242b;

            font-size: 14px;
            font-weight: 600;
        }

        .q-product span {
            display: block;

            max-width: 270px;

            color: #697386;

            font-size: 15px;
            line-height: 1.45;
        }

        .q-product:hover strong,.q-product:hover {
            color: var(--bs-primary);
        }


        /* =========================================================
           MOBILE TOGGLE
        ========================================================= */

        .q-mobile-toggle {
            display: none;

            width: 38px;
            height: 38px;

            padding: 0;

            border: 0;

            background: transparent;

            flex-direction: column;
            align-items: center;
            justify-content: center;

            gap: 5px;
        }

        .q-mobile-toggle span {
            display: block;

            width: 23px;
            height: 2px;

            background: #111827;

            border-radius: 2px;
        }


        /* =========================================================
           MOBILE MENU
        ========================================================= */

        .q-mobile-menu {
            display: none;
        }


        /* =========================================================
           MOBILE
        ========================================================= */

        @media (max-width: 991.98px) {

            html,
            body {
                width: 100%;
                max-width: 100%;
                overflow-x: hidden !important;
            }

            body {
                position: relative;
            }

            .q-topbar {
                display: none;
            }

            .q-main-nav {
                display: none !important;
            }

            .q-navbar {
                width: 100%;
                height: 70px;
               
                overflow: visible !important;
                position: relative;
                z-index: 1000;
            }

            .q-navbar-inner {
                width: 100%;
                max-width: 100%;
                height: 70px;
                padding: 0px 16px 0px 16px;
                display: flex;
                align-items: center;
                gap: 8px;
                overflow: visible !important;
            }

            .q-mobile-toggle {
                display: flex;
                flex: 0 0 38px;
                width: 38px;
                height: 38px;
            }

            .q-logo {
                flex: 0 0 auto;
                margin-left: 0;
                font-size: 25px;
                white-space: nowrap;
            }

            .q-navbar-right {
                margin-left: auto;
                flex: 0 0 auto;
                min-width: 0;
                gap: 7px;
                position: relative;
                z-index: 1001;

            }

            .q-navbar-right .dropdown-menu {
                z-index: 1002;
            }

            .q-currency {
                font-size: 14px;
                padding: 6px 2px;
                white-space: nowrap;
            }

            .q-cart {
                flex: 0 0 34px;
                width: 34px;
                height: 34px;
            }

            .q-navbar-right .q-signin,
            .q-navbar-right .q-signup {
                display: none !important;
            }

            /* =====================================================
               FULLSCREEN MOBILE MENU
            ===================================================== */

            .q-mobile-menu {
                position: fixed;
                inset: 0;
                z-index: 99999;

                width: 100vw;
                max-width: 100vw;
                height: 100dvh;
                max-height: 100dvh;

                display: flex;
                flex-direction: column;

                background: #000;
                color: #111;

                visibility: hidden;
                opacity: 0;
                transform: translateY(-8px);

                transition:
                    opacity .2s ease,
                    transform .2s ease,
                    visibility .2s ease;

                overflow: hidden;
            }

            .q-mobile-menu.show {
                visibility: visible;
                opacity: 1;
                transform: translateY(0);
            }

            .q-mobile-header {
                width: 100%;
                height: 80px;
                min-height: 80px;
                padding: 0 30px;

                display: flex;
                align-items: center;
                justify-content: space-between;

                border-bottom: 1px solid rgba(255,255,255,.12);
                flex-shrink: 0;
            }

            .q-mobile-logo {
                color: #fff;
                font-size: 29px;
                font-weight: 700;
                letter-spacing: -1px;
                white-space: nowrap;
            }

            .q-mobile-logo:hover {
                color: #fff;
            }

            .q-mobile-close {
                position: relative;
                flex: 0 0 34px;
                width: 34px;
                height: 34px;
                padding: 0;
                border: 0;
                background: transparent;
            }

            .q-mobile-close span {
                position: absolute;
                top: 16px;
                left: 2px;
                width: 30px;
                height: 2px;
                background: #111;
                border-radius: 2px;
            }

            .q-mobile-close span:first-child {
                transform: rotate(45deg);
            }

            .q-mobile-close span:last-child {
                transform: rotate(-45deg);
            }

            /* =====================================================
               MOBILE NAV AREA
            ===================================================== */

            .q-mobile-nav {
                position: relative;
                flex: 1 1 auto;
                min-height: 0;
                width: 100%;
                max-width: 100%;
                overflow: hidden;
                padding: 0;
            }

            .q-mobile-main {
                width: 100%;
                height: 100%;
                padding: 20px 30px;
                overflow-y: auto;
                overflow-x: hidden;
                display: flex;
                flex-direction: column;
            }

            .q-mobile-link {
                width: 100%;
                min-height: 80px;
                flex-shrink: 0;
                padding: 0 15px;

                display: flex;
                align-items: center;
                justify-content: space-between;

                border: 0;
                background: transparent;
                color: #111;

                font-size: 20px;
                font-weight: 500;
                text-align: left;
            }

            .q-mobile-link:hover {
                color: #111;
            }

            .q-mobile-arrow {
                font-size: 31px;
                font-weight: 300;
                line-height: 1;
            }

            /* =====================================================
               LEVEL 2
            ===================================================== */

            .q-mobile-submenu {
                position: absolute;
                inset: 0;
                z-index: 10;

                width: 100%;
                height: 100%;

                background: #000;

                transform: translateX(100%);
                transition: transform .25s ease;

                overflow: hidden;
            }

            .q-mobile-submenu.show {
                transform: translateX(0);
            }

            .q-mobile-back {
                width: 100%;
                height: 70px;
                min-height: 70px;
                flex-shrink: 0;

                padding: 0 30px;

                display: flex;
                align-items: center;
                gap: 14px;

                border: 0;
                border-bottom: 1px solid rgba(255,255,255,.1);
                background: #fff;
                /*color: #fff;*/

                font-size: 17px;
                font-weight: 500;
                text-align: left;
            }

            .q-mobile-back i {
                font-size: 22px;
            }

            .q-mobile-submenu-scroll {
                width: 100%;
                height: calc(100% - 70px);
                padding: 20px 30px 40px;
                overflow-y: auto;
                overflow-x: hidden;
            }

            .q-mobile-subtitle {
                padding: 10px 15px 12px;
                color: #fff;
                font-size: 25px;
                font-weight: 700;
            }

            /* =====================================================
               LEVEL 2 CATEGORY LIST
            ===================================================== */

            .q-mobile-category-list {
                width: 100%;
                height: calc(100% - 70px);
                padding: 18px 30px 40px;
                overflow-y: auto;
                overflow-x: hidden;
            }

            .q-mobile-category-title {
                padding: 8px 15px 14px;
                color: #111;
                font-size: 25px;
                font-weight: 700;
            }

            .q-mobile-category {
                width: 100%;
                min-height: 68px;
                padding: 0 15px;

                display: flex;
                align-items: center;
                justify-content: space-between;

                border: 0;
                border-bottom: 1px solid rgba(255,255,255,.08);
                background: transparent;
                color: #111;

                font-size: 18px;
                font-weight: 500;
                text-align: left;
            }

            .q-mobile-category span:last-child {
                font-size: 28px;
                font-weight: 300;
            }

            /* =====================================================
               LEVEL 3
            ===================================================== */

            .q-mobile-child {
                position: absolute;
                inset: 0;
                z-index: 20;

                width: 100%;
                height: 100%;

                background: #000;

                transform: translateX(100%);
                transition: transform .25s ease;

                overflow: hidden;
            }

            .q-mobile-child.show {
                transform: translateX(0);
            }

            .q-mobile-child-header {
                width: 100%;
                height: 70px;
                min-height: 70px;
                padding: 0 30px;

                display: flex;
                align-items: center;
                gap: 14px;

                border-bottom: 1px solid rgba(255,255,255,.1);
            }

            .q-mobile-child-back {
                width: 34px;
                height: 34px;
                flex: 0 0 34px;
                padding: 0;

                border: 0;
                background: transparent;
                color: #111;

                display: flex;
                align-items: center;
                justify-content: center;
            }

            .q-mobile-child-back i {
                font-size: 22px;
            }

            .q-mobile-child-title {
                color: #111;
                font-size: 17px;
                font-weight: 500;
            }

            .q-mobile-child-content {
                width: 100%;
                height: calc(100% - 70px);
                padding: 20px 30px 40px;
                overflow-y: auto;
                overflow-x: hidden;
            }

            .q-mobile-child-heading {
                padding: 8px 15px 12px;
                color: #111;
                font-size: 25px;
                font-weight: 700;
            }

            /* =====================================================
               MOBILE PRODUCTS
            ===================================================== */

            .q-mobile-product {
                display: block;
                width: 100%;
                padding: 18px 15px;
                color: #fff;
                border-bottom: 1px solid rgba(255,255,255,.08);
            }

            .q-mobile-product strong {
                display: block;
                margin-bottom: 7px;
                color: #111;
                font-size: 18px;
                font-weight: 600;
            }

            .q-mobile-product span {
                display: block;
                color: #9ca3af;
                font-size: 14px;
                line-height: 1.45;
            }

            .q-mobile-product:hover,
            .q-mobile-product:hover strong {
                color: #111;
            }

            /* =====================================================
               AUTH - ALWAYS AT BOTTOM
            ===================================================== */

            .q-mobile-auth {
                width: 100%;
                flex-shrink: 0;
                padding: 0 30px 28px;

                display: flex;
                flex-direction: column;
                gap: 18px;
            }

            .q-mobile-login,
            .q-mobile-signup {
                width: 100%;
                height: 52px;
                flex: 0 0 52px;

                display: flex;
                align-items: center;
                justify-content: center;

                border-radius: 28px;
                font-size: 18px;
                font-weight: 500;
                text-decoration: none;
            }

            .q-mobile-login {
                color: #fff;
                background: transparent;
                border: 1px solid #fff;
            }

            .q-mobile-login:hover {
                color: #fff;
            }

            .q-mobile-signup {
                color: #000;
                background: #67d7e8;
                border: 1px solid #67d7e8;
            }

            .q-mobile-signup:hover {
                color: #000;
            }
        }

        /* =========================================================
           VERY SMALL MOBILE
        ========================================================= */

        @media (max-width: 360px) {

            .q-navbar-inner {
                padding: 0 7px;
                gap: 3px;
            }

            .q-mobile-toggle {
                flex-basis: 32px;
                width: 32px;
            }

            .q-logo {
                font-size: 22px;
            }

            .q-currency {
                font-size: 12px;
            }

            .q-mobile-header {
                padding-left: 20px;
                padding-right: 20px;
            }

            .q-mobile-main,
            .q-mobile-category-list,
            .q-mobile-submenu-scroll,
            .q-mobile-child-content {
                padding-left: 20px;
                padding-right: 20px;
            }

            .q-mobile-back,
            .q-mobile-child-header {
                padding-left: 20px;
                padding-right: 20px;
            }

            .q-mobile-auth {
                padding-left: 20px;
                padding-right: 20px;
            }

            .q-mobile-link {
                min-height: 65px;
                font-size: 18px;
            }

            .q-mobile-arrow {
                font-size: 28px;
            }
        }

        /***right side login css**/
        /* =====================================================
           ACCOUNT DROPDOWN
        ===================================================== */

        .q-account {
            position: relative;
        }


        /* Toggle */

        .q-account-toggle {
            display: flex;
            align-items: center;
            gap: 4px;

            padding: 8px 0 8px 8px;

            border: 0;
            background: transparent;

            color: #141b2d;

            font-size: 16px;
            font-weight: 400;

            white-space: nowrap;
        }


        .q-account-toggle:hover,
        .q-account-toggle:focus {
            color: #141b2d;
            background: transparent;
            box-shadow: none;
        }


        /* Chevron */

        .q-account-toggle::after {
            width: 16px;
            height: 16px;

            margin-left: 4px;

            vertical-align: middle;

            content: "";

            background-color: currentColor;

            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
                center / contain no-repeat;

            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
                center / contain no-repeat;

            border: 0;
        }


        /* =====================================================
           DROPDOWN PANEL
        ===================================================== */

        .q-account-menu {
            width: 290px;

            position: absolute !important;
            right: 0 !important;
            left: auto !important;

            margin-top: 12px !important;

            padding: 8px;

            border: 1px solid #dfe3e8;
            border-radius: 0px;

            background: #fff;

            box-shadow:
                0 12px 30px rgba(15, 23, 42, 0.10),
                0 3px 8px rgba(15, 23, 42, 0.05);
        }


        /* =====================================================
           ACCOUNT HEADER
        ===================================================== */

        .q-account-header {
            display: flex;
            align-items: center;

            gap: 12px;

            padding: 12px 10px;
        }


        .q-account-avatar {
            width: 40px;
            height: 40px;

            flex: 0 0 40px;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 50%;

            background: #e9f2ff;

            color: #087af5;

            font-size: 15px;
            font-weight: 600;
        }


        .q-account-info {
            display: flex;
            flex-direction: column;

            min-width: 0;
        }


        .q-account-info strong {
            color: #141b2d;

            font-size: 15px;
            font-weight: 600;

            line-height: 1.4;
        }


        .q-account-info span {
            margin-top: 2px;

            color: #6b7280;

            font-size: 13px;

            line-height: 1.4;
        }


        /* =====================================================
           DIVIDER
        ===================================================== */

        .q-account-divider {
            height: 1px;

            margin: 6px 2px;

            background: #e5e7eb;
        }


        /* =====================================================
           ACCOUNT ITEM
        ===================================================== */

        .q-account-item {
            display: flex;
            align-items: center;

            gap: 11px;

            width: 100%;

            padding: 10px 9px;

            border-radius: 9px;

            text-decoration: none;

            color: #141b2d;

            transition:
                background-color 0.15s ease,
                color 0.15s ease;
        }


        .q-account-item:hover {
            background: #f5f7fa;

            color: #141b2d;
        }


        /* Icon */

        .q-account-icon {
            width: 34px;
            height: 34px;

            flex: 0 0 34px;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 8px;

            background: #f3f5f7;

            color: #4b5563;

            font-size: 15px;
        }


        /* Text */

        .q-account-item > span:last-child {
            display: flex;
            flex-direction: column;

            min-width: 0;
        }


        .q-account-item strong {
            font-size: 14px;
            font-weight: 500;

            line-height: 1.4;
        }


        .q-account-item small {
            margin-top: 2px;

            color: #7b8494;

            font-size: 12px;

            line-height: 1.35;
        }


        /* =====================================================
           SIGN OUT
        ===================================================== */

        .q-account-logout {
            margin-top: 2px;
        }


        .q-account-logout .q-account-icon {
            background: #f7f7f7;
        }

        /* Desktop */

        /* Account mobile icon - hidden on desktop */

        .q-account-mobile-icon {
            display: none;
        }


        /* Mobile */

        @media (max-width: 991.98px) {

            .q-account-label {
                display: none;
            }

            .q-account-mobile-icon {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 21px;
                line-height: 1;
            }

            .q-account-toggle {
                padding: 8px 4px;
            }

            .q-account-toggle::after {
                display: none !important;
            }

        }

        .q-account-mobile-icon {
            display: none !important;
        }

        @media (max-width: 991.98px) {
            .q-account-mobile-icon {
                display: inline-flex !important;
                align-items: center;
                justify-content: center;
                font-size: 21px;
                line-height: 1;
            }
        }