*, *:before, *:after {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth
        }
		html,body
		{
			overflow-x:hidden;
		}

        body {
            font-family:"Open Sans", sans-serif;
            color: #1a1a2e;
            overflow-x: hidden;
            background: #fff
        }
.img-fluid
{
	max-width:100%;
	height:auto;
}
		
        :root {
            --blue-deep: #0a1628;
            --blue-brand: #0098da;
            --blue-mid: #1565c0;
            --gold: #f5a623;
            --gold-light: #ffcc44;
            --white: #fff;
            --gray-100: #f8f9fb;
            --gray-200: #edf0f5;
            --gray-400: #9ba3b5;
            --gray-600: #5a6272;
            --gray-800: #2d3748;
            --red: #e53e3e;
        }
.modal-backdrop.in {
  opacity: 1;
}
        /* ── TOPBAR ── */
        .topbar {
            background: var(--blue-deep);
            color: #fff;
            font-size: 14px;
            padding: 7px 0;
            border-bottom: 1px solid rgba(255,255,255,.06)
        }

            .topbar a {
                color: #fff;
                text-decoration: none
            }

                .topbar a:hover {
                    color: #fff
                }

        .tb-left {
            display: flex;
            align-items: center;
            gap: 20px;
			height:30px;
        }

        .tb-right {
            display: flex;
            align-items: center;
            gap: 8px;
            justify-content: flex-end
        }

            .tb-right a {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                background: rgba(255,255,255,.08);
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                transition: background .2s
            }

                .tb-right a:hover {
                    background: var(--blue-brand);
                    color: #fff
                }

        .tb-ic {
            margin-right: 4px;
            color: #fff;
            font-size: 14px
        }

        /* ── NAVBAR ── */
        .main-navbar {
            background: #fff;
            box-shadow: 0 2px 20px rgba(0,0,0,.08);
            position: sticky;
            top: 0;
            z-index: 1000;
            border: none;
            border-radius: 0;
            margin-bottom: 0;
            min-height: 70px
        }

            .main-navbar .navbar-brand {
                height: 70px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 15px;
            }

        .navbar-header {
            height: 70px;
            display: flex;
            align-items: center;
        }

        .logo-text {
            font-family:"Open Sans", sans-serif;
            font-size: 32px;
            font-weight: 700;
            line-height: 1;
            letter-spacing: -1px
        }

            .logo-text .vel {
                color: var(--blue-deep)
            }

            .logo-text .moc {
                color: var(--blue-brand)
            }

        .logo-tri {
            display: inline-block;
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 18px solid var(--blue-brand);
            margin-right: 6px;
            vertical-align: middle;
            position: relative;
            top: -2px
        }

        .logo-sub {
            font-size: 9px;
            color: var(--gray-400);
            font-weight: 400;
            letter-spacing: 1px;
            display: block;
            margin-top: -4px;
            text-transform: uppercase
        }

        .main-navbar .navbar-nav > li > a {
            font-family: "Open Sans", sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: var(--gray-800);
            padding: 24px 13px;
            letter-spacing: .3px;
            transition: color .2s;
            position: relative
        }
		@media(min-width:1300px) and (max-width:1420px)
		{
			.main-navbar .navbar-nav > li > a:not(.nav-btn-city):not(.nav-btn-dealer) {
            font-family: "Open Sans", sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: var(--gray-800);
            padding: 24px 6px !important;
            letter-spacing: .3px;
            transition: color .2s;
            position: relative
        }
			
		}

            .main-navbar .navbar-nav > li > a::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 13px;
                right: 13px;
                height: 3px;
                background:#0098da;
                transform: scaleX(0);
                transition: transform .25s;
                border-radius: 2px 2px 0 0
            }

            .main-navbar .navbar-nav > li > a:hover, .main-navbar .navbar-nav > li.active > a {
                color:#0098da;
                background: transparent
            }

                .main-navbar .navbar-nav > li > a:hover::after, .main-navbar .navbar-nav > li.active > a::after {
                    transform: scaleX(1)
                }

        .badge-new {
            background: var(--red);
            color: #fff;
            font-size: 9px;
            font-weight: 700;
            padding: 2px 5px;
            border-radius: 3px;
            margin-left: 4px;
            letter-spacing: .5px;
            vertical-align: middle
        }

        .nav-btn-city {
            border: 2px solid #f58634;
            color:#f58634  !important;
            border-radius: 4px;
            padding: 8px 13px !important;
            margin: 14px 5px !important;
            font-size: 14px !important
        }

            .nav-btn-city:hover,
