{"id":4082,"date":"2026-05-12T06:23:34","date_gmt":"2026-05-12T06:23:34","guid":{"rendered":"https:\/\/dindex.net\/woo-store\/"},"modified":"2026-08-20T10:10:43","modified_gmt":"2026-08-20T10:10:43","slug":"woo-store","status":"publish","type":"page","link":"https:\/\/dindex.net\/en\/woo-store\/","title":{"rendered":"WooCommerce Store"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4082\" class=\"elementor elementor-4082 elementor-2642\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ef8915e e-con-full e-flex e-con e-parent\" data-id=\"ef8915e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fd5759c elementor-widget elementor-widget-html\" data-id=\"fd5759c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n.elementor-widget-html:has(#dx-woo-hero),\n.elementor-widget-html:has(#dx-woo-hero) > .elementor-widget-container,\n.dx-woo-hero-widget-fullwidth,\n.dx-woo-hero-widget-fullwidth > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n#dx-woo-hero,\n#dx-woo-hero *,\n#dx-woo-hero *::before,\n#dx-woo-hero *::after {\n    box-sizing: border-box;\n}\n\n#dx-woo-hero {\n    --dx-woo-dark: #09001f;\n    --dx-woo-dark-secondary: #17053d;\n    --dx-woo-white: #ffffff;\n    --dx-woo-text: rgba(255, 255, 255, 0.72);\n    --dx-woo-muted: rgba(255, 255, 255, 0.5);\n    --dx-woo-purple: #6942d8;\n    --dx-woo-purple-light: #9168ef;\n    --dx-woo-yellow: #ffc441;\n    --dx-woo-yellow-light: #ffd66e;\n    --dx-woo-green: #54d696;\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    min-height: 760px;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n    direction: ltr;\n\n    color: var(--dx-woo-white);\n\n    background:\n        radial-gradient(\n            circle at 12% 14%,\n            rgba(145, 104, 239, 0.24),\n            transparent 29%\n        ),\n        radial-gradient(\n            circle at 86% 85%,\n            rgba(105, 66, 216, 0.2),\n            transparent 32%\n        ),\n        linear-gradient(\n            145deg,\n            var(--dx-woo-dark-secondary),\n            var(--dx-woo-dark)\n        );\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-woo-hero a {\n    color: inherit;\n    text-decoration: none;\n}\n\n#dx-woo-hero img {\n    display: block;\n    max-width: 100%;\n}\n\n#dx-woo-hero .dx-woo-hero-grid-bg {\n    position: absolute;\n    z-index: -7;\n\n    inset: 0;\n\n    opacity: 0.1;\n\n    background-image:\n        linear-gradient(\n            rgba(255, 255, 255, 0.045) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(255, 255, 255, 0.045) 1px,\n            transparent 1px\n        );\n\n    background-size: 72px 72px;\n\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 15%,\n            transparent 82%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 15%,\n            transparent 82%\n        );\n\n    pointer-events: none;\n}\n\n#dx-woo-hero .dx-woo-hero-glow {\n    position: absolute;\n    z-index: -6;\n\n    border-radius: 50%;\n\n    filter: blur(110px);\n\n    pointer-events: none;\n}\n\n#dx-woo-hero .dx-woo-hero-glow-one {\n    top: -160px;\n    right: 17%;\n\n    width: 420px;\n    height: 420px;\n\n    background: rgba(145, 104, 239, 0.2);\n}\n\n#dx-woo-hero .dx-woo-hero-glow-two {\n    left: -180px;\n    bottom: -210px;\n\n    width: 500px;\n    height: 450px;\n\n    background: rgba(255, 196, 65, 0.06);\n}\n\n#dx-woo-hero .dx-woo-hero-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n    min-height: 760px;\n\n    display: flex;\n    align-items: center;\n\n    padding:\n        82px\n        clamp(22px, 5vw, 90px)\n        88px;\n}\n\n#dx-woo-hero .dx-woo-hero-container {\n    width: min(1450px, 100%);\n\n    margin: 0 auto;\n}\n\n#dx-woo-hero .dx-woo-hero-layout {\n    display: grid;\n    grid-template-columns:\n        minmax(0, 0.9fr)\n        minmax(470px, 1.1fr);\n\n    align-items: center;\n\n    gap: clamp(45px, 6vw, 95px);\n}\n\n#dx-woo-hero .dx-woo-hero-content {\n    min-width: 0;\n}\n\n#dx-woo-hero .dx-woo-hero-eyebrow {\n    display: inline-flex;\n    align-items: center;\n\n    gap: 9px;\n\n    min-height: 36px;\n\n    margin-bottom: 18px;\n    padding:\n        0\n        14px;\n\n    border: 1px solid rgba(145, 104, 239, 0.22);\n    border-radius: 999px;\n\n    color: #d6c9ff;\n\n    background: rgba(145, 104, 239, 0.11);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1;\n}\n\n#dx-woo-hero .dx-woo-hero-eyebrow-icon {\n    width: 22px;\n    height: 22px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 7px;\n\n    color: var(--dx-woo-yellow);\n\n    background: rgba(255, 196, 65, 0.1);\n}\n\n#dx-woo-hero .dx-woo-hero-eyebrow-icon svg {\n    width: 13px;\n    height: 13px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-hero .dx-woo-hero-title {\n    max-width: 710px;\n\n    margin: 0;\n\n    color: var(--dx-woo-white);\n\n    font-size: clamp(43px, 5vw, 70px);\n    font-weight: 900;\n    line-height: 1.35;\n    letter-spacing: -0.8px;\n\n    text-wrap: balance;\n}\n\n#dx-woo-hero .dx-woo-hero-title span {\n    display: block;\n\n    color: var(--dx-woo-yellow);\n}\n\n#dx-woo-hero .dx-woo-hero-description {\n    max-width: 670px;\n\n    margin:\n        22px\n        0\n        0;\n\n    color: var(--dx-woo-text);\n\n    font-size: 16px;\n    font-weight: 500;\n    line-height: 2.05;\n\n    text-wrap: pretty;\n}\n\n#dx-woo-hero .dx-woo-hero-actions {\n    margin-top: 31px;\n\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n\n    gap: 12px;\n}\n\n#dx-woo-hero .dx-woo-hero-button {\n    min-height: 54px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    padding:\n        0\n        24px;\n\n    border-radius: 13px;\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1;\n    white-space: nowrap;\n\n    transition:\n        transform 0.25s ease,\n        border-color 0.25s ease,\n        background 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-woo-hero .dx-woo-hero-button-primary {\n    min-width: 190px;\n\n    border: 1px solid rgba(255, 255, 255, 0.17);\n\n    color: #180b35;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-woo-yellow),\n            var(--dx-woo-yellow-light)\n        );\n\n    box-shadow:\n        0 18px 40px rgba(255, 196, 65, 0.22);\n}\n\n#dx-woo-hero .dx-woo-hero-button-primary:hover,\n#dx-woo-hero .dx-woo-hero-button-primary:focus-visible {\n    box-shadow:\n        0 24px 50px rgba(255, 196, 65, 0.31);\n\n    transform: translateY(-3px);\n}\n\n#dx-woo-hero .dx-woo-hero-button-secondary {\n    min-width: 175px;\n\n    border: 1px solid rgba(255, 255, 255, 0.18);\n\n    color: #ffffff;\n\n    background: rgba(255, 255, 255, 0.055);\n\n    box-shadow:\n        inset 0 1px 0 rgba(255, 255, 255, 0.05);\n\n    -webkit-backdrop-filter: blur(8px);\n    backdrop-filter: blur(8px);\n}\n\n#dx-woo-hero .dx-woo-hero-button-secondary:hover,\n#dx-woo-hero .dx-woo-hero-button-secondary:focus-visible {\n    border-color: rgba(145, 104, 239, 0.55);\n\n    background: rgba(145, 104, 239, 0.13);\n\n    transform: translateY(-3px);\n}\n\n#dx-woo-hero .dx-woo-hero-button svg {\n    width: 18px;\n    height: 18px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-hero .dx-woo-hero-features {\n    margin-top: 31px;\n    padding-top: 24px;\n\n    display: flex;\n    flex-wrap: wrap;\n\n    gap: 10px 20px;\n\n    border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n#dx-woo-hero .dx-woo-hero-feature {\n    display: inline-flex;\n    align-items: center;\n\n    gap: 8px;\n\n    color: rgba(255, 255, 255, 0.67);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.6;\n}\n\n#dx-woo-hero .dx-woo-hero-feature-icon {\n    width: 25px;\n    height: 25px;\n    flex: 0 0 25px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 8px;\n\n    color: #7ce3b3;\n\n    background: rgba(84, 214, 150, 0.11);\n}\n\n#dx-woo-hero .dx-woo-hero-feature-icon svg {\n    width: 13px;\n    height: 13px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2.3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-hero .dx-woo-hero-visual {\n    position: relative;\n\n    min-width: 0;\n    min-height: 540px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n#dx-woo-hero .dx-woo-hero-visual-frame {\n    position: absolute;\n\n    inset:\n        7%\n        2%\n        4%;\n\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    border-radius: 34px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.075),\n            rgba(255, 255, 255, 0.025)\n        );\n\n    box-shadow:\n        0 35px 90px rgba(2, 0, 20, 0.35),\n        inset 0 1px 0 rgba(255, 255, 255, 0.06);\n\n    -webkit-backdrop-filter: blur(12px);\n    backdrop-filter: blur(12px);\n}\n\n#dx-woo-hero .dx-woo-hero-visual-frame::before {\n    content: \"\";\n\n    position: absolute;\n\n    top: 0;\n    right: 0;\n\n    width: 100%;\n    height: 4px;\n\n    border-radius:\n        34px\n        34px\n        0\n        0;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-woo-purple),\n            var(--dx-woo-purple-light),\n            var(--dx-woo-yellow)\n        );\n}\n\n#dx-woo-hero .dx-woo-browser {\n    position: relative;\n    z-index: 3;\n\n    width: min(680px, 96%);\n\n    overflow: hidden;\n\n    border: 1px solid rgba(255, 255, 255, 0.15);\n    border-radius: 22px;\n\n    background: #ffffff;\n\n    box-shadow:\n        0 38px 90px rgba(2, 0, 20, 0.5),\n        0 0 0 7px rgba(145, 104, 239, 0.045);\n\n    transform:\n        perspective(1200px)\n        rotateY(-5deg)\n        rotateX(2deg);\n\n    transition:\n        transform 0.45s ease,\n        box-shadow 0.45s ease;\n}\n\n#dx-woo-hero .dx-woo-browser:hover {\n    box-shadow:\n        0 48px 105px rgba(2, 0, 20, 0.58),\n        0 0 0 7px rgba(145, 104, 239, 0.065);\n\n    transform:\n        perspective(1200px)\n        rotateY(0deg)\n        rotateX(0deg)\n        translateY(-6px);\n}\n\n#dx-woo-hero .dx-woo-browser-bar {\n    height: 42px;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    padding:\n        0\n        15px;\n\n    border-bottom: 1px solid rgba(105, 66, 216, 0.09);\n\n    background:\n        linear-gradient(\n            180deg,\n            #ffffff,\n            #f7f5fb\n        );\n}\n\n#dx-woo-hero .dx-woo-browser-dots {\n    display: flex;\n    align-items: center;\n\n    gap: 6px;\n\n    direction: ltr;\n}\n\n#dx-woo-hero .dx-woo-browser-dot {\n    width: 8px;\n    height: 8px;\n\n    border-radius: 50%;\n\n    background: #dad5e3;\n}\n\n#dx-woo-hero .dx-woo-browser-dot:nth-child(1) {\n    background: #ff6e6e;\n}\n\n#dx-woo-hero .dx-woo-browser-dot:nth-child(2) {\n    background: #ffc441;\n}\n\n#dx-woo-hero .dx-woo-browser-dot:nth-child(3) {\n    background: #54d696;\n}\n\n#dx-woo-hero .dx-woo-browser-address {\n    width: 55%;\n    height: 12px;\n\n    border-radius: 999px;\n\n    background: rgba(105, 66, 216, 0.08);\n}\n\n#dx-woo-hero .dx-woo-browser-screen {\n    position: relative;\n\n    aspect-ratio: 16 \/ 9;\n\n    overflow: hidden;\n\n    background: #f4f1fa;\n}\n\n#dx-woo-hero .dx-woo-browser-screen img {\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n    object-position: center;\n\n    transition: transform 0.7s ease;\n}\n\n#dx-woo-hero .dx-woo-browser:hover\n    .dx-woo-browser-screen img {\n    transform: scale(1.025);\n}\n\n#dx-woo-hero .dx-woo-visual-badge {\n    position: absolute;\n    z-index: 5;\n\n    display: flex;\n    align-items: center;\n\n    gap: 10px;\n\n    min-height: 58px;\n\n    padding:\n        9px\n        13px;\n\n    border: 1px solid rgba(255, 255, 255, 0.15);\n    border-radius: 16px;\n\n    color: #ffffff;\n\n    background: rgba(20, 7, 54, 0.88);\n\n    box-shadow:\n        0 20px 45px rgba(2, 0, 20, 0.35);\n\n    -webkit-backdrop-filter: blur(13px);\n    backdrop-filter: blur(13px);\n}\n\n#dx-woo-hero .dx-woo-visual-badge-one {\n    top: 9%;\n    right: -2%;\n}\n\n#dx-woo-hero .dx-woo-visual-badge-two {\n    left: -2%;\n    bottom: 8%;\n}\n\n#dx-woo-hero .dx-woo-visual-badge-icon {\n    width: 39px;\n    height: 39px;\n    flex: 0 0 39px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 12px;\n\n    color: #180b35;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-woo-yellow),\n            var(--dx-woo-yellow-light)\n        );\n}\n\n#dx-woo-hero\n    .dx-woo-visual-badge-two\n    .dx-woo-visual-badge-icon {\n    color: #0b4f38;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-woo-green),\n            #8ae6b9\n        );\n}\n\n#dx-woo-hero .dx-woo-visual-badge-icon svg {\n    width: 20px;\n    height: 20px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.9;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* Visual microtext keeps source sizing *\/\n#dx-woo-hero .dx-woo-visual-badge-label {\n    display: block;\n\n    color: var(--dx-woo-muted);\n\n    font-size: 7px;\n    font-weight: 800;\n    line-height: 1.4;\n}\n\n#dx-woo-hero .dx-woo-visual-badge-value {\n    display: block;\n\n    margin-top: 3px;\n\n    color: #ffffff;\n\n    font-size: 10px;\n    font-weight: 900;\n    line-height: 1.5;\n}\n\n#dx-woo-hero .dx-woo-hero-bottom {\n    margin-top: 35px;\n\n    display: grid;\n    grid-template-columns:\n        repeat(3, minmax(0, 1fr));\n\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    border-radius: 18px;\n\n    background: rgba(255, 255, 255, 0.045);\n\n    box-shadow:\n        inset 0 1px 0 rgba(255, 255, 255, 0.05);\n\n    -webkit-backdrop-filter: blur(8px);\n    backdrop-filter: blur(8px);\n}\n\n#dx-woo-hero .dx-woo-hero-bottom-item {\n    min-height: 78px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 11px;\n\n    padding:\n        13px\n        15px;\n\n    text-align: left;\n}\n\n#dx-woo-hero .dx-woo-hero-bottom-item:not(:last-child) {\n    border-right: 1px solid rgba(255, 255, 255, 0.09);\n}\n\n#dx-woo-hero .dx-woo-hero-bottom-icon {\n    width: 39px;\n    height: 39px;\n    flex: 0 0 39px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 12px;\n\n    color: #d6c9ff;\n\n    background: rgba(145, 104, 239, 0.12);\n}\n\n#dx-woo-hero\n    .dx-woo-hero-bottom-item:nth-child(2)\n    .dx-woo-hero-bottom-icon {\n    color: var(--dx-woo-yellow);\n\n    background: rgba(255, 196, 65, 0.1);\n}\n\n#dx-woo-hero\n    .dx-woo-hero-bottom-item:nth-child(3)\n    .dx-woo-hero-bottom-icon {\n    color: #7ce3b3;\n\n    background: rgba(84, 214, 150, 0.1);\n}\n\n#dx-woo-hero .dx-woo-hero-bottom-icon svg {\n    width: 20px;\n    height: 20px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.9;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-hero .dx-woo-hero-bottom-title {\n    display: block;\n\n    color: #ffffff;\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.5;\n}\n\n#dx-woo-hero .dx-woo-hero-bottom-text {\n    display: block;\n\n    margin-top: 3px;\n\n    color: var(--dx-woo-muted);\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.5;\n}\n\n@media (max-width: 1100px) {\n    #dx-woo-hero .dx-woo-hero-main {\n        padding:\n            70px\n            30px\n            76px;\n    }\n\n    #dx-woo-hero .dx-woo-hero-layout {\n        grid-template-columns:\n            minmax(0, 0.95fr)\n            minmax(410px, 1.05fr);\n\n        gap: 45px;\n    }\n\n    #dx-woo-hero .dx-woo-hero-title {\n        font-size: clamp(39px, 5vw, 58px);\n    }\n\n    #dx-woo-hero .dx-woo-hero-visual {\n        min-height: 480px;\n    }\n}\n\n@media (max-width: 900px) {\n    #dx-woo-hero {\n        min-height: 0;\n    }\n\n    #dx-woo-hero .dx-woo-hero-main {\n        min-height: 0;\n\n        padding:\n            72px\n            28px\n            78px;\n    }\n\n    #dx-woo-hero .dx-woo-hero-layout {\n        grid-template-columns: 1fr;\n    }\n\n    #dx-woo-hero .dx-woo-hero-content {\n        text-align: center;\n    }\n\n    #dx-woo-hero .dx-woo-hero-eyebrow {\n        justify-content: center;\n    }\n\n    #dx-woo-hero .dx-woo-hero-title,\n    #dx-woo-hero .dx-woo-hero-description {\n        margin-right: auto;\n        margin-left: auto;\n    }\n\n    #dx-woo-hero .dx-woo-hero-actions,\n    #dx-woo-hero .dx-woo-hero-features {\n        justify-content: center;\n    }\n\n    #dx-woo-hero .dx-woo-hero-visual {\n        min-height: 500px;\n    }\n\n    #dx-woo-hero .dx-woo-browser {\n        width: min(680px, 88%);\n\n        transform: none;\n    }\n}\n\n@media (max-width: 680px) {\n    #dx-woo-hero .dx-woo-hero-main {\n        padding:\n            55px\n            16px\n            62px;\n    }\n\n    #dx-woo-hero .dx-woo-hero-layout {\n        gap: 38px;\n    }\n\n    #dx-woo-hero .dx-woo-hero-eyebrow {\n        min-height: 33px;\n\n        margin-bottom: 14px;\n        padding:\n            0\n            11px;\n\n        font-size: 14px;\n    }\n\n    #dx-woo-hero .dx-woo-hero-title {\n        font-size: clamp(33px, 10.5vw, 44px);\n        line-height: 1.48;\n        letter-spacing: -0.35px;\n    }\n\n    #dx-woo-hero .dx-woo-hero-description {\n        margin-top: 16px;\n\n        font-size: 14px;\n        line-height: 2;\n    }\n\n    #dx-woo-hero .dx-woo-hero-actions {\n        margin-top: 24px;\n\n        display: grid;\n        grid-template-columns: 1fr;\n\n        gap: 10px;\n    }\n\n    #dx-woo-hero .dx-woo-hero-button {\n        width: 100%;\n        min-width: 0;\n        min-height: 51px;\n\n        font-size: 14px;\n    }\n\n    #dx-woo-hero .dx-woo-hero-features {\n        margin-top: 24px;\n        padding-top: 19px;\n\n        display: grid;\n        grid-template-columns:\n            repeat(2, minmax(0, 1fr));\n\n        gap: 10px;\n    }\n\n    #dx-woo-hero .dx-woo-hero-feature {\n        justify-content: flex-start;\n\n        text-align: left;\n\n        font-size: 14px;\n    }\n\n    #dx-woo-hero .dx-woo-hero-visual {\n        min-height: 345px;\n    }\n\n    #dx-woo-hero .dx-woo-hero-visual-frame {\n        inset:\n            5%\n            0\n            3%;\n\n        border-radius: 24px;\n    }\n\n    #dx-woo-hero .dx-woo-browser {\n        width: 95%;\n\n        border-radius: 16px;\n\n        box-shadow:\n            0 28px 65px rgba(2, 0, 20, 0.46),\n            0 0 0 5px rgba(145, 104, 239, 0.04);\n    }\n\n    #dx-woo-hero .dx-woo-browser-bar {\n        height: 32px;\n\n        padding:\n            0\n            10px;\n    }\n\n    #dx-woo-hero .dx-woo-browser-dot {\n        width: 6px;\n        height: 6px;\n    }\n\n    #dx-woo-hero .dx-woo-visual-badge {\n        min-height: 48px;\n\n        gap: 7px;\n\n        padding:\n            7px\n            9px;\n\n        border-radius: 12px;\n    }\n\n    #dx-woo-hero .dx-woo-visual-badge-one {\n        top: 0;\n        right: 0;\n    }\n\n    #dx-woo-hero .dx-woo-visual-badge-two {\n        left: 0;\n        bottom: 2%;\n    }\n\n    #dx-woo-hero .dx-woo-visual-badge-icon {\n        width: 31px;\n        height: 31px;\n        flex-basis: 31px;\n\n        border-radius: 9px;\n    }\n\n    #dx-woo-hero .dx-woo-visual-badge-icon svg {\n        width: 16px;\n        height: 16px;\n    }\n\n    #dx-woo-hero .dx-woo-visual-badge-label {\n        font-size: 6px;\n    }\n\n    #dx-woo-hero .dx-woo-visual-badge-value {\n        font-size: 8px;\n    }\n\n    #dx-woo-hero .dx-woo-hero-bottom {\n        margin-top: 22px;\n\n        grid-template-columns: 1fr;\n\n        border-radius: 15px;\n    }\n\n    #dx-woo-hero .dx-woo-hero-bottom-item {\n        min-height: 68px;\n\n        justify-content: flex-start;\n\n        padding:\n            12px\n            14px;\n    }\n\n    #dx-woo-hero .dx-woo-hero-bottom-item:not(:last-child) {\n        border-bottom: 1px solid rgba(255, 255, 255, 0.09);\n        border-right: 0;\n    }\n\n    #dx-woo-hero .dx-woo-hero-glow {\n        display: none;\n    }\n}\n\n@media (max-width: 390px) {\n    #dx-woo-hero .dx-woo-hero-features {\n        grid-template-columns: 1fr;\n    }\n\n    #dx-woo-hero .dx-woo-hero-visual {\n        min-height: 310px;\n    }\n\n    #dx-woo-hero .dx-woo-visual-badge {\n        transform: scale(0.9);\n    }\n\n    #dx-woo-hero .dx-woo-visual-badge-one {\n        right: -8px;\n    }\n\n    #dx-woo-hero .dx-woo-visual-badge-two {\n        left: -8px;\n    }\n}\n\n#dx-woo-hero a:focus-visible {\n    outline: 3px solid var(--dx-woo-yellow);\n    outline-offset: 4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    #dx-woo-hero *,\n    #dx-woo-hero *::before,\n    #dx-woo-hero *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-woo-hero\"\n    aria-labelledby=\"dx-woo-hero-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n    <div\n        class=\"dx-woo-hero-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <span\n        class=\"dx-woo-hero-glow dx-woo-hero-glow-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-woo-hero-glow dx-woo-hero-glow-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-woo-hero-main\">\n\n        <div class=\"dx-woo-hero-container\">\n\n            <div class=\"dx-woo-hero-layout\">\n\n                <div class=\"dx-woo-hero-content\">\n\n                    <span class=\"dx-woo-hero-eyebrow\">\n\n                        <span\n                            class=\"dx-woo-hero-eyebrow-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M3 5h2l2 11h10l2-8H7\"><\/path>\n                                <circle\n                                    cx=\"9\"\n                                    cy=\"20\"\n                                    r=\"1\"\n                                ><\/circle>\n                                <circle\n                                    cx=\"17\"\n                                    cy=\"20\"\n                                    r=\"1\"\n                                ><\/circle>\n                            <\/svg>\n                        <\/span>\n\n                        Professional WooCommerce Store\n\n                    <\/span>\n\n                    <h1\n                        id=\"dx-woo-hero-title\"\n                        class=\"dx-woo-hero-title\"\n                    >\n                        Launch Your Online Store\n                        <span>Faster and Smarter<\/span>\n                    <\/h1>\n\n                    <p class=\"dx-woo-hero-description\">\n                        We turn your idea into a professional online store\n                        powered by WooCommerce and WordPress, with a\n                        responsive shopping experience, product management,\n                        payment and shipping integrations, and everything\n                        you need to start selling online.\n                    <\/p>\n\n                    <div class=\"dx-woo-hero-actions\">\n\n                        <a\n                            href=\"https:\/\/dindex.net\/en\/contact\/\"\n                            class=\"dx-woo-hero-button dx-woo-hero-button-primary\"\n                        >\n                            <span>Request a Quote<\/span>\n\n                            <svg\n                                viewBox=\"0 0 24 24\"\n                                aria-hidden=\"true\"\n                            >\n                                <path d=\"M5 12h14\"><\/path>\n                                <path d=\"m13 6 6 6-6 6\"><\/path>\n                            <\/svg>\n                        <\/a>\n\n                        <a\n                            href=\"#dx-woo-projects\"\n                            class=\"dx-woo-hero-button dx-woo-hero-button-secondary\"\n                        >\n                            <span>Explore Our Work<\/span>\n\n                            <svg\n                                viewBox=\"0 0 24 24\"\n                                aria-hidden=\"true\"\n                            >\n                                <path d=\"M12 5v14\"><\/path>\n                                <path d=\"m18 13-6 6-6-6\"><\/path>\n                            <\/svg>\n                        <\/a>\n\n                    <\/div>\n\n                    <div class=\"dx-woo-hero-features\">\n\n                        <span class=\"dx-woo-hero-feature\">\n\n                            <span\n                                class=\"dx-woo-hero-feature-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            Responsive Across All Devices\n\n                        <\/span>\n\n                        <span class=\"dx-woo-hero-feature\">\n\n                            <span\n                                class=\"dx-woo-hero-feature-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            Payment & Shipping Integrations\n\n                        <\/span>\n\n                        <span class=\"dx-woo-hero-feature\">\n\n                            <span\n                                class=\"dx-woo-hero-feature-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            Complete Store Management\n\n                        <\/span>\n\n                    <\/div>\n\n                <\/div>\n\n                <div class=\"dx-woo-hero-visual\">\n\n                    <div\n                        class=\"dx-woo-hero-visual-frame\"\n                        aria-hidden=\"true\"\n                    ><\/div>\n\n                    <div class=\"dx-woo-browser\">\n\n                        <div\n                            class=\"dx-woo-browser-bar\"\n                            aria-hidden=\"true\"\n                        >\n                            <span class=\"dx-woo-browser-address\"><\/span>\n\n                            <span class=\"dx-woo-browser-dots\">\n                                <span class=\"dx-woo-browser-dot\"><\/span>\n                                <span class=\"dx-woo-browser-dot\"><\/span>\n                                <span class=\"dx-woo-browser-dot\"><\/span>\n                            <\/span>\n                        <\/div>\n\n                        <div class=\"dx-woo-browser-screen\">\n\n                            <img fetchpriority=\"high\"\n                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/05\/screenshot-2.png\"\n                                alt=\"WooCommerce product management dashboard\"\n                                width=\"2000\"\n                                height=\"1100\"\n                                fetchpriority=\"high\"\n                                decoding=\"async\"\n                            >\n\n                        <\/div>\n\n                    <\/div>\n\n                    <div class=\"dx-woo-visual-badge dx-woo-visual-badge-one\">\n\n                        <span\n                            class=\"dx-woo-visual-badge-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M3 5h2l2 11h10l2-8H7\"><\/path>\n                                <circle\n                                    cx=\"9\"\n                                    cy=\"20\"\n                                    r=\"1\"\n                                ><\/circle>\n                                <circle\n                                    cx=\"17\"\n                                    cy=\"20\"\n                                    r=\"1\"\n                                ><\/circle>\n                            <\/svg>\n                        <\/span>\n\n                        <span>\n                            <span class=\"dx-woo-visual-badge-label\">\n                                Store Platform\n                            <\/span>\n\n                            <span class=\"dx-woo-visual-badge-value\">\n                                WooCommerce\n                            <\/span>\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"dx-woo-visual-badge dx-woo-visual-badge-two\">\n\n                        <span\n                            class=\"dx-woo-visual-badge-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M12 3v18\"><\/path>\n                                <path d=\"M5 8h11a3 3 0 0 1 0 6H8a3 3 0 0 0 0 6h11\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span>\n                            <span class=\"dx-woo-visual-badge-label\">\n                                Integrated Management\n                            <\/span>\n\n                            <span class=\"dx-woo-visual-badge-value\">\n                                Products, Orders & Inventory\n                            <\/span>\n                        <\/span>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n            <div class=\"dx-woo-hero-bottom\">\n\n                <div class=\"dx-woo-hero-bottom-item\">\n\n                    <span\n                        class=\"dx-woo-hero-bottom-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M12 2v4\"><\/path>\n                            <path d=\"M12 18v4\"><\/path>\n                            <path d=\"m4.93 4.93 2.83 2.83\"><\/path>\n                            <path d=\"m16.24 16.24 2.83 2.83\"><\/path>\n                            <path d=\"M2 12h4\"><\/path>\n                            <path d=\"M18 12h4\"><\/path>\n                            <path d=\"m4.93 19.07 2.83-2.83\"><\/path>\n                            <path d=\"m16.24 7.76 2.83-2.83\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <span>\n                        <span class=\"dx-woo-hero-bottom-title\">\n                            Organized Launch\n                        <\/span>\n\n                        <span class=\"dx-woo-hero-bottom-text\">\n                            Store setup and testing before launch.\n                        <\/span>\n                    <\/span>\n\n                <\/div>\n\n                <div class=\"dx-woo-hero-bottom-item\">\n\n                    <span\n                        class=\"dx-woo-hero-bottom-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <rect\n                                x=\"3\"\n                                y=\"5\"\n                                width=\"18\"\n                                height=\"14\"\n                                rx=\"2\"\n                            ><\/rect>\n                            <path d=\"M3 10h18\"><\/path>\n                            <path d=\"M7 15h2\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <span>\n                        <span class=\"dx-woo-hero-bottom-title\">\n                            Payments & Shipping\n                        <\/span>\n\n                        <span class=\"dx-woo-hero-bottom-text\">\n                            Integration with suitable payment and shipping solutions.\n                        <\/span>\n                    <\/span>\n\n                <\/div>\n\n                <div class=\"dx-woo-hero-bottom-item\">\n\n                    <span\n                        class=\"dx-woo-hero-bottom-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <rect\n                                x=\"5\"\n                                y=\"2\"\n                                width=\"14\"\n                                height=\"20\"\n                                rx=\"2\"\n                            ><\/rect>\n                            <path d=\"M9 18h6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <span>\n                        <span class=\"dx-woo-hero-bottom-title\">\n                            Responsive Design\n                        <\/span>\n\n                        <span class=\"dx-woo-hero-bottom-text\">\n                            A clear shopping experience on mobile and desktop.\n                        <\/span>\n                    <\/span>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxWooHero() {\n        const section = document.getElementById(\n            \"dx-woo-hero\"\n        );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized = \"true\";\n\n        const widget = section.closest(\n            \".elementor-widget-html\"\n        );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-woo-hero-widget-fullwidth\"\n            );\n        }\n\n        const projectLink = section.querySelector(\n            'a[href=\"#dx-woo-projects\"]'\n        );\n\n        if (projectLink) {\n            projectLink.addEventListener(\n                \"click\",\n                function (event) {\n                    const target = document.getElementById(\n                        \"dx-woo-projects\"\n                    );\n\n                    if (!target) {\n                        return;\n                    }\n\n                    event.preventDefault();\n\n                    target.scrollIntoView({\n                        behavior: window.matchMedia(\n                            \"(prefers-reduced-motion: reduce)\"\n                        ).matches\n                            ? \"auto\"\n                            : \"smooth\",\n                        block: \"start\"\n                    });\n                }\n            );\n        }\n\n        if (\n            !(\"IntersectionObserver\" in window) ||\n            window.matchMedia(\n                \"(prefers-reduced-motion: reduce)\"\n            ).matches\n        ) {\n            return;\n        }\n\n        const content = section.querySelector(\n            \".dx-woo-hero-content\"\n        );\n\n        const visual = section.querySelector(\n            \".dx-woo-hero-visual\"\n        );\n\n        const bottom = section.querySelector(\n            \".dx-woo-hero-bottom\"\n        );\n\n        if (content) {\n            content.style.opacity = \"0\";\n            content.style.transform =\n                \"translateX(-32px)\";\n\n            content.style.transition =\n                \"opacity 0.75s ease, transform 0.75s ease\";\n        }\n\n        if (visual) {\n            visual.style.opacity = \"0\";\n            visual.style.transform =\n                \"translateX(34px)\";\n\n            visual.style.transition =\n                \"opacity 0.8s ease 0.1s, transform 0.8s ease 0.1s\";\n        }\n\n        if (bottom) {\n            bottom.style.opacity = \"0\";\n            bottom.style.transform =\n                \"translateY(24px)\";\n\n            bottom.style.transition =\n                \"opacity 0.7s ease 0.28s, transform 0.7s ease 0.28s\";\n        }\n\n        const observer = new IntersectionObserver(\n            function (entries, currentObserver) {\n                entries.forEach(function (entry) {\n                    if (!entry.isIntersecting) {\n                        return;\n                    }\n\n                    if (content) {\n                        content.style.opacity = \"1\";\n                        content.style.transform =\n                            \"translateX(0)\";\n                    }\n\n                    if (visual) {\n                        visual.style.opacity = \"1\";\n                        visual.style.transform =\n                            \"translateX(0)\";\n                    }\n\n                    if (bottom) {\n                        bottom.style.opacity = \"1\";\n                        bottom.style.transform =\n                            \"translateY(0)\";\n                    }\n\n                    currentObserver.unobserve(\n                        entry.target\n                    );\n                });\n            },\n            {\n                threshold: 0.12\n            }\n        );\n\n        observer.observe(section);\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxWooHero\n        );\n    } else {\n        initDxWooHero();\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1d4c5f8 e-con-full e-flex e-con e-parent\" data-id=\"1d4c5f8\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5ea0de1 elementor-widget elementor-widget-html\" data-id=\"5ea0de1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n.elementor-widget-html:has(#dx-woo-audience),\n.elementor-widget-html:has(#dx-woo-audience) > .elementor-widget-container,\n.dx-woo-audience-widget-fullwidth,\n.dx-woo-audience-widget-fullwidth > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n#dx-woo-audience,\n#dx-woo-audience *,\n#dx-woo-audience *::before,\n#dx-woo-audience *::after {\n    box-sizing: border-box;\n}\n\n#dx-woo-audience {\n    --dx-bg: #f7f5fb;\n    --dx-white: #ffffff;\n    --dx-dark: #180b35;\n    --dx-text: #6d6478;\n    --dx-muted: #958d9f;\n    --dx-purple: #6942d8;\n    --dx-purple-light: #9168ef;\n    --dx-yellow: #ffc441;\n    --dx-green: #54d696;\n    --dx-blue: #58a8f7;\n    --dx-border: rgba(105, 66, 216, 0.14);\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n    direction: ltr;\n\n    color: var(--dx-dark);\n\n    background:\n        radial-gradient(\n            circle at 8% 12%,\n            rgba(105, 66, 216, 0.08),\n            transparent 25%\n        ),\n        radial-gradient(\n            circle at 93% 88%,\n            rgba(145, 104, 239, 0.08),\n            transparent 28%\n        ),\n        var(--dx-bg);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-woo-audience a {\n    color: inherit;\n    text-decoration: none;\n}\n\n#dx-woo-audience .dx-woo-audience-grid-bg {\n    position: absolute;\n    z-index: -5;\n\n    inset: 0;\n\n    opacity: 0.15;\n\n    background-image:\n        linear-gradient(\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        );\n\n    background-size: 72px 72px;\n\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 18%,\n            transparent 82%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 18%,\n            transparent 82%\n        );\n\n    pointer-events: none;\n}\n\n#dx-woo-audience .dx-woo-audience-circle {\n    position: absolute;\n    z-index: -4;\n\n    border: 1px solid rgba(105, 66, 216, 0.08);\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-woo-audience .dx-woo-audience-circle-one {\n    top: -220px;\n    left: -190px;\n\n    width: 460px;\n    height: 460px;\n}\n\n#dx-woo-audience .dx-woo-audience-circle-two {\n    right: -230px;\n    bottom: -290px;\n\n    width: 540px;\n    height: 540px;\n}\n\n#dx-woo-audience .dx-woo-audience-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        94px\n        clamp(22px, 5vw, 90px)\n        100px;\n}\n\n#dx-woo-audience .dx-woo-audience-container {\n    width: min(1420px, 100%);\n\n    margin: 0 auto;\n}\n\n#dx-woo-audience .dx-woo-audience-header {\n    max-width: 860px;\n\n    margin: 0 auto 49px;\n\n    text-align: center;\n}\n\n#dx-woo-audience .dx-woo-audience-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    margin-bottom: 12px;\n\n    color: var(--dx-purple);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-woo-audience .dx-woo-audience-eyebrow::before,\n#dx-woo-audience .dx-woo-audience-eyebrow::after {\n    content: \"\";\n\n    width: 31px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-yellow),\n            var(--dx-purple-light)\n        );\n}\n\n#dx-woo-audience .dx-woo-audience-title {\n    margin: 0;\n\n    color: var(--dx-dark);\n\n    font-size: clamp(32px, 3.6vw, 50px);\n    font-weight: 900;\n    line-height: 1.55;\n    letter-spacing: -0.45px;\n\n    text-wrap: balance;\n}\n\n#dx-woo-audience .dx-woo-audience-title span {\n    color: var(--dx-purple);\n}\n\n#dx-woo-audience .dx-woo-audience-description {\n    max-width: 740px;\n\n    margin: 14px auto 0;\n\n    color: var(--dx-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n\n    text-wrap: pretty;\n}\n\n#dx-woo-audience .dx-woo-audience-layout {\n    display: grid;\n    grid-template-columns:\n        minmax(0, 0.78fr)\n        minmax(0, 1.22fr);\n\n    align-items: stretch;\n\n    gap: 25px;\n}\n\n#dx-woo-audience .dx-woo-audience-intro {\n    position: relative;\n    isolation: isolate;\n\n    min-height: 100%;\n\n    display: flex;\n    flex-direction: column;\n\n    overflow: hidden;\n\n    padding:\n        36px\n        32px;\n\n    border: 1px solid rgba(255, 255, 255, 0.14);\n    border-radius: 26px;\n\n    color: #ffffff;\n\n    background:\n        radial-gradient(\n            circle at 8% 8%,\n            rgba(145, 104, 239, 0.23),\n            transparent 31%\n        ),\n        linear-gradient(\n            145deg,\n            #1b0a3d,\n            #0c0225\n        );\n\n    box-shadow:\n        0 27px 68px rgba(40, 18, 84, 0.18);\n}\n\n#dx-woo-audience .dx-woo-audience-intro::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    right: -135px;\n    bottom: -175px;\n\n    width: 350px;\n    height: 350px;\n\n    border-radius: 50%;\n\n    background: rgba(255, 196, 65, 0.08);\n\n    filter: blur(95px);\n\n    pointer-events: none;\n}\n\n#dx-woo-audience .dx-woo-audience-intro-icon {\n    width: 72px;\n    height: 72px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid rgba(255, 255, 255, 0.14);\n    border-radius: 22px;\n\n    color: #180b35;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-yellow),\n            #ffd66e\n        );\n\n    box-shadow:\n        0 18px 38px rgba(255, 196, 65, 0.22);\n}\n\n#dx-woo-audience .dx-woo-audience-intro-icon svg {\n    width: 34px;\n    height: 34px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-audience .dx-woo-audience-intro-label {\n    display: block;\n\n    margin-top: 27px;\n\n    color: var(--dx-yellow);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-woo-audience .dx-woo-audience-intro-title {\n    margin:\n        8px\n        0\n        0;\n\n    color: #ffffff;\n\n    font-size: 29px;\n    font-weight: 900;\n    line-height: 1.55;\n\n    text-wrap: balance;\n}\n\n#dx-woo-audience .dx-woo-audience-intro-text {\n    margin:\n        13px\n        0\n        0;\n\n    color: rgba(255, 255, 255, 0.69);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n}\n\n#dx-woo-audience .dx-woo-audience-intro-list {\n    margin-top: 26px;\n    padding-top: 22px;\n\n    display: grid;\n\n    gap: 12px;\n\n    border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n#dx-woo-audience .dx-woo-audience-intro-item {\n    display: flex;\n    align-items: flex-start;\n\n    gap: 10px;\n\n    color: rgba(255, 255, 255, 0.72);\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.8;\n}\n\n#dx-woo-audience .dx-woo-audience-intro-check {\n    width: 25px;\n    height: 25px;\n    flex: 0 0 25px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 8px;\n\n    color: #7ce3b3;\n\n    background: rgba(84, 214, 150, 0.12);\n}\n\n#dx-woo-audience .dx-woo-audience-intro-check svg {\n    width: 13px;\n    height: 13px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2.3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-audience .dx-woo-audience-button {\n    width: 100%;\n    min-height: 52px;\n\n    margin-top: auto;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 9px;\n\n    padding:\n        0\n        20px;\n\n    border: 1px solid rgba(255, 255, 255, 0.17);\n    border-radius: 12px;\n\n    color: #180b35;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-yellow),\n            #ffd66e\n        );\n\n    box-shadow:\n        0 17px 37px rgba(255, 196, 65, 0.21);\n\n    font-size: 14px;\n    font-weight: 900;\n\n    transition:\n        transform 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-woo-audience .dx-woo-audience-button:hover,\n#dx-woo-audience .dx-woo-audience-button:focus-visible {\n    box-shadow:\n        0 23px 47px rgba(255, 196, 65, 0.3);\n\n    transform: translateY(-3px);\n}\n\n#dx-woo-audience .dx-woo-audience-button svg {\n    width: 18px;\n    height: 18px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-audience .dx-woo-audience-cards {\n    display: grid;\n    grid-template-columns:\n        repeat(2, minmax(0, 1fr));\n\n    gap: 18px;\n}\n\n#dx-woo-audience .dx-woo-audience-card {\n    position: relative;\n    isolation: isolate;\n\n    min-width: 0;\n    min-height: 250px;\n\n    display: flex;\n    flex-direction: column;\n\n    overflow: hidden;\n\n    padding:\n        27px\n        24px;\n\n    border: 1px solid var(--dx-border);\n    border-radius: 22px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.99),\n            rgba(250, 248, 254, 0.97)\n        );\n\n    box-shadow:\n        0 20px 52px rgba(40, 18, 84, 0.09),\n        inset 0 1px 0 rgba(255, 255, 255, 1);\n\n    transition:\n        transform 0.32s ease,\n        border-color 0.32s ease,\n        box-shadow 0.32s ease;\n}\n\n#dx-woo-audience .dx-woo-audience-card:hover,\n#dx-woo-audience .dx-woo-audience-card:focus-within {\n    border-color: rgba(105, 66, 216, 0.34);\n\n    box-shadow:\n        0 30px 68px rgba(40, 18, 84, 0.15);\n\n    transform: translateY(-7px);\n}\n\n#dx-woo-audience .dx-woo-audience-card::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    left: -100px;\n    bottom: -120px;\n\n    width: 240px;\n    height: 240px;\n\n    border-radius: 50%;\n\n    background: rgba(105, 66, 216, 0.09);\n\n    filter: blur(75px);\n\n    opacity: 0;\n\n    transition: opacity 0.32s ease;\n\n    pointer-events: none;\n}\n\n#dx-woo-audience .dx-woo-audience-card:hover::before,\n#dx-woo-audience .dx-woo-audience-card:focus-within::before {\n    opacity: 1;\n}\n\n#dx-woo-audience .dx-woo-audience-card-top {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n\n    gap: 15px;\n}\n\n#dx-woo-audience .dx-woo-audience-card-icon {\n    width: 58px;\n    height: 58px;\n    flex: 0 0 58px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 17px;\n\n    color: var(--dx-purple);\n\n    background: rgba(105, 66, 216, 0.1);\n\n    box-shadow:\n        inset 0 0 0 1px rgba(105, 66, 216, 0.07);\n\n    transition:\n        transform 0.3s ease,\n        background 0.3s ease;\n}\n\n#dx-woo-audience .dx-woo-audience-card:nth-child(2)\n    .dx-woo-audience-card-icon {\n    color: #936500;\n\n    background: rgba(255, 196, 65, 0.15);\n}\n\n#dx-woo-audience .dx-woo-audience-card:nth-child(3)\n    .dx-woo-audience-card-icon {\n    color: #16845a;\n\n    background: rgba(84, 214, 150, 0.13);\n}\n\n#dx-woo-audience .dx-woo-audience-card:nth-child(4)\n    .dx-woo-audience-card-icon {\n    color: #2172bd;\n\n    background: rgba(88, 168, 247, 0.13);\n}\n\n#dx-woo-audience .dx-woo-audience-card:hover\n    .dx-woo-audience-card-icon {\n    transform:\n        translateY(-4px)\n        rotate(-4deg);\n}\n\n#dx-woo-audience .dx-woo-audience-card-icon svg {\n    width: 28px;\n    height: 28px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-audience .dx-woo-audience-card-number {\n    color: rgba(105, 66, 216, 0.16);\n\n    font-size: 25px;\n    font-weight: 900;\n    line-height: 1;\n}\n\n#dx-woo-audience .dx-woo-audience-card-title {\n    margin:\n        21px\n        0\n        0;\n\n    color: var(--dx-dark);\n\n    font-size: 20px;\n    font-weight: 900;\n    line-height: 1.6;\n\n    text-wrap: balance;\n}\n\n#dx-woo-audience .dx-woo-audience-card-text {\n    margin:\n        8px\n        0\n        0;\n\n    color: var(--dx-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.95;\n\n    text-wrap: pretty;\n}\n\n#dx-woo-audience .dx-woo-audience-card-note {\n    margin-top: auto;\n    padding-top: 17px;\n\n    display: flex;\n    align-items: center;\n\n    gap: 8px;\n\n    border-top: 1px solid rgba(105, 66, 216, 0.09);\n\n    color: var(--dx-muted);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.6;\n}\n\n#dx-woo-audience .dx-woo-audience-card-note-dot {\n    width: 8px;\n    height: 8px;\n    flex: 0 0 8px;\n\n    border-radius: 50%;\n\n    background: var(--dx-purple);\n\n    box-shadow:\n        0 0 0 5px rgba(105, 66, 216, 0.08);\n}\n\n#dx-woo-audience .dx-woo-audience-card:nth-child(2)\n    .dx-woo-audience-card-note-dot {\n    background: var(--dx-yellow);\n\n    box-shadow:\n        0 0 0 5px rgba(255, 196, 65, 0.1);\n}\n\n#dx-woo-audience .dx-woo-audience-card:nth-child(3)\n    .dx-woo-audience-card-note-dot {\n    background: var(--dx-green);\n\n    box-shadow:\n        0 0 0 5px rgba(84, 214, 150, 0.1);\n}\n\n#dx-woo-audience .dx-woo-audience-card:nth-child(4)\n    .dx-woo-audience-card-note-dot {\n    background: var(--dx-blue);\n\n    box-shadow:\n        0 0 0 5px rgba(88, 168, 247, 0.1);\n}\n\n@media (max-width: 980px) {\n    #dx-woo-audience .dx-woo-audience-main {\n        padding:\n            76px\n            28px\n            82px;\n    }\n\n    #dx-woo-audience .dx-woo-audience-layout {\n        grid-template-columns: 1fr;\n    }\n\n    #dx-woo-audience .dx-woo-audience-intro {\n        min-height: 0;\n    }\n\n    #dx-woo-audience .dx-woo-audience-button {\n        margin-top: 28px;\n    }\n}\n\n@media (max-width: 680px) {\n    #dx-woo-audience .dx-woo-audience-main {\n        padding:\n            59px\n            16px\n            65px;\n    }\n\n    #dx-woo-audience .dx-woo-audience-header {\n        margin-bottom: 34px;\n    }\n\n    #dx-woo-audience .dx-woo-audience-eyebrow {\n        font-size: 14px;\n    }\n\n    #dx-woo-audience .dx-woo-audience-eyebrow::before,\n    #dx-woo-audience .dx-woo-audience-eyebrow::after {\n        width: 22px;\n    }\n\n    #dx-woo-audience .dx-woo-audience-title {\n        font-size: clamp(27px, 8.3vw, 36px);\n        line-height: 1.65;\n        letter-spacing: -0.2px;\n    }\n\n    #dx-woo-audience .dx-woo-audience-description {\n        margin-top: 10px;\n\n        font-size: 14px;\n        line-height: 2;\n    }\n\n    #dx-woo-audience .dx-woo-audience-layout {\n        gap: 15px;\n    }\n\n    #dx-woo-audience .dx-woo-audience-intro {\n        padding:\n            25px\n            20px;\n\n        border-radius: 20px;\n    }\n\n    #dx-woo-audience .dx-woo-audience-intro-icon {\n        width: 60px;\n        height: 60px;\n\n        border-radius: 18px;\n    }\n\n    #dx-woo-audience .dx-woo-audience-intro-icon svg {\n        width: 29px;\n        height: 29px;\n    }\n\n    #dx-woo-audience .dx-woo-audience-intro-label {\n        margin-top: 21px;\n\n        font-size: 14px;\n    }\n\n    #dx-woo-audience .dx-woo-audience-intro-title {\n        margin-top: 6px;\n\n        font-size: 23px;\n        line-height: 1.6;\n    }\n\n    #dx-woo-audience .dx-woo-audience-intro-text {\n        margin-top: 9px;\n\n        font-size: 14px;\n        line-height: 1.95;\n    }\n\n    #dx-woo-audience .dx-woo-audience-intro-item {\n        font-size: 14px;\n    }\n\n    #dx-woo-audience .dx-woo-audience-button {\n        font-size: 14px;\n    }\n\n    #dx-woo-audience .dx-woo-audience-cards {\n        grid-template-columns: 1fr;\n\n        gap: 12px;\n    }\n\n    #dx-woo-audience .dx-woo-audience-card {\n        min-height: 0;\n\n        padding:\n            21px\n            18px;\n\n        border-radius: 18px;\n    }\n\n    #dx-woo-audience .dx-woo-audience-card-icon {\n        width: 52px;\n        height: 52px;\n        flex-basis: 52px;\n\n        border-radius: 15px;\n    }\n\n    #dx-woo-audience .dx-woo-audience-card-icon svg {\n        width: 25px;\n        height: 25px;\n    }\n\n    #dx-woo-audience .dx-woo-audience-card-title {\n        margin-top: 17px;\n\n        font-size: 18px;\n    }\n\n    #dx-woo-audience .dx-woo-audience-card-text {\n        font-size: 14px;\n    }\n\n    #dx-woo-audience .dx-woo-audience-card-note {\n        margin-top: 17px;\n\n        font-size: 14px;\n    }\n\n    #dx-woo-audience .dx-woo-audience-circle {\n        display: none;\n    }\n}\n\n#dx-woo-audience a:focus-visible {\n    outline: 3px solid var(--dx-yellow);\n    outline-offset: 4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    #dx-woo-audience *,\n    #dx-woo-audience *::before,\n    #dx-woo-audience *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-woo-audience\"\n    aria-labelledby=\"dx-woo-audience-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n    <div\n        class=\"dx-woo-audience-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <span\n        class=\"dx-woo-audience-circle dx-woo-audience-circle-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-woo-audience-circle dx-woo-audience-circle-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-woo-audience-main\">\n\n        <div class=\"dx-woo-audience-container\">\n\n            <header class=\"dx-woo-audience-header\">\n\n                <span class=\"dx-woo-audience-eyebrow\">\n                    Solutions Built Around Your Business\n                <\/span>\n\n                <h2\n                    id=\"dx-woo-audience-title\"\n                    class=\"dx-woo-audience-title\"\n                >\n                    Who Is Our\n                    <span>WooCommerce Store Design Service For?<\/span>\n                <\/h2>\n\n                <p class=\"dx-woo-audience-description\">\n                    WooCommerce stores are ideal for businesses that need\n                    a flexible platform to manage products, orders, payments,\n                    and shipping, with the ability to expand the store and\n                    add new functionality as the business grows.\n                <\/p>\n\n            <\/header>\n\n            <div class=\"dx-woo-audience-layout\">\n\n                <aside class=\"dx-woo-audience-intro\">\n\n                    <span\n                        class=\"dx-woo-audience-intro-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M3 5h2l2 11h10l2-8H7\"><\/path>\n                            <circle\n                                cx=\"9\"\n                                cy=\"20\"\n                                r=\"1\"\n                            ><\/circle>\n                            <circle\n                                cx=\"17\"\n                                cy=\"20\"\n                                r=\"1\"\n                            ><\/circle>\n                        <\/svg>\n                    <\/span>\n\n                    <span class=\"dx-woo-audience-intro-label\">\n                        A Store Built Around Your Plan\n                    <\/span>\n\n                    <h3 class=\"dx-woo-audience-intro-title\">\n                        Start Selling With a Structured, Scalable Store\n                    <\/h3>\n\n                    <p class=\"dx-woo-audience-intro-text\">\n                        Whether you are launching a new business or improving\n                        an existing store, we configure the store around your\n                        products, target audience, and required payment and\n                        shipping process.\n                    <\/p>\n\n                    <div class=\"dx-woo-audience-intro-list\">\n\n                        <div class=\"dx-woo-audience-intro-item\">\n\n                            <span\n                                class=\"dx-woo-audience-intro-check\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span>\n                                Responsive design for mobile, tablet,\n                                and desktop devices.\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-woo-audience-intro-item\">\n\n                            <span\n                                class=\"dx-woo-audience-intro-check\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span>\n                                Manage products, inventory, and orders\n                                from one dashboard.\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-woo-audience-intro-item\">\n\n                            <span\n                                class=\"dx-woo-audience-intro-check\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span>\n                                Connect suitable payment and shipping\n                                solutions for your business.\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/contact\/\"\n                        class=\"dx-woo-audience-button\"\n                    >\n                        <span>Discuss Your Store Idea<\/span>\n\n                        <svg\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n                    <\/a>\n\n                <\/aside>\n\n                <div class=\"dx-woo-audience-cards\">\n\n                    <article class=\"dx-woo-audience-card\">\n\n                        <div class=\"dx-woo-audience-card-top\">\n\n                            <span\n                                class=\"dx-woo-audience-card-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M4 21V7l8-4 8 4v14\"><\/path>\n                                    <path d=\"M8 10h8\"><\/path>\n                                    <path d=\"M8 14h8\"><\/path>\n                                    <path d=\"M9 21v-3h6v3\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span class=\"dx-woo-audience-card-number\">\n                                01\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-woo-audience-card-title\">\n                            Brands\n                        <\/h3>\n\n                        <p class=\"dx-woo-audience-card-text\">\n                            For brands that want to present their products\n                            through a professional visual identity and provide\n                            a clear shopping experience that helps customers\n                            browse products and complete their orders.\n                        <\/p>\n\n                        <div class=\"dx-woo-audience-card-note\">\n                            <span class=\"dx-woo-audience-card-note-dot\"><\/span>\n                            A store that reflects your brand identity\n                        <\/div>\n\n                    <\/article>\n\n                    <article class=\"dx-woo-audience-card\">\n\n                        <div class=\"dx-woo-audience-card-top\">\n\n                            <span\n                                class=\"dx-woo-audience-card-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M6 2h12l3 6-9 14L3 8Z\"><\/path>\n                                    <path d=\"M3 8h18\"><\/path>\n                                    <path d=\"m8 8 4 14 4-14\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span class=\"dx-woo-audience-card-number\">\n                                02\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-woo-audience-card-title\">\n                            Product Sellers\n                        <\/h3>\n\n                        <p class=\"dx-woo-audience-card-text\">\n                            For businesses selling physical or digital\n                            products that need to organize categories,\n                            pricing, inventory, and orders within one\n                            easy-to-manage system.\n                        <\/p>\n\n                        <div class=\"dx-woo-audience-card-note\">\n                            <span class=\"dx-woo-audience-card-note-dot\"><\/span>\n                            Organized product management\n                        <\/div>\n\n                    <\/article>\n\n                    <article class=\"dx-woo-audience-card\">\n\n                        <div class=\"dx-woo-audience-card-top\">\n\n                            <span\n                                class=\"dx-woo-audience-card-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <rect\n                                        x=\"3\"\n                                        y=\"4\"\n                                        width=\"18\"\n                                        height=\"16\"\n                                        rx=\"2\"\n                                    ><\/rect>\n                                    <path d=\"M7 8h4\"><\/path>\n                                    <path d=\"M7 12h10\"><\/path>\n                                    <path d=\"M7 16h7\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span class=\"dx-woo-audience-card-number\">\n                                03\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-woo-audience-card-title\">\n                            Companies & Organizations\n                        <\/h3>\n\n                        <p class=\"dx-woo-audience-card-text\">\n                            For companies that need an independent online\n                            sales channel with customer and order management,\n                            plus the ability to add integrations that support\n                            their operational processes.\n                        <\/p>\n\n                        <div class=\"dx-woo-audience-card-note\">\n                            <span class=\"dx-woo-audience-card-note-dot\"><\/span>\n                            A scalable, integration-ready platform\n                        <\/div>\n\n                    <\/article>\n\n                    <article class=\"dx-woo-audience-card\">\n\n                        <div class=\"dx-woo-audience-card-top\">\n\n                            <span\n                                class=\"dx-woo-audience-card-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M4 19V5\"><\/path>\n                                    <path d=\"M4 19h16\"><\/path>\n                                    <path d=\"m7 15 4-4 3 3 5-6\"><\/path>\n                                    <path d=\"M16 8h3v3\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span class=\"dx-woo-audience-card-number\">\n                                04\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-woo-audience-card-title\">\n                            Startups\n                        <\/h3>\n\n                        <p class=\"dx-woo-audience-card-text\">\n                            For startups that want to launch a flexible\n                            online store with the essential functionality\n                            first, then add new features as the product\n                            range and order volume grow.\n                        <\/p>\n\n                        <div class=\"dx-woo-audience-card-note\">\n                            <span class=\"dx-woo-audience-card-note-dot\"><\/span>\n                            A flexible start built for growth\n                        <\/div>\n\n                    <\/article>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxWooAudience() {\n        const section = document.getElementById(\n            \"dx-woo-audience\"\n        );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized = \"true\";\n\n        const widget = section.closest(\n            \".elementor-widget-html\"\n        );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-woo-audience-widget-fullwidth\"\n            );\n        }\n\n        if (\n            !(\"IntersectionObserver\" in window) ||\n            window.matchMedia(\n                \"(prefers-reduced-motion: reduce)\"\n            ).matches\n        ) {\n            return;\n        }\n\n        const intro = section.querySelector(\n            \".dx-woo-audience-intro\"\n        );\n\n        const cards = section.querySelectorAll(\n            \".dx-woo-audience-card\"\n        );\n\n        if (intro) {\n            intro.style.opacity = \"0\";\n            intro.style.transform =\n                \"translateX(-30px)\";\n\n            intro.style.transition =\n                \"opacity 0.7s ease, transform 0.7s ease\";\n        }\n\n        cards.forEach(function (card, index) {\n            card.style.opacity = \"0\";\n            card.style.transform =\n                \"translateY(26px)\";\n\n            card.style.transition =\n                \"opacity 0.62s ease \" +\n                (0.08 + index * 0.08) +\n                \"s, transform 0.62s ease \" +\n                (0.08 + index * 0.08) +\n                \"s\";\n        });\n\n        const observer = new IntersectionObserver(\n            function (entries, currentObserver) {\n                entries.forEach(function (entry) {\n                    if (!entry.isIntersecting) {\n                        return;\n                    }\n\n                    if (intro) {\n                        intro.style.opacity = \"1\";\n                        intro.style.transform =\n                            \"translateX(0)\";\n                    }\n\n                    cards.forEach(function (card) {\n                        card.style.opacity = \"1\";\n                        card.style.transform =\n                            \"translateY(0)\";\n                    });\n\n                    currentObserver.unobserve(\n                        entry.target\n                    );\n                });\n            },\n            {\n                threshold: 0.12\n            }\n        );\n\n        observer.observe(section);\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxWooAudience\n        );\n    } else {\n        initDxWooAudience();\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-86e5ddf e-con-full e-flex e-con e-parent\" data-id=\"86e5ddf\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-67cfba5 elementor-widget elementor-widget-html\" data-id=\"67cfba5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n.elementor-widget-html:has(#dx-woo-benefits),\n.elementor-widget-html:has(#dx-woo-benefits) > .elementor-widget-container,\n.dx-woo-benefits-widget-fullwidth,\n.dx-woo-benefits-widget-fullwidth > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n#dx-woo-benefits,\n#dx-woo-benefits *,\n#dx-woo-benefits *::before,\n#dx-woo-benefits *::after {\n    box-sizing: border-box;\n}\n\n#dx-woo-benefits {\n    --dx-dark: #09001f;\n    --dx-dark-secondary: #17053d;\n    --dx-white: #ffffff;\n    --dx-text: rgba(255, 255, 255, 0.72);\n    --dx-muted: rgba(255, 255, 255, 0.5);\n    --dx-purple: #6942d8;\n    --dx-purple-light: #9168ef;\n    --dx-yellow: #ffc441;\n    --dx-yellow-light: #ffd66e;\n    --dx-green: #54d696;\n    --dx-blue: #58a8f7;\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n    direction: ltr;\n\n    color: var(--dx-white);\n\n    background:\n        radial-gradient(\n            circle at 10% 12%,\n            rgba(145, 104, 239, 0.22),\n            transparent 27%\n        ),\n        radial-gradient(\n            circle at 91% 87%,\n            rgba(105, 66, 216, 0.18),\n            transparent 30%\n        ),\n        linear-gradient(\n            145deg,\n            var(--dx-dark-secondary),\n            var(--dx-dark)\n        );\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-woo-benefits a {\n    color: inherit;\n    text-decoration: none;\n}\n\n#dx-woo-benefits .dx-woo-benefits-grid-bg {\n    position: absolute;\n    z-index: -6;\n\n    inset: 0;\n\n    opacity: 0.1;\n\n    background-image:\n        linear-gradient(\n            rgba(255, 255, 255, 0.045) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(255, 255, 255, 0.045) 1px,\n            transparent 1px\n        );\n\n    background-size: 72px 72px;\n\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 16%,\n            transparent 83%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 16%,\n            transparent 83%\n        );\n\n    pointer-events: none;\n}\n\n#dx-woo-benefits .dx-woo-benefits-glow {\n    position: absolute;\n    z-index: -5;\n\n    border-radius: 50%;\n\n    filter: blur(110px);\n\n    pointer-events: none;\n}\n\n#dx-woo-benefits .dx-woo-benefits-glow-one {\n    top: -150px;\n    right: 28%;\n\n    width: 420px;\n    height: 420px;\n\n    background: rgba(145, 104, 239, 0.18);\n}\n\n#dx-woo-benefits .dx-woo-benefits-glow-two {\n    left: -180px;\n    bottom: -210px;\n\n    width: 480px;\n    height: 420px;\n\n    background: rgba(255, 196, 65, 0.055);\n}\n\n#dx-woo-benefits .dx-woo-benefits-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        94px\n        clamp(22px, 5vw, 90px)\n        100px;\n}\n\n#dx-woo-benefits .dx-woo-benefits-container {\n    width: min(1420px, 100%);\n\n    margin: 0 auto;\n}\n\n#dx-woo-benefits .dx-woo-benefits-header {\n    max-width: 880px;\n\n    margin: 0 auto 50px;\n\n    text-align: center;\n}\n\n#dx-woo-benefits .dx-woo-benefits-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    margin-bottom: 12px;\n\n    color: var(--dx-yellow);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-woo-benefits .dx-woo-benefits-eyebrow::before,\n#dx-woo-benefits .dx-woo-benefits-eyebrow::after {\n    content: \"\";\n\n    width: 31px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-yellow),\n            var(--dx-purple-light)\n        );\n}\n\n#dx-woo-benefits .dx-woo-benefits-title {\n    margin: 0;\n\n    color: var(--dx-white);\n\n    font-size: clamp(33px, 3.7vw, 51px);\n    font-weight: 900;\n    line-height: 1.55;\n    letter-spacing: -0.45px;\n\n    text-wrap: balance;\n}\n\n#dx-woo-benefits .dx-woo-benefits-title span {\n    color: var(--dx-yellow);\n}\n\n#dx-woo-benefits .dx-woo-benefits-description {\n    max-width: 740px;\n\n    margin: 14px auto 0;\n\n    color: var(--dx-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n\n    text-wrap: pretty;\n}\n\n#dx-woo-benefits .dx-woo-benefits-layout {\n    display: grid;\n    grid-template-columns:\n        repeat(4, minmax(0, 1fr));\n\n    gap: 18px;\n}\n\n#dx-woo-benefits .dx-woo-benefit-card {\n    position: relative;\n    isolation: isolate;\n\n    min-width: 0;\n    min-height: 265px;\n\n    display: flex;\n    flex-direction: column;\n\n    overflow: hidden;\n\n    padding:\n        26px\n        23px;\n\n    border: 1px solid rgba(255, 255, 255, 0.12);\n    border-radius: 22px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.085),\n            rgba(255, 255, 255, 0.035)\n        );\n\n    box-shadow:\n        0 22px 55px rgba(2, 0, 20, 0.25),\n        inset 0 1px 0 rgba(255, 255, 255, 0.055);\n\n    -webkit-backdrop-filter: blur(10px);\n    backdrop-filter: blur(10px);\n\n    transition:\n        transform 0.34s ease,\n        border-color 0.34s ease,\n        background 0.34s ease,\n        box-shadow 0.34s ease;\n}\n\n#dx-woo-benefits .dx-woo-benefit-card:hover,\n#dx-woo-benefits .dx-woo-benefit-card:focus-within {\n    border-color: rgba(145, 104, 239, 0.48);\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(145, 104, 239, 0.16),\n            rgba(255, 255, 255, 0.045)\n        );\n\n    box-shadow:\n        0 32px 74px rgba(2, 0, 20, 0.35),\n        inset 0 1px 0 rgba(255, 255, 255, 0.075);\n\n    transform: translateY(-7px);\n}\n\n#dx-woo-benefits .dx-woo-benefit-card::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    right: -100px;\n    bottom: -125px;\n\n    width: 240px;\n    height: 240px;\n\n    border-radius: 50%;\n\n    background: rgba(105, 66, 216, 0.13);\n\n    filter: blur(75px);\n\n    opacity: 0;\n\n    transition: opacity 0.34s ease;\n\n    pointer-events: none;\n}\n\n#dx-woo-benefits .dx-woo-benefit-card:hover::before,\n#dx-woo-benefits .dx-woo-benefit-card:focus-within::before {\n    opacity: 1;\n}\n\n#dx-woo-benefits .dx-woo-benefit-top {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n\n    gap: 14px;\n}\n\n#dx-woo-benefits .dx-woo-benefit-icon {\n    width: 58px;\n    height: 58px;\n    flex: 0 0 58px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid rgba(255, 255, 255, 0.12);\n    border-radius: 17px;\n\n    color: #d6c9ff;\n\n    background: rgba(145, 104, 239, 0.13);\n\n    box-shadow:\n        inset 0 1px 0 rgba(255, 255, 255, 0.06);\n\n    transition:\n        transform 0.3s ease,\n        color 0.3s ease,\n        background 0.3s ease;\n}\n\n#dx-woo-benefits .dx-woo-benefit-card:nth-child(2)\n    .dx-woo-benefit-icon,\n#dx-woo-benefits .dx-woo-benefit-card:nth-child(6)\n    .dx-woo-benefit-icon {\n    color: var(--dx-yellow);\n\n    background: rgba(255, 196, 65, 0.11);\n}\n\n#dx-woo-benefits .dx-woo-benefit-card:nth-child(3)\n    .dx-woo-benefit-icon,\n#dx-woo-benefits .dx-woo-benefit-card:nth-child(7)\n    .dx-woo-benefit-icon {\n    color: #7ce3b3;\n\n    background: rgba(84, 214, 150, 0.11);\n}\n\n#dx-woo-benefits .dx-woo-benefit-card:nth-child(4)\n    .dx-woo-benefit-icon,\n#dx-woo-benefits .dx-woo-benefit-card:nth-child(8)\n    .dx-woo-benefit-icon {\n    color: #8bc9ff;\n\n    background: rgba(88, 168, 247, 0.11);\n}\n\n#dx-woo-benefits .dx-woo-benefit-card:hover\n    .dx-woo-benefit-icon {\n    transform:\n        translateY(-4px)\n        rotate(-4deg);\n}\n\n#dx-woo-benefits .dx-woo-benefit-icon svg {\n    width: 28px;\n    height: 28px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-benefits .dx-woo-benefit-number {\n    color: rgba(255, 255, 255, 0.18);\n\n    font-size: 23px;\n    font-weight: 900;\n    line-height: 1;\n}\n\n#dx-woo-benefits .dx-woo-benefit-title {\n    margin:\n        20px\n        0\n        0;\n\n    color: var(--dx-white);\n\n    font-size: 19px;\n    font-weight: 900;\n    line-height: 1.6;\n\n    text-wrap: balance;\n}\n\n#dx-woo-benefits .dx-woo-benefit-text {\n    margin:\n        8px\n        0\n        0;\n\n    color: var(--dx-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.95;\n\n    text-wrap: pretty;\n}\n\n#dx-woo-benefits .dx-woo-benefit-bottom {\n    margin-top: auto;\n    padding-top: 18px;\n\n    display: flex;\n    align-items: center;\n\n    gap: 9px;\n\n    border-top: 1px solid rgba(255, 255, 255, 0.09);\n\n    color: var(--dx-muted);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.7;\n}\n\n#dx-woo-benefits .dx-woo-benefit-dot {\n    width: 8px;\n    height: 8px;\n    flex: 0 0 8px;\n\n    border-radius: 50%;\n\n    background: var(--dx-purple-light);\n\n    box-shadow:\n        0 0 0 5px rgba(145, 104, 239, 0.1);\n}\n\n#dx-woo-benefits .dx-woo-benefit-card:nth-child(2)\n    .dx-woo-benefit-dot,\n#dx-woo-benefits .dx-woo-benefit-card:nth-child(6)\n    .dx-woo-benefit-dot {\n    background: var(--dx-yellow);\n\n    box-shadow:\n        0 0 0 5px rgba(255, 196, 65, 0.1);\n}\n\n#dx-woo-benefits .dx-woo-benefit-card:nth-child(3)\n    .dx-woo-benefit-dot,\n#dx-woo-benefits .dx-woo-benefit-card:nth-child(7)\n    .dx-woo-benefit-dot {\n    background: var(--dx-green);\n\n    box-shadow:\n        0 0 0 5px rgba(84, 214, 150, 0.1);\n}\n\n#dx-woo-benefits .dx-woo-benefit-card:nth-child(4)\n    .dx-woo-benefit-dot,\n#dx-woo-benefits .dx-woo-benefit-card:nth-child(8)\n    .dx-woo-benefit-dot {\n    background: var(--dx-blue);\n\n    box-shadow:\n        0 0 0 5px rgba(88, 168, 247, 0.1);\n}\n\n#dx-woo-benefits .dx-woo-benefits-bottom {\n    max-width: 1180px;\n\n    margin:\n        30px\n        auto\n        0;\n\n    display: grid;\n    grid-template-columns:\n        minmax(0, 1fr)\n        auto;\n\n    align-items: center;\n\n    gap: 24px;\n\n    padding:\n        24px\n        26px;\n\n    border: 1px solid rgba(255, 255, 255, 0.13);\n    border-radius: 20px;\n\n    background: rgba(255, 255, 255, 0.055);\n\n    box-shadow:\n        0 18px 44px rgba(2, 0, 20, 0.21);\n\n    -webkit-backdrop-filter: blur(10px);\n    backdrop-filter: blur(10px);\n}\n\n#dx-woo-benefits .dx-woo-benefits-bottom-copy {\n    min-width: 0;\n\n    display: flex;\n    align-items: center;\n\n    gap: 14px;\n}\n\n#dx-woo-benefits .dx-woo-benefits-bottom-icon {\n    width: 48px;\n    height: 48px;\n    flex: 0 0 48px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 14px;\n\n    color: var(--dx-yellow);\n\n    background: rgba(255, 196, 65, 0.1);\n}\n\n#dx-woo-benefits .dx-woo-benefits-bottom-icon svg {\n    width: 24px;\n    height: 24px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.9;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-benefits .dx-woo-benefits-bottom-title {\n    margin: 0;\n\n    color: var(--dx-white);\n\n    font-size: 15px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-woo-benefits .dx-woo-benefits-bottom-text {\n    margin:\n        4px\n        0\n        0;\n\n    color: var(--dx-muted);\n\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1.8;\n}\n\n#dx-woo-benefits .dx-woo-benefits-button {\n    min-width: 220px;\n    min-height: 50px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 9px;\n\n    padding:\n        0\n        22px;\n\n    border: 1px solid rgba(255, 255, 255, 0.18);\n    border-radius: 12px;\n\n    color: #180b35;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-yellow),\n            var(--dx-yellow-light)\n        );\n\n    box-shadow:\n        0 16px 34px rgba(255, 196, 65, 0.21);\n\n    font-size: 14px;\n    font-weight: 900;\n    white-space: nowrap;\n\n    transition:\n        transform 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-woo-benefits .dx-woo-benefits-button:hover,\n#dx-woo-benefits .dx-woo-benefits-button:focus-visible {\n    box-shadow:\n        0 22px 44px rgba(255, 196, 65, 0.3);\n\n    transform: translateY(-3px);\n}\n\n#dx-woo-benefits .dx-woo-benefits-button svg {\n    width: 17px;\n    height: 17px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n@media (max-width: 1100px) {\n    #dx-woo-benefits .dx-woo-benefits-layout {\n        grid-template-columns:\n            repeat(2, minmax(0, 1fr));\n    }\n}\n\n@media (max-width: 980px) {\n    #dx-woo-benefits .dx-woo-benefits-main {\n        padding:\n            76px\n            28px\n            82px;\n    }\n\n    #dx-woo-benefits .dx-woo-benefits-bottom {\n        grid-template-columns: 1fr;\n\n        text-align: center;\n    }\n\n    #dx-woo-benefits .dx-woo-benefits-bottom-copy {\n        flex-direction: column;\n    }\n\n    #dx-woo-benefits .dx-woo-benefits-button {\n        width: 100%;\n    }\n}\n\n@media (max-width: 680px) {\n    #dx-woo-benefits .dx-woo-benefits-main {\n        padding:\n            59px\n            16px\n            65px;\n    }\n\n    #dx-woo-benefits .dx-woo-benefits-header {\n        margin-bottom: 35px;\n    }\n\n    #dx-woo-benefits .dx-woo-benefits-eyebrow {\n        font-size: 14px;\n    }\n\n    #dx-woo-benefits .dx-woo-benefits-eyebrow::before,\n    #dx-woo-benefits .dx-woo-benefits-eyebrow::after {\n        width: 22px;\n    }\n\n    #dx-woo-benefits .dx-woo-benefits-title {\n        font-size: clamp(27px, 8.3vw, 36px);\n        line-height: 1.65;\n        letter-spacing: -0.2px;\n    }\n\n    #dx-woo-benefits .dx-woo-benefits-description {\n        margin-top: 10px;\n\n        font-size: 14px;\n        line-height: 2;\n    }\n\n    #dx-woo-benefits .dx-woo-benefits-layout {\n        grid-template-columns: 1fr;\n\n        gap: 12px;\n    }\n\n    #dx-woo-benefits .dx-woo-benefit-card {\n        min-height: 0;\n\n        padding:\n            21px\n            18px;\n\n        border-radius: 18px;\n    }\n\n    #dx-woo-benefits .dx-woo-benefit-icon {\n        width: 52px;\n        height: 52px;\n        flex-basis: 52px;\n\n        border-radius: 15px;\n    }\n\n    #dx-woo-benefits .dx-woo-benefit-icon svg {\n        width: 25px;\n        height: 25px;\n    }\n\n    #dx-woo-benefits .dx-woo-benefit-title {\n        margin-top: 17px;\n\n        font-size: 18px;\n    }\n\n    #dx-woo-benefits .dx-woo-benefit-text {\n        font-size: 14px;\n    }\n\n    #dx-woo-benefits .dx-woo-benefit-bottom {\n        margin-top: 17px;\n\n        font-size: 14px;\n    }\n\n    #dx-woo-benefits .dx-woo-benefits-bottom {\n        margin-top: 18px;\n\n        gap: 16px;\n\n        padding:\n            19px\n            15px;\n\n        border-radius: 16px;\n    }\n\n    #dx-woo-benefits .dx-woo-benefits-bottom-title {\n        font-size: 14px;\n    }\n\n    #dx-woo-benefits .dx-woo-benefits-bottom-text {\n        font-size: 14px;\n    }\n\n    #dx-woo-benefits .dx-woo-benefits-button {\n        min-width: 0;\n        min-height: 48px;\n\n        font-size: 14px;\n    }\n\n    #dx-woo-benefits .dx-woo-benefits-glow {\n        display: none;\n    }\n}\n\n#dx-woo-benefits a:focus-visible {\n    outline: 3px solid var(--dx-yellow);\n    outline-offset: 4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    #dx-woo-benefits *,\n    #dx-woo-benefits *::before,\n    #dx-woo-benefits *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-woo-benefits\"\n    aria-labelledby=\"dx-woo-benefits-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n    <div\n        class=\"dx-woo-benefits-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <span\n        class=\"dx-woo-benefits-glow dx-woo-benefits-glow-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-woo-benefits-glow dx-woo-benefits-glow-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-woo-benefits-main\">\n\n        <div class=\"dx-woo-benefits-container\">\n\n            <header class=\"dx-woo-benefits-header\">\n\n                <span class=\"dx-woo-benefits-eyebrow\">\n                    A Flexible Platform Built to Scale\n                <\/span>\n\n                <h2\n                    id=\"dx-woo-benefits-title\"\n                    class=\"dx-woo-benefits-title\"\n                >\n                    Why Choose\n                    <span>WooCommerce?<\/span>\n                <\/h2>\n\n                <p class=\"dx-woo-benefits-description\">\n                    WooCommerce gives you full ownership of your online store,\n                    with flexibility in design, product and order management,\n                    payment and shipping integrations, and the ability to add\n                    new functionality as your business grows.\n                <\/p>\n\n            <\/header>\n\n            <div class=\"dx-woo-benefits-layout\">\n\n                <article class=\"dx-woo-benefit-card\">\n\n                    <div class=\"dx-woo-benefit-top\">\n\n                        <span\n                            class=\"dx-woo-benefit-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"m13 2-9 12h7l-1 8 9-12h-7Z\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"dx-woo-benefit-number\">\n                            01\n                        <\/span>\n\n                    <\/div>\n\n                    <h3 class=\"dx-woo-benefit-title\">\n                        Faster Store Launch\n                    <\/h3>\n\n                    <p class=\"dx-woo-benefit-text\">\n                        Your WooCommerce store is configured around your\n                        business requirements so you can start selling\n                        through a clear and organized setup.\n                    <\/p>\n\n                    <div class=\"dx-woo-benefit-bottom\">\n                        <span class=\"dx-woo-benefit-dot\"><\/span>\n                        A clear starting point for your store\n                    <\/div>\n\n                <\/article>\n\n                <article class=\"dx-woo-benefit-card\">\n\n                    <div class=\"dx-woo-benefit-top\">\n\n                        <span\n                            class=\"dx-woo-benefit-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <rect\n                                    x=\"5\"\n                                    y=\"2\"\n                                    width=\"14\"\n                                    height=\"20\"\n                                    rx=\"2\"\n                                ><\/rect>\n                                <path d=\"M9 18h6\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"dx-woo-benefit-number\">\n                            02\n                        <\/span>\n\n                    <\/div>\n\n                    <h3 class=\"dx-woo-benefit-title\">\n                        Responsive Across Devices\n                    <\/h3>\n\n                    <p class=\"dx-woo-benefit-text\">\n                        A responsive design that works smoothly across\n                        mobile, tablet, and desktop, with a clear browsing\n                        and shopping experience.\n                    <\/p>\n\n                    <div class=\"dx-woo-benefit-bottom\">\n                        <span class=\"dx-woo-benefit-dot\"><\/span>\n                        Responsive shopping experience\n                    <\/div>\n\n                <\/article>\n\n                <article class=\"dx-woo-benefit-card\">\n\n                    <div class=\"dx-woo-benefit-top\">\n\n                        <span\n                            class=\"dx-woo-benefit-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <rect\n                                    x=\"3\"\n                                    y=\"5\"\n                                    width=\"18\"\n                                    height=\"14\"\n                                    rx=\"2\"\n                                ><\/rect>\n                                <path d=\"M3 10h18\"><\/path>\n                                <path d=\"M7 15h2\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"dx-woo-benefit-number\">\n                            03\n                        <\/span>\n\n                    <\/div>\n\n                    <h3 class=\"dx-woo-benefit-title\">\n                        Payment Gateways\n                    <\/h3>\n\n                    <p class=\"dx-woo-benefit-text\">\n                        Connect suitable local and international payment\n                        gateways to make collecting customer payments\n                        easier and more convenient.\n                    <\/p>\n\n                    <div class=\"dx-woo-benefit-bottom\">\n                        <span class=\"dx-woo-benefit-dot\"><\/span>\n                        Payment options suited to your business\n                    <\/div>\n\n                <\/article>\n\n                <article class=\"dx-woo-benefit-card\">\n\n                    <div class=\"dx-woo-benefit-top\">\n\n                        <span\n                            class=\"dx-woo-benefit-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M12 3a9 9 0 1 0 9 9c0-1.1-.9-2-2-2h-2.5a2.5 2.5 0 0 1-2.5-2.5V5c0-1.1-.9-2-2-2Z\"><\/path>\n                                <circle\n                                    cx=\"7.5\"\n                                    cy=\"10.5\"\n                                    r=\"1\"\n                                ><\/circle>\n                                <circle\n                                    cx=\"10\"\n                                    cy=\"7\"\n                                    r=\"1\"\n                                ><\/circle>\n                                <circle\n                                    cx=\"7\"\n                                    cy=\"15\"\n                                    r=\"1\"\n                                ><\/circle>\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"dx-woo-benefit-number\">\n                            04\n                        <\/span>\n\n                    <\/div>\n\n                    <h3 class=\"dx-woo-benefit-title\">\n                        Custom Store Design\n                    <\/h3>\n\n                    <p class=\"dx-woo-benefit-text\">\n                        A structured, responsive interface that reflects\n                        your brand identity and fits your audience and\n                        product range.\n                    <\/p>\n\n                    <div class=\"dx-woo-benefit-bottom\">\n                        <span class=\"dx-woo-benefit-dot\"><\/span>\n                        Design that reflects your brand\n                    <\/div>\n\n                <\/article>\n\n                <article class=\"dx-woo-benefit-card\">\n\n                    <div class=\"dx-woo-benefit-top\">\n\n                        <span\n                            class=\"dx-woo-benefit-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M8 3v4\"><\/path>\n                                <path d=\"M16 3v4\"><\/path>\n                                <path d=\"M7 7h10v4a5 5 0 0 1-10 0Z\"><\/path>\n                                <path d=\"M12 16v5\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"dx-woo-benefit-number\">\n                            05\n                        <\/span>\n\n                    <\/div>\n\n                    <h3 class=\"dx-woo-benefit-title\">\n                        Features Added as Needed\n                    <\/h3>\n\n                    <p class=\"dx-woo-benefit-text\">\n                        Add new functionality and integrations based on\n                        your store requirements and future business growth.\n                    <\/p>\n\n                    <div class=\"dx-woo-benefit-bottom\">\n                        <span class=\"dx-woo-benefit-dot\"><\/span>\n                        Built for future expansion\n                    <\/div>\n\n                <\/article>\n\n                <article class=\"dx-woo-benefit-card\">\n\n                    <div class=\"dx-woo-benefit-top\">\n\n                        <span\n                            class=\"dx-woo-benefit-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M4 7h16\"><\/path>\n                                <path d=\"M6 3h12l2 4-2 4H6L4 7Z\"><\/path>\n                                <path d=\"M6 11v10\"><\/path>\n                                <path d=\"M18 11v10\"><\/path>\n                                <path d=\"M9 15h6\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"dx-woo-benefit-number\">\n                            06\n                        <\/span>\n\n                    <\/div>\n\n                    <h3 class=\"dx-woo-benefit-title\">\n                        Inventory Management\n                    <\/h3>\n\n                    <p class=\"dx-woo-benefit-text\">\n                        Manage products, quantities, inventory, and orders\n                        from one clear administration dashboard.\n                    <\/p>\n\n                    <div class=\"dx-woo-benefit-bottom\">\n                        <span class=\"dx-woo-benefit-dot\"><\/span>\n                        Control products and orders\n                    <\/div>\n\n                <\/article>\n\n                <article class=\"dx-woo-benefit-card\">\n\n                    <div class=\"dx-woo-benefit-top\">\n\n                        <span\n                            class=\"dx-woo-benefit-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M4 4h16v16H4Z\"><\/path>\n                                <path d=\"M8 8h8\"><\/path>\n                                <path d=\"M8 12h5\"><\/path>\n                                <path d=\"M8 16h3\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"dx-woo-benefit-number\">\n                            07\n                        <\/span>\n\n                    <\/div>\n\n                    <h3 class=\"dx-woo-benefit-title\">\n                        No Monthly Platform Fee\n                    <\/h3>\n\n                    <p class=\"dx-woo-benefit-text\">\n                        WooCommerce itself does not require a monthly\n                        subscription fee simply for using it as your\n                        e-commerce platform.\n                    <\/p>\n\n                    <div class=\"dx-woo-benefit-bottom\">\n                        <span class=\"dx-woo-benefit-dot\"><\/span>\n                        Full ownership of your store\n                    <\/div>\n\n                <\/article>\n\n                <article class=\"dx-woo-benefit-card\">\n\n                    <div class=\"dx-woo-benefit-top\">\n\n                        <span\n                            class=\"dx-woo-benefit-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <rect\n                                    x=\"5\"\n                                    y=\"2\"\n                                    width=\"14\"\n                                    height=\"20\"\n                                    rx=\"2\"\n                                ><\/rect>\n                                <path d=\"M8 6h8\"><\/path>\n                                <path d=\"M9 17h6\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"dx-woo-benefit-number\">\n                            08\n                        <\/span>\n\n                    <\/div>\n\n                    <h3 class=\"dx-woo-benefit-title\">\n                        Manage Your Store From Mobile\n                    <\/h3>\n\n                    <p class=\"dx-woo-benefit-text\">\n                        Monitor orders, products, and store activity\n                        through the WooCommerce mobile app while you\n                        are away from your desk.\n                    <\/p>\n\n                    <div class=\"dx-woo-benefit-bottom\">\n                        <span class=\"dx-woo-benefit-dot\"><\/span>\n                        Manage your store on the go\n                    <\/div>\n\n                <\/article>\n\n            <\/div>\n\n            <div class=\"dx-woo-benefits-bottom\">\n\n                <div class=\"dx-woo-benefits-bottom-copy\">\n\n                    <span\n                        class=\"dx-woo-benefits-bottom-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M3 5h2l2 11h10l2-8H7\"><\/path>\n                            <circle\n                                cx=\"9\"\n                                cy=\"20\"\n                                r=\"1\"\n                            ><\/circle>\n                            <circle\n                                cx=\"17\"\n                                cy=\"20\"\n                                r=\"1\"\n                            ><\/circle>\n                        <\/svg>\n                    <\/span>\n\n                    <div>\n\n                        <h3 class=\"dx-woo-benefits-bottom-title\">\n                            Is WooCommerce the Right Fit for Your Store?\n                        <\/h3>\n\n                        <p class=\"dx-woo-benefits-bottom-text\">\n                            Share your product type, payment and shipping\n                            requirements, and the features you need so we can\n                            help determine the right solution.\n                        <\/p>\n\n                    <\/div>\n\n                <\/div>\n\n                <a\n                    href=\"https:\/\/dindex.net\/en\/contact\/\"\n                    class=\"dx-woo-benefits-button\"\n                >\n                    <span>Discuss Your Store Requirements<\/span>\n\n                    <svg\n                        viewBox=\"0 0 24 24\"\n                        aria-hidden=\"true\"\n                    >\n                        <path d=\"M5 12h14\"><\/path>\n                        <path d=\"m13 6 6 6-6 6\"><\/path>\n                    <\/svg>\n                <\/a>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxWooBenefits() {\n        const section = document.getElementById(\n            \"dx-woo-benefits\"\n        );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized = \"true\";\n\n        const widget = section.closest(\n            \".elementor-widget-html\"\n        );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-woo-benefits-widget-fullwidth\"\n            );\n        }\n\n        if (\n            !(\"IntersectionObserver\" in window) ||\n            window.matchMedia(\n                \"(prefers-reduced-motion: reduce)\"\n            ).matches\n        ) {\n            return;\n        }\n\n        const cards = section.querySelectorAll(\n            \".dx-woo-benefit-card\"\n        );\n\n        const bottom = section.querySelector(\n            \".dx-woo-benefits-bottom\"\n        );\n\n        cards.forEach(function (card, index) {\n            card.style.opacity = \"0\";\n            card.style.transform =\n                \"translateY(28px)\";\n\n            card.style.transition =\n                \"opacity 0.62s ease \" +\n                (index * 0.06) +\n                \"s, transform 0.62s ease \" +\n                (index * 0.06) +\n                \"s\";\n        });\n\n        if (bottom) {\n            bottom.style.opacity = \"0\";\n            bottom.style.transform =\n                \"translateY(22px)\";\n\n            bottom.style.transition =\n                \"opacity 0.65s ease 0.28s, transform 0.65s ease 0.28s\";\n        }\n\n        const observer = new IntersectionObserver(\n            function (entries, currentObserver) {\n                entries.forEach(function (entry) {\n                    if (!entry.isIntersecting) {\n                        return;\n                    }\n\n                    cards.forEach(function (card) {\n                        card.style.opacity = \"1\";\n                        card.style.transform =\n                            \"translateY(0)\";\n                    });\n\n                    if (bottom) {\n                        bottom.style.opacity = \"1\";\n                        bottom.style.transform =\n                            \"translateY(0)\";\n                    }\n\n                    currentObserver.unobserve(\n                        entry.target\n                    );\n                });\n            },\n            {\n                threshold: 0.1\n            }\n        );\n\n        observer.observe(section);\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxWooBenefits\n        );\n    } else {\n        initDxWooBenefits();\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6633987 e-con-full e-flex e-con e-parent\" data-id=\"6633987\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-84af792 elementor-widget elementor-widget-html\" data-id=\"84af792\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n.elementor-widget-html:has(#dx-woo-design-showcase),\n.elementor-widget-html:has(#dx-woo-design-showcase) > .elementor-widget-container,\n.dx-woo-design-showcase-fullwidth,\n.dx-woo-design-showcase-fullwidth > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n}\n\n#dx-woo-design-showcase,\n#dx-woo-design-showcase *,\n#dx-woo-design-showcase *::before,\n#dx-woo-design-showcase *::after {\n    box-sizing: border-box;\n}\n\n#dx-woo-design-showcase {\n    --dx-bg: #f7f5fb;\n    --dx-white: #ffffff;\n    --dx-dark: #180b35;\n    --dx-text: #6d6478;\n    --dx-muted: #958d9f;\n    --dx-purple: #6942d8;\n    --dx-purple-light: #9168ef;\n    --dx-yellow: #ffc441;\n    --dx-green: #54d696;\n    --dx-border: rgba(105, 66, 216, 0.14);\n\n    position: relative;\n    isolation: isolate;\n    width: 100vw;\n    max-width: 100vw;\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n    overflow: hidden;\n    direction: ltr;\n    color: var(--dx-dark);\n    background:\n        radial-gradient(\n            circle at 5% 10%,\n            rgba(105, 66, 216, 0.09),\n            transparent 25%\n        ),\n        radial-gradient(\n            circle at 95% 90%,\n            rgba(255, 196, 65, 0.08),\n            transparent 28%\n        ),\n        var(--dx-bg);\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-woo-design-showcase button,\n#dx-woo-design-showcase a {\n    font-family: inherit;\n}\n\n#dx-woo-design-showcase a {\n    color: inherit;\n    text-decoration: none;\n}\n\n#dx-woo-design-showcase img {\n    display: block;\n    max-width: 100%;\n}\n\n#dx-woo-design-showcase .dx-design-grid-bg {\n    position: absolute;\n    z-index: -5;\n    inset: 0;\n    opacity: 0.14;\n    background-image:\n        linear-gradient(\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        );\n    background-size: 72px 72px;\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 15%,\n            transparent 82%\n        );\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 15%,\n            transparent 82%\n        );\n    pointer-events: none;\n}\n\n#dx-woo-design-showcase .dx-design-main {\n    position: relative;\n    z-index: 2;\n    width: 100%;\n    padding:\n        94px\n        clamp(22px, 5vw, 90px)\n        100px;\n}\n\n#dx-woo-design-showcase .dx-design-container {\n    width: min(1420px, 100%);\n    margin: 0 auto;\n}\n\n#dx-woo-design-showcase .dx-design-header {\n    max-width: 870px;\n    margin: 0 auto 42px;\n    text-align: center;\n}\n\n#dx-woo-design-showcase .dx-design-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n    margin-bottom: 12px;\n    color: var(--dx-purple);\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-woo-design-showcase .dx-design-eyebrow::before,\n#dx-woo-design-showcase .dx-design-eyebrow::after {\n    content: \"\";\n    width: 31px;\n    height: 2px;\n    border-radius: 999px;\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-yellow),\n            var(--dx-purple-light)\n        );\n}\n\n#dx-woo-design-showcase .dx-design-title {\n    margin: 0;\n    color: var(--dx-dark);\n    font-size: clamp(32px, 3.6vw, 50px);\n    font-weight: 900;\n    line-height: 1.55;\n    letter-spacing: -0.45px;\n    text-wrap: balance;\n}\n\n#dx-woo-design-showcase .dx-design-title span {\n    color: var(--dx-purple);\n}\n\n#dx-woo-design-showcase .dx-design-description {\n    max-width: 740px;\n    margin: 14px auto 0;\n    color: var(--dx-text);\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n    text-wrap: pretty;\n}\n\n#dx-woo-design-showcase .dx-design-tabs {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-wrap: wrap;\n    gap: 9px;\n    margin-bottom: 26px;\n}\n\n#dx-woo-design-showcase .dx-design-tab {\n    min-height: 43px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 0 17px;\n    border: 1px solid var(--dx-border);\n    border-radius: 999px;\n    color: var(--dx-text);\n    background: rgba(255, 255, 255, 0.84);\n    box-shadow: 0 8px 22px rgba(40, 18, 84, 0.05);\n    font-size: 14px;\n    font-weight: 900;\n    cursor: pointer;\n    transition:\n        color 0.25s ease,\n        background 0.25s ease,\n        border-color 0.25s ease,\n        transform 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-woo-design-showcase .dx-design-tab:hover,\n#dx-woo-design-showcase .dx-design-tab:focus-visible {\n    color: var(--dx-purple);\n    border-color: rgba(105, 66, 216, 0.32);\n    transform: translateY(-2px);\n}\n\n#dx-woo-design-showcase .dx-design-tab.is-active {\n    color: #ffffff;\n    border-color: var(--dx-purple);\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-purple),\n            var(--dx-purple-light)\n        );\n    box-shadow:\n        0 13px 30px rgba(105, 66, 216, 0.22);\n}\n\n#dx-woo-design-showcase .dx-design-tab-icon {\n    width: 23px;\n    height: 23px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 7px;\n    color: var(--dx-purple);\n    background: rgba(105, 66, 216, 0.09);\n}\n\n#dx-woo-design-showcase .dx-design-tab.is-active\n    .dx-design-tab-icon {\n    color: var(--dx-yellow);\n    background: rgba(255, 255, 255, 0.12);\n}\n\n#dx-woo-design-showcase .dx-design-tab-icon svg {\n    width: 13px;\n    height: 13px;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-design-showcase .dx-design-stage {\n    position: relative;\n    overflow: hidden;\n    border: 1px solid rgba(105, 66, 216, 0.15);\n    border-radius: 30px;\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.99),\n            rgba(245, 242, 251, 0.98)\n        );\n    box-shadow:\n        0 32px 80px rgba(40, 18, 84, 0.13),\n        inset 0 1px 0 #ffffff;\n}\n\n#dx-woo-design-showcase .dx-design-stage-top {\n    min-height: 58px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 18px;\n    padding: 0 22px;\n    border-bottom: 1px solid rgba(105, 66, 216, 0.1);\n    background: rgba(255, 255, 255, 0.88);\n}\n\n#dx-woo-design-showcase .dx-design-browser-dots {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    direction: ltr;\n}\n\n#dx-woo-design-showcase .dx-design-browser-dot {\n    width: 9px;\n    height: 9px;\n    border-radius: 50%;\n}\n\n#dx-woo-design-showcase .dx-design-browser-dot:nth-child(1) {\n    background: #ff6e6e;\n}\n\n#dx-woo-design-showcase .dx-design-browser-dot:nth-child(2) {\n    background: var(--dx-yellow);\n}\n\n#dx-woo-design-showcase .dx-design-browser-dot:nth-child(3) {\n    background: var(--dx-green);\n}\n\n#dx-woo-design-showcase .dx-design-browser-address {\n    width: min(430px, 52%);\n    height: 14px;\n    border-radius: 999px;\n    background: rgba(105, 66, 216, 0.08);\n}\n\n#dx-woo-design-showcase .dx-design-stage-body {\n    display: grid;\n    grid-template-columns:\n        minmax(0, 1.42fr)\n        minmax(320px, 0.58fr);\n    min-height: 590px;\n}\n\n#dx-woo-design-showcase .dx-design-preview {\n    position: relative;\n    min-width: 0;\n    overflow: hidden;\n    background: #eae6f1;\n}\n\n#dx-woo-design-showcase .dx-design-slide {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    visibility: hidden;\n    transform: scale(1.025);\n    transition:\n        opacity 0.5s ease,\n        visibility 0.5s ease,\n        transform 0.65s ease;\n}\n\n#dx-woo-design-showcase .dx-design-slide.is-active {\n    opacity: 1;\n    visibility: visible;\n    transform: scale(1);\n}\n\n#dx-woo-design-showcase .dx-design-slide img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: top center;\n    background: #ffffff;\n}\n\n#dx-woo-design-showcase .dx-design-info {\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    padding:\n        46px\n        37px\n        38px;\n    border-left: 1px solid rgba(105, 66, 216, 0.1);\n    background:\n        radial-gradient(\n            circle at 100% 0,\n            rgba(105, 66, 216, 0.1),\n            transparent 35%\n        ),\n        #ffffff;\n}\n\n#dx-woo-design-showcase .dx-design-info-number {\n    color: rgba(105, 66, 216, 0.18);\n    font-size: 42px;\n    font-weight: 900;\n    line-height: 1;\n    direction: ltr;\n}\n\n#dx-woo-design-showcase .dx-design-info-label {\n    display: block;\n    margin-top: 27px;\n    color: var(--dx-purple);\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-woo-design-showcase .dx-design-info-title {\n    margin: 7px 0 0;\n    color: var(--dx-dark);\n    font-size: 30px;\n    font-weight: 900;\n    line-height: 1.55;\n    text-wrap: balance;\n}\n\n#dx-woo-design-showcase .dx-design-info-text {\n    margin: 13px 0 0;\n    color: var(--dx-text);\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n}\n\n#dx-woo-design-showcase .dx-design-info-list {\n    margin-top: 24px;\n    padding-top: 21px;\n    display: grid;\n    gap: 11px;\n    border-top: 1px solid rgba(105, 66, 216, 0.1);\n}\n\n#dx-woo-design-showcase .dx-design-info-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 9px;\n    color: var(--dx-text);\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.8;\n}\n\n#dx-woo-design-showcase .dx-design-info-check {\n    width: 24px;\n    height: 24px;\n    flex: 0 0 24px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    color: #16845a;\n    background: rgba(84, 214, 150, 0.13);\n}\n\n#dx-woo-design-showcase .dx-design-info-check svg {\n    width: 12px;\n    height: 12px;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2.3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-design-showcase .dx-design-stage-footer {\n    margin-top: auto;\n    padding-top: 26px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 13px;\n}\n\n#dx-woo-design-showcase .dx-design-counter {\n    color: var(--dx-muted);\n    font-size: 14px;\n    font-weight: 900;\n    direction: ltr;\n}\n\n#dx-woo-design-showcase .dx-design-arrows {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    direction: ltr;\n}\n\n#dx-woo-design-showcase .dx-design-arrow {\n    width: 45px;\n    height: 45px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border: 1px solid var(--dx-border);\n    border-radius: 13px;\n    color: var(--dx-purple);\n    background: #ffffff;\n    box-shadow: 0 10px 25px rgba(40, 18, 84, 0.08);\n    cursor: pointer;\n    transition:\n        color 0.25s ease,\n        background 0.25s ease,\n        transform 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-woo-design-showcase .dx-design-arrow:hover,\n#dx-woo-design-showcase .dx-design-arrow:focus-visible {\n    color: #ffffff;\n    background: var(--dx-purple);\n    box-shadow:\n        0 14px 30px rgba(105, 66, 216, 0.22);\n    transform: translateY(-2px);\n}\n\n#dx-woo-design-showcase .dx-design-arrow svg {\n    width: 20px;\n    height: 20px;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-design-showcase .dx-design-bottom {\n    margin-top: 24px;\n    display: grid;\n    grid-template-columns:\n        minmax(0, 1fr)\n        auto;\n    align-items: center;\n    gap: 25px;\n    padding:\n        24px\n        27px;\n    border: 1px solid var(--dx-border);\n    border-radius: 20px;\n    background: rgba(255, 255, 255, 0.86);\n    box-shadow:\n        0 17px 42px rgba(40, 18, 84, 0.07);\n}\n\n#dx-woo-design-showcase .dx-design-bottom-copy {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n}\n\n#dx-woo-design-showcase .dx-design-bottom-icon {\n    width: 49px;\n    height: 49px;\n    flex: 0 0 49px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 15px;\n    color: var(--dx-purple);\n    background: rgba(105, 66, 216, 0.09);\n}\n\n#dx-woo-design-showcase .dx-design-bottom-icon svg {\n    width: 24px;\n    height: 24px;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.9;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-design-showcase .dx-design-bottom-title {\n    margin: 0;\n    color: var(--dx-dark);\n    font-size: 15px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-woo-design-showcase .dx-design-bottom-text {\n    margin: 4px 0 0;\n    color: var(--dx-muted);\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1.8;\n}\n\n#dx-woo-design-showcase .dx-design-button {\n    min-width: 218px;\n    min-height: 50px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 9px;\n    padding: 0 22px;\n    border: 1px solid rgba(105, 66, 216, 0.12);\n    border-radius: 12px;\n    color: #ffffff;\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-purple),\n            var(--dx-purple-light)\n        );\n    box-shadow:\n        0 16px 34px rgba(105, 66, 216, 0.2);\n    font-size: 14px;\n    font-weight: 900;\n    white-space: nowrap;\n    transition:\n        transform 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-woo-design-showcase .dx-design-button:hover,\n#dx-woo-design-showcase .dx-design-button:focus-visible {\n    box-shadow:\n        0 22px 44px rgba(105, 66, 216, 0.29);\n    transform: translateY(-3px);\n}\n\n#dx-woo-design-showcase .dx-design-button svg {\n    width: 17px;\n    height: 17px;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n@media (max-width: 1050px) {\n    #dx-woo-design-showcase .dx-design-stage-body {\n        grid-template-columns: 1fr;\n    }\n\n    #dx-woo-design-showcase .dx-design-preview {\n        min-height: 520px;\n    }\n\n    #dx-woo-design-showcase .dx-design-info {\n        border-top: 1px solid rgba(105, 66, 216, 0.1);\n        border-left: 0;\n    }\n}\n\n@media (max-width: 980px) {\n    #dx-woo-design-showcase .dx-design-main {\n        padding:\n            76px\n            28px\n            82px;\n    }\n\n    #dx-woo-design-showcase .dx-design-bottom {\n        grid-template-columns: 1fr;\n        text-align: center;\n    }\n\n    #dx-woo-design-showcase .dx-design-bottom-copy {\n        flex-direction: column;\n    }\n\n    #dx-woo-design-showcase .dx-design-button {\n        width: 100%;\n    }\n}\n\n@media (max-width: 680px) {\n    #dx-woo-design-showcase .dx-design-main {\n        padding:\n            59px\n            16px\n            65px;\n    }\n\n    #dx-woo-design-showcase .dx-design-header {\n        margin-bottom: 31px;\n    }\n\n    #dx-woo-design-showcase .dx-design-eyebrow {\n        font-size: 14px;\n    }\n\n    #dx-woo-design-showcase .dx-design-eyebrow::before,\n    #dx-woo-design-showcase .dx-design-eyebrow::after {\n        width: 22px;\n    }\n\n    #dx-woo-design-showcase .dx-design-title {\n        font-size: clamp(27px, 8.3vw, 36px);\n        line-height: 1.65;\n        letter-spacing: -0.2px;\n    }\n\n    #dx-woo-design-showcase .dx-design-description {\n        margin-top: 10px;\n        font-size: 14px;\n        line-height: 2;\n    }\n\n    #dx-woo-design-showcase .dx-design-tabs {\n        justify-content: flex-start;\n        flex-wrap: nowrap;\n        overflow-x: auto;\n        padding-bottom: 7px;\n        scrollbar-width: none;\n    }\n\n    #dx-woo-design-showcase .dx-design-tabs::-webkit-scrollbar {\n        display: none;\n    }\n\n    #dx-woo-design-showcase .dx-design-tab {\n        flex: 0 0 auto;\n        min-height: 40px;\n        padding: 0 14px;\n        font-size: 14px;\n    }\n\n    #dx-woo-design-showcase .dx-design-stage {\n        border-radius: 20px;\n    }\n\n    #dx-woo-design-showcase .dx-design-stage-top {\n        min-height: 45px;\n        padding: 0 13px;\n    }\n\n    #dx-woo-design-showcase .dx-design-browser-dot {\n        width: 7px;\n        height: 7px;\n    }\n\n    #dx-woo-design-showcase .dx-design-browser-address {\n        width: 58%;\n        height: 10px;\n    }\n\n    #dx-woo-design-showcase .dx-design-preview {\n        min-height: 305px;\n    }\n\n    #dx-woo-design-showcase .dx-design-info {\n        padding:\n            27px\n            20px\n            23px;\n    }\n\n    #dx-woo-design-showcase .dx-design-info-number {\n        font-size: 33px;\n    }\n\n    #dx-woo-design-showcase .dx-design-info-label {\n        margin-top: 20px;\n        font-size: 14px;\n    }\n\n    #dx-woo-design-showcase .dx-design-info-title {\n        font-size: 23px;\n        line-height: 1.6;\n    }\n\n    #dx-woo-design-showcase .dx-design-info-text {\n        font-size: 14px;\n        line-height: 1.95;\n    }\n\n    #dx-woo-design-showcase .dx-design-info-item {\n        font-size: 14px;\n    }\n\n    #dx-woo-design-showcase .dx-design-stage-footer {\n        padding-top: 21px;\n    }\n\n    #dx-woo-design-showcase .dx-design-counter {\n        font-size: 14px;\n    }\n\n    #dx-woo-design-showcase .dx-design-arrow {\n        width: 40px;\n        height: 40px;\n    }\n\n    #dx-woo-design-showcase .dx-design-bottom {\n        margin-top: 15px;\n        padding:\n            20px\n            16px;\n        border-radius: 16px;\n    }\n\n    #dx-woo-design-showcase .dx-design-bottom-title {\n        font-size: 14px;\n    }\n\n    #dx-woo-design-showcase .dx-design-bottom-text {\n        font-size: 14px;\n    }\n\n    #dx-woo-design-showcase .dx-design-button {\n        font-size: 14px;\n    }\n}\n\n#dx-woo-design-showcase button:focus-visible,\n#dx-woo-design-showcase a:focus-visible {\n    outline: 3px solid var(--dx-yellow);\n    outline-offset: 4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    #dx-woo-design-showcase *,\n    #dx-woo-design-showcase *::before,\n    #dx-woo-design-showcase *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-woo-design-showcase\"\n    aria-labelledby=\"dx-design-showcase-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n    <div\n        class=\"dx-design-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <div class=\"dx-design-main\">\n\n        <div class=\"dx-design-container\">\n\n            <header class=\"dx-design-header\">\n\n                <span class=\"dx-design-eyebrow\">\n                    Store Designs\n                <\/span>\n\n                <h2\n                    id=\"dx-design-showcase-title\"\n                    class=\"dx-design-title\"\n                >\n                    Ready-Made Store Themes\n                    <span>for Different Industries<\/span>\n                <\/h2>\n\n                <p class=\"dx-design-description\">\n                    We select a suitable design for your industry and\n                    customize it to reflect your brand, while organizing\n                    the storefront, product pages, and shopping experience\n                    around the way your customers browse and buy.\n                <\/p>\n\n            <\/header>\n\n            <div\n                class=\"dx-design-tabs\"\n                role=\"tablist\"\n                aria-label=\"WooCommerce store design industries\"\n            >\n\n                <button\n                    type=\"button\"\n                    class=\"dx-design-tab is-active\"\n                    data-index=\"0\"\n                    role=\"tab\"\n                    aria-selected=\"true\"\n                >\n                    <span class=\"dx-design-tab-icon\" aria-hidden=\"true\">\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M6 3h12l3 5-9 13L3 8Z\"><\/path>\n                            <path d=\"M3 8h18\"><\/path>\n                        <\/svg>\n                    <\/span>\n                    Fashion\n                <\/button>\n\n                <button\n                    type=\"button\"\n                    class=\"dx-design-tab\"\n                    data-index=\"1\"\n                    role=\"tab\"\n                    aria-selected=\"false\"\n                >\n                    <span class=\"dx-design-tab-icon\" aria-hidden=\"true\">\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M4 4h16v16H4Z\"><\/path>\n                            <path d=\"M8 4v16\"><\/path>\n                            <path d=\"M4 10h16\"><\/path>\n                        <\/svg>\n                    <\/span>\n                    Food\n                <\/button>\n\n                <button\n                    type=\"button\"\n                    class=\"dx-design-tab\"\n                    data-index=\"2\"\n                    role=\"tab\"\n                    aria-selected=\"false\"\n                >\n                    <span class=\"dx-design-tab-icon\" aria-hidden=\"true\">\n                        <path><\/path>\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M8 3h8\"><\/path>\n                            <path d=\"M9 3v4l-3 4v9h12v-9l-3-4V3\"><\/path>\n                            <path d=\"M8 12h8\"><\/path>\n                        <\/svg>\n                    <\/span>\n                    Perfumes\n                <\/button>\n\n                <button\n                    type=\"button\"\n                    class=\"dx-design-tab\"\n                    data-index=\"3\"\n                    role=\"tab\"\n                    aria-selected=\"false\"\n                >\n                    <span class=\"dx-design-tab-icon\" aria-hidden=\"true\">\n                        <svg viewBox=\"0 0 24 24\">\n                            <rect\n                                x=\"3\"\n                                y=\"4\"\n                                width=\"18\"\n                                height=\"14\"\n                                rx=\"2\"\n                            ><\/rect>\n                            <path d=\"M8 22h8\"><\/path>\n                            <path d=\"M12 18v4\"><\/path>\n                        <\/svg>\n                    <\/span>\n                    Electronics\n                <\/button>\n\n                <button\n                    type=\"button\"\n                    class=\"dx-design-tab\"\n                    data-index=\"4\"\n                    role=\"tab\"\n                    aria-selected=\"false\"\n                >\n                    <span class=\"dx-design-tab-icon\" aria-hidden=\"true\">\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M6 3h9l3 3v15H6Z\"><\/path>\n                            <path d=\"M14 3v4h4\"><\/path>\n                            <path d=\"M9 12h6\"><\/path>\n                            <path d=\"M9 16h4\"><\/path>\n                        <\/svg>\n                    <\/span>\n                    Digital Products\n                <\/button>\n\n            <\/div>\n\n            <div\n                class=\"dx-design-stage\"\n                aria-roledescription=\"carousel\"\n                aria-label=\"WooCommerce store design examples\"\n            >\n\n                <div\n                    class=\"dx-design-stage-top\"\n                    aria-hidden=\"true\"\n                >\n                    <span class=\"dx-design-browser-address\"><\/span>\n\n                    <span class=\"dx-design-browser-dots\">\n                        <span class=\"dx-design-browser-dot\"><\/span>\n                        <span class=\"dx-design-browser-dot\"><\/span>\n                        <span class=\"dx-design-browser-dot\"><\/span>\n                    <\/span>\n                <\/div>\n\n                <div class=\"dx-design-stage-body\">\n\n                    <div class=\"dx-design-preview\">\n\n                        <figure class=\"dx-design-slide is-active\">\n                            <img\n                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/05\/screenshot-2.png\"\n                                alt=\"Fashion e-commerce store design example\"\n                                loading=\"lazy\"\n                                decoding=\"async\"\n                            >\n                        <\/figure>\n\n                        <figure class=\"dx-design-slide\">\n                            <img\n                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/05\/screenshot-6.png\"\n                                alt=\"Food e-commerce store design example\"\n                                loading=\"lazy\"\n                                decoding=\"async\"\n                            >\n                        <\/figure>\n\n                        <figure class=\"dx-design-slide\">\n                            <img\n                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/05\/screenshot-5.png\"\n                                alt=\"Perfume e-commerce store design example\"\n                                loading=\"lazy\"\n                                decoding=\"async\"\n                            >\n                        <\/figure>\n\n                        <figure class=\"dx-design-slide\">\n                            <img\n                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/05\/screenshot-4.png\"\n                                alt=\"Electronics e-commerce store design example\"\n                                loading=\"lazy\"\n                                decoding=\"async\"\n                            >\n                        <\/figure>\n\n                        <figure class=\"dx-design-slide\">\n                            <img\n                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/05\/screenshot-3.png\"\n                                alt=\"Digital product store design example\"\n                                loading=\"lazy\"\n                                decoding=\"async\"\n                            >\n                        <\/figure>\n\n                    <\/div>\n\n                    <div class=\"dx-design-info\">\n\n                        <span class=\"dx-design-info-number\">\n                            01\n                        <\/span>\n\n                        <span class=\"dx-design-info-label\">\n                            Fashion Store Designs\n                        <\/span>\n\n                        <h3 class=\"dx-design-info-title\">\n                            Visual Presentation That Highlights Products and Details\n                        <\/h3>\n\n                        <p class=\"dx-design-info-text\">\n                            A design focused on product imagery, categories,\n                            sizes, and colors, while making it easier for\n                            customers to browse collections and find the\n                            right product.\n                        <\/p>\n\n                        <div class=\"dx-design-info-list\">\n\n                            <div class=\"dx-design-info-item\">\n                                <span class=\"dx-design-info-check\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                Display sizes, colors, and product variations.\n                            <\/div>\n\n                            <div class=\"dx-design-info-item\">\n                                <span class=\"dx-design-info-check\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                Organize collections and product categories.\n                            <\/div>\n\n                            <div class=\"dx-design-info-item\">\n                                <span class=\"dx-design-info-check\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                A mobile-friendly shopping experience.\n                            <\/div>\n\n                        <\/div>\n\n                        <div class=\"dx-design-stage-footer\">\n\n                            <span\n                                class=\"dx-design-counter\"\n                                aria-live=\"polite\"\n                            >\n                                01 \/ 05\n                            <\/span>\n\n                            <div class=\"dx-design-arrows\">\n\n                                <button\n                                    type=\"button\"\n                                    class=\"dx-design-arrow dx-design-prev\"\n                                    aria-label=\"Previous design\"\n                                >\n                                    <svg\n                                        viewBox=\"0 0 24 24\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <path d=\"M19 12H5\"><\/path>\n                                        <path d=\"m11 18-6-6 6-6\"><\/path>\n                                    <\/svg>\n                                <\/button>\n\n                                <button\n                                    type=\"button\"\n                                    class=\"dx-design-arrow dx-design-next\"\n                                    aria-label=\"Next design\"\n                                >\n                                    <svg\n                                        viewBox=\"0 0 24 24\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <path d=\"M5 12h14\"><\/path>\n                                        <path d=\"m13 6 6 6-6 6\"><\/path>\n                                    <\/svg>\n                                <\/button>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n            <div class=\"dx-design-bottom\">\n\n                <div class=\"dx-design-bottom-copy\">\n\n                    <span\n                        class=\"dx-design-bottom-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M12 3a9 9 0 1 0 9 9c0-1.1-.9-2-2-2h-2.5A2.5 2.5 0 0 1 14 7.5V5c0-1.1-.9-2-2-2Z\"><\/path>\n                            <circle cx=\"7.5\" cy=\"10.5\" r=\"1\"><\/circle>\n                            <circle cx=\"10\" cy=\"7\" r=\"1\"><\/circle>\n                        <\/svg>\n                    <\/span>\n\n                    <div>\n                        <h3 class=\"dx-design-bottom-title\">\n                            Every Design Is Customized to Match Your Brand\n                        <\/h3>\n\n                        <p class=\"dx-design-bottom-text\">\n                            The examples above demonstrate the design approach.\n                            Colors, typography, pages, and visual details are\n                            customized around your brand and business.\n                        <\/p>\n                    <\/div>\n\n                <\/div>\n\n                <a\n                    href=\"https:\/\/dindex.net\/en\/contact\/\"\n                    class=\"dx-design-button\"\n                >\n                    <span>Discuss Your Store Design<\/span>\n\n                    <svg\n                        viewBox=\"0 0 24 24\"\n                        aria-hidden=\"true\"\n                    >\n                        <path d=\"M5 12h14\"><\/path>\n                        <path d=\"m13 6 6 6-6 6\"><\/path>\n                    <\/svg>\n                <\/a>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxWooDesignShowcase() {\n        const section = document.getElementById(\n            \"dx-woo-design-showcase\"\n        );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized = \"true\";\n\n        const widget = section.closest(\n            \".elementor-widget-html\"\n        );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-woo-design-showcase-fullwidth\"\n            );\n        }\n\n        const tabs = Array.from(\n            section.querySelectorAll(\n                \".dx-design-tab\"\n            )\n        );\n\n        const slides = Array.from(\n            section.querySelectorAll(\n                \".dx-design-slide\"\n            )\n        );\n\n        const previousButton = section.querySelector(\n            \".dx-design-prev\"\n        );\n\n        const nextButton = section.querySelector(\n            \".dx-design-next\"\n        );\n\n        const number = section.querySelector(\n            \".dx-design-info-number\"\n        );\n\n        const label = section.querySelector(\n            \".dx-design-info-label\"\n        );\n\n        const title = section.querySelector(\n            \".dx-design-info-title\"\n        );\n\n        const text = section.querySelector(\n            \".dx-design-info-text\"\n        );\n\n        const list = section.querySelector(\n            \".dx-design-info-list\"\n        );\n\n        const counter = section.querySelector(\n            \".dx-design-counter\"\n        );\n\n        const data = [\n            {\n                label: \"Fashion Store Designs\",\n                title: \"Visual Presentation That Highlights Products and Details\",\n                text: \"A design focused on product imagery, categories, sizes, and colors, while making it easier for customers to browse collections and find the right product.\",\n                items: [\n                    \"Display sizes, colors, and product variations.\",\n                    \"Organize collections and product categories.\",\n                    \"A mobile-friendly shopping experience.\"\n                ]\n            },\n            {\n                label: \"Food Store Designs\",\n                title: \"Faster Access to Categories and Offers\",\n                text: \"An interface that helps customers browse products and offers and add items to the cart easily, with clear organization for delivery areas and available delivery options.\",\n                items: [\n                    \"Clear and easy-to-browse categories.\",\n                    \"Highlight offers and featured products.\",\n                    \"A fast and simple ordering experience.\"\n                ]\n            },\n            {\n                label: \"Perfume Store Designs\",\n                title: \"A Refined Identity That Highlights Product Details\",\n                text: \"A design focused on imagery, ingredients, fragrance type, and available sizes, with a calm visual style that reflects the brand and presents each product professionally.\",\n                items: [\n                    \"Display ingredients and descriptions clearly.\",\n                    \"Organize perfumes by type.\",\n                    \"A design consistent with the brand identity.\"\n                ]\n            },\n            {\n                label: \"Electronics Store Designs\",\n                title: \"Clear Comparison of Specifications and Options\",\n                text: \"A design that organizes specifications, categories, and brands and helps customers compare products and reach the right option more easily.\",\n                items: [\n                    \"Organize specifications and product features.\",\n                    \"Product filtering and category navigation.\",\n                    \"Display related products.\"\n                ]\n            },\n            {\n                label: \"Digital Product Store Designs\",\n                title: \"An Experience Designed for Downloads and Subscriptions\",\n                text: \"An interface suited to selling books, files, courses, and digital subscriptions, with an organized payment process and clear access to the purchased product afterward.\",\n                items: [\n                    \"Clear presentation of product details.\",\n                    \"Digital delivery after completing the order.\",\n                    \"Support for subscriptions and downloadable files.\"\n                ]\n            }\n        ];\n\n        let activeIndex = 0;\n\n        function formatNumber(value) {\n            return String(value).padStart(2, \"0\");\n        }\n\n        function createListItem(itemText) {\n            const item = document.createElement(\"div\");\n            item.className = \"dx-design-info-item\";\n\n            item.innerHTML =\n                '<span class=\"dx-design-info-check\" aria-hidden=\"true\">' +\n                '<svg viewBox=\"0 0 24 24\">' +\n                '<path d=\"m5 12 4 4L19 6\"><\/path>' +\n                \"<\/svg>\" +\n                \"<\/span>\" +\n                \"<span><\/span>\";\n\n            item.lastElementChild.textContent = itemText;\n\n            return item;\n        }\n\n        function showDesign(index) {\n            activeIndex =\n                (index + slides.length) %\n                slides.length;\n\n            slides.forEach(function (slide, slideIndex) {\n                const isActive =\n                    slideIndex === activeIndex;\n\n                slide.classList.toggle(\n                    \"is-active\",\n                    isActive\n                );\n\n                slide.setAttribute(\n                    \"aria-hidden\",\n                    String(!isActive)\n                );\n            });\n\n            tabs.forEach(function (tab, tabIndex) {\n                const isActive =\n                    tabIndex === activeIndex;\n\n                tab.classList.toggle(\n                    \"is-active\",\n                    isActive\n                );\n\n                tab.setAttribute(\n                    \"aria-selected\",\n                    String(isActive)\n                );\n\n                tab.tabIndex = isActive ? 0 : -1;\n            });\n\n            const currentData = data[activeIndex];\n\n            if (number) {\n                number.textContent =\n                    formatNumber(activeIndex + 1);\n            }\n\n            if (label) {\n                label.textContent =\n                    currentData.label;\n            }\n\n            if (title) {\n                title.textContent =\n                    currentData.title;\n            }\n\n            if (text) {\n                text.textContent =\n                    currentData.text;\n            }\n\n            if (list) {\n                list.innerHTML = \"\";\n\n                currentData.items.forEach(function (itemText) {\n                    list.appendChild(\n                        createListItem(itemText)\n                    );\n                });\n            }\n\n            if (counter) {\n                counter.textContent =\n                    formatNumber(activeIndex + 1) +\n                    \" \/ \" +\n                    formatNumber(slides.length);\n            }\n        }\n\n        tabs.forEach(function (tab) {\n            tab.addEventListener(\n                \"click\",\n                function () {\n                    const index = Number(\n                        tab.dataset.index\n                    );\n\n                    if (Number.isInteger(index)) {\n                        showDesign(index);\n                    }\n                }\n            );\n\n            tab.addEventListener(\n                \"keydown\",\n                function (event) {\n                    if (\n                        event.key !== \"ArrowLeft\" &&\n                        event.key !== \"ArrowRight\"\n                    ) {\n                        return;\n                    }\n\n                    event.preventDefault();\n\n                    const newIndex =\n                        event.key === \"ArrowLeft\"\n                            ? activeIndex - 1\n                            : activeIndex + 1;\n\n                    showDesign(newIndex);\n\n                    tabs[activeIndex].focus();\n                }\n            );\n        });\n\n        if (previousButton) {\n            previousButton.addEventListener(\n                \"click\",\n                function () {\n                    showDesign(activeIndex - 1);\n                }\n            );\n        }\n\n        if (nextButton) {\n            nextButton.addEventListener(\n                \"click\",\n                function () {\n                    showDesign(activeIndex + 1);\n                }\n            );\n        }\n\n        showDesign(0);\n\n        if (\n            !(\"IntersectionObserver\" in window) ||\n            window.matchMedia(\n                \"(prefers-reduced-motion: reduce)\"\n            ).matches\n        ) {\n            return;\n        }\n\n        const header = section.querySelector(\n            \".dx-design-header\"\n        );\n\n        const tabsContainer = section.querySelector(\n            \".dx-design-tabs\"\n        );\n\n        const stage = section.querySelector(\n            \".dx-design-stage\"\n        );\n\n        const bottom = section.querySelector(\n            \".dx-design-bottom\"\n        );\n\n        [header, tabsContainer, stage, bottom].forEach(\n            function (element, index) {\n                if (!element) {\n                    return;\n                }\n\n                element.style.opacity = \"0\";\n                element.style.transform =\n                    \"translateY(24px)\";\n\n                element.style.transition =\n                    \"opacity 0.7s ease \" +\n                    index * 0.08 +\n                    \"s, transform 0.7s ease \" +\n                    index * 0.08 +\n                    \"s\";\n            }\n        );\n\n        const observer = new IntersectionObserver(\n            function (entries, currentObserver) {\n                entries.forEach(function (entry) {\n                    if (!entry.isIntersecting) {\n                        return;\n                    }\n\n                    [header, tabsContainer, stage, bottom].forEach(\n                        function (element) {\n                            if (!element) {\n                                return;\n                            }\n\n                            element.style.opacity = \"1\";\n                            element.style.transform =\n                                \"translateY(0)\";\n                        }\n                    );\n\n                    currentObserver.unobserve(\n                        entry.target\n                    );\n                });\n            },\n            {\n                threshold: 0.1\n            }\n        );\n\n        observer.observe(section);\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxWooDesignShowcase\n        );\n    } else {\n        initDxWooDesignShowcase();\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-513e2ab e-con-full e-flex e-con e-parent\" data-id=\"513e2ab\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7130a8c elementor-widget elementor-widget-html\" data-id=\"7130a8c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n.elementor-widget-html:has(#dx-woo-dashboard),\n.elementor-widget-html:has(#dx-woo-dashboard) > .elementor-widget-container,\n.dx-woo-dashboard-widget-fullwidth,\n.dx-woo-dashboard-widget-fullwidth > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n#dx-woo-dashboard,\n#dx-woo-dashboard *,\n#dx-woo-dashboard *::before,\n#dx-woo-dashboard *::after {\n    box-sizing: border-box;\n}\n\n#dx-woo-dashboard {\n    --dx-dark: #09001f;\n    --dx-dark-secondary: #17053d;\n    --dx-white: #ffffff;\n    --dx-text: rgba(255, 255, 255, 0.72);\n    --dx-muted: rgba(255, 255, 255, 0.5);\n    --dx-purple: #6942d8;\n    --dx-purple-light: #9168ef;\n    --dx-yellow: #ffc441;\n    --dx-yellow-light: #ffd66e;\n    --dx-green: #54d696;\n    --dx-blue: #58a8f7;\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n    direction: ltr;\n\n    color: var(--dx-white);\n\n    background:\n        radial-gradient(\n            circle at 9% 13%,\n            rgba(145, 104, 239, 0.22),\n            transparent 28%\n        ),\n        radial-gradient(\n            circle at 91% 87%,\n            rgba(105, 66, 216, 0.18),\n            transparent 30%\n        ),\n        linear-gradient(\n            145deg,\n            var(--dx-dark-secondary),\n            var(--dx-dark)\n        );\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-woo-dashboard a,\n#dx-woo-dashboard button {\n    color: inherit;\n    text-decoration: none;\n    font-family: inherit;\n}\n\n#dx-woo-dashboard img {\n    display: block;\n    max-width: 100%;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-grid-bg {\n    position: absolute;\n    z-index: -6;\n\n    inset: 0;\n\n    opacity: 0.1;\n\n    background-image:\n        linear-gradient(\n            rgba(255, 255, 255, 0.045) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(255, 255, 255, 0.045) 1px,\n            transparent 1px\n        );\n\n    background-size: 72px 72px;\n\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 16%,\n            transparent 83%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 16%,\n            transparent 83%\n        );\n\n    pointer-events: none;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-glow {\n    position: absolute;\n    z-index: -5;\n\n    border-radius: 50%;\n\n    filter: blur(110px);\n\n    pointer-events: none;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-glow-one {\n    top: -170px;\n    right: 25%;\n\n    width: 430px;\n    height: 430px;\n\n    background: rgba(145, 104, 239, 0.18);\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-glow-two {\n    left: -190px;\n    bottom: -220px;\n\n    width: 500px;\n    height: 440px;\n\n    background: rgba(255, 196, 65, 0.055);\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        94px\n        clamp(22px, 5vw, 90px)\n        100px;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-container {\n    width: min(1420px, 100%);\n\n    margin: 0 auto;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-header {\n    max-width: 880px;\n\n    margin: 0 auto 48px;\n\n    text-align: center;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    margin-bottom: 12px;\n\n    color: var(--dx-yellow);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-eyebrow::before,\n#dx-woo-dashboard .dx-woo-dashboard-eyebrow::after {\n    content: \"\";\n\n    width: 31px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-yellow),\n            var(--dx-purple-light)\n        );\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-title {\n    margin: 0;\n\n    color: var(--dx-white);\n\n    font-size: clamp(33px, 3.7vw, 51px);\n    font-weight: 900;\n    line-height: 1.55;\n    letter-spacing: -0.45px;\n\n    text-wrap: balance;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-title span {\n    color: var(--dx-yellow);\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-description {\n    max-width: 760px;\n\n    margin: 14px auto 0;\n\n    color: var(--dx-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n\n    text-wrap: pretty;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-layout {\n    display: grid;\n    grid-template-columns:\n        minmax(340px, 0.72fr)\n        minmax(0, 1.28fr);\n\n    align-items: stretch;\n\n    gap: 25px;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-info {\n    position: relative;\n    isolation: isolate;\n\n    min-height: 100%;\n\n    display: flex;\n    flex-direction: column;\n\n    overflow: hidden;\n\n    padding:\n        34px\n        30px;\n\n    border: 1px solid rgba(255, 255, 255, 0.12);\n    border-radius: 25px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.09),\n            rgba(255, 255, 255, 0.035)\n        );\n\n    box-shadow:\n        0 24px 60px rgba(2, 0, 20, 0.27),\n        inset 0 1px 0 rgba(255, 255, 255, 0.06);\n\n    -webkit-backdrop-filter: blur(10px);\n    backdrop-filter: blur(10px);\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-info::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    right: -140px;\n    bottom: -170px;\n\n    width: 350px;\n    height: 350px;\n\n    border-radius: 50%;\n\n    background: rgba(105, 66, 216, 0.14);\n\n    filter: blur(90px);\n\n    pointer-events: none;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-info-icon {\n    width: 72px;\n    height: 72px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid rgba(255, 255, 255, 0.14);\n    border-radius: 22px;\n\n    color: #180b35;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-yellow),\n            var(--dx-yellow-light)\n        );\n\n    box-shadow:\n        0 18px 38px rgba(255, 196, 65, 0.22);\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-info-icon svg {\n    width: 34px;\n    height: 34px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-info-label {\n    display: block;\n\n    margin-top: 27px;\n\n    color: var(--dx-yellow);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-info-title {\n    margin:\n        8px\n        0\n        0;\n\n    color: #ffffff;\n\n    font-size: 29px;\n    font-weight: 900;\n    line-height: 1.55;\n\n    text-wrap: balance;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-info-text {\n    margin:\n        13px\n        0\n        0;\n\n    color: var(--dx-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-info-list {\n    margin-top: 25px;\n    padding-top: 22px;\n\n    display: grid;\n\n    gap: 12px;\n\n    border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-info-item {\n    display: flex;\n    align-items: flex-start;\n\n    gap: 10px;\n\n    color: rgba(255, 255, 255, 0.73);\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.8;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-info-check {\n    width: 25px;\n    height: 25px;\n    flex: 0 0 25px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 8px;\n\n    color: #7ce3b3;\n\n    background: rgba(84, 214, 150, 0.12);\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-info-check svg {\n    width: 13px;\n    height: 13px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2.3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-button {\n    width: 100%;\n    min-height: 52px;\n\n    margin-top: auto;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 9px;\n\n    padding:\n        0\n        20px;\n\n    border: 1px solid rgba(255, 255, 255, 0.17);\n    border-radius: 12px;\n\n    color: #180b35;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-yellow),\n            var(--dx-yellow-light)\n        );\n\n    box-shadow:\n        0 17px 37px rgba(255, 196, 65, 0.21);\n\n    font-size: 14px;\n    font-weight: 900;\n\n    transition:\n        transform 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-button:hover,\n#dx-woo-dashboard .dx-woo-dashboard-button:focus-visible {\n    box-shadow:\n        0 23px 47px rgba(255, 196, 65, 0.3);\n\n    transform: translateY(-3px);\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-button svg {\n    width: 18px;\n    height: 18px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-slider {\n    position: relative;\n\n    min-width: 0;\n    min-height: 590px;\n\n    overflow: hidden;\n\n    padding: 12px;\n\n    border: 1px solid rgba(255, 255, 255, 0.12);\n    border-radius: 27px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.09),\n            rgba(255, 255, 255, 0.035)\n        );\n\n    box-shadow:\n        0 28px 72px rgba(2, 0, 20, 0.34),\n        inset 0 1px 0 rgba(255, 255, 255, 0.06);\n\n    -webkit-backdrop-filter: blur(12px);\n    backdrop-filter: blur(12px);\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-browser {\n    position: relative;\n\n    width: 100%;\n    height: 100%;\n    min-height: 566px;\n\n    overflow: hidden;\n\n    border-radius: 19px;\n\n    background: #f5f3f9;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-browser-bar {\n    height: 43px;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    padding:\n        0\n        15px;\n\n    border-bottom: 1px solid rgba(105, 66, 216, 0.09);\n\n    background:\n        linear-gradient(\n            180deg,\n            #ffffff,\n            #f6f4fa\n        );\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-browser-dots {\n    display: flex;\n    align-items: center;\n\n    gap: 6px;\n\n    direction: ltr;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-browser-dot {\n    width: 8px;\n    height: 8px;\n\n    border-radius: 50%;\n\n    background: #dad5e3;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-browser-dot:nth-child(1) {\n    background: #ff6e6e;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-browser-dot:nth-child(2) {\n    background: #ffc441;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-browser-dot:nth-child(3) {\n    background: #54d696;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-browser-address {\n    width: 50%;\n    height: 12px;\n\n    border-radius: 999px;\n\n    background: rgba(105, 66, 216, 0.08);\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-track {\n    position: relative;\n\n    width: 100%;\n    height: calc(100% - 43px);\n    min-height: 523px;\n\n    overflow: hidden;\n\n    background: #ece9f2;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-slide {\n    position: absolute;\n\n    inset: 0;\n\n    opacity: 0;\n\n    visibility: hidden;\n\n    transform: translateX(22px);\n\n    transition:\n        opacity 0.45s ease,\n        visibility 0.45s ease,\n        transform 0.45s ease;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-slide.is-active {\n    opacity: 1;\n\n    visibility: visible;\n\n    transform: translateX(0);\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-slide img {\n    width: 100%;\n    height: 100%;\n\n    object-fit: contain;\n    object-position: center;\n\n    background: #ffffff;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-controls {\n    position: absolute;\n    z-index: 5;\n\n    right: 26px;\n    bottom: 25px;\n    left: 26px;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    gap: 15px;\n\n    pointer-events: none;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-arrows {\n    display: flex;\n    align-items: center;\n\n    gap: 8px;\n\n    direction: ltr;\n\n    pointer-events: auto;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-arrow {\n    width: 43px;\n    height: 43px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    padding: 0;\n\n    border: 1px solid rgba(105, 66, 216, 0.16);\n    border-radius: 12px;\n\n    color: var(--dx-purple);\n\n    background: rgba(255, 255, 255, 0.94);\n\n    box-shadow:\n        0 13px 30px rgba(40, 18, 84, 0.13);\n\n    cursor: pointer;\n\n    transition:\n        transform 0.25s ease,\n        color 0.25s ease,\n        background 0.25s ease;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-arrow:hover,\n#dx-woo-dashboard .dx-woo-dashboard-arrow:focus-visible {\n    color: #ffffff;\n\n    background: var(--dx-purple);\n\n    transform: translateY(-2px);\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-arrow svg {\n    width: 20px;\n    height: 20px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-dots {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 7px;\n\n    padding:\n        9px\n        12px;\n\n    border: 1px solid rgba(105, 66, 216, 0.13);\n    border-radius: 999px;\n\n    background: rgba(255, 255, 255, 0.94);\n\n    box-shadow:\n        0 13px 30px rgba(40, 18, 84, 0.12);\n\n    pointer-events: auto;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-dot {\n    width: 8px;\n    height: 8px;\n\n    padding: 0;\n\n    border: 0;\n    border-radius: 50%;\n\n    background: rgba(105, 66, 216, 0.23);\n\n    cursor: pointer;\n\n    transition:\n        width 0.25s ease,\n        border-radius 0.25s ease,\n        background 0.25s ease;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-dot.is-active {\n    width: 24px;\n\n    border-radius: 999px;\n\n    background: var(--dx-purple);\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-counter {\n    min-width: 64px;\n    min-height: 42px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    padding:\n        0\n        12px;\n\n    border: 1px solid rgba(105, 66, 216, 0.13);\n    border-radius: 12px;\n\n    color: var(--dx-dark);\n\n    background: rgba(255, 255, 255, 0.94);\n\n    box-shadow:\n        0 13px 30px rgba(40, 18, 84, 0.12);\n\n    font-size: 14px;\n    font-weight: 900;\n\n    direction: ltr;\n\n    pointer-events: auto;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-bottom {\n    margin-top: 22px;\n\n    display: grid;\n    grid-template-columns:\n        repeat(3, minmax(0, 1fr));\n\n    gap: 14px;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-bottom-item {\n    min-height: 82px;\n\n    display: flex;\n    align-items: center;\n\n    gap: 11px;\n\n    padding:\n        14px\n        15px;\n\n    border: 1px solid rgba(255, 255, 255, 0.11);\n    border-radius: 16px;\n\n    background: rgba(255, 255, 255, 0.055);\n\n    box-shadow:\n        0 14px 35px rgba(2, 0, 20, 0.18);\n\n    -webkit-backdrop-filter: blur(8px);\n    backdrop-filter: blur(8px);\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-bottom-icon {\n    width: 39px;\n    height: 39px;\n    flex: 0 0 39px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 12px;\n\n    color: #d6c9ff;\n\n    background: rgba(145, 104, 239, 0.12);\n}\n\n#dx-woo-dashboard\n    .dx-woo-dashboard-bottom-item:nth-child(2)\n    .dx-woo-dashboard-bottom-icon {\n    color: var(--dx-yellow);\n\n    background: rgba(255, 196, 65, 0.1);\n}\n\n#dx-woo-dashboard\n    .dx-woo-dashboard-bottom-item:nth-child(3)\n    .dx-woo-dashboard-bottom-icon {\n    color: #7ce3b3;\n\n    background: rgba(84, 214, 150, 0.1);\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-bottom-icon svg {\n    width: 20px;\n    height: 20px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.9;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-bottom-title {\n    display: block;\n\n    color: #ffffff;\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.5;\n}\n\n#dx-woo-dashboard .dx-woo-dashboard-bottom-text {\n    display: block;\n\n    margin-top: 3px;\n\n    color: var(--dx-muted);\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.6;\n}\n\n@media (max-width: 1050px) {\n    #dx-woo-dashboard .dx-woo-dashboard-layout {\n        grid-template-columns: 1fr;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-info {\n        min-height: 0;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-button {\n        margin-top: 28px;\n    }\n}\n\n@media (max-width: 980px) {\n    #dx-woo-dashboard .dx-woo-dashboard-main {\n        padding:\n            76px\n            28px\n            82px;\n    }\n}\n\n@media (max-width: 680px) {\n    #dx-woo-dashboard .dx-woo-dashboard-main {\n        padding:\n            59px\n            16px\n            65px;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-header {\n        margin-bottom: 34px;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-eyebrow {\n        font-size: 14px;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-eyebrow::before,\n    #dx-woo-dashboard .dx-woo-dashboard-eyebrow::after {\n        width: 22px;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-title {\n        font-size: clamp(27px, 8.3vw, 36px);\n        line-height: 1.65;\n        letter-spacing: -0.2px;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-description {\n        margin-top: 10px;\n\n        font-size: 14px;\n        line-height: 2;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-layout {\n        gap: 15px;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-info {\n        padding:\n            25px\n            20px;\n\n        border-radius: 20px;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-info-icon {\n        width: 60px;\n        height: 60px;\n\n        border-radius: 18px;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-info-icon svg {\n        width: 29px;\n        height: 29px;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-info-label {\n        margin-top: 21px;\n\n        font-size: 14px;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-info-title {\n        margin-top: 6px;\n\n        font-size: 23px;\n        line-height: 1.6;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-info-text {\n        margin-top: 9px;\n\n        font-size: 14px;\n        line-height: 1.95;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-info-item {\n        font-size: 14px;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-button {\n        font-size: 14px;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-slider {\n        min-height: 370px;\n\n        padding: 8px;\n\n        border-radius: 20px;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-browser {\n        min-height: 352px;\n\n        border-radius: 14px;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-browser-bar {\n        height: 34px;\n\n        padding:\n            0\n            10px;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-browser-dot {\n        width: 6px;\n        height: 6px;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-track {\n        height: calc(100% - 34px);\n        min-height: 318px;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-controls {\n        right: 14px;\n        bottom: 14px;\n        left: 14px;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-arrow {\n        width: 37px;\n        height: 37px;\n\n        border-radius: 10px;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-counter {\n        min-width: 54px;\n        min-height: 37px;\n\n        font-size: 14px;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-dots {\n        gap: 5px;\n\n        padding:\n            8px\n            10px;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-dot {\n        width: 7px;\n        height: 7px;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-dot.is-active {\n        width: 19px;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-bottom {\n        margin-top: 15px;\n\n        grid-template-columns: 1fr;\n\n        gap: 10px;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-bottom-item {\n        min-height: 72px;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-bottom-title,\n    #dx-woo-dashboard .dx-woo-dashboard-bottom-text {\n        font-size: 14px;\n    }\n\n    #dx-woo-dashboard .dx-woo-dashboard-glow {\n        display: none;\n    }\n}\n\n#dx-woo-dashboard a:focus-visible,\n#dx-woo-dashboard button:focus-visible {\n    outline: 3px solid var(--dx-yellow);\n    outline-offset: 4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    #dx-woo-dashboard *,\n    #dx-woo-dashboard *::before,\n    #dx-woo-dashboard *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n        scroll-behavior: auto !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-woo-dashboard\"\n    aria-labelledby=\"dx-woo-dashboard-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n    <div\n        class=\"dx-woo-dashboard-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <span\n        class=\"dx-woo-dashboard-glow dx-woo-dashboard-glow-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-woo-dashboard-glow dx-woo-dashboard-glow-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-woo-dashboard-main\">\n\n        <div class=\"dx-woo-dashboard-container\">\n\n            <header class=\"dx-woo-dashboard-header\">\n\n                <span class=\"dx-woo-dashboard-eyebrow\">\n                    Store Dashboard\n                <\/span>\n\n                <h2\n                    id=\"dx-woo-dashboard-title\"\n                    class=\"dx-woo-dashboard-title\"\n                >\n                    Manage Everything\n                    <span>From One Place<\/span>\n                <\/h2>\n\n                <p class=\"dx-woo-dashboard-description\">\n                    The WooCommerce and WordPress dashboard gives you\n                    a clear way to manage products, orders, customers,\n                    inventory, and store performance from one central\n                    administration area.\n                <\/p>\n\n            <\/header>\n\n            <div class=\"dx-woo-dashboard-layout\">\n\n                <aside class=\"dx-woo-dashboard-info\">\n\n                    <span\n                        class=\"dx-woo-dashboard-info-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <rect\n                                x=\"3\"\n                                y=\"3\"\n                                width=\"18\"\n                                height=\"18\"\n                                rx=\"2\"\n                            ><\/rect>\n                            <path d=\"M3 9h18\"><\/path>\n                            <path d=\"M9 21V9\"><\/path>\n                            <path d=\"M13 13h4\"><\/path>\n                            <path d=\"M13 17h3\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <span class=\"dx-woo-dashboard-info-label\">\n                        Simple, Clear Store Management\n                    <\/span>\n\n                    <h3 class=\"dx-woo-dashboard-info-title\">\n                        Manage Your Daily Store Operations Without Complexity\n                    <\/h3>\n\n                    <p class=\"dx-woo-dashboard-info-text\">\n                        From the dashboard, you can add products,\n                        monitor orders, update shipping statuses,\n                        manage customers, and review store reports\n                        from one place.\n                    <\/p>\n\n                    <div class=\"dx-woo-dashboard-info-list\">\n\n                        <div class=\"dx-woo-dashboard-info-item\">\n\n                            <span\n                                class=\"dx-woo-dashboard-info-check\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span>\n                                Add and update products, prices,\n                                images, and inventory.\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-woo-dashboard-info-item\">\n\n                            <span\n                                class=\"dx-woo-dashboard-info-check\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span>\n                                Monitor orders and customers and update\n                                order processing statuses.\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-woo-dashboard-info-item\">\n\n                            <span\n                                class=\"dx-woo-dashboard-info-check\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span>\n                                Review sales, product, and store\n                                performance reports.\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-woo-dashboard-info-item\">\n\n                            <span\n                                class=\"dx-woo-dashboard-info-check\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span>\n                                Manage your store from a computer or\n                                through the WooCommerce app.\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/contact\/\"\n                        class=\"dx-woo-dashboard-button\"\n                    >\n                        <span>Discuss Your WooCommerce Store<\/span>\n\n                        <svg\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n                    <\/a>\n\n                <\/aside>\n\n                <div\n                    class=\"dx-woo-dashboard-slider\"\n                    aria-roledescription=\"carousel\"\n                    aria-label=\"WooCommerce dashboard screenshots\"\n                >\n\n                    <div class=\"dx-woo-dashboard-browser\">\n\n                        <div\n                            class=\"dx-woo-dashboard-browser-bar\"\n                            aria-hidden=\"true\"\n                        >\n                            <span class=\"dx-woo-dashboard-browser-address\"><\/span>\n\n                            <span class=\"dx-woo-dashboard-browser-dots\">\n                                <span class=\"dx-woo-dashboard-browser-dot\"><\/span>\n                                <span class=\"dx-woo-dashboard-browser-dot\"><\/span>\n                                <span class=\"dx-woo-dashboard-browser-dot\"><\/span>\n                            <\/span>\n                        <\/div>\n\n                        <div class=\"dx-woo-dashboard-track\">\n\n                            <figure\n                                class=\"dx-woo-dashboard-slide is-active\"\n                                data-slide=\"0\"\n                            >\n                                <img loading=\"lazy\"\n                                    src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/05\/screenshot-6.png\"\n                                    alt=\"WooCommerce store dashboard interface\"\n                                    width=\"2000\"\n                                    height=\"1100\"\n                                    loading=\"lazy\"\n                                    decoding=\"async\"\n                                >\n                            <\/figure>\n\n                            <figure\n                                class=\"dx-woo-dashboard-slide\"\n                                data-slide=\"1\"\n                            >\n                                <img loading=\"lazy\"\n                                    src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/05\/screenshot-5.png\"\n                                    alt=\"WooCommerce order management interface\"\n                                    width=\"2000\"\n                                    height=\"1100\"\n                                    loading=\"lazy\"\n                                    decoding=\"async\"\n                                >\n                            <\/figure>\n\n                            <figure\n                                class=\"dx-woo-dashboard-slide\"\n                                data-slide=\"2\"\n                            >\n                                <img loading=\"lazy\"\n                                    src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/05\/screenshot-4.png\"\n                                    alt=\"WooCommerce product management interface\"\n                                    width=\"2000\"\n                                    height=\"1100\"\n                                    loading=\"lazy\"\n                                    decoding=\"async\"\n                                >\n                            <\/figure>\n\n                            <figure\n                                class=\"dx-woo-dashboard-slide\"\n                                data-slide=\"3\"\n                            >\n                                <img loading=\"lazy\"\n                                    src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/05\/screenshot-3.png\"\n                                    alt=\"WooCommerce store settings interface\"\n                                    width=\"2000\"\n                                    height=\"1100\"\n                                    loading=\"lazy\"\n                                    decoding=\"async\"\n                                >\n                            <\/figure>\n\n                            <figure\n                                class=\"dx-woo-dashboard-slide\"\n                                data-slide=\"4\"\n                            >\n                                <img loading=\"lazy\"\n                                    src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/05\/screenshot-1.png\"\n                                    alt=\"WooCommerce reports and store performance\"\n                                    width=\"2000\"\n                                    height=\"1100\"\n                                    loading=\"lazy\"\n                                    decoding=\"async\"\n                                >\n                            <\/figure>\n\n                            <figure\n                                class=\"dx-woo-dashboard-slide\"\n                                data-slide=\"5\"\n                            >\n                                <img loading=\"lazy\"\n                                    src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/05\/screenshot-2.png\"\n                                    alt=\"WooCommerce store administration dashboard\"\n                                    width=\"2000\"\n                                    height=\"1100\"\n                                    loading=\"lazy\"\n                                    decoding=\"async\"\n                                >\n                            <\/figure>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <div class=\"dx-woo-dashboard-controls\">\n\n                        <div class=\"dx-woo-dashboard-arrows\">\n\n                            <button\n                                type=\"button\"\n                                class=\"dx-woo-dashboard-arrow dx-woo-dashboard-prev\"\n                                aria-label=\"Previous screenshot\"\n                            >\n                                <svg\n                                    viewBox=\"0 0 24 24\"\n                                    aria-hidden=\"true\"\n                                >\n                                    <path d=\"M19 12H5\"><\/path>\n                                    <path d=\"m11 18-6-6 6-6\"><\/path>\n                                <\/svg>\n                            <\/button>\n\n                            <button\n                                type=\"button\"\n                                class=\"dx-woo-dashboard-arrow dx-woo-dashboard-next\"\n                                aria-label=\"Next screenshot\"\n                            >\n                                <svg\n                                    viewBox=\"0 0 24 24\"\n                                    aria-hidden=\"true\"\n                                >\n                                    <path d=\"M5 12h14\"><\/path>\n                                    <path d=\"m13 6 6 6-6 6\"><\/path>\n                                <\/svg>\n                            <\/button>\n\n                        <\/div>\n\n                        <div\n                            class=\"dx-woo-dashboard-dots\"\n                            aria-label=\"Choose screenshot\"\n                        >\n                            <button\n                                type=\"button\"\n                                class=\"dx-woo-dashboard-dot is-active\"\n                                data-index=\"0\"\n                                aria-label=\"Show first screenshot\"\n                                aria-current=\"true\"\n                            ><\/button>\n\n                            <button\n                                type=\"button\"\n                                class=\"dx-woo-dashboard-dot\"\n                                data-index=\"1\"\n                                aria-label=\"Show second screenshot\"\n                            ><\/button>\n\n                            <button\n                                type=\"button\"\n                                class=\"dx-woo-dashboard-dot\"\n                                data-index=\"2\"\n                                aria-label=\"Show third screenshot\"\n                            ><\/button>\n\n                            <button\n                                type=\"button\"\n                                class=\"dx-woo-dashboard-dot\"\n                                data-index=\"3\"\n                                aria-label=\"Show fourth screenshot\"\n                            ><\/button>\n\n                            <button\n                                type=\"button\"\n                                class=\"dx-woo-dashboard-dot\"\n                                data-index=\"4\"\n                                aria-label=\"Show fifth screenshot\"\n                            ><\/button>\n\n                            <button\n                                type=\"button\"\n                                class=\"dx-woo-dashboard-dot\"\n                                data-index=\"5\"\n                                aria-label=\"Show sixth screenshot\"\n                            ><\/button>\n                        <\/div>\n\n                        <span\n                            class=\"dx-woo-dashboard-counter\"\n                            aria-live=\"polite\"\n                        >\n                            01 \/ 06\n                        <\/span>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n            <div class=\"dx-woo-dashboard-bottom\">\n\n                <div class=\"dx-woo-dashboard-bottom-item\">\n\n                    <span\n                        class=\"dx-woo-dashboard-bottom-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M6 3h12l2 4v14H4V7Z\"><\/path>\n                            <path d=\"M4 7h16\"><\/path>\n                            <path d=\"M9 11h6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <span>\n                        <span class=\"dx-woo-dashboard-bottom-title\">\n                            Order Management\n                        <\/span>\n\n                        <span class=\"dx-woo-dashboard-bottom-text\">\n                            Track statuses, details, and customers.\n                        <\/span>\n                    <\/span>\n\n                <\/div>\n\n                <div class=\"dx-woo-dashboard-bottom-item\">\n\n                    <span\n                        class=\"dx-woo-dashboard-bottom-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M6 3h12l3 5-9 13L3 8Z\"><\/path>\n                            <path d=\"M3 8h18\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <span>\n                        <span class=\"dx-woo-dashboard-bottom-title\">\n                            Products & Inventory\n                        <\/span>\n\n                        <span class=\"dx-woo-dashboard-bottom-text\">\n                            Update prices, quantities, and categories.\n                        <\/span>\n                    <\/span>\n\n                <\/div>\n\n                <div class=\"dx-woo-dashboard-bottom-item\">\n\n                    <span\n                        class=\"dx-woo-dashboard-bottom-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M4 19V5\"><\/path>\n                            <path d=\"M4 19h16\"><\/path>\n                            <path d=\"M8 16v-5\"><\/path>\n                            <path d=\"M12 16V8\"><\/path>\n                            <path d=\"M16 16v-3\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <span>\n                        <span class=\"dx-woo-dashboard-bottom-title\">\n                            Reports\n                        <\/span>\n\n                        <span class=\"dx-woo-dashboard-bottom-text\">\n                            Monitor sales and product performance.\n                        <\/span>\n                    <\/span>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxWooDashboard() {\n        const section = document.getElementById(\n            \"dx-woo-dashboard\"\n        );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized = \"true\";\n\n        const widget = section.closest(\n            \".elementor-widget-html\"\n        );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-woo-dashboard-widget-fullwidth\"\n            );\n        }\n\n        const slider = section.querySelector(\n            \".dx-woo-dashboard-slider\"\n        );\n\n        const slides = Array.from(\n            section.querySelectorAll(\n                \".dx-woo-dashboard-slide\"\n            )\n        );\n\n        const dots = Array.from(\n            section.querySelectorAll(\n                \".dx-woo-dashboard-dot\"\n            )\n        );\n\n        const previousButton = section.querySelector(\n            \".dx-woo-dashboard-prev\"\n        );\n\n        const nextButton = section.querySelector(\n            \".dx-woo-dashboard-next\"\n        );\n\n        const counter = section.querySelector(\n            \".dx-woo-dashboard-counter\"\n        );\n\n        if (\n            !slider ||\n            !slides.length ||\n            !previousButton ||\n            !nextButton\n        ) {\n            return;\n        }\n\n        let activeIndex = 0;\n        let autoplayTimer = null;\n\n        const reduceMotion = window.matchMedia(\n            \"(prefers-reduced-motion: reduce)\"\n        ).matches;\n\n        function formatNumber(value) {\n            return String(value).padStart(2, \"0\");\n        }\n\n        function showSlide(index) {\n            activeIndex =\n                (index + slides.length) %\n                slides.length;\n\n            slides.forEach(function (slide, slideIndex) {\n                const isActive =\n                    slideIndex === activeIndex;\n\n                slide.classList.toggle(\n                    \"is-active\",\n                    isActive\n                );\n\n                slide.setAttribute(\n                    \"aria-hidden\",\n                    String(!isActive)\n                );\n            });\n\n            dots.forEach(function (dot, dotIndex) {\n                const isActive =\n                    dotIndex === activeIndex;\n\n                dot.classList.toggle(\n                    \"is-active\",\n                    isActive\n                );\n\n                if (isActive) {\n                    dot.setAttribute(\n                        \"aria-current\",\n                        \"true\"\n                    );\n                } else {\n                    dot.removeAttribute(\n                        \"aria-current\"\n                    );\n                }\n            });\n\n            if (counter) {\n                counter.textContent =\n                    formatNumber(activeIndex + 1) +\n                    \" \/ \" +\n                    formatNumber(slides.length);\n            }\n        }\n\n        function stopAutoplay() {\n            if (autoplayTimer) {\n                window.clearInterval(\n                    autoplayTimer\n                );\n\n                autoplayTimer = null;\n            }\n        }\n\n        function startAutoplay() {\n            stopAutoplay();\n\n            if (\n                reduceMotion ||\n                document.hidden\n            ) {\n                return;\n            }\n\n            autoplayTimer = window.setInterval(\n                function () {\n                    showSlide(activeIndex + 1);\n                },\n                5500\n            );\n        }\n\n        previousButton.addEventListener(\n            \"click\",\n            function () {\n                showSlide(activeIndex - 1);\n                startAutoplay();\n            }\n        );\n\n        nextButton.addEventListener(\n            \"click\",\n            function () {\n                showSlide(activeIndex + 1);\n                startAutoplay();\n            }\n        );\n\n        dots.forEach(function (dot) {\n            dot.addEventListener(\n                \"click\",\n                function () {\n                    const index = Number(\n                        dot.dataset.index\n                    );\n\n                    if (\n                        Number.isInteger(index)\n                    ) {\n                        showSlide(index);\n                        startAutoplay();\n                    }\n                }\n            );\n        });\n\n        slider.addEventListener(\n            \"mouseenter\",\n            stopAutoplay\n        );\n\n        slider.addEventListener(\n            \"mouseleave\",\n            startAutoplay\n        );\n\n        slider.addEventListener(\n            \"focusin\",\n            stopAutoplay\n        );\n\n        slider.addEventListener(\n            \"focusout\",\n            function (event) {\n                if (\n                    !slider.contains(\n                        event.relatedTarget\n                    )\n                ) {\n                    startAutoplay();\n                }\n            }\n        );\n\n        document.addEventListener(\n            \"visibilitychange\",\n            function () {\n                if (document.hidden) {\n                    stopAutoplay();\n                } else {\n                    startAutoplay();\n                }\n            }\n        );\n\n        showSlide(0);\n        startAutoplay();\n\n        if (\n            !(\"IntersectionObserver\" in window) ||\n            reduceMotion\n        ) {\n            return;\n        }\n\n        const info = section.querySelector(\n            \".dx-woo-dashboard-info\"\n        );\n\n        const sliderPanel = section.querySelector(\n            \".dx-woo-dashboard-slider\"\n        );\n\n        const bottomItems = section.querySelectorAll(\n            \".dx-woo-dashboard-bottom-item\"\n        );\n\n        if (info) {\n            info.style.opacity = \"0\";\n            info.style.transform =\n                \"translateX(-30px)\";\n\n            info.style.transition =\n                \"opacity 0.7s ease, transform 0.7s ease\";\n        }\n\n        if (sliderPanel) {\n            sliderPanel.style.opacity = \"0\";\n            sliderPanel.style.transform =\n                \"translateX(30px)\";\n\n            sliderPanel.style.transition =\n                \"opacity 0.75s ease 0.08s, transform 0.75s ease 0.08s\";\n        }\n\n        bottomItems.forEach(function (item, index) {\n            item.style.opacity = \"0\";\n            item.style.transform =\n                \"translateY(20px)\";\n\n            item.style.transition =\n                \"opacity 0.6s ease \" +\n                (0.18 + index * 0.08) +\n                \"s, transform 0.6s ease \" +\n                (0.18 + index * 0.08) +\n                \"s\";\n        });\n\n        const observer = new IntersectionObserver(\n            function (entries, currentObserver) {\n                entries.forEach(function (entry) {\n                    if (!entry.isIntersecting) {\n                        return;\n                    }\n\n                    if (info) {\n                        info.style.opacity = \"1\";\n                        info.style.transform =\n                            \"translateX(0)\";\n                    }\n\n                    if (sliderPanel) {\n                        sliderPanel.style.opacity = \"1\";\n                        sliderPanel.style.transform =\n                            \"translateX(0)\";\n                    }\n\n                    bottomItems.forEach(function (item) {\n                        item.style.opacity = \"1\";\n                        item.style.transform =\n                            \"translateY(0)\";\n                    });\n\n                    currentObserver.unobserve(\n                        entry.target\n                    );\n                });\n            },\n            {\n                threshold: 0.1\n            }\n        );\n\n        observer.observe(section);\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxWooDashboard\n        );\n    } else {\n        initDxWooDashboard();\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-27c6e47 e-con-full e-flex e-con e-parent\" data-id=\"27c6e47\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ef767a4 elementor-widget elementor-widget-html\" data-id=\"ef767a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n.elementor-widget-html:has(#dx-woo-deliverables),\n.elementor-widget-html:has(#dx-woo-deliverables) > .elementor-widget-container,\n.dx-woo-deliverables-widget-fullwidth,\n.dx-woo-deliverables-widget-fullwidth > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n#dx-woo-deliverables,\n#dx-woo-deliverables *,\n#dx-woo-deliverables *::before,\n#dx-woo-deliverables *::after {\n    box-sizing: border-box;\n}\n\n#dx-woo-deliverables {\n    --dx-bg: #f7f5fb;\n    --dx-white: #ffffff;\n    --dx-dark: #180b35;\n    --dx-text: #6d6478;\n    --dx-muted: #958d9f;\n    --dx-purple: #6942d8;\n    --dx-purple-light: #9168ef;\n    --dx-yellow: #ffc441;\n    --dx-green: #54d696;\n    --dx-blue: #58a8f7;\n    --dx-border: rgba(105, 66, 216, 0.14);\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n    direction: ltr;\n\n    color: var(--dx-dark);\n\n    background:\n        radial-gradient(\n            circle at 8% 14%,\n            rgba(105, 66, 216, 0.08),\n            transparent 25%\n        ),\n        radial-gradient(\n            circle at 92% 86%,\n            rgba(145, 104, 239, 0.08),\n            transparent 27%\n        ),\n        var(--dx-bg);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-woo-deliverables a {\n    color: inherit;\n    text-decoration: none;\n}\n\n#dx-woo-deliverables .dx-woo-deliverables-grid-bg {\n    position: absolute;\n    z-index: -6;\n\n    inset: 0;\n\n    opacity: 0.15;\n\n    background-image:\n        linear-gradient(\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        );\n\n    background-size: 72px 72px;\n\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 18%,\n            transparent 82%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 18%,\n            transparent 82%\n        );\n\n    pointer-events: none;\n}\n\n#dx-woo-deliverables .dx-woo-deliverables-circle {\n    position: absolute;\n    z-index: -5;\n\n    border: 1px solid rgba(105, 66, 216, 0.08);\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-woo-deliverables .dx-woo-deliverables-circle-one {\n    top: -230px;\n    left: -190px;\n\n    width: 470px;\n    height: 470px;\n}\n\n#dx-woo-deliverables .dx-woo-deliverables-circle-two {\n    right: -250px;\n    bottom: -300px;\n\n    width: 560px;\n    height: 560px;\n}\n\n#dx-woo-deliverables .dx-woo-deliverables-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        94px\n        clamp(22px, 5vw, 90px)\n        100px;\n}\n\n#dx-woo-deliverables .dx-woo-deliverables-container {\n    width: min(1420px, 100%);\n\n    margin: 0 auto;\n}\n\n#dx-woo-deliverables .dx-woo-deliverables-header {\n    max-width: 870px;\n\n    margin: 0 auto 49px;\n\n    text-align: center;\n}\n\n#dx-woo-deliverables .dx-woo-deliverables-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    margin-bottom: 12px;\n\n    color: var(--dx-purple);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-woo-deliverables .dx-woo-deliverables-eyebrow::before,\n#dx-woo-deliverables .dx-woo-deliverables-eyebrow::after {\n    content: \"\";\n\n    width: 31px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-yellow),\n            var(--dx-purple-light)\n        );\n}\n\n#dx-woo-deliverables .dx-woo-deliverables-title {\n    margin: 0;\n\n    color: var(--dx-dark);\n\n    font-size: clamp(32px, 3.6vw, 50px);\n    font-weight: 900;\n    line-height: 1.55;\n    letter-spacing: -0.45px;\n\n    text-wrap: balance;\n}\n\n#dx-woo-deliverables .dx-woo-deliverables-title span {\n    color: var(--dx-purple);\n}\n\n#dx-woo-deliverables .dx-woo-deliverables-description {\n    max-width: 740px;\n\n    margin: 14px auto 0;\n\n    color: var(--dx-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n\n    text-wrap: pretty;\n}\n\n#dx-woo-deliverables .dx-woo-deliverables-layout {\n    display: grid;\n    grid-template-columns:\n        minmax(0, 1.15fr)\n        minmax(340px, 0.85fr);\n\n    align-items: stretch;\n\n    gap: 25px;\n}\n\n#dx-woo-deliverables .dx-woo-deliverables-cards {\n    display: grid;\n    grid-template-columns:\n        repeat(2, minmax(0, 1fr));\n\n    gap: 18px;\n}\n\n#dx-woo-deliverables .dx-woo-deliverable-card {\n    position: relative;\n    isolation: isolate;\n\n    min-width: 0;\n    min-height: 245px;\n\n    display: flex;\n    flex-direction: column;\n\n    overflow: hidden;\n\n    padding:\n        26px\n        23px;\n\n    border: 1px solid var(--dx-border);\n    border-radius: 22px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.99),\n            rgba(250, 248, 254, 0.97)\n        );\n\n    box-shadow:\n        0 20px 52px rgba(40, 18, 84, 0.09),\n        inset 0 1px 0 rgba(255, 255, 255, 1);\n\n    transition:\n        transform 0.32s ease,\n        border-color 0.32s ease,\n        box-shadow 0.32s ease;\n}\n\n#dx-woo-deliverables .dx-woo-deliverable-card:hover,\n#dx-woo-deliverables .dx-woo-deliverable-card:focus-within {\n    border-color: rgba(105, 66, 216, 0.34);\n\n    box-shadow:\n        0 30px 68px rgba(40, 18, 84, 0.15);\n\n    transform: translateY(-7px);\n}\n\n#dx-woo-deliverables .dx-woo-deliverable-card::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    left: -100px;\n    bottom: -120px;\n\n    width: 240px;\n    height: 240px;\n\n    border-radius: 50%;\n\n    background: rgba(105, 66, 216, 0.09);\n\n    filter: blur(75px);\n\n    opacity: 0;\n\n    transition: opacity 0.32s ease;\n\n    pointer-events: none;\n}\n\n#dx-woo-deliverables .dx-woo-deliverable-card:hover::before,\n#dx-woo-deliverables .dx-woo-deliverable-card:focus-within::before {\n    opacity: 1;\n}\n\n#dx-woo-deliverables .dx-woo-deliverable-top {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n\n    gap: 15px;\n}\n\n#dx-woo-deliverables .dx-woo-deliverable-icon {\n    width: 58px;\n    height: 58px;\n    flex: 0 0 58px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 17px;\n\n    color: var(--dx-purple);\n\n    background: rgba(105, 66, 216, 0.1);\n\n    box-shadow:\n        inset 0 0 0 1px rgba(105, 66, 216, 0.07);\n\n    transition:\n        transform 0.3s ease,\n        background 0.3s ease;\n}\n\n#dx-woo-deliverables .dx-woo-deliverable-card:nth-child(2)\n    .dx-woo-deliverable-icon,\n#dx-woo-deliverables .dx-woo-deliverable-card:nth-child(5)\n    .dx-woo-deliverable-icon {\n    color: #936500;\n\n    background: rgba(255, 196, 65, 0.15);\n}\n\n#dx-woo-deliverables .dx-woo-deliverable-card:nth-child(3)\n    .dx-woo-deliverable-icon,\n#dx-woo-deliverables .dx-woo-deliverable-card:nth-child(6)\n    .dx-woo-deliverable-icon {\n    color: #16845a;\n\n    background: rgba(84, 214, 150, 0.13);\n}\n\n#dx-woo-deliverables .dx-woo-deliverable-card:nth-child(4)\n    .dx-woo-deliverable-icon {\n    color: #2172bd;\n\n    background: rgba(88, 168, 247, 0.13);\n}\n\n#dx-woo-deliverables .dx-woo-deliverable-card:hover\n    .dx-woo-deliverable-icon {\n    transform:\n        translateY(-4px)\n        rotate(-4deg);\n}\n\n#dx-woo-deliverables .dx-woo-deliverable-icon svg {\n    width: 28px;\n    height: 28px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-deliverables .dx-woo-deliverable-number {\n    color: rgba(105, 66, 216, 0.16);\n\n    font-size: 24px;\n    font-weight: 900;\n    line-height: 1;\n}\n\n#dx-woo-deliverables .dx-woo-deliverable-title {\n    margin:\n        20px\n        0\n        0;\n\n    color: var(--dx-dark);\n\n    font-size: 19px;\n    font-weight: 900;\n    line-height: 1.6;\n\n    text-wrap: balance;\n}\n\n#dx-woo-deliverables .dx-woo-deliverable-text {\n    margin:\n        8px\n        0\n        0;\n\n    color: var(--dx-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.95;\n\n    text-wrap: pretty;\n}\n\n#dx-woo-deliverables .dx-woo-deliverable-note {\n    margin-top: auto;\n    padding-top: 17px;\n\n    display: flex;\n    align-items: center;\n\n    gap: 8px;\n\n    border-top: 1px solid rgba(105, 66, 216, 0.09);\n\n    color: var(--dx-muted);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.6;\n}\n\n#dx-woo-deliverables .dx-woo-deliverable-dot {\n    width: 8px;\n    height: 8px;\n    flex: 0 0 8px;\n\n    border-radius: 50%;\n\n    background: var(--dx-purple);\n\n    box-shadow:\n        0 0 0 5px rgba(105, 66, 216, 0.08);\n}\n\n#dx-woo-deliverables .dx-woo-deliverable-card:nth-child(2)\n    .dx-woo-deliverable-dot,\n#dx-woo-deliverables .dx-woo-deliverable-card:nth-child(5)\n    .dx-woo-deliverable-dot {\n    background: var(--dx-yellow);\n\n    box-shadow:\n        0 0 0 5px rgba(255, 196, 65, 0.1);\n}\n\n#dx-woo-deliverables .dx-woo-deliverable-card:nth-child(3)\n    .dx-woo-deliverable-dot,\n#dx-woo-deliverables .dx-woo-deliverable-card:nth-child(6)\n    .dx-woo-deliverable-dot {\n    background: var(--dx-green);\n\n    box-shadow:\n        0 0 0 5px rgba(84, 214, 150, 0.1);\n}\n\n#dx-woo-deliverables .dx-woo-deliverable-card:nth-child(4)\n    .dx-woo-deliverable-dot {\n    background: var(--dx-blue);\n\n    box-shadow:\n        0 0 0 5px rgba(88, 168, 247, 0.1);\n}\n\n#dx-woo-deliverables .dx-woo-deliverables-summary {\n    position: relative;\n    isolation: isolate;\n\n    min-height: 100%;\n\n    display: flex;\n    flex-direction: column;\n\n    overflow: hidden;\n\n    padding:\n        35px\n        31px;\n\n    border: 1px solid rgba(255, 255, 255, 0.14);\n    border-radius: 26px;\n\n    color: #ffffff;\n\n    background:\n        radial-gradient(\n            circle at 8% 8%,\n            rgba(145, 104, 239, 0.23),\n            transparent 31%\n        ),\n        linear-gradient(\n            145deg,\n            #1b0a3d,\n            #0c0225\n        );\n\n    box-shadow:\n        0 27px 68px rgba(40, 18, 84, 0.18);\n}\n\n#dx-woo-deliverables .dx-woo-deliverables-summary::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    right: -135px;\n    bottom: -175px;\n\n    width: 350px;\n    height: 350px;\n\n    border-radius: 50%;\n\n    background: rgba(255, 196, 65, 0.08);\n\n    filter: blur(95px);\n\n    pointer-events: none;\n}\n\n#dx-woo-deliverables .dx-woo-summary-icon {\n    width: 72px;\n    height: 72px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid rgba(255, 255, 255, 0.14);\n    border-radius: 22px;\n\n    color: #180b35;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-yellow),\n            #ffd66e\n        );\n\n    box-shadow:\n        0 18px 38px rgba(255, 196, 65, 0.22);\n}\n\n#dx-woo-deliverables .dx-woo-summary-icon svg {\n    width: 34px;\n    height: 34px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-deliverables .dx-woo-summary-label {\n    display: block;\n\n    margin-top: 27px;\n\n    color: var(--dx-yellow);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-woo-deliverables .dx-woo-summary-title {\n    margin:\n        8px\n        0\n        0;\n\n    color: #ffffff;\n\n    font-size: 29px;\n    font-weight: 900;\n    line-height: 1.55;\n\n    text-wrap: balance;\n}\n\n#dx-woo-deliverables .dx-woo-summary-text {\n    margin:\n        13px\n        0\n        0;\n\n    color: rgba(255, 255, 255, 0.69);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n}\n\n#dx-woo-deliverables .dx-woo-summary-list {\n    margin-top: 26px;\n    padding-top: 22px;\n\n    display: grid;\n\n    gap: 12px;\n\n    border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n#dx-woo-deliverables .dx-woo-summary-item {\n    display: flex;\n    align-items: flex-start;\n\n    gap: 10px;\n\n    color: rgba(255, 255, 255, 0.73);\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.8;\n}\n\n#dx-woo-deliverables .dx-woo-summary-check {\n    width: 25px;\n    height: 25px;\n    flex: 0 0 25px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 8px;\n\n    color: #7ce3b3;\n\n    background: rgba(84, 214, 150, 0.12);\n}\n\n#dx-woo-deliverables .dx-woo-summary-check svg {\n    width: 13px;\n    height: 13px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2.3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-deliverables .dx-woo-summary-button {\n    width: 100%;\n    min-height: 52px;\n\n    margin-top: auto;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 9px;\n\n    padding:\n        0\n        20px;\n\n    border: 1px solid rgba(255, 255, 255, 0.17);\n    border-radius: 12px;\n\n    color: #180b35;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-yellow),\n            #ffd66e\n        );\n\n    box-shadow:\n        0 17px 37px rgba(255, 196, 65, 0.21);\n\n    font-size: 14px;\n    font-weight: 900;\n\n    transition:\n        transform 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-woo-deliverables .dx-woo-summary-button:hover,\n#dx-woo-deliverables .dx-woo-summary-button:focus-visible {\n    box-shadow:\n        0 23px 47px rgba(255, 196, 65, 0.3);\n\n    transform: translateY(-3px);\n}\n\n#dx-woo-deliverables .dx-woo-summary-button svg {\n    width: 18px;\n    height: 18px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n@media (max-width: 1050px) {\n    #dx-woo-deliverables .dx-woo-deliverables-layout {\n        grid-template-columns: 1fr;\n    }\n\n    #dx-woo-deliverables .dx-woo-deliverables-summary {\n        min-height: 0;\n    }\n\n    #dx-woo-deliverables .dx-woo-summary-button {\n        margin-top: 28px;\n    }\n}\n\n@media (max-width: 980px) {\n    #dx-woo-deliverables .dx-woo-deliverables-main {\n        padding:\n            76px\n            28px\n            82px;\n    }\n}\n\n@media (max-width: 680px) {\n    #dx-woo-deliverables .dx-woo-deliverables-main {\n        padding:\n            59px\n            16px\n            65px;\n    }\n\n    #dx-woo-deliverables .dx-woo-deliverables-header {\n        margin-bottom: 34px;\n    }\n\n    #dx-woo-deliverables .dx-woo-deliverables-eyebrow {\n        font-size: 14px;\n    }\n\n    #dx-woo-deliverables .dx-woo-deliverables-eyebrow::before,\n    #dx-woo-deliverables .dx-woo-deliverables-eyebrow::after {\n        width: 22px;\n    }\n\n    #dx-woo-deliverables .dx-woo-deliverables-title {\n        font-size: clamp(27px, 8.3vw, 36px);\n        line-height: 1.65;\n        letter-spacing: -0.2px;\n    }\n\n    #dx-woo-deliverables .dx-woo-deliverables-description {\n        margin-top: 10px;\n\n        font-size: 14px;\n        line-height: 2;\n    }\n\n    #dx-woo-deliverables .dx-woo-deliverables-layout {\n        gap: 15px;\n    }\n\n    #dx-woo-deliverables .dx-woo-deliverables-cards {\n        grid-template-columns: 1fr;\n\n        gap: 12px;\n    }\n\n    #dx-woo-deliverables .dx-woo-deliverable-card {\n        min-height: 0;\n\n        padding:\n            21px\n            18px;\n\n        border-radius: 18px;\n    }\n\n    #dx-woo-deliverables .dx-woo-deliverable-icon {\n        width: 52px;\n        height: 52px;\n        flex-basis: 52px;\n\n        border-radius: 15px;\n    }\n\n    #dx-woo-deliverables .dx-woo-deliverable-icon svg {\n        width: 25px;\n        height: 25px;\n    }\n\n    #dx-woo-deliverables .dx-woo-deliverable-title {\n        margin-top: 17px;\n\n        font-size: 18px;\n    }\n\n    #dx-woo-deliverables .dx-woo-deliverable-text {\n        font-size: 14px;\n    }\n\n    #dx-woo-deliverables .dx-woo-deliverable-note {\n        margin-top: 17px;\n\n        font-size: 14px;\n    }\n\n    #dx-woo-deliverables .dx-woo-deliverables-summary {\n        padding:\n            25px\n            20px;\n\n        border-radius: 20px;\n    }\n\n    #dx-woo-deliverables .dx-woo-summary-icon {\n        width: 60px;\n        height: 60px;\n\n        border-radius: 18px;\n    }\n\n    #dx-woo-deliverables .dx-woo-summary-icon svg {\n        width: 29px;\n        height: 29px;\n    }\n\n    #dx-woo-deliverables .dx-woo-summary-label {\n        margin-top: 21px;\n\n        font-size: 14px;\n    }\n\n    #dx-woo-deliverables .dx-woo-summary-title {\n        margin-top: 6px;\n\n        font-size: 23px;\n        line-height: 1.6;\n    }\n\n    #dx-woo-deliverables .dx-woo-summary-text {\n        margin-top: 9px;\n\n        font-size: 14px;\n        line-height: 1.95;\n    }\n\n    #dx-woo-deliverables .dx-woo-summary-item {\n        font-size: 14px;\n    }\n\n    #dx-woo-deliverables .dx-woo-summary-button {\n        font-size: 14px;\n    }\n\n    #dx-woo-deliverables .dx-woo-deliverables-circle {\n        display: none;\n    }\n}\n\n#dx-woo-deliverables a:focus-visible {\n    outline: 3px solid var(--dx-yellow);\n    outline-offset: 4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    #dx-woo-deliverables *,\n    #dx-woo-deliverables *::before,\n    #dx-woo-deliverables *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-woo-deliverables\"\n    aria-labelledby=\"dx-woo-deliverables-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n    <div\n        class=\"dx-woo-deliverables-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <span\n        class=\"dx-woo-deliverables-circle dx-woo-deliverables-circle-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-woo-deliverables-circle dx-woo-deliverables-circle-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-woo-deliverables-main\">\n\n        <div class=\"dx-woo-deliverables-container\">\n\n            <header class=\"dx-woo-deliverables-header\">\n\n                <span class=\"dx-woo-deliverables-eyebrow\">\n                    Your Store Essentials\n                <\/span>\n\n                <h2\n                    id=\"dx-woo-deliverables-title\"\n                    class=\"dx-woo-deliverables-title\"\n                >\n                    What Do You Get With Your\n                    <span>WooCommerce Store?<\/span>\n                <\/h2>\n\n                <p class=\"dx-woo-deliverables-description\">\n                    We set up the essential components you need to manage\n                    products, orders, customers, payments, and shipping\n                    from one place, with a design tailored to your brand\n                    and business model.\n                <\/p>\n\n            <\/header>\n\n            <div class=\"dx-woo-deliverables-layout\">\n\n                <div class=\"dx-woo-deliverables-cards\">\n\n                    <article class=\"dx-woo-deliverable-card\">\n\n                        <div class=\"dx-woo-deliverable-top\">\n\n                            <span\n                                class=\"dx-woo-deliverable-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M6 3h12l3 5-9 13L3 8Z\"><\/path>\n                                    <path d=\"M3 8h18\"><\/path>\n                                    <path d=\"m8 8 4 13 4-13\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span class=\"dx-woo-deliverable-number\">\n                                01\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-woo-deliverable-title\">\n                            Product Management\n                        <\/h3>\n\n                        <p class=\"dx-woo-deliverable-text\">\n                            Add products, categories, images, prices,\n                            attributes, and variations in a structured\n                            way that is easy to update.\n                        <\/p>\n\n                        <div class=\"dx-woo-deliverable-note\">\n                            <span class=\"dx-woo-deliverable-dot\"><\/span>\n                            Simple, variable, and digital products\n                        <\/div>\n\n                    <\/article>\n\n                    <article class=\"dx-woo-deliverable-card\">\n\n                        <div class=\"dx-woo-deliverable-top\">\n\n                            <span\n                                class=\"dx-woo-deliverable-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M6 3h12l2 4v14H4V7Z\"><\/path>\n                                    <path d=\"M4 7h16\"><\/path>\n                                    <path d=\"M9 11h6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span class=\"dx-woo-deliverable-number\">\n                                02\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-woo-deliverable-title\">\n                            Orders & Inventory\n                        <\/h3>\n\n                        <p class=\"dx-woo-deliverable-text\">\n                            Track orders, update their statuses, manage\n                            quantities and stock levels, and receive\n                            inventory-related product alerts.\n                        <\/p>\n\n                        <div class=\"dx-woo-deliverable-note\">\n                            <span class=\"dx-woo-deliverable-dot\"><\/span>\n                            Clear visibility into store activity\n                        <\/div>\n\n                    <\/article>\n\n                    <article class=\"dx-woo-deliverable-card\">\n\n                        <div class=\"dx-woo-deliverable-top\">\n\n                            <span\n                                class=\"dx-woo-deliverable-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <circle\n                                        cx=\"9\"\n                                        cy=\"8\"\n                                        r=\"3\"\n                                    ><\/circle>\n                                    <path d=\"M3 21v-2a6 6 0 0 1 12 0v2\"><\/path>\n                                    <circle\n                                        cx=\"17\"\n                                        cy=\"9\"\n                                        r=\"2\"\n                                    ><\/circle>\n                                    <path d=\"M16 15a5 5 0 0 1 5 5v1\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span class=\"dx-woo-deliverable-number\">\n                                03\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-woo-deliverable-title\">\n                            Customer Accounts\n                        <\/h3>\n\n                        <p class=\"dx-woo-deliverable-text\">\n                            Allow customers to register and manage\n                            account details, addresses, and order history,\n                            making repeat purchases more convenient.\n                        <\/p>\n\n                        <div class=\"dx-woo-deliverable-note\">\n                            <span class=\"dx-woo-deliverable-dot\"><\/span>\n                            A more organized customer experience\n                        <\/div>\n\n                    <\/article>\n\n                    <article class=\"dx-woo-deliverable-card\">\n\n                        <div class=\"dx-woo-deliverable-top\">\n\n                            <span\n                                class=\"dx-woo-deliverable-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <rect\n                                        x=\"3\"\n                                        y=\"5\"\n                                        width=\"18\"\n                                        height=\"14\"\n                                        rx=\"2\"\n                                    ><\/rect>\n                                    <path d=\"M3 10h18\"><\/path>\n                                    <path d=\"M7 15h2\"><\/path>\n                                    <path d=\"M13 15h4\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span class=\"dx-woo-deliverable-number\">\n                                04\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-woo-deliverable-title\">\n                            Payment Gateways\n                        <\/h3>\n\n                        <p class=\"dx-woo-deliverable-text\">\n                            Connect payment methods that suit your target\n                            market and configure a clear checkout and\n                            order completion process.\n                        <\/p>\n\n                        <div class=\"dx-woo-deliverable-note\">\n                            <span class=\"dx-woo-deliverable-dot\"><\/span>\n                            Online payment or cash on delivery\n                        <\/div>\n\n                    <\/article>\n\n                    <article class=\"dx-woo-deliverable-card\">\n\n                        <div class=\"dx-woo-deliverable-top\">\n\n                            <span\n                                class=\"dx-woo-deliverable-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M3 7h11v10H3Z\"><\/path>\n                                    <path d=\"M14 10h4l3 3v4h-7Z\"><\/path>\n                                    <circle\n                                        cx=\"7\"\n                                        cy=\"18\"\n                                        r=\"2\"\n                                    ><\/circle>\n                                    <circle\n                                        cx=\"18\"\n                                        cy=\"18\"\n                                        r=\"2\"\n                                    ><\/circle>\n                                <\/svg>\n                            <\/span>\n\n                            <span class=\"dx-woo-deliverable-number\">\n                                05\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-woo-deliverable-title\">\n                            Shipping Setup\n                        <\/h3>\n\n                        <p class=\"dx-woo-deliverable-text\">\n                            Configure shipping zones, methods, and rates,\n                            with the option to connect compatible shipping\n                            providers based on your store requirements.\n                        <\/p>\n\n                        <div class=\"dx-woo-deliverable-note\">\n                            <span class=\"dx-woo-deliverable-dot\"><\/span>\n                            Flexible shipping options\n                        <\/div>\n\n                    <\/article>\n\n                    <article class=\"dx-woo-deliverable-card\">\n\n                        <div class=\"dx-woo-deliverable-top\">\n\n                            <span\n                                class=\"dx-woo-deliverable-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M4 19V5\"><\/path>\n                                    <path d=\"M4 19h16\"><\/path>\n                                    <path d=\"M8 16v-5\"><\/path>\n                                    <path d=\"M12 16V8\"><\/path>\n                                    <path d=\"M16 16v-3\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span class=\"dx-woo-deliverable-number\">\n                                06\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-woo-deliverable-title\">\n                            Reports & Monitoring\n                        <\/h3>\n\n                        <p class=\"dx-woo-deliverable-text\">\n                            Monitor sales, orders, customers, and products\n                            through reports that help you understand how\n                            your store is performing.\n                        <\/p>\n\n                        <div class=\"dx-woo-deliverable-note\">\n                            <span class=\"dx-woo-deliverable-dot\"><\/span>\n                            Better visibility into sales performance\n                        <\/div>\n\n                    <\/article>\n\n                <\/div>\n\n                <aside class=\"dx-woo-deliverables-summary\">\n\n                    <span\n                        class=\"dx-woo-summary-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M3 5h2l2 11h10l2-8H7\"><\/path>\n                            <circle\n                                cx=\"9\"\n                                cy=\"20\"\n                                r=\"1\"\n                            ><\/circle>\n                            <circle\n                                cx=\"17\"\n                                cy=\"20\"\n                                r=\"1\"\n                            ><\/circle>\n                        <\/svg>\n                    <\/span>\n\n                    <span class=\"dx-woo-summary-label\">\n                        A Store Ready to Manage\n                    <\/span>\n\n                    <h3 class=\"dx-woo-summary-title\">\n                        Everything You Need to Start Selling From One Place\n                    <\/h3>\n\n                    <p class=\"dx-woo-summary-text\">\n                        The store is configured around your products and\n                        operational process so you can manage daily\n                        e-commerce activities easily through WooCommerce.\n                    <\/p>\n\n                    <div class=\"dx-woo-summary-list\">\n\n                        <div class=\"dx-woo-summary-item\">\n\n                            <span\n                                class=\"dx-woo-summary-check\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span>\n                                One dashboard for products, orders,\n                                and customer management.\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-woo-summary-item\">\n\n                            <span\n                                class=\"dx-woo-summary-check\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span>\n                                Storefront design tailored to your\n                                brand and target audience.\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-woo-summary-item\">\n\n                            <span\n                                class=\"dx-woo-summary-check\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span>\n                                Required payment and shipping solutions\n                                configured for your market.\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-woo-summary-item\">\n\n                            <span\n                                class=\"dx-woo-summary-check\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span>\n                                The flexibility to add new features\n                                and integrations in the future.\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/contact\/\"\n                        class=\"dx-woo-summary-button\"\n                    >\n                        <span>Define Your Store Features<\/span>\n\n                        <svg\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n                    <\/a>\n\n                <\/aside>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxWooDeliverables() {\n        const section = document.getElementById(\n            \"dx-woo-deliverables\"\n        );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized = \"true\";\n\n        const widget = section.closest(\n            \".elementor-widget-html\"\n        );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-woo-deliverables-widget-fullwidth\"\n            );\n        }\n\n        if (\n            !(\"IntersectionObserver\" in window) ||\n            window.matchMedia(\n                \"(prefers-reduced-motion: reduce)\"\n            ).matches\n        ) {\n            return;\n        }\n\n        const cards = section.querySelectorAll(\n            \".dx-woo-deliverable-card\"\n        );\n\n        const summary = section.querySelector(\n            \".dx-woo-deliverables-summary\"\n        );\n\n        cards.forEach(function (card, index) {\n            card.style.opacity = \"0\";\n            card.style.transform =\n                \"translateY(26px)\";\n\n            card.style.transition =\n                \"opacity 0.62s ease \" +\n                (index * 0.07) +\n                \"s, transform 0.62s ease \" +\n                (index * 0.07) +\n                \"s\";\n        });\n\n        if (summary) {\n            summary.style.opacity = \"0\";\n            summary.style.transform =\n                \"translateX(30px)\";\n\n            summary.style.transition =\n                \"opacity 0.72s ease 0.12s, transform 0.72s ease 0.12s\";\n        }\n\n        const observer = new IntersectionObserver(\n            function (entries, currentObserver) {\n                entries.forEach(function (entry) {\n                    if (!entry.isIntersecting) {\n                        return;\n                    }\n\n                    cards.forEach(function (card) {\n                        card.style.opacity = \"1\";\n                        card.style.transform =\n                            \"translateY(0)\";\n                    });\n\n                    if (summary) {\n                        summary.style.opacity = \"1\";\n                        summary.style.transform =\n                            \"translateX(0)\";\n                    }\n\n                    currentObserver.unobserve(\n                        entry.target\n                    );\n                });\n            },\n            {\n                threshold: 0.1\n            }\n        );\n\n        observer.observe(section);\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxWooDeliverables\n        );\n    } else {\n        initDxWooDeliverables();\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-853758b e-con-full e-flex e-con e-parent\" data-id=\"853758b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5ddd326 elementor-widget elementor-widget-html\" data-id=\"5ddd326\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n.elementor-widget-html:has(#dx-woo-tech),\n.elementor-widget-html:has(#dx-woo-tech) > .elementor-widget-container,\n.dx-woo-tech-widget-fullwidth,\n.dx-woo-tech-widget-fullwidth > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n}\n\n#dx-woo-tech,\n#dx-woo-tech *,\n#dx-woo-tech *::before,\n#dx-woo-tech *::after {\n    box-sizing: border-box;\n}\n\n#dx-woo-tech {\n    --dx-dark: #09001f;\n    --dx-dark-secondary: #17053d;\n    --dx-white: #ffffff;\n    --dx-text: rgba(255, 255, 255, 0.72);\n    --dx-muted: rgba(255, 255, 255, 0.48);\n    --dx-purple: #6942d8;\n    --dx-purple-light: #9168ef;\n    --dx-yellow: #ffc441;\n    --dx-yellow-light: #ffd66e;\n    --dx-green: #54d696;\n    --dx-blue: #58a8f7;\n\n    position: relative;\n    isolation: isolate;\n    width: 100vw;\n    max-width: 100vw;\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n    overflow: hidden;\n    direction: ltr;\n    color: var(--dx-white);\n    background:\n        radial-gradient(\n            circle at 12% 18%,\n            rgba(145, 104, 239, 0.2),\n            transparent 28%\n        ),\n        radial-gradient(\n            circle at 88% 82%,\n            rgba(105, 66, 216, 0.18),\n            transparent 31%\n        ),\n        linear-gradient(\n            145deg,\n            var(--dx-dark-secondary),\n            var(--dx-dark)\n        );\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-woo-tech .dx-woo-tech-grid {\n    position: absolute;\n    z-index: -5;\n    inset: 0;\n    opacity: 0.09;\n    background-image:\n        linear-gradient(\n            rgba(255, 255, 255, 0.04) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(255, 255, 255, 0.04) 1px,\n            transparent 1px\n        );\n    background-size: 70px 70px;\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 18%,\n            transparent 82%\n        );\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 18%,\n            transparent 82%\n        );\n    pointer-events: none;\n}\n\n#dx-woo-tech .dx-woo-tech-glow {\n    position: absolute;\n    z-index: -4;\n    border-radius: 50%;\n    filter: blur(110px);\n    pointer-events: none;\n}\n\n#dx-woo-tech .dx-woo-tech-glow-one {\n    top: -180px;\n    left: 10%;\n    width: 430px;\n    height: 430px;\n    background: rgba(145, 104, 239, 0.16);\n}\n\n#dx-woo-tech .dx-woo-tech-glow-two {\n    right: -170px;\n    bottom: -200px;\n    width: 470px;\n    height: 430px;\n    background: rgba(255, 196, 65, 0.05);\n}\n\n#dx-woo-tech .dx-woo-tech-main {\n    position: relative;\n    z-index: 2;\n    width: 100%;\n    padding:\n        94px\n        clamp(22px, 5vw, 90px)\n        100px;\n}\n\n#dx-woo-tech .dx-woo-tech-container {\n    width: min(1420px, 100%);\n    margin: 0 auto;\n}\n\n#dx-woo-tech .dx-woo-tech-header {\n    max-width: 880px;\n    margin: 0 auto 55px;\n    text-align: center;\n}\n\n#dx-woo-tech .dx-woo-tech-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n    margin-bottom: 12px;\n    color: var(--dx-yellow);\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-woo-tech .dx-woo-tech-eyebrow::before,\n#dx-woo-tech .dx-woo-tech-eyebrow::after {\n    content: \"\";\n    width: 31px;\n    height: 2px;\n    border-radius: 999px;\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-yellow),\n            var(--dx-purple-light)\n        );\n}\n\n#dx-woo-tech .dx-woo-tech-title {\n    margin: 0;\n    color: var(--dx-white);\n    font-size: clamp(33px, 3.7vw, 51px);\n    font-weight: 900;\n    line-height: 1.55;\n    letter-spacing: -0.45px;\n    text-wrap: balance;\n}\n\n#dx-woo-tech .dx-woo-tech-title span {\n    color: var(--dx-yellow);\n}\n\n#dx-woo-tech .dx-woo-tech-description {\n    max-width: 760px;\n    margin: 14px auto 0;\n    color: var(--dx-text);\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n    text-wrap: pretty;\n}\n\n#dx-woo-tech .dx-woo-tech-core {\n    position: relative;\n    min-height: 545px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n#dx-woo-tech .dx-woo-tech-ring {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 430px;\n    height: 430px;\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    border-radius: 50%;\n    transform: translate(-50%, -50%);\n}\n\n#dx-woo-tech .dx-woo-tech-ring::before,\n#dx-woo-tech .dx-woo-tech-ring::after {\n    content: \"\";\n    position: absolute;\n    border: 1px solid rgba(255, 255, 255, 0.07);\n    border-radius: 50%;\n}\n\n#dx-woo-tech .dx-woo-tech-ring::before {\n    inset: 42px;\n}\n\n#dx-woo-tech .dx-woo-tech-ring::after {\n    inset: 91px;\n}\n\n#dx-woo-tech .dx-woo-tech-center {\n    position: relative;\n    z-index: 4;\n    width: 250px;\n    min-height: 250px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 30px;\n    border: 1px solid rgba(255, 255, 255, 0.15);\n    border-radius: 50%;\n    text-align: center;\n    background:\n        radial-gradient(\n            circle at 30% 20%,\n            rgba(145, 104, 239, 0.26),\n            transparent 42%\n        ),\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.1),\n            rgba(255, 255, 255, 0.035)\n        );\n    box-shadow:\n        0 35px 90px rgba(2, 0, 20, 0.42),\n        inset 0 1px 0 rgba(255, 255, 255, 0.08);\n    -webkit-backdrop-filter: blur(14px);\n    backdrop-filter: blur(14px);\n}\n\n#dx-woo-tech .dx-woo-tech-center-icon {\n    width: 68px;\n    height: 68px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 21px;\n    color: #180b35;\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-yellow),\n            var(--dx-yellow-light)\n        );\n    box-shadow:\n        0 18px 38px rgba(255, 196, 65, 0.22);\n}\n\n#dx-woo-tech .dx-woo-tech-center-icon svg {\n    width: 33px;\n    height: 33px;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-tech .dx-woo-tech-center-title {\n    margin: 20px 0 0;\n    color: #ffffff;\n    font-size: 23px;\n    font-weight: 900;\n    line-height: 1.5;\n}\n\n#dx-woo-tech .dx-woo-tech-center-text {\n    margin: 8px 0 0;\n    color: var(--dx-muted);\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1.8;\n}\n\n#dx-woo-tech .dx-woo-tech-node {\n    position: absolute;\n    z-index: 3;\n    width: 220px;\n    min-height: 120px;\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    padding:\n        18px\n        17px;\n    border: 1px solid rgba(255, 255, 255, 0.12);\n    border-radius: 19px;\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.085),\n            rgba(255, 255, 255, 0.035)\n        );\n    box-shadow:\n        0 20px 48px rgba(2, 0, 20, 0.26),\n        inset 0 1px 0 rgba(255, 255, 255, 0.055);\n    -webkit-backdrop-filter: blur(10px);\n    backdrop-filter: blur(10px);\n    transition:\n        transform 0.3s ease,\n        border-color 0.3s ease,\n        background 0.3s ease;\n}\n\n#dx-woo-tech .dx-woo-tech-node:hover {\n    border-color: rgba(145, 104, 239, 0.45);\n    background:\n        linear-gradient(\n            145deg,\n            rgba(145, 104, 239, 0.15),\n            rgba(255, 255, 255, 0.04)\n        );\n    transform: translateY(-5px);\n}\n\n#dx-woo-tech .dx-woo-tech-node-one {\n    top: 10px;\n    right: 11%;\n}\n\n#dx-woo-tech .dx-woo-tech-node-two {\n    top: 10px;\n    left: 11%;\n}\n\n#dx-woo-tech .dx-woo-tech-node-three {\n    top: 50%;\n    right: 0;\n    transform: translateY(-50%);\n}\n\n#dx-woo-tech .dx-woo-tech-node-three:hover {\n    transform: translateY(calc(-50% - 5px));\n}\n\n#dx-woo-tech .dx-woo-tech-node-four {\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n}\n\n#dx-woo-tech .dx-woo-tech-node-four:hover {\n    transform: translateY(calc(-50% - 5px));\n}\n\n#dx-woo-tech .dx-woo-tech-node-five {\n    right: 11%;\n    bottom: 10px;\n}\n\n#dx-woo-tech .dx-woo-tech-node-six {\n    left: 11%;\n    bottom: 10px;\n}\n\n#dx-woo-tech .dx-woo-tech-node-icon {\n    width: 52px;\n    height: 52px;\n    flex: 0 0 52px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 16px;\n    color: #d6c9ff;\n    background: rgba(145, 104, 239, 0.13);\n}\n\n#dx-woo-tech .dx-woo-tech-node:nth-of-type(2)\n    .dx-woo-tech-node-icon,\n#dx-woo-tech .dx-woo-tech-node:nth-of-type(5)\n    .dx-woo-tech-node-icon {\n    color: var(--dx-yellow);\n    background: rgba(255, 196, 65, 0.11);\n}\n\n#dx-woo-tech .dx-woo-tech-node:nth-of-type(3)\n    .dx-woo-tech-node-icon,\n#dx-woo-tech .dx-woo-tech-node:nth-of-type(6)\n    .dx-woo-tech-node-icon {\n    color: #7ce3b3;\n    background: rgba(84, 214, 150, 0.11);\n}\n\n#dx-woo-tech .dx-woo-tech-node:nth-of-type(4)\n    .dx-woo-tech-node-icon,\n#dx-woo-tech .dx-woo-tech-node:nth-of-type(7)\n    .dx-woo-tech-node-icon {\n    color: #8bc9ff;\n    background: rgba(88, 168, 247, 0.11);\n}\n\n#dx-woo-tech .dx-woo-tech-node-icon svg {\n    width: 26px;\n    height: 26px;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-tech .dx-woo-tech-node-title {\n    display: block;\n    color: #ffffff;\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.5;\n}\n\n#dx-woo-tech .dx-woo-tech-node-text {\n    display: block;\n    margin-top: 5px;\n    color: var(--dx-muted);\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.7;\n}\n\n#dx-woo-tech .dx-woo-tech-summary {\n    margin-top: 36px;\n    display: grid;\n    grid-template-columns:\n        repeat(3, minmax(0, 1fr));\n    gap: 14px;\n}\n\n#dx-woo-tech .dx-woo-tech-summary-item {\n    min-height: 88px;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding:\n        15px\n        17px;\n    border: 1px solid rgba(255, 255, 255, 0.11);\n    border-radius: 17px;\n    background: rgba(255, 255, 255, 0.05);\n    box-shadow:\n        0 15px 38px rgba(2, 0, 20, 0.18);\n    -webkit-backdrop-filter: blur(8px);\n    backdrop-filter: blur(8px);\n}\n\n#dx-woo-tech .dx-woo-tech-summary-icon {\n    width: 41px;\n    height: 41px;\n    flex: 0 0 41px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 13px;\n    color: #d6c9ff;\n    background: rgba(145, 104, 239, 0.12);\n}\n\n#dx-woo-tech\n    .dx-woo-tech-summary-item:nth-child(2)\n    .dx-woo-tech-summary-icon {\n    color: var(--dx-yellow);\n    background: rgba(255, 196, 65, 0.1);\n}\n\n#dx-woo-tech\n    .dx-woo-tech-summary-item:nth-child(3)\n    .dx-woo-tech-summary-icon {\n    color: #7ce3b3;\n    background: rgba(84, 214, 150, 0.1);\n}\n\n#dx-woo-tech .dx-woo-tech-summary-icon svg {\n    width: 21px;\n    height: 21px;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.9;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-tech .dx-woo-tech-summary-title {\n    display: block;\n    color: #ffffff;\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.5;\n}\n\n#dx-woo-tech .dx-woo-tech-summary-text {\n    display: block;\n    margin-top: 4px;\n    color: var(--dx-muted);\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.6;\n}\n\n@media (max-width: 1150px) {\n    #dx-woo-tech .dx-woo-tech-core {\n        min-height: auto;\n        display: grid;\n        grid-template-columns:\n            repeat(2, minmax(0, 1fr));\n        gap: 15px;\n    }\n\n    #dx-woo-tech .dx-woo-tech-ring {\n        display: none;\n    }\n\n    #dx-woo-tech .dx-woo-tech-center {\n        width: auto;\n        min-height: 250px;\n        grid-column: 1 \/ -1;\n        border-radius: 26px;\n    }\n\n    #dx-woo-tech .dx-woo-tech-node {\n        position: static;\n        width: 100%;\n        min-height: 112px;\n        transform: none !important;\n    }\n\n    #dx-woo-tech .dx-woo-tech-node:hover {\n        transform: translateY(-5px) !important;\n    }\n}\n\n@media (max-width: 980px) {\n    #dx-woo-tech .dx-woo-tech-main {\n        padding:\n            76px\n            28px\n            82px;\n    }\n}\n\n@media (max-width: 680px) {\n    #dx-woo-tech .dx-woo-tech-main {\n        padding:\n            59px\n            16px\n            65px;\n    }\n\n    #dx-woo-tech .dx-woo-tech-header {\n        margin-bottom: 35px;\n    }\n\n    #dx-woo-tech .dx-woo-tech-eyebrow {\n        font-size: 14px;\n    }\n\n    #dx-woo-tech .dx-woo-tech-eyebrow::before,\n    #dx-woo-tech .dx-woo-tech-eyebrow::after {\n        width: 22px;\n    }\n\n    #dx-woo-tech .dx-woo-tech-title {\n        font-size: clamp(27px, 8.3vw, 36px);\n        line-height: 1.65;\n        letter-spacing: -0.2px;\n    }\n\n    #dx-woo-tech .dx-woo-tech-description {\n        margin-top: 10px;\n        font-size: 14px;\n        line-height: 2;\n    }\n\n    #dx-woo-tech .dx-woo-tech-core {\n        grid-template-columns: 1fr;\n        gap: 11px;\n    }\n\n    #dx-woo-tech .dx-woo-tech-center {\n        grid-column: auto;\n        min-height: 225px;\n        padding: 25px 20px;\n        border-radius: 21px;\n    }\n\n    #dx-woo-tech .dx-woo-tech-center-icon {\n        width: 61px;\n        height: 61px;\n        border-radius: 18px;\n    }\n\n    #dx-woo-tech .dx-woo-tech-center-icon svg {\n        width: 29px;\n        height: 29px;\n    }\n\n    #dx-woo-tech .dx-woo-tech-center-title {\n        margin-top: 16px;\n        font-size: 21px;\n    }\n\n    #dx-woo-tech .dx-woo-tech-center-text {\n        font-size: 14px;\n    }\n\n    #dx-woo-tech .dx-woo-tech-node {\n        min-height: 100px;\n        padding:\n            15px\n            14px;\n        border-radius: 16px;\n    }\n\n    #dx-woo-tech .dx-woo-tech-node-icon {\n        width: 47px;\n        height: 47px;\n        flex-basis: 47px;\n        border-radius: 14px;\n    }\n\n    #dx-woo-tech .dx-woo-tech-node-icon svg {\n        width: 23px;\n        height: 23px;\n    }\n\n    #dx-woo-tech .dx-woo-tech-node-title,\n    #dx-woo-tech .dx-woo-tech-node-text {\n        font-size: 14px;\n    }\n\n    #dx-woo-tech .dx-woo-tech-summary {\n        margin-top: 15px;\n        grid-template-columns: 1fr;\n        gap: 10px;\n    }\n\n    #dx-woo-tech .dx-woo-tech-summary-item {\n        min-height: 74px;\n    }\n\n    #dx-woo-tech .dx-woo-tech-summary-title,\n    #dx-woo-tech .dx-woo-tech-summary-text {\n        font-size: 14px;\n    }\n\n    #dx-woo-tech .dx-woo-tech-glow {\n        display: none;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    #dx-woo-tech *,\n    #dx-woo-tech *::before,\n    #dx-woo-tech *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-woo-tech\"\n    aria-labelledby=\"dx-woo-tech-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n    <div\n        class=\"dx-woo-tech-grid\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <span\n        class=\"dx-woo-tech-glow dx-woo-tech-glow-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-woo-tech-glow dx-woo-tech-glow-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-woo-tech-main\">\n\n        <div class=\"dx-woo-tech-container\">\n\n            <header class=\"dx-woo-tech-header\">\n\n                <span class=\"dx-woo-tech-eyebrow\">\n                    Technologies We Use\n                <\/span>\n\n                <h2\n                    id=\"dx-woo-tech-title\"\n                    class=\"dx-woo-tech-title\"\n                >\n                    We Build Your Store\n                    <span>With a Professional Technology Stack<\/span>\n                <\/h2>\n\n                <p class=\"dx-woo-tech-description\">\n                    We use an integrated technology stack combining\n                    WordPress, WooCommerce, security, performance\n                    optimization, and payment solutions to build a\n                    stable online store that can grow with your business.\n                <\/p>\n\n            <\/header>\n\n            <div class=\"dx-woo-tech-core\">\n\n                <div\n                    class=\"dx-woo-tech-ring\"\n                    aria-hidden=\"true\"\n                ><\/div>\n\n                <article class=\"dx-woo-tech-center\">\n\n                    <span\n                        class=\"dx-woo-tech-center-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M3 5h2l2 11h10l2-8H7\"><\/path>\n                            <circle cx=\"9\" cy=\"20\" r=\"1\"><\/circle>\n                            <circle cx=\"17\" cy=\"20\" r=\"1\"><\/circle>\n                        <\/svg>\n                    <\/span>\n\n                    <h3 class=\"dx-woo-tech-center-title\">\n                        Complete E-Commerce Store\n                    <\/h3>\n\n                    <p class=\"dx-woo-tech-center-text\">\n                        Design, management, payments, shipping, security,\n                        and performance within one scalable environment.\n                    <\/p>\n\n                <\/article>\n\n                <article class=\"dx-woo-tech-node dx-woo-tech-node-one\">\n\n                    <span\n                        class=\"dx-woo-tech-node-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\n                            <path d=\"m7 8 3 8 2-5 2 5 3-8\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <span>\n                        <span class=\"dx-woo-tech-node-title\">\n                            WordPress\n                        <\/span>\n\n                        <span class=\"dx-woo-tech-node-text\">\n                            A flexible content management system that is\n                            easy to update and extend.\n                        <\/span>\n                    <\/span>\n\n                <\/article>\n\n                <article class=\"dx-woo-tech-node dx-woo-tech-node-two\">\n\n                    <span\n                        class=\"dx-woo-tech-node-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M3 5h2l2 11h10l2-8H7\"><\/path>\n                            <circle cx=\"9\" cy=\"20\" r=\"1\"><\/circle>\n                            <circle cx=\"17\" cy=\"20\" r=\"1\"><\/circle>\n                        <\/svg>\n                    <\/span>\n\n                    <span>\n                        <span class=\"dx-woo-tech-node-title\">\n                            WooCommerce\n                        <\/span>\n\n                        <span class=\"dx-woo-tech-node-text\">\n                            Product, order, customer, and inventory\n                            management from one platform.\n                        <\/span>\n                    <\/span>\n\n                <\/article>\n\n                <article class=\"dx-woo-tech-node dx-woo-tech-node-three\">\n\n                    <span\n                        class=\"dx-woo-tech-node-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <rect\n                                x=\"3\"\n                                y=\"5\"\n                                width=\"18\"\n                                height=\"14\"\n                                rx=\"2\"\n                            ><\/rect>\n                            <path d=\"M3 10h18\"><\/path>\n                            <path d=\"M7 15h2\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <span>\n                        <span class=\"dx-woo-tech-node-title\">\n                            Payment Gateways\n                        <\/span>\n\n                        <span class=\"dx-woo-tech-node-text\">\n                            Integration with available local and\n                            international payment methods.\n                        <\/span>\n                    <\/span>\n\n                <\/article>\n\n                <article class=\"dx-woo-tech-node dx-woo-tech-node-four\">\n\n                    <span\n                        class=\"dx-woo-tech-node-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <rect\n                                x=\"5\"\n                                y=\"11\"\n                                width=\"14\"\n                                height=\"10\"\n                                rx=\"2\"\n                            ><\/rect>\n                            <path d=\"M8 11V8a4 4 0 0 1 8 0v3\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <span>\n                        <span class=\"dx-woo-tech-node-title\">\n                            SSL \/ HTTPS\n                        <\/span>\n\n                        <span class=\"dx-woo-tech-node-text\">\n                            Encrypted communication between the store\n                            and website visitors.\n                        <\/span>\n                    <\/span>\n\n                <\/article>\n\n                <article class=\"dx-woo-tech-node dx-woo-tech-node-five\">\n\n                    <span\n                        class=\"dx-woo-tech-node-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M12 3 4 6v6c0 5 3.4 8 8 9 4.6-1 8-4 8-9V6Z\"><\/path>\n                            <path d=\"m8 12 3 3 5-6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <span>\n                        <span class=\"dx-woo-tech-node-title\">\n                            Security\n                        <\/span>\n\n                        <span class=\"dx-woo-tech-node-text\">\n                            Security and monitoring configurations designed\n                            to reduce common website risks.\n                        <\/span>\n                    <\/span>\n\n                <\/article>\n\n                <article class=\"dx-woo-tech-node dx-woo-tech-node-six\">\n\n                    <span\n                        class=\"dx-woo-tech-node-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M12 2v4\"><\/path>\n                            <path d=\"M12 18v4\"><\/path>\n                            <path d=\"M4.9 4.9 7.8 7.8\"><\/path>\n                            <path d=\"m16.2 16.2 2.9 2.9\"><\/path>\n                            <path d=\"M2 12h4\"><\/path>\n                            <path d=\"M18 12h4\"><\/path>\n                            <path d=\"m4.9 19.1 2.9-2.9\"><\/path>\n                            <path d=\"m16.2 7.8 2.9-2.9\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <span>\n                        <span class=\"dx-woo-tech-node-title\">\n                            CDN & Caching\n                        <\/span>\n\n                        <span class=\"dx-woo-tech-node-text\">\n                            Improve loading speed and distribute website\n                            content more efficiently.\n                        <\/span>\n                    <\/span>\n\n                <\/article>\n\n            <\/div>\n\n            <div class=\"dx-woo-tech-summary\">\n\n                <div class=\"dx-woo-tech-summary-item\">\n\n                    <span\n                        class=\"dx-woo-tech-summary-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"m13 2-9 12h7l-1 8 9-12h-7Z\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <span>\n                        <span class=\"dx-woo-tech-summary-title\">\n                            Better Performance\n                        <\/span>\n\n                        <span class=\"dx-woo-tech-summary-text\">\n                            Image, file, and caching optimization.\n                        <\/span>\n                    <\/span>\n\n                <\/div>\n\n                <div class=\"dx-woo-tech-summary-item\">\n\n                    <span\n                        class=\"dx-woo-tech-summary-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M12 3 4 6v6c0 5 3.4 8 8 9 4.6-1 8-4 8-9V6Z\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <span>\n                        <span class=\"dx-woo-tech-summary-title\">\n                            Stronger Security\n                        <\/span>\n\n                        <span class=\"dx-woo-tech-summary-text\">\n                            Essential protection layers for the website\n                            and its data.\n                        <\/span>\n                    <\/span>\n\n                <\/div>\n\n                <div class=\"dx-woo-tech-summary-item\">\n\n                    <span\n                        class=\"dx-woo-tech-summary-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M4 19V5\"><\/path>\n                            <path d=\"M4 19h16\"><\/path>\n                            <path d=\"m7 15 4-4 3 3 5-6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <span>\n                        <span class=\"dx-woo-tech-summary-title\">\n                            Built to Scale\n                        <\/span>\n\n                        <span class=\"dx-woo-tech-summary-text\">\n                            Add new functionality and integrations as\n                            your store grows.\n                        <\/span>\n                    <\/span>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxWooTech() {\n        const section = document.getElementById(\n            \"dx-woo-tech\"\n        );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized = \"true\";\n\n        const widget = section.closest(\n            \".elementor-widget-html\"\n        );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-woo-tech-widget-fullwidth\"\n            );\n        }\n\n        if (\n            !(\"IntersectionObserver\" in window) ||\n            window.matchMedia(\n                \"(prefers-reduced-motion: reduce)\"\n            ).matches\n        ) {\n            return;\n        }\n\n        const center = section.querySelector(\n            \".dx-woo-tech-center\"\n        );\n\n        const nodes = section.querySelectorAll(\n            \".dx-woo-tech-node\"\n        );\n\n        const summaryItems = section.querySelectorAll(\n            \".dx-woo-tech-summary-item\"\n        );\n\n        if (center) {\n            center.style.opacity = \"0\";\n            center.style.transform = \"scale(0.92)\";\n            center.style.transition =\n                \"opacity 0.7s ease, transform 0.7s ease\";\n        }\n\n        nodes.forEach(function (node, index) {\n            node.style.opacity = \"0\";\n            node.style.transition =\n                \"opacity 0.6s ease \" +\n                (0.08 + index * 0.07) +\n                \"s\";\n        });\n\n        summaryItems.forEach(function (item, index) {\n            item.style.opacity = \"0\";\n            item.style.transform = \"translateY(20px)\";\n            item.style.transition =\n                \"opacity 0.58s ease \" +\n                (0.28 + index * 0.08) +\n                \"s, transform 0.58s ease \" +\n                (0.28 + index * 0.08) +\n                \"s\";\n        });\n\n        const observer = new IntersectionObserver(\n            function (entries, currentObserver) {\n                entries.forEach(function (entry) {\n                    if (!entry.isIntersecting) {\n                        return;\n                    }\n\n                    if (center) {\n                        center.style.opacity = \"1\";\n                        center.style.transform = \"scale(1)\";\n                    }\n\n                    nodes.forEach(function (node) {\n                        node.style.opacity = \"1\";\n                    });\n\n                    summaryItems.forEach(function (item) {\n                        item.style.opacity = \"1\";\n                        item.style.transform = \"translateY(0)\";\n                    });\n\n                    currentObserver.unobserve(\n                        entry.target\n                    );\n                });\n            },\n            {\n                threshold: 0.1\n            }\n        );\n\n        observer.observe(section);\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxWooTech\n        );\n    } else {\n        initDxWooTech();\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f484b1e e-con-full e-flex e-con e-parent\" data-id=\"f484b1e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eda4226 elementor-widget elementor-widget-html\" data-id=\"eda4226\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n.elementor-widget-html:has(#dx-woo-process),\n.elementor-widget-html:has(#dx-woo-process) > .elementor-widget-container,\n.dx-woo-process-widget-fullwidth,\n.dx-woo-process-widget-fullwidth > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n}\n\n#dx-woo-process,\n#dx-woo-process *,\n#dx-woo-process *::before,\n#dx-woo-process *::after {\n    box-sizing: border-box;\n}\n\n#dx-woo-process {\n    --dx-bg: #f7f5fb;\n    --dx-white: #ffffff;\n    --dx-dark: #180b35;\n    --dx-text: #6d6478;\n    --dx-muted: #958d9f;\n    --dx-purple: #6942d8;\n    --dx-purple-light: #9168ef;\n    --dx-yellow: #ffc441;\n    --dx-green: #54d696;\n    --dx-blue: #58a8f7;\n    --dx-border: rgba(105, 66, 216, 0.14);\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n    direction: ltr;\n\n    color: var(--dx-dark);\n\n    background:\n        radial-gradient(\n            circle at 6% 10%,\n            rgba(105, 66, 216, 0.08),\n            transparent 25%\n        ),\n        radial-gradient(\n            circle at 94% 88%,\n            rgba(255, 196, 65, 0.08),\n            transparent 28%\n        ),\n        var(--dx-bg);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-woo-process .dx-woo-process-grid {\n    position: absolute;\n    z-index: -5;\n\n    inset: 0;\n\n    opacity: 0.14;\n\n    background-image:\n        linear-gradient(\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        );\n\n    background-size: 72px 72px;\n\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 16%,\n            transparent 82%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 16%,\n            transparent 82%\n        );\n\n    pointer-events: none;\n}\n\n#dx-woo-process .dx-woo-process-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        94px\n        clamp(22px, 5vw, 90px)\n        100px;\n}\n\n#dx-woo-process .dx-woo-process-container {\n    width: min(1420px, 100%);\n\n    margin: 0 auto;\n}\n\n#dx-woo-process .dx-woo-process-header {\n    max-width: 880px;\n\n    margin: 0 auto 58px;\n\n    text-align: center;\n}\n\n#dx-woo-process .dx-woo-process-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    margin-bottom: 12px;\n\n    color: var(--dx-purple);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-woo-process .dx-woo-process-eyebrow::before,\n#dx-woo-process .dx-woo-process-eyebrow::after {\n    content: \"\";\n\n    width: 31px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-yellow),\n            var(--dx-purple-light)\n        );\n}\n\n#dx-woo-process .dx-woo-process-title {\n    margin: 0;\n\n    color: var(--dx-dark);\n\n    font-size: clamp(32px, 3.6vw, 50px);\n    font-weight: 900;\n    line-height: 1.55;\n    letter-spacing: -0.45px;\n\n    text-wrap: balance;\n}\n\n#dx-woo-process .dx-woo-process-title span {\n    color: var(--dx-purple);\n}\n\n#dx-woo-process .dx-woo-process-description {\n    max-width: 750px;\n\n    margin: 14px auto 0;\n\n    color: var(--dx-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n\n    text-wrap: pretty;\n}\n\n#dx-woo-process .dx-woo-process-board {\n    position: relative;\n\n    overflow: hidden;\n\n    padding:\n        44px\n        34px\n        38px;\n\n    border: 1px solid var(--dx-border);\n    border-radius: 30px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.99),\n            rgba(247, 244, 252, 0.98)\n        );\n\n    box-shadow:\n        0 30px 78px rgba(40, 18, 84, 0.12),\n        inset 0 1px 0 #ffffff;\n}\n\n#dx-woo-process .dx-woo-process-board::before {\n    content: \"\";\n\n    position: absolute;\n\n    top: 0;\n    right: 0;\n    left: 0;\n\n    height: 4px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-purple),\n            var(--dx-purple-light),\n            var(--dx-yellow)\n        );\n}\n\n#dx-woo-process .dx-woo-process-track {\n    position: relative;\n\n    display: grid;\n    grid-template-columns:\n        repeat(4, minmax(0, 1fr));\n\n    gap: 24px;\n}\n\n#dx-woo-process .dx-woo-process-track::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: 0;\n\n    top: 41px;\n    right: 8%;\n    left: 8%;\n\n    height: 3px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            rgba(105, 66, 216, 0.18),\n            var(--dx-purple),\n            var(--dx-yellow),\n            rgba(84, 214, 150, 0.35)\n        );\n}\n\n#dx-woo-process .dx-woo-process-step {\n    position: relative;\n    z-index: 2;\n\n    min-width: 0;\n\n    text-align: center;\n}\n\n#dx-woo-process .dx-woo-process-marker {\n    position: relative;\n\n    width: 84px;\n    height: 84px;\n\n    margin: 0 auto;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 8px solid #ffffff;\n    border-radius: 50%;\n\n    color: #ffffff;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-purple),\n            var(--dx-purple-light)\n        );\n\n    box-shadow:\n        0 16px 36px rgba(105, 66, 216, 0.24),\n        0 0 0 1px rgba(105, 66, 216, 0.12);\n\n    transition:\n        transform 0.3s ease,\n        box-shadow 0.3s ease;\n}\n\n#dx-woo-process .dx-woo-process-step:nth-child(2)\n    .dx-woo-process-marker {\n    color: #6d4b00;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-yellow),\n            #ffd66e\n        );\n\n    box-shadow:\n        0 16px 36px rgba(255, 196, 65, 0.24),\n        0 0 0 1px rgba(255, 196, 65, 0.15);\n}\n\n#dx-woo-process .dx-woo-process-step:nth-child(3)\n    .dx-woo-process-marker {\n    background:\n        linear-gradient(\n            135deg,\n            #58a8f7,\n            #8bc9ff\n        );\n\n    box-shadow:\n        0 16px 36px rgba(88, 168, 247, 0.22),\n        0 0 0 1px rgba(88, 168, 247, 0.14);\n}\n\n#dx-woo-process .dx-woo-process-step:nth-child(4)\n    .dx-woo-process-marker {\n    color: #0b573b;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-green),\n            #8ae6b9\n        );\n\n    box-shadow:\n        0 16px 36px rgba(84, 214, 150, 0.22),\n        0 0 0 1px rgba(84, 214, 150, 0.15);\n}\n\n#dx-woo-process .dx-woo-process-step:hover\n    .dx-woo-process-marker {\n    transform:\n        translateY(-6px)\n        scale(1.04);\n}\n\n#dx-woo-process .dx-woo-process-marker svg {\n    width: 31px;\n    height: 31px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-process .dx-woo-process-number {\n    position: absolute;\n\n    top: -10px;\n    right: -7px;\n\n    width: 28px;\n    height: 28px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 3px solid #ffffff;\n    border-radius: 50%;\n\n    color: var(--dx-dark);\n\n    background: #ffffff;\n\n    box-shadow:\n        0 7px 18px rgba(40, 18, 84, 0.12);\n\n    font-size: 14px;\n    font-weight: 900;\n\n    direction: ltr;\n}\n\n#dx-woo-process .dx-woo-process-content {\n    margin-top: 24px;\n\n    padding:\n        0\n        9px;\n}\n\n#dx-woo-process .dx-woo-process-step-label {\n    display: block;\n\n    color: var(--dx-purple);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-woo-process .dx-woo-process-step:nth-child(2)\n    .dx-woo-process-step-label {\n    color: #936500;\n}\n\n#dx-woo-process .dx-woo-process-step:nth-child(3)\n    .dx-woo-process-step-label {\n    color: #2172bd;\n}\n\n#dx-woo-process .dx-woo-process-step:nth-child(4)\n    .dx-woo-process-step-label {\n    color: #16845a;\n}\n\n#dx-woo-process .dx-woo-process-step-title {\n    margin:\n        7px\n        0\n        0;\n\n    color: var(--dx-dark);\n\n    font-size: 19px;\n    font-weight: 900;\n    line-height: 1.6;\n\n    text-wrap: balance;\n}\n\n#dx-woo-process .dx-woo-process-step-text {\n    margin:\n        9px\n        0\n        0;\n\n    color: var(--dx-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.95;\n\n    text-wrap: pretty;\n}\n\n#dx-woo-process .dx-woo-process-details {\n    margin-top: 39px;\n    padding-top: 31px;\n\n    display: grid;\n    grid-template-columns:\n        minmax(0, 1.25fr)\n        minmax(300px, 0.75fr);\n\n    align-items: stretch;\n\n    gap: 22px;\n\n    border-top: 1px solid rgba(105, 66, 216, 0.11);\n}\n\n#dx-woo-process .dx-woo-process-checklist {\n    display: grid;\n    grid-template-columns:\n        repeat(2, minmax(0, 1fr));\n\n    gap: 12px;\n}\n\n#dx-woo-process .dx-woo-process-check {\n    min-height: 72px;\n\n    display: flex;\n    align-items: center;\n\n    gap: 11px;\n\n    padding:\n        13px\n        15px;\n\n    border: 1px solid rgba(105, 66, 216, 0.11);\n    border-radius: 15px;\n\n    background: rgba(255, 255, 255, 0.8);\n}\n\n#dx-woo-process .dx-woo-process-check-icon {\n    width: 36px;\n    height: 36px;\n    flex: 0 0 36px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 11px;\n\n    color: #16845a;\n\n    background: rgba(84, 214, 150, 0.13);\n}\n\n#dx-woo-process .dx-woo-process-check-icon svg {\n    width: 17px;\n    height: 17px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2.2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-process .dx-woo-process-check-title {\n    display: block;\n\n    color: var(--dx-dark);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.5;\n}\n\n#dx-woo-process .dx-woo-process-check-text {\n    display: block;\n\n    margin-top: 3px;\n\n    color: var(--dx-muted);\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.6;\n}\n\n#dx-woo-process .dx-woo-process-result {\n    position: relative;\n    isolation: isolate;\n\n    overflow: hidden;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    padding:\n        28px\n        25px;\n\n    border: 1px solid rgba(255, 255, 255, 0.13);\n    border-radius: 20px;\n\n    color: #ffffff;\n\n    background:\n        radial-gradient(\n            circle at 10% 10%,\n            rgba(145, 104, 239, 0.25),\n            transparent 38%\n        ),\n        linear-gradient(\n            145deg,\n            #1b0a3d,\n            #0c0225\n        );\n\n    box-shadow:\n        0 22px 55px rgba(40, 18, 84, 0.18);\n}\n\n#dx-woo-process .dx-woo-process-result::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -1;\n\n    left: -100px;\n    bottom: -120px;\n\n    width: 250px;\n    height: 250px;\n\n    border-radius: 50%;\n\n    background: rgba(255, 196, 65, 0.08);\n\n    filter: blur(70px);\n}\n\n#dx-woo-process .dx-woo-process-result-icon {\n    width: 57px;\n    height: 57px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 17px;\n\n    color: #180b35;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-yellow),\n            #ffd66e\n        );\n}\n\n#dx-woo-process .dx-woo-process-result-icon svg {\n    width: 28px;\n    height: 28px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-process .dx-woo-process-result-label {\n    display: block;\n\n    margin-top: 20px;\n\n    color: var(--dx-yellow);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-woo-process .dx-woo-process-result-title {\n    margin:\n        6px\n        0\n        0;\n\n    color: #ffffff;\n\n    font-size: 22px;\n    font-weight: 900;\n    line-height: 1.55;\n}\n\n#dx-woo-process .dx-woo-process-result-text {\n    margin:\n        10px\n        0\n        0;\n\n    color: rgba(255, 255, 255, 0.68);\n\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1.9;\n}\n\n@media (max-width: 1050px) {\n    #dx-woo-process .dx-woo-process-track {\n        grid-template-columns:\n            repeat(2, minmax(0, 1fr));\n\n        gap:\n            42px\n            22px;\n    }\n\n    #dx-woo-process .dx-woo-process-track::before {\n        display: none;\n    }\n\n    #dx-woo-process .dx-woo-process-details {\n        grid-template-columns: 1fr;\n    }\n}\n\n@media (max-width: 980px) {\n    #dx-woo-process .dx-woo-process-main {\n        padding:\n            76px\n            28px\n            82px;\n    }\n}\n\n@media (max-width: 680px) {\n    #dx-woo-process .dx-woo-process-main {\n        padding:\n            59px\n            16px\n            65px;\n    }\n\n    #dx-woo-process .dx-woo-process-header {\n        margin-bottom: 35px;\n    }\n\n    #dx-woo-process .dx-woo-process-eyebrow {\n        font-size: 14px;\n    }\n\n    #dx-woo-process .dx-woo-process-eyebrow::before,\n    #dx-woo-process .dx-woo-process-eyebrow::after {\n        width: 22px;\n    }\n\n    #dx-woo-process .dx-woo-process-title {\n        font-size: clamp(27px, 8.3vw, 36px);\n        line-height: 1.65;\n        letter-spacing: -0.2px;\n    }\n\n    #dx-woo-process .dx-woo-process-description {\n        margin-top: 10px;\n\n        font-size: 14px;\n        line-height: 2;\n    }\n\n    #dx-woo-process .dx-woo-process-board {\n        padding:\n            29px\n            16px\n            20px;\n\n        border-radius: 21px;\n    }\n\n    #dx-woo-process .dx-woo-process-track {\n        grid-template-columns: 1fr;\n\n        gap: 0;\n    }\n\n    #dx-woo-process .dx-woo-process-step {\n        display: grid;\n        grid-template-columns:\n            68px\n            minmax(0, 1fr);\n\n        align-items: start;\n\n        gap: 14px;\n\n        padding-bottom: 28px;\n\n        text-align: left;\n    }\n\n    #dx-woo-process .dx-woo-process-step:not(:last-child)::after {\n        content: \"\";\n\n        position: absolute;\n\n        top: 67px;\n        left: 32px;\n        bottom: 4px;\n\n        width: 2px;\n\n        border-radius: 999px;\n\n        background:\n            linear-gradient(\n                var(--dx-purple),\n                rgba(105, 66, 216, 0.12)\n            );\n    }\n\n    #dx-woo-process .dx-woo-process-marker {\n        width: 66px;\n        height: 66px;\n\n        margin: 0;\n\n        border-width: 6px;\n    }\n\n    #dx-woo-process .dx-woo-process-marker svg {\n        width: 25px;\n        height: 25px;\n    }\n\n    #dx-woo-process .dx-woo-process-number {\n        width: 24px;\n        height: 24px;\n\n        top: -8px;\n        right: -5px;\n\n        font-size: 14px;\n    }\n\n    #dx-woo-process .dx-woo-process-content {\n        margin-top: 0;\n        padding: 0;\n    }\n\n    #dx-woo-process .dx-woo-process-step-label {\n        font-size: 14px;\n    }\n\n    #dx-woo-process .dx-woo-process-step-title {\n        margin-top: 4px;\n\n        font-size: 18px;\n    }\n\n    #dx-woo-process .dx-woo-process-step-text {\n        margin-top: 6px;\n\n        font-size: 14px;\n    }\n\n    #dx-woo-process .dx-woo-process-details {\n        margin-top: 10px;\n        padding-top: 22px;\n\n        gap: 14px;\n    }\n\n    #dx-woo-process .dx-woo-process-checklist {\n        grid-template-columns: 1fr;\n\n        gap: 9px;\n    }\n\n    #dx-woo-process .dx-woo-process-check {\n        min-height: 67px;\n    }\n\n    #dx-woo-process .dx-woo-process-check-title,\n    #dx-woo-process .dx-woo-process-check-text {\n        font-size: 14px;\n    }\n\n    #dx-woo-process .dx-woo-process-result {\n        padding:\n            23px\n            19px;\n\n        border-radius: 17px;\n    }\n\n    #dx-woo-process .dx-woo-process-result-label,\n    #dx-woo-process .dx-woo-process-result-text {\n        font-size: 14px;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    #dx-woo-process *,\n    #dx-woo-process *::before,\n    #dx-woo-process *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-woo-process\"\n    aria-labelledby=\"dx-woo-process-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n    <div\n        class=\"dx-woo-process-grid\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <div class=\"dx-woo-process-main\">\n\n        <div class=\"dx-woo-process-container\">\n\n            <header class=\"dx-woo-process-header\">\n\n                <span class=\"dx-woo-process-eyebrow\">\n                    Implementation Process\n                <\/span>\n\n                <h2\n                    id=\"dx-woo-process-title\"\n                    class=\"dx-woo-process-title\"\n                >\n                    From Your Idea to\n                    <span>Store Launch<\/span>\n                <\/h2>\n\n                <p class=\"dx-woo-process-description\">\n                    We follow a clear process that starts with understanding\n                    your business and requirements, then selecting the design,\n                    preparing the required features and integrations, and\n                    finally testing and launching the store in an organized way.\n                <\/p>\n\n            <\/header>\n\n            <div class=\"dx-woo-process-board\">\n\n                <div class=\"dx-woo-process-track\">\n\n                    <article class=\"dx-woo-process-step\">\n\n                        <div class=\"dx-woo-process-marker\">\n\n                            <span class=\"dx-woo-process-number\">\n                                01\n                            <\/span>\n\n                            <svg\n                                viewBox=\"0 0 24 24\"\n                                aria-hidden=\"true\"\n                            >\n                                <circle\n                                    cx=\"11\"\n                                    cy=\"11\"\n                                    r=\"7\"\n                                ><\/circle>\n                                <path d=\"m20 20-4-4\"><\/path>\n                                <path d=\"M8 11h6\"><\/path>\n                                <path d=\"M11 8v6\"><\/path>\n                            <\/svg>\n\n                        <\/div>\n\n                        <div class=\"dx-woo-process-content\">\n\n                            <span class=\"dx-woo-process-step-label\">\n                                Project Discovery\n                            <\/span>\n\n                            <h3 class=\"dx-woo-process-step-title\">\n                                Business & Requirements Analysis\n                            <\/h3>\n\n                            <p class=\"dx-woo-process-step-text\">\n                                We define the product types, target audience,\n                                payment and shipping methods, and the core\n                                functionality your online store needs.\n                            <\/p>\n\n                        <\/div>\n\n                    <\/article>\n\n                    <article class=\"dx-woo-process-step\">\n\n                        <div class=\"dx-woo-process-marker\">\n\n                            <span class=\"dx-woo-process-number\">\n                                02\n                            <\/span>\n\n                            <svg\n                                viewBox=\"0 0 24 24\"\n                                aria-hidden=\"true\"\n                            >\n                                <path d=\"M12 3a9 9 0 1 0 9 9c0-1.1-.9-2-2-2h-2.5A2.5 2.5 0 0 1 14 7.5V5c0-1.1-.9-2-2-2Z\"><\/path>\n                                <circle\n                                    cx=\"7.5\"\n                                    cy=\"10.5\"\n                                    r=\"1\"\n                                ><\/circle>\n                                <circle\n                                    cx=\"10\"\n                                    cy=\"7\"\n                                    r=\"1\"\n                                ><\/circle>\n                                <circle\n                                    cx=\"7\"\n                                    cy=\"15\"\n                                    r=\"1\"\n                                ><\/circle>\n                            <\/svg>\n\n                        <\/div>\n\n                        <div class=\"dx-woo-process-content\">\n\n                            <span class=\"dx-woo-process-step-label\">\n                                Design\n                            <\/span>\n\n                            <h3 class=\"dx-woo-process-step-title\">\n                                Selecting & Customizing the Store Interface\n                            <\/h3>\n\n                            <p class=\"dx-woo-process-step-text\">\n                                We select the most suitable structure and\n                                customize the colors, typography, pages,\n                                and visual elements to match your brand identity.\n                            <\/p>\n\n                        <\/div>\n\n                    <\/article>\n\n                    <article class=\"dx-woo-process-step\">\n\n                        <div class=\"dx-woo-process-marker\">\n\n                            <span class=\"dx-woo-process-number\">\n                                03\n                            <\/span>\n\n                            <svg\n                                viewBox=\"0 0 24 24\"\n                                aria-hidden=\"true\"\n                            >\n                                <path d=\"M8 3v4\"><\/path>\n                                <path d=\"M16 3v4\"><\/path>\n                                <path d=\"M7 7h10v4a5 5 0 0 1-10 0Z\"><\/path>\n                                <path d=\"M12 16v5\"><\/path>\n                            <\/svg>\n\n                        <\/div>\n\n                        <div class=\"dx-woo-process-content\">\n\n                            <span class=\"dx-woo-process-step-label\">\n                                Setup & Integration\n                            <\/span>\n\n                            <h3 class=\"dx-woo-process-step-title\">\n                                Store Setup & Required Integrations\n                            <\/h3>\n\n                            <p class=\"dx-woo-process-step-text\">\n                                We add the products and essential settings,\n                                then connect the required payment, shipping,\n                                and functional solutions based on your business.\n                            <\/p>\n\n                        <\/div>\n\n                    <\/article>\n\n                    <article class=\"dx-woo-process-step\">\n\n                        <div class=\"dx-woo-process-marker\">\n\n                            <span class=\"dx-woo-process-number\">\n                                04\n                            <\/span>\n\n                            <svg\n                                viewBox=\"0 0 24 24\"\n                                aria-hidden=\"true\"\n                            >\n                                <path d=\"M5 15a7 7 0 0 1 14 0\"><\/path>\n                                <path d=\"M12 8V4\"><\/path>\n                                <path d=\"m15 5-3-3-3 3\"><\/path>\n                                <path d=\"M4 19h16\"><\/path>\n                            <\/svg>\n\n                        <\/div>\n\n                        <div class=\"dx-woo-process-content\">\n\n                            <span class=\"dx-woo-process-step-label\">\n                                Testing & Launch\n                            <\/span>\n\n                            <h3 class=\"dx-woo-process-step-title\">\n                                Final Store Review Before Publishing\n                            <\/h3>\n\n                            <p class=\"dx-woo-process-step-text\">\n                                We test the pages, purchasing process,\n                                payments, shipping, and responsiveness,\n                                then review feedback and prepare the store\n                                for final launch.\n                            <\/p>\n\n                        <\/div>\n\n                    <\/article>\n\n                <\/div>\n\n                <div class=\"dx-woo-process-details\">\n\n                    <div class=\"dx-woo-process-checklist\">\n\n                        <div class=\"dx-woo-process-check\">\n\n                            <span\n                                class=\"dx-woo-process-check-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span>\n                                <span class=\"dx-woo-process-check-title\">\n                                    User Experience Review\n                                <\/span>\n\n                                <span class=\"dx-woo-process-check-text\">\n                                    Confirm that browsing and checkout are\n                                    clear and easy to complete.\n                                <\/span>\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-woo-process-check\">\n\n                            <span\n                                class=\"dx-woo-process-check-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span>\n                                <span class=\"dx-woo-process-check-title\">\n                                    Testing Across Devices\n                                <\/span>\n\n                                <span class=\"dx-woo-process-check-text\">\n                                    Review the store on mobile, tablet,\n                                    and desktop devices.\n                                <\/span>\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-woo-process-check\">\n\n                            <span\n                                class=\"dx-woo-process-check-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span>\n                                <span class=\"dx-woo-process-check-title\">\n                                    Payment & Shipping Testing\n                                <\/span>\n\n                                <span class=\"dx-woo-process-check-text\">\n                                    Review checkout steps, messages,\n                                    and order statuses.\n                                <\/span>\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-woo-process-check\">\n\n                            <span\n                                class=\"dx-woo-process-check-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span>\n                                <span class=\"dx-woo-process-check-title\">\n                                    Performance & Security Review\n                                <\/span>\n\n                                <span class=\"dx-woo-process-check-text\">\n                                    Configure performance and core security\n                                    settings before launch.\n                                <\/span>\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <aside class=\"dx-woo-process-result\">\n\n                        <span\n                            class=\"dx-woo-process-result-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M12 2v4\"><\/path>\n                                <path d=\"M12 18v4\"><\/path>\n                                <path d=\"m4.9 4.9 2.9 2.9\"><\/path>\n                                <path d=\"m16.2 16.2 2.9 2.9\"><\/path>\n                                <path d=\"M2 12h4\"><\/path>\n                                <path d=\"M18 12h4\"><\/path>\n                                <path d=\"m4.9 19.1 2.9-2.9\"><\/path>\n                                <path d=\"m16.2 7.8 2.9-2.9\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"dx-woo-process-result-label\">\n                            Final Outcome\n                        <\/span>\n\n                        <h3 class=\"dx-woo-process-result-title\">\n                            A Store Ready for Sales & Management\n                        <\/h3>\n\n                        <p class=\"dx-woo-process-result-text\">\n                            You receive an organized, responsive online\n                            store with the agreed functionality and\n                            integrations, fully reviewed and tested\n                            before launch.\n                        <\/p>\n\n                    <\/aside>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxWooProcess() {\n        const section = document.getElementById(\n            \"dx-woo-process\"\n        );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized = \"true\";\n\n        const widget = section.closest(\n            \".elementor-widget-html\"\n        );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-woo-process-widget-fullwidth\"\n            );\n        }\n\n        if (\n            !(\"IntersectionObserver\" in window) ||\n            window.matchMedia(\n                \"(prefers-reduced-motion: reduce)\"\n            ).matches\n        ) {\n            return;\n        }\n\n        const steps = section.querySelectorAll(\n            \".dx-woo-process-step\"\n        );\n\n        const checks = section.querySelectorAll(\n            \".dx-woo-process-check\"\n        );\n\n        const result = section.querySelector(\n            \".dx-woo-process-result\"\n        );\n\n        steps.forEach(function (step, index) {\n            step.style.opacity = \"0\";\n            step.style.transform = \"translateY(25px)\";\n            step.style.transition =\n                \"opacity 0.64s ease \" +\n                (index * 0.1) +\n                \"s, transform 0.64s ease \" +\n                (index * 0.1) +\n                \"s\";\n        });\n\n        checks.forEach(function (check, index) {\n            check.style.opacity = \"0\";\n            check.style.transform = \"translateY(18px)\";\n            check.style.transition =\n                \"opacity 0.58s ease \" +\n                (0.3 + index * 0.07) +\n                \"s, transform 0.58s ease \" +\n                (0.3 + index * 0.07) +\n                \"s\";\n        });\n\n        if (result) {\n            result.style.opacity = \"0\";\n            result.style.transform = \"translateX(-25px)\";\n            result.style.transition =\n                \"opacity 0.68s ease 0.38s, transform 0.68s ease 0.38s\";\n        }\n\n        const observer = new IntersectionObserver(\n            function (entries, currentObserver) {\n                entries.forEach(function (entry) {\n                    if (!entry.isIntersecting) {\n                        return;\n                    }\n\n                    steps.forEach(function (step) {\n                        step.style.opacity = \"1\";\n                        step.style.transform = \"translateY(0)\";\n                    });\n\n                    checks.forEach(function (check) {\n                        check.style.opacity = \"1\";\n                        check.style.transform = \"translateY(0)\";\n                    });\n\n                    if (result) {\n                        result.style.opacity = \"1\";\n                        result.style.transform = \"translateX(0)\";\n                    }\n\n                    currentObserver.unobserve(\n                        entry.target\n                    );\n                });\n            },\n            {\n                threshold: 0.1\n            }\n        );\n\n        observer.observe(section);\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxWooProcess\n        );\n    } else {\n        initDxWooProcess();\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6f0b78a e-con-full e-flex e-con e-parent\" data-id=\"6f0b78a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e7d194c elementor-widget elementor-widget-html\" data-id=\"e7d194c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- =========================================================\n     HOME TESTIMONIALS SECTION\n     Author: Mohamed El-Sehemy\n     Video + Text Testimonials\n     English LTR - Elementor Compatible\n========================================================== -->\n\n<style>\n\/* =========================================================\n   ELEMENTOR FULL WIDTH\n========================================================= *\/\n\n.elementor-widget-html:has(#dx-home-testimonials),\n.elementor-widget-html:has(#dx-home-testimonials) > .elementor-widget-container,\n.dx-testimonials-widget-fullwidth,\n.dx-testimonials-widget-fullwidth > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n\/* =========================================================\n   RESET\n========================================================= *\/\n\n#dx-home-testimonials,\n#dx-home-testimonials *,\n#dx-home-testimonials *::before,\n#dx-home-testimonials *::after {\n    box-sizing: border-box;\n}\n\n#dx-home-testimonials {\n    --dx-purple: #6942d8;\n    --dx-purple-light: #9168ef;\n    --dx-yellow: #ffc441;\n    --dx-dark: #160a31;\n    --dx-text: #625c6f;\n    --dx-muted: #85808e;\n    --dx-white: #ffffff;\n    --dx-bg: #f8f7fc;\n    --dx-border: rgba(105, 66, 216, 0.13);\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n\n    direction: ltr;\n\n    color: var(--dx-dark);\n\n    background:\n        radial-gradient(\n            circle at 8% 10%,\n            rgba(105, 66, 216, 0.075),\n            transparent 25%\n        ),\n        radial-gradient(\n            circle at 92% 92%,\n            rgba(145, 104, 239, 0.065),\n            transparent 28%\n        ),\n        var(--dx-bg);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-home-testimonials button {\n    font: inherit;\n}\n\n\/* =========================================================\n   DECORATIONS\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-orbit {\n    position: absolute;\n    z-index: -3;\n\n    border: 1px solid rgba(105, 66, 216, 0.10);\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-home-testimonials .dx-test-orbit-one {\n    top: -210px;\n    left: -180px;\n\n    width: 430px;\n    height: 430px;\n}\n\n#dx-home-testimonials .dx-test-orbit-two {\n    right: -190px;\n    bottom: -250px;\n\n    width: 480px;\n    height: 480px;\n}\n\n#dx-home-testimonials .dx-test-dots {\n    position: absolute;\n    z-index: -2;\n\n    width: 120px;\n    height: 120px;\n\n    opacity: 0.23;\n\n    background-image:\n        radial-gradient(\n            circle,\n            var(--dx-purple-light) 2px,\n            transparent 2.7px\n        );\n\n    background-size: 17px 17px;\n\n    pointer-events: none;\n}\n\n#dx-home-testimonials .dx-test-dots-one {\n    top: 70px;\n    right: 4%;\n}\n\n#dx-home-testimonials .dx-test-dots-two {\n    left: 3%;\n    bottom: 50px;\n}\n\n\/* =========================================================\n   SECTION LAYOUT\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        90px\n        clamp(22px, 5vw, 90px)\n        88px;\n}\n\n#dx-home-testimonials .dx-test-container {\n    width: min(1450px, 100%);\n    margin: 0 auto;\n}\n\n\/* =========================================================\n   MAIN HEADER\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-header {\n    max-width: 800px;\n\n    margin: 0 auto 48px;\n\n    text-align: center;\n}\n\n#dx-home-testimonials .dx-test-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    margin-bottom: 11px;\n\n    color: var(--dx-purple);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.6;\n}\n\n#dx-home-testimonials .dx-test-eyebrow::before,\n#dx-home-testimonials .dx-test-eyebrow::after {\n    content: \"\";\n\n    width: 31px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-yellow),\n            var(--dx-purple-light)\n        );\n}\n\n#dx-home-testimonials .dx-test-title {\n    margin: 0;\n\n    color: var(--dx-dark);\n\n    font-size: clamp(35px, 3.7vw, 56px);\n    font-weight: 900;\n    line-height: 1.25;\n    letter-spacing: -1px;\n}\n\n#dx-home-testimonials .dx-test-description {\n    max-width: 700px;\n\n    margin: 15px auto 0;\n\n    color: var(--dx-text);\n\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.8;\n}\n\n\/* =========================================================\n   VIDEO TESTIMONIALS\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-video-grid {\n    width: min(1200px, 100%);\n\n    margin: 0 auto 62px;\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(2, minmax(0, 1fr));\n\n    gap: 25px;\n}\n\n#dx-home-testimonials .dx-test-video-card {\n    position: relative;\n    isolation: isolate;\n\n    width: 100%;\n    aspect-ratio: 16 \/ 9;\n\n    padding: 0;\n\n    overflow: hidden;\n\n    border: 1px solid rgba(105, 66, 216, 0.12);\n    border-radius: 22px;\n\n    background: #13082f;\n\n    box-shadow:\n        0 24px 55px rgba(31, 13, 70, 0.18);\n\n    cursor: pointer;\n\n    transition:\n        transform 0.35s ease,\n        box-shadow 0.35s ease,\n        border-color 0.35s ease;\n}\n\n#dx-home-testimonials .dx-test-video-card:hover,\n#dx-home-testimonials .dx-test-video-card:focus-visible {\n    border-color: rgba(105, 66, 216, 0.40);\n\n    box-shadow:\n        0 32px 70px rgba(31, 13, 70, 0.25);\n\n    transform: translateY(-7px);\n}\n\n#dx-home-testimonials .dx-test-video-image {\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n    object-position: center;\n\n    transition:\n        transform 0.55s ease,\n        filter 0.55s ease;\n}\n\n#dx-home-testimonials .dx-test-video-card:hover .dx-test-video-image {\n    transform: scale(1.045);\n\n    filter: brightness(0.82);\n}\n\n#dx-home-testimonials .dx-test-video-overlay {\n    position: absolute;\n    z-index: 2;\n\n    inset: 0;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    background:\n        linear-gradient(\n            180deg,\n            rgba(13, 4, 37, 0.08),\n            rgba(13, 4, 37, 0.35)\n        );\n}\n\n#dx-home-testimonials .dx-test-play {\n    position: relative;\n\n    width: 82px;\n    height: 82px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid rgba(255, 255, 255, 0.55);\n    border-radius: 50%;\n\n    color: var(--dx-white);\n\n    background:\n        linear-gradient(\n            135deg,\n            rgba(105, 66, 216, 0.96),\n            rgba(145, 104, 239, 0.96)\n        );\n\n    box-shadow:\n        0 18px 42px rgba(58, 26, 132, 0.40);\n\n    transition:\n        transform 0.3s ease,\n        box-shadow 0.3s ease;\n}\n\n#dx-home-testimonials .dx-test-play::before {\n    content: \"\";\n\n    position: absolute;\n\n    inset: -12px;\n\n    border: 1px solid rgba(255, 255, 255, 0.27);\n    border-radius: 50%;\n\n    animation:\n        dxTestPulse\n        2.2s\n        ease-out\n        infinite;\n}\n\n#dx-home-testimonials .dx-test-video-card:hover .dx-test-play {\n    transform: scale(1.08);\n\n    box-shadow:\n        0 23px 50px rgba(58, 26, 132, 0.52);\n}\n\n#dx-home-testimonials .dx-test-play svg {\n    width: 31px;\n    height: 31px;\n\n    fill: currentColor;\n\n    transform: translateX(2px);\n}\n\n@keyframes dxTestPulse {\n\n    0% {\n        opacity: 0.75;\n\n        transform: scale(0.88);\n    }\n\n    100% {\n        opacity: 0;\n\n        transform: scale(1.35);\n    }\n}\n\n#dx-home-testimonials .dx-test-video-badge {\n    position: absolute;\n    z-index: 3;\n\n    left: 18px;\n    bottom: 17px;\n\n    display: inline-flex;\n    align-items: center;\n\n    gap: 7px;\n\n    padding:\n        8px\n        12px;\n\n    border:\n        1px solid rgba(255, 255, 255, 0.16);\n\n    border-radius:\n        999px;\n\n    color:\n        var(--dx-white);\n\n    background:\n        rgba(13, 4, 37, 0.70);\n\n    -webkit-backdrop-filter:\n        blur(12px);\n\n    backdrop-filter:\n        blur(12px);\n\n    font-size:\n        12px;\n\n    font-weight:\n        700;\n\n    line-height:\n        1.4;\n}\n\n#dx-home-testimonials .dx-test-video-badge svg {\n    width: 15px;\n    height: 15px;\n\n    fill: currentColor;\n}\n\n\/* =========================================================\n   TEXT TESTIMONIALS HEADER\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-text-section {\n    position: relative;\n\n    width: 100%;\n}\n\n#dx-home-testimonials .dx-test-subheader {\n    max-width: 720px;\n\n    margin: 0 auto 30px;\n\n    text-align: center;\n}\n\n#dx-home-testimonials .dx-test-subtitle {\n    margin: 0;\n\n    color: var(--dx-dark);\n\n    font-size:\n        clamp(\n            25px,\n            2.4vw,\n            36px\n        );\n\n    font-weight: 900;\n    line-height: 1.3;\n}\n\n#dx-home-testimonials .dx-test-subdescription {\n    margin: 9px auto 0;\n\n    color: var(--dx-muted);\n\n    font-size: 15px;\n    font-weight: 400;\n    line-height: 1.75;\n}\n\n\/* =========================================================\n   SLIDER\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-slider {\n    position: relative;\n\n    width: 100%;\n\n    padding:\n        0\n        58px;\n}\n\n#dx-home-testimonials .dx-test-viewport {\n    width: 100%;\n\n    overflow: hidden;\n}\n\n#dx-home-testimonials .dx-test-track {\n    display: flex;\n\n    direction: ltr;\n\n    transition:\n        transform\n        1.05s\n        cubic-bezier(\n            0.22,\n            0.61,\n            0.36,\n            1\n        );\n\n    will-change: transform;\n}\n\n#dx-home-testimonials .dx-test-slide {\n    flex:\n        0\n        0\n        50%;\n\n    min-width: 0;\n\n    padding: 12px;\n}\n\n\/* =========================================================\n   REVIEW CARD\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-card {\n    position: relative;\n\n    height: 100%;\n    min-height: 320px;\n\n    padding:\n        31px\n        30px\n        28px;\n\n    display: flex;\n    flex-direction: column;\n\n    overflow: hidden;\n\n    border:\n        1px solid var(--dx-border);\n\n    border-radius:\n        21px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.98),\n            rgba(252, 250, 255, 0.96)\n        );\n\n    box-shadow:\n        0 20px 48px rgba(42, 20, 88, 0.09);\n\n    transition:\n        transform 0.3s ease,\n        box-shadow 0.3s ease,\n        border-color 0.3s ease;\n}\n\n#dx-home-testimonials .dx-test-card:hover {\n    border-color:\n        rgba(105, 66, 216, 0.28);\n\n    box-shadow:\n        0 27px 58px rgba(42, 20, 88, 0.14);\n\n    transform:\n        translateY(-5px);\n}\n\n#dx-home-testimonials .dx-test-quote-icon {\n    position: absolute;\n\n    top: 22px;\n    right: 24px;\n\n    width: 54px;\n    height: 54px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 17px;\n\n    color: var(--dx-purple);\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(105, 66, 216, 0.12),\n            rgba(145, 104, 239, 0.055)\n        );\n}\n\n#dx-home-testimonials .dx-test-quote-icon svg {\n    width: 27px;\n    height: 27px;\n\n    fill: currentColor;\n}\n\n#dx-home-testimonials .dx-test-stars {\n    display: flex;\n    align-items: center;\n\n    gap: 3px;\n\n    margin-bottom: 22px;\n\n    color: var(--dx-yellow);\n\n    font-size: 17px;\n    line-height: 1;\n}\n\n#dx-home-testimonials .dx-test-review {\n    flex-grow: 1;\n\n    margin: 0;\n\n    padding-right: 82px;\n\n    color: var(--dx-text);\n\n    font-size: 15px;\n    font-weight: 400;\n    line-height: 1.9;\n}\n\n#dx-home-testimonials .dx-test-person {\n    margin-top: 27px;\n\n    padding-top: 21px;\n\n    display: flex;\n    align-items: center;\n\n    gap: 13px;\n\n    border-top:\n        1px solid rgba(105, 66, 216, 0.10);\n}\n\n#dx-home-testimonials .dx-test-avatar {\n    width: 54px;\n    height: 54px;\n    flex: 0 0 54px;\n\n    overflow: hidden;\n\n    border:\n        3px solid rgba(105, 66, 216, 0.11);\n\n    border-radius: 50%;\n\n    background: #eeeaf7;\n}\n\n#dx-home-testimonials .dx-test-avatar img {\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n    object-position: center;\n}\n\n#dx-home-testimonials .dx-test-person-info {\n    min-width: 0;\n\n    display: flex;\n    flex-direction: column;\n\n    text-align: left;\n}\n\n#dx-home-testimonials .dx-test-person-name {\n    color: var(--dx-dark);\n\n    font-size: 15px;\n    font-weight: 800;\n    line-height: 1.5;\n}\n\n#dx-home-testimonials .dx-test-person-company {\n    margin-top: 3px;\n\n    color: var(--dx-muted);\n\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 1.5;\n}\n\n\/* =========================================================\n   SLIDER ARROWS\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-arrow {\n    position: absolute;\n    z-index: 10;\n\n    top: 50%;\n\n    width: 46px;\n    height: 46px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    padding: 0;\n\n    border:\n        1px solid rgba(105, 66, 216, 0.14);\n\n    border-radius: 50%;\n\n    color: var(--dx-purple);\n\n    background:\n        var(--dx-white);\n\n    box-shadow:\n        0 14px 30px rgba(41, 19, 87, 0.14);\n\n    cursor: pointer;\n\n    transform:\n        translateY(-50%);\n\n    transition:\n        color 0.25s ease,\n        background 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-home-testimonials .dx-test-arrow:hover,\n#dx-home-testimonials .dx-test-arrow:focus-visible {\n    color: var(--dx-white);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-purple),\n            var(--dx-purple-light)\n        );\n\n    box-shadow:\n        0 18px 38px rgba(105, 66, 216, 0.28);\n}\n\n#dx-home-testimonials .dx-test-arrow-prev {\n    left: 0;\n}\n\n#dx-home-testimonials .dx-test-arrow-next {\n    right: 0;\n}\n\n#dx-home-testimonials .dx-test-arrow svg {\n    width: 20px;\n    height: 20px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   PAGINATION\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-pagination {\n    margin-top: 24px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 8px;\n}\n\n#dx-home-testimonials .dx-test-dot {\n    width: 8px;\n    height: 8px;\n\n    padding: 0;\n\n    border: 0;\n    border-radius: 999px;\n\n    background:\n        rgba(105, 66, 216, 0.20);\n\n    cursor: pointer;\n\n    transition:\n        width 0.25s ease,\n        background 0.25s ease;\n}\n\n#dx-home-testimonials .dx-test-dot.is-active {\n    width: 28px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-purple),\n            var(--dx-purple-light)\n        );\n}\n\n\/* =========================================================\n   VIDEO MODAL\n========================================================= *\/\n\n.dx-test-modal {\n    position: fixed;\n    z-index: 999999;\n\n    inset: 0;\n\n    display: none;\n    align-items: center;\n    justify-content: center;\n\n    padding:\n        70px\n        28px\n        28px;\n\n    background:\n        rgba(5, 0, 20, 0.92);\n\n    -webkit-backdrop-filter:\n        blur(10px);\n\n    backdrop-filter:\n        blur(10px);\n}\n\n.dx-test-modal.is-open {\n    display: flex;\n\n    animation:\n        dxTestModalFade\n        0.25s\n        ease\n        both;\n}\n\n@keyframes dxTestModalFade {\n\n    from {\n        opacity: 0;\n    }\n\n    to {\n        opacity: 1;\n    }\n}\n\n.dx-test-modal-dialog {\n    position: relative;\n\n    width:\n        min(\n            1200px,\n            100%\n        );\n\n    aspect-ratio:\n        16 \/ 9;\n\n    overflow: hidden;\n\n    border:\n        1px solid rgba(255, 255, 255, 0.15);\n\n    border-radius:\n        20px;\n\n    background:\n        #000000;\n\n    box-shadow:\n        0 35px 100px rgba(0, 0, 0, 0.60);\n\n    animation:\n        dxTestModalScale\n        0.3s\n        ease\n        both;\n}\n\n@keyframes dxTestModalScale {\n\n    from {\n        opacity: 0;\n\n        transform:\n            scale(0.94)\n            translateY(10px);\n    }\n\n    to {\n        opacity: 1;\n\n        transform:\n            scale(1)\n            translateY(0);\n    }\n}\n\n.dx-test-modal-video {\n    width: 100%;\n    height: 100%;\n}\n\n.dx-test-modal-video iframe {\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    border: 0;\n}\n\n\/* =========================================================\n   VIDEO MODAL CLOSE BUTTON\n========================================================= *\/\n\n.dx-test-modal-close {\n    position:\n        fixed !important;\n\n    z-index:\n        2147483647 !important;\n\n    top:\n        22px !important;\n\n    right:\n        24px !important;\n\n    width:\n        48px !important;\n\n    height:\n        48px !important;\n\n    display:\n        flex !important;\n\n    align-items:\n        center !important;\n\n    justify-content:\n        center !important;\n\n    margin:\n        0 !important;\n\n    padding:\n        0 !important;\n\n    border:\n        1px solid rgba(255, 255, 255, 0.35) !important;\n\n    border-radius:\n        14px !important;\n\n    background:\n        linear-gradient(\n            135deg,\n            #6942d8,\n            #9168ef\n        ) !important;\n\n    box-shadow:\n        0 12px 30px rgba(0, 0, 0, 0.38) !important;\n\n    cursor:\n        pointer !important;\n\n    appearance:\n        none !important;\n\n    -webkit-appearance:\n        none !important;\n\n    opacity:\n        1 !important;\n\n    visibility:\n        visible !important;\n\n    transition:\n        transform 0.25s ease,\n        background 0.25s ease,\n        box-shadow 0.25s ease !important;\n}\n\n.dx-test-modal-close::before,\n.dx-test-modal-close::after {\n    content:\n        \"\" !important;\n\n    position:\n        absolute !important;\n\n    top:\n        50% !important;\n\n    left:\n        50% !important;\n\n    width:\n        23px !important;\n\n    height:\n        3px !important;\n\n    display:\n        block !important;\n\n    border-radius:\n        999px !important;\n\n    background:\n        #ffffff !important;\n\n    transform-origin:\n        center !important;\n\n    opacity:\n        1 !important;\n\n    visibility:\n        visible !important;\n\n    pointer-events:\n        none !important;\n}\n\n.dx-test-modal-close::before {\n    transform:\n        translate(-50%, -50%)\n        rotate(45deg) !important;\n}\n\n.dx-test-modal-close::after {\n    transform:\n        translate(-50%, -50%)\n        rotate(-45deg) !important;\n}\n\n.dx-test-modal-close:hover,\n.dx-test-modal-close:focus-visible {\n    background:\n        linear-gradient(\n            135deg,\n            #9168ef,\n            #6942d8\n        ) !important;\n\n    box-shadow:\n        0 16px 38px rgba(105, 66, 216, 0.48) !important;\n\n    transform:\n        scale(1.08) !important;\n}\n\n.dx-test-modal-close:focus-visible {\n    outline:\n        3px solid #ffc441 !important;\n\n    outline-offset:\n        4px !important;\n}\n\n\/* =========================================================\n   RESPONSIVE\n========================================================= *\/\n\n@media (max-width: 900px) {\n\n    #dx-home-testimonials .dx-test-main {\n        padding:\n            76px\n            28px\n            74px;\n    }\n\n    #dx-home-testimonials .dx-test-video-grid {\n        gap: 18px;\n\n        margin-bottom:\n            52px;\n    }\n\n    #dx-home-testimonials .dx-test-slide {\n        flex-basis: 100%;\n    }\n\n    #dx-home-testimonials .dx-test-card {\n        min-height:\n            300px;\n    }\n}\n\n@media (max-width: 700px) {\n\n    #dx-home-testimonials .dx-test-video-grid {\n        grid-template-columns:\n            1fr;\n    }\n\n    #dx-home-testimonials .dx-test-slider {\n        padding:\n            0\n            37px;\n    }\n\n    #dx-home-testimonials .dx-test-arrow {\n        width:\n            40px;\n\n        height:\n            40px;\n    }\n\n    #dx-home-testimonials .dx-test-arrow-prev {\n        left:\n            -5px;\n    }\n\n    #dx-home-testimonials .dx-test-arrow-next {\n        right:\n            -5px;\n    }\n}\n\n@media (max-width: 600px) {\n\n    #dx-home-testimonials .dx-test-main {\n        padding:\n            64px\n            20px\n            62px;\n    }\n\n    #dx-home-testimonials .dx-test-header {\n        margin-bottom:\n            35px;\n    }\n\n    #dx-home-testimonials .dx-test-title {\n        font-size:\n            clamp(\n                29px,\n                9vw,\n                40px\n            );\n\n        line-height:\n            1.3;\n    }\n\n    #dx-home-testimonials .dx-test-description {\n        font-size:\n            15px;\n\n        line-height:\n            1.75;\n    }\n\n    #dx-home-testimonials .dx-test-video-grid {\n        margin-bottom:\n            47px;\n    }\n\n    #dx-home-testimonials .dx-test-video-card {\n        border-radius:\n            17px;\n    }\n\n    #dx-home-testimonials .dx-test-play {\n        width:\n            66px;\n\n        height:\n            66px;\n    }\n\n    #dx-home-testimonials .dx-test-play svg {\n        width:\n            26px;\n\n        height:\n            26px;\n    }\n\n    #dx-home-testimonials .dx-test-subtitle {\n        font-size:\n            27px;\n\n        line-height:\n            1.35;\n    }\n\n    #dx-home-testimonials .dx-test-subdescription {\n        font-size:\n            14px;\n\n        line-height:\n            1.7;\n    }\n\n    #dx-home-testimonials .dx-test-slider {\n        padding:\n            0;\n    }\n\n    #dx-home-testimonials .dx-test-slide {\n        padding:\n            6px;\n    }\n\n    #dx-home-testimonials .dx-test-card {\n        min-height:\n            0;\n\n        padding:\n            26px\n            22px\n            23px;\n\n        border-radius:\n            17px;\n    }\n\n    #dx-home-testimonials .dx-test-quote-icon {\n        top:\n            18px;\n\n        right:\n            18px;\n\n        width:\n            46px;\n\n        height:\n            46px;\n\n        border-radius:\n            14px;\n    }\n\n    #dx-home-testimonials .dx-test-review {\n        padding-right:\n            58px;\n\n        font-size:\n            14px;\n\n        line-height:\n            1.8;\n    }\n\n    #dx-home-testimonials .dx-test-arrow {\n        top:\n            auto;\n\n        bottom:\n            -58px;\n\n        width:\n            42px;\n\n        height:\n            42px;\n    }\n\n    #dx-home-testimonials .dx-test-arrow-prev {\n        left:\n            calc(50% - 50px);\n    }\n\n    #dx-home-testimonials .dx-test-arrow-next {\n        right:\n            calc(50% - 50px);\n    }\n\n    #dx-home-testimonials .dx-test-pagination {\n        margin-top:\n            73px;\n    }\n\n    .dx-test-modal {\n        padding:\n            65px\n            12px\n            20px;\n    }\n\n    .dx-test-modal-dialog {\n        border-radius:\n            13px;\n    }\n\n    .dx-test-modal-close {\n        top:\n            14px !important;\n\n        right:\n            14px !important;\n\n        width:\n            44px !important;\n\n        height:\n            44px !important;\n\n        border-radius:\n            12px !important;\n    }\n\n    .dx-test-modal-close::before,\n    .dx-test-modal-close::after {\n        width:\n            21px !important;\n\n        height:\n            3px !important;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-home-testimonials button:focus-visible {\n    outline:\n        2px solid var(--dx-yellow);\n\n    outline-offset:\n        4px;\n}\n\nbody.dx-test-modal-open {\n    overflow:\n        hidden !important;\n}\n\n@media (prefers-reduced-motion: reduce) {\n\n    #dx-home-testimonials *,\n    #dx-home-testimonials *::before,\n    #dx-home-testimonials *::after,\n    .dx-test-modal *,\n    .dx-test-modal *::before,\n    .dx-test-modal *::after {\n        animation-duration:\n            0.01ms !important;\n\n        animation-iteration-count:\n            1 !important;\n\n        transition-duration:\n            0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-home-testimonials\"\n    aria-labelledby=\"dx-testimonials-title\"\n    dir=\"ltr\"\n>\n\n    <span\n        class=\"dx-test-orbit dx-test-orbit-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-test-orbit dx-test-orbit-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-test-dots dx-test-dots-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-test-dots dx-test-dots-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-test-main\">\n\n        <div class=\"dx-test-container\">\n\n            <!-- =================================================\n                 HEADER\n            ================================================== -->\n\n            <header class=\"dx-test-header\">\n\n                <span class=\"dx-test-eyebrow\">\n                    Client Testimonials\n                <\/span>\n\n                <h2\n                    id=\"dx-testimonials-title\"\n                    class=\"dx-test-title\"\n                >\n                    What Our Clients Say\n                <\/h2>\n\n                <p class=\"dx-test-description\">\n                    Real experiences from clients who trusted us\n                    to build, improve, and support their digital projects.\n                <\/p>\n\n            <\/header>\n\n            <!-- =================================================\n                 VIDEO TESTIMONIALS\n            ================================================== -->\n\n            <div class=\"dx-test-video-grid\">\n\n                <button\n                    type=\"button\"\n                    class=\"dx-test-video-card\"\n                    data-video-id=\"dtCRXdp2qag\"\n                    aria-label=\"Play the first client video testimonial\"\n                >\n                    <img loading=\"lazy\"\n                        src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/06\/84ef21a8-e751-498c-be44-d2fdf0882d6d.webp\"\n                        class=\"dx-test-video-image\"\n                        alt=\"Client video testimonial\"\n                        width=\"1600\"\n                        height=\"900\"\n                        loading=\"lazy\"\n                        decoding=\"async\"\n                    >\n\n                    <span class=\"dx-test-video-overlay\">\n\n                        <span\n                            class=\"dx-test-play\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M8 5v14l11-7z\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                    <\/span>\n\n                    <span class=\"dx-test-video-badge\">\n\n                        <svg\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <path d=\"M8 5v14l11-7z\"><\/path>\n                        <\/svg>\n\n                        <span>\n                            Watch Client Story\n                        <\/span>\n\n                    <\/span>\n                <\/button>\n\n                <button\n                    type=\"button\"\n                    class=\"dx-test-video-card\"\n                    data-video-id=\"tB7nBjjZoy8\"\n                    aria-label=\"Play the second client video testimonial\"\n                >\n                    <img loading=\"lazy\"\n                        src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/06\/e0eafccc-e822-4b9b-ace4-726086252662.webp\"\n                        class=\"dx-test-video-image\"\n                        alt=\"Client video testimonial\"\n                        width=\"1600\"\n                        height=\"900\"\n                        loading=\"lazy\"\n                        decoding=\"async\"\n                    >\n\n                    <span class=\"dx-test-video-overlay\">\n\n                        <span\n                            class=\"dx-test-play\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M8 5v14l11-7z\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                    <\/span>\n\n                    <span class=\"dx-test-video-badge\">\n\n                        <svg\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <path d=\"M8 5v14l11-7z\"><\/path>\n                        <\/svg>\n\n                        <span>\n                            Watch Client Story\n                        <\/span>\n\n                    <\/span>\n                <\/button>\n\n            <\/div>\n\n            <!-- =================================================\n                 TEXT TESTIMONIALS\n            ================================================== -->\n\n            <div class=\"dx-test-text-section\">\n\n                <header class=\"dx-test-subheader\">\n\n                    <h3 class=\"dx-test-subtitle\">\n                        Client Experiences\n                    <\/h3>\n\n                    <p class=\"dx-test-subdescription\">\n                        Feedback that reflects the quality of our work,\n                        communication, support, and overall client experience.\n                    <\/p>\n\n                <\/header>\n\n                <div\n                    class=\"dx-test-slider\"\n                    aria-roledescription=\"carousel\"\n                    aria-label=\"Client testimonials\"\n                >\n\n                    <!-- PREVIOUS -->\n\n                    <button\n                        type=\"button\"\n                        class=\"dx-test-arrow dx-test-arrow-prev\"\n                        aria-label=\"Previous testimonials\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"m15 18-6-6 6-6\"><\/path>\n                        <\/svg>\n                    <\/button>\n\n                    <div class=\"dx-test-viewport\">\n\n                        <div class=\"dx-test-track\">\n\n                            <!-- =====================================\n                                 TESTIMONIAL 1\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        I would like to thank the team for the\n                                        overall experience. It was very positive.\n                                        They listened carefully to my needs,\n                                        understood the idea clearly from the\n                                        beginning, and made a real effort to\n                                        bring it to life. Every question was\n                                        handled professionally and responses\n                                        were always quick, which was very\n                                        important to me.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5856-scaled.jpg\"\n                                                alt=\"Waseem\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                Waseem\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                Go Coach\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 2\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        What I appreciated most was the genuine\n                                        knowledge and the strong relationship\n                                        throughout the work. Wishing the team\n                                        continued success.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5856-scaled.jpg\"\n                                                alt=\"Mohamed El Khouly\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                Mohamed El Khouly\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                LUM\u00c9A\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 3\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        Great team and excellent service.\n                                        If you need a professional website to\n                                        promote your business or location,\n                                        D-INDEX is an excellent choice.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5856-scaled.jpg\"\n                                                alt=\"James Swayze\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                James Swayze\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                GMCS Power Stations\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 4\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        I highly recommend D-INDEX.\n                                        The team is always ready to help\n                                        whenever you have a question or need\n                                        support.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5857-scaled.jpg\"\n                                                alt=\"Karina Salier\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                Karina Salier\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                High Performance Brain Training\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 5\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        Honest and professional to work with,\n                                        very cooperative, and fairly priced.\n                                        Thank you for the great effort and\n                                        excellent work.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5856-scaled.jpg\"\n                                                alt=\"DZ Daly\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                DZ Daly\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                DZ Store\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 6\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        One of the best companies I have worked\n                                        with. Great service and, more\n                                        importantly, great and honest people.\n                                        Truly a five-star experience.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5856-scaled.jpg\"\n                                                alt=\"Ibrahim Hassan\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                Ibrahim Hassan\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                R&amp;G\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 7\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        One of the most professional companies\n                                        I have worked with. They understood the\n                                        requirements from the first meeting,\n                                        were cooperative in finding solutions,\n                                        and responded quickly whenever an issue\n                                        came up. Their professionalism and\n                                        respectful communication were also\n                                        greatly appreciated.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5857-scaled.jpg\"\n                                                alt=\"Roaa Ahmed\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                Roaa Ahmed\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                My Soul Space\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 8\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        I am genuinely grateful for the success\n                                        I achieved while working with D-INDEX.\n                                        They have a creative touch that is\n                                        clearly noticeable when you work with\n                                        their team.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5857-scaled.jpg\"\n                                                alt=\"Laila Kandil\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                Laila Kandil\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                Educational Creativity Center\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <!-- NEXT -->\n\n                    <button\n                        type=\"button\"\n                        class=\"dx-test-arrow dx-test-arrow-next\"\n                        aria-label=\"Next testimonials\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"m9 18 6-6-6-6\"><\/path>\n                        <\/svg>\n                    <\/button>\n\n                    <div\n                        class=\"dx-test-pagination\"\n                        aria-label=\"Testimonial navigation\"\n                    ><\/div>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<!-- =========================================================\n     VIDEO MODAL\n========================================================== -->\n\n<div\n    class=\"dx-test-modal\"\n    id=\"dx-test-video-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"Client video testimonial\"\n    aria-hidden=\"true\"\n>\n\n    <button\n        type=\"button\"\n        class=\"dx-test-modal-close\"\n        aria-label=\"Close video\"\n    ><\/button>\n\n    <div class=\"dx-test-modal-dialog\">\n\n        <div class=\"dx-test-modal-video\"><\/div>\n\n    <\/div>\n\n<\/div>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxTestimonials() {\n\n        const section =\n            document.getElementById(\n                \"dx-home-testimonials\"\n            );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized =\n            \"true\";\n\n        const widget =\n            section.closest(\n                \".elementor-widget-html\"\n            );\n\n        if (widget) {\n\n            widget.classList.add(\n                \"dx-testimonials-widget-fullwidth\"\n            );\n        }\n\n        \/* =====================================================\n           VIDEO MODAL\n        ====================================================== *\/\n\n        const videoButtons =\n            Array.from(\n                section.querySelectorAll(\n                    \".dx-test-video-card\"\n                )\n            );\n\n        const modal =\n            document.getElementById(\n                \"dx-test-video-modal\"\n            );\n\n        const modalVideo =\n            modal\n                ? modal.querySelector(\n                    \".dx-test-modal-video\"\n                )\n                : null;\n\n        const modalClose =\n            modal\n                ? modal.querySelector(\n                    \".dx-test-modal-close\"\n                )\n                : null;\n\n        let lastFocusedElement =\n            null;\n\n        function openVideo(\n            videoId,\n            trigger\n        ) {\n\n            if (\n                !modal ||\n                !modalVideo ||\n                !videoId\n            ) {\n                return;\n            }\n\n            lastFocusedElement =\n                trigger || null;\n\n            const iframe =\n                document.createElement(\n                    \"iframe\"\n                );\n\n            iframe.src =\n                \"https:\/\/www.youtube.com\/embed\/\" +\n                encodeURIComponent(videoId) +\n                \"?feature=oembed\" +\n                \"&autoplay=1\" +\n                \"&controls=1\" +\n                \"&rel=0\" +\n                \"&playsinline=1\";\n\n            iframe.title =\n                \"Client video testimonial\";\n\n            iframe.allow =\n                \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\";\n\n            iframe.allowFullscreen =\n                true;\n\n            iframe.referrerPolicy =\n                \"strict-origin-when-cross-origin\";\n\n            modalVideo.innerHTML =\n                \"\";\n\n            modalVideo.appendChild(\n                iframe\n            );\n\n            modal.classList.add(\n                \"is-open\"\n            );\n\n            modal.setAttribute(\n                \"aria-hidden\",\n                \"false\"\n            );\n\n            document.body.classList.add(\n                \"dx-test-modal-open\"\n            );\n\n            window.setTimeout(\n                function () {\n\n                    if (modalClose) {\n                        modalClose.focus();\n                    }\n\n                },\n                50\n            );\n        }\n\n        function closeVideo() {\n\n            if (\n                !modal ||\n                !modalVideo\n            ) {\n                return;\n            }\n\n            modal.classList.remove(\n                \"is-open\"\n            );\n\n            modal.setAttribute(\n                \"aria-hidden\",\n                \"true\"\n            );\n\n            modalVideo.innerHTML =\n                \"\";\n\n            document.body.classList.remove(\n                \"dx-test-modal-open\"\n            );\n\n            if (\n                lastFocusedElement &&\n                typeof lastFocusedElement.focus ===\n                    \"function\"\n            ) {\n                lastFocusedElement.focus();\n            }\n        }\n\n        videoButtons.forEach(\n            function (button) {\n\n                button.addEventListener(\n                    \"click\",\n                    function () {\n\n                        openVideo(\n                            button.getAttribute(\n                                \"data-video-id\"\n                            ),\n                            button\n                        );\n                    }\n                );\n            }\n        );\n\n        if (modalClose) {\n\n            modalClose.addEventListener(\n                \"click\",\n                closeVideo\n            );\n        }\n\n        if (modal) {\n\n            modal.addEventListener(\n                \"click\",\n                function (event) {\n\n                    if (\n                        event.target === modal\n                    ) {\n                        closeVideo();\n                    }\n                }\n            );\n        }\n\n        document.addEventListener(\n            \"keydown\",\n            function (event) {\n\n                if (\n                    event.key === \"Escape\" &&\n                    modal &&\n                    modal.classList.contains(\n                        \"is-open\"\n                    )\n                ) {\n                    closeVideo();\n                }\n            }\n        );\n\n        \/* =====================================================\n           TESTIMONIAL SLIDER\n        ====================================================== *\/\n\n        const slider =\n            section.querySelector(\n                \".dx-test-slider\"\n            );\n\n        const track =\n            section.querySelector(\n                \".dx-test-track\"\n            );\n\n        const slides =\n            Array.from(\n                section.querySelectorAll(\n                    \".dx-test-slide\"\n                )\n            );\n\n        const previousButton =\n            section.querySelector(\n                \".dx-test-arrow-prev\"\n            );\n\n        const nextButton =\n            section.querySelector(\n                \".dx-test-arrow-next\"\n            );\n\n        const pagination =\n            section.querySelector(\n                \".dx-test-pagination\"\n            );\n\n        if (\n            !slider ||\n            !track ||\n            slides.length === 0 ||\n            !pagination\n        ) {\n            return;\n        }\n\n        let currentIndex = 0;\n\n        let autoplayTimer =\n            null;\n\n        let touchStartX =\n            0;\n\n        let touchEndX =\n            0;\n\n        let resizeTimer =\n            null;\n\n        function getVisibleSlides() {\n\n            return window.innerWidth <= 900\n                ? 1\n                : 2;\n        }\n\n        function getPagesCount() {\n\n            return Math.max(\n                1,\n                Math.ceil(\n                    slides.length \/\n                    getVisibleSlides()\n                )\n            );\n        }\n\n        function normalizeIndex(\n            index\n        ) {\n\n            const pagesCount =\n                getPagesCount();\n\n            if (index < 0) {\n                return pagesCount - 1;\n            }\n\n            if (\n                index >= pagesCount\n            ) {\n                return 0;\n            }\n\n            return index;\n        }\n\n        function createPagination() {\n\n            pagination.innerHTML =\n                \"\";\n\n            const pagesCount =\n                getPagesCount();\n\n            for (\n                let index = 0;\n                index < pagesCount;\n                index += 1\n            ) {\n\n                const dot =\n                    document.createElement(\n                        \"button\"\n                    );\n\n                dot.type =\n                    \"button\";\n\n                dot.className =\n                    \"dx-test-dot\";\n\n                dot.setAttribute(\n                    \"aria-label\",\n                    \"Go to testimonial group \" +\n                    (index + 1)\n                );\n\n                dot.addEventListener(\n                    \"click\",\n                    function () {\n\n                        currentIndex =\n                            index;\n\n                        updateSlider();\n\n                        restartAutoplay();\n                    }\n                );\n\n                pagination.appendChild(\n                    dot\n                );\n            }\n        }\n\n        function updateSlider() {\n\n            const visibleSlides =\n                getVisibleSlides();\n\n            const slidePercentage =\n                100 \/ visibleSlides;\n\n            const offset =\n                currentIndex *\n                visibleSlides *\n                slidePercentage;\n\n            \/*\n             * LTR slider moves left as index increases.\n             *\/\n            track.style.transform =\n                \"translateX(-\" +\n                offset +\n                \"%)\";\n\n            const dots =\n                Array.from(\n                    pagination.querySelectorAll(\n                        \".dx-test-dot\"\n                    )\n                );\n\n            dots.forEach(\n                function (\n                    dot,\n                    index\n                ) {\n\n                    const isActive =\n                        index ===\n                        currentIndex;\n\n                    dot.classList.toggle(\n                        \"is-active\",\n                        isActive\n                    );\n\n                    dot.setAttribute(\n                        \"aria-current\",\n                        isActive\n                            ? \"true\"\n                            : \"false\"\n                    );\n                }\n            );\n        }\n\n        function goNext() {\n\n            currentIndex =\n                normalizeIndex(\n                    currentIndex + 1\n                );\n\n            updateSlider();\n        }\n\n        function goPrevious() {\n\n            currentIndex =\n                normalizeIndex(\n                    currentIndex - 1\n                );\n\n            updateSlider();\n        }\n\n        function stopAutoplay() {\n\n            if (autoplayTimer) {\n\n                window.clearInterval(\n                    autoplayTimer\n                );\n\n                autoplayTimer =\n                    null;\n            }\n        }\n\n        function startAutoplay() {\n\n            stopAutoplay();\n\n            autoplayTimer =\n                window.setInterval(\n                    goNext,\n                    5500\n                );\n        }\n\n        function restartAutoplay() {\n\n            stopAutoplay();\n\n            startAutoplay();\n        }\n\n        if (previousButton) {\n\n            previousButton.addEventListener(\n                \"click\",\n                function () {\n\n                    goPrevious();\n\n                    restartAutoplay();\n                }\n            );\n        }\n\n        if (nextButton) {\n\n            nextButton.addEventListener(\n                \"click\",\n                function () {\n\n                    goNext();\n\n                    restartAutoplay();\n                }\n            );\n        }\n\n        slider.addEventListener(\n            \"mouseenter\",\n            stopAutoplay\n        );\n\n        slider.addEventListener(\n            \"mouseleave\",\n            startAutoplay\n        );\n\n        slider.addEventListener(\n            \"focusin\",\n            stopAutoplay\n        );\n\n        slider.addEventListener(\n            \"focusout\",\n            startAutoplay\n        );\n\n        slider.addEventListener(\n            \"touchstart\",\n            function (event) {\n\n                touchStartX =\n                    event.changedTouches[0]\n                        .clientX;\n            },\n            {\n                passive: true\n            }\n        );\n\n        slider.addEventListener(\n            \"touchend\",\n            function (event) {\n\n                touchEndX =\n                    event.changedTouches[0]\n                        .clientX;\n\n                const distance =\n                    touchEndX -\n                    touchStartX;\n\n                if (\n                    Math.abs(distance) <\n                    45\n                ) {\n                    return;\n                }\n\n                \/*\n                 * LTR:\n                 * Swipe left  -> next\n                 * Swipe right -> previous\n                 *\/\n                if (\n                    distance < 0\n                ) {\n\n                    goNext();\n\n                } else {\n\n                    goPrevious();\n                }\n\n                restartAutoplay();\n            },\n            {\n                passive: true\n            }\n        );\n\n        window.addEventListener(\n            \"resize\",\n            function () {\n\n                window.clearTimeout(\n                    resizeTimer\n                );\n\n                resizeTimer =\n                    window.setTimeout(\n                        function () {\n\n                            currentIndex =\n                                0;\n\n                            createPagination();\n\n                            updateSlider();\n                        },\n                        150\n                    );\n            }\n        );\n\n        createPagination();\n        updateSlider();\n        startAutoplay();\n    }\n\n    if (\n        document.readyState ===\n        \"loading\"\n    ) {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxTestimonials\n        );\n\n    } else {\n\n        initDxTestimonials();\n\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-08b3df8 e-con-full e-flex e-con e-parent\" data-id=\"08b3df8\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-223ccef elementor-widget elementor-widget-html\" data-id=\"223ccef\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n.elementor-widget-html:has(#dx-woo-faq),\n.elementor-widget-html:has(#dx-woo-faq) > .elementor-widget-container,\n.dx-woo-faq-widget-fullwidth,\n.dx-woo-faq-widget-fullwidth > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n}\n\n#dx-woo-faq,\n#dx-woo-faq *,\n#dx-woo-faq *::before,\n#dx-woo-faq *::after {\n    box-sizing: border-box;\n}\n\n#dx-woo-faq {\n    --dx-bg: #f7f5fb;\n    --dx-white: #ffffff;\n    --dx-dark: #180b35;\n    --dx-text: #62596e;\n    --dx-muted: #877e92;\n    --dx-purple: #6942d8;\n    --dx-purple-light: #9168ef;\n    --dx-yellow: #ffc441;\n    --dx-green: #54d696;\n    --dx-border: rgba(105, 66, 216, 0.14);\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n    direction: ltr;\n\n    color: var(--dx-dark);\n\n    background:\n        radial-gradient(\n            circle at 8% 12%,\n            rgba(105, 66, 216, 0.08),\n            transparent 25%\n        ),\n        radial-gradient(\n            circle at 92% 88%,\n            rgba(255, 196, 65, 0.08),\n            transparent 28%\n        ),\n        var(--dx-bg);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-woo-faq button {\n    font-family: inherit;\n}\n\n#dx-woo-faq .dx-woo-faq-grid {\n    position: absolute;\n    z-index: -5;\n\n    inset: 0;\n\n    opacity: 0.15;\n\n    background-image:\n        linear-gradient(\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        );\n\n    background-size: 72px 72px;\n\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 16%,\n            transparent 82%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 16%,\n            transparent 82%\n        );\n\n    pointer-events: none;\n}\n\n#dx-woo-faq .dx-woo-faq-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        94px\n        clamp(22px, 5vw, 90px)\n        100px;\n}\n\n#dx-woo-faq .dx-woo-faq-container {\n    width: min(1320px, 100%);\n\n    margin: 0 auto;\n}\n\n#dx-woo-faq .dx-woo-faq-header {\n    max-width: 850px;\n\n    margin: 0 auto 48px;\n\n    text-align: center;\n}\n\n#dx-woo-faq .dx-woo-faq-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    margin-bottom: 12px;\n\n    color: var(--dx-purple);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-woo-faq .dx-woo-faq-eyebrow::before,\n#dx-woo-faq .dx-woo-faq-eyebrow::after {\n    content: \"\";\n\n    width: 31px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-yellow),\n            var(--dx-purple-light)\n        );\n}\n\n#dx-woo-faq .dx-woo-faq-title {\n    margin: 0;\n\n    color: var(--dx-dark);\n\n    font-size: clamp(34px, 3.7vw, 51px);\n    font-weight: 900;\n    line-height: 1.55;\n    letter-spacing: -0.4px;\n\n    text-wrap: balance;\n}\n\n#dx-woo-faq .dx-woo-faq-title span {\n    color: var(--dx-purple);\n}\n\n#dx-woo-faq .dx-woo-faq-description {\n    max-width: 720px;\n\n    margin: 14px auto 0;\n\n    color: var(--dx-text);\n\n    font-size: 16px;\n    font-weight: 500;\n    line-height: 2;\n\n    text-wrap: pretty;\n}\n\n#dx-woo-faq .dx-woo-faq-layout {\n    display: grid;\n    grid-template-columns:\n        minmax(300px, 0.42fr)\n        minmax(0, 1fr);\n\n    align-items: start;\n\n    gap: 25px;\n}\n\n#dx-woo-faq .dx-woo-faq-intro {\n    position: sticky;\n\n    top: 110px;\n\n    overflow: hidden;\n\n    padding:\n        32px\n        28px;\n\n    border: 1px solid rgba(255, 255, 255, 0.14);\n    border-radius: 24px;\n\n    color: #ffffff;\n\n    background:\n        radial-gradient(\n            circle at 10% 8%,\n            rgba(145, 104, 239, 0.24),\n            transparent 38%\n        ),\n        linear-gradient(\n            145deg,\n            #1b0a3d,\n            #0c0225\n        );\n\n    box-shadow:\n        0 26px 65px rgba(40, 18, 84, 0.18);\n}\n\n#dx-woo-faq .dx-woo-faq-intro-icon {\n    width: 66px;\n    height: 66px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 20px;\n\n    color: #180b35;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-yellow),\n            #ffd66e\n        );\n\n    box-shadow:\n        0 18px 38px rgba(255, 196, 65, 0.22);\n}\n\n#dx-woo-faq .dx-woo-faq-intro-icon svg {\n    width: 32px;\n    height: 32px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-faq .dx-woo-faq-intro-label {\n    display: block;\n\n    margin-top: 24px;\n\n    color: var(--dx-yellow);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-woo-faq .dx-woo-faq-intro-title {\n    margin:\n        7px\n        0\n        0;\n\n    color: #ffffff;\n\n    font-size: 26px;\n    font-weight: 900;\n    line-height: 1.55;\n}\n\n#dx-woo-faq .dx-woo-faq-intro-text {\n    margin:\n        12px\n        0\n        0;\n\n    color: rgba(255, 255, 255, 0.73);\n\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 2;\n}\n\n#dx-woo-faq .dx-woo-faq-intro-list {\n    margin-top: 23px;\n    padding-top: 21px;\n\n    display: grid;\n\n    gap: 12px;\n\n    border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n#dx-woo-faq .dx-woo-faq-intro-item {\n    display: flex;\n    align-items: flex-start;\n\n    gap: 10px;\n\n    color: rgba(255, 255, 255, 0.78);\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.8;\n}\n\n#dx-woo-faq .dx-woo-faq-intro-check {\n    width: 27px;\n    height: 27px;\n    flex: 0 0 27px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 9px;\n\n    color: #7ce3b3;\n\n    background: rgba(84, 214, 150, 0.12);\n}\n\n#dx-woo-faq .dx-woo-faq-intro-check svg {\n    width: 14px;\n    height: 14px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2.3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-faq .dx-woo-faq-list {\n    display: grid;\n\n    gap: 13px;\n}\n\n#dx-woo-faq .dx-woo-faq-item {\n    overflow: hidden;\n\n    border: 1px solid var(--dx-border);\n    border-radius: 18px;\n\n    background: rgba(255, 255, 255, 0.93);\n\n    box-shadow:\n        0 15px 38px rgba(40, 18, 84, 0.07);\n\n    transition:\n        border-color 0.3s ease,\n        box-shadow 0.3s ease,\n        transform 0.3s ease;\n}\n\n#dx-woo-faq .dx-woo-faq-item:hover {\n    border-color: rgba(105, 66, 216, 0.28);\n\n    box-shadow:\n        0 21px 48px rgba(40, 18, 84, 0.1);\n}\n\n#dx-woo-faq .dx-woo-faq-item.is-open {\n    border-color: rgba(105, 66, 216, 0.34);\n\n    box-shadow:\n        0 24px 55px rgba(40, 18, 84, 0.12);\n}\n\n#dx-woo-faq .dx-woo-faq-question {\n    width: 100%;\n    min-height: 82px;\n\n    display: grid;\n    grid-template-columns:\n        46px\n        minmax(0, 1fr)\n        42px;\n\n    align-items: center;\n\n    gap: 15px;\n\n    padding:\n        16px\n        20px;\n\n    border: 0;\n\n    color: var(--dx-dark);\n\n    background: transparent;\n\n    text-align: left;\n\n    cursor: pointer;\n}\n\n#dx-woo-faq .dx-woo-faq-number {\n    width: 46px;\n    height: 46px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 14px;\n\n    color: var(--dx-purple);\n\n    background: rgba(105, 66, 216, 0.09);\n\n    font-size: 14px;\n    font-weight: 900;\n\n    direction: ltr;\n\n    transition:\n        color 0.3s ease,\n        background 0.3s ease;\n}\n\n#dx-woo-faq .dx-woo-faq-item.is-open\n    .dx-woo-faq-number {\n    color: #ffffff;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-purple),\n            var(--dx-purple-light)\n        );\n}\n\n#dx-woo-faq .dx-woo-faq-question-text {\n    color: var(--dx-dark);\n\n    font-size: 18px;\n    font-weight: 900;\n    line-height: 1.7;\n}\n\n#dx-woo-faq .dx-woo-faq-toggle {\n    width: 42px;\n    height: 42px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 12px;\n\n    color: var(--dx-purple);\n\n    background: rgba(105, 66, 216, 0.08);\n\n    transition:\n        transform 0.3s ease,\n        color 0.3s ease,\n        background 0.3s ease;\n}\n\n#dx-woo-faq .dx-woo-faq-item.is-open\n    .dx-woo-faq-toggle {\n    color: #ffffff;\n\n    background: var(--dx-purple);\n\n    transform: rotate(45deg);\n}\n\n#dx-woo-faq .dx-woo-faq-toggle svg {\n    width: 19px;\n    height: 19px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2.2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-woo-faq .dx-woo-faq-answer {\n    display: grid;\n    grid-template-rows: 0fr;\n\n    transition:\n        grid-template-rows 0.35s ease;\n}\n\n#dx-woo-faq .dx-woo-faq-item.is-open\n    .dx-woo-faq-answer {\n    grid-template-rows: 1fr;\n}\n\n#dx-woo-faq .dx-woo-faq-answer-inner {\n    min-height: 0;\n\n    overflow: hidden;\n}\n\n#dx-woo-faq .dx-woo-faq-answer-content {\n    margin:\n        0\n        20px\n        0\n        81px;\n\n    padding:\n        0\n        0\n        23px;\n\n    border-top: 1px solid rgba(105, 66, 216, 0.09);\n\n    color: var(--dx-text);\n\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 2;\n}\n\n#dx-woo-faq .dx-woo-faq-answer-content p {\n    margin:\n        18px\n        0\n        0;\n}\n\n#dx-woo-faq .dx-woo-faq-answer-content strong {\n    color: var(--dx-dark);\n    font-weight: 900;\n}\n\n#dx-woo-faq .dx-woo-faq-answer-list {\n    margin:\n        13px\n        0\n        0;\n\n    padding: 0;\n\n    display: grid;\n\n    gap: 8px;\n\n    list-style: none;\n}\n\n#dx-woo-faq .dx-woo-faq-answer-list li {\n    position: relative;\n\n    padding-left: 20px;\n}\n\n#dx-woo-faq .dx-woo-faq-answer-list li::before {\n    content: \"\";\n\n    position: absolute;\n\n    top: 12px;\n    left: 0;\n\n    width: 8px;\n    height: 8px;\n\n    border-radius: 50%;\n\n    background: var(--dx-purple);\n\n    box-shadow:\n        0 0 0 5px rgba(105, 66, 216, 0.08);\n}\n\n@media (max-width: 1050px) {\n    #dx-woo-faq .dx-woo-faq-layout {\n        grid-template-columns: 1fr;\n    }\n\n    #dx-woo-faq .dx-woo-faq-intro {\n        position: relative;\n        top: auto;\n    }\n}\n\n@media (max-width: 980px) {\n    #dx-woo-faq .dx-woo-faq-main {\n        padding:\n            76px\n            28px\n            82px;\n    }\n}\n\n@media (max-width: 680px) {\n    #dx-woo-faq .dx-woo-faq-main {\n        padding:\n            59px\n            16px\n            65px;\n    }\n\n    #dx-woo-faq .dx-woo-faq-header {\n        margin-bottom: 34px;\n    }\n\n    #dx-woo-faq .dx-woo-faq-eyebrow {\n        font-size: 14px;\n    }\n\n    #dx-woo-faq .dx-woo-faq-eyebrow::before,\n    #dx-woo-faq .dx-woo-faq-eyebrow::after {\n        width: 22px;\n    }\n\n    #dx-woo-faq .dx-woo-faq-title {\n        font-size: clamp(28px, 8.5vw, 37px);\n        line-height: 1.65;\n        letter-spacing: -0.2px;\n    }\n\n    #dx-woo-faq .dx-woo-faq-description {\n        margin-top: 10px;\n\n        font-size: 15px;\n        line-height: 2;\n    }\n\n    #dx-woo-faq .dx-woo-faq-layout {\n        gap: 15px;\n    }\n\n    #dx-woo-faq .dx-woo-faq-intro {\n        padding:\n            25px\n            20px;\n\n        border-radius: 20px;\n    }\n\n    #dx-woo-faq .dx-woo-faq-intro-icon {\n        width: 58px;\n        height: 58px;\n\n        border-radius: 17px;\n    }\n\n    #dx-woo-faq .dx-woo-faq-intro-icon svg {\n        width: 28px;\n        height: 28px;\n    }\n\n    #dx-woo-faq .dx-woo-faq-intro-label {\n        font-size: 14px;\n    }\n\n    #dx-woo-faq .dx-woo-faq-intro-title {\n        font-size: 23px;\n    }\n\n    #dx-woo-faq .dx-woo-faq-intro-text,\n    #dx-woo-faq .dx-woo-faq-intro-item {\n        font-size: 14px;\n    }\n\n    #dx-woo-faq .dx-woo-faq-item {\n        border-radius: 16px;\n    }\n\n    #dx-woo-faq .dx-woo-faq-question {\n        min-height: 76px;\n\n        grid-template-columns:\n            38px\n            minmax(0, 1fr)\n            37px;\n\n        gap: 10px;\n\n        padding:\n            14px\n            13px;\n    }\n\n    #dx-woo-faq .dx-woo-faq-number {\n        width: 38px;\n        height: 38px;\n\n        border-radius: 11px;\n\n        font-size: 14px;\n    }\n\n    #dx-woo-faq .dx-woo-faq-question-text {\n        font-size: 16px;\n        line-height: 1.75;\n    }\n\n    #dx-woo-faq .dx-woo-faq-toggle {\n        width: 37px;\n        height: 37px;\n\n        border-radius: 10px;\n    }\n\n    #dx-woo-faq .dx-woo-faq-answer-content {\n        margin:\n            0\n            13px\n            0\n            61px;\n\n        padding-bottom: 19px;\n\n        font-size: 14px;\n        line-height: 2;\n    }\n}\n\n#dx-woo-faq button:focus-visible {\n    outline: 3px solid var(--dx-yellow);\n    outline-offset: 3px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    #dx-woo-faq *,\n    #dx-woo-faq *::before,\n    #dx-woo-faq *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-woo-faq\"\n    aria-labelledby=\"dx-woo-faq-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n    <div\n        class=\"dx-woo-faq-grid\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <div class=\"dx-woo-faq-main\">\n\n        <div class=\"dx-woo-faq-container\">\n\n            <header class=\"dx-woo-faq-header\">\n\n                <span class=\"dx-woo-faq-eyebrow\">\n                    Frequently Asked Questions\n                <\/span>\n\n                <h2\n                    id=\"dx-woo-faq-title\"\n                    class=\"dx-woo-faq-title\"\n                >\n                    Answers to Common Questions About\n                    <span>WooCommerce Stores<\/span>\n                <\/h2>\n\n                <p class=\"dx-woo-faq-description\">\n                    We\u2019ve answered some of the most common questions\n                    businesses ask before starting an online store\n                    with WordPress and WooCommerce.\n                <\/p>\n\n            <\/header>\n\n            <div class=\"dx-woo-faq-layout\">\n\n                <aside class=\"dx-woo-faq-intro\">\n\n                    <span\n                        class=\"dx-woo-faq-intro-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <circle\n                                cx=\"12\"\n                                cy=\"12\"\n                                r=\"9\"\n                            ><\/circle>\n                            <path d=\"M9.5 9a2.5 2.5 0 1 1 4.3 1.7c-1.3 1.1-1.8 1.5-1.8 3.3\"><\/path>\n                            <path d=\"M12 18h.01\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <span class=\"dx-woo-faq-intro-label\">\n                        Before You Get Started\n                    <\/span>\n\n                    <h3 class=\"dx-woo-faq-intro-title\">\n                        What You Need to Know Before Building Your Store\n                    <\/h3>\n\n                    <p class=\"dx-woo-faq-intro-text\">\n                        Every online store is different depending on\n                        its products, target market, payment methods,\n                        and shipping process. These answers cover the\n                        key points to understand before defining your\n                        project requirements.\n                    <\/p>\n\n                    <div class=\"dx-woo-faq-intro-list\">\n\n                        <div class=\"dx-woo-faq-intro-item\">\n\n                            <span\n                                class=\"dx-woo-faq-intro-check\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span>\n                                A customizable and scalable online store.\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-woo-faq-intro-item\">\n\n                            <span\n                                class=\"dx-woo-faq-intro-check\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span>\n                                Simple product and order management.\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-woo-faq-intro-item\">\n\n                            <span\n                                class=\"dx-woo-faq-intro-check\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span>\n                                Integration with suitable payment and shipping solutions.\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/aside>\n\n                <div class=\"dx-woo-faq-list\">\n\n                    <article class=\"dx-woo-faq-item is-open\">\n\n                        <button\n                            type=\"button\"\n                            class=\"dx-woo-faq-question\"\n                            aria-expanded=\"true\"\n                        >\n                            <span class=\"dx-woo-faq-number\">\n                                01\n                            <\/span>\n\n                            <span class=\"dx-woo-faq-question-text\">\n                                How Long Does It Take to Build a WooCommerce Store?\n                            <\/span>\n\n                            <span\n                                class=\"dx-woo-faq-toggle\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M12 5v14\"><\/path>\n                                    <path d=\"M5 12h14\"><\/path>\n                                <\/svg>\n                            <\/span>\n                        <\/button>\n\n                        <div class=\"dx-woo-faq-answer\">\n\n                            <div class=\"dx-woo-faq-answer-inner\">\n\n                                <div class=\"dx-woo-faq-answer-content\">\n\n                                    <p>\n                                        The timeline depends on the size of\n                                        the store, number of pages and products,\n                                        and the integrations required. The final\n                                        timeframe is defined after reviewing the\n                                        project requirements and available content.\n                                    <\/p>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/article>\n\n                    <article class=\"dx-woo-faq-item\">\n\n                        <button\n                            type=\"button\"\n                            class=\"dx-woo-faq-question\"\n                            aria-expanded=\"false\"\n                        >\n                            <span class=\"dx-woo-faq-number\">\n                                02\n                            <\/span>\n\n                            <span class=\"dx-woo-faq-question-text\">\n                                Can I Manage the Store Myself After Delivery?\n                            <\/span>\n\n                            <span\n                                class=\"dx-woo-faq-toggle\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M12 5v14\"><\/path>\n                                    <path d=\"M5 12h14\"><\/path>\n                                <\/svg>\n                            <\/span>\n                        <\/button>\n\n                        <div class=\"dx-woo-faq-answer\">\n\n                            <div class=\"dx-woo-faq-answer-inner\">\n\n                                <div class=\"dx-woo-faq-answer-content\">\n\n                                    <p>\n                                        Yes. You can manage products,\n                                        prices, inventory, orders, and customers\n                                        through the WordPress and WooCommerce\n                                        administration dashboard.\n                                    <\/p>\n\n                                    <ul class=\"dx-woo-faq-answer-list\">\n                                        <li>\n                                            Add, edit, and remove products.\n                                        <\/li>\n                                        <li>\n                                            Monitor orders and update their statuses.\n                                        <\/li>\n                                        <li>\n                                            Manage quantities, prices, and offers.\n                                        <\/li>\n                                    <\/ul>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/article>\n\n                    <article class=\"dx-woo-faq-item\">\n\n                        <button\n                            type=\"button\"\n                            class=\"dx-woo-faq-question\"\n                            aria-expanded=\"false\"\n                        >\n                            <span class=\"dx-woo-faq-number\">\n                                03\n                            <\/span>\n\n                            <span class=\"dx-woo-faq-question-text\">\n                                Can the Store Be Connected to Payment Gateways?\n                            <\/span>\n\n                            <span\n                                class=\"dx-woo-faq-toggle\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M12 5v14\"><\/path>\n                                    <path d=\"M5 12h14\"><\/path>\n                                <\/svg>\n                            <\/span>\n                        <\/button>\n\n                        <div class=\"dx-woo-faq-answer\">\n\n                            <div class=\"dx-woo-faq-answer-inner\">\n\n                                <div class=\"dx-woo-faq-answer-content\">\n\n                                    <p>\n                                        Yes. The store can be connected to\n                                        payment gateways that are compatible\n                                        with WooCommerce and available in your\n                                        operating country. Cash on delivery\n                                        can also be enabled when required.\n                                    <\/p>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/article>\n\n                    <article class=\"dx-woo-faq-item\">\n\n                        <button\n                            type=\"button\"\n                            class=\"dx-woo-faq-question\"\n                            aria-expanded=\"false\"\n                        >\n                            <span class=\"dx-woo-faq-number\">\n                                04\n                            <\/span>\n\n                            <span class=\"dx-woo-faq-question-text\">\n                                Can Shipping Companies Be Integrated With the Store?\n                            <\/span>\n\n                            <span\n                                class=\"dx-woo-faq-toggle\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M12 5v14\"><\/path>\n                                    <path d=\"M5 12h14\"><\/path>\n                                <\/svg>\n                            <\/span>\n                        <\/button>\n\n                        <div class=\"dx-woo-faq-answer\">\n\n                            <div class=\"dx-woo-faq-answer-inner\">\n\n                                <div class=\"dx-woo-faq-answer-content\">\n\n                                    <p>\n                                        Yes. Shipping zones and rates can\n                                        be configured, and shipping providers\n                                        that offer a suitable WooCommerce\n                                        integration can be connected depending\n                                        on the country and provider used.\n                                    <\/p>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/article>\n\n                    <article class=\"dx-woo-faq-item\">\n\n                        <button\n                            type=\"button\"\n                            class=\"dx-woo-faq-question\"\n                            aria-expanded=\"false\"\n                        >\n                            <span class=\"dx-woo-faq-number\">\n                                05\n                            <\/span>\n\n                            <span class=\"dx-woo-faq-question-text\">\n                                Will the Store Design Work on Mobile Devices?\n                            <\/span>\n\n                            <span\n                                class=\"dx-woo-faq-toggle\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M12 5v14\"><\/path>\n                                    <path d=\"M5 12h14\"><\/path>\n                                <\/svg>\n                            <\/span>\n                        <\/button>\n\n                        <div class=\"dx-woo-faq-answer\">\n\n                            <div class=\"dx-woo-faq-answer-inner\">\n\n                                <div class=\"dx-woo-faq-answer-content\">\n\n                                    <p>\n                                        The store is designed to work across\n                                        mobile, tablet, and desktop devices,\n                                        with the main pages and purchasing\n                                        journey reviewed at different screen sizes.\n                                    <\/p>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/article>\n\n                    <article class=\"dx-woo-faq-item\">\n\n                        <button\n                            type=\"button\"\n                            class=\"dx-woo-faq-question\"\n                            aria-expanded=\"false\"\n                        >\n                            <span class=\"dx-woo-faq-number\">\n                                06\n                            <\/span>\n\n                            <span class=\"dx-woo-faq-question-text\">\n                                Are There Monthly Fees for WooCommerce?\n                            <\/span>\n\n                            <span\n                                class=\"dx-woo-faq-toggle\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M12 5v14\"><\/path>\n                                    <path d=\"M5 12h14\"><\/path>\n                                <\/svg>\n                            <\/span>\n                        <\/button>\n\n                        <div class=\"dx-woo-faq-answer\">\n\n                            <div class=\"dx-woo-faq-answer-inner\">\n\n                                <div class=\"dx-woo-faq-answer-content\">\n\n                                    <p>\n                                        WooCommerce itself does not charge\n                                        a monthly subscription simply for\n                                        running the store. However, separate\n                                        costs may apply for hosting, the domain,\n                                        certain plugins, payment services, or\n                                        shipping services depending on the\n                                        project requirements.\n                                    <\/p>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/article>\n\n                    <article class=\"dx-woo-faq-item\">\n\n                        <button\n                            type=\"button\"\n                            class=\"dx-woo-faq-question\"\n                            aria-expanded=\"false\"\n                        >\n                            <span class=\"dx-woo-faq-number\">\n                                07\n                            <\/span>\n\n                            <span class=\"dx-woo-faq-question-text\">\n                                Can New Features Be Added in the Future?\n                            <\/span>\n\n                            <span\n                                class=\"dx-woo-faq-toggle\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M12 5v14\"><\/path>\n                                    <path d=\"M5 12h14\"><\/path>\n                                <\/svg>\n                            <\/span>\n                        <\/button>\n\n                        <div class=\"dx-woo-faq-answer\">\n\n                            <div class=\"dx-woo-faq-answer-inner\">\n\n                                <div class=\"dx-woo-faq-answer-content\">\n\n                                    <p>\n                                        Yes. New pages, features, and\n                                        integrations can be added to the\n                                        store in the future, provided they\n                                        are compatible with the system and\n                                        plugins being used.\n                                    <\/p>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/article>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxWooFaq() {\n        const section = document.getElementById(\n            \"dx-woo-faq\"\n        );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized = \"true\";\n\n        const widget = section.closest(\n            \".elementor-widget-html\"\n        );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-woo-faq-widget-fullwidth\"\n            );\n        }\n\n        const items = Array.from(\n            section.querySelectorAll(\n                \".dx-woo-faq-item\"\n            )\n        );\n\n        items.forEach(function (item) {\n            const button = item.querySelector(\n                \".dx-woo-faq-question\"\n            );\n\n            if (!button) {\n                return;\n            }\n\n            button.addEventListener(\n                \"click\",\n                function () {\n                    const isOpen =\n                        item.classList.contains(\n                            \"is-open\"\n                        );\n\n                    items.forEach(function (currentItem) {\n                        const currentButton =\n                            currentItem.querySelector(\n                                \".dx-woo-faq-question\"\n                            );\n\n                        currentItem.classList.remove(\n                            \"is-open\"\n                        );\n\n                        if (currentButton) {\n                            currentButton.setAttribute(\n                                \"aria-expanded\",\n                                \"false\"\n                            );\n                        }\n                    });\n\n                    if (!isOpen) {\n                        item.classList.add(\"is-open\");\n\n                        button.setAttribute(\n                            \"aria-expanded\",\n                            \"true\"\n                        );\n                    }\n                }\n            );\n        });\n\n        if (\n            !(\"IntersectionObserver\" in window) ||\n            window.matchMedia(\n                \"(prefers-reduced-motion: reduce)\"\n            ).matches\n        ) {\n            return;\n        }\n\n        const intro = section.querySelector(\n            \".dx-woo-faq-intro\"\n        );\n\n        if (intro) {\n            intro.style.opacity = \"0\";\n            intro.style.transform =\n                \"translateX(-25px)\";\n\n            intro.style.transition =\n                \"opacity 0.68s ease, transform 0.68s ease\";\n        }\n\n        items.forEach(function (item, index) {\n            item.style.opacity = \"0\";\n            item.style.transform =\n                \"translateY(20px)\";\n\n            item.style.transition =\n                \"opacity 0.58s ease \" +\n                (0.07 + index * 0.06) +\n                \"s, transform 0.58s ease \" +\n                (0.07 + index * 0.06) +\n                \"s\";\n        });\n\n        const observer = new IntersectionObserver(\n            function (entries, currentObserver) {\n                entries.forEach(function (entry) {\n                    if (!entry.isIntersecting) {\n                        return;\n                    }\n\n                    if (intro) {\n                        intro.style.opacity = \"1\";\n                        intro.style.transform =\n                            \"translateX(0)\";\n                    }\n\n                    items.forEach(function (item) {\n                        item.style.opacity = \"1\";\n                        item.style.transform =\n                            \"translateY(0)\";\n                    });\n\n                    currentObserver.unobserve(\n                        entry.target\n                    );\n                });\n            },\n            {\n                threshold: 0.1\n            }\n        );\n\n        observer.observe(section);\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxWooFaq\n        );\n    } else {\n        initDxWooFaq();\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9ca3749 e-con-full e-flex e-con e-parent\" data-id=\"9ca3749\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2df17f0 elementor-widget elementor-widget-html\" data-id=\"2df17f0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n\/* =========================================================\n   ELEMENTOR FULL WIDTH\n========================================================= *\/\n\n.elementor-widget-html:has(#dx-web-final-cta),\n.elementor-widget-html:has(#dx-web-final-cta)\n    > .elementor-widget-container,\n.dx-web-final-cta-widget-fullwidth,\n.dx-web-final-cta-widget-fullwidth\n    > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n\/* =========================================================\n   RESET & VARIABLES\n========================================================= *\/\n\n#dx-web-final-cta,\n#dx-web-final-cta *,\n#dx-web-final-cta *::before,\n#dx-web-final-cta *::after {\n    box-sizing: border-box;\n}\n\n#dx-web-final-cta {\n    --dx-cta-bg: #f5f1fb;\n    --dx-cta-white: #ffffff;\n    --dx-cta-dark: #180b35;\n    --dx-cta-text: #6d6478;\n    --dx-cta-muted: #958d9f;\n    --dx-cta-purple: #6942d8;\n    --dx-cta-purple-light: #9168ef;\n    --dx-cta-yellow: #ffc441;\n    --dx-cta-yellow-light: #ffd66e;\n    --dx-cta-green: #54d696;\n    --dx-cta-border: rgba(105, 66, 216, 0.13);\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n    direction: ltr;\n\n    color: var(--dx-cta-dark);\n\n    background:\n        radial-gradient(\n            circle at 10% 20%,\n            rgba(105, 66, 216, 0.09),\n            transparent 28%\n        ),\n        radial-gradient(\n            circle at 90% 82%,\n            rgba(145, 104, 239, 0.08),\n            transparent 27%\n        ),\n        var(--dx-cta-bg);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-web-final-cta a {\n    color: inherit;\n    text-decoration: none;\n}\n\n\/* =========================================================\n   BACKGROUND\n========================================================= *\/\n\n#dx-web-final-cta .dx-final-grid-bg {\n    position: absolute;\n    z-index: -5;\n\n    inset: 0;\n\n    opacity: 0.15;\n\n    background-image:\n        linear-gradient(\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        );\n\n    background-size: 72px 72px;\n\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 20%,\n            transparent 82%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 20%,\n            transparent 82%\n        );\n\n    pointer-events: none;\n}\n\n\/* =========================================================\n   MAIN\n========================================================= *\/\n\n#dx-web-final-cta .dx-final-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        72px\n        clamp(22px, 5vw, 90px)\n        78px;\n}\n\n#dx-web-final-cta .dx-final-container {\n    width: min(1360px, 100%);\n    margin: 0 auto;\n}\n\n\/* =========================================================\n   PANEL\n========================================================= *\/\n\n#dx-web-final-cta .dx-final-panel {\n    position: relative;\n    isolation: isolate;\n\n    min-height: 345px;\n\n    display: grid;\n    grid-template-columns:\n        minmax(0, 1.1fr)\n        minmax(320px, 0.9fr);\n\n    align-items: center;\n\n    gap: clamp(35px, 5vw, 70px);\n\n    overflow: hidden;\n\n    padding:\n        48px\n        clamp(30px, 5vw, 66px);\n\n    border: 1px solid rgba(105, 66, 216, 0.16);\n    border-radius: 29px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.98),\n            rgba(249, 246, 253, 0.96)\n        );\n\n    box-shadow:\n        0 28px 75px rgba(40, 18, 84, 0.12),\n        inset 0 1px 0 rgba(255, 255, 255, 0.98);\n}\n\n#dx-web-final-cta .dx-final-panel::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    top: -170px;\n    left: -120px;\n\n    width: 420px;\n    height: 420px;\n\n    border-radius: 50%;\n\n    background: rgba(105, 66, 216, 0.12);\n\n    filter: blur(95px);\n\n    pointer-events: none;\n}\n\n#dx-web-final-cta .dx-final-panel::after {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    right: -150px;\n    bottom: -220px;\n\n    width: 450px;\n    height: 450px;\n\n    border-radius: 50%;\n\n    background: rgba(255, 196, 65, 0.11);\n\n    filter: blur(105px);\n\n    pointer-events: none;\n}\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n#dx-web-final-cta .dx-final-content {\n    position: relative;\n    z-index: 3;\n\n    min-width: 0;\n}\n\n#dx-web-final-cta .dx-final-eyebrow {\n    display: inline-flex;\n    align-items: center;\n\n    gap: 10px;\n\n    margin-bottom: 13px;\n\n    color: var(--dx-cta-purple);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-web-final-cta .dx-final-eyebrow::before {\n    content: \"\";\n\n    width: 38px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-cta-yellow),\n            var(--dx-cta-purple-light)\n        );\n}\n\n#dx-web-final-cta .dx-final-title {\n    max-width: 760px;\n\n    margin: 0;\n\n    color: var(--dx-cta-dark);\n\n    font-size: clamp(34px, 3.8vw, 53px);\n    font-weight: 900;\n    line-height: 1.5;\n    letter-spacing: -0.5px;\n\n    text-wrap: balance;\n}\n\n#dx-web-final-cta .dx-final-title span {\n    color: var(--dx-cta-purple);\n}\n\n#dx-web-final-cta .dx-final-description {\n    max-width: 700px;\n\n    margin: 15px 0 0;\n\n    color: var(--dx-cta-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n\n    text-wrap: pretty;\n}\n\n\/* =========================================================\n   ACTIONS\n========================================================= *\/\n\n#dx-web-final-cta .dx-final-actions {\n    margin-top: 28px;\n\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    gap: 12px;\n}\n\n#dx-web-final-cta .dx-final-button {\n    min-width: 205px;\n    min-height: 54px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 9px;\n\n    padding:\n        0\n        24px;\n\n    border: 1px solid transparent;\n    border-radius: 12px;\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1;\n    white-space: nowrap;\n\n    transition:\n        transform 0.25s ease,\n        border-color 0.25s ease,\n        background 0.25s ease,\n        color 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-web-final-cta .dx-final-button-primary {\n    color: #ffffff;\n\n    border-color: rgba(105, 66, 216, 0.20);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-cta-purple),\n            var(--dx-cta-purple-light)\n        );\n\n    box-shadow:\n        0 17px 36px rgba(105, 66, 216, 0.24);\n}\n\n#dx-web-final-cta .dx-final-button-secondary {\n    color: var(--dx-cta-dark);\n\n    border-color: rgba(105, 66, 216, 0.15);\n\n    background: rgba(255, 255, 255, 0.80);\n\n    box-shadow:\n        0 12px 28px rgba(40, 18, 84, 0.07);\n}\n\n#dx-web-final-cta .dx-final-button:hover,\n#dx-web-final-cta .dx-final-button:focus-visible {\n    transform: translateY(-3px);\n}\n\n#dx-web-final-cta .dx-final-button-primary:hover,\n#dx-web-final-cta .dx-final-button-primary:focus-visible {\n    box-shadow:\n        0 23px 47px rgba(105, 66, 216, 0.32);\n}\n\n#dx-web-final-cta .dx-final-button-secondary:hover,\n#dx-web-final-cta .dx-final-button-secondary:focus-visible {\n    color: var(--dx-cta-purple);\n\n    border-color: rgba(105, 66, 216, 0.32);\n\n    background: #ffffff;\n\n    box-shadow:\n        0 18px 38px rgba(40, 18, 84, 0.11);\n}\n\n#dx-web-final-cta .dx-final-button svg {\n    width: 18px;\n    height: 18px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   POINTS\n========================================================= *\/\n\n#dx-web-final-cta .dx-final-points {\n    margin-top: 22px;\n\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    gap:\n        10px\n        22px;\n}\n\n#dx-web-final-cta .dx-final-point {\n    display: inline-flex;\n    align-items: center;\n\n    gap: 8px;\n\n    color: var(--dx-cta-muted);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.6;\n}\n\n#dx-web-final-cta .dx-final-point-icon {\n    width: 20px;\n    height: 20px;\n    flex: 0 0 20px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 7px;\n\n    color: #16845a;\n\n    background: rgba(84, 214, 150, 0.14);\n}\n\n#dx-web-final-cta .dx-final-point-icon svg {\n    width: 11px;\n    height: 11px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2.3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   VISUAL SUMMARY\n========================================================= *\/\n\n#dx-web-final-cta .dx-final-summary {\n    position: relative;\n    z-index: 3;\n\n    min-width: 0;\n\n    padding:\n        27px\n        25px;\n\n    border: 1px solid rgba(105, 66, 216, 0.14);\n    border-radius: 23px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(105, 66, 216, 0.08),\n            rgba(255, 255, 255, 0.76)\n        );\n\n    box-shadow:\n        0 20px 50px rgba(40, 18, 84, 0.09);\n}\n\n#dx-web-final-cta .dx-final-summary-head {\n    display: flex;\n    align-items: center;\n\n    gap: 13px;\n\n    padding-bottom: 19px;\n\n    border-bottom: 1px solid rgba(105, 66, 216, 0.11);\n}\n\n#dx-web-final-cta .dx-final-summary-icon {\n    width: 54px;\n    height: 54px;\n    flex: 0 0 54px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 17px;\n\n    color: #ffffff;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-cta-purple),\n            var(--dx-cta-purple-light)\n        );\n\n    box-shadow:\n        0 15px 32px rgba(105, 66, 216, 0.23);\n}\n\n#dx-web-final-cta .dx-final-summary-icon svg {\n    width: 28px;\n    height: 28px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-web-final-cta .dx-final-summary-copy {\n    min-width: 0;\n}\n\n#dx-web-final-cta .dx-final-summary-title {\n    margin: 0;\n\n    color: var(--dx-cta-dark);\n\n    font-size: 16px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-web-final-cta .dx-final-summary-subtitle {\n    margin:\n        3px\n        0\n        0;\n\n    color: var(--dx-cta-text);\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.7;\n}\n\n\/* =========================================================\n   SUMMARY LIST\n========================================================= *\/\n\n#dx-web-final-cta .dx-final-summary-list {\n    margin-top: 20px;\n\n    display: grid;\n\n    gap: 12px;\n}\n\n#dx-web-final-cta .dx-final-summary-item {\n    display: grid;\n    grid-template-columns:\n        34px\n        minmax(0, 1fr);\n\n    align-items: center;\n\n    gap: 11px;\n}\n\n#dx-web-final-cta .dx-final-summary-number {\n    width: 34px;\n    height: 34px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 10px;\n\n    color: var(--dx-cta-purple);\n\n    background: rgba(105, 66, 216, 0.09);\n\n    font-size: 14px;\n    font-weight: 900;\n}\n\n#dx-web-final-cta .dx-final-summary-item:nth-child(2)\n    .dx-final-summary-number {\n    color: #9b6c00;\n\n    background: rgba(255, 196, 65, 0.18);\n}\n\n#dx-web-final-cta .dx-final-summary-item:nth-child(3)\n    .dx-final-summary-number {\n    color: #16845a;\n\n    background: rgba(84, 214, 150, 0.15);\n}\n\n#dx-web-final-cta .dx-final-summary-item-title {\n    display: block;\n\n    color: var(--dx-cta-dark);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-web-final-cta .dx-final-summary-item-text {\n    display: block;\n\n    margin-top: 2px;\n\n    color: var(--dx-cta-muted);\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.7;\n}\n\n\/* =========================================================\n   SUMMARY FOOTER\n========================================================= *\/\n\n#dx-web-final-cta .dx-final-summary-footer {\n    margin-top: 21px;\n    padding-top: 18px;\n\n    display: flex;\n    align-items: center;\n\n    gap: 10px;\n\n    border-top: 1px solid rgba(105, 66, 216, 0.11);\n\n    color: var(--dx-cta-text);\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.7;\n}\n\n#dx-web-final-cta .dx-final-summary-status {\n    width: 8px;\n    height: 8px;\n    flex: 0 0 8px;\n\n    border-radius: 50%;\n\n    background: var(--dx-cta-green);\n\n    box-shadow:\n        0 0 0 5px rgba(84, 214, 150, 0.12);\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 900px) {\n    #dx-web-final-cta .dx-final-main {\n        padding:\n            66px\n            28px\n            72px;\n    }\n\n    #dx-web-final-cta .dx-final-panel {\n        grid-template-columns: 1fr;\n\n        min-height: 0;\n\n        padding:\n            44px\n            40px;\n\n        text-align: center;\n    }\n\n    #dx-web-final-cta .dx-final-eyebrow,\n    #dx-web-final-cta .dx-final-actions,\n    #dx-web-final-cta .dx-final-points {\n        justify-content: center;\n    }\n\n    #dx-web-final-cta .dx-final-title,\n    #dx-web-final-cta .dx-final-description {\n        margin-right: auto;\n        margin-left: auto;\n    }\n\n    #dx-web-final-cta .dx-final-summary {\n        width: min(100%, 600px);\n\n        margin: 0 auto;\n\n        text-align: left;\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 600px) {\n    #dx-web-final-cta .dx-final-main {\n        padding:\n            50px\n            16px\n            56px;\n    }\n\n    #dx-web-final-cta .dx-final-panel {\n        gap: 29px;\n\n        padding:\n            29px\n            18px;\n\n        border-radius: 21px;\n    }\n\n    #dx-web-final-cta .dx-final-eyebrow {\n        margin-bottom: 10px;\n\n        font-size: 14px;\n    }\n\n    #dx-web-final-cta .dx-final-eyebrow::before {\n        width: 27px;\n    }\n\n    #dx-web-final-cta .dx-final-title {\n        font-size: clamp(28px, 8.5vw, 37px);\n        line-height: 1.62;\n        letter-spacing: -0.2px;\n    }\n\n    #dx-web-final-cta .dx-final-description {\n        margin-top: 10px;\n\n        font-size: 14px;\n        line-height: 2;\n    }\n\n    #dx-web-final-cta .dx-final-actions {\n        margin-top: 23px;\n\n        display: grid;\n        grid-template-columns: 1fr;\n\n        gap: 9px;\n    }\n\n    #dx-web-final-cta .dx-final-button {\n        width: 100%;\n        min-width: 0;\n        min-height: 50px;\n\n        font-size: 14px;\n    }\n\n    #dx-web-final-cta .dx-final-points {\n        margin-top: 18px;\n\n        justify-content: flex-start;\n\n        gap:\n            8px\n            14px;\n    }\n\n    #dx-web-final-cta .dx-final-point {\n        font-size: 14px;\n    }\n\n    #dx-web-final-cta .dx-final-summary {\n        padding:\n            21px\n            17px;\n\n        border-radius: 18px;\n    }\n\n    #dx-web-final-cta .dx-final-summary-head {\n        padding-bottom: 15px;\n    }\n\n    #dx-web-final-cta .dx-final-summary-icon {\n        width: 47px;\n        height: 47px;\n        flex-basis: 47px;\n\n        border-radius: 14px;\n    }\n\n    #dx-web-final-cta .dx-final-summary-icon svg {\n        width: 24px;\n        height: 24px;\n    }\n\n    #dx-web-final-cta .dx-final-summary-title {\n        font-size: 14px;\n    }\n\n    #dx-web-final-cta .dx-final-summary-subtitle {\n        font-size: 14px;\n    }\n\n    #dx-web-final-cta .dx-final-summary-list {\n        margin-top: 16px;\n\n        gap: 10px;\n    }\n\n    #dx-web-final-cta .dx-final-summary-item {\n        grid-template-columns:\n            31px\n            minmax(0, 1fr);\n\n        gap: 9px;\n    }\n\n    #dx-web-final-cta .dx-final-summary-number {\n        width: 31px;\n        height: 31px;\n\n        border-radius: 9px;\n\n        font-size: 14px;\n    }\n\n    #dx-web-final-cta .dx-final-summary-item-title {\n        font-size: 14px;\n    }\n\n    #dx-web-final-cta .dx-final-summary-item-text {\n        font-size: 14px;\n    }\n\n    #dx-web-final-cta .dx-final-summary-footer {\n        margin-top: 17px;\n        padding-top: 15px;\n\n        font-size: 14px;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-web-final-cta a:focus-visible {\n    outline: 3px solid var(--dx-cta-yellow);\n    outline-offset: 4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    #dx-web-final-cta *,\n    #dx-web-final-cta *::before,\n    #dx-web-final-cta *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-web-final-cta\"\n    aria-labelledby=\"dx-web-final-cta-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n    <div\n        class=\"dx-final-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <div class=\"dx-final-main\">\n\n        <div class=\"dx-final-container\">\n\n            <div class=\"dx-final-panel\">\n\n                <div class=\"dx-final-content\">\n\n                    <span class=\"dx-final-eyebrow\">\n                        Start Your Online Store Project\n                    <\/span>\n\n                    <h2\n                        id=\"dx-web-final-cta-title\"\n                        class=\"dx-final-title\"\n                    >\n                        Ready to Turn Your Idea Into a\n                        <span>Complete Online Store?<\/span>\n                    <\/h2>\n\n                    <p class=\"dx-final-description\">\n                        Share your store idea, product type, and the\n                        functionality you need, and we\u2019ll help you define\n                        the right solution for building an organized,\n                        scalable WooCommerce store.\n                    <\/p>\n\n                    <div class=\"dx-final-actions\">\n\n                        <a\n                            href=\"https:\/\/dindex.net\/en\/contact\/\"\n                            class=\"dx-final-button dx-final-button-primary\"\n                        >\n                            <span>Get a Free Consultation<\/span>\n\n                            <svg\n                                viewBox=\"0 0 24 24\"\n                                aria-hidden=\"true\"\n                            >\n                                <path d=\"M5 12h14\"><\/path>\n                                <path d=\"m13 6 6 6-6 6\"><\/path>\n                            <\/svg>\n                        <\/a>\n\n                        <a\n                            href=\"https:\/\/dindex.net\/en\/web-projects\/\"\n                            class=\"dx-final-button dx-final-button-secondary\"\n                        >\n                            <span>View All Projects<\/span>\n\n                            <svg\n                                viewBox=\"0 0 24 24\"\n                                aria-hidden=\"true\"\n                            >\n                                <rect\n                                    x=\"3\"\n                                    y=\"4\"\n                                    width=\"18\"\n                                    height=\"16\"\n                                    rx=\"2\"\n                                ><\/rect>\n                                <path d=\"M3 9h18\"><\/path>\n                            <\/svg>\n                        <\/a>\n\n                    <\/div>\n\n                    <div\n                        class=\"dx-final-points\"\n                        aria-label=\"WooCommerce store development benefits\"\n                    >\n\n                        <span class=\"dx-final-point\">\n\n                            <span\n                                class=\"dx-final-point-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            Responsive Design Across All Devices\n\n                        <\/span>\n\n                        <span class=\"dx-final-point\">\n\n                            <span\n                                class=\"dx-final-point-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            Simple & Flexible Store Management\n\n                        <\/span>\n\n                        <span class=\"dx-final-point\">\n\n                            <span\n                                class=\"dx-final-point-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            Ability to Add New Features in the Future\n\n                        <\/span>\n\n                    <\/div>\n\n                <\/div>\n\n                <aside\n                    class=\"dx-final-summary\"\n                    aria-label=\"Steps to start your WooCommerce store project\"\n                >\n\n                    <div class=\"dx-final-summary-head\">\n\n                        <span\n                            class=\"dx-final-summary-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M3 5h2l2 11h10l2-8H7\"><\/path>\n                                <circle cx=\"9\" cy=\"20\" r=\"1\"><\/circle>\n                                <circle cx=\"17\" cy=\"20\" r=\"1\"><\/circle>\n                            <\/svg>\n                        <\/span>\n\n                        <div class=\"dx-final-summary-copy\">\n\n                            <h3 class=\"dx-final-summary-title\">\n                                Start With Simple Steps\n                            <\/h3>\n\n                            <p class=\"dx-final-summary-subtitle\">\n                                From discussing your store idea to defining the implementation plan\n                            <\/p>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <div class=\"dx-final-summary-list\">\n\n                        <div class=\"dx-final-summary-item\">\n\n                            <span class=\"dx-final-summary-number\">\n                                01\n                            <\/span>\n\n                            <span>\n\n                                <strong class=\"dx-final-summary-item-title\">\n                                    Share Your Store Details\n                                <\/strong>\n\n                                <span class=\"dx-final-summary-item-text\">\n                                    Product types, business goals, and required features.\n                                <\/span>\n\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-final-summary-item\">\n\n                            <span class=\"dx-final-summary-number\">\n                                02\n                            <\/span>\n\n                            <span>\n\n                                <strong class=\"dx-final-summary-item-title\">\n                                    We Define the Right Solution\n                                <\/strong>\n\n                                <span class=\"dx-final-summary-item-text\">\n                                    Pages, design, payments, shipping, and integrations.\n                                <\/span>\n\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-final-summary-item\">\n\n                            <span class=\"dx-final-summary-number\">\n                                03\n                            <\/span>\n\n                            <span>\n\n                                <strong class=\"dx-final-summary-item-title\">\n                                    We Start the Implementation Plan\n                                <\/strong>\n\n                                <span class=\"dx-final-summary-item-text\">\n                                    Clear stages for design, development, testing, and launch.\n                                <\/span>\n\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <div class=\"dx-final-summary-footer\">\n\n                        <span\n                            class=\"dx-final-summary-status\"\n                            aria-hidden=\"true\"\n                        ><\/span>\n\n                        <span>\n                            The initial consultation helps define your store requirements and implementation scope more accurately.\n                        <\/span>\n\n                    <\/div>\n\n                <\/aside>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxWebFinalCta() {\n        const section = document.getElementById(\n            \"dx-web-final-cta\"\n        );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized = \"true\";\n\n        const widget = section.closest(\n            \".elementor-widget-html\"\n        );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-web-final-cta-widget-fullwidth\"\n            );\n        }\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxWebFinalCta\n        );\n    } else {\n        initDxWebFinalCta();\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Professional WooCommerce Store Launch Your Online Store Faster and Smarter We turn your idea into a professional online store powered by WooCommerce and WordPress, with a responsive shopping experience, product management, payment and shipping integrations, and everything you need to start selling online. Request a Quote Explore Our Work Responsive Across All Devices Payment &#038; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-4082","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/pages\/4082","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/comments?post=4082"}],"version-history":[{"count":25,"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/pages\/4082\/revisions"}],"predecessor-version":[{"id":4125,"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/pages\/4082\/revisions\/4125"}],"wp:attachment":[{"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/media?parent=4082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}