{"id":150,"date":"2025-02-14T08:45:07","date_gmt":"2025-02-14T08:45:07","guid":{"rendered":"https:\/\/lightslategray-hummingbird-166239.hostingersite.com\/?page_id=150"},"modified":"2026-08-19T09:45:19","modified_gmt":"2026-08-19T09:45:19","slug":"services","status":"publish","type":"page","link":"https:\/\/dindex.net\/en\/services\/","title":{"rendered":"Services"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"150\" class=\"elementor elementor-150\" 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-da99e97 e-flex e-con-boxed e-con e-parent\" data-id=\"da99e97\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-09ac943 elementor-widget elementor-widget-html\" data-id=\"09ac943\" 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     SERVICES PAGE \u2014 HERO SECTION\n     Author: Mohamed El-Sehemy\n     English LTR - Elementor Compatible\n========================================================== -->\n\n<style>\n\/* =========================================================\n   ELEMENTOR FULL WIDTH\n========================================================= *\/\n\n.elementor-widget-html:has(#dx-services-page-hero),\n.elementor-widget-html:has(#dx-services-page-hero)\n    > .elementor-widget-container,\n.dx-services-page-hero-widget-fullwidth,\n.dx-services-page-hero-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-services-page-hero,\n#dx-services-page-hero *,\n#dx-services-page-hero *::before,\n#dx-services-page-hero *::after {\n    box-sizing: border-box;\n}\n\n#dx-services-page-hero {\n    --dx-services-hero-dark: #08001f;\n    --dx-services-hero-dark-light: #160638;\n    --dx-services-hero-purple: #6942d8;\n    --dx-services-hero-purple-light: #9168ef;\n    --dx-services-hero-yellow: #ffc441;\n    --dx-services-hero-white: #ffffff;\n    --dx-services-hero-text: rgba(255,255,255,.77);\n    --dx-services-hero-muted: rgba(255,255,255,.65);\n    --dx-services-hero-border: rgba(255,255,255,.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    color: var(--dx-services-hero-white);\n\n    background:\n        radial-gradient(\n            circle at 88% 20%,\n            rgba(145,104,239,.25),\n            transparent 31%\n        ),\n        radial-gradient(\n            circle at 12% 78%,\n            rgba(105,66,216,.25),\n            transparent 33%\n        ),\n        linear-gradient(\n            215deg,\n            var(--dx-services-hero-dark-light),\n            var(--dx-services-hero-dark)\n        );\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-services-page-hero a {\n    color: inherit;\n    text-decoration: none;\n}\n\n\/* =========================================================\n   BACKGROUND DECORATIONS\n========================================================= *\/\n\n#dx-services-page-hero .dx-services-hero-grid {\n    position: absolute;\n    z-index: -6;\n    inset: 0;\n\n    opacity: .11;\n\n    background-image:\n        linear-gradient(\n            rgba(255,255,255,.045) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(255,255,255,.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 18%,\n            transparent 78%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 18%,\n            transparent 78%\n        );\n\n    pointer-events: none;\n}\n\n#dx-services-page-hero .dx-services-hero-orbit {\n    position: absolute;\n    z-index: -4;\n\n    border: 1px solid rgba(255,255,255,.09);\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-services-page-hero .dx-services-hero-orbit-one {\n    top: -230px;\n    left: -180px;\n\n    width: 470px;\n    height: 470px;\n}\n\n#dx-services-page-hero .dx-services-hero-orbit-two {\n    right: -220px;\n    bottom: -270px;\n\n    width: 540px;\n    height: 540px;\n}\n\n#dx-services-page-hero .dx-services-hero-glow {\n    position: absolute;\n    z-index: -5;\n\n    border-radius: 50%;\n\n    filter: blur(90px);\n\n    pointer-events: none;\n}\n\n#dx-services-page-hero .dx-services-hero-glow-one {\n    top: 5%;\n    left: 30%;\n\n    width: 320px;\n    height: 320px;\n\n    background: rgba(105,66,216,.22);\n}\n\n#dx-services-page-hero .dx-services-hero-glow-two {\n    right: 8%;\n    bottom: -70px;\n\n    width: 370px;\n    height: 290px;\n\n    background: rgba(255,196,65,.07);\n}\n\n#dx-services-page-hero .dx-services-hero-dots {\n    position: absolute;\n    z-index: -3;\n\n    width: 125px;\n    height: 125px;\n\n    opacity: .25;\n\n    background-image:\n        radial-gradient(\n            circle,\n            var(--dx-services-hero-purple-light) 2px,\n            transparent 2.7px\n        );\n\n    background-size: 17px 17px;\n\n    pointer-events: none;\n}\n\n#dx-services-page-hero .dx-services-hero-dots-one {\n    top: 78px;\n    right: 4%;\n}\n\n#dx-services-page-hero .dx-services-hero-dots-two {\n    left: 4%;\n    bottom: 60px;\n}\n\n\/* =========================================================\n   MAIN LAYOUT\n========================================================= *\/\n\n#dx-services-page-hero .dx-services-hero-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        92px\n        clamp(22px,5vw,90px)\n        96px;\n}\n\n#dx-services-page-hero .dx-services-hero-container {\n    width: min(1450px,100%);\n    min-height: 540px;\n\n    margin: 0 auto;\n\n    display: grid;\n\n    grid-template-columns:\n        minmax(440px,.96fr)\n        minmax(500px,1.04fr);\n\n    align-items: center;\n\n    gap:\n        clamp(\n            48px,\n            6vw,\n            95px\n        );\n}\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n#dx-services-page-hero .dx-services-hero-content {\n    position: relative;\n    z-index: 5;\n\n    max-width: 720px;\n\n    justify-self: start;\n\n    text-align: left;\n}\n\n#dx-services-page-hero .dx-services-hero-eyebrow {\n    display: inline-flex;\n    align-items: center;\n\n    gap: 10px;\n\n    margin-bottom: 16px;\n\n    color: var(--dx-services-hero-yellow);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-services-page-hero .dx-services-hero-eyebrow::before {\n    content: \"\";\n\n    width: 40px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-services-hero-yellow),\n            var(--dx-services-hero-purple-light)\n        );\n}\n\n#dx-services-page-hero .dx-services-hero-title {\n    margin: 0;\n\n    color: var(--dx-services-hero-white);\n\n    font-size:\n        clamp(\n            46px,\n            5vw,\n            76px\n        );\n\n    font-weight: 900;\n    line-height: 1.12;\n    letter-spacing: -1.3px;\n\n    text-wrap: balance;\n}\n\n#dx-services-page-hero .dx-services-hero-title-highlight {\n    color: var(--dx-services-hero-yellow);\n}\n\n#dx-services-page-hero .dx-services-hero-description {\n    max-width: 690px;\n\n    margin: 21px 0 0;\n\n    color: var(--dx-services-hero-text);\n\n    font-size: 16px;\n    font-weight: 500;\n    line-height: 1.8;\n\n    text-wrap: pretty;\n}\n\n\/* =========================================================\n   SERVICE POINTS\n========================================================= *\/\n\n#dx-services-page-hero .dx-services-hero-points {\n    margin-top: 22px;\n\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    gap:\n        12px\n        22px;\n}\n\n#dx-services-page-hero .dx-services-hero-point {\n    display: inline-flex;\n    align-items: center;\n\n    gap: 8px;\n\n    color: var(--dx-services-hero-muted);\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.6;\n}\n\n#dx-services-page-hero .dx-services-hero-point::before {\n    content: \"\";\n\n    width: 7px;\n    height: 7px;\n    flex: 0 0 7px;\n\n    border-radius: 50%;\n\n    background:\n        var(--dx-services-hero-yellow);\n\n    box-shadow:\n        0 0 0 5px rgba(255,196,65,.11);\n}\n\n\/* =========================================================\n   ACTIONS\n========================================================= *\/\n\n#dx-services-page-hero .dx-services-hero-actions {\n    margin-top: 32px;\n\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    gap: 13px;\n}\n\n#dx-services-page-hero .dx-services-hero-button {\n    position: relative;\n    isolation: isolate;\n\n    min-width: 210px;\n    min-height: 56px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    padding:\n        0\n        26px;\n\n    overflow: hidden;\n\n    border:\n        1px solid transparent;\n\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 .25s ease,\n        border-color .25s ease,\n        background .25s ease,\n        box-shadow .25s ease;\n}\n\n#dx-services-page-hero .dx-services-hero-button-primary {\n    color: #160a2d;\n\n    border-color:\n        rgba(255,255,255,.25);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-services-hero-yellow),\n            #ffd66e\n        );\n\n    box-shadow:\n        0 17px 38px rgba(255,196,65,.22);\n}\n\n#dx-services-page-hero\n.dx-services-hero-button-primary::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -1;\n\n    top: -40%;\n    left: -70%;\n\n    width: 36%;\n    height: 180%;\n\n    background:\n        linear-gradient(\n            90deg,\n            transparent,\n            rgba(255,255,255,.58),\n            transparent\n        );\n\n    transform: rotate(18deg);\n\n    transition:\n        left .55s ease;\n}\n\n#dx-services-page-hero\n.dx-services-hero-button-primary:hover::before {\n    left: 135%;\n}\n\n#dx-services-page-hero .dx-services-hero-button-secondary {\n    color:\n        var(--dx-services-hero-white);\n\n    border-color:\n        rgba(255,255,255,.22);\n\n    background:\n        rgba(255,255,255,.055);\n\n    -webkit-backdrop-filter:\n        blur(10px);\n\n    backdrop-filter:\n        blur(10px);\n}\n\n#dx-services-page-hero .dx-services-hero-button:hover,\n#dx-services-page-hero .dx-services-hero-button:focus-visible {\n    transform:\n        translateY(-4px);\n}\n\n#dx-services-page-hero\n.dx-services-hero-button-primary:hover,\n#dx-services-page-hero\n.dx-services-hero-button-primary:focus-visible {\n    box-shadow:\n        0 23px 48px rgba(255,196,65,.32);\n}\n\n#dx-services-page-hero\n.dx-services-hero-button-secondary:hover,\n#dx-services-page-hero\n.dx-services-hero-button-secondary:focus-visible {\n    border-color:\n        rgba(145,104,239,.75);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-services-hero-purple),\n            var(--dx-services-hero-purple-light)\n        );\n\n    box-shadow:\n        0 19px 42px rgba(105,66,216,.32);\n}\n\n#dx-services-page-hero .dx-services-hero-button svg {\n    width: 19px;\n    height: 19px;\n    flex: 0 0 19px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.9;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   VISUAL\n========================================================= *\/\n\n#dx-services-page-hero .dx-services-hero-visual {\n    position: relative;\n\n    width: 100%;\n    min-width: 0;\n    min-height: 520px;\n\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n}\n\n#dx-services-page-hero .dx-services-system-scene {\n    position: relative;\n\n    width:\n        min(\n            100%,\n            670px\n        );\n\n    min-height: 510px;\n\n    margin-right: auto;\n}\n\n\/* =========================================================\n   CENTRAL HUB\n========================================================= *\/\n\n#dx-services-page-hero .dx-services-system-hub {\n    position: absolute;\n    z-index: 6;\n\n    top: 50%;\n    left: 50%;\n\n    width: 175px;\n    height: 175px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border:\n        1px solid rgba(255,255,255,.18);\n\n    border-radius: 50%;\n\n    color:\n        var(--dx-services-hero-white);\n\n    background:\n        radial-gradient(\n            circle at 30% 25%,\n            rgba(255,255,255,.17),\n            transparent 29%\n        ),\n        linear-gradient(\n            145deg,\n            var(--dx-services-hero-purple-light),\n            var(--dx-services-hero-purple)\n        );\n\n    box-shadow:\n        0 30px 70px rgba(36,12,92,.48),\n        inset 0 1px 0 rgba(255,255,255,.18);\n\n    transform:\n        translate(-50%,-50%);\n\n    animation:\n        dxServicesHubFloat\n        5s\n        ease-in-out\n        infinite;\n}\n\n#dx-services-page-hero .dx-services-system-hub::before,\n#dx-services-page-hero .dx-services-system-hub::after {\n    content: \"\";\n\n    position: absolute;\n\n    border:\n        1px solid rgba(145,104,239,.24);\n\n    border-radius: 50%;\n\n    animation:\n        dxServicesHubPulse\n        3.8s\n        ease-out\n        infinite;\n}\n\n#dx-services-page-hero .dx-services-system-hub::before {\n    inset: -23px;\n}\n\n#dx-services-page-hero .dx-services-system-hub::after {\n    inset: -48px;\n\n    animation-delay: -1.8s;\n}\n\n#dx-services-page-hero .dx-services-system-hub-inner {\n    display: grid;\n\n    justify-items: center;\n\n    gap: 10px;\n\n    text-align: center;\n}\n\n#dx-services-page-hero .dx-services-system-hub-icon {\n    width: 52px;\n    height: 52px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border:\n        1px solid rgba(255,255,255,.22);\n\n    border-radius: 17px;\n\n    color: #1a0c31;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-services-hero-yellow),\n            #ffd66e\n        );\n\n    box-shadow:\n        0 13px 27px rgba(255,196,65,.25);\n}\n\n#dx-services-page-hero .dx-services-system-hub-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-services-page-hero .dx-services-system-hub-label {\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.5;\n}\n\n\/* =========================================================\n   CONNECTION LINES\n========================================================= *\/\n\n#dx-services-page-hero .dx-services-system-lines {\n    position: absolute;\n    z-index: 1;\n\n    inset: 0;\n\n    pointer-events: none;\n}\n\n#dx-services-page-hero .dx-services-system-line {\n    position: absolute;\n\n    top: 50%;\n    left: 50%;\n\n    width: 190px;\n    height: 1px;\n\n    background:\n        linear-gradient(\n            90deg,\n            rgba(255,196,65,.35),\n            rgba(145,104,239,.62),\n            rgba(145,104,239,.04)\n        );\n\n    transform-origin:\n        left center;\n}\n\n#dx-services-page-hero .dx-services-system-line::after {\n    content: \"\";\n\n    position: absolute;\n\n    top: 50%;\n    right: 25%;\n\n    width: 7px;\n    height: 7px;\n\n    border-radius: 50%;\n\n    background:\n        var(--dx-services-hero-yellow);\n\n    box-shadow:\n        0 0 14px rgba(255,196,65,.55);\n\n    transform:\n        translateY(-50%);\n\n    animation:\n        dxServicesLinePoint\n        3.4s\n        linear\n        infinite;\n}\n\n#dx-services-page-hero .dx-services-system-line-one {\n    transform: rotate(15deg);\n}\n\n#dx-services-page-hero .dx-services-system-line-two {\n    transform: rotate(-54deg);\n}\n\n#dx-services-page-hero .dx-services-system-line-three {\n    transform: rotate(-128deg);\n}\n\n#dx-services-page-hero .dx-services-system-line-four {\n    transform: rotate(-198deg);\n}\n\n#dx-services-page-hero .dx-services-system-line-five {\n    transform: rotate(-267deg);\n}\n\n\/* =========================================================\n   SERVICE NODES\n========================================================= *\/\n\n#dx-services-page-hero .dx-services-node {\n    position: absolute;\n    z-index: 4;\n\n    width: 155px;\n    min-height: 124px;\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    padding:\n        18px\n        15px;\n\n    border:\n        1px solid rgba(255,255,255,.15);\n\n    border-radius: 19px;\n\n    color:\n        var(--dx-services-hero-white);\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255,255,255,.10),\n            rgba(255,255,255,.035)\n        );\n\n    box-shadow:\n        0 22px 50px rgba(3,0,20,.30),\n        inset 0 1px 0 rgba(255,255,255,.08);\n\n    -webkit-backdrop-filter:\n        blur(12px);\n\n    backdrop-filter:\n        blur(12px);\n\n    text-align: center;\n\n    transition:\n        transform .35s ease,\n        border-color .35s ease,\n        background .35s ease,\n        box-shadow .35s ease;\n\n    animation:\n        dxServicesNodeFloat\n        5.8s\n        ease-in-out\n        infinite;\n}\n\n#dx-services-page-hero .dx-services-node:hover {\n    border-color:\n        rgba(145,104,239,.70);\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(105,66,216,.36),\n            rgba(105,66,216,.14)\n        );\n\n    box-shadow:\n        0 28px 62px rgba(31,10,78,.40),\n        inset 0 1px 0 rgba(255,255,255,.12);\n}\n\n#dx-services-page-hero .dx-services-node-icon {\n    width: 48px;\n    height: 48px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border:\n        1px solid rgba(145,104,239,.42);\n\n    border-radius: 15px;\n\n    color:\n        var(--dx-services-hero-purple-light);\n\n    background:\n        rgba(105,66,216,.13);\n}\n\n#dx-services-page-hero .dx-services-node-icon svg {\n    width: 25px;\n    height: 25px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-services-page-hero .dx-services-node-label {\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.55;\n}\n\n#dx-services-page-hero .dx-services-node-one {\n    top: 15px;\n    left: 45px;\n\n    animation-delay: -.5s;\n}\n\n#dx-services-page-hero .dx-services-node-two {\n    top: 55px;\n    right: 12px;\n\n    animation-delay: -1.7s;\n}\n\n#dx-services-page-hero .dx-services-node-three {\n    top: 50%;\n    right: -8px;\n\n    transform:\n        translateY(-50%);\n\n    animation-delay: -2.8s;\n}\n\n#dx-services-page-hero .dx-services-node-four {\n    left: 15px;\n    bottom: 35px;\n\n    animation-delay: -3.8s;\n}\n\n#dx-services-page-hero .dx-services-node-five {\n    right: 60px;\n    bottom: 5px;\n\n    animation-delay: -4.6s;\n}\n\n\/* =========================================================\n   FLOATING BADGES\n========================================================= *\/\n\n#dx-services-page-hero .dx-services-floating-badge {\n    position: absolute;\n    z-index: 8;\n\n    display: inline-flex;\n    align-items: center;\n\n    gap: 8px;\n\n    padding:\n        11px\n        15px;\n\n    border:\n        1px solid rgba(255,255,255,.16);\n\n    border-radius: 13px;\n\n    color:\n        var(--dx-services-hero-white);\n\n    background:\n        linear-gradient(\n            135deg,\n            rgba(105,66,216,.96),\n            rgba(145,104,239,.96)\n        );\n\n    box-shadow:\n        0 18px 38px rgba(42,15,105,.35);\n\n    font-size: 14px;\n    font-weight: 900;\n\n    animation:\n        dxServicesBadgeFloat\n        4.8s\n        ease-in-out\n        infinite;\n}\n\n#dx-services-page-hero .dx-services-floating-badge-one {\n    top: 5%;\n    right: 30%;\n}\n\n#dx-services-page-hero .dx-services-floating-badge-two {\n    left: 34%;\n    bottom: -2%;\n\n    color: #1a0d31;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-services-hero-yellow),\n            #ffd66e\n        );\n\n    animation-delay:\n        -2.1s;\n}\n\n#dx-services-page-hero .dx-services-floating-badge svg {\n    width: 17px;\n    height: 17px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.9;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   ANIMATIONS\n========================================================= *\/\n\n@keyframes dxServicesHubFloat {\n\n    0%,\n    100% {\n        transform:\n            translate(-50%,-50%)\n            translateY(0);\n    }\n\n    50% {\n        transform:\n            translate(-50%,-50%)\n            translateY(-10px);\n    }\n}\n\n@keyframes dxServicesHubPulse {\n\n    0% {\n        opacity: .65;\n\n        transform:\n            scale(.85);\n    }\n\n    100% {\n        opacity: 0;\n\n        transform:\n            scale(1.15);\n    }\n}\n\n@keyframes dxServicesLinePoint {\n\n    0% {\n        right: 12%;\n\n        opacity: 0;\n    }\n\n    20% {\n        opacity: 1;\n    }\n\n    80% {\n        opacity: 1;\n    }\n\n    100% {\n        right: 88%;\n\n        opacity: 0;\n    }\n}\n\n@keyframes dxServicesNodeFloat {\n\n    0%,\n    100% {\n        margin-top: 0;\n    }\n\n    50% {\n        margin-top: -10px;\n    }\n}\n\n@keyframes dxServicesBadgeFloat {\n\n    0%,\n    100% {\n        transform:\n            translateY(0);\n    }\n\n    50% {\n        transform:\n            translateY(-10px);\n    }\n}\n\n\/* =========================================================\n   LARGE TABLET\n========================================================= *\/\n\n@media (max-width:1100px) {\n\n    #dx-services-page-hero .dx-services-hero-container {\n        grid-template-columns:\n            minmax(380px,.95fr)\n            minmax(420px,1.05fr);\n\n        gap: 38px;\n    }\n\n    #dx-services-page-hero .dx-services-hero-title {\n        font-size:\n            clamp(\n                43px,\n                5.6vw,\n                64px\n            );\n    }\n\n    #dx-services-page-hero .dx-services-system-scene {\n        transform:\n            scale(.92);\n\n        transform-origin:\n            center;\n    }\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width:850px) {\n\n    #dx-services-page-hero .dx-services-hero-main {\n        padding:\n            74px\n            28px\n            80px;\n    }\n\n    #dx-services-page-hero .dx-services-hero-container {\n        min-height: 0;\n\n        grid-template-columns:\n            1fr;\n\n        gap: 48px;\n    }\n\n    #dx-services-page-hero .dx-services-hero-content {\n        max-width: 740px;\n\n        margin: 0 auto;\n\n        justify-self: center;\n\n        text-align: center;\n    }\n\n    #dx-services-page-hero .dx-services-hero-eyebrow,\n    #dx-services-page-hero .dx-services-hero-points,\n    #dx-services-page-hero .dx-services-hero-actions {\n        justify-content: center;\n    }\n\n    #dx-services-page-hero .dx-services-hero-description {\n        margin-right: auto;\n        margin-left: auto;\n    }\n\n    #dx-services-page-hero .dx-services-hero-visual {\n        min-height: 500px;\n\n        justify-content: center;\n    }\n\n    #dx-services-page-hero .dx-services-system-scene {\n        width:\n            min(\n                100%,\n                650px\n            );\n\n        margin: 0 auto;\n\n        transform: none;\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width:600px) {\n\n    #dx-services-page-hero .dx-services-hero-main {\n        padding:\n            58px\n            18px\n            62px;\n    }\n\n    #dx-services-page-hero .dx-services-hero-container {\n        gap: 35px;\n    }\n\n    #dx-services-page-hero .dx-services-hero-eyebrow {\n        margin-bottom: 12px;\n\n        font-size: 14px;\n    }\n\n    #dx-services-page-hero .dx-services-hero-eyebrow::before {\n        width: 28px;\n    }\n\n    #dx-services-page-hero .dx-services-hero-title {\n        font-size:\n            clamp(\n                34px,\n                10vw,\n                47px\n            );\n\n        line-height: 1.15;\n        letter-spacing: -.5px;\n    }\n\n    #dx-services-page-hero .dx-services-hero-description {\n        margin-top: 15px;\n\n        font-size: 15px;\n        line-height: 1.75;\n    }\n\n    #dx-services-page-hero .dx-services-hero-points {\n        width: 100%;\n\n        margin-top: 18px;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        flex-wrap: wrap;\n\n        gap:\n            10px\n            15px;\n    }\n\n    #dx-services-page-hero .dx-services-hero-point {\n        font-size: 14px;\n\n        white-space: nowrap;\n    }\n\n    #dx-services-page-hero .dx-services-hero-actions {\n        margin-top: 25px;\n\n        display: grid;\n\n        grid-template-columns:\n            1fr;\n\n        gap: 10px;\n    }\n\n    #dx-services-page-hero .dx-services-hero-button {\n        width: 100%;\n        min-width: 0;\n        min-height: 54px;\n\n        font-size: 14px;\n    }\n\n    #dx-services-page-hero .dx-services-hero-visual {\n        min-height: 390px;\n    }\n\n    #dx-services-page-hero .dx-services-system-scene {\n        min-height: 390px;\n    }\n\n    #dx-services-page-hero .dx-services-system-hub {\n        width: 125px;\n        height: 125px;\n    }\n\n    #dx-services-page-hero .dx-services-system-hub::before {\n        inset: -17px;\n    }\n\n    #dx-services-page-hero .dx-services-system-hub::after {\n        inset: -33px;\n    }\n\n    #dx-services-page-hero .dx-services-system-hub-icon {\n        width: 42px;\n        height: 42px;\n\n        border-radius: 13px;\n    }\n\n    #dx-services-page-hero .dx-services-system-hub-icon svg {\n        width: 23px;\n        height: 23px;\n    }\n\n    #dx-services-page-hero .dx-services-system-hub-label {\n        font-size: 14px;\n    }\n\n    #dx-services-page-hero .dx-services-system-line {\n        width: 125px;\n    }\n\n    #dx-services-page-hero .dx-services-node {\n        width: 112px;\n        min-height: 98px;\n\n        gap: 7px;\n\n        padding:\n            11px\n            8px;\n\n        border-radius: 14px;\n    }\n\n    #dx-services-page-hero .dx-services-node-icon {\n        width: 36px;\n        height: 36px;\n\n        border-radius: 11px;\n    }\n\n    #dx-services-page-hero .dx-services-node-icon svg {\n        width: 20px;\n        height: 20px;\n    }\n\n    #dx-services-page-hero .dx-services-node-label {\n        font-size: 14px;\n        line-height: 1.3;\n    }\n\n    #dx-services-page-hero .dx-services-node-one {\n        top: 4px;\n        left: 0;\n    }\n\n    #dx-services-page-hero .dx-services-node-two {\n        top: 28px;\n        right: 0;\n    }\n\n    #dx-services-page-hero .dx-services-node-three {\n        right: -2px;\n    }\n\n    #dx-services-page-hero .dx-services-node-four {\n        left: 0;\n        bottom: 18px;\n    }\n\n    #dx-services-page-hero .dx-services-node-five {\n        right: 12px;\n        bottom: 0;\n    }\n\n    #dx-services-page-hero .dx-services-floating-badge,\n    #dx-services-page-hero .dx-services-hero-dots {\n        display: none;\n    }\n}\n\n\/* =========================================================\n   VERY SMALL MOBILE\n========================================================= *\/\n\n@media (max-width:380px) {\n\n    #dx-services-page-hero .dx-services-hero-main {\n        padding-right: 14px;\n        padding-left: 14px;\n    }\n\n    #dx-services-page-hero .dx-services-hero-points {\n        gap:\n            8px\n            11px;\n    }\n\n    #dx-services-page-hero .dx-services-hero-point {\n        font-size: 14px;\n    }\n\n    #dx-services-page-hero .dx-services-node {\n        width: 106px;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-services-page-hero a:focus-visible {\n    outline:\n        3px solid var(--dx-services-hero-yellow);\n\n    outline-offset: 4px;\n}\n\n@media (prefers-reduced-motion:reduce) {\n\n    #dx-services-page-hero *,\n    #dx-services-page-hero *::before,\n    #dx-services-page-hero *::after {\n        animation-duration:\n            .01ms !important;\n\n        animation-iteration-count:\n            1 !important;\n\n        transition-duration:\n            .01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-services-page-hero\"\n    aria-labelledby=\"dx-services-page-hero-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n\n    <div\n        class=\"dx-services-hero-grid\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <span\n        class=\"dx-services-hero-orbit dx-services-hero-orbit-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-services-hero-orbit dx-services-hero-orbit-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-services-hero-glow dx-services-hero-glow-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-services-hero-glow dx-services-hero-glow-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-services-hero-dots dx-services-hero-dots-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-services-hero-dots dx-services-hero-dots-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-services-hero-main\">\n\n        <div class=\"dx-services-hero-container\">\n\n            <!-- =================================================\n                 CONTENT\n            ================================================== -->\n\n            <div class=\"dx-services-hero-content\">\n\n                <span class=\"dx-services-hero-eyebrow\">\n                    Integrated Digital Services\n                <\/span>\n\n                <h1\n                    id=\"dx-services-page-hero-title\"\n                    class=\"dx-services-hero-title\"\n                >\n                    Digital Solutions That Move Your Business\n                    <span class=\"dx-services-hero-title-highlight\">\n                        Forward\n                    <\/span>\n                <\/h1>\n\n                <p class=\"dx-services-hero-description\">\n                    From website and mobile app development to e-commerce,\n                    learning platforms, and smart digital transformation,\n                    we deliver tailored digital solutions designed around\n                    your business needs and built to support long-term growth.\n                <\/p>\n\n                <div\n                    class=\"dx-services-hero-points\"\n                    aria-label=\"Key benefits of our services\"\n                >\n\n                    <span class=\"dx-services-hero-point\">\n                        Tailored Solutions\n                    <\/span>\n\n                    <span class=\"dx-services-hero-point\">\n                        Professional Design\n                    <\/span>\n\n                    <span class=\"dx-services-hero-point\">\n                        Scalable Technology\n                    <\/span>\n\n                <\/div>\n\n                <div class=\"dx-services-hero-actions\">\n\n                    <a\n                        href=\"#dx-services-navigation\"\n                        class=\"dx-services-hero-button dx-services-hero-button-primary\"\n                    >\n                        <span>\n                            Explore Our Services\n                        <\/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                    <a\n                        href=\"https:\/\/dindex.net\/en\/contact\/\"\n                        class=\"dx-services-hero-button dx-services-hero-button-secondary\"\n                    >\n                        <span>\n                            Get a Free Consultation\n                        <\/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            <!-- =================================================\n                 VISUAL\n            ================================================== -->\n\n            <div class=\"dx-services-hero-visual\">\n\n                <div class=\"dx-services-system-scene\">\n\n                    <div\n                        class=\"dx-services-system-lines\"\n                        aria-hidden=\"true\"\n                    >\n                        <span class=\"dx-services-system-line dx-services-system-line-one\"><\/span>\n                        <span class=\"dx-services-system-line dx-services-system-line-two\"><\/span>\n                        <span class=\"dx-services-system-line dx-services-system-line-three\"><\/span>\n                        <span class=\"dx-services-system-line dx-services-system-line-four\"><\/span>\n                        <span class=\"dx-services-system-line dx-services-system-line-five\"><\/span>\n                    <\/div>\n\n                    <!-- HUB -->\n\n                    <div class=\"dx-services-system-hub\">\n\n                        <div class=\"dx-services-system-hub-inner\">\n\n                            <span\n                                class=\"dx-services-system-hub-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <circle\n                                        cx=\"12\"\n                                        cy=\"12\"\n                                        r=\"3\"\n                                    ><\/circle>\n\n                                    <path d=\"M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1a1.7 1.7 0 0 0 1.9.3A1.7 1.7 0 0 0 10 3V2.8h4V3a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1z\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span class=\"dx-services-system-hub-label\">\n                                Integrated<br>\n                                Digital Solutions\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <!-- WEBSITE -->\n\n                    <div class=\"dx-services-node dx-services-node-one\">\n\n                        <span\n                            class=\"dx-services-node-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n\n                                <rect\n                                    x=\"3\"\n                                    y=\"4\"\n                                    width=\"18\"\n                                    height=\"16\"\n                                    rx=\"2\"\n                                ><\/rect>\n\n                                <path d=\"M3 8h18\"><\/path>\n                                <path d=\"m10 12-2 2 2 2\"><\/path>\n                                <path d=\"m14 12 2 2-2 2\"><\/path>\n\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"dx-services-node-label\">\n                            Website Development\n                        <\/span>\n\n                    <\/div>\n\n                    <!-- MOBILE -->\n\n                    <div class=\"dx-services-node dx-services-node-two\">\n\n                        <span\n                            class=\"dx-services-node-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n\n                                <rect\n                                    x=\"7\"\n                                    y=\"2\"\n                                    width=\"10\"\n                                    height=\"20\"\n                                    rx=\"2\"\n                                ><\/rect>\n\n                                <path d=\"M10 5h4\"><\/path>\n                                <path d=\"M11 18h2\"><\/path>\n\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"dx-services-node-label\">\n                            Mobile Apps\n                        <\/span>\n\n                    <\/div>\n\n                    <!-- ECOMMERCE -->\n\n                    <div class=\"dx-services-node dx-services-node-three\">\n\n                        <span\n                            class=\"dx-services-node-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n\n                                <path d=\"M4 9h16l-1-5H5L4 9z\"><\/path>\n                                <path d=\"M5 9v11h14V9\"><\/path>\n                                <path d=\"M9 20v-6h6v6\"><\/path>\n                                <path d=\"M4 9c0 2 3 2 4 0 1 2 3 2 4 0 1 2 3 2 4 0 1 2 4 2 4 0\"><\/path>\n\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"dx-services-node-label\">\n                            E-Commerce\n                        <\/span>\n\n                    <\/div>\n\n                    <!-- LMS -->\n\n                    <div class=\"dx-services-node dx-services-node-four\">\n\n                        <span\n                            class=\"dx-services-node-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n\n                                <path d=\"m3 9 9-5 9 5-9 5-9-5z\"><\/path>\n                                <path d=\"M7 12v5c3 2 7 2 10 0v-5\"><\/path>\n                                <path d=\"M21 9v6\"><\/path>\n\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"dx-services-node-label\">\n                            Learning Platforms\n                        <\/span>\n\n                    <\/div>\n\n                    <!-- DIGITAL TRANSFORMATION -->\n\n                    <div class=\"dx-services-node dx-services-node-five\">\n\n                        <span\n                            class=\"dx-services-node-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n\n                                <path d=\"M7 18a4 4 0 0 1 .5-8A6 6 0 0 1 19 12a3 3 0 0 1-1 6H7z\"><\/path>\n                                <path d=\"m9 15 3-3 3 3\"><\/path>\n                                <path d=\"M12 12v8\"><\/path>\n\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"dx-services-node-label\">\n                            Digital Transformation\n                        <\/span>\n\n                    <\/div>\n\n                    <!-- BADGES -->\n\n                    <span\n                        class=\"dx-services-floating-badge dx-services-floating-badge-one\"\n                    >\n\n                        <svg\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <path d=\"M4 12l5 5L20 6\"><\/path>\n                        <\/svg>\n\n                        <span>\n                            Tailored Solutions\n                        <\/span>\n\n                    <\/span>\n\n                    <span\n                        class=\"dx-services-floating-badge dx-services-floating-badge-two\"\n                    >\n\n                        <svg\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <path d=\"M12 3v18\"><\/path>\n                            <path d=\"M3 12h18\"><\/path>\n                            <circle\n                                cx=\"12\"\n                                cy=\"12\"\n                                r=\"9\"\n                            ><\/circle>\n                        <\/svg>\n\n                        <span>\n                            Built to Scale\n                        <\/span>\n\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 initDxServicesPageHero() {\n\n        const hero =\n            document.getElementById(\n                \"dx-services-page-hero\"\n            );\n\n        if (\n            !hero ||\n            hero.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        hero.dataset.dxInitialized =\n            \"true\";\n\n        const widget =\n            hero.closest(\n                \".elementor-widget-html\"\n            );\n\n        if (widget) {\n\n            widget.classList.add(\n                \"dx-services-page-hero-widget-fullwidth\"\n            );\n        }\n\n        const servicesButton =\n            hero.querySelector(\n                'a[href=\"#dx-services-navigation\"]'\n            );\n\n        if (servicesButton) {\n\n            servicesButton.addEventListener(\n                \"click\",\n                function (event) {\n\n                    const target =\n                        document.getElementById(\n                            \"dx-services-navigation\"\n                        );\n\n                    if (!target) {\n                        return;\n                    }\n\n                    event.preventDefault();\n\n                    target.scrollIntoView({\n                        behavior: \"smooth\",\n                        block: \"start\"\n                    });\n                }\n            );\n        }\n    }\n\n    if (\n        document.readyState === \"loading\"\n    ) {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxServicesPageHero\n        );\n\n    } else {\n\n        initDxServicesPageHero();\n\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-46133cb e-flex e-con-boxed e-con e-parent\" data-id=\"46133cb\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dd5e615 elementor-widget elementor-widget-html\" data-id=\"dd5e615\" 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     SERVICES PAGE \u2014 QUICK SERVICES NAVIGATION\n     Author: Mohamed El-Sehemy\n     English LTR - Elementor Compatible\n     7 Services + Centered Second Row\n========================================================== -->\n\n<style>\n\/* =========================================================\n   ELEMENTOR FULL WIDTH\n========================================================= *\/\n\n.elementor-widget-html:has(#dx-services-navigation),\n.elementor-widget-html:has(#dx-services-navigation)\n    > .elementor-widget-container,\n.dx-services-navigation-widget-fullwidth,\n.dx-services-navigation-widget-fullwidth\n    > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n\n    margin: 0 !important;\n    padding: 0 !important;\n\n    overflow: visible !important;\n}\n\n\/* =========================================================\n   RESET & VARIABLES\n========================================================= *\/\n\n#dx-services-navigation,\n#dx-services-navigation *,\n#dx-services-navigation *::before,\n#dx-services-navigation *::after {\n    box-sizing: border-box;\n}\n\n#dx-services-navigation {\n    --dx-services-nav-bg: #f8f7fc;\n    --dx-services-nav-white: #ffffff;\n    --dx-services-nav-dark: #160a31;\n    --dx-services-nav-text: #665f72;\n    --dx-services-nav-muted: #8c8597;\n    --dx-services-nav-purple: #6942d8;\n    --dx-services-nav-purple-light: #9168ef;\n    --dx-services-nav-yellow: #ffc441;\n    --dx-services-nav-border: rgba(105,66,216,.15);\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    scroll-margin-top: 85px;\n\n    direction: ltr;\n\n    color: var(--dx-services-nav-dark);\n\n    background:\n        radial-gradient(\n            circle at 95% 20%,\n            rgba(105,66,216,.07),\n            transparent 24%\n        ),\n        radial-gradient(\n            circle at 5% 82%,\n            rgba(145,104,239,.07),\n            transparent 26%\n        ),\n        var(--dx-services-nav-bg);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-services-navigation a {\n    color: inherit;\n    text-decoration: none;\n}\n\n\/* =========================================================\n   OUTER DECORATIONS\n========================================================= *\/\n\n#dx-services-navigation .dx-services-nav-orbit {\n    position: absolute;\n    z-index: -3;\n\n    border:\n        1px solid rgba(105,66,216,.10);\n\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-services-navigation .dx-services-nav-orbit-one {\n    top: -240px;\n    left: -210px;\n\n    width: 470px;\n    height: 470px;\n}\n\n#dx-services-navigation .dx-services-nav-orbit-two {\n    right: -220px;\n    bottom: -250px;\n\n    width: 500px;\n    height: 500px;\n}\n\n#dx-services-navigation .dx-services-nav-dots {\n    position: absolute;\n    z-index: -2;\n\n    width: 115px;\n    height: 115px;\n\n    opacity: .22;\n\n    background-image:\n        radial-gradient(\n            circle,\n            var(--dx-services-nav-purple-light) 2px,\n            transparent 2.7px\n        );\n\n    background-size: 17px 17px;\n\n    pointer-events: none;\n}\n\n#dx-services-navigation .dx-services-nav-dots-one {\n    top: 55px;\n    right: 3%;\n}\n\n#dx-services-navigation .dx-services-nav-dots-two {\n    left: 3%;\n    bottom: 45px;\n}\n\n\/* =========================================================\n   LAYOUT\n========================================================= *\/\n\n#dx-services-navigation .dx-services-nav-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-services-navigation .dx-services-nav-container {\n    width: min(1450px,100%);\n\n    margin: 0 auto;\n}\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n#dx-services-navigation .dx-services-nav-header {\n    max-width: 760px;\n\n    margin:\n        0\n        auto\n        36px;\n\n    text-align: center;\n}\n\n#dx-services-navigation .dx-services-nav-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-services-nav-purple);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-services-navigation .dx-services-nav-eyebrow::before,\n#dx-services-navigation .dx-services-nav-eyebrow::after {\n    content: \"\";\n\n    width: 30px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-services-nav-yellow),\n            var(--dx-services-nav-purple-light)\n        );\n}\n\n#dx-services-navigation .dx-services-nav-title {\n    margin: 0;\n\n    color: var(--dx-services-nav-dark);\n\n    font-size:\n        clamp(\n            31px,\n            3.5vw,\n            49px\n        );\n\n    font-weight: 900;\n    line-height: 1.3;\n    letter-spacing: -.5px;\n\n    text-wrap: balance;\n}\n\n#dx-services-navigation .dx-services-nav-title span {\n    color: var(--dx-services-nav-purple);\n}\n\n#dx-services-navigation .dx-services-nav-description {\n    max-width: 650px;\n\n    margin:\n        12px\n        auto\n        0;\n\n    color: var(--dx-services-nav-text);\n\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 1.8;\n}\n\n\/* =========================================================\n   SERVICES NAV GRID\n========================================================= *\/\n\n\/*\n   Desktop:\n   8 virtual columns.\n   First row: 4 cards \u00d7 2 columns.\n   Second row: 3 cards \u00d7 2 columns, centered.\n*\/\n\n#dx-services-navigation .dx-services-nav-list {\n    display: grid;\n\n    grid-template-columns:\n        repeat(8,minmax(0,1fr));\n\n    gap: 14px;\n}\n\n\/* First Row *\/\n\n#dx-services-navigation .dx-services-nav-item:nth-child(1) {\n    grid-column: 1 \/ span 2;\n}\n\n#dx-services-navigation .dx-services-nav-item:nth-child(2) {\n    grid-column: 3 \/ span 2;\n}\n\n#dx-services-navigation .dx-services-nav-item:nth-child(3) {\n    grid-column: 5 \/ span 2;\n}\n\n#dx-services-navigation .dx-services-nav-item:nth-child(4) {\n    grid-column: 7 \/ span 2;\n}\n\n\/* Second Row \u2014 Centered *\/\n\n#dx-services-navigation .dx-services-nav-item:nth-child(5) {\n    grid-column: 2 \/ span 2;\n}\n\n#dx-services-navigation .dx-services-nav-item:nth-child(6) {\n    grid-column: 4 \/ span 2;\n}\n\n#dx-services-navigation .dx-services-nav-item:nth-child(7) {\n    grid-column: 6 \/ span 2;\n}\n\n\/* =========================================================\n   NAV ITEM\n========================================================= *\/\n\n#dx-services-navigation .dx-services-nav-item {\n    position: relative;\n    isolation: isolate;\n\n    min-width: 0;\n    min-height: 154px;\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n\n    gap: 14px;\n\n    padding:\n        21px\n        14px;\n\n    overflow: hidden;\n\n    border:\n        1px solid var(--dx-services-nav-border);\n\n    border-radius: 19px;\n\n    color: var(--dx-services-nav-dark);\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255,255,255,.99),\n            rgba(250,248,255,.97)\n        );\n\n    box-shadow:\n        0 17px 38px rgba(40,18,84,.07),\n        inset 0 1px 0 rgba(255,255,255,.90);\n\n    text-align: center;\n\n    transition:\n        color .3s ease,\n        transform .3s ease,\n        border-color .3s ease,\n        background .3s ease,\n        box-shadow .3s ease;\n}\n\n#dx-services-navigation .dx-services-nav-item::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    top: -90px;\n    left: 50%;\n\n    width: 180px;\n    height: 180px;\n\n    border-radius: 50%;\n\n    background:\n        rgba(255,255,255,.16);\n\n    filter: blur(40px);\n\n    transform:\n        translateX(-50%);\n\n    opacity: 0;\n\n    transition:\n        opacity .3s ease;\n}\n\n#dx-services-navigation .dx-services-nav-item::after {\n    content: \"\";\n\n    position: absolute;\n\n    left: 18px;\n    bottom: 0;\n\n    width: calc(100% - 36px);\n    height: 3px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            transparent,\n            var(--dx-services-nav-yellow),\n            transparent\n        );\n\n    opacity: 0;\n\n    transition:\n        opacity .3s ease;\n}\n\n#dx-services-navigation .dx-services-nav-item:hover,\n#dx-services-navigation .dx-services-nav-item:focus-visible {\n    color:\n        var(--dx-services-nav-white);\n\n    border-color:\n        rgba(145,104,239,.72);\n\n    background:\n        radial-gradient(\n            circle at 50% 0%,\n            rgba(255,255,255,.14),\n            transparent 35%\n        ),\n        linear-gradient(\n            145deg,\n            var(--dx-services-nav-purple-light),\n            var(--dx-services-nav-purple)\n        );\n\n    box-shadow:\n        0 24px 52px rgba(105,66,216,.28),\n        inset 0 1px 0 rgba(255,255,255,.15);\n\n    transform:\n        translateY(-7px);\n}\n\n#dx-services-navigation .dx-services-nav-item:hover::before,\n#dx-services-navigation .dx-services-nav-item:hover::after,\n#dx-services-navigation .dx-services-nav-item:focus-visible::before,\n#dx-services-navigation .dx-services-nav-item:focus-visible::after {\n    opacity: 1;\n}\n\n\/* =========================================================\n   ICON\n========================================================= *\/\n\n#dx-services-navigation .dx-services-nav-icon {\n    width: 56px;\n    height: 56px;\n    flex: 0 0 56px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border:\n        1px solid rgba(105,66,216,.20);\n\n    border-radius: 17px;\n\n    color:\n        var(--dx-services-nav-purple);\n\n    background:\n        rgba(105,66,216,.08);\n\n    box-shadow:\n        0 11px 24px rgba(105,66,216,.10);\n\n    transition:\n        color .3s ease,\n        transform .3s ease,\n        border-color .3s ease,\n        background .3s ease,\n        box-shadow .3s ease;\n}\n\n#dx-services-navigation .dx-services-nav-item:hover\n.dx-services-nav-icon,\n#dx-services-navigation .dx-services-nav-item:focus-visible\n.dx-services-nav-icon {\n    color: #1b0d32;\n\n    border-color:\n        rgba(255,255,255,.30);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-services-nav-yellow),\n            #ffd66e\n        );\n\n    box-shadow:\n        0 14px 29px rgba(39,15,91,.26);\n\n    transform:\n        translateY(-3px)\n        rotate(4deg);\n}\n\n#dx-services-navigation .dx-services-nav-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\/* =========================================================\n   TEXT\n========================================================= *\/\n\n#dx-services-navigation .dx-services-nav-label {\n    min-height: 45px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    color: inherit;\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.55;\n\n    text-wrap: balance;\n}\n\n#dx-services-navigation .dx-services-nav-arrow {\n    width: 26px;\n    height: 26px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    color:\n        var(--dx-services-nav-purple);\n\n    opacity: .64;\n\n    transition:\n        color .3s ease,\n        opacity .3s ease,\n        transform .3s ease;\n}\n\n#dx-services-navigation .dx-services-nav-item:hover\n.dx-services-nav-arrow,\n#dx-services-navigation .dx-services-nav-item:focus-visible\n.dx-services-nav-arrow {\n    color:\n        var(--dx-services-nav-white);\n\n    opacity: 1;\n\n    transform:\n        translateY(4px);\n}\n\n#dx-services-navigation .dx-services-nav-arrow 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   NOTE\n========================================================= *\/\n\n#dx-services-navigation .dx-services-nav-note {\n    margin-top: 25px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 9px;\n\n    color:\n        var(--dx-services-nav-muted);\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.7;\n\n    text-align: center;\n}\n\n#dx-services-navigation .dx-services-nav-note-icon {\n    width: 28px;\n    height: 28px;\n    flex: 0 0 28px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 50%;\n\n    color:\n        var(--dx-services-nav-purple);\n\n    background:\n        rgba(105,66,216,.09);\n}\n\n#dx-services-navigation .dx-services-nav-note-icon svg {\n    width: 15px;\n    height: 15px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   LARGE TABLET\n========================================================= *\/\n\n@media (max-width:1200px) {\n\n    #dx-services-navigation .dx-services-nav-list {\n        grid-template-columns:\n            repeat(6,minmax(0,1fr));\n    }\n\n    #dx-services-navigation .dx-services-nav-item:nth-child(1),\n    #dx-services-navigation .dx-services-nav-item:nth-child(2),\n    #dx-services-navigation .dx-services-nav-item:nth-child(3),\n    #dx-services-navigation .dx-services-nav-item:nth-child(4),\n    #dx-services-navigation .dx-services-nav-item:nth-child(5),\n    #dx-services-navigation .dx-services-nav-item:nth-child(6) {\n        grid-column:\n            span 2;\n    }\n\n    #dx-services-navigation .dx-services-nav-item:nth-child(7) {\n        grid-column:\n            3 \/ span 2;\n    }\n\n    #dx-services-navigation .dx-services-nav-item {\n        min-height:\n            145px;\n    }\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width:760px) {\n\n    #dx-services-navigation .dx-services-nav-main {\n        padding:\n            65px\n            24px\n            70px;\n    }\n\n    #dx-services-navigation .dx-services-nav-list {\n        grid-template-columns:\n            repeat(2,minmax(0,1fr));\n\n        gap: 12px;\n    }\n\n    #dx-services-navigation .dx-services-nav-item:nth-child(1),\n    #dx-services-navigation .dx-services-nav-item:nth-child(2),\n    #dx-services-navigation .dx-services-nav-item:nth-child(3),\n    #dx-services-navigation .dx-services-nav-item:nth-child(4),\n    #dx-services-navigation .dx-services-nav-item:nth-child(5),\n    #dx-services-navigation .dx-services-nav-item:nth-child(6) {\n        grid-column:\n            auto;\n    }\n\n    #dx-services-navigation .dx-services-nav-item:nth-child(7) {\n        grid-column:\n            1 \/ -1;\n\n        width:\n            calc(50% - 6px);\n\n        justify-self:\n            center;\n    }\n\n    #dx-services-navigation .dx-services-nav-item {\n        min-height: 140px;\n\n        padding:\n            19px\n            12px;\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width:600px) {\n\n    #dx-services-navigation {\n        scroll-margin-top:\n            72px;\n    }\n\n    #dx-services-navigation .dx-services-nav-main {\n        padding:\n            58px\n            16px\n            62px;\n    }\n\n    #dx-services-navigation .dx-services-nav-header {\n        margin-bottom:\n            28px;\n    }\n\n    #dx-services-navigation .dx-services-nav-eyebrow {\n        font-size: 14px;\n    }\n\n    #dx-services-navigation .dx-services-nav-eyebrow::before,\n    #dx-services-navigation .dx-services-nav-eyebrow::after {\n        width: 22px;\n    }\n\n    #dx-services-navigation .dx-services-nav-title {\n        font-size:\n            clamp(\n                28px,\n                8.8vw,\n                39px\n            );\n\n        line-height: 1.28;\n    }\n\n    #dx-services-navigation .dx-services-nav-description {\n        margin-top:\n            10px;\n\n        font-size: 14px;\n        line-height: 1.75;\n    }\n\n    #dx-services-navigation .dx-services-nav-list {\n        grid-template-columns:\n            repeat(2,minmax(0,1fr));\n\n        gap: 10px;\n    }\n\n    #dx-services-navigation .dx-services-nav-item {\n        min-height: 140px;\n\n        gap: 10px;\n\n        padding:\n            16px\n            8px;\n\n        border-radius:\n            16px;\n    }\n\n    #dx-services-navigation .dx-services-nav-item:nth-child(7) {\n        width:\n            calc(50% - 5px);\n    }\n\n    #dx-services-navigation .dx-services-nav-icon {\n        width: 49px;\n        height: 49px;\n        flex-basis: 49px;\n\n        border-radius:\n            14px;\n    }\n\n    #dx-services-navigation .dx-services-nav-icon svg {\n        width: 24px;\n        height: 24px;\n    }\n\n    #dx-services-navigation .dx-services-nav-label {\n        min-height: 42px;\n\n        font-size: 14px;\n        line-height: 1.4;\n    }\n\n    #dx-services-navigation .dx-services-nav-arrow {\n        width: 21px;\n        height: 21px;\n    }\n\n    #dx-services-navigation .dx-services-nav-note {\n        margin-top: 21px;\n\n        align-items: flex-start;\n\n        font-size: 14px;\n    }\n\n    #dx-services-navigation .dx-services-nav-dots {\n        display: none;\n    }\n}\n\n\/* =========================================================\n   VERY SMALL MOBILE\n========================================================= *\/\n\n@media (max-width:360px) {\n\n    #dx-services-navigation .dx-services-nav-main {\n        padding-right: 12px;\n        padding-left: 12px;\n    }\n\n    #dx-services-navigation .dx-services-nav-list {\n        gap: 8px;\n    }\n\n    #dx-services-navigation .dx-services-nav-item {\n        min-height: 140px;\n\n        padding-right: 6px;\n        padding-left: 6px;\n    }\n\n    #dx-services-navigation .dx-services-nav-item:nth-child(7) {\n        width:\n            calc(50% - 4px);\n    }\n\n    #dx-services-navigation .dx-services-nav-label {\n        font-size: 14px;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-services-navigation a:focus-visible {\n    outline:\n        3px solid var(--dx-services-nav-yellow);\n\n    outline-offset:\n        4px;\n}\n\n@media (prefers-reduced-motion:reduce) {\n\n    #dx-services-navigation *,\n    #dx-services-navigation *::before,\n    #dx-services-navigation *::after {\n        animation-duration:\n            .01ms !important;\n\n        animation-iteration-count:\n            1 !important;\n\n        transition-duration:\n            .01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-services-navigation\"\n    aria-labelledby=\"dx-services-navigation-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n\n    <span\n        class=\"dx-services-nav-orbit dx-services-nav-orbit-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-services-nav-orbit dx-services-nav-orbit-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-services-nav-dots dx-services-nav-dots-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-services-nav-dots dx-services-nav-dots-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-services-nav-main\">\n\n        <div class=\"dx-services-nav-container\">\n\n            <header class=\"dx-services-nav-header\">\n\n                <span class=\"dx-services-nav-eyebrow\">\n                    Our Digital Solutions\n                <\/span>\n\n                <h2\n                    id=\"dx-services-navigation-title\"\n                    class=\"dx-services-nav-title\"\n                >\n                    Choose the Service That Fits\n                    <span>Your Business Needs<\/span>\n                <\/h2>\n\n                <p class=\"dx-services-nav-description\">\n                    Explore our digital services and jump directly to the\n                    details to find the solution that best fits your project,\n                    business goals, and technical requirements.\n                <\/p>\n\n            <\/header>\n\n            <nav\n                class=\"dx-services-nav-list\"\n                aria-label=\"Navigate between our digital services\"\n            >\n\n                <!-- 01 \u2014 LMS -->\n\n                <a\n                    href=\"#dx-service-lms\"\n                    class=\"dx-services-nav-item\"\n                >\n\n                    <span\n                        class=\"dx-services-nav-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"m3 9 9-5 9 5-9 5-9-5z\"><\/path>\n                            <path d=\"M7 12v5c3 2 7 2 10 0v-5\"><\/path>\n                            <path d=\"M21 9v6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <span class=\"dx-services-nav-label\">\n                        Learning Management System\n                    <\/span>\n\n                    <span\n                        class=\"dx-services-nav-arrow\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M12 5v14\"><\/path>\n                            <path d=\"m18 13-6 6-6-6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                <\/a>\n\n                <!-- 02 \u2014 WEBSITES -->\n\n                <a\n                    href=\"#dx-service-websites\"\n                    class=\"dx-services-nav-item\"\n                >\n\n                    <span\n                        class=\"dx-services-nav-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n\n                            <rect\n                                x=\"3\"\n                                y=\"4\"\n                                width=\"18\"\n                                height=\"16\"\n                                rx=\"2\"\n                            ><\/rect>\n\n                            <path d=\"M3 8h18\"><\/path>\n                            <path d=\"m10 12-2 2 2 2\"><\/path>\n                            <path d=\"m14 12 2 2-2 2\"><\/path>\n\n                        <\/svg>\n                    <\/span>\n\n                    <span class=\"dx-services-nav-label\">\n                        Website Design & Development\n                    <\/span>\n\n                    <span\n                        class=\"dx-services-nav-arrow\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M12 5v14\"><\/path>\n                            <path d=\"m18 13-6 6-6-6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                <\/a>\n\n                <!-- 03 \u2014 MOBILE APPS -->\n\n                <a\n                    href=\"#dx-service-mobile-apps\"\n                    class=\"dx-services-nav-item\"\n                >\n\n                    <span\n                        class=\"dx-services-nav-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n\n                            <rect\n                                x=\"7\"\n                                y=\"2\"\n                                width=\"10\"\n                                height=\"20\"\n                                rx=\"2\"\n                            ><\/rect>\n\n                            <path d=\"M10 5h4\"><\/path>\n                            <path d=\"M11 18h2\"><\/path>\n\n                        <\/svg>\n                    <\/span>\n\n                    <span class=\"dx-services-nav-label\">\n                        Mobile App Design & Development\n                    <\/span>\n\n                    <span\n                        class=\"dx-services-nav-arrow\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M12 5v14\"><\/path>\n                            <path d=\"m18 13-6 6-6-6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                <\/a>\n\n                <!-- 04 \u2014 WOO -->\n\n                <a\n                    href=\"#dx-service-ready-stores\"\n                    class=\"dx-services-nav-item\"\n                >\n\n                    <span\n                        class=\"dx-services-nav-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n\n                            <path d=\"M4 9h16l-1-5H5L4 9z\"><\/path>\n                            <path d=\"M5 9v11h14V9\"><\/path>\n                            <path d=\"M9 20v-6h6v6\"><\/path>\n                            <path d=\"M4 9c0 2 3 2 4 0 1 2 3 2 4 0 1 2 3 2 4 0 1 2 4 2 4 0\"><\/path>\n\n                        <\/svg>\n                    <\/span>\n\n                    <span class=\"dx-services-nav-label\">\n                        WooCommerce Store Design\n                    <\/span>\n\n                    <span\n                        class=\"dx-services-nav-arrow\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M12 5v14\"><\/path>\n                            <path d=\"m18 13-6 6-6-6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                <\/a>\n\n                <!-- 05 \u2014 CUSTOM STORES -->\n\n                <a\n                    href=\"#dx-service-custom-stores\"\n                    class=\"dx-services-nav-item\"\n                >\n\n                    <span\n                        class=\"dx-services-nav-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n\n                            <path d=\"M5 8h14l1 12H4L5 8z\"><\/path>\n                            <path d=\"M9 8V6a3 3 0 0 1 6 0v2\"><\/path>\n                            <path d=\"M9 13h6\"><\/path>\n                            <path d=\"M9 16h4\"><\/path>\n\n                        <\/svg>\n                    <\/span>\n\n                    <span class=\"dx-services-nav-label\">\n                        Custom E-Commerce Development\n                    <\/span>\n\n                    <span\n                        class=\"dx-services-nav-arrow\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M12 5v14\"><\/path>\n                            <path d=\"m18 13-6 6-6-6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                <\/a>\n\n                <!-- 06 \u2014 DIGITAL TRANSFORMATION -->\n\n                <a\n                    href=\"#dx-service-digital-transformation\"\n                    class=\"dx-services-nav-item\"\n                >\n\n                    <span\n                        class=\"dx-services-nav-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n\n                            <path d=\"M7 18a4 4 0 0 1 .5-8A6 6 0 0 1 19 12a3 3 0 0 1-1 6H7z\"><\/path>\n                            <path d=\"m9 15 3-3 3 3\"><\/path>\n                            <path d=\"M12 12v8\"><\/path>\n\n                        <\/svg>\n                    <\/span>\n\n                    <span class=\"dx-services-nav-label\">\n                        Smart Digital Transformation\n                    <\/span>\n\n                    <span\n                        class=\"dx-services-nav-arrow\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M12 5v14\"><\/path>\n                            <path d=\"m18 13-6 6-6-6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                <\/a>\n\n                <!-- 07 \u2014 SOCIAL MEDIA -->\n\n                <a\n                    href=\"#dx-service-social-media\"\n                    class=\"dx-services-nav-item\"\n                >\n\n                    <span\n                        class=\"dx-services-nav-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n\n                            <path d=\"M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z\"><\/path>\n                            <path d=\"M8 9h8\"><\/path>\n                            <path d=\"M8 13h5\"><\/path>\n\n                        <\/svg>\n                    <\/span>\n\n                    <span class=\"dx-services-nav-label\">\n                        Social Media Management\n                    <\/span>\n\n                    <span\n                        class=\"dx-services-nav-arrow\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M12 5v14\"><\/path>\n                            <path d=\"m18 13-6 6-6-6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                <\/a>\n\n            <\/nav>\n\n            <div class=\"dx-services-nav-note\">\n\n                <span\n                    class=\"dx-services-nav-note-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\n                        <path d=\"M12 11v5\"><\/path>\n                        <path d=\"M12 8h.01\"><\/path>\n                    <\/svg>\n                <\/span>\n\n                <span>\n                    Select any service to jump directly to its details.\n                <\/span>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxServicesNavigation() {\n\n        const section =\n            document.getElementById(\n                \"dx-services-navigation\"\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-services-navigation-widget-fullwidth\"\n            );\n        }\n\n        const links =\n            section.querySelectorAll(\n                'a[href^=\"#\"]'\n            );\n\n        links.forEach(function (link) {\n\n            link.addEventListener(\n                \"click\",\n                function (event) {\n\n                    const targetId =\n                        link.getAttribute(\n                            \"href\"\n                        );\n\n                    if (\n                        !targetId ||\n                        targetId === \"#\"\n                    ) {\n                        return;\n                    }\n\n                    const target =\n                        document.querySelector(\n                            targetId\n                        );\n\n                    if (!target) {\n                        return;\n                    }\n\n                    event.preventDefault();\n\n                    target.scrollIntoView({\n                        behavior: \"smooth\",\n                        block: \"start\"\n                    });\n\n                }\n            );\n\n        });\n    }\n\n    if (\n        document.readyState === \"loading\"\n    ) {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxServicesNavigation\n        );\n\n    } else {\n\n        initDxServicesNavigation();\n\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-146c9cc e-flex e-con-boxed e-con e-parent\" data-id=\"146c9cc\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-69f0e3e elementor-widget elementor-widget-html\" data-id=\"69f0e3e\" 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     SERVICES PAGE \u2014 MAIN SERVICES DETAILS\n     Author: Mohamed El-Sehemy\n     English LTR - Elementor Compatible\n     7 Services\n========================================================== -->\n\n<style>\n\/* =========================================================\n   ELEMENTOR FULL WIDTH\n========================================================= *\/\n\n.elementor-widget-html:has(#dx-services-details),\n.elementor-widget-html:has(#dx-services-details)\n    > .elementor-widget-container,\n.dx-services-details-widget-fullwidth,\n.dx-services-details-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-services-details,\n#dx-services-details *,\n#dx-services-details *::before,\n#dx-services-details *::after {\n    box-sizing: border-box;\n}\n\n#dx-services-details {\n    --dx-details-bg: #f8f7fc;\n    --dx-details-white: #ffffff;\n    --dx-details-dark: #160a31;\n    --dx-details-dark-2: #08001f;\n    --dx-details-purple: #6942d8;\n    --dx-details-purple-light: #9168ef;\n    --dx-details-yellow: #ffc441;\n    --dx-details-text: #665f72;\n    --dx-details-muted: #8c8597;\n    --dx-details-border: rgba(105,66,216,.15);\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    color: var(--dx-details-dark);\n\n    background:\n        radial-gradient(\n            circle at 100% 10%,\n            rgba(105,66,216,.07),\n            transparent 24%\n        ),\n        radial-gradient(\n            circle at 0% 88%,\n            rgba(145,104,239,.07),\n            transparent 25%\n        ),\n        var(--dx-details-bg);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-services-details a {\n    color: inherit;\n    text-decoration: none;\n}\n\n\/* =========================================================\n   DECORATIONS\n========================================================= *\/\n\n#dx-services-details .dx-details-grid-bg {\n    position: absolute;\n    z-index: -5;\n    inset: 0;\n\n    opacity: .18;\n\n    background-image:\n        linear-gradient(\n            rgba(105,66,216,.035) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(105,66,216,.035) 1px,\n            transparent 1px\n        );\n\n    background-size: 76px 76px;\n\n    -webkit-mask-image:\n        linear-gradient(\n            to bottom,\n            transparent,\n            #000 10%,\n            #000 90%,\n            transparent\n        );\n\n    mask-image:\n        linear-gradient(\n            to bottom,\n            transparent,\n            #000 10%,\n            #000 90%,\n            transparent\n        );\n\n    pointer-events: none;\n}\n\n#dx-services-details .dx-details-orbit {\n    position: absolute;\n    z-index: -4;\n\n    border:\n        1px solid rgba(105,66,216,.10);\n\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-services-details .dx-details-orbit-one {\n    top: 150px;\n    left: -250px;\n\n    width: 510px;\n    height: 510px;\n}\n\n#dx-services-details .dx-details-orbit-two {\n    right: -270px;\n    bottom: 220px;\n\n    width: 540px;\n    height: 540px;\n}\n\n\/* =========================================================\n   SECTION LAYOUT\n========================================================= *\/\n\n#dx-services-details .dx-details-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        88px\n        clamp(22px,5vw,90px)\n        105px;\n}\n\n#dx-services-details .dx-details-container {\n    width: min(1450px,100%);\n\n    margin: 0 auto;\n}\n\n\/* =========================================================\n   SECTION HEADER\n========================================================= *\/\n\n#dx-services-details .dx-details-header {\n    max-width: 790px;\n\n    margin:\n        0\n        auto\n        52px;\n\n    text-align: center;\n}\n\n#dx-services-details .dx-details-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-details-purple);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-services-details .dx-details-eyebrow::before,\n#dx-services-details .dx-details-eyebrow::after {\n    content: \"\";\n\n    width: 32px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-details-yellow),\n            var(--dx-details-purple-light)\n        );\n}\n\n#dx-services-details .dx-details-title {\n    margin: 0;\n\n    color: var(--dx-details-dark);\n\n    font-size:\n        clamp(\n            35px,\n            3.8vw,\n            56px\n        );\n\n    font-weight: 900;\n    line-height: 1.2;\n    letter-spacing: -.6px;\n\n    text-wrap: balance;\n}\n\n#dx-services-details .dx-details-title span {\n    color: var(--dx-details-purple);\n}\n\n#dx-services-details .dx-details-description {\n    max-width: 680px;\n\n    margin:\n        14px\n        auto\n        0;\n\n    color: var(--dx-details-text);\n\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 1.8;\n}\n\n\/* =========================================================\n   SERVICES LIST\n========================================================= *\/\n\n#dx-services-details .dx-details-list {\n    display: grid;\n\n    gap: 30px;\n}\n\n\/* =========================================================\n   SERVICE CARD\n========================================================= *\/\n\n#dx-services-details .dx-detail-card {\n    position: relative;\n    isolation: isolate;\n\n    min-width: 0;\n\n    display: grid;\n\n    grid-template-columns:\n        minmax(0,1.05fr)\n        minmax(380px,.95fr);\n\n    align-items: center;\n\n    gap:\n        clamp(\n            38px,\n            5vw,\n            78px\n        );\n\n    padding:\n        clamp(\n            36px,\n            5vw,\n            65px\n        );\n\n    overflow: hidden;\n    scroll-margin-top: 95px;\n\n    border:\n        1px solid var(--dx-details-border);\n\n    border-radius: 29px;\n\n    background:\n        radial-gradient(\n            circle at 95% 15%,\n            rgba(105,66,216,.055),\n            transparent 28%\n        ),\n        linear-gradient(\n            145deg,\n            rgba(255,255,255,.99),\n            rgba(250,248,255,.97)\n        );\n\n    box-shadow:\n        0 25px 65px rgba(40,18,84,.09);\n\n    transition:\n        transform .35s ease,\n        border-color .35s ease,\n        box-shadow .35s ease;\n}\n\n#dx-services-details .dx-detail-card:nth-child(even) {\n    grid-template-columns:\n        minmax(380px,.95fr)\n        minmax(0,1.05fr);\n}\n\n#dx-services-details .dx-detail-card:nth-child(even)\n.dx-detail-content {\n    order: 2;\n}\n\n#dx-services-details .dx-detail-card:nth-child(even)\n.dx-detail-visual {\n    order: 1;\n}\n\n#dx-services-details .dx-detail-card:hover,\n#dx-services-details .dx-detail-card:focus-within {\n    border-color:\n        rgba(105,66,216,.33);\n\n    box-shadow:\n        0 34px 80px rgba(40,18,84,.14);\n\n    transform:\n        translateY(-6px);\n}\n\n#dx-services-details .dx-detail-card::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    top: -170px;\n    left: -150px;\n\n    width: 360px;\n    height: 360px;\n\n    border-radius: 50%;\n\n    background:\n        rgba(105,66,216,.08);\n\n    filter: blur(75px);\n\n    pointer-events: none;\n}\n\n#dx-services-details .dx-detail-card:nth-child(even)::before {\n    left: auto;\n    right: -150px;\n}\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n#dx-services-details .dx-detail-content {\n    position: relative;\n    z-index: 3;\n\n    min-width: 0;\n\n    text-align: left;\n}\n\n#dx-services-details .dx-detail-topline {\n    display: flex;\n    align-items: center;\n\n    gap: 14px;\n\n    margin-bottom: 18px;\n}\n\n#dx-services-details .dx-detail-number {\n    width: 55px;\n    height: 55px;\n    flex: 0 0 55px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border:\n        1px solid rgba(105,66,216,.18);\n\n    border-radius: 17px;\n\n    color: var(--dx-details-purple);\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(105,66,216,.10),\n            rgba(145,104,239,.05)\n        );\n\n    font-size: 16px;\n    font-weight: 900;\n    line-height: 1;\n}\n\n#dx-services-details .dx-detail-category {\n    color: var(--dx-details-purple);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-services-details .dx-detail-heading {\n    margin: 0;\n\n    color: var(--dx-details-dark);\n\n    font-size:\n        clamp(\n            29px,\n            3vw,\n            45px\n        );\n\n    font-weight: 900;\n    line-height: 1.2;\n    letter-spacing: -.4px;\n\n    text-wrap: balance;\n}\n\n#dx-services-details .dx-detail-copy {\n    max-width: 700px;\n\n    margin:\n        15px\n        0\n        0;\n\n    color: var(--dx-details-text);\n\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 1.8;\n\n    text-wrap: pretty;\n}\n\n\/* =========================================================\n   FEATURES\n========================================================= *\/\n\n#dx-services-details .dx-detail-features {\n    margin:\n        26px\n        0\n        0;\n\n    padding: 0;\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(2,minmax(0,1fr));\n\n    gap:\n        13px\n        20px;\n\n    list-style: none;\n}\n\n#dx-services-details .dx-detail-feature {\n    min-width: 0;\n\n    display: flex;\n    align-items: flex-start;\n\n    gap: 10px;\n\n    color: var(--dx-details-text);\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.7;\n}\n\n#dx-services-details .dx-detail-feature-icon {\n    width: 24px;\n    height: 24px;\n    flex: 0 0 24px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-top: 1px;\n\n    border-radius: 50%;\n\n    color:\n        var(--dx-details-purple);\n\n    background:\n        rgba(105,66,216,.10);\n}\n\n#dx-services-details .dx-detail-feature-icon svg {\n    width: 13px;\n    height: 13px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2.2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   BUTTON\n========================================================= *\/\n\n#dx-services-details .dx-detail-action {\n    margin-top: 29px;\n}\n\n#dx-services-details .dx-detail-button {\n    position: relative;\n    isolation: isolate;\n\n    min-width: 172px;\n    min-height: 52px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    padding:\n        0\n        23px;\n\n    overflow: hidden;\n\n    border:\n        1px solid rgba(105,66,216,.22);\n\n    border-radius: 12px;\n\n    color:\n        var(--dx-details-white);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-details-purple),\n            var(--dx-details-purple-light)\n        );\n\n    box-shadow:\n        0 15px 34px rgba(105,66,216,.23);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1;\n\n    transition:\n        transform .25s ease,\n        box-shadow .25s ease;\n}\n\n#dx-services-details .dx-detail-button::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -1;\n\n    top: -45%;\n    left: -75%;\n\n    width: 38%;\n    height: 190%;\n\n    background:\n        linear-gradient(\n            90deg,\n            transparent,\n            rgba(255,255,255,.55),\n            transparent\n        );\n\n    transform:\n        rotate(18deg);\n\n    transition:\n        left .55s ease;\n}\n\n#dx-services-details .dx-detail-button:hover::before {\n    left: 135%;\n}\n\n#dx-services-details .dx-detail-button:hover,\n#dx-services-details .dx-detail-button:focus-visible {\n    box-shadow:\n        0 21px 45px rgba(105,66,216,.32);\n\n    transform:\n        translateY(-3px);\n}\n\n#dx-services-details .dx-detail-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   VISUAL\n========================================================= *\/\n\n#dx-services-details .dx-detail-visual {\n    position: relative;\n\n    min-width: 0;\n    min-height: 360px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n#dx-services-details .dx-detail-visual-shell {\n    position: relative;\n    isolation: isolate;\n\n    width: min(100%,470px);\n    min-height: 345px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    padding: 34px;\n\n    overflow: hidden;\n\n    border:\n        1px solid rgba(105,66,216,.13);\n\n    border-radius: 28px;\n\n    background:\n        radial-gradient(\n            circle at 80% 15%,\n            rgba(145,104,239,.16),\n            transparent 29%\n        ),\n        linear-gradient(\n            145deg,\n            #ffffff,\n            #f1edf9\n        );\n\n    box-shadow:\n        0 28px 65px rgba(40,18,84,.15);\n\n    transition:\n        transform .4s ease,\n        box-shadow .4s ease;\n}\n\n#dx-services-details .dx-detail-card:hover\n.dx-detail-visual-shell {\n    box-shadow:\n        0 35px 75px rgba(40,18,84,.20);\n\n    transform:\n        translateY(-5px)\n        rotate(1deg);\n}\n\n#dx-services-details .dx-detail-visual-shell::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    left: -80px;\n    bottom: -90px;\n\n    width: 230px;\n    height: 230px;\n\n    border:\n        1px solid rgba(105,66,216,.13);\n\n    border-radius: 50%;\n}\n\n#dx-services-details .dx-detail-visual-shell::after {\n    content: \"\";\n\n    position: absolute;\n    z-index: -3;\n\n    top: -90px;\n    right: -70px;\n\n    width: 220px;\n    height: 220px;\n\n    border-radius: 50%;\n\n    background:\n        rgba(105,66,216,.08);\n\n    filter: blur(45px);\n}\n\n\/* =========================================================\n   GENERIC VISUAL ELEMENTS\n========================================================= *\/\n\n#dx-services-details .dx-visual-window {\n    position: relative;\n\n    width: 100%;\n    max-width: 370px;\n\n    overflow: hidden;\n\n    border:\n        1px solid rgba(105,66,216,.12);\n\n    border-radius: 19px;\n\n    background: #ffffff;\n\n    box-shadow:\n        0 20px 42px rgba(39,17,82,.14);\n}\n\n#dx-services-details .dx-visual-window-head {\n    min-height: 45px;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    padding:\n        0\n        14px;\n\n    border-bottom:\n        1px solid rgba(105,66,216,.10);\n\n    background:\n        linear-gradient(\n            180deg,\n            #ffffff,\n            #f8f5fc\n        );\n}\n\n#dx-services-details .dx-window-dots {\n    display: flex;\n\n    gap: 6px;\n}\n\n#dx-services-details .dx-window-dot {\n    width: 8px;\n    height: 8px;\n\n    border-radius: 50%;\n}\n\n#dx-services-details .dx-window-dot:nth-child(1) {\n    background: #ff6b6b;\n}\n\n#dx-services-details .dx-window-dot:nth-child(2) {\n    background:\n        var(--dx-details-yellow);\n}\n\n#dx-services-details .dx-window-dot:nth-child(3) {\n    background: #49cf77;\n}\n\n#dx-services-details .dx-window-url {\n    width: 48%;\n    height: 22px;\n\n    border-radius: 999px;\n\n    background:\n        rgba(105,66,216,.06);\n}\n\n#dx-services-details .dx-visual-window-body {\n    min-height: 235px;\n\n    padding: 23px;\n}\n\n\/* =========================================================\n   LMS VISUAL\n========================================================= *\/\n\n#dx-services-details .dx-lms-sidebar {\n    position: absolute;\n\n    top: 45px;\n    left: 0;\n    bottom: 0;\n\n    width: 74px;\n\n    padding:\n        18px\n        13px;\n\n    display: grid;\n    align-content: start;\n\n    gap: 11px;\n\n    background:\n        linear-gradient(\n            180deg,\n            var(--dx-details-dark),\n            #23104d\n        );\n}\n\n#dx-services-details .dx-lms-side-item {\n    height: 10px;\n\n    border-radius: 999px;\n\n    background:\n        rgba(255,255,255,.15);\n}\n\n#dx-services-details .dx-lms-side-item:first-child {\n    background:\n        var(--dx-details-yellow);\n}\n\n#dx-services-details .dx-lms-content {\n    margin-left: 64px;\n}\n\n#dx-services-details .dx-lms-heading {\n    width: 55%;\n    height: 22px;\n\n    border-radius: 8px;\n\n    background:\n        var(--dx-details-dark);\n}\n\n#dx-services-details .dx-lms-stats {\n    margin-top: 20px;\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(3,1fr);\n\n    gap: 9px;\n}\n\n#dx-services-details .dx-lms-stat {\n    height: 66px;\n\n    border-radius: 11px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(105,66,216,.12),\n            rgba(145,104,239,.05)\n        );\n}\n\n#dx-services-details .dx-lms-courses {\n    margin-top: 16px;\n\n    display: grid;\n\n    gap: 9px;\n}\n\n#dx-services-details .dx-lms-course {\n    height: 42px;\n\n    border:\n        1px solid rgba(105,66,216,.09);\n\n    border-radius: 10px;\n\n    background: #ffffff;\n}\n\n\/* =========================================================\n   WEBSITE VISUAL\n========================================================= *\/\n\n#dx-services-details .dx-web-hero-block {\n    height: 90px;\n\n    padding: 17px;\n\n    border-radius: 14px;\n\n    background:\n        radial-gradient(\n            circle at 20% 20%,\n            rgba(255,196,65,.18),\n            transparent 30%\n        ),\n        linear-gradient(\n            135deg,\n            var(--dx-details-dark),\n            #321575\n        );\n}\n\n#dx-services-details .dx-web-line {\n    height: 8px;\n\n    margin-bottom: 8px;\n\n    border-radius: 999px;\n\n    background:\n        rgba(255,255,255,.62);\n}\n\n#dx-services-details .dx-web-line:nth-child(1) {\n    width: 48%;\n}\n\n#dx-services-details .dx-web-line:nth-child(2) {\n    width: 72%;\n}\n\n#dx-services-details .dx-web-line:nth-child(3) {\n    width: 42%;\n}\n\n#dx-services-details .dx-web-cards {\n    margin-top: 17px;\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(3,1fr);\n\n    gap: 9px;\n}\n\n#dx-services-details .dx-web-card {\n    height: 78px;\n\n    border:\n        1px solid rgba(105,66,216,.09);\n\n    border-radius: 12px;\n\n    background:\n        linear-gradient(\n            145deg,\n            #ffffff,\n            #f5f1fb\n        );\n}\n\n\/* =========================================================\n   MOBILE APP VISUAL\n========================================================= *\/\n\n#dx-services-details .dx-phone {\n    position: relative;\n\n    width: 175px;\n    height: 310px;\n\n    padding: 12px;\n\n    border:\n        6px solid var(--dx-details-dark);\n\n    border-radius: 33px;\n\n    background: #ffffff;\n\n    box-shadow:\n        0 22px 50px rgba(34,13,77,.22);\n}\n\n#dx-services-details .dx-phone::before {\n    content: \"\";\n\n    position: absolute;\n\n    top: 7px;\n    left: 50%;\n\n    width: 55px;\n    height: 7px;\n\n    border-radius: 999px;\n\n    background:\n        var(--dx-details-dark);\n\n    transform:\n        translateX(-50%);\n}\n\n#dx-services-details .dx-phone-screen {\n    height: 100%;\n\n    padding:\n        25px\n        12px\n        14px;\n\n    overflow: hidden;\n\n    border-radius: 22px;\n\n    background:\n        linear-gradient(\n            160deg,\n            #f5f1fb,\n            #ffffff\n        );\n}\n\n#dx-services-details .dx-phone-banner {\n    height: 90px;\n\n    border-radius: 16px;\n\n    background:\n        radial-gradient(\n            circle at 30% 20%,\n            rgba(255,196,65,.25),\n            transparent 30%\n        ),\n        linear-gradient(\n            145deg,\n            var(--dx-details-purple),\n            var(--dx-details-purple-light)\n        );\n}\n\n#dx-services-details .dx-phone-list {\n    margin-top: 15px;\n\n    display: grid;\n\n    gap: 9px;\n}\n\n#dx-services-details .dx-phone-list-item {\n    height: 38px;\n\n    border-radius: 10px;\n\n    background:\n        rgba(105,66,216,.08);\n}\n\n#dx-services-details .dx-phone-badge {\n    position: absolute;\n\n    left: -45px;\n    bottom: 35px;\n\n    width: 90px;\n    height: 90px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border:\n        1px solid rgba(255,255,255,.32);\n\n    border-radius: 25px;\n\n    color:\n        var(--dx-details-dark);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-details-yellow),\n            #ffd66e\n        );\n\n    box-shadow:\n        0 17px 34px rgba(255,196,65,.28);\n}\n\n#dx-services-details .dx-phone-badge svg {\n    width: 43px;\n    height: 43px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.6;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   STORE VISUALS\n========================================================= *\/\n\n#dx-services-details .dx-store-header {\n    height: 82px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 15px;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-details-purple),\n            var(--dx-details-purple-light)\n        );\n}\n\n#dx-services-details .dx-store-icon {\n    width: 50px;\n    height: 50px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 16px;\n\n    color:\n        var(--dx-details-dark);\n\n    background:\n        var(--dx-details-yellow);\n}\n\n#dx-services-details .dx-store-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-services-details .dx-store-products {\n    margin-top: 17px;\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(3,1fr);\n\n    gap: 9px;\n}\n\n#dx-services-details .dx-store-product {\n    position: relative;\n\n    height: 105px;\n\n    overflow: hidden;\n\n    border:\n        1px solid rgba(105,66,216,.09);\n\n    border-radius: 12px;\n\n    background:\n        linear-gradient(\n            145deg,\n            #ffffff,\n            #f4f0fa\n        );\n}\n\n#dx-services-details .dx-store-product::before {\n    content: \"\";\n\n    position: absolute;\n\n    top: 12px;\n    left: 50%;\n\n    width: 47px;\n    height: 47px;\n\n    border-radius: 13px;\n\n    background:\n        rgba(105,66,216,.12);\n\n    transform:\n        translateX(-50%);\n}\n\n#dx-services-details .dx-store-product::after {\n    content: \"\";\n\n    position: absolute;\n\n    left: 20%;\n    bottom: 17px;\n\n    width: 60%;\n    height: 7px;\n\n    border-radius: 999px;\n\n    background:\n        rgba(22,10,49,.15);\n}\n\n\/* =========================================================\n   CUSTOM STORE VISUAL\n========================================================= *\/\n\n#dx-services-details .dx-code-panel {\n    width: 100%;\n    max-width: 365px;\n\n    overflow: hidden;\n\n    border:\n        1px solid rgba(255,255,255,.11);\n\n    border-radius: 19px;\n\n    background:\n        linear-gradient(\n            145deg,\n            #160a31,\n            #090020\n        );\n\n    box-shadow:\n        0 24px 55px rgba(12,3,36,.35);\n}\n\n#dx-services-details .dx-code-head {\n    height: 44px;\n\n    display: flex;\n    align-items: center;\n\n    padding:\n        0\n        15px;\n\n    border-bottom:\n        1px solid rgba(255,255,255,.08);\n}\n\n#dx-services-details .dx-code-body {\n    min-height: 220px;\n\n    padding:\n        22px\n        20px;\n\n    display: grid;\n    align-content: start;\n\n    gap: 11px;\n}\n\n#dx-services-details .dx-code-line {\n    height: 8px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-details-purple-light),\n            rgba(255,255,255,.18)\n        );\n}\n\n#dx-services-details .dx-code-line:nth-child(1) {\n    width: 76%;\n}\n\n#dx-services-details .dx-code-line:nth-child(2) {\n    width: 50%;\n\n    margin-left: 13%;\n}\n\n#dx-services-details .dx-code-line:nth-child(3) {\n    width: 68%;\n\n    margin-left: 7%;\n}\n\n#dx-services-details .dx-code-line:nth-child(4) {\n    width: 42%;\n\n    margin-left: 18%;\n}\n\n#dx-services-details .dx-code-line:nth-child(5) {\n    width: 82%;\n}\n\n#dx-services-details .dx-code-line:nth-child(6) {\n    width: 58%;\n\n    margin-left: 11%;\n}\n\n#dx-services-details .dx-code-chip {\n    position: absolute;\n\n    right: 5px;\n    bottom: 22px;\n\n    min-width: 128px;\n    min-height: 44px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    padding:\n        0\n        16px;\n\n    border-radius: 12px;\n\n    color:\n        var(--dx-details-dark);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-details-yellow),\n            #ffd66e\n        );\n\n    box-shadow:\n        0 15px 30px rgba(255,196,65,.25);\n\n    font-size: 14px;\n    font-weight: 900;\n}\n\n\/* =========================================================\n   DIGITAL TRANSFORMATION VISUAL\n========================================================= *\/\n\n#dx-services-details .dx-digital-core {\n    position: relative;\n\n    width: 190px;\n    height: 190px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 50%;\n\n    color:\n        var(--dx-details-white);\n\n    background:\n        radial-gradient(\n            circle at 30% 20%,\n            rgba(255,255,255,.15),\n            transparent 30%\n        ),\n        linear-gradient(\n            145deg,\n            var(--dx-details-purple-light),\n            var(--dx-details-purple)\n        );\n\n    box-shadow:\n        0 28px 60px rgba(105,66,216,.36);\n}\n\n#dx-services-details .dx-digital-core::before,\n#dx-services-details .dx-digital-core::after {\n    content: \"\";\n\n    position: absolute;\n\n    border:\n        1px solid rgba(105,66,216,.22);\n\n    border-radius: 50%;\n}\n\n#dx-services-details .dx-digital-core::before {\n    inset: -30px;\n}\n\n#dx-services-details .dx-digital-core::after {\n    inset: -60px;\n}\n\n#dx-services-details .dx-digital-core svg {\n    width: 73px;\n    height: 73px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.45;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-services-details .dx-digital-node {\n    position: absolute;\n\n    width: 58px;\n    height: 58px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border:\n        1px solid rgba(105,66,216,.16);\n\n    border-radius: 18px;\n\n    color:\n        var(--dx-details-purple);\n\n    background:\n        #ffffff;\n\n    box-shadow:\n        0 14px 30px rgba(40,18,84,.14);\n}\n\n#dx-services-details .dx-digital-node svg {\n    width: 28px;\n    height: 28px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.7;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-services-details .dx-digital-node-one {\n    top: 20px;\n    left: 30px;\n}\n\n#dx-services-details .dx-digital-node-two {\n    right: 28px;\n    top: 45%;\n}\n\n#dx-services-details .dx-digital-node-three {\n    left: 55px;\n    bottom: 18px;\n}\n\n\/* =========================================================\n   SOCIAL MEDIA VISUAL\n========================================================= *\/\n\n#dx-services-details .dx-social-visual {\n    position: relative;\n\n    width: 100%;\n    max-width: 330px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n#dx-services-details .dx-social-screen {\n    position: relative;\n\n    width: 275px;\n\n    padding:\n        17px\n        16px\n        20px;\n\n    overflow: hidden;\n\n    border:\n        1px solid rgba(105,66,216,.13);\n\n    border-radius: 25px;\n\n    background: #ffffff;\n\n    box-shadow:\n        0 24px 52px rgba(40,18,84,.18);\n}\n\n#dx-services-details .dx-social-screen-head {\n    display: flex;\n    align-items: center;\n\n    gap: 10px;\n\n    margin-bottom: 14px;\n}\n\n#dx-services-details .dx-social-avatar {\n    width: 38px;\n    height: 38px;\n    flex: 0 0 38px;\n\n    border-radius: 50%;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-details-purple),\n            var(--dx-details-purple-light)\n        );\n}\n\n#dx-services-details .dx-social-account-lines {\n    flex: 1;\n\n    display: grid;\n\n    gap: 6px;\n}\n\n#dx-services-details .dx-social-account-lines span {\n    display: block;\n\n    height: 6px;\n\n    border-radius: 999px;\n\n    background:\n        rgba(22,10,49,.13);\n}\n\n#dx-services-details .dx-social-account-lines span:first-child {\n    width: 65%;\n}\n\n#dx-services-details .dx-social-account-lines span:last-child {\n    width: 42%;\n\n    background:\n        rgba(105,66,216,.10);\n}\n\n#dx-services-details .dx-social-menu-dot {\n    width: 5px;\n    height: 5px;\n\n    border-radius: 50%;\n\n    background:\n        var(--dx-details-dark);\n\n    box-shadow:\n        0 7px 0 var(--dx-details-dark),\n        0 -7px 0 var(--dx-details-dark);\n}\n\n#dx-services-details .dx-social-post {\n    overflow: hidden;\n\n    border-radius: 17px;\n}\n\n#dx-services-details .dx-social-post-gradient {\n    height: 150px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    background:\n        radial-gradient(\n            circle at 25% 20%,\n            rgba(255,196,65,.30),\n            transparent 30%\n        ),\n        radial-gradient(\n            circle at 80% 80%,\n            rgba(255,255,255,.13),\n            transparent 32%\n        ),\n        linear-gradient(\n            145deg,\n            var(--dx-details-purple-light),\n            var(--dx-details-purple),\n            #301370\n        );\n}\n\n#dx-services-details .dx-social-post-icon {\n    width: 65px;\n    height: 65px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border:\n        1px solid rgba(255,255,255,.22);\n\n    border-radius: 20px;\n\n    color: #ffffff;\n\n    background:\n        rgba(255,255,255,.10);\n\n    -webkit-backdrop-filter:\n        blur(10px);\n\n    backdrop-filter:\n        blur(10px);\n}\n\n#dx-services-details .dx-social-post-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-services-details .dx-social-actions {\n    margin-top: 14px;\n\n    display: flex;\n    align-items: center;\n\n    gap: 13px;\n\n    color:\n        var(--dx-details-dark);\n}\n\n#dx-services-details .dx-social-actions span {\n    display: inline-flex;\n}\n\n#dx-services-details .dx-social-actions svg {\n    width: 19px;\n    height: 19px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-services-details .dx-social-copy-lines {\n    margin-top: 14px;\n\n    display: grid;\n\n    gap: 7px;\n}\n\n#dx-services-details .dx-social-copy-lines span {\n    height: 7px;\n\n    border-radius: 999px;\n\n    background:\n        rgba(22,10,49,.12);\n}\n\n#dx-services-details .dx-social-copy-lines span:nth-child(1) {\n    width: 90%;\n}\n\n#dx-services-details .dx-social-copy-lines span:nth-child(2) {\n    width: 72%;\n}\n\n#dx-services-details .dx-social-copy-lines span:nth-child(3) {\n    width: 48%;\n\n    background:\n        rgba(105,66,216,.13);\n}\n\n#dx-services-details .dx-social-floating {\n    position: absolute;\n\n    width: 61px;\n    height: 61px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 18px;\n\n    box-shadow:\n        0 16px 35px rgba(40,18,84,.19);\n}\n\n#dx-services-details .dx-social-floating 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-services-details .dx-social-floating-one {\n    top: 48px;\n    left: -35px;\n\n    color: #ffffff;\n\n    background:\n        linear-gradient(\n            145deg,\n            var(--dx-details-purple-light),\n            var(--dx-details-purple)\n        );\n}\n\n#dx-services-details .dx-social-floating-two {\n    right: -28px;\n    bottom: 46px;\n\n    color:\n        var(--dx-details-dark);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-details-yellow),\n            #ffd96f\n        );\n}\n\n\/* =========================================================\n   LARGE TABLET\n========================================================= *\/\n\n@media (max-width:1100px) {\n\n    #dx-services-details .dx-detail-card,\n    #dx-services-details .dx-detail-card:nth-child(even) {\n        grid-template-columns:\n            minmax(0,1fr)\n            minmax(330px,.85fr);\n\n        gap: 34px;\n    }\n\n    #dx-services-details .dx-detail-card:nth-child(even)\n    .dx-detail-content {\n        order: 1;\n    }\n\n    #dx-services-details .dx-detail-card:nth-child(even)\n    .dx-detail-visual {\n        order: 2;\n    }\n\n    #dx-services-details .dx-detail-features {\n        grid-template-columns:\n            1fr;\n    }\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width:850px) {\n\n    #dx-services-details .dx-details-main {\n        padding:\n            75px\n            28px\n            85px;\n    }\n\n    #dx-services-details .dx-detail-card,\n    #dx-services-details .dx-detail-card:nth-child(even) {\n        grid-template-columns:\n            1fr;\n\n        gap: 38px;\n\n        padding:\n            45px\n            34px;\n    }\n\n    #dx-services-details .dx-detail-content,\n    #dx-services-details .dx-detail-card:nth-child(even)\n    .dx-detail-content {\n        order: 1;\n    }\n\n    #dx-services-details .dx-detail-visual,\n    #dx-services-details .dx-detail-card:nth-child(even)\n    .dx-detail-visual {\n        order: 2;\n    }\n\n    #dx-services-details .dx-detail-content {\n        max-width: 720px;\n\n        margin: 0 auto;\n\n        text-align: center;\n    }\n\n    #dx-services-details .dx-detail-topline,\n    #dx-services-details .dx-detail-action {\n        justify-content: center;\n    }\n\n    #dx-services-details .dx-detail-topline {\n        display: flex;\n    }\n\n    #dx-services-details .dx-detail-copy {\n        margin-right: auto;\n        margin-left: auto;\n    }\n\n    #dx-services-details .dx-detail-features {\n        max-width: 620px;\n\n        margin-right: auto;\n        margin-left: auto;\n\n        grid-template-columns:\n            repeat(2,minmax(0,1fr));\n\n        text-align: left;\n    }\n\n    #dx-services-details .dx-detail-action {\n        display: flex;\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width:600px) {\n\n    #dx-services-details .dx-details-main {\n        padding:\n            62px\n            16px\n            70px;\n    }\n\n    #dx-services-details .dx-details-header {\n        margin-bottom: 34px;\n    }\n\n    #dx-services-details .dx-details-eyebrow {\n        font-size: 14px;\n    }\n\n    #dx-services-details .dx-details-eyebrow::before,\n    #dx-services-details .dx-details-eyebrow::after {\n        width: 23px;\n    }\n\n    #dx-services-details .dx-details-title {\n        font-size:\n            clamp(\n                29px,\n                9vw,\n                40px\n            );\n\n        line-height: 1.25;\n    }\n\n    #dx-services-details .dx-details-description {\n        margin-top: 11px;\n\n        font-size: 14px;\n        line-height: 1.75;\n    }\n\n    #dx-services-details .dx-details-list {\n        gap: 18px;\n    }\n\n    #dx-services-details .dx-detail-card,\n    #dx-services-details .dx-detail-card:nth-child(even) {\n        gap: 30px;\n\n        padding:\n            30px\n            18px\n            25px;\n\n        scroll-margin-top: 74px;\n\n        border-radius: 21px;\n    }\n\n    #dx-services-details .dx-detail-topline {\n        margin-bottom: 14px;\n    }\n\n    #dx-services-details .dx-detail-number {\n        width: 47px;\n        height: 47px;\n        flex-basis: 47px;\n\n        border-radius: 14px;\n\n        font-size: 14px;\n    }\n\n    #dx-services-details .dx-detail-category {\n        font-size: 14px;\n    }\n\n    #dx-services-details .dx-detail-heading {\n        font-size:\n            clamp(\n                25px,\n                7.5vw,\n                34px\n            );\n\n        line-height: 1.25;\n    }\n\n    #dx-services-details .dx-detail-copy {\n        margin-top: 11px;\n\n        font-size: 14px;\n        line-height: 1.75;\n    }\n\n    #dx-services-details .dx-detail-features {\n        margin-top: 21px;\n\n        grid-template-columns:\n            1fr;\n\n        gap: 11px;\n    }\n\n    #dx-services-details .dx-detail-feature {\n        font-size: 14px;\n    }\n\n    #dx-services-details .dx-detail-action {\n        margin-top: 23px;\n    }\n\n    #dx-services-details .dx-detail-button {\n        width: 100%;\n        min-height: 51px;\n\n        font-size: 14px;\n    }\n\n    #dx-services-details .dx-detail-visual {\n        min-height: 280px;\n    }\n\n    #dx-services-details .dx-detail-visual-shell {\n        min-height: 275px;\n\n        padding:\n            21px\n            15px;\n\n        border-radius: 21px;\n    }\n\n    #dx-services-details .dx-visual-window-body {\n        min-height: 185px;\n\n        padding: 17px;\n    }\n\n    #dx-services-details .dx-lms-sidebar {\n        width: 56px;\n\n        padding:\n            15px\n            10px;\n    }\n\n    #dx-services-details .dx-lms-content {\n        margin-left: 48px;\n    }\n\n    #dx-services-details .dx-lms-stats {\n        gap: 6px;\n    }\n\n    #dx-services-details .dx-lms-stat {\n        height: 52px;\n    }\n\n    #dx-services-details .dx-web-cards,\n    #dx-services-details .dx-store-products {\n        gap: 6px;\n    }\n\n    #dx-services-details .dx-web-card {\n        height: 58px;\n    }\n\n    #dx-services-details .dx-store-product {\n        height: 80px;\n    }\n\n    #dx-services-details .dx-phone {\n        width: 145px;\n        height: 265px;\n\n        border-radius: 28px;\n    }\n\n    #dx-services-details .dx-phone-badge {\n        left: -38px;\n\n        width: 72px;\n        height: 72px;\n\n        border-radius: 21px;\n    }\n\n    #dx-services-details .dx-phone-badge svg {\n        width: 34px;\n        height: 34px;\n    }\n\n    #dx-services-details .dx-code-body {\n        min-height: 185px;\n    }\n\n    #dx-services-details .dx-code-chip {\n        right: -3px;\n        bottom: 12px;\n\n        min-width: 105px;\n        min-height: 38px;\n\n        font-size: 14px;\n    }\n\n    #dx-services-details .dx-digital-core {\n        width: 140px;\n        height: 140px;\n    }\n\n    #dx-services-details .dx-digital-core::before {\n        inset: -22px;\n    }\n\n    #dx-services-details .dx-digital-core::after {\n        inset: -42px;\n    }\n\n    #dx-services-details .dx-digital-core svg {\n        width: 54px;\n        height: 54px;\n    }\n\n    #dx-services-details .dx-digital-node {\n        width: 46px;\n        height: 46px;\n\n        border-radius: 14px;\n    }\n\n    #dx-services-details .dx-digital-node svg {\n        width: 22px;\n        height: 22px;\n    }\n\n    #dx-services-details .dx-digital-node-one {\n        top: 12px;\n        left: 14px;\n    }\n\n    #dx-services-details .dx-digital-node-two {\n        right: 10px;\n    }\n\n    #dx-services-details .dx-digital-node-three {\n        left: 28px;\n        bottom: 12px;\n    }\n\n    #dx-services-details .dx-social-screen {\n        width: 225px;\n\n        padding:\n            14px\n            13px\n            17px;\n\n        border-radius: 21px;\n    }\n\n    #dx-services-details .dx-social-post-gradient {\n        height: 120px;\n    }\n\n    #dx-services-details .dx-social-post-icon {\n        width: 54px;\n        height: 54px;\n\n        border-radius: 17px;\n    }\n\n    #dx-services-details .dx-social-floating {\n        width: 49px;\n        height: 49px;\n\n        border-radius: 15px;\n    }\n\n    #dx-services-details .dx-social-floating svg {\n        width: 23px;\n        height: 23px;\n    }\n\n    #dx-services-details .dx-social-floating-one {\n        left: -23px;\n    }\n\n    #dx-services-details .dx-social-floating-two {\n        right: -20px;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-services-details a:focus-visible {\n    outline:\n        3px solid var(--dx-details-yellow);\n\n    outline-offset: 4px;\n}\n\n@media (prefers-reduced-motion:reduce) {\n\n    #dx-services-details *,\n    #dx-services-details *::before,\n    #dx-services-details *::after {\n        animation-duration:\n            .01ms !important;\n\n        animation-iteration-count:\n            1 !important;\n\n        transition-duration:\n            .01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-services-details\"\n    aria-labelledby=\"dx-services-details-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n\n    <div\n        class=\"dx-details-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <span\n        class=\"dx-details-orbit dx-details-orbit-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-details-orbit dx-details-orbit-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-details-main\">\n\n        <div class=\"dx-details-container\">\n\n            <header class=\"dx-details-header\">\n\n                <span class=\"dx-details-eyebrow\">\n                    Services Built Around Your Needs\n                <\/span>\n\n                <h2\n                    id=\"dx-services-details-title\"\n                    class=\"dx-details-title\"\n                >\n                    Digital Solutions for Every Stage of\n                    <span>Your Project<\/span>\n                <\/h2>\n\n                <p class=\"dx-details-description\">\n                    From planning and design to development, launch, and\n                    future growth, we help you choose and implement the\n                    digital solution that best fits your business.\n                <\/p>\n\n            <\/header>\n\n            <div class=\"dx-details-list\">\n\n                <!-- =================================================\n                     01 \u2014 LMS\n                ================================================== -->\n\n                <article\n                    id=\"dx-service-lms\"\n                    class=\"dx-detail-card\"\n                >\n\n                    <div class=\"dx-detail-content\">\n\n                        <div class=\"dx-detail-topline\">\n\n                            <span class=\"dx-detail-number\">\n                                01\n                            <\/span>\n\n                            <span class=\"dx-detail-category\">\n                                Learning & Training Platforms\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-detail-heading\">\n                            Learning Management System\n                        <\/h3>\n\n                        <p class=\"dx-detail-copy\">\n                            Simplify online learning with a user-friendly\n                            platform that brings courses, educational content,\n                            learners, and instructors together in one\n                            centralized system.\n                        <\/p>\n\n                        <ul class=\"dx-detail-features\">\n\n                            <li class=\"dx-detail-feature\">\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                <span>\n                                    Course and learning content management\n                                <\/span>\n                            <\/li>\n\n                            <li class=\"dx-detail-feature\">\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                <span>\n                                    Learner and instructor management\n                                <\/span>\n                            <\/li>\n\n                            <li class=\"dx-detail-feature\">\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                <span>\n                                    Assessments, certificates, and reports\n                                <\/span>\n                            <\/li>\n\n                            <li class=\"dx-detail-feature\">\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                <span>\n                                    Zoom and Microsoft Teams integration\n                                <\/span>\n                            <\/li>\n\n                        <\/ul>\n\n                        <div class=\"dx-detail-action\">\n\n                            <a\n                                href=\"https:\/\/dindex.net\/en\/lms\/\"\n                                class=\"dx-detail-button\"\n                            >\n                                <span>\n                                    Learn More\n                                <\/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                        class=\"dx-detail-visual\"\n                        aria-hidden=\"true\"\n                    >\n\n                        <div class=\"dx-detail-visual-shell\">\n\n                            <div class=\"dx-visual-window\">\n\n                                <div class=\"dx-visual-window-head\">\n\n                                    <div class=\"dx-window-dots\">\n                                        <span class=\"dx-window-dot\"><\/span>\n                                        <span class=\"dx-window-dot\"><\/span>\n                                        <span class=\"dx-window-dot\"><\/span>\n                                    <\/div>\n\n                                    <span class=\"dx-window-url\"><\/span>\n\n                                <\/div>\n\n                                <div class=\"dx-lms-sidebar\">\n                                    <span class=\"dx-lms-side-item\"><\/span>\n                                    <span class=\"dx-lms-side-item\"><\/span>\n                                    <span class=\"dx-lms-side-item\"><\/span>\n                                    <span class=\"dx-lms-side-item\"><\/span>\n                                <\/div>\n\n                                <div class=\"dx-visual-window-body\">\n\n                                    <div class=\"dx-lms-content\">\n\n                                        <div class=\"dx-lms-heading\"><\/div>\n\n                                        <div class=\"dx-lms-stats\">\n                                            <span class=\"dx-lms-stat\"><\/span>\n                                            <span class=\"dx-lms-stat\"><\/span>\n                                            <span class=\"dx-lms-stat\"><\/span>\n                                        <\/div>\n\n                                        <div class=\"dx-lms-courses\">\n                                            <span class=\"dx-lms-course\"><\/span>\n                                            <span class=\"dx-lms-course\"><\/span>\n                                            <span class=\"dx-lms-course\"><\/span>\n                                        <\/div>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n                <!-- =================================================\n                     02 \u2014 WEBSITES\n                ================================================== -->\n\n                <article\n                    id=\"dx-service-websites\"\n                    class=\"dx-detail-card\"\n                >\n\n                    <div class=\"dx-detail-content\">\n\n                        <div class=\"dx-detail-topline\">\n\n                            <span class=\"dx-detail-number\">\n                                02\n                            <\/span>\n\n                            <span class=\"dx-detail-category\">\n                                Websites & Digital Platforms\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-detail-heading\">\n                            Website Design & Development\n                        <\/h3>\n\n                        <p class=\"dx-detail-copy\">\n                            We design and develop professional websites that\n                            reflect your brand, deliver a smooth user experience,\n                            perform well across devices, and provide a strong\n                            foundation for future growth.\n                        <\/p>\n\n                        <ul class=\"dx-detail-features\">\n\n                            <li class=\"dx-detail-feature\">\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                <span>\n                                    Custom design aligned with your brand\n                                <\/span>\n                            <\/li>\n\n                            <li class=\"dx-detail-feature\">\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                <span>\n                                    Responsive across all devices\n                                <\/span>\n                            <\/li>\n\n                            <li class=\"dx-detail-feature\">\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                <span>\n                                    Optimized performance and user experience\n                                <\/span>\n                            <\/li>\n\n                            <li class=\"dx-detail-feature\">\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                <span>\n                                    Flexible structure for future expansion\n                                <\/span>\n                            <\/li>\n\n                        <\/ul>\n\n                        <div class=\"dx-detail-action\">\n\n                            <a\n                                href=\"https:\/\/dindex.net\/en\/website-design-and-development\/\"\n                                class=\"dx-detail-button\"\n                            >\n                                <span>\n                                    Learn More\n                                <\/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                        class=\"dx-detail-visual\"\n                        aria-hidden=\"true\"\n                    >\n\n                        <div class=\"dx-detail-visual-shell\">\n\n                            <div class=\"dx-visual-window\">\n\n                                <div class=\"dx-visual-window-head\">\n\n                                    <div class=\"dx-window-dots\">\n                                        <span class=\"dx-window-dot\"><\/span>\n                                        <span class=\"dx-window-dot\"><\/span>\n                                        <span class=\"dx-window-dot\"><\/span>\n                                    <\/div>\n\n                                    <span class=\"dx-window-url\"><\/span>\n\n                                <\/div>\n\n                                <div class=\"dx-visual-window-body\">\n\n                                    <div class=\"dx-web-hero-block\">\n                                        <div class=\"dx-web-line\"><\/div>\n                                        <div class=\"dx-web-line\"><\/div>\n                                        <div class=\"dx-web-line\"><\/div>\n                                    <\/div>\n\n                                    <div class=\"dx-web-cards\">\n                                        <span class=\"dx-web-card\"><\/span>\n                                        <span class=\"dx-web-card\"><\/span>\n                                        <span class=\"dx-web-card\"><\/span>\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n                <!-- =================================================\n                     03 \u2014 MOBILE APPS\n                ================================================== -->\n\n                <article\n                    id=\"dx-service-mobile-apps\"\n                    class=\"dx-detail-card\"\n                >\n\n                    <div class=\"dx-detail-content\">\n\n                        <div class=\"dx-detail-topline\">\n\n                            <span class=\"dx-detail-number\">\n                                03\n                            <\/span>\n\n                            <span class=\"dx-detail-category\">\n                                Mobile Applications\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-detail-heading\">\n                            Mobile App Design & Development\n                        <\/h3>\n\n                        <p class=\"dx-detail-copy\">\n                            We turn your idea into a professional iOS and\n                            Android application with an intuitive interface,\n                            reliable performance, and the flexibility to\n                            connect with external systems and services.\n                        <\/p>\n\n                        <ul class=\"dx-detail-features\">\n\n                            <li class=\"dx-detail-feature\">\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                <span>\n                                    iOS and Android applications\n                                <\/span>\n                            <\/li>\n\n                            <li class=\"dx-detail-feature\">\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                <span>\n                                    Smooth and intuitive user experience\n                                <\/span>\n                            <\/li>\n\n                            <li class=\"dx-detail-feature\">\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                <span>\n                                    Admin dashboards and API integration\n                                <\/span>\n                            <\/li>\n\n                            <li class=\"dx-detail-feature\">\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                <span>\n                                    Built for future features and expansion\n                                <\/span>\n                            <\/li>\n\n                        <\/ul>\n\n                        <div class=\"dx-detail-action\">\n\n                            <a\n                                href=\"https:\/\/dindex.net\/en\/app-design-development\/\"\n                                class=\"dx-detail-button\"\n                            >\n                                <span>\n                                    Learn More\n                                <\/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                        class=\"dx-detail-visual\"\n                        aria-hidden=\"true\"\n                    >\n\n                        <div class=\"dx-detail-visual-shell\">\n\n                            <div class=\"dx-phone\">\n\n                                <div class=\"dx-phone-screen\">\n\n                                    <div class=\"dx-phone-banner\"><\/div>\n\n                                    <div class=\"dx-phone-list\">\n                                        <span class=\"dx-phone-list-item\"><\/span>\n                                        <span class=\"dx-phone-list-item\"><\/span>\n                                        <span class=\"dx-phone-list-item\"><\/span>\n                                    <\/div>\n\n                                <\/div>\n\n                                <span class=\"dx-phone-badge\">\n\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <rect\n                                            x=\"7\"\n                                            y=\"2\"\n                                            width=\"10\"\n                                            height=\"20\"\n                                            rx=\"2\"\n                                        ><\/rect>\n                                        <path d=\"M10 5h4\"><\/path>\n                                        <path d=\"M11 18h2\"><\/path>\n                                    <\/svg>\n\n                                <\/span>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n                <!-- =================================================\n                     04 \u2014 WOOCOMMERCE\n                ================================================== -->\n\n                <article\n                    id=\"dx-service-ready-stores\"\n                    class=\"dx-detail-card\"\n                >\n\n                    <div class=\"dx-detail-content\">\n\n                        <div class=\"dx-detail-topline\">\n\n                            <span class=\"dx-detail-number\">\n                                04\n                            <\/span>\n\n                            <span class=\"dx-detail-category\">\n                                E-Commerce Solutions\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-detail-heading\">\n                            WooCommerce Store Design\n                        <\/h3>\n\n                        <p class=\"dx-detail-copy\">\n                            Launch a professional online store using WordPress\n                            and WooCommerce, with product, order, payment, and\n                            shipping management organized into an easy-to-use\n                            e-commerce experience.\n                        <\/p>\n\n                        <ul class=\"dx-detail-features\">\n\n                            <li class=\"dx-detail-feature\">\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                <span>\n                                    Faster path to launching your store\n                                <\/span>\n                            <\/li>\n\n                            <li class=\"dx-detail-feature\">\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                <span>\n                                    Product and order management\n                                <\/span>\n                            <\/li>\n\n                            <li class=\"dx-detail-feature\">\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                <span>\n                                    Payment gateways and shipping options\n                                <\/span>\n                            <\/li>\n\n                            <li class=\"dx-detail-feature\">\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                <span>\n                                    Practical for startups and growing stores\n                                <\/span>\n                            <\/li>\n\n                        <\/ul>\n\n                        <div class=\"dx-detail-action\">\n\n                            <a\n                                href=\"https:\/\/dindex.net\/en\/woo-store\/\"\n                                class=\"dx-detail-button\"\n                            >\n                                <span>\n                                    Learn More\n                                <\/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                        class=\"dx-detail-visual\"\n                        aria-hidden=\"true\"\n                    >\n\n                        <div class=\"dx-detail-visual-shell\">\n\n                            <div class=\"dx-visual-window\">\n\n                                <div class=\"dx-visual-window-head\">\n\n                                    <div class=\"dx-window-dots\">\n                                        <span class=\"dx-window-dot\"><\/span>\n                                        <span class=\"dx-window-dot\"><\/span>\n                                        <span class=\"dx-window-dot\"><\/span>\n                                    <\/div>\n\n                                    <span class=\"dx-window-url\"><\/span>\n\n                                <\/div>\n\n                                <div class=\"dx-visual-window-body\">\n\n                                    <div class=\"dx-store-header\">\n\n                                        <span class=\"dx-store-icon\">\n\n                                            <svg viewBox=\"0 0 24 24\">\n                                                <path d=\"M4 9h16l-1-5H5L4 9z\"><\/path>\n                                                <path d=\"M5 9v11h14V9\"><\/path>\n                                                <path d=\"M9 20v-6h6v6\"><\/path>\n                                            <\/svg>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                    <div class=\"dx-store-products\">\n                                        <span class=\"dx-store-product\"><\/span>\n                                        <span class=\"dx-store-product\"><\/span>\n                                        <span class=\"dx-store-product\"><\/span>\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n                <!-- =================================================\n                     05 \u2014 CUSTOM E-COMMERCE\n                ================================================== -->\n\n                <article\n                    id=\"dx-service-custom-stores\"\n                    class=\"dx-detail-card\"\n                >\n\n                    <div class=\"dx-detail-content\">\n\n                        <div class=\"dx-detail-topline\">\n\n                            <span class=\"dx-detail-number\">\n                                05\n                            <\/span>\n\n                            <span class=\"dx-detail-category\">\n                                Advanced E-Commerce\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-detail-heading\">\n                            Custom E-Commerce Development\n                        <\/h3>\n\n                        <p class=\"dx-detail-copy\">\n                            We build custom online stores from the ground up\n                            around your business requirements, giving you\n                            greater control over functionality, performance,\n                            user experience, and future expansion.\n                        <\/p>\n\n                        <ul class=\"dx-detail-features\">\n\n                            <li class=\"dx-detail-feature\">\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                <span>\n                                    Fully custom development\n                                <\/span>\n                            <\/li>\n\n                            <li class=\"dx-detail-feature\">\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                <span>\n                                    Greater flexibility in features\n                                <\/span>\n                            <\/li>\n\n                            <li class=\"dx-detail-feature\">\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                <span>\n                                    More control over performance and scaling\n                                <\/span>\n                            <\/li>\n\n                            <li class=\"dx-detail-feature\">\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                <span>\n                                    Suitable for advanced requirements\n                                <\/span>\n                            <\/li>\n\n                        <\/ul>\n\n                        <div class=\"dx-detail-action\">\n\n                            <a\n                                href=\"https:\/\/dindex.net\/en\/custom-store\/\"\n                                class=\"dx-detail-button\"\n                            >\n                                <span>\n                                    Learn More\n                                <\/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                        class=\"dx-detail-visual\"\n                        aria-hidden=\"true\"\n                    >\n\n                        <div class=\"dx-detail-visual-shell\">\n\n                            <div class=\"dx-code-panel\">\n\n                                <div class=\"dx-code-head\">\n\n                                    <div class=\"dx-window-dots\">\n                                        <span class=\"dx-window-dot\"><\/span>\n                                        <span class=\"dx-window-dot\"><\/span>\n                                        <span class=\"dx-window-dot\"><\/span>\n                                    <\/div>\n\n                                <\/div>\n\n                                <div class=\"dx-code-body\">\n                                    <span class=\"dx-code-line\"><\/span>\n                                    <span class=\"dx-code-line\"><\/span>\n                                    <span class=\"dx-code-line\"><\/span>\n                                    <span class=\"dx-code-line\"><\/span>\n                                    <span class=\"dx-code-line\"><\/span>\n                                    <span class=\"dx-code-line\"><\/span>\n                                <\/div>\n\n                            <\/div>\n\n                            <span class=\"dx-code-chip\">\n                                Custom Development\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n                <!-- =================================================\n                     06 \u2014 DIGITAL TRANSFORMATION\n                ================================================== -->\n\n                <article\n                    id=\"dx-service-digital-transformation\"\n                    class=\"dx-detail-card\"\n                >\n\n                    <div class=\"dx-detail-content\">\n\n                        <div class=\"dx-detail-topline\">\n\n                            <span class=\"dx-detail-number\">\n                                06\n                            <\/span>\n\n                            <span class=\"dx-detail-category\">\n                                Smart Solutions & Automation\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-detail-heading\">\n                            Smart Digital Transformation\n                        <\/h3>\n\n                        <p class=\"dx-detail-copy\">\n                            We help businesses modernize operations through\n                            integrated digital solutions covering process\n                            automation, artificial intelligence, knowledge\n                            engineering, and connected systems.\n                        <\/p>\n\n                        <ul class=\"dx-detail-features\">\n\n                            <li class=\"dx-detail-feature\">\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                <span>\n                                    Process and workflow automation\n                                <\/span>\n                            <\/li>\n\n                            <li class=\"dx-detail-feature\">\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                <span>\n                                    Artificial intelligence solutions\n                                <\/span>\n                            <\/li>\n\n                            <li class=\"dx-detail-feature\">\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                <span>\n                                    Knowledge engineering and machine learning\n                                <\/span>\n                            <\/li>\n\n                            <li class=\"dx-detail-feature\">\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n                                <span>\n                                    System integration and efficiency improvement\n                                <\/span>\n                            <\/li>\n\n                        <\/ul>\n\n                        <div class=\"dx-detail-action\">\n\n                            <a\n                                href=\"https:\/\/dindex.net\/en\/smart-digital-transformation\/\"\n                                class=\"dx-detail-button\"\n                            >\n                                <span>\n                                    Learn More\n                                <\/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                        class=\"dx-detail-visual\"\n                        aria-hidden=\"true\"\n                    >\n\n                        <div class=\"dx-detail-visual-shell\">\n\n                            <div class=\"dx-digital-core\">\n\n                                <svg viewBox=\"0 0 24 24\">\n                                    <circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle>\n                                    <path d=\"M12 2v4\"><\/path>\n                                    <path d=\"M12 18v4\"><\/path>\n                                    <path d=\"M2 12h4\"><\/path>\n                                    <path d=\"M18 12h4\"><\/path>\n                                    <path d=\"m4.9 4.9 2.8 2.8\"><\/path>\n                                    <path d=\"m16.3 16.3 2.8 2.8\"><\/path>\n                                    <path d=\"m19.1 4.9-2.8 2.8\"><\/path>\n                                    <path d=\"m7.7 16.3-2.8 2.8\"><\/path>\n                                <\/svg>\n\n                            <\/div>\n\n                            <span class=\"dx-digital-node dx-digital-node-one\">\n\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M4 5h16v14H4z\"><\/path>\n                                    <path d=\"M4 9h16\"><\/path>\n                                    <path d=\"M8 13h8\"><\/path>\n                                    <path d=\"M8 16h5\"><\/path>\n                                <\/svg>\n\n                            <\/span>\n\n                            <span class=\"dx-digital-node dx-digital-node-two\">\n\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M12 3c-5 0-9 4-9 9 0 3 2 5 5 5h1c1 0 2 1 2 2s1 2 2 2c5 0 8-4 8-9 0-5-4-9-9-9z\"><\/path>\n                                    <circle cx=\"8\" cy=\"10\" r=\"1\"><\/circle>\n                                    <circle cx=\"12\" cy=\"7\" r=\"1\"><\/circle>\n                                    <circle cx=\"16\" cy=\"10\" r=\"1\"><\/circle>\n                                <\/svg>\n\n                            <\/span>\n\n                            <span class=\"dx-digital-node dx-digital-node-three\">\n\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M7 18a4 4 0 0 1 .5-8A6 6 0 0 1 19 12a3 3 0 0 1-1 6H7z\"><\/path>\n                                    <path d=\"m9 15 3-3 3 3\"><\/path>\n                                    <path d=\"M12 12v8\"><\/path>\n                                <\/svg>\n\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n                <!-- =================================================\n                     07 \u2014 SOCIAL MEDIA MANAGEMENT\n                ================================================== -->\n\n                <article\n                    id=\"dx-service-social-media\"\n                    class=\"dx-detail-card\"\n                >\n\n                    <div class=\"dx-detail-content\">\n\n                        <div class=\"dx-detail-topline\">\n\n                            <span class=\"dx-detail-number\">\n                                07\n                            <\/span>\n\n                            <span class=\"dx-detail-category\">\n                                Digital Marketing & Online Presence\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-detail-heading\">\n                            Social Media Management\n                        <\/h3>\n\n                        <p class=\"dx-detail-copy\">\n                            We manage your brand\u2019s social media presence\n                            through structured content planning, copywriting,\n                            creative design, publishing, engagement management,\n                            and performance analysis for a more consistent and\n                            professional digital presence.\n                        <\/p>\n\n                        <ul class=\"dx-detail-features\">\n\n                            <li class=\"dx-detail-feature\">\n\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                                <span>\n                                    Monthly content strategy and planning\n                                <\/span>\n\n                            <\/li>\n\n                            <li class=\"dx-detail-feature\">\n\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                                <span>\n                                    Copywriting and creative design\n                                <\/span>\n\n                            <\/li>\n\n                            <li class=\"dx-detail-feature\">\n\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                                <span>\n                                    Scheduling, publishing, and engagement\n                                <\/span>\n\n                            <\/li>\n\n                            <li class=\"dx-detail-feature\">\n\n                                <span class=\"dx-detail-feature-icon\">\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                                <span>\n                                    Performance reports and analysis\n                                <\/span>\n\n                            <\/li>\n\n                        <\/ul>\n\n                        <div class=\"dx-detail-action\">\n\n                            <a\n                                href=\"https:\/\/dindex.net\/en\/social-media\/\"\n                                class=\"dx-detail-button\"\n                            >\n                                <span>\n                                    Learn More\n                                <\/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\n                            <\/a>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <div\n                        class=\"dx-detail-visual\"\n                        aria-hidden=\"true\"\n                    >\n\n                        <div class=\"dx-detail-visual-shell\">\n\n                            <div class=\"dx-social-visual\">\n\n                                <div class=\"dx-social-screen\">\n\n                                    <div class=\"dx-social-screen-head\">\n\n                                        <span class=\"dx-social-avatar\"><\/span>\n\n                                        <div class=\"dx-social-account-lines\">\n                                            <span><\/span>\n                                            <span><\/span>\n                                        <\/div>\n\n                                        <span class=\"dx-social-menu-dot\"><\/span>\n\n                                    <\/div>\n\n                                    <div class=\"dx-social-post\">\n\n                                        <div class=\"dx-social-post-gradient\">\n\n                                            <span class=\"dx-social-post-icon\">\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\n                                            <\/span>\n\n                                        <\/div>\n\n                                    <\/div>\n\n                                    <div class=\"dx-social-actions\">\n\n                                        <span>\n                                            <svg viewBox=\"0 0 24 24\">\n                                                <path d=\"M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.9-8.6a5.5 5.5 0 0 0-.1-7.8z\"><\/path>\n                                            <\/svg>\n                                        <\/span>\n\n                                        <span>\n                                            <svg viewBox=\"0 0 24 24\">\n                                                <path d=\"M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z\"><\/path>\n                                            <\/svg>\n                                        <\/span>\n\n                                        <span>\n                                            <svg viewBox=\"0 0 24 24\">\n                                                <path d=\"m22 2-7 20-4-9-9-4Z\"><\/path>\n                                                <path d=\"M22 2 11 13\"><\/path>\n                                            <\/svg>\n                                        <\/span>\n\n                                    <\/div>\n\n                                    <div class=\"dx-social-copy-lines\">\n                                        <span><\/span>\n                                        <span><\/span>\n                                        <span><\/span>\n                                    <\/div>\n\n                                <\/div>\n\n                                <span\n                                    class=\"dx-social-floating dx-social-floating-one\"\n                                >\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\n                                <\/span>\n\n                                <span\n                                    class=\"dx-social-floating dx-social-floating-two\"\n                                >\n\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <rect\n                                            x=\"4\"\n                                            y=\"5\"\n                                            width=\"16\"\n                                            height=\"15\"\n                                            rx=\"3\"\n                                        ><\/rect>\n                                        <path d=\"M8 3v4\"><\/path>\n                                        <path d=\"M16 3v4\"><\/path>\n                                        <path d=\"M4 10h16\"><\/path>\n                                    <\/svg>\n\n                                <\/span>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxServicesDetails() {\n\n        const section =\n            document.getElementById(\n                \"dx-services-details\"\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-services-details-widget-fullwidth\"\n            );\n        }\n\n        const hash =\n            window.location.hash;\n\n        if (\n            hash &&\n            hash.indexOf(\"#dx-service-\") === 0\n        ) {\n\n            window.setTimeout(\n                function () {\n\n                    const target =\n                        document.querySelector(\n                            hash\n                        );\n\n                    if (target) {\n\n                        target.scrollIntoView({\n                            behavior: \"smooth\",\n                            block: \"start\"\n                        });\n                    }\n\n                },\n                250\n            );\n        }\n    }\n\n    if (\n        document.readyState === \"loading\"\n    ) {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxServicesDetails\n        );\n\n    } else {\n\n        initDxServicesDetails();\n\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-01830e5 e-flex e-con-boxed e-con e-parent\" data-id=\"01830e5\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ff36346 elementor-widget elementor-widget-html\" data-id=\"ff36346\" 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     SERVICES PAGE \u2014 WHY CHOOSE US SECTION\n     Author: Mohamed El-Sehemy\n     English LTR - Elementor Compatible\n========================================================== -->\n\n<style>\n\/* =========================================================\n   ELEMENTOR FULL WIDTH\n========================================================= *\/\n\n.elementor-widget-html:has(#dx-services-why-us),\n.elementor-widget-html:has(#dx-services-why-us)\n    > .elementor-widget-container,\n.dx-services-why-us-widget-fullwidth,\n.dx-services-why-us-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-services-why-us,\n#dx-services-why-us *,\n#dx-services-why-us *::before,\n#dx-services-why-us *::after {\n    box-sizing: border-box;\n}\n\n#dx-services-why-us {\n    --dx-why-bg: #0b0222;\n    --dx-why-bg-light: #17063c;\n    --dx-why-white: #ffffff;\n    --dx-why-text: rgba(255,255,255,.76);\n    --dx-why-muted: rgba(255,255,255,.62);\n    --dx-why-purple: #6942d8;\n    --dx-why-purple-light: #9168ef;\n    --dx-why-yellow: #ffc441;\n    --dx-why-border: rgba(255,255,255,.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    color: var(--dx-why-white);\n\n    background:\n        radial-gradient(\n            circle at 88% 18%,\n            rgba(145,104,239,.23),\n            transparent 30%\n        ),\n        radial-gradient(\n            circle at 12% 82%,\n            rgba(105,66,216,.21),\n            transparent 32%\n        ),\n        linear-gradient(\n            215deg,\n            var(--dx-why-bg-light),\n            var(--dx-why-bg)\n        );\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-services-why-us a {\n    color: inherit;\n    text-decoration: none;\n}\n\n\/* =========================================================\n   BACKGROUND DECORATIONS\n========================================================= *\/\n\n#dx-services-why-us .dx-why-grid-bg {\n    position: absolute;\n    z-index: -5;\n    inset: 0;\n\n    opacity: .11;\n\n    background-image:\n        linear-gradient(\n            rgba(255,255,255,.045) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(255,255,255,.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 20%,\n            transparent 78%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 20%,\n            transparent 78%\n        );\n\n    pointer-events: none;\n}\n\n#dx-services-why-us .dx-why-orbit {\n    position: absolute;\n    z-index: -3;\n\n    border:\n        1px solid rgba(255,255,255,.08);\n\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-services-why-us .dx-why-orbit-one {\n    top: -250px;\n    left: -220px;\n\n    width: 520px;\n    height: 520px;\n}\n\n#dx-services-why-us .dx-why-orbit-two {\n    right: -250px;\n    bottom: -270px;\n\n    width: 550px;\n    height: 550px;\n}\n\n#dx-services-why-us .dx-why-dots {\n    position: absolute;\n    z-index: -2;\n\n    width: 120px;\n    height: 120px;\n\n    opacity: .22;\n\n    background-image:\n        radial-gradient(\n            circle,\n            var(--dx-why-purple-light) 2px,\n            transparent 2.7px\n        );\n\n    background-size: 17px 17px;\n\n    pointer-events: none;\n}\n\n#dx-services-why-us .dx-why-dots-one {\n    top: 75px;\n    right: 4%;\n}\n\n#dx-services-why-us .dx-why-dots-two {\n    left: 4%;\n    bottom: 65px;\n}\n\n\/* =========================================================\n   SECTION LAYOUT\n========================================================= *\/\n\n#dx-services-why-us .dx-why-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-services-why-us .dx-why-container {\n    width: min(1450px,100%);\n\n    margin: 0 auto;\n}\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n#dx-services-why-us .dx-why-header {\n    max-width: 790px;\n\n    margin:\n        0\n        auto\n        50px;\n\n    text-align: center;\n}\n\n#dx-services-why-us .dx-why-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:\n        var(--dx-why-yellow);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-services-why-us .dx-why-eyebrow::before,\n#dx-services-why-us .dx-why-eyebrow::after {\n    content: \"\";\n\n    width: 32px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-why-yellow),\n            var(--dx-why-purple-light)\n        );\n}\n\n#dx-services-why-us .dx-why-title {\n    margin: 0;\n\n    color:\n        var(--dx-why-white);\n\n    font-size:\n        clamp(\n            36px,\n            4vw,\n            58px\n        );\n\n    font-weight: 900;\n    line-height: 1.2;\n    letter-spacing: -.6px;\n\n    text-wrap: balance;\n}\n\n#dx-services-why-us .dx-why-title span {\n    color:\n        var(--dx-why-yellow);\n}\n\n#dx-services-why-us .dx-why-description {\n    max-width: 690px;\n\n    margin:\n        15px\n        auto\n        0;\n\n    color:\n        var(--dx-why-text);\n\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 1.8;\n}\n\n\/* =========================================================\n   GRID\n========================================================= *\/\n\n#dx-services-why-us .dx-why-grid {\n    display: grid;\n\n    grid-template-columns:\n        repeat(4,minmax(0,1fr));\n\n    gap: 20px;\n}\n\n\/* =========================================================\n   CARD\n========================================================= *\/\n\n#dx-services-why-us .dx-why-card {\n    position: relative;\n    isolation: isolate;\n\n    min-width: 0;\n    min-height: 310px;\n\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n\n    padding:\n        29px\n        24px\n        25px;\n\n    overflow: hidden;\n\n    border:\n        1px solid var(--dx-why-border);\n\n    border-radius: 24px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255,255,255,.09),\n            rgba(255,255,255,.035)\n        );\n\n    box-shadow:\n        0 25px 65px rgba(2,0,20,.28),\n        inset 0 1px 0 rgba(255,255,255,.08);\n\n    -webkit-backdrop-filter:\n        blur(12px);\n\n    backdrop-filter:\n        blur(12px);\n\n    transition:\n        transform .35s ease,\n        border-color .35s ease,\n        background .35s ease,\n        box-shadow .35s ease;\n}\n\n#dx-services-why-us .dx-why-card::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    top: -120px;\n    left: -90px;\n\n    width: 250px;\n    height: 250px;\n\n    border-radius: 50%;\n\n    background:\n        rgba(145,104,239,.20);\n\n    filter: blur(60px);\n\n    opacity: .75;\n\n    pointer-events: none;\n}\n\n#dx-services-why-us .dx-why-card:nth-child(even)::before {\n    background:\n        rgba(255,196,65,.11);\n}\n\n#dx-services-why-us .dx-why-card::after {\n    content: \"\";\n\n    position: absolute;\n\n    left: 24px;\n    bottom: 0;\n\n    width:\n        calc(100% - 48px);\n\n    height: 3px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            transparent,\n            var(--dx-why-yellow),\n            transparent\n        );\n\n    opacity: 0;\n\n    transition:\n        opacity .35s ease;\n}\n\n#dx-services-why-us .dx-why-card:hover,\n#dx-services-why-us .dx-why-card:focus-within {\n    border-color:\n        rgba(145,104,239,.52);\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(105,66,216,.24),\n            rgba(255,255,255,.045)\n        );\n\n    box-shadow:\n        0 36px 82px rgba(2,0,20,.38),\n        inset 0 1px 0 rgba(255,255,255,.12);\n\n    transform:\n        translateY(-8px);\n}\n\n#dx-services-why-us .dx-why-card:hover::after,\n#dx-services-why-us .dx-why-card:focus-within::after {\n    opacity: 1;\n}\n\n\/* =========================================================\n   CARD TOP\n========================================================= *\/\n\n#dx-services-why-us .dx-why-card-top {\n    width: 100%;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    gap: 15px;\n}\n\n#dx-services-why-us .dx-why-icon {\n    width: 64px;\n    height: 64px;\n    flex: 0 0 64px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border:\n        1px solid rgba(145,104,239,.35);\n\n    border-radius: 19px;\n\n    color:\n        var(--dx-why-white);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-why-purple),\n            var(--dx-why-purple-light)\n        );\n\n    box-shadow:\n        0 17px 35px rgba(105,66,216,.27);\n\n    transition:\n        color .3s ease,\n        transform .3s ease,\n        background .3s ease;\n}\n\n#dx-services-why-us .dx-why-card:nth-child(even)\n.dx-why-icon {\n    color: #180b35;\n\n    border-color:\n        rgba(255,255,255,.20);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-why-yellow),\n            #ffd66e\n        );\n\n    box-shadow:\n        0 17px 35px rgba(255,196,65,.21);\n}\n\n#dx-services-why-us .dx-why-card:hover\n.dx-why-icon {\n    transform:\n        translateY(-4px)\n        rotate(5deg);\n}\n\n#dx-services-why-us .dx-why-icon 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-services-why-us .dx-why-number {\n    color:\n        rgba(255,255,255,.18);\n\n    font-size: 33px;\n    font-weight: 900;\n    line-height: 1;\n}\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n#dx-services-why-us .dx-why-card-title {\n    margin:\n        24px\n        0\n        0;\n\n    color:\n        var(--dx-why-white);\n\n    font-size: 23px;\n    font-weight: 900;\n    line-height: 1.35;\n\n    text-wrap: balance;\n}\n\n#dx-services-why-us .dx-why-card-description {\n    margin:\n        11px\n        0\n        0;\n\n    color:\n        var(--dx-why-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.75;\n}\n\n\/* =========================================================\n   CARD FOOTER\n========================================================= *\/\n\n#dx-services-why-us .dx-why-card-footer {\n    margin-top: auto;\n\n    padding-top: 22px;\n\n    display: inline-flex;\n    align-items: center;\n\n    gap: 8px;\n\n    color:\n        var(--dx-why-muted);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.5;\n}\n\n#dx-services-why-us .dx-why-card-footer::before {\n    content: \"\";\n\n    width: 7px;\n    height: 7px;\n    flex: 0 0 7px;\n\n    border-radius: 50%;\n\n    background:\n        var(--dx-why-yellow);\n\n    box-shadow:\n        0 0 0 5px rgba(255,196,65,.11);\n}\n\n\/* =========================================================\n   BOTTOM STRIP\n========================================================= *\/\n\n#dx-services-why-us .dx-why-bottom {\n    margin-top: 30px;\n\n    display: grid;\n\n    grid-template-columns:\n        minmax(0,1fr)\n        auto;\n\n    align-items: center;\n\n    gap: 25px;\n\n    padding:\n        26px\n        28px;\n\n    border:\n        1px solid rgba(255,255,255,.12);\n\n    border-radius: 20px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255,255,255,.08),\n            rgba(255,255,255,.03)\n        );\n\n    box-shadow:\n        0 20px 48px rgba(2,0,20,.22),\n        inset 0 1px 0 rgba(255,255,255,.07);\n}\n\n#dx-services-why-us .dx-why-bottom-content {\n    min-width: 0;\n}\n\n#dx-services-why-us .dx-why-bottom-title {\n    margin: 0;\n\n    color:\n        var(--dx-why-white);\n\n    font-size: 21px;\n    font-weight: 900;\n    line-height: 1.4;\n}\n\n#dx-services-why-us .dx-why-bottom-text {\n    margin:\n        6px\n        0\n        0;\n\n    color:\n        var(--dx-why-muted);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.75;\n}\n\n#dx-services-why-us .dx-why-button {\n    min-width: 205px;\n    min-height: 53px;\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:\n        1px solid rgba(255,255,255,.23);\n\n    border-radius: 12px;\n\n    color: #180b35;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-why-yellow),\n            #ffd66e\n        );\n\n    box-shadow:\n        0 16px 35px rgba(255,196,65,.20);\n\n    font-size: 14px;\n    font-weight: 900;\n    white-space: nowrap;\n\n    transition:\n        transform .25s ease,\n        box-shadow .25s ease;\n}\n\n#dx-services-why-us .dx-why-button:hover,\n#dx-services-why-us .dx-why-button:focus-visible {\n    transform:\n        translateY(-3px);\n\n    box-shadow:\n        0 22px 46px rgba(255,196,65,.30);\n}\n\n#dx-services-why-us .dx-why-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   LARGE TABLET\n========================================================= *\/\n\n@media (max-width:1100px) {\n\n    #dx-services-why-us .dx-why-grid {\n        grid-template-columns:\n            repeat(2,minmax(0,1fr));\n    }\n\n    #dx-services-why-us .dx-why-card {\n        min-height: 285px;\n    }\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width:800px) {\n\n    #dx-services-why-us .dx-why-main {\n        padding:\n            78px\n            28px\n            84px;\n    }\n\n    #dx-services-why-us .dx-why-bottom {\n        grid-template-columns: 1fr;\n\n        text-align: center;\n    }\n\n    #dx-services-why-us .dx-why-button {\n        justify-self: center;\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width:600px) {\n\n    #dx-services-why-us .dx-why-main {\n        padding:\n            62px\n            16px\n            68px;\n    }\n\n    #dx-services-why-us .dx-why-header {\n        margin-bottom: 34px;\n    }\n\n    #dx-services-why-us .dx-why-eyebrow {\n        font-size: 14px;\n    }\n\n    #dx-services-why-us .dx-why-eyebrow::before,\n    #dx-services-why-us .dx-why-eyebrow::after {\n        width: 23px;\n    }\n\n    #dx-services-why-us .dx-why-title {\n        font-size:\n            clamp(\n                29px,\n                9vw,\n                40px\n            );\n\n        line-height: 1.25;\n    }\n\n    #dx-services-why-us .dx-why-description {\n        margin-top: 11px;\n\n        font-size: 14px;\n        line-height: 1.75;\n    }\n\n    #dx-services-why-us .dx-why-grid {\n        grid-template-columns: 1fr;\n\n        gap: 15px;\n    }\n\n    #dx-services-why-us .dx-why-card {\n        min-height: 0;\n\n        display: grid;\n\n        grid-template-columns:\n            58px\n            minmax(0,1fr);\n\n        grid-template-areas:\n            \"icon title\"\n            \"icon description\"\n            \"footer footer\";\n\n        align-items: start;\n\n        gap:\n            7px\n            15px;\n\n        padding:\n            21px\n            18px;\n\n        border-radius: 20px;\n    }\n\n    #dx-services-why-us .dx-why-card-top {\n        display: contents;\n    }\n\n    #dx-services-why-us .dx-why-icon {\n        grid-area: icon;\n\n        width: 55px;\n        height: 55px;\n        flex-basis: 55px;\n\n        border-radius: 16px;\n    }\n\n    #dx-services-why-us .dx-why-icon svg {\n        width: 27px;\n        height: 27px;\n    }\n\n    #dx-services-why-us .dx-why-number {\n        display: none;\n    }\n\n    #dx-services-why-us .dx-why-card-title {\n        grid-area: title;\n\n        margin: 0;\n\n        font-size: 19px;\n        line-height: 1.35;\n    }\n\n    #dx-services-why-us .dx-why-card-description {\n        grid-area: description;\n\n        margin: 0;\n\n        font-size: 14px;\n        line-height: 1.7;\n    }\n\n    #dx-services-why-us .dx-why-card-footer {\n        grid-area: footer;\n\n        margin-top: 10px;\n        padding-top: 0;\n\n        font-size: 14px;\n    }\n\n    #dx-services-why-us .dx-why-bottom {\n        margin-top: 18px;\n\n        padding:\n            22px\n            18px;\n\n        border-radius: 18px;\n    }\n\n    #dx-services-why-us .dx-why-bottom-title {\n        font-size: 19px;\n    }\n\n    #dx-services-why-us .dx-why-bottom-text {\n        font-size: 14px;\n    }\n\n    #dx-services-why-us .dx-why-button {\n        width: 100%;\n        min-width: 0;\n\n        font-size: 14px;\n    }\n\n    #dx-services-why-us .dx-why-dots {\n        display: none;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-services-why-us a:focus-visible {\n    outline:\n        3px solid var(--dx-why-yellow);\n\n    outline-offset: 4px;\n}\n\n@media (prefers-reduced-motion:reduce) {\n\n    #dx-services-why-us *,\n    #dx-services-why-us *::before,\n    #dx-services-why-us *::after {\n        animation-duration:\n            .01ms !important;\n\n        animation-iteration-count:\n            1 !important;\n\n        transition-duration:\n            .01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-services-why-us\"\n    aria-labelledby=\"dx-services-why-us-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n\n    <div\n        class=\"dx-why-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <span\n        class=\"dx-why-orbit dx-why-orbit-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-why-orbit dx-why-orbit-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-why-dots dx-why-dots-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-why-dots dx-why-dots-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-why-main\">\n\n        <div class=\"dx-why-container\">\n\n            <header class=\"dx-why-header\">\n\n                <span class=\"dx-why-eyebrow\">\n                    Why Choose Us\n                <\/span>\n\n                <h2\n                    id=\"dx-services-why-us-title\"\n                    class=\"dx-why-title\"\n                >\n                    A Digital Partner for Building\n                    <span>Stronger, Sustainable Solutions<\/span>\n                <\/h2>\n\n                <p class=\"dx-why-description\">\n                    We do not offer the same solution to every business.\n                    We start by understanding your project, then build a\n                    digital experience around your current needs and\n                    future plans.\n                <\/p>\n\n            <\/header>\n\n            <div class=\"dx-why-grid\">\n\n                <!-- CARD 01 -->\n\n                <article class=\"dx-why-card\">\n\n                    <div class=\"dx-why-card-top\">\n\n                        <span\n                            class=\"dx-why-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M4 5h16v14H4z\"><\/path>\n                                <path d=\"M4 9h16\"><\/path>\n                                <path d=\"M8 13h8\"><\/path>\n                                <path d=\"M8 16h5\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"dx-why-number\">\n                            01\n                        <\/span>\n\n                    <\/div>\n\n                    <h3 class=\"dx-why-card-title\">\n                        Solutions Tailored to Your Needs\n                    <\/h3>\n\n                    <p class=\"dx-why-card-description\">\n                        We define your project requirements first, then\n                        build the right solution instead of relying on a\n                        one-size-fits-all approach.\n                    <\/p>\n\n                    <span class=\"dx-why-card-footer\">\n                        Deeper Project Understanding\n                    <\/span>\n\n                <\/article>\n\n                <!-- CARD 02 -->\n\n                <article class=\"dx-why-card\">\n\n                    <div class=\"dx-why-card-top\">\n\n                        <span\n                            class=\"dx-why-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle>\n                                <path d=\"M12 2v4\"><\/path>\n                                <path d=\"M12 18v4\"><\/path>\n                                <path d=\"M2 12h4\"><\/path>\n                                <path d=\"M18 12h4\"><\/path>\n                                <path d=\"m4.9 4.9 2.8 2.8\"><\/path>\n                                <path d=\"m16.3 16.3 2.8 2.8\"><\/path>\n                                <path d=\"m19.1 4.9-2.8 2.8\"><\/path>\n                                <path d=\"m7.7 16.3-2.8 2.8\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"dx-why-number\">\n                            02\n                        <\/span>\n\n                    <\/div>\n\n                    <h3 class=\"dx-why-card-title\">\n                        Professional Design & User Experience\n                    <\/h3>\n\n                    <p class=\"dx-why-card-description\">\n                        We focus on both visual quality and usability,\n                        creating clear and intuitive experiences across\n                        desktop, tablet, and mobile devices.\n                    <\/p>\n\n                    <span class=\"dx-why-card-footer\">\n                        Clearer User Experience\n                    <\/span>\n\n                <\/article>\n\n                <!-- CARD 03 -->\n\n                <article class=\"dx-why-card\">\n\n                    <div class=\"dx-why-card-top\">\n\n                        <span\n                            class=\"dx-why-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-why-number\">\n                            03\n                        <\/span>\n\n                    <\/div>\n\n                    <h3 class=\"dx-why-card-title\">\n                        Scalable Technology\n                    <\/h3>\n\n                    <p class=\"dx-why-card-description\">\n                        We build solutions that can support new features,\n                        integrations, and future requirements as your\n                        project evolves and grows.\n                    <\/p>\n\n                    <span class=\"dx-why-card-footer\">\n                        Ready for Future Growth\n                    <\/span>\n\n                <\/article>\n\n                <!-- CARD 04 -->\n\n                <article class=\"dx-why-card\">\n\n                    <div class=\"dx-why-card-top\">\n\n                        <span\n                            class=\"dx-why-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M4 12a8 8 0 0 1 16 0\"><\/path>\n                                <path d=\"M4 12v5h3v-5H4z\"><\/path>\n                                <path d=\"M17 12v5h3v-5h-3z\"><\/path>\n                                <path d=\"M17 19c-1 1-2 2-5 2\"><\/path>\n                                <path d=\"M12 21h-2\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"dx-why-number\">\n                            04\n                        <\/span>\n\n                    <\/div>\n\n                    <h3 class=\"dx-why-card-title\">\n                        Support After Launch\n                    <\/h3>\n\n                    <p class=\"dx-why-card-description\">\n                        Our relationship does not end at delivery. We\n                        continue to support your project and help address\n                        needs that appear after the solution goes live.\n                    <\/p>\n\n                    <span class=\"dx-why-card-footer\">\n                        Ongoing Partnership\n                    <\/span>\n\n                <\/article>\n\n            <\/div>\n\n            <div class=\"dx-why-bottom\">\n\n                <div class=\"dx-why-bottom-content\">\n\n                    <h3 class=\"dx-why-bottom-title\">\n                        Looking for a Partner Who Understands Your Project Before Development Begins?\n                    <\/h3>\n\n                    <p class=\"dx-why-bottom-text\">\n                        Tell us about your idea and business goals, and\n                        we\u2019ll help you identify the right solution and\n                        the next steps for your digital project.\n                    <\/p>\n\n                <\/div>\n\n                <a\n                    href=\"https:\/\/dindex.net\/en\/contact\/\"\n                    class=\"dx-why-button\"\n                >\n                    <span>\n                        Discuss Your Project\n                    <\/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\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 initDxServicesWhyUs() {\n\n        const section =\n            document.getElementById(\n                \"dx-services-why-us\"\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-services-why-us-widget-fullwidth\"\n            );\n        }\n\n        const reduceMotion =\n            window.matchMedia(\n                \"(prefers-reduced-motion: reduce)\"\n            ).matches;\n\n        if (\n            reduceMotion ||\n            !(\"IntersectionObserver\" in window)\n        ) {\n            return;\n        }\n\n        const cards =\n            section.querySelectorAll(\n                \".dx-why-card\"\n            );\n\n        cards.forEach(\n            function (card,index) {\n\n                card.style.opacity = \"0\";\n\n                card.style.transform =\n                    \"translateY(26px)\";\n\n                card.style.transition =\n                    \"opacity .6s ease \" +\n                    index * .1 +\n                    \"s, transform .6s ease \" +\n                    index * .1 +\n                    \"s\";\n            }\n        );\n\n        const observer =\n            new IntersectionObserver(\n                function (\n                    entries,\n                    currentObserver\n                ) {\n\n                    entries.forEach(\n                        function (entry) {\n\n                            if (\n                                !entry.isIntersecting\n                            ) {\n                                return;\n                            }\n\n                            entry.target.style.opacity =\n                                \"1\";\n\n                            entry.target.style.transform =\n                                \"translateY(0)\";\n\n                            currentObserver.unobserve(\n                                entry.target\n                            );\n\n                        }\n                    );\n\n                },\n                {\n                    threshold: .14\n                }\n            );\n\n        cards.forEach(\n            function (card) {\n                observer.observe(card);\n            }\n        );\n    }\n\n    if (\n        document.readyState === \"loading\"\n    ) {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxServicesWhyUs\n        );\n\n    } else {\n\n        initDxServicesWhyUs();\n\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-112cd61 e-flex e-con-boxed e-con e-parent\" data-id=\"112cd61\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5fcc4fd elementor-widget elementor-widget-html\" data-id=\"5fcc4fd\" 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     SERVICES PAGE \u2014 FINAL CTA SECTION\n     Author: Mohamed El-Sehemy\n     English LTR - Elementor Compatible\n========================================================== -->\n\n<style>\n\/* =========================================================\n   ELEMENTOR FULL WIDTH\n========================================================= *\/\n\n.elementor-widget-html:has(#dx-services-final-cta),\n.elementor-widget-html:has(#dx-services-final-cta)\n    > .elementor-widget-container,\n.dx-services-final-cta-widget-fullwidth,\n.dx-services-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-services-final-cta,\n#dx-services-final-cta *,\n#dx-services-final-cta *::before,\n#dx-services-final-cta *::after {\n    box-sizing: border-box;\n}\n\n#dx-services-final-cta {\n    --dx-final-bg: #f4f1fa;\n    --dx-final-white: #ffffff;\n    --dx-final-dark: #160a31;\n    --dx-final-text: #685f76;\n    --dx-final-muted: #8d8598;\n    --dx-final-purple: #6942d8;\n    --dx-final-purple-light: #9168ef;\n    --dx-final-yellow: #ffc441;\n    --dx-final-border: rgba(105,66,216,.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\n    direction: ltr;\n    color: var(--dx-final-dark);\n\n    background:\n        radial-gradient(\n            circle at 92% 20%,\n            rgba(105,66,216,.08),\n            transparent 25%\n        ),\n        radial-gradient(\n            circle at 8% 80%,\n            rgba(145,104,239,.08),\n            transparent 26%\n        ),\n        var(--dx-final-bg);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-services-final-cta a {\n    color: inherit;\n    text-decoration: none;\n}\n\n\/* =========================================================\n   SECTION LAYOUT\n========================================================= *\/\n\n#dx-services-final-cta .dx-final-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        66px\n        clamp(20px,5vw,90px)\n        72px;\n}\n\n#dx-services-final-cta .dx-final-container {\n    width: min(1450px,100%);\n\n    margin: 0 auto;\n}\n\n\/* =========================================================\n   BACKGROUND ELEMENTS\n========================================================= *\/\n\n#dx-services-final-cta .dx-final-grid-bg {\n    position: absolute;\n    z-index: -5;\n\n    inset: 0;\n\n    opacity: .16;\n\n    background-image:\n        linear-gradient(\n            rgba(105,66,216,.04) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(105,66,216,.04) 1px,\n            transparent 1px\n        );\n\n    background-size: 70px 70px;\n\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 18%,\n            transparent 78%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 18%,\n            transparent 78%\n        );\n\n    pointer-events: none;\n}\n\n#dx-services-final-cta .dx-final-orbit {\n    position: absolute;\n    z-index: -3;\n\n    border:\n        1px solid rgba(105,66,216,.10);\n\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-services-final-cta .dx-final-orbit-one {\n    top: -220px;\n    left: -210px;\n\n    width: 450px;\n    height: 450px;\n}\n\n#dx-services-final-cta .dx-final-orbit-two {\n    right: -220px;\n    bottom: -240px;\n\n    width: 470px;\n    height: 470px;\n}\n\n\/* =========================================================\n   CTA CARD\n========================================================= *\/\n\n#dx-services-final-cta .dx-final-box {\n    position: relative;\n    isolation: isolate;\n\n    min-height: 350px;\n\n    display: grid;\n\n    grid-template-columns:\n        minmax(0,1.18fr)\n        minmax(300px,.82fr);\n\n    align-items: center;\n\n    gap:\n        clamp(\n            35px,\n            5vw,\n            70px\n        );\n\n    padding:\n        clamp(\n            38px,\n            5vw,\n            62px\n        );\n\n    overflow: hidden;\n\n    border:\n        1px solid var(--dx-final-border);\n\n    border-radius: 30px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255,255,255,.99),\n            rgba(250,248,255,.97)\n        );\n\n    box-shadow:\n        0 28px 75px rgba(40,18,84,.12);\n\n    transition:\n        transform .35s ease,\n        border-color .35s ease,\n        box-shadow .35s ease;\n}\n\n#dx-services-final-cta .dx-final-box:hover {\n    border-color:\n        rgba(105,66,216,.28);\n\n    box-shadow:\n        0 37px 88px rgba(40,18,84,.17);\n\n    transform:\n        translateY(-4px);\n}\n\n#dx-services-final-cta .dx-final-box::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -3;\n\n    top: -190px;\n    right: -140px;\n\n    width: 390px;\n    height: 390px;\n\n    border-radius: 50%;\n\n    background:\n        rgba(105,66,216,.10);\n\n    filter:\n        blur(80px);\n\n    pointer-events: none;\n}\n\n#dx-services-final-cta .dx-final-box::after {\n    content: \"\";\n\n    position: absolute;\n    z-index: 1;\n\n    top: 0;\n    left: 0;\n\n    width: 8px;\n    height: 100%;\n\n    background:\n        linear-gradient(\n            to bottom,\n            var(--dx-final-yellow),\n            var(--dx-final-purple-light),\n            var(--dx-final-purple)\n        );\n}\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n#dx-services-final-cta .dx-final-content {\n    position: relative;\n    z-index: 4;\n\n    min-width: 0;\n    max-width: 760px;\n}\n\n#dx-services-final-cta .dx-final-eyebrow {\n    display: inline-flex;\n    align-items: center;\n\n    gap: 10px;\n\n    margin-bottom: 11px;\n\n    color:\n        var(--dx-final-purple);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-services-final-cta .dx-final-eyebrow::before {\n    content: \"\";\n\n    width: 36px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-final-yellow),\n            var(--dx-final-purple-light)\n        );\n}\n\n#dx-services-final-cta .dx-final-title {\n    max-width: 760px;\n\n    margin: 0;\n\n    color:\n        var(--dx-final-dark);\n\n    font-size:\n        clamp(\n            32px,\n            3.4vw,\n            48px\n        );\n\n    font-weight: 900;\n    line-height: 1.2;\n    letter-spacing: -.5px;\n\n    text-wrap: balance;\n}\n\n#dx-services-final-cta .dx-final-title span {\n    color:\n        var(--dx-final-purple);\n}\n\n#dx-services-final-cta .dx-final-description {\n    max-width: 680px;\n\n    margin:\n        14px\n        0\n        0;\n\n    color:\n        var(--dx-final-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.8;\n\n    text-wrap: pretty;\n}\n\n\/* =========================================================\n   POINTS\n========================================================= *\/\n\n#dx-services-final-cta .dx-final-points {\n    margin-top: 19px;\n\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    gap:\n        11px\n        19px;\n}\n\n#dx-services-final-cta .dx-final-point {\n    display: inline-flex;\n    align-items: center;\n\n    gap: 8px;\n\n    color:\n        var(--dx-final-muted);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.6;\n}\n\n#dx-services-final-cta .dx-final-point::before {\n    content: \"\";\n\n    width: 7px;\n    height: 7px;\n    flex: 0 0 7px;\n\n    border-radius: 50%;\n\n    background:\n        var(--dx-final-yellow);\n\n    box-shadow:\n        0 0 0 5px rgba(255,196,65,.11);\n}\n\n\/* =========================================================\n   BUTTONS\n========================================================= *\/\n\n#dx-services-final-cta .dx-final-actions {\n    margin-top: 25px;\n\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    gap: 12px;\n}\n\n#dx-services-final-cta .dx-final-button {\n    position: relative;\n    isolation: isolate;\n\n    min-width: 195px;\n    min-height: 53px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 9px;\n\n    padding:\n        0\n        23px;\n\n    overflow: hidden;\n\n    border:\n        1px solid transparent;\n\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 .25s ease,\n        border-color .25s ease,\n        background .25s ease,\n        box-shadow .25s ease;\n}\n\n#dx-services-final-cta .dx-final-button-primary {\n    color:\n        var(--dx-final-white);\n\n    border-color:\n        rgba(105,66,216,.26);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-final-purple),\n            var(--dx-final-purple-light)\n        );\n\n    box-shadow:\n        0 16px 35px rgba(105,66,216,.24);\n}\n\n#dx-services-final-cta\n.dx-final-button-primary::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -1;\n\n    top: -45%;\n    left: -75%;\n\n    width: 38%;\n    height: 190%;\n\n    background:\n        linear-gradient(\n            90deg,\n            transparent,\n            rgba(255,255,255,.55),\n            transparent\n        );\n\n    transform:\n        rotate(18deg);\n\n    transition:\n        left .55s ease;\n}\n\n#dx-services-final-cta\n.dx-final-button-primary:hover::before {\n    left: 135%;\n}\n\n#dx-services-final-cta .dx-final-button-secondary {\n    color:\n        var(--dx-final-dark);\n\n    border-color:\n        rgba(105,66,216,.19);\n\n    background:\n        var(--dx-final-white);\n\n    box-shadow:\n        0 11px 28px rgba(40,18,84,.08);\n}\n\n#dx-services-final-cta .dx-final-button:hover,\n#dx-services-final-cta .dx-final-button:focus-visible {\n    transform:\n        translateY(-3px);\n}\n\n#dx-services-final-cta\n.dx-final-button-primary:hover,\n#dx-services-final-cta\n.dx-final-button-primary:focus-visible {\n    box-shadow:\n        0 22px 45px rgba(105,66,216,.33);\n}\n\n#dx-services-final-cta\n.dx-final-button-secondary:hover,\n#dx-services-final-cta\n.dx-final-button-secondary:focus-visible {\n    color:\n        var(--dx-final-white);\n\n    border-color:\n        rgba(105,66,216,.38);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-final-purple),\n            var(--dx-final-purple-light)\n        );\n\n    box-shadow:\n        0 18px 38px rgba(105,66,216,.24);\n}\n\n#dx-services-final-cta .dx-final-button svg {\n    width: 18px;\n    height: 18px;\n    flex: 0 0 18px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.9;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   VISUAL PANEL\n========================================================= *\/\n\n#dx-services-final-cta .dx-final-visual {\n    position: relative;\n    z-index: 3;\n\n    min-width: 0;\n    min-height: 245px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n#dx-services-final-cta .dx-final-visual-card {\n    position: relative;\n    isolation: isolate;\n\n    width:\n        min(\n            100%,\n            350px\n        );\n\n    min-height: 245px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    padding: 28px;\n\n    overflow: hidden;\n\n    border:\n        1px solid rgba(105,66,216,.16);\n\n    border-radius: 25px;\n\n    background:\n        radial-gradient(\n            circle at 80% 15%,\n            rgba(255,255,255,.18),\n            transparent 30%\n        ),\n        linear-gradient(\n            215deg,\n            var(--dx-final-purple-light),\n            var(--dx-final-purple)\n        );\n\n    box-shadow:\n        0 25px 58px rgba(105,66,216,.27);\n\n    transition:\n        transform .35s ease,\n        box-shadow .35s ease;\n}\n\n#dx-services-final-cta .dx-final-box:hover\n.dx-final-visual-card {\n    box-shadow:\n        0 32px 68px rgba(105,66,216,.35);\n\n    transform:\n        translateY(-4px)\n        rotate(1deg);\n}\n\n#dx-services-final-cta .dx-final-visual-card::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    top: -90px;\n    right: -70px;\n\n    width: 210px;\n    height: 210px;\n\n    border-radius: 50%;\n\n    background:\n        rgba(255,196,65,.17);\n\n    filter:\n        blur(50px);\n}\n\n#dx-services-final-cta .dx-final-visual-card::after {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    left: -80px;\n    bottom: -90px;\n\n    width: 220px;\n    height: 220px;\n\n    border:\n        1px solid rgba(255,255,255,.13);\n\n    border-radius: 50%;\n}\n\n\/* =========================================================\n   VISUAL INNER\n========================================================= *\/\n\n#dx-services-final-cta .dx-final-visual-inner {\n    position: relative;\n    z-index: 3;\n\n    width: 100%;\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    text-align: center;\n}\n\n#dx-services-final-cta .dx-final-icon-wrap {\n    width: 78px;\n    height: 78px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border:\n        1px solid rgba(255,255,255,.26);\n\n    border-radius: 23px;\n\n    color:\n        var(--dx-final-dark);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-final-yellow),\n            #ffd66e\n        );\n\n    box-shadow:\n        0 18px 38px rgba(36,12,92,.25);\n\n    animation:\n        dxFinalIconFloat\n        4.8s\n        ease-in-out\n        infinite;\n}\n\n#dx-services-final-cta .dx-final-icon-wrap svg {\n    width: 38px;\n    height: 38px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.7;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-services-final-cta .dx-final-visual-title {\n    margin:\n        19px\n        0\n        0;\n\n    color:\n        var(--dx-final-white);\n\n    font-size: 21px;\n    font-weight: 900;\n    line-height: 1.4;\n}\n\n#dx-services-final-cta .dx-final-visual-text {\n    max-width: 250px;\n\n    margin:\n        7px\n        auto\n        0;\n\n    color:\n        rgba(255,255,255,.73);\n\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1.7;\n}\n\n\/* =========================================================\n   VISUAL TAGS\n========================================================= *\/\n\n#dx-services-final-cta .dx-final-tags {\n    margin-top: 18px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-wrap: wrap;\n\n    gap: 7px;\n}\n\n#dx-services-final-cta .dx-final-tag {\n    min-height: 30px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    padding:\n        0\n        11px;\n\n    border:\n        1px solid rgba(255,255,255,.16);\n\n    border-radius: 999px;\n\n    color:\n        rgba(255,255,255,.83);\n\n    background:\n        rgba(255,255,255,.08);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1;\n}\n\n\/* =========================================================\n   ANIMATIONS\n========================================================= *\/\n\n@keyframes dxFinalIconFloat {\n\n    0%,\n    100% {\n        transform:\n            translateY(0);\n    }\n\n    50% {\n        transform:\n            translateY(-8px);\n    }\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width:950px) {\n\n    #dx-services-final-cta .dx-final-box {\n        grid-template-columns: 1fr;\n\n        gap: 35px;\n\n        padding:\n            50px\n            42px;\n    }\n\n    #dx-services-final-cta .dx-final-content {\n        max-width: 760px;\n\n        margin: 0 auto;\n\n        text-align: center;\n    }\n\n    #dx-services-final-cta .dx-final-eyebrow,\n    #dx-services-final-cta .dx-final-points,\n    #dx-services-final-cta .dx-final-actions {\n        justify-content: center;\n    }\n\n    #dx-services-final-cta .dx-final-description {\n        margin-right: auto;\n        margin-left: auto;\n    }\n\n    #dx-services-final-cta .dx-final-visual {\n        min-height: 230px;\n    }\n\n    #dx-services-final-cta .dx-final-visual-card {\n        width:\n            min(\n                100%,\n                430px\n            );\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width:600px) {\n\n    #dx-services-final-cta .dx-final-main {\n        padding:\n            48px\n            14px\n            54px;\n    }\n\n    #dx-services-final-cta .dx-final-box {\n        min-height: 0;\n\n        gap: 28px;\n\n        padding:\n            34px\n            17px\n            24px;\n\n        border-radius: 23px;\n    }\n\n    #dx-services-final-cta .dx-final-box::after {\n        width: 5px;\n    }\n\n    #dx-services-final-cta .dx-final-eyebrow {\n        margin-bottom: 9px;\n\n        font-size: 14px;\n    }\n\n    #dx-services-final-cta .dx-final-eyebrow::before {\n        width: 26px;\n    }\n\n    #dx-services-final-cta .dx-final-title {\n        font-size:\n            clamp(\n                27px,\n                8.5vw,\n                37px\n            );\n\n        line-height: 1.25;\n        letter-spacing: -.2px;\n    }\n\n    #dx-services-final-cta .dx-final-description {\n        margin-top: 11px;\n\n        font-size: 14px;\n        line-height: 1.75;\n    }\n\n    #dx-services-final-cta .dx-final-points {\n        width: 100%;\n\n        margin-top: 16px;\n\n        justify-content: center;\n        flex-wrap: wrap;\n\n        gap:\n            9px\n            14px;\n    }\n\n    #dx-services-final-cta .dx-final-point {\n        gap: 6px;\n\n        font-size: 14px;\n        white-space: normal;\n    }\n\n    #dx-services-final-cta .dx-final-point::before {\n        width: 6px;\n        height: 6px;\n        flex-basis: 6px;\n\n        box-shadow:\n            0 0 0 4px rgba(255,196,65,.10);\n    }\n\n    #dx-services-final-cta .dx-final-actions {\n        margin-top: 21px;\n\n        display: grid;\n\n        grid-template-columns: 1fr;\n\n        gap: 9px;\n    }\n\n    #dx-services-final-cta .dx-final-button {\n        width: 100%;\n        min-width: 0;\n        min-height: 51px;\n\n        font-size: 14px;\n    }\n\n    #dx-services-final-cta .dx-final-visual {\n        min-height: 205px;\n    }\n\n    #dx-services-final-cta .dx-final-visual-card {\n        min-height: 205px;\n\n        padding:\n            24px\n            16px;\n\n        border-radius: 20px;\n    }\n\n    #dx-services-final-cta .dx-final-icon-wrap {\n        width: 62px;\n        height: 62px;\n\n        border-radius: 18px;\n    }\n\n    #dx-services-final-cta .dx-final-icon-wrap svg {\n        width: 31px;\n        height: 31px;\n    }\n\n    #dx-services-final-cta .dx-final-visual-title {\n        margin-top: 14px;\n\n        font-size: 18px;\n    }\n\n    #dx-services-final-cta .dx-final-visual-text {\n        margin-top: 5px;\n\n        font-size: 14px;\n        line-height: 1.65;\n    }\n\n    #dx-services-final-cta .dx-final-tags {\n        margin-top: 14px;\n\n        gap: 6px;\n    }\n\n    #dx-services-final-cta .dx-final-tag {\n        min-height: 30px;\n\n        padding-right: 10px;\n        padding-left: 10px;\n\n        font-size: 14px;\n    }\n}\n\n\/* =========================================================\n   VERY SMALL MOBILE\n========================================================= *\/\n\n@media (max-width:360px) {\n\n    #dx-services-final-cta .dx-final-main {\n        padding-right: 10px;\n        padding-left: 10px;\n    }\n\n    #dx-services-final-cta .dx-final-box {\n        padding-right: 13px;\n        padding-left: 13px;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-services-final-cta a:focus-visible {\n    outline:\n        3px solid var(--dx-final-yellow);\n\n    outline-offset: 4px;\n}\n\n@media (prefers-reduced-motion:reduce) {\n\n    #dx-services-final-cta *,\n    #dx-services-final-cta *::before,\n    #dx-services-final-cta *::after {\n        animation-duration:\n            .01ms !important;\n\n        animation-iteration-count:\n            1 !important;\n\n        transition-duration:\n            .01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-services-final-cta\"\n    aria-labelledby=\"dx-services-final-cta-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n\n    <div\n        class=\"dx-final-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <span\n        class=\"dx-final-orbit dx-final-orbit-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-final-orbit dx-final-orbit-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-final-main\">\n\n        <div class=\"dx-final-container\">\n\n            <div class=\"dx-final-box\">\n\n                <!-- =============================================\n                     CONTENT\n                ============================================== -->\n\n                <div class=\"dx-final-content\">\n\n                    <span class=\"dx-final-eyebrow\">\n                        Let\u2019s Start Your Project\n                    <\/span>\n\n                    <h2\n                        id=\"dx-services-final-cta-title\"\n                        class=\"dx-final-title\"\n                    >\n                        Not Sure Which Service Is Right\n                        <span>for Your Project?<\/span>\n                    <\/h2>\n\n                    <p class=\"dx-final-description\">\n                        Tell us about your idea, goals, and current\n                        challenges. We\u2019ll help you identify the right\n                        digital solution and define the steps your\n                        project needs before development begins.\n                    <\/p>\n\n                    <div\n                        class=\"dx-final-points\"\n                        aria-label=\"Consultation benefits\"\n                    >\n\n                        <span class=\"dx-final-point\">\n                            Understand Your Needs\n                        <\/span>\n\n                        <span class=\"dx-final-point\">\n                            Identify the Right Solution\n                        <\/span>\n\n                        <span class=\"dx-final-point\">\n                            Build a Clear Project Roadmap\n                        <\/span>\n\n                    <\/div>\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>\n                                Get a Free Consultation\n                            <\/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-services-navigation\"\n                            class=\"dx-final-button dx-final-button-secondary\"\n                        >\n                            <span>\n                                Explore Services Again\n                            <\/span>\n\n                            <svg\n                                viewBox=\"0 0 24 24\"\n                                aria-hidden=\"true\"\n                            >\n                                <path d=\"M12 19V5\"><\/path>\n                                <path d=\"m6 11 6-6 6 6\"><\/path>\n                            <\/svg>\n                        <\/a>\n\n                    <\/div>\n\n                <\/div>\n\n                <!-- =============================================\n                     VISUAL\n                ============================================== -->\n\n                <div\n                    class=\"dx-final-visual\"\n                    aria-hidden=\"true\"\n                >\n\n                    <div class=\"dx-final-visual-card\">\n\n                        <div class=\"dx-final-visual-inner\">\n\n                            <span class=\"dx-final-icon-wrap\">\n\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M4 12a8 8 0 0 1 16 0\"><\/path>\n                                    <path d=\"M4 12v5h3v-5H4z\"><\/path>\n                                    <path d=\"M17 12v5h3v-5h-3z\"><\/path>\n                                    <path d=\"M17 19c-1 1-2 2-5 2\"><\/path>\n                                    <path d=\"M12 21h-2\"><\/path>\n                                <\/svg>\n\n                            <\/span>\n\n                            <h3 class=\"dx-final-visual-title\">\n                                Discuss Your Project With Us\n                            <\/h3>\n\n                            <p class=\"dx-final-visual-text\">\n                                We help you define the right starting\n                                point and the best-fit solution before\n                                moving into development.\n                            <\/p>\n\n                            <div class=\"dx-final-tags\">\n\n                                <span class=\"dx-final-tag\">\n                                    Needs Analysis\n                                <\/span>\n\n                                <span class=\"dx-final-tag\">\n                                    Solution Selection\n                                <\/span>\n\n                                <span class=\"dx-final-tag\">\n                                    Project Roadmap\n                                <\/span>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/div>\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 initDxServicesFinalCta() {\n\n        const section =\n            document.getElementById(\n                \"dx-services-final-cta\"\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-services-final-cta-widget-fullwidth\"\n            );\n        }\n\n        const navigationButton =\n            section.querySelector(\n                'a[href=\"#dx-services-navigation\"]'\n            );\n\n        if (navigationButton) {\n\n            navigationButton.addEventListener(\n                \"click\",\n                function (event) {\n\n                    const target =\n                        document.getElementById(\n                            \"dx-services-navigation\"\n                        );\n\n                    if (!target) {\n                        return;\n                    }\n\n                    event.preventDefault();\n\n                    target.scrollIntoView({\n                        behavior: \"smooth\",\n                        block: \"start\"\n                    });\n\n                }\n            );\n        }\n    }\n\n    if (\n        document.readyState === \"loading\"\n    ) {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxServicesFinalCta\n        );\n\n    } else {\n\n        initDxServicesFinalCta();\n\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\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>Integrated Digital Services Digital Solutions That Move Your Business Forward From website and mobile app development to e-commerce, learning platforms, and smart digital transformation, we deliver tailored digital solutions designed around your business needs and built to support long-term growth. Tailored Solutions Professional Design Scalable Technology Explore Our Services Get a Free Consultation Integrated Digital [&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-150","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Services - D-INDEX - Your Partner in Digital Transformation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dindex.net\/services\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Services - D-INDEX - Your Partner in Digital Transformation\" \/>\n<meta property=\"og:description\" content=\"Integrated Digital Services Digital Solutions That Move Your Business Forward From website and mobile app development to e-commerce, learning platforms, and smart digital transformation, we deliver tailored digital solutions designed around your business needs and built to support long-term growth. Tailored Solutions Professional Design Scalable Technology Explore Our Services Get a Free Consultation Integrated Digital [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dindex.net\/services\/\" \/>\n<meta property=\"og:site_name\" content=\"D-INDEX - Your Partner in Digital Transformation\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-19T09:45:19+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/dindex.net\\\/services\\\/\",\"url\":\"https:\\\/\\\/dindex.net\\\/services\\\/\",\"name\":\"Services - D-INDEX - Your Partner in Digital Transformation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/dindex.net\\\/#website\"},\"datePublished\":\"2025-02-14T08:45:07+00:00\",\"dateModified\":\"2026-08-19T09:45:19+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/dindex.net\\\/services\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/dindex.net\\\/services\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/dindex.net\\\/services\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629\",\"item\":\"https:\\\/\\\/dindex.net\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Services\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/dindex.net\\\/#website\",\"url\":\"https:\\\/\\\/dindex.net\\\/\",\"name\":\"\u062f\u064a \u0625\u0646\u062f\u0643\u0633 - \u0634\u0631\u0643\u0627\u0624\u0643 \u0641\u064a \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/dindex.net\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/dindex.net\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/dindex.net\\\/#organization\",\"name\":\"\u062f\u064a \u0625\u0646\u062f\u0643\u0633 - \u0634\u0631\u0643\u0627\u0624\u0643 \u0641\u064a \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a\",\"url\":\"https:\\\/\\\/dindex.net\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/dindex.net\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/dindex.net\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Dindex-logo.png\",\"contentUrl\":\"https:\\\/\\\/dindex.net\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Dindex-logo.png\",\"width\":796,\"height\":313,\"caption\":\"\u062f\u064a \u0625\u0646\u062f\u0643\u0633 - \u0634\u0631\u0643\u0627\u0624\u0643 \u0641\u064a \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a\"},\"image\":{\"@id\":\"https:\\\/\\\/dindex.net\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Services - D-INDEX - Your Partner in Digital Transformation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/dindex.net\/services\/","og_locale":"en_US","og_type":"article","og_title":"Services - D-INDEX - Your Partner in Digital Transformation","og_description":"Integrated Digital Services Digital Solutions That Move Your Business Forward From website and mobile app development to e-commerce, learning platforms, and smart digital transformation, we deliver tailored digital solutions designed around your business needs and built to support long-term growth. Tailored Solutions Professional Design Scalable Technology Explore Our Services Get a Free Consultation Integrated Digital [&hellip;]","og_url":"https:\/\/dindex.net\/services\/","og_site_name":"D-INDEX - Your Partner in Digital Transformation","article_modified_time":"2026-08-19T09:45:19+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dindex.net\/services\/","url":"https:\/\/dindex.net\/services\/","name":"Services - D-INDEX - Your Partner in Digital Transformation","isPartOf":{"@id":"https:\/\/dindex.net\/#website"},"datePublished":"2025-02-14T08:45:07+00:00","dateModified":"2026-08-19T09:45:19+00:00","breadcrumb":{"@id":"https:\/\/dindex.net\/services\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dindex.net\/services\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/dindex.net\/services\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629","item":"https:\/\/dindex.net\/en\/"},{"@type":"ListItem","position":2,"name":"Services"}]},{"@type":"WebSite","@id":"https:\/\/dindex.net\/#website","url":"https:\/\/dindex.net\/","name":"\u062f\u064a \u0625\u0646\u062f\u0643\u0633 - \u0634\u0631\u0643\u0627\u0624\u0643 \u0641\u064a \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a","description":"","publisher":{"@id":"https:\/\/dindex.net\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dindex.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/dindex.net\/#organization","name":"\u062f\u064a \u0625\u0646\u062f\u0643\u0633 - \u0634\u0631\u0643\u0627\u0624\u0643 \u0641\u064a \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a","url":"https:\/\/dindex.net\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dindex.net\/#\/schema\/logo\/image\/","url":"https:\/\/dindex.net\/wp-content\/uploads\/2026\/05\/Dindex-logo.png","contentUrl":"https:\/\/dindex.net\/wp-content\/uploads\/2026\/05\/Dindex-logo.png","width":796,"height":313,"caption":"\u062f\u064a \u0625\u0646\u062f\u0643\u0633 - \u0634\u0631\u0643\u0627\u0624\u0643 \u0641\u064a \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a"},"image":{"@id":"https:\/\/dindex.net\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/pages\/150","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=150"}],"version-history":[{"count":36,"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/pages\/150\/revisions"}],"predecessor-version":[{"id":3958,"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/pages\/150\/revisions\/3958"}],"wp:attachment":[{"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/media?parent=150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}