.nav-btn-city:focus,
.nav-btn-city:active {
    background-color: #f58634 !important;
    color: #fff !important;
}

            .nav-btn-city::after {
                display: none !important
            }

        .nav-btn-dealer {
            border: 2px solid var(--blue-brand) !important;
            color: var(--blue-brand) !important;
            border-radius: 4px;
           padding: 8px 13px !important;
            margin: 14px 5px !important;
            font-size: 14px !important
        }

            .nav-btn-dealer:hover {
                background: var(--blue-brand) !important;
                color: #fff !important
            }

            .nav-btn-dealer::after {
                display: none !important
            }

        .navbar-toggle {
            border-color: #0098da;
            margin: 18px 15px
        }

            .navbar-toggle .icon-bar {
                background: #0098da
            }

        /* ── DROPDOWN HOVER ── */
        @media(min-width:768px) {
            .main-navbar .navbar-nav > li.dropdown:hover > .dropdown-menu {
                display: block;
                opacity: 1;
                transform: translateY(0);
                pointer-events: auto
            }

            .main-navbar .navbar-nav > li.dropdown > .dropdown-menu {
                display: block;
                opacity: 0;
                pointer-events: none;
                transform: translateY(10px);
                transition: opacity .22s,transform .22s
            }

            .main-navbar .navbar-nav > li.has-mega {
                position: static !important
            }

                .main-navbar .navbar-nav > li.has-mega:hover > .mega-menu {
                    opacity: 1;
                    pointer-events: auto;
                    transform: translateY(0)
                }
        }

        .main-navbar .dropdown-menu {
            border: none;
            box-shadow: 0 12px 48px rgba(0,0,0,.14);
            border-radius: 0 0 8px 8px;
            border-top: 3px solid #0098da;
            padding: 6px 0;
            min-width: 230px;
            background: #fff;
            margin-top: 0;
            z-index: 2000
        }

            .main-navbar .dropdown-menu > li > a {
                font-size: 14px;
                color: var(--gray-800);
                padding: 10px 20px;
                font-weight: 500;
                display: flex;
                align-items: center;
                gap: 8px;
                border-left: 3px solid transparent;
                transition: all .18s
            }

                .main-navbar .dropdown-menu > li > a:hover {
                    background: var(--gray-100);
                    color: var(--blue-brand);
                    border-left-color: var(--blue-brand);
                    padding-left: 24px
                }

        .dd-icon {
            width: 30px;
            height: 30px;
            background: rgba(0,71,255,.08);
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #0098da;
            flex-shrink: 0
        }

        .main-navbar .dropdown-menu > li > a:hover .dd-icon {
            background: #0098da;
            color: #fff
        }

        .main-navbar .dropdown-menu > li.has-sub > a::after {
            content: '\f054';
            font-family: FontAwesome;
            font-size: 9px;
            color: var(--gray-400);
            margin-left: auto
        }

        .main-navbar .dropdown-menu > li.has-sub {
            position: relative
        }

        .main-navbar .submenu {
            position: absolute;
            top: 0;
            left: 100%;
            min-width: 220px;
            background: #fff;
            border-top: 3px solid var(--gold);
            border-radius: 0 8px 8px 0;
            box-shadow: 8px 12px 48px rgba(0,0,0,.14);
            padding: 6px 0;
            list-style: none;
            z-index: 2100;
            display: block;
            opacity: 0;
            pointer-events: none;
            transform: translateX(10px);
            transition: opacity .2s,transform .2s
        }

        @media(min-width:768px) {
            .main-navbar .dropdown-menu > li.has-sub:hover > .submenu {
                opacity: 1;
                pointer-events: auto;
                transform: translateX(0)
            }
        }

        .main-navbar .submenu > li > a {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            color: var(--gray-800);
            padding: 9px 18px;
            font-weight: 500;
            border-left: 3px solid transparent;
            transition: all .18s;
            text-decoration: none
        }

            .main-navbar .submenu > li > a:hover {
                background: var(--gray-100);
                color: var(--blue-brand);
                border-left-color: var(--gold);
                padding-left: 22px
            }

        .sub-icon {
            width: 24px;
            height: 24px;
            background: rgba(245,166,35,.1);
            border-radius: 5px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            color: var(--gold);
            flex-shrink: 0
        }

        .main-navbar .submenu > li > a:hover .sub-icon {
            background: var(--gold);
            color: #fff
        }

        /* ═══════════════════════════════════════════════════
           ULTRA-PREMIUM MEGA MENU  ▸  v3 (CSS + HTML matched)
        ═══════════════════════════════════════════════════ */

        /* Wrapper */
        .mm {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(14px);
            width: 1100px;
            background: #fff;
            border-radius: 0 0 18px 18px;
            box-shadow: 0 48px 100px rgba(0,0,0,.2),0 0 0 1px rgba(0,71,255,.07);
            padding: 0;
            z-index: 3000;
            list-style: none;
            opacity: 0;
            pointer-events: none;
            transition: opacity .28s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.4,0,.2,1);
            overflow: hidden;
        }
            /* animated rainbow top bar */
            .mm::before {
                content: '';
                display: block;
                height: 4px;
                background: linear-gradient(90deg, #0047ff,#6366f1,#a855f7,#ec4899,#f59e0b,#10b981,#0047ff);
                background-size: 300% 100%;
                animation: mmBar 5s linear infinite;
            }

        @keyframes mmBar {
            0% {
                background-position: 0 0
            }

            100% {
                background-position: 300% 0
            }
        }

        /* open state */
        @media(min-width:768px) {
            .main-navbar .navbar-nav > li.has-mega:hover > .mm {
                opacity: 1;
                pointer-events: auto;
                transform: translateX(-50%) translateY(0);
            }
        }

        .mm-body {
            display: flex;
            min-height: 460px
        }

        /* ── ZONE A: dark sidebar ── */
        .mm-side {
            width: 218px;
            flex-shrink: 0;
            background: #060f1e;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

            .mm-side::before {
                content: '';
                position: absolute;
                width: 260px;
                height: 260px;
                border-radius: 50%;
                bottom: -80px;
                right: -80px;
                background: radial-gradient(circle,rgba(0,71,255,.22) 0%,transparent 70%);
                pointer-events: none;
            }

            .mm-side::after {
                content: '';
                position: absolute;
                width: 160px;
                height: 160px;
                border-radius: 50%;
                top: -50px;
                left: -50px;
                background: radial-gradient(circle,rgba(245,166,35,.14) 0%,transparent 70%);
                pointer-events: none;
            }
        /* side header */
        .mm-side-hd {
            padding: 22px 18px 18px;
            background: linear-gradient(135deg,rgba(0,71,255,.14),rgba(124,58,237,.08));
            border-bottom: 1px solid rgba(255,255,255,.06);
            position: relative;
            z-index: 1;
        }

        .mm-side-eyebrow {
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 7px;
        }

            .mm-side-eyebrow::before {
                content: '';
                width: 18px;
                height: 1.5px;
                background: var(--gold);
                display: inline-block;
                flex-shrink: 0;
            }

        .mm-side-title {
            font-family: 'Oswald',sans-serif;
            font-size: 21px;
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
        }

        .mm-side-sub {
            font-size: 11.5px;
            color: rgba(255,255,255,.28);
            margin-top: 3px
        }

        /* category list */
        .mm-cats {
            list-style: none;
            padding: 8px 0;
            margin: 0;
            flex: 1;
            position: relative;
            z-index: 1
        }

            .mm-cats li a {
                display: flex;
                align-items: center;
                gap: 11px;
                padding: 10px 18px;
                font-size: 14px;
                font-weight: 600;
                color: rgba(255,255,255,.42);
                text-decoration: none;
                border-left: 3px solid transparent;
                transition: all .22s;
            }

                .mm-cats li a:hover, .mm-cats li a.on {
                    color: #fff;
                    background: rgba(255,255,255,.055);
                    border-left-color: var(--gold);
                }

        .mm-cat-ico {
            width: 34px;
            height: 34px;
            border-radius: 9px;
            background: rgba(255,255,255,.07);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: rgba(255,255,255,.38);
            flex-shrink: 0;
            transition: all .22s;
        }

        .mm-cats li a:hover .mm-cat-ico, .mm-cats li a.on .mm-cat-ico {
            background: var(--blue-brand);
            color: #fff;
            box-shadow: 0 4px 14px rgba(0,71,255,.45);
        }

        .mm-cat-text {
            flex: 1
        }

        .mm-cat-name {
            display: block;
            line-height: 1.2
        }

        .mm-cat-count {
            font-size: 10px;
            color: rgba(255,255,255,.22);
            font-weight: 400;
            margin-top: 2px;
            display: block;
        }

        .mm-cats li a:hover .mm-cat-count {
            color: rgba(255,255,255,.42)
        }

        .mm-cat-arr {
            font-size: 9px;
            color: rgba(255,255,255,.14);
            transition: all .22s;
        }

        .mm-cats li a:hover .mm-cat-arr, .mm-cats li a.on .mm-cat-arr {
            color: var(--gold);
            transform: translateX(4px);
        }

        /* side footer stats */
        .mm-side-stats {
            padding: 14px 18px;
            border-top: 1px solid rgba(255,255,255,.06);
            background: rgba(0,0,0,.25);
            display: flex;
            gap: 20px;
            position: relative;
            z-index: 1;
        }

        .mm-stat .sv {
            font-family: 'Oswald',sans-serif;
            font-size: 19px;
            font-weight: 700;
            color: #fff;
            line-height: 1;
        }

            .mm-stat .sv em {
                color: var(--gold);
                font-style: normal
            }

        .mm-stat .sl {
            font-size: 9px;
            color: rgba(255,255,255,.28);
            letter-spacing: 1.5px;
            text-transform: uppercase;
            margin-top: 2px;
        }

        /* ── ZONE B: product columns ── */
        .mm-cols {
            flex: 1;
            display: flex;
            flex-direction: column;
            border-right: 1px solid rgba(0,0,0,.05);
        }

        .mm-cols-inner {
            display: flex;
            flex: 1;
            padding: 22px 0 0
        }

        .mm-col {
            flex: 1;
            padding: 0 20px;
            border-right: 1px solid rgba(0,0,0,.05);
        }

            .mm-col:last-child {
                border-right: none
            }

        /* column heading */
        .mm-col-hd {
            display: flex;
            align-items: center;
            gap: 9px;
            padding-bottom: 11px;
            margin-bottom: 6px;
            border-bottom: 2px solid #edf0f5;
            position: relative;
        }

            .mm-col-hd::after {
                content: '';
                position: absolute;
                bottom: -2px;
                left: 0;
                width: 30px;
                height: 2px;
                border-radius: 2px;
            }

            .mm-col-hd.c-blue::after {
                background: var(--blue-brand)
            }

            .mm-col-hd.c-purple::after {
                background: #7c3aed
            }

            .mm-col-hd.c-green::after {
                background: #059669
            }

        .mm-cico {
            width: 28px;
            height: 28px;
            border-radius: 7px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #fff;
            flex-shrink: 0;
        }

        .mm-ctitle {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #1f2937;
        }

        /* product rows */
        .mm-items {
            list-style: none;
            padding: 0;
            margin: 0
        }

            .mm-items li {
                margin-bottom: 1px
            }

                .mm-items li a {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    padding: 8px 8px 8px 10px;
                    border-radius: 8px;
                    font-size: 14px;
                    font-weight: 500;
                    color: #374151;
                    text-decoration: none;
                    transition: all .2s;
                    position: relative;
                    overflow: hidden;
                }

                    .mm-items li a::before {
                        content: '';
                        position: absolute;
                        inset: 0;
                        background: linear-gradient(90deg,rgba(0,71,255,.055),transparent 70%);
                        opacity: 0;
                        transition: opacity .2s;
                        border-radius: 8px;
                    }

                    .mm-items li a:hover::before {
                        opacity: 1
                    }

                    .mm-items li a:hover {
                        color: var(--blue-brand);
                        padding-left: 14px
                    }
        /* icon box */
        .mm-ico {
            width: 34px;
            height: 34px;
            border-radius: 9px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            flex-shrink: 0;
            transition: all .22s;
            border: 1px solid rgba(0,0,0,.07);
            position: relative;
            z-index: 1;
        }

        .mm-items li a:hover .mm-ico {
            transform: scale(1.12) rotate(-5deg);
            border-color: transparent;
            box-shadow: 0 6px 16px rgba(0,71,255,.25);
        }
        /* text */
        .mm-txt {
            flex: 1;
            position: relative;
            z-index: 1
        }

            .mm-txt strong {
                display: block;
                font-weight: 600;
                line-height: 1.2
            }

            .mm-txt small {
                font-size: 10.5px;
                color: #9ca3af;
                display: block;
                margin-top: 1px;
            }

        .mm-items li a:hover .mm-txt small {
            color: rgba(0,71,255,.55)
        }
        /* pill badges */
        .mm-pill {
            font-size: 8.5px;
            font-weight: 800;
            letter-spacing: .5px;
            text-transform: uppercase;
            padding: 2px 8px;
            border-radius: 20px;
            flex-shrink: 0;
            position: relative;
            z-index: 1;
        }

            .mm-pill.hot {
                background: #fee2e2;
                color: #dc2626;
                border: 1px solid #fca5a5
            }

            .mm-pill.new {
                background: #d1fae5;
                color: #059669;
                border: 1px solid #6ee7b7
            }

            .mm-pill.pro {
                background: #ede9fe;
                color: #7c3aed;
                border: 1px solid #c4b5fd
            }

            .mm-pill.sale {
                background: #fff7ed;
                color: #ea580c;
                border: 1px solid #fdba74
            }

        /* sub-section separator inside column */
        .mm-sep {
            height: 1px;
            background: linear-gradient(90deg,rgba(0,0,0,.07),transparent);
            margin: 14px 0 12px;
        }

        /* dark bottom bar */
        .mm-bar {
            display: flex;
            align-items: center;
            gap: 0;
            padding: 11px 20px;
            background: linear-gradient(90deg,#06111f 0%,#0c1f40 100%);
            border-top: 1px solid rgba(255,255,255,.04);
        }

            .mm-bar a {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                padding: 0 18px;
                font-size: 11.5px;
                font-weight: 600;
                color: rgba(255,255,255,.38);
                text-decoration: none;
                transition: color .2s;
                border-right: 1px solid rgba(255,255,255,.07);
            }

                .mm-bar a:first-child {
                    padding-left: 0
                }

                .mm-bar a:hover {
                    color: rgba(255,255,255,.8)
                }

                .mm-bar a i {
                    font-size: 11px
                }

        .mm-bar-cta {
            margin-left: auto;
            display: inline-flex !important;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg,#f5a623,#ffb700) !important;
            color: #07111f !important;
            font-size: 11px !important;
            font-weight: 800 !important;
            padding: 8px 18px !important;
            border-radius: 6px !important;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-right: none !important;
            box-shadow: 0 4px 16px rgba(245,166,35,.4);
            transition: all .22s !important;
        }

            .mm-bar-cta:hover {
                box-shadow: 0 6px 24px rgba(245,166,35,.6) !important;
                transform: translateY(-1px);
                color: #07111f !important;
            }

        /* ── ZONE C: right panel ── */
        .mm-right {
            width: 238px;
            flex-shrink: 0;
            background: linear-gradient(160deg,#f9fafb,#eef2ff);
            padding: 22px 16px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .mm-right-lbl {
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--blue-brand);
            display: flex;
            align-items: center;
            gap: 8px;
        }

            .mm-right-lbl::after {
                content: '';
                flex: 1;
                height: 1px;
                background: linear-gradient(90deg,rgba(0,71,255,.2),transparent);
            }

        /* featured card */
        .mm-feat {
            background: #fff;
            border-radius: 14px;
            border: 1px solid rgba(0,71,255,.1);
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,71,255,.09);
            transition: all .25s;
            text-decoration: none;
            display: block;
            cursor: pointer;
        }

            .mm-feat:hover {
                box-shadow: 0 14px 44px rgba(0,71,255,.2);
                transform: translateY(-4px);
                border-color: rgba(0,71,255,.22);
            }

        .mm-feat-thumb {
            height: 108px;
            position: relative;
            background: linear-gradient(135deg,#dbeafe,#ede9fe,#fce7f3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            color: rgba(0,71,255,.14);
            overflow: hidden;
        }
            /* shimmer sweep */
            .mm-feat-thumb::after {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(105deg, transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
                background-size: 200% 100%;
                animation: shimmer 2.5s infinite;
            }

        @keyframes shimmer {
            0% {
                background-position: -200% 0
            }

            100% {
                background-position: 200% 0
            }
        }

        .mm-feat-ribbon {
            position: absolute;
            top: 10px;
            right: 0;
            background: linear-gradient(135deg,#f5a623,#ffb700);
            color: #07111f;
            font-size: 8px;
            font-weight: 800;
            letter-spacing: .5px;
            text-transform: uppercase;
            padding: 4px 12px 4px 10px;
            box-shadow: 0 2px 10px rgba(245,166,35,.5);
            clip-path: polygon(0 0,100% 0,100% 100%,6px 100%);
        }

        .mm-feat-body {
            padding: 13px 14px 15px
        }

        .mm-feat-cat {
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--blue-brand);
            margin-bottom: 4px;
        }

        .mm-feat-name {
            font-size: 15px;
            font-weight: 800;
            color: #0a1628;
            margin-bottom: 2px;
            line-height: 1.2;
        }

        .mm-feat-sku {
            font-size: 10.5px;
            color: #9ca3af;
            margin-bottom: 12px
        }

        .mm-feat-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            background: linear-gradient(135deg,#0047ff,#3b82f6);
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 9px;
            border-radius: 8px;
            box-shadow: 0 4px 14px rgba(0,71,255,.32);
            transition: all .22s;
        }

        .mm-feat:hover .mm-feat-btn {
            box-shadow: 0 7px 22px rgba(0,71,255,.45);
            background: linear-gradient(135deg,#0035cc,#0047ff);
        }

        /* quick action links */
        .mm-qa-list {
            display: flex;
            flex-direction: column;
            gap: 5px
        }

        .mm-qa {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 9px 12px;
            border-radius: 10px;
            background: #fff;
            border: 1px solid #e5e7eb;
            font-size: 12px;
            font-weight: 600;
            color: #374151;
            text-decoration: none;
            transition: all .2s;
            box-shadow: 0 1px 3px rgba(0,0,0,.04);
        }

            .mm-qa:hover {
                background: linear-gradient(135deg,#0047ff,#3b82f6);
                color: #fff;
                border-color: transparent;
                box-shadow: 0 6px 18px rgba(0,71,255,.3);
                transform: translateX(4px);
            }

        .mm-qa-i {
            width: 28px;
            height: 28px;
            border-radius: 7px;
            background: rgba(0,71,255,.08);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: var(--blue-brand);
            flex-shrink: 0;
            transition: all .2s;
        }

        .mm-qa:hover .mm-qa-i {
            background: rgba(255,255,255,.18);
            color: #fff
        }

        .mm-qa span {
            flex: 1
        }

        .mm-qa-arr {
            font-size: 9px;
            color: #d1d5db;
            transition: all .2s
        }

        .mm-qa:hover .mm-qa-arr {
            color: rgba(255,255,255,.5);
            transform: translateX(4px)
        }

        /* ── HERO SLIDER ── */
        /* ── HERO SLIDER ── */
		.hero-slider .container {
    width: 90%;
    max-width: 1920px;
}
.hero-slider {
    position: relative;
    overflow: hidden;
    height: 430px;
    background: #060e1d;
}
.hero-track {
    display: flex;
    height: 100%;
    transition: transform .65s cubic-bezier(.25,.46,.45,.94);
    will-change: transform;
}
.hero-slide {
    flex: 0 0 100%;
    min-width: 0;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Dark overlay */
.hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(95deg,
        rgba(6,14,29,.97) 0%,
        rgba(6,14,29,.85) 35%,
        rgba(6,14,29,.40) 62%,
        rgba(6,14,29,.08) 100%);
    z-index: 2;
}

/* Background image */
.hero-bg-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center right;
    z-index: 1;
    transition: transform 8s ease;
}
.hero-slide.active .hero-bg-img {
    transform:none;
}

/* Grid overlay */
.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size: 55px 55px;
    z-index: 3;
    pointer-events: none;
}

/* Right accent line */
.hero-accent {
    position: absolute;
    top: 0; right: 0;
    width: 3px;
    height: 100%;
    z-index: 6;
}

/* Content */
.hero-content {
    position: relative;
    z-index: 5;
    /*padding-left: 20px;*/
}

/* Eyebrow */
.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s .15s, transform .5s .15s;
}
.hero-slide.active .hero-eyebrow { opacity: 1; transform: translateY(0); }
.hero-eyebrow::before {
    content: '';
    display: inline-block;
    width: 26px; height: 2px;
    background: currentColor;
    flex-shrink: 0;
}

/* Heading */
.hero-h1 {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 52px;
    font-weight: 800;
	text-align:left;
    line-height: 1.04;
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 14px;
    letter-spacing: -0.5px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .55s .28s, transform .55s .28s;
}
.hero-slide.active .hero-h1 { opacity: 1; transform: translateY(0); }

/* Description */
.hero-desc {
    color: rgba(255,255,255,.68);
    font-size: 14px;
    line-height: 1.75;
    max-width: 400px;
    margin: 0 0 26px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s .40s, transform .55s .40s;
}
.hero-slide.active .hero-desc { opacity: 1; transform: translateY(0); }

/* Buttons */
.hero-btns {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s .52s, transform .55s .52s;
}
.hero-slide.active .hero-btns { opacity: 1; transform: translateY(0); }

.btn-primary-hero {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all .22s;
    background: #0098da;
    color: #fff;
    line-height: 1;
}
.btn-primary-hero:hover, .btn-primary-hero:focus {
    background: #0035cc;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,71,255,.45);
}
.btn-ghost-hero {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    border-radius: 4px;
    border: 1.5px solid rgba(255,255,255,.3);
    cursor: pointer;
    text-decoration: none;
    transition: all .22s;
    background: transparent;
    color: #fff;
    line-height: 1;
}
.btn-ghost-hero:hover, .btn-ghost-hero:focus {
    border-color: rgba(255,255,255,.75);
    background: rgba(255,255,255,.08);
    color: #fff;
    text-decoration: none;
}

/* Stats */
.hero-stats {
    display: flex;
    gap: 30px;
    margin-top: 30px;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .55s .64s, transform .55s .64s;
}
.hero-slide.active .hero-stats { opacity: 1; transform: translateY(0); }
.hs-num {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.hs-lbl {
    font-size: 10px;
    color: rgba(255,255,255,.4);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 4px;
}

/* ── ARROW BUTTONS ── */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 2px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all .22s;
    outline: none;
    -webkit-appearance: none;
    padding: 0;
}
.hero-arrow svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .22s;
}
.hero-arrow:hover {
    background: #0098da;
    border-color: #0098da;
}
.hero-arrow.prev { left: 18px; }
.hero-arrow.next { right: 18px; }

/* ── DOTS / BULLETS ── */
.hero-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10;
}
.hero-dot {
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all .35s;
    outline: none;
}
.hero-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    transition: border-color .35s;
}
.hero-dot.active {
    background: #ffa623;
    transform: scale(1.3);
}
.hero-dot.active::after {
    border-color: rgba(255,166,35,.45);
}

/* Slide counter */
.hero-counter {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 10;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,.35);
    letter-spacing: 2px;
}

/* Progress bar */
.hero-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 10;
    background: rgba(255,255,255,.06);
}
.hero-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0047ff, #ffa623);
}
.hero-progress-bar.run {
    transition: width 5s linear;
    width: 100%;
}

/* Slide themes */
.hero-slide-1 { background: linear-gradient(110deg,#060e1d 0%,#0a1628 60%,#0d2045 100%); }
.hero-slide-2 { background: linear-gradient(110deg,#06180d 0%,#0a2214 60%,#0d3020 100%); }
.hero-slide-3 { background: linear-gradient(110deg,#1a0608 0%,#280a0e 60%,#3a0d12 100%); }

/* ── RESPONSIVE ── */
@media (max-width: 992px) {
    .hero-h1 { font-size: 38px; }
    .hero-slider { height: 400px; }
}
@media (max-width: 768px) {
    .hero-slider { height: 380px; }
    .hero-h1 { font-size: 30px; }
    .hero-desc { font-size: 13px; }
    .hero-stats { gap: 18px; }
    .hs-num { font-size: 22px; }
    .hero-arrow { width: 36px; height: 36px; }
    .hero-arrow svg { width: 14px; height: 14px; }
    .hero-arrow.prev { left: 8px; }
    .hero-arrow.next { right: 8px; }
    .hero-content { padding-left: 0; }
    .btn-primary-hero, .btn-ghost-hero { padding: 11px 16px; font-size: 11px; }
}
@media (max-width: 480px) {
    .hero-slider { height: 420px; }
    .hero-h1 { font-size: 26px; }
    .hero-btns { flex-direction: column; align-items: flex-start; }
    .hero-stats { gap: 14px; }
}
        /* ── SECTION HEADERS ── */
        .sec-eyebrow {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--blue-brand);
            margin-bottom: 10px
        }

        .sec-title {
            font-family: "Open Sans", sans-serif;
            font-size: 34px;
            font-weight: 700;
            color: var(--blue-deep);
            text-transform: uppercase;
            line-height: 1.1;
            margin-bottom: 10px
        }

        .sec-desc {
            color: var(--gray-600);
            font-size: 14px;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.7;
			margin-bottom:10px;
        }

        .sec-hdr {
            text-align: center;
            /*margin-bottom: 40px*/
			/*margin-top:30px;*/
        }

        .divider-line {
            width: 50px;
            height: 3px;
            background: linear-gradient(90deg,var(--blue-brand),var(--gold));
            margin: 12px auto 16px;
            border-radius: 2px
        }

        
        /* BRANDS */
		.brands-section
		{
			padding:40px 0;
		}
.brand-row {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
}

.brand-row > [class*="col-"] {
    display: flex;
}
.brand-row > [class*="col-"]:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent,
        #d5d9e0 20%,
        #c7ccd6 50%,
        #d5d9e0 80%,
        transparent
    );
}
.brand-logo-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 130px; /* fixed equal height */
    padding: 10px;
    background: #fff;
    text-decoration: none;
    overflow: hidden;
    /*border-right: 1px solid gray;*/
    border-radius: 0;
    box-shadow: none !important;
    transition: all .35s ease;
    margin-bottom: 0;
}

.brand-logo-wrap:last-child {
    border-right: none;
}
.brands-section .container {
    width: 95%;
    /*max-width: 1600px;*/
}

.brand-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.brand-logo-item img {
    max-width: 100%;
    max-height: 110px;
    width: auto;
    height: auto;
    transition: transform .35s ease;
}

.brand-logo-wrap:hover {
    transform: translateY(-5px);
}

.brand-logo-wrap:hover img {
    transform: scale(1.05);
}

/* remove all effects */
.brand-logo-wrap:before,
.brand-logo-wrap:after {
    display: none;
}

        /* ── CATEGORIES ── */
		/* 1. FORCE THE ROW TO HAVE EXACTLY 4 EQUAL COLUMNS ON DESKTOP */
@media (min-width: 992px) {
    .categories-section .row {
        display: grid !important;
        /* Force exactly 4 columns of equal width */
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 24px; /* Handles spacing between columns cleanly */
    }
}

/* For tablets (col-sm-6 style behavior - 2 per row) */
@media (min-width: 768px) and (max-width: 991px) {
    .categories-section .row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px;
    }
}

/* For mobile devices (1 per row) */
@media (max-width: 767px) {
    .categories-section .row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px;
    }
}
		
		/* Disable the legacy Bootstrap 3 float clearfixes which mess up modern grid systems */
.categories-section .row::before,
.categories-section .row::after {
    display: none !important;
}
		/* Strip down Bootstrap 3's float styling on columns inside this section */
.categories-section .row > [class*="col-"] {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    
    display: flex !important;
    flex-direction: column;
}
        .categories-section {
            background: #effaff;
            padding: 40px 0
        }

        .cat-card {
           background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,.06);
    transition: all .3s;
    cursor: pointer;
    
    display: flex;
    flex-direction: column;
    height: 100% !important; /* Locks card height to the grid row height */
    margin-bottom: 0px !important;
        }

            .cat-card:hover {
   transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0,71,255,.15);
}

        .cat-img-ph {
         width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    color: rgba(255,255,255,.3);
    flex-shrink: 0;
        }

        .cat-body {
           padding: 22px 20px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;

				
        }

        .cat-icon-wrap {
           width: 46px;
    height: 46px;
    background: var(--blue-brand);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    margin: -36px auto 14px;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 16px rgba(0,71,255,.3);
    flex-shrink: 0;
        }

        .cat-title {
            font-family: "Open Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--blue-deep);
    text-align: center;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .5px;
    flex-shrink: 0;
        }

        .cat-desc {
           color: var(--gray-600);
    font-size: 13px;
    text-align: center;
    line-height: 1.6;
    margin-bottom: 14px;
    flex-grow: 1; /* Pushes button down */
        }

        .cat-link {
          display: block;
    text-align: center;
    color: var(--blue-brand);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    flex-shrink: 0;
    margin-top: auto; /* Locked to absolute bottom */
        }

            .cat-link:hover {
                color: var(--blue-mid)
            }

        /* ── PRODUCT CARDS ── */
        .product-card {
            background: #fff;
    border: 1px solid #e4e7ed; /* Light gray border from screenshot */
    border-radius: 8px;
    padding: 24px 16px;
    text-align: center;
    transition: all .3s ease;
    
    /* Equal height distribution mechanics */
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
        }

            .product-card:hover {
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    border-color: #b0b8c6;
            }

            .product-card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 3px;
                background: linear-gradient(90deg,var(--blue-brand),var(--gold));
                transform: scaleX(0);
                transition: transform .3s
            }

            .product-card:hover::before {
                transform: scaleX(1)
            }

        .prod-img {
            height: 140px; 
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    flex-shrink: 0;
        }
		.prod-img img
		{
			max-height: 100%;
    max-width: 100%;
    object-fit: contain;
		}

        .product-card:hover .prod-img i {
            color: var(--blue-brand)
        }

        .prod-name {
           font-family: "Open Sans", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #0b1a30; /* Deep navy text color */
    margin-bottom: 4px;
    line-height: 1.3;
    flex-shrink: 0;
        }

        .prod-sku {
            font-family: "Open Sans", sans-serif;
    font-size: 13px;
    color: #718096; /* Slate gray SKU text color */
    margin-bottom: 20px;
    
    /* This makes the box expand, forcing the buttons to align at the exact bottom */
    flex-grow: 1;
        }

        .btn-prod {
           display: inline-block;
    width: auto;
    margin: auto auto 0 auto; /* Keeps it centered horizontally and anchored to bottom */
    padding: 6px 20px;
    background: #fff;
    border: 1px solid #cbd5e1; /* Subtle clean border border */
    color: #1e56a0; /* Brand blue tone */
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s ease;
    flex-shrink: 0;
        }

            .btn-prod:hover {
               background: #1e56a0;
    color: #fff;
    border-color: #1e56a0;
    text-decoration: none;
            }

        .new-badge {
            position: absolute;
            top: 12px;
            left: 12px;
            background: var(--gold);
            color: var(--blue-deep);
            font-size: 9px;
            font-weight: 800;
            padding: 3px 7px;
            border-radius: 3px;
            letter-spacing: 1px;
            text-transform: uppercase
        }

        /* ── PRODUCT SLIDER ── */
		.prod-section .container
		{
			width:95%
		}
		.arrivals-section .container
		{
			width:95%;
		}
		@media(max-width:991px)
		{
			.prod-section .container
		{
			
			width:100%
		}
			.brands-section .container {
    width: 100%;
    /*max-width: 1600px;*/
}
.category-section .container
{
	width:100%;	
}
			.arrivals-section .container
		{
			width:95%;
		}
		}
        .prod-section {
            padding: 70px 0
        }

            .prod-section.bg-gray {
                background: var(--gray-100)
            }

            .prod-section.bg-white {
                background: #fff
            }

        .prod-slider-outer {
            position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
        }

        .prod-viewport {
            flex: 1;
    overflow: hidden;
        }

        .prod-track {
            display: flex;
    gap: 16px;
    transition: transform .4s cubic-bezier(.25,.46,.45,.94);
    will-change: transform;
    align-items: stretch; /* Forces equal heights on all track slots */
        }

        .prod-item {
           flex: 0 0 calc(16.6667% - 14px); /* Desktop: 6 items visible */
    display: flex;
    flex-direction: column;
        }

       @media(max-width:1199px) { .prod-item { flex: 0 0 calc(20% - 13px); } }
@media(max-width:991px) { .prod-item { flex: 0 0 calc(25% - 12px); } }
@media(max-width:767px) { .prod-item { flex: 0 0 calc(50% - 8px); } }
@media(max-width:480px) { .prod-item { flex: 0 0 100%; } }
        .slide-arrow {
           width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--blue-brand);
    background: #fff;
    color: var(--blue-brand);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all .22s;
    box-shadow: 0 2px 10px rgba(0,71,255,.12);
    outline: none;
			padding:0px;
        }

            .slide-arrow:hover {
                background: var(--blue-brand);
    color: #fff;
            }

            .slide-arrow:disabled {
               opacity: .3;
    cursor: default;
            }

        .prod-dots-row {
           display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 20px;
        }

        .pdot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--gray-200);
            border: none;
            cursor: pointer;
            transition: all .25s;
            padding: 0
        }

            .pdot.on {
                background: var(--blue-brand);
                width: 22px;
                border-radius: 4px
            }

        /* ── ARRIVALS HEADER ── */
        .arr-hdr {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 32px;
            flex-wrap: wrap;
            gap: 12px
        }

        .view-all {
            color: var(--blue-brand);
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
            margin-top: 4px
        }

            .view-all:hover {
                color: var(--blue-mid)
            }

        /* ── ABOUT + WHY ── */
        .about-section {
            background: var(--gray-100);
            padding: 70px 0
        }

        .about-left {
            background: var(--blue-deep);
            border-radius: 8px;
            padding: 48px 40px;
            height: 100%;
            position: relative;
            overflow: hidden
        }

            .about-left::before {
                content: '';
                position: absolute;
                bottom: -40px;
                right: -40px;
                width: 200px;
                height: 200px;
                border-radius: 50%;
                background: rgba(0,71,255,.15)
            }

        .about-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 14px
        }

        .about-title {
            font-family: "Open Sans", sans-serif;
            font-size: 30px;
            font-weight: 700;
            color: #fff;
            text-transform: uppercase;
            margin-bottom: 20px;
            line-height: 1.15
        }

        .about-desc {
            color: #7a8fb5;
            font-size: 14px;
            line-height: 1.8;
            margin-bottom: 20px
        }

        .btn-about {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--blue-brand);
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 12px 22px;
            border-radius: 4px;
            text-decoration: none;
            transition: all .25s
        }

            .btn-about:hover {
                background: #0035cc;
                color: #fff
            }

        .why-right {
            padding: 0 0 0 30px
        }

        .why-title {
            font-family: "Open Sans", sans-serif;
            font-size: 28px;
            font-weight: 700;
            color: var(--blue-deep);
            text-transform: uppercase;
            margin-bottom: 20px
        }

        .why-item {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            padding: 16px 0;
            border-bottom: 1px solid var(--gray-200)
        }

            .why-item:last-child {
                border-bottom: none
            }

        .why-icon {
            width: 44px;
            height: 44px;
            background: rgba(0,71,255,.08);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: var(--blue-brand);
            flex-shrink: 0;
            transition: all .2s
        }

        .why-item:hover .why-icon {
            background: var(--blue-brand);
            color: #fff
        }

        .why-item-title {
            font-size: 14px;
            font-weight: 700;
            color: var(--blue-deep);
            margin-bottom: 3px
        }

        .why-item-desc {
            font-size: 12.5px;
            color: var(--gray-600);
            line-height: 1.5
        }

        
        /* ── TRUSTED TICKER ── */
        .trusted-section {
            background: #effaff;
            padding: 60px 0 0
        }

        .ticker-wrap {
            overflow: hidden;
            border-top: 1px solid var(--gray-200);
            border-bottom: 1px solid var(--gray-200);
            padding: 26px 0;
            margin-top: 32px;
            position: relative
        }

            .ticker-wrap::before, .ticker-wrap::after {
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
                width: 120px;
                z-index: 2;
                pointer-events: none
            }

            .ticker-wrap::before {
                left: 0;
                background: linear-gradient(90deg,var(--gray-100),transparent)
            }

            .ticker-wrap::after {
                right: 0;
                background: linear-gradient(-90deg,var(--gray-100),transparent)
            }

        .ticker-track {
            display: flex;
            width: max-content;
            animation: ticker 30s linear infinite
        }

            .ticker-track:hover {
                animation-play-state: paused
            }

        @keyframes ticker {
            0% {
                transform: translateX(0)
            }

            100% {
                transform: translateX(-50%)
            }
        }

        .ticker-item {
            padding: 0 40px;
            display: flex;
            align-items: center;
            border-right: 1px solid var(--gray-200);
            white-space: nowrap
        }

            .ticker-item:last-child {
                border-right: none
            }

        .tl {
            font-family: "Open Sans", sans-serif;
            font-size: 20px;
            font-weight: 700;
            color: var(--gray-400);
            transition: color .3s;
            letter-spacing: .5px
        }

        .ticker-item:hover .tl {
            color: var(--blue-deep)
        }

        .tl-i {
            font-style: italic;
            font-family: "Open Sans", sans-serif;
            font-weight: 400
        }

        .tl-sp {
            letter-spacing: 3px;
            font-family: "Open Sans", sans-serif
        }

        .tl-ora {
            color: #bf5400
        }

        .tl-grn {
            color: #2e7d32
        }

        /* ── FOOTER ── */
        .footer {
            background: var(--blue-deep);
            padding: 60px 0 0
        }
        .footer .container-fluid
		{
			max-width:90%;
		}
        .foot-logo {
            font-family:"Open Sans", sans-serif;
            font-size: 28px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 12px
        }

            .foot-logo .moc {
                color: var(--blue-brand)
            }

        .foot-tag {
            color: #fff;
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 20px
        }

        .foot-socials {
            display: flex;
            gap: 8px;
            margin-bottom: 20px
        }

        .foot-soc {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: rgba(255,255,255,.07);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 13px;
            text-decoration: none;
            transition: all .2s
        }

            .foot-soc:hover {
                background: var(--blue-brand);
                color: #fff
            }

        .foot-hd {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 18px
        }

        .foot-links {
            list-style: none;
            padding: 0;
            margin: 0
        }

            .foot-links li {
                margin-bottom: 10px
            }

            .foot-links a {
                color: #fff;
                font-size: 14px;
                text-decoration: none;
                transition: color .2s
            }

                .foot-links a:hover {
                    color: #fff;
                    padding-left: 4px
                }

        .foot-ci {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            color: #fff;
            font-size: 14px;
            margin-bottom: 12px;
            line-height: 1.5
        }

            .foot-ci .fa {
                color: #0098da;
                font-size: 14px;
                margin-top: 2px;
                flex-shrink: 0
            }

            .foot-ci a {
                color: #FFF;
                text-decoration: none
            }

                .foot-ci a:hover {
                    color: #fff
                }

        .nl-wrap {
            display: flex;
            margin-top: 8px
        }

        .nl-input {
            flex: 1;
            background: rgba(255,255,255,.07);
            border: 1.5px solid rgba(255,255,255,.1);
            border-right: none;
            color: #fff;
            padding: 10px 14px;
            font-size: 13px;
            border-radius: 4px 0 0 4px;
            outline: none
        }

            .nl-input::placeholder {
                color: #4a5a7a
            }

        .nl-btn {
            background: #0098da;
            border: none;
            color: #fff;
            padding: 10px 16px;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
            font-size: 14px;
            transition: background .2s
        }

            .nl-btn:hover {
                background: var(--blue-mid)
            }

        .foot-bottom {
            margin-top: 50px;
            border-top: 1px solid rgba(255,255,255,.06);
            padding: 18px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 8px
        }

        .foot-bottom-t {
            color: #fff;
            font-size: 12px
        }

        /* ── UTILITIES ── */
        .fade-up {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity .5s,transform .5s
        }

            .fade-up.vis {
                opacity: 1;
                transform: none
            }

        @media(max-width:991px) {
            .hero-h1 {
                font-size: 38px;
            }
            .hero-desc
			{
				font-size: 14px;
        margin-bottom: 20px;
			}
            .hero-img-col {
                display: none
            }

            .why-right {
                padding: 30px 0 0
            }
        }
@media (max-width:768px) {
    .hero-slide {
        align-items:flex-start;
    }

    .hero-content {
        margin-top:35px;
        padding-left:0;
    }

    .hero-stats {
        margin-top:20px;
    }
}
        @media(max-width:767px) {
            .hero-h1 {
                font-size: 32px
            }

            .hero-content-wrap {
             position: relative;
    z-index: 2;
    padding: 40px 0; /* Reduced from 80px to safely avoid inner clipping inside 400px */
    width: 100%;
            }

            .hero-stats {
                gap: 16px
            }

            .sec-title {
                font-size: 26px
            }

            .about-left {
                padding: 32px 24px
            }

            .foot-bottom {
                flex-direction: column;
                text-align: center
            }

            .tb-left {
                justify-content: center;
				align-items:center;
                /*margin-bottom: 4px*/
            }

            .tb-right {
                justify-content: center;
				align-items:center;
				margin-top:5px;	
            }

            .mega-menu {
                width: 100%
            }

            .mega-inner {
                flex-direction: column
            }

            .mega-promo {
                width: 100%;
                border-radius: 0
            }

            .submenu {
                position: static !important;
                opacity: 1 !important;
                transform: none !important;
                pointer-events: auto !important;
                box-shadow: none;
                border-radius: 0;
                border: none;
                border-left: 3px solid var(--gold);
                background: var(--gray-100);
                margin-left: 10px
            }

            .arr-hdr {
                flex-direction: column
            }
        }

        @media(max-width:480px) {
            .btn-hs {
                display: none
            }

            .hero-h1 {
                font-size: 26px
            }
        }

        @media (max-width:767px) {

            .main-navbar .submenu {
                display: none;
            }

            .mm {
                display: none !important;
            }

            .navbar-collapse {
                overflow-y: auto !important;
                overflow-x: hidden !important;
                max-height: calc(100vh - 60px) !important; /* adjust navbar height */
            }

                .navbar-collapse.in {
                    overflow-y: auto !important;
                }

            .mobile-products-menu,
            .mobile-submenu {
                margin: 0;
                padding: 0;
                list-style: none;
                display: none;
                background: #fff;
                border-top: 3px solid var(--gold);
                border-radius: 0 8px 8px 0;
                box-shadow: 8px 12px 48px rgba(0,0,0,.14);
            }

            .mobile-submenu {
                margin-left: 0 !important;
                padding-left: 0 !important;
                background: aliceblue;
            }

            .mobile-products-menu li {
                list-style: none;
            }

            .mobile-products-menu a {
                display: block;
                padding: 12px 15px;
                border-bottom: 1px solid #eee;
            }

            .navbar-collapse {
                max-height: 80vh;
                overflow-y: auto;
                overflow-x: hidden;
            }

            .hero-slide {
                min-height: 550px;
            }

                .hero-slide:before {
                    background: linear-gradient( 180deg, rgba(6,14,29,.85) 0%, rgba(6,14,29,.65) 100% );
                }
        }


        @media (min-width:768px) {
            .mobile-products-menu {
                display: none !important;
            }
        }
		.desk-logo
		{
			max-width:100%;
			height:76px
		}
		@media(max-width:1200px)
		{
			.desk-logo
		{
			max-width:100%;
			height:76px
		}
		}
	/* ══════════════════════════════════
   SECTION 2 — STATS BAR
══════════════════════════════════ */
/*==============================
        PREMIUM STATS BAR
===============================*/

.stats-bar{
    position:relative;
    overflow:hidden;
    padding:0;
    background: linear-gradient( 135deg, #0098da 0%, #0098da 45%, #0098da 100% );
}

/* Premium light effect */
.stats-bar::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top left,
        rgba(255,255,255,.12),
        transparent 40%),
        linear-gradient(
        rgba(255,255,255,.04) 1px,
        transparent 1px),
        linear-gradient(
        90deg,
        rgba(255,255,255,.04) 1px,
        transparent 1px);
    background-size:
        auto,
        42px 42px,
        42px 42px;
    pointer-events:none;
}

.stats-inner{
    position:relative;
    z-index:2;

    display:flex;
    align-items:stretch;
}

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

.stat-item{

    flex:1;

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

    gap:22px;

    padding:42px 28px;

    position:relative;

    transition:.35s ease;
}

.stat-item:not(:last-child)::after{

    content:"";

    position:absolute;

    right:0;
    top:18%;
    bottom:18%;

    width:1px;

    background:rgba(255,255,255,.18);

}

/* Hover */

.stat-item:hover{

    background:rgba(255,255,255,.05);

}

.stat-item:hover .stat-icon{

    transform:translateY(-6px) scale(1.08) rotate(-8deg);

    background:#fff;

    color:#0098da;

    box-shadow:
    0 15px 35px rgba(0,0,0,.18);

}

.stat-item:hover .stat-num{

    color:#fff;

    transform:translateY(-2px);

}

/*==============================
           ICON
===============================*/

.stat-icon{

    width:72px;
    height:72px;

    border-radius:50%;

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

    background:rgba(255,255,255,.10);

    border:2px solid rgba(255,255,255,.22);

    backdrop-filter:blur(12px);

    color:#fff;

    font-size:28px;

    flex-shrink:0;

    transition:.35s ease;

}

/*==============================
         NUMBER
===============================*/

.stat-num{

    font-size:46px;

    line-height:1;

    font-weight:800;

    color:#fff;

    letter-spacing:-1px;

    transition:.3s;

}

.stat-num sup{

    font-size:44px;

    color:#FFD54A;

    font-weight:700;

    top:-0.45em;

}

/*==============================
          LABEL
===============================*/

.stat-lbl{

    margin-top:10px;

    color:rgba(255,255,255,.72);

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:2px;

    font-weight:600;

}

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

@media(max-width:767px){

    .stats-inner{

        flex-wrap:wrap;

    }

    .stat-item{

        flex:0 0 50%;
        max-width:50%;

        flex-direction:column;

        text-align:center;

        padding:34px 16px;

        gap:16px;

    }

    .stat-item::after{

        display:none;

    }

    .stat-item:nth-child(1),
    .stat-item:nth-child(2){

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

    }

    .stat-item:nth-child(1),
    .stat-item:nth-child(3){

        border-right:1px solid rgba(255,255,255,.12);

    }

    .stat-icon{

        width:58px;
        height:58px;

        font-size:22px;

    }

    .stat-num{

        font-size:34px;

    }

    .stat-lbl{

        font-size:11px;

        letter-spacing:1.5px;

    }

}
/* ══════════════════════════════════
   SECTION 3 — NEW ARRIVALS
══════════════════════════════════ */
.arrivals-section {
  background: #effaff;
  padding: 48px 0 52px;
}
.arrivals-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}
.arrivals-left-hdr {}
.arrivals-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--blue-brand);
  margin-bottom: 6px;
}
.arrivals-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--blue-deep);
  text-transform: uppercase;
  letter-spacing: -.2px;
}
.arrivals-sub {
  font-size: 13px;
  color: var(--gray-500);
  margin-top: 4px;
  line-height: 1.5;
}
.view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue-brand);
  letter-spacing: .5px;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1.5px solid transparent;
  padding-bottom: 1px;
  transition: all .2s;
}
.view-all-link:hover {
  color: #0035cc;
  border-bottom-color: #0035cc;
  text-decoration: none;
}

/* Product slider wrapper */
.prod-slider-wrap {
  position: relative;
}
.prod-track-outer {
  overflow: hidden;
  border-radius: 6px;
}
.prod-track {
  display: flex;
  gap: 18px;
  transition: transform .45s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}
.prod-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--blue-brand);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 3px 7px;
  border-radius: 2px;
  text-transform: uppercase;
  z-index: 2;
}

/* ==========================
   Mobile : 1 Product
========================== */
@media (max-width:767px){

.prod-card:hover {
  box-shadow: 0 12px 36px rgba(0,71,255,.12);
  transform: translateY(-4px);
}


.prod-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--blue-brand);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 3px 7px;
  border-radius: 2px;
  text-transform: uppercase;
  z-index: 2;
}
.prod-img-wrap{
    background:#f0f3ff;
    height:190px;
    padding:14px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.prod-img-wrap img{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:170px;
    object-fit:contain;
}
}
@media (min-width:1600px){

    .prod-img-wrap{
        height:230px;
    }

    .prod-img-wrap img{
        max-width:100%;
        max-height:210px;
    }

}
@media (min-width:1700px){
    .prod-card,
    .prod-card-2{
        flex:0 0 calc((100% - (6 * 16px))/5);
        max-width:calc((100% - (6 * 16px))/5);
    }
	 .prod-img-wrap{
        height:300px !important;
    }

    .prod-img-wrap img{
        max-width:100%;
        max-height:300px !important;
    }
.prod-card .prod-name, .prod-card-2 .prod-name {
  font-size: 18px !important;
}
.prod-card-3 .prod-name
{
	font-size:14px !important;
	}
	.prod-card-3 .prod-sku
	{
		font-size:13px !important;
	}
.prod-card .prod-sku, .prod-card-2 .prod-sku{
  font-size: 16px !important;
}
	.sec-eyebrow {
  font-size: 14px !important;
}
	.sec-desc {
  font-size: 16px !important;
}
	.prod-card .btn-view-details, .prod-card-2  .btn-view-details{
  font-size: 14px !important;
}
	.prod-card-3 .btn-view-details
	{
		font-size:12px !important;
	}
	.ab-eyebrow {
  font-size: 13px !important;
}
	.ab-p {
  font-size: 16px !important;
}
	.ab-btn {
  font-size: 12px !important;
}
	.wc-eyebrow {
  font-size: 12px !important;
}
	.wc-h2 {
  font-size: 28px !important;
}
	.wc-icon {
  width: 70px !important;
  height: 70px !important;
  font-size: 40px !important;
}
	.wc-title {
  font-size: 20px !important;
}
	wc-desc {
  font-size: 15px !important;
}
	.arrivals-eyebrow {
  font-size: 12px !important;
}
	.arrivals-title {
  font-size: 24px !important;
}
	.arrivals-sub {
  font-size: 15px !important;
}
	.view-all-link {
  font-size: 16px !important;
}
	.main-navbar .navbar-nav > li > a {
  font-size: 15px;
}
	.main-navbar .dropdown-menu > li > a {
  font-size: 15px;
	}
	.dd-icon {
  width: 35px;
  height: 35px;
  font-size: 16px;
}
	.nav-btn-city
	{
		font-size:15px !important;
	}
	.nav-btn-dealer
	{
		font-size:15px !important;
	}
	.topbar {
  font-size: 15px;
}
	.tb-ic {
  font-size: 15px;
}
	.tb-right a {
  width: 32px;
  height: 32px;
  font-size: 15px;
}
	.foot-tag {
  font-size: 15px;
}
	.foot-hd {
  font-size: 14px;
}
	.foot-links a {
  font-size: 15px;
}
	.foot-ci {
  font-size: 15px;
}
	.foot-ci .fa {
  font-size: 16px;
}
.foot-bottom-t {
  font-size: 14px;
}
}		
.prod-card:hover .prod-img-wrap img { transform: scale(1.06); }
.prod-info {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--gray-200);
}
.prod-name{
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-deep);
  margin-bottom: 2px;
}
.prod-sku {
  font-size: 11px;
  color: var(--gray-500);
  margin-bottom: 10px;
}
.btn-view-details {
  display: block;
  width: 100%;
  text-align: center;
  padding: 8px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  background: transparent;
  color: var(--blue-brand);
  border: 1.5px solid var(--blue-brand);
  border-radius: 3px;
  text-decoration: none;
  transition: all .2s;
  cursor: pointer;
}
.btn-view-details:hover {
  background: var(--blue-brand);
  color: #fff;
  text-decoration: none;
}

/* Slider Arrows */
.prod-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  padding:0px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--gray-200);
  box-shadow: 0 4px 14px rgba(0,0,0,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all .22s;
  outline: none;
  -webkit-appearance: none;
  color: var(--blue-deep);
}
.prod-arrow svg {
  width: 16px; height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.prod-arrow:hover {
  background: var(--blue-brand);
  border-color: var(--blue-brand);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,71,255,.3);
}
.prod-arrow.pa-prev { left: -20px; }
.prod-arrow.pa-next { right: -20px; }
@media(max-width:767px){
  .prod-arrow.pa-prev { left: -14px; }
  .prod-arrow.pa-next { right: -14px; }
}

/* Divider line below stats */
.divider-grad {
  height: 3px;
  background: linear-gradient(90deg, var(--blue-brand), var(--gold));
}

	/* ════════════════════════════════════════════════
   1. ABOUT SECTION  —  two columns, same height
   LEFT  = full bleed background image + dark overlay + text ON TOP
   RIGHT = white background + why-choose content
════════════════════════════════════════════════ */
.ab-section {
  display: flex;
  min-height: 380px;
	padding:0px;
  /* no gap, no padding — columns touch edge to edge */
}

/* ── LEFT COLUMN ── */
.ab-left {
  flex: 0 0 50%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}

/* The actual building photo */
.ab-left__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  transition: transform 7s ease;
  filter: brightness(.85) saturate(.8);
}
.ab-left:hover .ab-left__bg { transform: scale(1.04); }

/* Dark gradient overlay — heavier on left so text is readable */
.ab-left__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(3, 8, 20, .96) 0%,
    rgba(3, 8, 20, .88) 40%,
    rgba(3, 8, 20, .65) 70%,
    rgba(3, 8, 20, .28) 100%
  );
  z-index: 1;
}

/* Ultra-fine grid texture on overlay */
.ab-left__overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 46px 46px;
}

/* Gold accent bar on the very left edge */
.ab-left__accent {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, transparent, #ffa623 30%, #ffa623 70%, transparent);
  z-index: 3;
}

/* Text content sitting above overlay */
.ab-left__content {
  position: relative;
  z-index: 3;
  padding: 46px 44px 46px 48px;
}

/* Eyebrow */
.ab-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: #ffa623;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ab-eyebrow::before {
  content: '';
  display: inline-block;
  width: 22px; height: 2px;
  background: #ffa623;
  flex-shrink: 0;
}

/* Main heading */
.ab-h2 {
  font-size: 27px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 18px;
  letter-spacing: -.3px;
}

/* Body paragraphs */
.ab-p {
  font-size: 15px;
  line-height: 1.82;
  color: rgba(255,255,255,.60);
  margin-bottom: 11px;
  max-width: 100%;
}

/* CTA Button */
.ab-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding: 12px 24px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  background: #01b4f1;
  color: #fff;
  border: none;
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
  transition: background .22s, box-shadow .22s, transform .22s;
  position: relative;
  overflow: hidden;
}
.ab-btn::before {
  /* shimmer sweep */
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transition: left .5s;
}
.ab-btn:hover::before { left: 150%; }
.ab-btn:hover {
  background: #0098da;
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,71,255,.42);
}

/* ── RIGHT COLUMN ── */
.ab-right {
  flex: 0 0 50%;
  background: #ffffff;
  position: relative;
  display: flex;
  align-items: center;
}

/* Thin top accent line on right panel */
.ab-right::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0098da 0%, #ffa623 100%);
  z-index: 2;
}

/* Very subtle dot pattern on right */
.ab-right::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0,71,255,.055) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

.ab-right__content {
  position: relative;
  z-index: 1;
  padding: 46px 48px 46px 52px;
  width: 100%;
  display:flex;
  flex-direction:column;
  justify-content:center;	
}

/* Right eyebrow */
.wc-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: #0098da;
  margin-bottom: 10px;
}

/* Right heading */
.wc-h2 {
  font-size: 26px;
  font-weight: 800;
  color: #060e1d;
  line-height: 1.2;
  margin-bottom: 30px;
  letter-spacing: -.2px;
}

/* 2-col × 3-row feature grid — exactly as in screenshot */
.wc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
}

.wc-item {
  display: flex;
  align-items: center;
  gap: 13px;
}

/* Circular icon — hollow ring style like screenshot */
.wc-icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,71,255,.22);
  background: rgba(0,71,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0098da;
  font-size: 30px;
  flex-shrink: 0;
  transition: all .25s;
}
.wc-item:hover .wc-icon {
  background: #0098da;
  border-color: #0098da;
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 4px 14px rgba(0,71,255,.28);
}

.wc-title {
  font-size: 14px;
  font-weight: 700;
  color: #060e1d;
  margin-bottom: 2px;
  line-height: 1.3;
}
.wc-desc {
  font-size: 12.5px;
  color: #8892b0;
  line-height: 1.55;
}
		/* ════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .ab-section    { flex-direction: column; }
  .ab-left,
  .ab-right      { flex: none; width: 100%; }
  .ab-left       { min-height: 300px; }
  .ab-left__content { padding: 36px 24px 36px 28px; }
  .ab-right__content { padding: 36px 24px; }
}
@media (max-width: 767px) {
  .wc-grid       { grid-template-columns: 1fr; }
}

	/* ===== Large Desktop (1920+) ===== */
		.prod-card, prod-card-2{
    flex:0 0 calc(25% - 14px);
    min-width:0;
    background:#fff;
    border-radius:8px;
    border:1px solid var(--gray-200);
    overflow:hidden;
    transition:box-shadow .25s, transform .25s;
    position:relative;
}

@media(max-width:1199px){
    .prod-card, .prod-card-2{
        flex:0 0 calc(20% - 15px);
    }
}

@media(max-width:991px){
    .prod-card, .prod-card-2{
        flex:0 0 calc(25% - 14px);
    }
}

@media(max-width:767px){
    .prod-card, .prod-card-2{
        flex:0 0 calc(33.33% - 13px);
    }
}

@media(max-width:540px){
    .prod-card, .prod-card-2{
        flex:0 0 calc(50% - 10px);
    }
}

@media(max-width:380px){
    .prod-card, .prod-card-2{
        flex:0 0 100%;
    }
}
	/* ICON */
.nav-search-icon > a {
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:10px;
    color:var(--gray-800);
    transition:all .25s ease;
}

.nav-search-icon > a:hover {
    background:rgba(0,152,218,.12);
    color:#0098da;
    transform:translateY(-1px) scale(1.05);
}

/* FULL TOP SEARCH OVERLAY */
.search-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0,0,0,.12);
    z-index: 999999;
    
    transform: translateY(-120%);
    transition: all .28s ease;
}

.search-overlay.active{
    transform: translateY(0);
}

/* SEARCH BAR TOP */
.search-bar{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
}

.search-left-icon{
    color: #999;
    font-size: 14px;
}

/* INPUT */
.search-bar input{
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    padding: 10px;
}

/* CLOSE BUTTON (FIXED PREMIUM STYLE) */
.search-close{
    background: transparent;
    border: none;
    font-size: 16px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    color: #666;
    transition: all .2s;
}

.search-close:hover{
    background: #f3f3f3;
    color: #000;
}

/* SUGGESTIONS PANEL */

.search-suggestions{
	 transition: all .25s ease;
    max-height: 320px;
    overflow-y: auto;
    /*padding: 10px 0;*/
}

/* SECTION */
.search-section{
    padding: 10px 16px;
}

.search-title{
    font-size: 10px;
    letter-spacing: 1px;
    color: #aaa;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* ITEM */
.search-item{
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    transition: all .2s;
}

.search-item:hover,
.search-item.active{
    background: #f5f9ff;
    color: #0098da;
}
		.clear-all{
    float:right;
    font-size:10px;
    color:#0098da;
    cursor:pointer;
    text-transform:none;
    letter-spacing:0;
}

.clear-all:hover{
    text-decoration:underline;
}

/* small delete button inside recent item */
.search-item{
    position:relative;
}

.search-remove{
    margin-left:10px;
    font-size:12px;
    color:#999;
    cursor:pointer;
}

.search-remove:hover{
    color:red;
}
.compare-wrap {
  position: relative;
  width: 700px;
  height: 337px;
  overflow: hidden;
  border-radius: 10px;
  cursor: col-resize;
}

.compare-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

#beforeImage {
  clip-path: inset(0 50% 0 0);
  transition: clip-path 0.05s linear;
}

.compare-wrap .divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #000;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}

.compare-wrap .label {
  position: absolute;
  top: 12px;
  padding: 6px 10px;
  color: #fff;
  font-weight: 600;
  border-radius: 6px;
  font-size: 14px;
  z-index: 4;
  pointer-events: none;
  transition: transform 0.05s linear;
}
.pl-6 {
            padding-left: 1.5rem;
        }

        .gap-10 {
            gap: 2.5rem;
        }

        .flex {
            display: flex;
        }


        @media (min-width: 640px) {
            .sm\:max-h-32 {
                max-height: 8rem;
            }
        }

        .max-h-24 {
            max-height: 6rem;
        }

        .relative {
            position: relative;
        }

        element.style {
        }

        @media (min-width: 640px) {
            .sm\:h-32 {
                height: 8rem;
            }
        }

        .bg-\[\#D2EAB1\] {
            --tw-bg-opacity: 1;
            background-color: #f7c699;
        }

        .rounded-full {
            border-radius: 9999px;
        }

        .-translate-x-1\/2 {
            --tw-translate-x: -50%;
        }

        .-translate-x-1, .-translate-x-1\/2 {
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        }

        .w-1\.5 {
            width: .375rem;
        }

        .h-24 {
            height: 6rem;
        }

        .top-0 {
            top: 0;
        }

        .left-1\/2 {
            left: 50%;
        }

        .absolute {
            position: absolute;
        }

        @media (min-width: 640px) {
            .sm\:w-12 {
                width: 3rem;
            }
        }

        @media (min-width: 640px) {
            .sm\:h-12 {
                height: 3rem;
            }
        }

        .text-white {
            --tw-text-opacity: 1;
            color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        }

        .bg-\[\#8EC640\] {
            --tw-bg-opacity: 1;
            background-color: #ef7f1a;
        }

        .border-\[\#D2EAB1\] {
            --tw-border-opacity: 1;
            border-color: rgb(210 234 177 / var(--tw-border-opacity, 1));
        }

        .border-4 {
            border-width: 4px;
        }

        .rounded-full {
            border-radius: 9999px;
        }

        .justify-center {
            justify-content: center;
        }

        .items-center {
            align-items: center;
        }

        .-translate-y-1\/2, .-translate-y-1\/3 {
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        }

        .-translate-y-1\/2 {
            --tw-translate-y: -50%;
        }

        .-translate-x-1\/2 {
            --tw-translate-x: -50%;
        }

        .-translate-x-1, .-translate-x-1\/2 {
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        }

        .w-10 {
            width: 2.5rem;
        }

        .h-10 {
            height: 2.5rem;
        }


        .top-1\/2 {
            top: 30%;
        }

        .gap-5 {
            gap: 1.25rem;
        }

        .items-center {
            align-items: center;
        }

        .text-base {
            font-size: 2.0rem;
            line-height: 3.0rem;
			text-align:justify;
        }
		@media(max-width:991px)
		{
			.text-base {
            font-size: 1.6rem;
            line-height: 2.0rem;
        }
		}

        .pt-4 {
            padding-top: 1rem;
        }

        .bg-\[\#c2c2c2\] {
            --tw-bg-opacity: 1;
            background-color: rgb(194 194 194 / var(--tw-bg-opacity, 1));
        }

        .rounded-full {
            border-radius: 9999px;
        }

        .justify-center {
            justify-content: center;
        }

        .items-center {
            align-items: center;
        }

        .w-12 {
            width: 3rem;
        }

        .h-12 {
            height: 3rem;
        }

        .flex {
            display: flex;
        }

        element.style {
        }

        @media (min-width: 640px) {
            .sm\:pt-0 {
                padding-top: 0;
            }
        }

        @media (min-width: 640px) {
            .sm\:max-w-full {
                max-width: 100%;
            }
        }

        @media (min-width: 640px) {
            .sm\:static {
                position: static;
            }
        }

        .pt-5 {
            padding-top: 1.25rem;
        }

        .max-w-\[100px\] {
            max-width: 100px;
        }

        .mx-auto {
            margin-left: auto;
            margin-right: auto;
        }

        .relative {
            position: relative;
        }


        @media (min-width: 640px) {
            .sm\:text-\[\#A7A9AC\] {
                --tw-text-opacity: 1;
                color: rgb(167 169 172 / var(--tw-text-opacity, 1));
            }
        }


        .\[\&_svg\]\:shrink-0 svg {
            flex-shrink: 0;
        }

        .\[\&_svg\]\:size-4 svg {
            width: 1rem;
            height: 1rem;
        }

        .\[\&_svg\]\:pointer-events-none svg {
            pointer-events: none;
        }

        .w-4 {
            width: 1rem;
        }

        .h-4 {
            height: 1rem;
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border-width: 0;
        }

        @media (min-width: 640px) {
            .sm\:after\:content-\[\'\'\]:after {
                --tw-content: "";
                content: var(--tw-content);
            }
        }

        @media (min-width: 640px) {
            .sm\:after\:bg-\[\#A7A9AC\]:after {
                content: var(--tw-content);
                --tw-bg-opacity: 1;
                background-color: rgb(167 169 172 / var(--tw-bg-opacity, 1));
            }
        }

        @media (min-width: 640px) {
            .sm\:after\:w-0\.5:after {
                content: var(--tw-content);
                width: .125rem;
            }
        }

        @media (min-width: 640px) {
            .sm\:after\:h-10:after {
                content: var(--tw-content);
                height: 2.5rem;
            }
        }

        @media (min-width: 640px) {
            .sm\:after\:right-\[-30\%\]:after {
                content: var(--tw-content);
                right: -30%;
            }
        }

        @media (min-width: 640px) {
            .sm\:after\:absolute:after {
                content: var(--tw-content);
                position: absolute;
            }
        }

        element.style {
        }

        @media (min-width: 640px) {
            .sm\:text-\[\#A7A9AC\] {
                --tw-text-opacity: 1;
                color: rgb(167 169 172 / var(--tw-text-opacity, 1));
            }
        }

        @media (min-width: 640px) {
            .sm\:bg-transparent {
                background-color: transparent;
            }
        }

        @media (min-width: 640px) {
            .sm\:rounded-full {
                border-radius: 9999px;
            }
        }

        @media (min-width: 640px) {
            .sm\:w-8 {
                width: 2rem;
            }
        }

        @media (min-width: 640px) {
            .sm\:left-12 {
                left: 3rem;
            }
        }

        .transition-all {
            transition-property: all;
            transition-timing-function: cubic-bezier(.4,0,.2,1);
            transition-duration: .15s;
        }

        .ring-offset-background {
            --tw-ring-offset-color: hsl(var(--background));
        }

        .text-white {
            --tw-text-opacity: 1;
            color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        }

        .font-medium {
            font-weight: 500;
        }

        .text-sm {
            font-size: .875rem;
            line-height: 1.25rem;
        }

        .bg-\[\#515151\] {
            --tw-bg-opacity: 1;
            background-color: rgb(81 81 81 / var(--tw-bg-opacity, 1));
        }

        .border-input {
            border-color: hsl(var(--input));
        }

        .border-none {
            border-style: none;
        }

        .border {
            border-width: 1px;
        }

        .rounded-lg {
            border-radius: var(--radius);
        }

        .whitespace-nowrap {
            white-space: nowrap;
        }

        .gap-2 {
            gap: .5rem;
        }

        .justify-center {
            justify-content: center;
        }

        .items-center {
            align-items: center;
        }

        .-translate-y-1\/2, .-translate-y-1\/3 {
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        }

        .-translate-y-1\/2 {
            --tw-translate-y: -50%;
        }

        .flex-none {
            flex: none;
        }

        .w-10 {
            width: 2.5rem;
        }

        .h-8 {
            height: 2rem;
        }

        .inline-flex {
            display: inline-flex;
        }

        .top-\[110\%\] {
            top: 110%;
        }

        .right-0 {
            right: 0;
        }

        .absolute {
            position: absolute;
        }

        .vt-button {
            -webkit-appearance: button;
            background-color: transparent;
            background-image: none;
        }

        .vt-button {
            text-transform: none;
        }

        .vt-button {
            font-family: inherit;
            font-feature-settings: inherit;
            font-variation-settings: inherit;
            font-size: 100%;
            font-weight: inherit;
            line-height: inherit;
            letter-spacing: inherit;
            color: inherit;
            margin: 0;
            padding: 0;
        }
		.owl-carousel .owl-item img {
  transform-style: preserve-3d;
  max-width: 90px;
  margin: 0 auto 17px;
}
.h-100
{
	height:100%
		}
		
		
		
		/**=======New product Card========**/
		/* Product slider wrapper */


/* Product Card */
/* ==========================
   Large Desktop (1920+) : 7 Products
========================== */
.prod-card-3{
    flex:0 0 calc((100% - (6 * 16px)) / 7);
    max-width:calc((100% - (6 * 16px)) / 7);
    min-width:0;
    background:#fff;
    border-radius:8px;
    border:1px solid var(--gray-200);
    overflow:hidden;
    transition:box-shadow .25s, transform .25s;
    position:relative;
}

/* ==========================
   Desktop : 6 Products
========================== */
@media (max-width:1700px){
    .prod-card-3{
        flex:0 0 calc((100% - (5 * 16px)) / 6);
        max-width:calc((100% - (5 * 16px)) / 6);
    }
}

/* ==========================
   Laptop : 5 Products
========================== */
@media (max-width:1450px){
    .prod-card-3{
        flex:0 0 calc((100% - (4 * 16px)) / 5);
        max-width:calc((100% - (4 * 16px)) / 5);
    }
}

/* ==========================
   Tablet : 3 Products
========================== */
@media (max-width:991px){
    .prod-card-3{
        flex:0 0 calc((100% - (2 * 16px)) / 3);
        max-width:calc((100% - (2 * 16px)) / 3);
    }
}

/* ==========================
   Mobile : 1 Product
========================== */
@media (max-width:767px){
    .prod-card-3{
        flex:0 0 100%;
        max-width:100%;
    }
}

.prod-img-wrap-2, .prod-img-wrap{
    background:#f0f3ff;
    height:190px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:14px;
}

.prod-img-wrap-2 img, .prod-img-wrap img{
    max-height:170px;
    max-width:100%;
    object-fit:contain;
    transition:.3s;
}

/* Only for large desktop */
@media (min-width:1600px){

    .prod-img-wrap-2, .prod-img-wrap{
        height:230px;
    }

    .prod-img-wrap-2 img, .prod-img-wrap img{
        max-height:210px;
    }

}
.prod-card-3:hover .prod-img-wrap-2 img, .prod-card-3:hover .prod-img-wrap-2 img { transform: scale(1.06); }
.velmocmobilemsg {
            padding-top: 40px;
            padding-bottom: 0px;
            background: #aae6ff;
            padding-left: 90px;
            padding-right: 100px;
        }

        .velmocmobilemsgcont {
            text-align: center;
            margin-bottom: 37px;
        }

        .velmocmobilemsgimg {
            padding-left: 109px;
            text-align: center;
        }

        @media(max-width:991px) {
            .velmocmobilemsg {
                padding-left: 0px !important;
                padding-right: 0px !important;
                padding-bottom: 0px !important;
            }

            .velmocmobilemsgcont {
                text-align: center;
                margin-bottom: 30px;
            }

            .velmocmobilemsgimg {
                text-align: center;
                padding-left: 0px;
            }
        }

        .velmoc-elementor-button {
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
            border-bottom-left-radius: 4px;
            padding-top: 15px;
            padding-right: 23px;
            padding-bottom: 15px;
            padding-left: 23px;
        }

        .velmoc-elementor-button {
            border-width: 2px !important;
            color: #0c3b4e;
        }

        .velmoc-elementor-button {
            border-color: #0c3b4e;
            font-weight: 700;
            font-size: 20px;
            background-color: rgba(226, 3, 48, 0);
        }

        .velmoc-elementor-button {
            border-style: solid;
            text-decoration: none;
        }

        .velmoc-elementor-button {
            box-shadow: none;
            text-decoration: none;
        }

            .velmoc-elementor-button:hover {
                border-color: #0c3b4e;
                background-color: #0c3b4e;
                color: #fff;
				text-decoration:none;
            }

        .velmocmsgsub {
            color: #000;
            text-align: center;
            font-size: 2.3rem;
            margin-bottom: 1.8rem;
        }

        .velmocmsgtitle {
            color: #0094d3;
            text-align: center;
            font-size: 65px;
			font-weight:700;
            margin-bottom: 1.8rem;
        }

            .velmocmsgtitle a {
                color: inherit
            }

        .section_msg_description {
            color: #000;
            font-size: 20px;
            margin-bottom: 2.6rem;
            text-align: center;
        }
	/*=============================
    Shorts Section
==============================*/

.shorts-section{

    position:relative;
    padding:90px 0;
    background:#fff;
    overflow:hidden;

}

.shorts-section::before{

    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    background:rgba(230,57,70,.05);
    top:-100px;
    right:-120px;
    filter:blur(60px);

}

.shorts-section::after{

    content:"";
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(15,76,129,.05);
    bottom:-80px;
    left:-80px;
    filter:blur(60px);

}

.shorts-section .container-fluid{

    position:relative;
    z-index:2;
    padding:0 4%;

}

.shorts-rail {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 10px 0;
}

.shorts-track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: scrollLeft 25s linear infinite;
}

/* CARD */
.short-item {
    flex: 0 0 auto;
    width: 280px;
    height: 400px;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

/* YouTube box */
.youtube-player {
    width: 100%;
    height: 100%;
}

/* CONTINUOUS ANIMATION */
@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* PAUSE ON HOVER */
.shorts-rail:hover .shorts-track {
    animation-play-state: paused;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 992px) {
    .shorts-track {
        animation: scrollLeft 18s linear infinite;
    }

    .short-item {
        width: 240px;
        height: 420px;
    }
}

@media (max-width: 576px) {
    .shorts-track {
        animation: scrollLeft 12s linear infinite;
        gap: 12px;
    }

    .short-item {
        width: 200px;
        height: 360px;
    }
}

@media (max-width: 400px) {
    .shorts-track {
        animation: scrollLeft 10s linear infinite;
    }

    .short-item {
        width: 180px;
        height: 320px;
    }
}
		/**Search Bar Desktop **/
#searchbox{
    position:relative;
    width:260px;
    padding: 14px 13px;
}

#searchbox .search_query{
    width:100%;
    height:42px;
    padding:0 50px 0 16px;
    border:2px solid #0098da;
    border-radius:25px;
    font-size:14px;
    line-height:42px;
    box-sizing:border-box;
}

#searchbox .button-search{
    position:absolute;
    right: 16px;
  top: 17px;
    width:36px;
    height:36px;
    border:none;
    border-radius:50%;
    background:#0098da;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
}
	.show-d{
    display:none !important;
}

.show-s{
    display:list-item !important;
}

@media (min-width:1700px){

    .show-d{
        display:list-item !important;
    }

    .show-s{
        display:none !important;
    }

}