{"id":146,"date":"2025-02-14T08:44:39","date_gmt":"2025-02-14T08:44:39","guid":{"rendered":"https:\/\/lightslategray-hummingbird-166239.hostingersite.com\/?page_id=146"},"modified":"2026-08-19T08:56:27","modified_gmt":"2026-08-19T08:56:27","slug":"home","status":"publish","type":"page","link":"https:\/\/dindex.net\/en\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"146\" class=\"elementor elementor-146\" 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-8bd524a e-con-full e-flex e-con e-parent\" data-id=\"8bd524a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-134cc07 elementor-widget elementor-widget-html\" data-id=\"134cc07\" 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     D-INDEX \u2014 HOME HERO SECTION\n     Author: Mohamed El-Sehemy\n     English LTR Version\n     Elementor Compatible\n========================================================== -->\n\n<style>\n\/* =========================================================\n   ELEMENTOR FULL WIDTH\n========================================================= *\/\n\nhtml,\nbody {\n    max-width: 100%;\n    overflow-x: clip;\n}\n\n.elementor-widget-html:has(#dx-home-hero),\n.elementor-widget-html:has(#dx-home-hero) > .elementor-widget-container,\n.dx-hero-widget-fullwidth,\n.dx-hero-widget-fullwidth > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n\/* =========================================================\n   VARIABLES & RESET\n========================================================= *\/\n\n#dx-home-hero,\n#dx-home-hero *,\n#dx-home-hero *::before,\n#dx-home-hero *::after {\n    box-sizing: border-box;\n}\n\n#dx-home-hero {\n    --dx-dark: #08001f;\n    --dx-dark-light: #13043a;\n    --dx-purple: #6942d8;\n    --dx-purple-light: #8c62ee;\n    --dx-yellow: #ffc441;\n    --dx-white: #ffffff;\n    --dx-text: rgba(255, 255, 255, 0.76);\n    --dx-border: rgba(255, 255, 255, 0.11);\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    direction: ltr;\n    overflow: visible;\n\n    color: var(--dx-white);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n\n    background:\n        radial-gradient(\n            circle at 18% 40%,\n            rgba(111, 62, 211, 0.23),\n            transparent 31%\n        ),\n        radial-gradient(\n            circle at 90% 18%,\n            rgba(101, 57, 205, 0.13),\n            transparent 26%\n        ),\n        linear-gradient(\n            135deg,\n            #08001f 0%,\n            #10032f 48%,\n            #090020 100%\n        );\n}\n\n#dx-home-hero a {\n    color: inherit;\n    text-decoration: none;\n}\n\n\/* =========================================================\n   BACKGROUND DECORATIONS\n========================================================= *\/\n\n#dx-home-hero .dx-hero-background {\n    position: absolute;\n    z-index: -5;\n\n    inset: 0;\n\n    overflow: hidden;\n\n    pointer-events: none;\n}\n\n#dx-home-hero .dx-hero-background::before {\n    content: \"\";\n\n    position: absolute;\n\n    inset: 0;\n\n    opacity: 0.12;\n\n    background-image:\n        linear-gradient(\n            rgba(255, 255, 255, 0.03) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(255, 255, 255, 0.03) 1px,\n            transparent 1px\n        );\n\n    background-size: 76px 76px;\n\n    -webkit-mask-image:\n        linear-gradient(\n            to bottom,\n            #000 0%,\n            transparent 94%\n        );\n\n    mask-image:\n        linear-gradient(\n            to bottom,\n            #000 0%,\n            transparent 94%\n        );\n}\n\n#dx-home-hero .dx-hero-glow {\n    position: absolute;\n\n    border-radius: 50%;\n\n    filter: blur(100px);\n}\n\n#dx-home-hero .dx-hero-glow-one {\n    top: 5%;\n    left: 14%;\n\n    width: 360px;\n    height: 360px;\n\n    background: rgba(105, 66, 216, 0.18);\n}\n\n#dx-home-hero .dx-hero-glow-two {\n    right: 8%;\n    bottom: -10%;\n\n    width: 430px;\n    height: 330px;\n\n    background: rgba(123, 68, 221, 0.19);\n}\n\n#dx-home-hero .dx-hero-line {\n    position: absolute;\n\n    border: 1px solid rgba(139, 98, 238, 0.19);\n    border-radius: 50%;\n}\n\n#dx-home-hero .dx-hero-line-one {\n    top: 78px;\n    right: -175px;\n\n    width: 430px;\n    height: 430px;\n}\n\n#dx-home-hero .dx-hero-line-two {\n    left: -130px;\n    bottom: 35px;\n\n    width: 290px;\n    height: 290px;\n}\n\n#dx-home-hero .dx-hero-dots {\n    position: absolute;\n\n    width: 105px;\n    height: 105px;\n\n    opacity: 0.33;\n\n    background-image:\n        radial-gradient(\n            circle,\n            var(--dx-purple-light) 2px,\n            transparent 2.5px\n        );\n\n    background-size: 17px 17px;\n}\n\n#dx-home-hero .dx-hero-dots-one {\n    top: 72px;\n    right: 5%;\n}\n\n#dx-home-hero .dx-hero-dots-two {\n    left: 4%;\n    bottom: 135px;\n}\n\n\/* =========================================================\n   HERO MAIN\n========================================================= *\/\n\n#dx-home-hero .dx-hero-main {\n    position: relative;\n    z-index: 3;\n\n    width: 100%;\n    min-height: 540px;\n\n    padding:\n        54px\n        clamp(28px, 5vw, 90px)\n        105px;\n}\n\n#dx-home-hero .dx-hero-container {\n    width: min(1450px, 100%);\n    min-height: 390px;\n\n    margin: 0 auto;\n\n    display: grid;\n\n    grid-template-columns:\n        minmax(440px, 1fr)\n        minmax(440px, 1fr);\n\n    align-items: center;\n\n    gap: clamp(42px, 5.5vw, 88px);\n}\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n#dx-home-hero .dx-hero-content {\n    position: relative;\n    z-index: 4;\n\n    max-width: 680px;\n\n    justify-self: start;\n\n    text-align: left;\n}\n\n#dx-home-hero .dx-hero-title {\n    margin: 0;\n\n    color: var(--dx-white);\n\n    font-size: clamp(56px, 5vw, 82px);\n    font-weight: 900;\n    line-height: 1.08;\n\n    letter-spacing: -2px;\n}\n\n#dx-home-hero .dx-hero-subtitle {\n    margin: 12px 0 0;\n\n    color: var(--dx-white);\n\n    font-size: clamp(30px, 2.8vw, 44px);\n    font-weight: 800;\n    line-height: 1.28;\n\n    letter-spacing: -0.8px;\n}\n\n#dx-home-hero .dx-hero-subtitle strong {\n    display: inline;\n\n    color: var(--dx-yellow);\n\n    font-weight: 900;\n}\n\n#dx-home-hero .dx-hero-description {\n    max-width: 610px;\n\n    margin: 22px 0 0;\n\n    color: var(--dx-text);\n\n    font-size: clamp(16px, 1.2vw, 18px);\n    font-weight: 400;\n    line-height: 1.8;\n}\n\n#dx-home-hero .dx-hero-actions {\n    margin-top: 30px;\n\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    gap: 14px;\n}\n\n\/* =========================================================\n   BUTTONS\n========================================================= *\/\n\n#dx-home-hero .dx-hero-button {\n    position: relative;\n    isolation: isolate;\n\n    min-height: 54px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 11px;\n\n    padding:\n        0\n        25px;\n\n    overflow: hidden;\n\n    border-radius: 11px;\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1;\n\n    white-space: nowrap;\n\n    transition:\n        transform 0.25s ease,\n        border-color 0.25s ease,\n        background-color 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-home-hero .dx-hero-button-primary {\n    min-width: 225px;\n\n    border:\n        1px solid rgba(255, 255, 255, 0.13);\n\n    color: var(--dx-white);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-purple),\n            var(--dx-purple-light)\n        );\n\n    box-shadow:\n        0 12px 28px rgba(105, 66, 216, 0.31),\n        inset 0 1px 0 rgba(255, 255, 255, 0.17);\n}\n\n#dx-home-hero .dx-hero-button-primary::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -1;\n\n    top: 0;\n    left: -110%;\n\n    width: 75%;\n    height: 100%;\n\n    background:\n        linear-gradient(\n            90deg,\n            transparent,\n            rgba(255, 255, 255, 0.24),\n            transparent\n        );\n\n    transform: skewX(-20deg);\n\n    transition: left 0.55s ease;\n}\n\n#dx-home-hero .dx-hero-button-primary:hover::before {\n    left: 135%;\n}\n\n#dx-home-hero .dx-hero-button-primary:hover,\n#dx-home-hero .dx-hero-button-primary:focus-visible {\n    transform: translateY(-3px);\n\n    box-shadow:\n        0 17px 36px rgba(105, 66, 216, 0.42),\n        inset 0 1px 0 rgba(255, 255, 255, 0.17);\n}\n\n#dx-home-hero .dx-hero-button-secondary {\n    min-width: 185px;\n\n    border:\n        1px solid rgba(255, 255, 255, 0.28);\n\n    color: var(--dx-white);\n\n    background:\n        rgba(255, 255, 255, 0.025);\n}\n\n#dx-home-hero .dx-hero-button-secondary:hover,\n#dx-home-hero .dx-hero-button-secondary:focus-visible {\n    border-color:\n        rgba(139, 98, 238, 0.72);\n\n    background:\n        rgba(105, 66, 216, 0.12);\n\n    transform:\n        translateY(-3px);\n}\n\n#dx-home-hero .dx-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-home-hero .dx-hero-visual {\n    position: relative;\n\n    width: 100%;\n    min-width: 0;\n\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n}\n\n#dx-home-hero .dx-hero-image-wrap {\n    position: relative;\n    isolation: isolate;\n\n    width: min(108%, 720px);\n\n    margin-right: -4%;\n}\n\n#dx-home-hero .dx-hero-image-wrap::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    top: 13%;\n    left: 9%;\n\n    width: 80%;\n    height: 72%;\n\n    border-radius: 50%;\n\n    background:\n        rgba(108, 60, 211, 0.29);\n\n    filter: blur(67px);\n}\n\n#dx-home-hero .dx-hero-image-wrap::after {\n    content: \"\";\n\n    position: absolute;\n    z-index: -1;\n\n    left: 8%;\n    bottom: 7%;\n\n    width: 82%;\n    height: 28%;\n\n    border-radius: 50%;\n\n    background:\n        rgba(63, 22, 128, 0.45);\n\n    filter: blur(35px);\n}\n\n#dx-home-hero .dx-hero-image {\n    position: relative;\n    z-index: 2;\n\n    display: block;\n\n    width: 100%;\n    height: auto;\n\n    object-fit: contain;\n\n    border-radius: 0;\n\n    filter:\n        saturate(1.05)\n        contrast(1.04)\n        drop-shadow(\n            0\n            28px\n            42px\n            rgba(0, 0, 0, 0.23)\n        );\n\n    mix-blend-mode: screen;\n\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse 70% 72% at 50% 50%,\n            #000 53%,\n            rgba(0, 0, 0, 0.96) 64%,\n            rgba(0, 0, 0, 0.70) 76%,\n            rgba(0, 0, 0, 0.20) 88%,\n            transparent 100%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse 70% 72% at 50% 50%,\n            #000 53%,\n            rgba(0, 0, 0, 0.96) 64%,\n            rgba(0, 0, 0, 0.70) 76%,\n            rgba(0, 0, 0, 0.20) 88%,\n            transparent 100%\n        );\n\n    animation:\n        dxHeroFloat\n        5.8s\n        ease-in-out\n        infinite;\n\n    will-change: transform;\n}\n\n\/* =========================================================\n   STATS\n========================================================= *\/\n\n#dx-home-hero .dx-hero-stats-wrap {\n    position: absolute;\n    z-index: 12;\n\n    left: 50%;\n    bottom: -72px;\n\n    width:\n        calc(\n            100% -\n            clamp(70px, 14vw, 245px)\n        );\n\n    max-width: 1200px;\n\n    transform:\n        translateX(-50%);\n}\n\n#dx-home-hero .dx-hero-stats {\n    width: 100%;\n    min-height: 138px;\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(\n            4,\n            minmax(0, 1fr)\n        );\n\n    align-items: center;\n\n    padding:\n        22px\n        24px;\n\n    border:\n        1px solid rgba(18, 5, 57, 0.08);\n\n    border-radius:\n        20px;\n\n    color:\n        #171025;\n\n    background:\n        rgba(255, 255, 255, 0.985);\n\n    box-shadow:\n        0 22px 48px rgba(9, 0, 31, 0.16),\n        inset 0 1px 0 rgba(255, 255, 255, 0.85);\n}\n\n#dx-home-hero .dx-hero-stat {\n    position: relative;\n\n    min-width: 0;\n    min-height: 92px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 16px;\n\n    padding:\n        10px\n        22px;\n\n    text-align: left;\n}\n\n#dx-home-hero .dx-hero-stat:not(:last-child)::after {\n    content: \"\";\n\n    position: absolute;\n\n    top: 8%;\n    right: 0;\n\n    width: 1px;\n    height: 84%;\n\n    background:\n        linear-gradient(\n            to bottom,\n            transparent,\n            rgba(105, 66, 216, 0.22),\n            transparent\n        );\n}\n\n#dx-home-hero .dx-hero-stat-icon {\n    width: 58px;\n    height: 58px;\n    flex: 0 0 58px;\n\n    display:\n        inline-flex;\n\n    align-items:\n        center;\n\n    justify-content:\n        center;\n\n    border-radius:\n        16px;\n\n    color:\n        var(--dx-purple);\n\n    background:\n        rgba(105, 66, 216, 0.08);\n}\n\n#dx-home-hero .dx-hero-stat-icon svg {\n    width: 32px;\n    height: 32px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.75;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-home-hero .dx-hero-stat-number {\n    display: block;\n\n    color: #170d2d;\n\n    font-size:\n        clamp(\n            28px,\n            2.25vw,\n            36px\n        );\n\n    font-weight: 900;\n    line-height: 1.1;\n}\n\n#dx-home-hero .dx-hero-stat-label {\n    display: block;\n\n    margin-top: 7px;\n\n    color: #6e6877;\n\n    font-size: 13px;\n    font-weight: 700;\n    line-height: 1.55;\n}\n\n\/* =========================================================\n   ANIMATION\n========================================================= *\/\n\n@keyframes dxHeroFloat {\n\n    0%,\n    100% {\n        transform:\n            translateY(0)\n            rotate(-0.35deg);\n    }\n\n    50% {\n        transform:\n            translateY(-14px)\n            rotate(0.35deg);\n    }\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1050px) {\n\n    #dx-home-hero .dx-hero-main {\n        padding-top:\n            55px;\n    }\n\n    #dx-home-hero .dx-hero-container {\n        grid-template-columns:\n            minmax(360px, 0.95fr)\n            minmax(400px, 1.05fr);\n\n        gap: 30px;\n    }\n\n    #dx-home-hero .dx-hero-title {\n        font-size:\n            clamp(\n                50px,\n                5.6vw,\n                68px\n            );\n    }\n\n    #dx-home-hero .dx-hero-subtitle {\n        font-size:\n            clamp(\n                27px,\n                3.4vw,\n                38px\n            );\n    }\n\n    #dx-home-hero .dx-hero-image-wrap {\n        width:\n            min(\n                110%,\n                660px\n            );\n    }\n\n    #dx-home-hero .dx-hero-stat {\n        gap: 11px;\n\n        padding-right: 12px;\n        padding-left: 12px;\n    }\n\n    #dx-home-hero .dx-hero-stat-icon {\n        width: 52px;\n        height: 52px;\n\n        flex-basis: 52px;\n    }\n\n    #dx-home-hero .dx-hero-stat-icon svg {\n        width: 29px;\n        height: 29px;\n    }\n}\n\n\/* =========================================================\n   MOBILE & SMALL TABLET\n========================================================= *\/\n\n@media (max-width: 850px) {\n\n    #dx-home-hero .dx-hero-main {\n        min-height: 0;\n\n        padding:\n            58px\n            26px\n            180px;\n    }\n\n    #dx-home-hero .dx-hero-container {\n        grid-template-columns:\n            1fr;\n\n        gap: 32px;\n    }\n\n    #dx-home-hero .dx-hero-content {\n        max-width: 690px;\n\n        margin:\n            0\n            auto;\n\n        justify-self: center;\n\n        text-align: center;\n    }\n\n    #dx-home-hero .dx-hero-description {\n        margin-right: auto;\n        margin-left: auto;\n    }\n\n    #dx-home-hero .dx-hero-actions {\n        justify-content: center;\n    }\n\n    #dx-home-hero .dx-hero-visual {\n        justify-content: center;\n    }\n\n    #dx-home-hero .dx-hero-image-wrap {\n        width:\n            min(\n                110%,\n                660px\n            );\n\n        margin-right: auto;\n        margin-left: auto;\n    }\n\n    #dx-home-hero .dx-hero-stats-wrap {\n        bottom: -166px;\n\n        width:\n            calc(\n                100% -\n                42px\n            );\n    }\n\n    #dx-home-hero .dx-hero-stats {\n        grid-template-columns:\n            repeat(\n                2,\n                minmax(0, 1fr)\n            );\n\n        min-height: 0;\n    }\n\n    #dx-home-hero .dx-hero-stat {\n        min-height: 108px;\n    }\n\n    #dx-home-hero .dx-hero-stat:nth-child(2)::after {\n        display: none;\n    }\n\n    #dx-home-hero .dx-hero-stat:nth-child(-n + 2) {\n        border-bottom:\n            1px solid rgba(105, 66, 216, 0.12);\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 600px) {\n\n    #dx-home-hero .dx-hero-main {\n        padding:\n            42px\n            20px\n            190px;\n    }\n\n    #dx-home-hero .dx-hero-container {\n        gap: 24px;\n    }\n\n    #dx-home-hero .dx-hero-title {\n        font-size:\n            clamp(\n                42px,\n                12vw,\n                56px\n            );\n\n        line-height:\n            1.15;\n\n        letter-spacing:\n            -1px;\n    }\n\n    #dx-home-hero .dx-hero-subtitle {\n        margin-top:\n            8px;\n\n        font-size:\n            clamp(\n                24px,\n                7vw,\n                32px\n            );\n\n        line-height:\n            1.4;\n    }\n\n    #dx-home-hero .dx-hero-description {\n        margin-top:\n            16px;\n\n        font-size:\n            15px;\n\n        line-height:\n            1.8;\n    }\n\n    #dx-home-hero .dx-hero-actions {\n        margin-top:\n            23px;\n\n        display:\n            grid;\n\n        grid-template-columns:\n            1fr;\n\n        gap:\n            10px;\n    }\n\n    #dx-home-hero .dx-hero-button {\n        width:\n            100%;\n\n        min-width:\n            0;\n\n        min-height:\n            54px;\n    }\n\n    #dx-home-hero .dx-hero-image-wrap {\n        width:\n            calc(\n                100% +\n                46px\n            );\n\n        margin-right:\n            -23px;\n\n        margin-left:\n            -23px;\n    }\n\n    #dx-home-hero .dx-hero-stats-wrap {\n        bottom:\n            -176px;\n\n        width:\n            calc(\n                100% -\n                28px\n            );\n    }\n\n    #dx-home-hero .dx-hero-stats {\n        padding:\n            13px\n            9px;\n\n        border-radius:\n            17px;\n    }\n\n    #dx-home-hero .dx-hero-stat {\n        min-height:\n            112px;\n\n        flex-direction:\n            column;\n\n        gap:\n            7px;\n\n        padding:\n            10px\n            6px;\n\n        text-align:\n            center;\n    }\n\n    #dx-home-hero .dx-hero-stat-icon {\n        width:\n            46px;\n\n        height:\n            46px;\n\n        flex-basis:\n            46px;\n\n        border-radius:\n            12px;\n    }\n\n    #dx-home-hero .dx-hero-stat-icon svg {\n        width:\n            26px;\n\n        height:\n            26px;\n    }\n\n    #dx-home-hero .dx-hero-stat-number {\n        font-size:\n            25px;\n    }\n\n    #dx-home-hero .dx-hero-stat-label {\n        margin-top:\n            3px;\n\n        font-size:\n            12px;\n\n        line-height:\n            1.45;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-home-hero a:focus-visible {\n    outline:\n        2px solid var(--dx-yellow);\n\n    outline-offset:\n        5px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n\n    #dx-home-hero *,\n    #dx-home-hero *::before,\n    #dx-home-hero *::after {\n        animation-duration:\n            0.01ms !important;\n\n        animation-iteration-count:\n            1 !important;\n\n        transition-duration:\n            0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-home-hero\"\n    aria-labelledby=\"dx-home-hero-title\"\n    dir=\"ltr\"\n>\n\n    <div\n        class=\"dx-hero-background\"\n        aria-hidden=\"true\"\n    >\n\n        <span\n            class=\"dx-hero-glow dx-hero-glow-one\"\n        ><\/span>\n\n        <span\n            class=\"dx-hero-glow dx-hero-glow-two\"\n        ><\/span>\n\n        <span\n            class=\"dx-hero-line dx-hero-line-one\"\n        ><\/span>\n\n        <span\n            class=\"dx-hero-line dx-hero-line-two\"\n        ><\/span>\n\n        <span\n            class=\"dx-hero-dots dx-hero-dots-one\"\n        ><\/span>\n\n        <span\n            class=\"dx-hero-dots dx-hero-dots-two\"\n        ><\/span>\n\n    <\/div>\n\n    <div class=\"dx-hero-main\">\n\n        <div class=\"dx-hero-container\">\n\n            <!-- CONTENT -->\n\n            <div class=\"dx-hero-content\">\n\n                <h1\n                    id=\"dx-home-hero-title\"\n                    class=\"dx-hero-title\"\n                >\n                    D-INDEX\n                <\/h1>\n\n                <h2 class=\"dx-hero-subtitle\">\n                    Your Partner in\n                    <strong>Digital Transformation<\/strong>\n                <\/h2>\n\n                <p class=\"dx-hero-description\">\n                    We build high-performing websites, mobile apps,\n                    e-commerce platforms, and custom digital solutions\n                    designed to help businesses grow and compete in a\n                    digital-first world.\n                <\/p>\n\n                <div class=\"dx-hero-actions\">\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/contact\/\"\n                        class=\"dx-hero-button dx-hero-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\n                    <\/a>\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/web-projects\/\"\n                        class=\"dx-hero-button dx-hero-button-secondary\"\n                    >\n                        <span>\n                            Explore Our Work\n                        <\/span>\n\n                        <svg\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <path d=\"M8 5v14l11-7z\"><\/path>\n                        <\/svg>\n\n                    <\/a>\n\n                <\/div>\n\n            <\/div>\n\n            <!-- IMAGE -->\n\n            <div class=\"dx-hero-visual\">\n\n                <div class=\"dx-hero-image-wrap\">\n\n                    <img fetchpriority=\"high\"\n                        src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/07\/hero.png\"\n                        class=\"dx-hero-image\"\n                        alt=\"Digital transformation, website development and mobile app solutions\"\n                        width=\"1536\"\n                        height=\"1024\"\n                        decoding=\"async\"\n                        fetchpriority=\"high\"\n                    >\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n        <!-- STATISTICS -->\n\n        <div class=\"dx-hero-stats-wrap\">\n\n            <div\n                class=\"dx-hero-stats\"\n                aria-label=\"D-INDEX key statistics\"\n            >\n\n                <!-- PROJECTS -->\n\n                <div class=\"dx-hero-stat\">\n\n                    <span\n                        class=\"dx-hero-stat-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M4 7h16v12H4z\"><\/path>\n                            <path d=\"M8 7V4h8v3\"><\/path>\n                            <path d=\"M9 13h6\"><\/path>\n                            <path d=\"M12 10v6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <span>\n\n                        <strong class=\"dx-hero-stat-number\">\n                            52+\n                        <\/strong>\n\n                        <span class=\"dx-hero-stat-label\">\n                            Projects Delivered\n                        <\/span>\n\n                    <\/span>\n\n                <\/div>\n\n                <!-- CLIENTS -->\n\n                <div class=\"dx-hero-stat\">\n\n                    <span\n                        class=\"dx-hero-stat-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=\"M3 12h18\"><\/path>\n\n                            <path d=\"M12 3c3 3 3 15 0 18\"><\/path>\n\n                            <path d=\"M12 3c-3 3-3 15 0 18\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <span>\n\n                        <strong class=\"dx-hero-stat-number\">\n                            141\n                        <\/strong>\n\n                        <span class=\"dx-hero-stat-label\">\n                            Clients Worldwide\n                        <\/span>\n\n                    <\/span>\n\n                <\/div>\n\n                <!-- TEAM -->\n\n                <div class=\"dx-hero-stat\">\n\n                    <span\n                        class=\"dx-hero-stat-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n\n                            <circle\n                                cx=\"9\"\n                                cy=\"8\"\n                                r=\"3\"\n                            ><\/circle>\n\n                            <circle\n                                cx=\"17\"\n                                cy=\"9\"\n                                r=\"2.5\"\n                            ><\/circle>\n\n                            <path d=\"M3 20c0-4 2.5-6 6-6s6 2 6 6\"><\/path>\n\n                            <path d=\"M14 15c3.4-.5 6 1.2 7 4\"><\/path>\n\n                        <\/svg>\n                    <\/span>\n\n                    <span>\n\n                        <strong class=\"dx-hero-stat-number\">\n                            12+\n                        <\/strong>\n\n                        <span class=\"dx-hero-stat-label\">\n                            Professional Team Members\n                        <\/span>\n\n                    <\/span>\n\n                <\/div>\n\n                <!-- SATISFACTION -->\n\n                <div class=\"dx-hero-stat\">\n\n                    <span\n                        class=\"dx-hero-stat-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n\n                            <path d=\"M7 10v10H3V10z\"><\/path>\n\n                            <path d=\"M7 18h10.4a2 2 0 0 0 1.9-1.4l1.4-5A2 2 0 0 0 18.8 9H15l.5-3.2A2.4 2.4 0 0 0 13.1 3L7 10\"><\/path>\n\n                        <\/svg>\n                    <\/span>\n\n                    <span>\n\n                        <strong class=\"dx-hero-stat-number\">\n                            98%\n                        <\/strong>\n\n                        <span class=\"dx-hero-stat-label\">\n                            Client Satisfaction\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 initDxHomeHero() {\n\n        const hero =\n            document.getElementById(\n                \"dx-home-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 htmlWidget =\n            hero.closest(\n                \".elementor-widget-html\"\n            );\n\n        if (htmlWidget) {\n\n            htmlWidget.classList.add(\n                \"dx-hero-widget-fullwidth\"\n            );\n        }\n\n        const imageWrap =\n            hero.querySelector(\n                \".dx-hero-image-wrap\"\n            );\n\n        const image =\n            hero.querySelector(\n                \".dx-hero-image\"\n            );\n\n        const supportsPointer =\n            window.matchMedia(\n                \"(hover: hover) and (pointer: fine)\"\n            ).matches;\n\n        const reducedMotion =\n            window.matchMedia(\n                \"(prefers-reduced-motion: reduce)\"\n            ).matches;\n\n        if (\n            imageWrap &&\n            image &&\n            supportsPointer &&\n            !reducedMotion\n        ) {\n\n            imageWrap.addEventListener(\n                \"mousemove\",\n                function (event) {\n\n                    const rect =\n                        imageWrap.getBoundingClientRect();\n\n                    const x =\n                        (\n                            event.clientX -\n                            rect.left\n                        ) \/\n                        rect.width;\n\n                    const y =\n                        (\n                            event.clientY -\n                            rect.top\n                        ) \/\n                        rect.height;\n\n                    const rotateY =\n                        (x - 0.5) * 2.4;\n\n                    const rotateX =\n                        (0.5 - y) * 2.4;\n\n                    image.style.animation =\n                        \"none\";\n\n                    image.style.transform =\n                        \"perspective(1200px) \" +\n                        \"rotateX(\" +\n                        rotateX +\n                        \"deg) \" +\n                        \"rotateY(\" +\n                        rotateY +\n                        \"deg) \" +\n                        \"translateY(-7px)\";\n                }\n            );\n\n            imageWrap.addEventListener(\n                \"mouseleave\",\n                function () {\n\n                    image.style.transform =\n                        \"\";\n\n                    image.style.animation =\n                        \"\";\n                }\n            );\n        }\n    }\n\n    if (\n        document.readyState === \"loading\"\n    ) {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxHomeHero\n        );\n\n    } else {\n\n        initDxHomeHero();\n\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1b5ee55 e-con-full e-flex e-con e-parent\" data-id=\"1b5ee55\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-601d8d6 elementor-widget elementor-widget-html\" data-id=\"601d8d6\" 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     D-INDEX \u2014 HOME ABOUT SECTION\n     Author: Mohamed El-Sehemy\n     English LTR Version\n     Elementor Compatible\n========================================================== -->\n\n<style>\n\/* =========================================================\n   HERO STATS OVERLAP\n========================================================= *\/\n\n#dx-home-hero {\n    position: relative;\n    z-index: 5;\n}\n\n#dx-home-hero .dx-hero-stats-wrap {\n    z-index: 50 !important;\n}\n\n.elementor-widget-html:has(#dx-home-hero),\n.elementor-widget-html:has(#dx-home-hero) > .elementor-widget-container {\n    position: relative;\n    z-index: 5;\n    overflow: visible !important;\n}\n\n\/* =========================================================\n   ELEMENTOR FULL WIDTH\n========================================================= *\/\n\n.elementor-widget-html:has(#dx-home-about),\n.elementor-widget-html:has(#dx-home-about) > .elementor-widget-container,\n.dx-about-widget-fullwidth,\n.dx-about-widget-fullwidth > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n\/* =========================================================\n   RESET AND VARIABLES\n========================================================= *\/\n\n#dx-home-about,\n#dx-home-about *,\n#dx-home-about *::before,\n#dx-home-about *::after {\n    box-sizing: border-box;\n}\n\n#dx-home-about {\n    --dx-about-purple: #6942d8;\n    --dx-about-purple-dark: #291264;\n    --dx-about-purple-light: #8d64ef;\n    --dx-about-yellow: #ffc441;\n    --dx-about-dark: #13092d;\n    --dx-about-text: #5f596d;\n    --dx-about-muted: #777181;\n    --dx-about-white: #ffffff;\n\n    position: relative;\n    z-index: 1;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n\n    direction: ltr;\n\n    color: var(--dx-about-dark);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n\n    background:\n        radial-gradient(\n            circle at 12% 15%,\n            rgba(105, 66, 216, 0.065),\n            transparent 25%\n        ),\n        radial-gradient(\n            circle at 92% 78%,\n            rgba(141, 100, 239, 0.055),\n            transparent 25%\n        ),\n        #ffffff;\n}\n\n#dx-home-about a {\n    color: inherit;\n    text-decoration: none;\n}\n\n\/* =========================================================\n   DECORATIVE ELEMENTS\n========================================================= *\/\n\n#dx-home-about .dx-about-pattern {\n    position: absolute;\n    z-index: -2;\n\n    width: 112px;\n    height: 112px;\n\n    opacity: 0.42;\n\n    background-image:\n        radial-gradient(\n            circle,\n            var(--dx-about-purple) 2px,\n            transparent 2.6px\n        );\n\n    background-size: 16px 16px;\n\n    pointer-events: none;\n}\n\n#dx-home-about .dx-about-pattern-two {\n    right: 3%;\n    bottom: 66px;\n}\n\n#dx-home-about .dx-about-orbit {\n    position: absolute;\n    z-index: -2;\n\n    border:\n        1px solid rgba(105, 66, 216, 0.12);\n\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-home-about .dx-about-orbit-one {\n    left: -160px;\n    bottom: -170px;\n\n    width: 390px;\n    height: 390px;\n}\n\n#dx-home-about .dx-about-orbit-two {\n    top: -180px;\n    right: -150px;\n\n    width: 330px;\n    height: 330px;\n}\n\n\/* =========================================================\n   MAIN SECTION\n========================================================= *\/\n\n#dx-home-about .dx-about-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        145px\n        clamp(26px, 5vw, 90px)\n        90px;\n}\n\n#dx-home-about .dx-about-container {\n    width:\n        min(\n            1420px,\n            100%\n        );\n\n    margin:\n        0 auto;\n\n    display:\n        grid;\n\n    grid-template-columns:\n        minmax(440px, 1.02fr)\n        minmax(430px, 0.98fr);\n\n    align-items:\n        center;\n\n    gap:\n        clamp(\n            55px,\n            7vw,\n            105px\n        );\n}\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n#dx-home-about .dx-about-content {\n    position: relative;\n    z-index: 5;\n\n    max-width: 680px;\n\n    justify-self: start;\n\n    text-align: left;\n}\n\n#dx-home-about .dx-about-eyebrow {\n    display:\n        inline-flex;\n\n    align-items:\n        center;\n\n    gap:\n        10px;\n\n    margin-bottom:\n        12px;\n\n    color:\n        var(--dx-about-purple);\n\n    font-size:\n        14px;\n\n    font-weight:\n        800;\n\n    line-height:\n        1.6;\n}\n\n#dx-home-about .dx-about-eyebrow::before {\n    content: \"\";\n\n    width:\n        36px;\n\n    height:\n        2px;\n\n    border-radius:\n        999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-about-yellow),\n            var(--dx-about-purple-light)\n        );\n}\n\n#dx-home-about .dx-about-title {\n    max-width:\n        630px;\n\n    margin:\n        0;\n\n    color:\n        var(--dx-about-dark);\n\n    font-size:\n        clamp(\n            35px,\n            3.5vw,\n            54px\n        );\n\n    font-weight:\n        900;\n\n    line-height:\n        1.25;\n\n    letter-spacing:\n        -1px;\n\n    text-wrap:\n        balance;\n}\n\n#dx-home-about .dx-about-title strong {\n    color:\n        var(--dx-about-purple);\n\n    font-weight:\n        900;\n}\n\n#dx-home-about .dx-about-description {\n    max-width:\n        630px;\n\n    margin:\n        20px\n        0\n        0;\n\n    color:\n        var(--dx-about-text);\n\n    font-size:\n        clamp(\n            15px,\n            1.12vw,\n            17px\n        );\n\n    font-weight:\n        400;\n\n    line-height:\n        1.85;\n\n    text-wrap:\n        pretty;\n}\n\n\/* =========================================================\n   FEATURES\n========================================================= *\/\n\n#dx-home-about .dx-about-features {\n    width:\n        100%;\n\n    margin-top:\n        32px;\n\n    display:\n        grid;\n\n    grid-template-columns:\n        repeat(\n            4,\n            minmax(0, 1fr)\n        );\n\n    gap:\n        14px;\n}\n\n#dx-home-about .dx-about-feature {\n    min-width:\n        0;\n\n    display:\n        flex;\n\n    flex-direction:\n        column;\n\n    align-items:\n        flex-start;\n\n    padding:\n        4px\n        0;\n\n    text-align:\n        left;\n}\n\n#dx-home-about .dx-about-feature-icon {\n    width:\n        47px;\n\n    height:\n        47px;\n\n    flex:\n        0 0 47px;\n\n    display:\n        inline-flex;\n\n    align-items:\n        center;\n\n    justify-content:\n        center;\n\n    margin-bottom:\n        12px;\n\n    border:\n        1px solid rgba(105, 66, 216, 0.14);\n\n    border-radius:\n        14px;\n\n    color:\n        var(--dx-about-purple);\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(105, 66, 216, 0.09),\n            rgba(141, 100, 239, 0.035)\n        );\n\n    box-shadow:\n        0 10px 22px rgba(105, 66, 216, 0.08);\n\n    transition:\n        color 0.25s ease,\n        transform 0.25s ease,\n        background 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-home-about .dx-about-feature:hover\n    .dx-about-feature-icon {\n    color:\n        var(--dx-about-white);\n\n    background:\n        linear-gradient(\n            145deg,\n            var(--dx-about-purple),\n            var(--dx-about-purple-light)\n        );\n\n    box-shadow:\n        0 14px 30px rgba(105, 66, 216, 0.22);\n\n    transform:\n        translateY(-4px);\n}\n\n#dx-home-about .dx-about-feature-icon svg {\n    width:\n        24px;\n\n    height:\n        24px;\n\n    fill:\n        none;\n\n    stroke:\n        currentColor;\n\n    stroke-width:\n        1.75;\n\n    stroke-linecap:\n        round;\n\n    stroke-linejoin:\n        round;\n}\n\n#dx-home-about .dx-about-feature-title {\n    display:\n        block;\n\n    margin:\n        0;\n\n    color:\n        var(--dx-about-dark);\n\n    font-size:\n        14px;\n\n    font-weight:\n        800;\n\n    line-height:\n        1.55;\n}\n\n#dx-home-about .dx-about-feature-text {\n    display:\n        block;\n\n    margin-top:\n        5px;\n\n    color:\n        var(--dx-about-muted);\n\n    font-size:\n        12px;\n\n    font-weight:\n        400;\n\n    line-height:\n        1.6;\n}\n\n\/* =========================================================\n   CTA\n========================================================= *\/\n\n#dx-home-about .dx-about-actions {\n    margin-top:\n        31px;\n\n    display:\n        flex;\n\n    align-items:\n        center;\n\n    justify-content:\n        flex-start;\n}\n\n#dx-home-about .dx-about-button {\n    position:\n        relative;\n\n    isolation:\n        isolate;\n\n    min-width:\n        160px;\n\n    min-height:\n        50px;\n\n    display:\n        inline-flex;\n\n    align-items:\n        center;\n\n    justify-content:\n        center;\n\n    gap:\n        9px;\n\n    padding:\n        0\n        22px;\n\n    overflow:\n        hidden;\n\n    border:\n        1px solid rgba(105, 66, 216, 0.12);\n\n    border-radius:\n        10px;\n\n    color:\n        var(--dx-about-white);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-about-purple),\n            var(--dx-about-purple-light)\n        );\n\n    box-shadow:\n        0 12px 28px rgba(105, 66, 216, 0.24),\n        inset 0 1px 0 rgba(255, 255, 255, 0.18);\n\n    font-size:\n        14px;\n\n    font-weight:\n        800;\n\n    line-height:\n        1;\n\n    white-space:\n        nowrap;\n\n    transition:\n        transform 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-home-about .dx-about-button::before {\n    content: \"\";\n\n    position:\n        absolute;\n\n    z-index:\n        -1;\n\n    top:\n        0;\n\n    left:\n        -110%;\n\n    width:\n        75%;\n\n    height:\n        100%;\n\n    background:\n        linear-gradient(\n            90deg,\n            transparent,\n            rgba(255, 255, 255, 0.25),\n            transparent\n        );\n\n    transform:\n        skewX(-20deg);\n\n    transition:\n        left 0.55s ease;\n}\n\n#dx-home-about .dx-about-button:hover::before {\n    left:\n        135%;\n}\n\n#dx-home-about .dx-about-button:hover,\n#dx-home-about .dx-about-button:focus-visible {\n    transform:\n        translateY(-3px);\n\n    box-shadow:\n        0 17px 35px rgba(105, 66, 216, 0.34),\n        inset 0 1px 0 rgba(255, 255, 255, 0.18);\n}\n\n#dx-home-about .dx-about-button svg {\n    width:\n        17px;\n\n    height:\n        17px;\n\n    fill:\n        none;\n\n    stroke:\n        currentColor;\n\n    stroke-width:\n        1.9;\n\n    stroke-linecap:\n        round;\n\n    stroke-linejoin:\n        round;\n}\n\n\/* =========================================================\n   IMAGE\n========================================================= *\/\n\n#dx-home-about .dx-about-visual {\n    position:\n        relative;\n\n    width:\n        100%;\n\n    min-width:\n        0;\n\n    display:\n        flex;\n\n    align-items:\n        center;\n\n    justify-content:\n        flex-end;\n}\n\n#dx-home-about .dx-about-image-frame {\n    position:\n        relative;\n\n    isolation:\n        isolate;\n\n    width:\n        min(\n            100%,\n            665px\n        );\n\n    padding:\n        12px;\n}\n\n#dx-home-about .dx-about-image-frame::before {\n    content:\n        \"\";\n\n    position:\n        absolute;\n\n    z-index:\n        -2;\n\n    top:\n        4%;\n\n    left:\n        4%;\n\n    width:\n        92%;\n\n    height:\n        92%;\n\n    border-radius:\n        30px;\n\n    background:\n        linear-gradient(\n            135deg,\n            rgba(105, 66, 216, 0.18),\n            rgba(255, 196, 65, 0.08)\n        );\n\n    transform:\n        rotate(-2.5deg)\n        translate(-9px, 8px);\n}\n\n#dx-home-about .dx-about-image-frame::after {\n    content:\n        \"\";\n\n    position:\n        absolute;\n\n    z-index:\n        -3;\n\n    left:\n        10%;\n\n    bottom:\n        -8%;\n\n    width:\n        75%;\n\n    height:\n        28%;\n\n    border-radius:\n        50%;\n\n    background:\n        rgba(105, 66, 216, 0.17);\n\n    filter:\n        blur(40px);\n}\n\n#dx-home-about .dx-about-image {\n    position:\n        relative;\n\n    z-index:\n        2;\n\n    display:\n        block;\n\n    width:\n        100%;\n\n    aspect-ratio:\n        1.42 \/ 1;\n\n    object-fit:\n        cover;\n\n    object-position:\n        center;\n\n    border:\n        1px solid rgba(105, 66, 216, 0.12);\n\n    border-radius:\n        25px;\n\n    background:\n        linear-gradient(\n            135deg,\n            #1c0a4a,\n            #5b2fa6\n        );\n\n    box-shadow:\n        0 28px 55px rgba(30, 9, 76, 0.18);\n\n    transition:\n        transform 0.5s ease,\n        box-shadow 0.5s ease;\n}\n\n#dx-home-about .dx-about-image-frame:hover\n    .dx-about-image {\n    transform:\n        translateY(-5px)\n        scale(1.012);\n\n    box-shadow:\n        0 35px 65px rgba(30, 9, 76, 0.24);\n}\n\n#dx-home-about .dx-about-yellow-ring {\n    position:\n        absolute;\n\n    z-index:\n        5;\n\n    top:\n        -2px;\n\n    right:\n        -3px;\n\n    width:\n        70px;\n\n    height:\n        70px;\n\n    border:\n        12px solid var(--dx-about-yellow);\n\n    border-left-color:\n        transparent;\n\n    border-bottom-color:\n        transparent;\n\n    border-radius:\n        50%;\n\n    filter:\n        drop-shadow(\n            0 8px 12px rgba(255, 196, 65, 0.24)\n        );\n\n    transform:\n        rotate(12deg);\n\n    pointer-events:\n        none;\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1050px) {\n\n    #dx-home-about .dx-about-main {\n        padding-top:\n            158px;\n    }\n\n    #dx-home-about .dx-about-container {\n        grid-template-columns:\n            minmax(400px, 1fr)\n            minmax(390px, 1fr);\n\n        gap:\n            45px;\n    }\n\n    #dx-home-about .dx-about-features {\n        grid-template-columns:\n            repeat(\n                2,\n                minmax(0, 1fr)\n            );\n\n        gap:\n            22px\n            18px;\n    }\n\n    #dx-home-about .dx-about-feature {\n        flex-direction:\n            row;\n\n        align-items:\n            flex-start;\n\n        gap:\n            11px;\n    }\n\n    #dx-home-about .dx-about-feature-icon {\n        margin-bottom:\n            0;\n    }\n}\n\n\/* =========================================================\n   SMALL TABLET\n========================================================= *\/\n\n@media (max-width: 850px) {\n\n    #dx-home-about .dx-about-main {\n        padding:\n            215px\n            28px\n            75px;\n    }\n\n    #dx-home-about .dx-about-container {\n        grid-template-columns:\n            1fr;\n\n        gap:\n            52px;\n    }\n\n    #dx-home-about .dx-about-content {\n        max-width:\n            720px;\n\n        margin:\n            0 auto;\n\n        justify-self:\n            center;\n\n        text-align:\n            center;\n    }\n\n    #dx-home-about .dx-about-eyebrow {\n        justify-content:\n            center;\n    }\n\n    #dx-home-about .dx-about-title,\n    #dx-home-about .dx-about-description {\n        margin-right:\n            auto;\n\n        margin-left:\n            auto;\n    }\n\n    #dx-home-about .dx-about-features {\n        max-width:\n            670px;\n\n        margin-right:\n            auto;\n\n        margin-left:\n            auto;\n    }\n\n    #dx-home-about .dx-about-feature {\n        text-align:\n            left;\n    }\n\n    #dx-home-about .dx-about-actions {\n        justify-content:\n            center;\n    }\n\n    #dx-home-about .dx-about-visual {\n        grid-row:\n            2;\n\n        justify-content:\n            center;\n    }\n\n    #dx-home-about .dx-about-image-frame {\n        width:\n            min(\n                100%,\n                680px\n            );\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 600px) {\n\n    #dx-home-about .dx-about-main {\n        padding:\n            218px\n            20px\n            65px;\n    }\n\n    #dx-home-about .dx-about-container {\n        gap:\n            40px;\n    }\n\n    #dx-home-about .dx-about-eyebrow {\n        font-size:\n            13px;\n    }\n\n    #dx-home-about .dx-about-title {\n        font-size:\n            clamp(\n                29px,\n                8.2vw,\n                39px\n            );\n\n        line-height:\n            1.35;\n    }\n\n    #dx-home-about .dx-about-description {\n        margin-top:\n            15px;\n\n        font-size:\n            15px;\n\n        line-height:\n            1.8;\n    }\n\n    #dx-home-about .dx-about-features {\n        margin-top:\n            27px;\n\n        grid-template-columns:\n            repeat(\n                2,\n                minmax(0, 1fr)\n            );\n\n        gap:\n            20px\n            13px;\n    }\n\n    #dx-home-about .dx-about-feature {\n        min-width:\n            0;\n\n        flex-direction:\n            column;\n\n        align-items:\n            center;\n\n        gap:\n            0;\n\n        text-align:\n            center;\n    }\n\n    #dx-home-about .dx-about-feature-icon {\n        width:\n            44px;\n\n        height:\n            44px;\n\n        flex-basis:\n            44px;\n\n        margin-bottom:\n            9px;\n\n        border-radius:\n            12px;\n    }\n\n    #dx-home-about .dx-about-feature-icon svg {\n        width:\n            22px;\n\n        height:\n            22px;\n    }\n\n    #dx-home-about .dx-about-feature-title {\n        font-size:\n            13px;\n    }\n\n    #dx-home-about .dx-about-feature-text {\n        font-size:\n            11px;\n\n        line-height:\n            1.55;\n    }\n\n    #dx-home-about .dx-about-actions {\n        margin-top:\n            27px;\n    }\n\n    #dx-home-about .dx-about-button {\n        width:\n            100%;\n\n        min-height:\n            52px;\n    }\n\n    #dx-home-about .dx-about-image-frame {\n        padding:\n            7px;\n    }\n\n    #dx-home-about .dx-about-image {\n        aspect-ratio:\n            1.16 \/ 1;\n\n        border-radius:\n            19px;\n    }\n\n    #dx-home-about .dx-about-image-frame::before {\n        border-radius:\n            22px;\n    }\n\n    #dx-home-about .dx-about-yellow-ring {\n        width:\n            52px;\n\n        height:\n            52px;\n\n        border-width:\n            9px;\n    }\n}\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 380px) {\n\n    #dx-home-about .dx-about-main {\n        padding-right:\n            16px;\n\n        padding-left:\n            16px;\n    }\n\n    #dx-home-about .dx-about-features {\n        gap:\n            18px\n            10px;\n    }\n\n    #dx-home-about .dx-about-feature-title {\n        font-size:\n            12px;\n    }\n\n    #dx-home-about .dx-about-feature-text {\n        font-size:\n            10px;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-home-about a:focus-visible {\n    outline:\n        2px solid var(--dx-about-yellow);\n\n    outline-offset:\n        5px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n\n    #dx-home-about *,\n    #dx-home-about *::before,\n    #dx-home-about *::after {\n        animation-duration:\n            0.01ms !important;\n\n        animation-iteration-count:\n            1 !important;\n\n        transition-duration:\n            0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-home-about\"\n    aria-labelledby=\"dx-about-title\"\n    dir=\"ltr\"\n>\n\n    <span\n        class=\"dx-about-pattern dx-about-pattern-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-about-orbit dx-about-orbit-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-about-orbit dx-about-orbit-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-about-main\">\n\n        <div class=\"dx-about-container\">\n\n            <!-- CONTENT -->\n\n            <div class=\"dx-about-content\">\n\n                <span class=\"dx-about-eyebrow\">\n                    About D-INDEX\n                <\/span>\n\n                <h2\n                    id=\"dx-about-title\"\n                    class=\"dx-about-title\"\n                >\n                    Digital Solutions Built to\n                    <strong>Move Your Business Forward<\/strong>\n                <\/h2>\n\n                <p class=\"dx-about-description\">\n                    We turn business ideas into reliable digital products\n                    through website development, mobile applications,\n                    e-commerce solutions, and custom software built around\n                    real business needs.\n                <\/p>\n\n                <div class=\"dx-about-features\">\n\n                    <!-- SPECIALIZED TEAM -->\n\n                    <article class=\"dx-about-feature\">\n\n                        <span\n                            class=\"dx-about-feature-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M12 3v3\"><\/path>\n                                <path d=\"M12 18v3\"><\/path>\n                                <path d=\"M3 12h3\"><\/path>\n                                <path d=\"M18 12h3\"><\/path>\n\n                                <circle\n                                    cx=\"12\"\n                                    cy=\"12\"\n                                    r=\"4\"\n                                ><\/circle>\n\n                                <path d=\"m5.6 5.6 2.1 2.1\"><\/path>\n                                <path d=\"m16.3 16.3 2.1 2.1\"><\/path>\n                                <path d=\"m18.4 5.6-2.1 2.1\"><\/path>\n                                <path d=\"m7.7 16.3-2.1 2.1\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span>\n\n                            <strong class=\"dx-about-feature-title\">\n                                Specialized Team\n                            <\/strong>\n\n                            <span class=\"dx-about-feature-text\">\n                                Expertise across digital disciplines\n                            <\/span>\n\n                        <\/span>\n\n                    <\/article>\n\n                    <!-- EXPERIENCE -->\n\n                    <article class=\"dx-about-feature\">\n\n                        <span\n                            class=\"dx-about-feature-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M9 18h6\"><\/path>\n                                <path d=\"M10 22h4\"><\/path>\n                                <path d=\"M8.5 14.5C6.9 13.4 6 11.5 6 9.5a6 6 0 1 1 12 0c0 2-.9 3.9-2.5 5\"><\/path>\n                                <path d=\"M9 15h6v3H9z\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span>\n\n                            <strong class=\"dx-about-feature-title\">\n                                Proven Experience\n                            <\/strong>\n\n                            <span class=\"dx-about-feature-text\">\n                                Successful projects across the region\n                            <\/span>\n\n                        <\/span>\n\n                    <\/article>\n\n                    <!-- SUPPORT -->\n\n                    <article class=\"dx-about-feature\">\n\n                        <span\n                            class=\"dx-about-feature-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M12 21s7-4 7-10V5l-7-3-7 3v6c0 6 7 10 7 10z\"><\/path>\n                                <path d=\"m9 11 2 2 4-4\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span>\n\n                            <strong class=\"dx-about-feature-title\">\n                                Ongoing Support\n                            <\/strong>\n\n                            <span class=\"dx-about-feature-text\">\n                                Guidance throughout every stage\n                            <\/span>\n\n                        <\/span>\n\n                    <\/article>\n\n                    <!-- INNOVATION -->\n\n                    <article class=\"dx-about-feature\">\n\n                        <span\n                            class=\"dx-about-feature-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M12 2v4\"><\/path>\n                                <path d=\"M12 18v4\"><\/path>\n                                <path d=\"M4.9 4.9l2.8 2.8\"><\/path>\n                                <path d=\"M16.3 16.3l2.8 2.8\"><\/path>\n                                <path d=\"M2 12h4\"><\/path>\n                                <path d=\"M18 12h4\"><\/path>\n                                <path d=\"M4.9 19.1l2.8-2.8\"><\/path>\n                                <path d=\"M16.3 7.7l2.8-2.8\"><\/path>\n\n                                <circle\n                                    cx=\"12\"\n                                    cy=\"12\"\n                                    r=\"4\"\n                                ><\/circle>\n                            <\/svg>\n                        <\/span>\n\n                        <span>\n\n                            <strong class=\"dx-about-feature-title\">\n                                Modern Solutions\n                            <\/strong>\n\n                            <span class=\"dx-about-feature-text\">\n                                Built with current technologies\n                            <\/span>\n\n                        <\/span>\n\n                    <\/article>\n\n                <\/div>\n\n                <div class=\"dx-about-actions\">\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/about\/\"\n                        class=\"dx-about-button\"\n                    >\n                        <span>\n                            Learn More About Us\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            <!-- IMAGE -->\n\n            <div class=\"dx-about-visual\">\n\n                <div class=\"dx-about-image-frame\">\n\n                    <span\n                        class=\"dx-about-yellow-ring\"\n                        aria-hidden=\"true\"\n                    ><\/span>\n\n                    <img loading=\"lazy\"\n                        src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/07\/about.jpg\"\n                        class=\"dx-about-image\"\n                        alt=\"D-INDEX digital solutions and software development team\"\n                        width=\"1536\"\n                        height=\"1024\"\n                        loading=\"lazy\"\n                        decoding=\"async\"\n                    >\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 initDxHomeAbout() {\n\n        const aboutSection =\n            document.getElementById(\n                \"dx-home-about\"\n            );\n\n        if (\n            !aboutSection ||\n            aboutSection.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        aboutSection.dataset.dxInitialized =\n            \"true\";\n\n        const htmlWidget =\n            aboutSection.closest(\n                \".elementor-widget-html\"\n            );\n\n        if (htmlWidget) {\n\n            htmlWidget.classList.add(\n                \"dx-about-widget-fullwidth\"\n            );\n        }\n\n        const hero =\n            document.getElementById(\n                \"dx-home-hero\"\n            );\n\n        if (hero) {\n\n            const heroWidget =\n                hero.closest(\n                    \".elementor-widget-html\"\n                );\n\n            if (heroWidget) {\n\n                heroWidget.style.position =\n                    \"relative\";\n\n                heroWidget.style.zIndex =\n                    \"5\";\n\n                heroWidget.style.overflow =\n                    \"visible\";\n            }\n        }\n    }\n\n    if (\n        document.readyState === \"loading\"\n    ) {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxHomeAbout\n        );\n\n    } else {\n\n        initDxHomeAbout();\n\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3e272ff e-con-full e-flex e-con e-parent\" data-id=\"3e272ff\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-18c514a elementor-widget elementor-widget-html\" data-id=\"18c514a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- =========================================================\n     HOME SERVICES SECTION\n     Author: Mohamed El-Sehemy\n     English LTR Version\n     UPDATED: Social Media Management\n========================================================== -->\n\n<style>\n.elementor-widget-html:has(#dx-home-services),\n.elementor-widget-html:has(#dx-home-services) > .elementor-widget-container,\n.dx-services-widget-fullwidth,\n.dx-services-widget-fullwidth > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n#dx-home-services,\n#dx-home-services *,\n#dx-home-services *::before,\n#dx-home-services *::after {\n    box-sizing: border-box;\n}\n\n#dx-home-services {\n    --dx-services-dark: #08001f;\n    --dx-services-dark-2: #110331;\n    --dx-services-purple: #6942d8;\n    --dx-services-purple-light: #9268f2;\n    --dx-services-yellow: #ffc441;\n    --dx-services-white: #ffffff;\n    --dx-services-text: rgba(255, 255, 255, 0.76);\n    --dx-services-border: rgba(146, 104, 242, 0.48);\n    --dx-services-border-hover: rgba(176, 141, 255, 0.92);\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n\n    direction: ltr;\n\n    color: var(--dx-services-white);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n\n    background:\n        radial-gradient(\n            circle at 50% 20%,\n            rgba(105, 66, 216, 0.19),\n            transparent 31%\n        ),\n        radial-gradient(\n            circle at 0% 100%,\n            rgba(105, 66, 216, 0.18),\n            transparent 29%\n        ),\n        linear-gradient(\n            145deg,\n            var(--dx-services-dark-2),\n            var(--dx-services-dark)\n        );\n}\n\n#dx-home-services a {\n    color: inherit;\n    text-decoration: none;\n}\n\n#dx-home-services .dx-services-main {\n    width: 100%;\n\n    padding:\n        92px\n        clamp(24px, 5vw, 90px)\n        75px;\n}\n\n#dx-home-services .dx-services-container {\n    width: min(1480px, 100%);\n    margin: 0 auto;\n}\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n#dx-home-services .dx-services-header {\n    max-width: 780px;\n\n    margin: 0 auto 48px;\n\n    text-align: center;\n}\n\n#dx-home-services .dx-services-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-services-yellow);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.5;\n}\n\n#dx-home-services .dx-services-eyebrow::before,\n#dx-home-services .dx-services-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-services-yellow),\n            var(--dx-services-purple-light)\n        );\n}\n\n#dx-home-services .dx-services-title {\n    margin: 0;\n\n    color: var(--dx-services-white);\n\n    font-size: clamp(35px, 3.7vw, 56px);\n    font-weight: 900;\n    line-height: 1.22;\n    letter-spacing: -1px;\n}\n\n#dx-home-services .dx-services-description {\n    max-width: 680px;\n\n    margin: 16px auto 0;\n\n    color: var(--dx-services-text);\n\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.8;\n}\n\n\/* =========================================================\n   GRID\n========================================================= *\/\n\n#dx-home-services .dx-services-grid {\n    width: 100%;\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(3, minmax(0, 1fr));\n\n    gap: 20px;\n}\n\n\/* =========================================================\n   CARD\n========================================================= *\/\n\n#dx-home-services .dx-service-card {\n    position: relative;\n\n    min-width: 0;\n    min-height: 350px;\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    padding:\n        34px\n        28px\n        27px;\n\n    overflow: hidden;\n\n    border: 1px solid var(--dx-services-border);\n    border-radius: 19px;\n\n    background:\n        linear-gradient(\n            160deg,\n            rgba(255, 255, 255, 0.058),\n            rgba(255, 255, 255, 0.022)\n        );\n\n    text-align: center;\n\n    transition:\n        transform 0.32s ease,\n        border-color 0.32s ease,\n        background 0.32s ease,\n        box-shadow 0.32s ease;\n}\n\n#dx-home-services .dx-service-card:hover,\n#dx-home-services .dx-service-card:focus-within {\n    border-color: var(--dx-services-border-hover);\n\n    background:\n        linear-gradient(\n            145deg,\n            var(--dx-services-purple-light),\n            var(--dx-services-purple)\n        );\n\n    box-shadow:\n        0 25px 52px rgba(105, 66, 216, 0.38);\n\n    transform: translateY(-10px);\n}\n\n\/* =========================================================\n   ICON\n========================================================= *\/\n\n#dx-home-services .dx-service-icon {\n    width: 70px;\n    height: 70px;\n    flex: 0 0 70px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-bottom: 25px;\n\n    border: 1px solid rgba(146, 104, 242, 0.52);\n    border-radius: 19px;\n\n    color: var(--dx-services-purple-light);\n\n    background: rgba(105, 66, 216, 0.10);\n\n    transition:\n        color 0.25s ease,\n        background 0.25s ease,\n        transform 0.25s ease;\n}\n\n#dx-home-services .dx-service-card:hover .dx-service-icon,\n#dx-home-services .dx-service-card:focus-within .dx-service-icon {\n    color: #ffffff;\n\n    background: rgba(255, 255, 255, 0.14);\n\n    transform:\n        translateY(-5px)\n        rotate(3deg);\n}\n\n#dx-home-services .dx-service-icon svg {\n    width: 35px;\n    height: 35px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.65;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   CARD CONTENT\n========================================================= *\/\n\n#dx-home-services .dx-service-card-title {\n    margin: 0;\n\n    color: #ffffff;\n\n    font-size: 20px;\n    font-weight: 800;\n    line-height: 1.45;\n}\n\n#dx-home-services .dx-service-card-description {\n    margin: 14px 0 0;\n\n    color: var(--dx-services-text);\n\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 1.8;\n}\n\n#dx-home-services .dx-service-link {\n    margin-top: auto;\n\n    padding-top: 25px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 8px;\n\n    color: var(--dx-services-purple-light);\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.4;\n\n    transition:\n        color 0.25s ease,\n        transform 0.25s ease;\n}\n\n#dx-home-services .dx-service-card:hover .dx-service-link,\n#dx-home-services .dx-service-card:focus-within .dx-service-link {\n    color: #ffffff;\n}\n\n#dx-home-services .dx-service-link:hover {\n    transform: translateX(3px);\n}\n\n#dx-home-services .dx-service-link svg {\n    width: 16px;\n    height: 16px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   MAIN CTA\n========================================================= *\/\n\n#dx-home-services .dx-services-actions {\n    margin-top: 44px;\n\n    display: flex;\n    justify-content: center;\n}\n\n#dx-home-services .dx-services-button {\n    min-width: 175px;\n    min-height: 52px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    padding: 0 23px;\n\n    border: 1px solid rgba(146, 104, 242, 0.52);\n    border-radius: 11px;\n\n    color: #ffffff;\n\n    background: rgba(255, 255, 255, 0.055);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1;\n\n    transition:\n        background 0.25s ease,\n        transform 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-home-services .dx-services-button:hover,\n#dx-home-services .dx-services-button:focus-visible {\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-services-purple),\n            var(--dx-services-purple-light)\n        );\n\n    box-shadow:\n        0 15px 32px rgba(105, 66, 216, 0.28);\n\n    transform: translateY(-3px);\n}\n\n#dx-home-services .dx-services-button svg {\n    width: 18px;\n    height: 18px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1050px) {\n\n    #dx-home-services .dx-services-grid {\n        grid-template-columns:\n            repeat(2, minmax(0, 1fr));\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 600px) {\n\n    #dx-home-services .dx-services-main {\n        padding:\n            64px\n            20px\n            58px;\n    }\n\n    #dx-home-services .dx-services-eyebrow {\n        font-size: 13px;\n    }\n\n    #dx-home-services .dx-services-title {\n        font-size:\n            clamp(\n                29px,\n                9vw,\n                40px\n            );\n\n        line-height: 1.3;\n    }\n\n    #dx-home-services .dx-services-description {\n        font-size: 15px;\n        line-height: 1.75;\n    }\n\n    #dx-home-services .dx-services-grid {\n        grid-template-columns: 1fr;\n\n        gap: 15px;\n    }\n\n    #dx-home-services .dx-service-card {\n        min-height: 0;\n\n        padding:\n            27px\n            22px\n            23px;\n    }\n\n    #dx-home-services .dx-service-card-title {\n        font-size: 19px;\n    }\n\n    #dx-home-services .dx-service-card-description {\n        font-size: 14px;\n    }\n\n    #dx-home-services .dx-services-button {\n        width: 100%;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-home-services a:focus-visible {\n    outline:\n        2px solid var(--dx-services-yellow);\n\n    outline-offset:\n        5px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n\n    #dx-home-services *,\n    #dx-home-services *::before,\n    #dx-home-services *::after {\n        animation-duration:\n            0.01ms !important;\n\n        animation-iteration-count:\n            1 !important;\n\n        transition-duration:\n            0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-home-services\"\n    aria-labelledby=\"dx-home-services-title\"\n    dir=\"ltr\"\n>\n\n    <div class=\"dx-services-main\">\n\n        <div class=\"dx-services-container\">\n\n            <header class=\"dx-services-header\">\n\n                <span class=\"dx-services-eyebrow\">\n                    Our Digital Services\n                <\/span>\n\n                <h2\n                    id=\"dx-home-services-title\"\n                    class=\"dx-services-title\"\n                >\n                    Digital Solutions Built Around Your Business\n                <\/h2>\n\n                <p class=\"dx-services-description\">\n                    From websites and mobile apps to e-commerce,\n                    digital transformation, branding, and social media,\n                    we deliver practical digital solutions designed to\n                    support growth and strengthen your online presence.\n                <\/p>\n\n            <\/header>\n\n            <div class=\"dx-services-grid\">\n\n                <!-- =================================================\n                     LMS\n                ================================================== -->\n\n                <article class=\"dx-service-card\">\n\n                    <span\n                        class=\"dx-service-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                    <h3 class=\"dx-service-card-title\">\n                        Learning Management Systems\n                    <\/h3>\n\n                    <p class=\"dx-service-card-description\">\n                        User-friendly learning platforms built to manage\n                        courses, educational content, instructors,\n                        and learners from one centralized system.\n                    <\/p>\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/lms\/\"\n                        class=\"dx-service-link\"\n                    >\n                        <span>Explore Service<\/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                <\/article>\n\n                <!-- =================================================\n                     BRAND IDENTITY\n                ================================================== -->\n\n                <article class=\"dx-service-card\">\n\n                    <span\n                        class=\"dx-service-icon\"\n                        aria-hidden=\"true\"\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                        <\/svg>\n                    <\/span>\n\n                    <h3 class=\"dx-service-card-title\">\n                        Visual & Brand Identity Design\n                    <\/h3>\n\n                    <p class=\"dx-service-card-description\">\n                        Distinctive visual identities that communicate\n                        your brand clearly and create a consistent,\n                        professional presence across digital channels.\n                    <\/p>\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/visual-and-brand-identity-design\/\"\n                        class=\"dx-service-link\"\n                    >\n                        <span>Explore Service<\/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                <\/article>\n\n                <!-- =================================================\n                     WEBSITE DESIGN\n                ================================================== -->\n\n                <article class=\"dx-service-card\">\n\n                    <span\n                        class=\"dx-service-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <rect\n                                x=\"3\"\n                                y=\"4\"\n                                width=\"18\"\n                                height=\"16\"\n                                rx=\"2\"\n                            ><\/rect>\n\n                            <path d=\"M3 8h18\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <h3 class=\"dx-service-card-title\">\n                        Website Design & Development\n                    <\/h3>\n\n                    <p class=\"dx-service-card-description\">\n                        Fast, responsive, and search-friendly websites\n                        designed to deliver a strong user experience and\n                        support your business goals.\n                    <\/p>\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/website-design-and-development\/\"\n                        class=\"dx-service-link\"\n                    >\n                        <span>Explore Service<\/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                <\/article>\n\n                <!-- =================================================\n                     DIGITAL TRANSFORMATION\n                ================================================== -->\n\n                <article class=\"dx-service-card\">\n\n                    <span\n                        class=\"dx-service-icon\"\n                        aria-hidden=\"true\"\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                        <\/svg>\n                    <\/span>\n\n                    <h3 class=\"dx-service-card-title\">\n                        Smart Digital Transformation\n                    <\/h3>\n\n                    <p class=\"dx-service-card-description\">\n                        Integrated digital systems, automation, and\n                        technology solutions that improve efficiency\n                        and help businesses scale smarter.\n                    <\/p>\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/smart-digital-transformation\/\"\n                        class=\"dx-service-link\"\n                    >\n                        <span>Explore Service<\/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                <\/article>\n\n                <!-- =================================================\n                     MOBILE APPS\n                ================================================== -->\n\n                <article class=\"dx-service-card\">\n\n                    <span\n                        class=\"dx-service-icon\"\n                        aria-hidden=\"true\"\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                        <\/svg>\n                    <\/span>\n\n                    <h3 class=\"dx-service-card-title\">\n                        Mobile App Design & Development\n                    <\/h3>\n\n                    <p class=\"dx-service-card-description\">\n                        Professional iOS and Android applications built\n                        around usability, performance, scalability,\n                        and a smooth customer experience.\n                    <\/p>\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/app-design-development\/\"\n                        class=\"dx-service-link\"\n                    >\n                        <span>Explore Service<\/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                <\/article>\n\n                <!-- =================================================\n                     SOCIAL MEDIA\n                ================================================== -->\n\n                <article class=\"dx-service-card\">\n\n                    <span\n                        class=\"dx-service-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n\n                            <rect\n                                x=\"3\"\n                                y=\"3\"\n                                width=\"18\"\n                                height=\"18\"\n                                rx=\"5\"\n                            ><\/rect>\n\n                            <circle\n                                cx=\"12\"\n                                cy=\"12\"\n                                r=\"4\"\n                            ><\/circle>\n\n                            <path d=\"M17.5 6.5h.01\"><\/path>\n\n                        <\/svg>\n                    <\/span>\n\n                    <h3 class=\"dx-service-card-title\">\n                        Social Media Management\n                    <\/h3>\n\n                    <p class=\"dx-service-card-description\">\n                        Strategic social media management covering\n                        content planning, copywriting, creative design,\n                        publishing, engagement, and performance analysis.\n                    <\/p>\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/social-media\/\"\n                        class=\"dx-service-link\"\n                    >\n                        <span>Explore Service<\/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                <\/article>\n\n            <\/div>\n\n            <!-- =====================================================\n                 ALL SERVICES CTA\n            ====================================================== -->\n\n            <div class=\"dx-services-actions\">\n\n                <a\n                    href=\"https:\/\/dindex.net\/en\/services\/\"\n                    class=\"dx-services-button\"\n                >\n                    <span>\n                        View All Services\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 initDxHomeServices() {\n\n        const section =\n            document.getElementById(\n                \"dx-home-services\"\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 htmlWidget =\n            section.closest(\n                \".elementor-widget-html\"\n            );\n\n        if (htmlWidget) {\n\n            htmlWidget.classList.add(\n                \"dx-services-widget-fullwidth\"\n            );\n        }\n    }\n\n    if (\n        document.readyState === \"loading\"\n    ) {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxHomeServices\n        );\n\n    } else {\n\n        initDxHomeServices();\n\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7fe0a4a e-con-full e-flex e-con e-parent\" data-id=\"7fe0a4a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ec49eee elementor-widget elementor-widget-html\" data-id=\"ec49eee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- =========================================================\n     HOME WHY CHOOSE US SECTION\n     Author: Mohamed El-Sehemy\n     English LTR Version\n     Elementor Compatible\n========================================================== -->\n\n<style>\n\/* =========================================================\n   ELEMENTOR FULL WIDTH\n========================================================= *\/\n\n.elementor-widget-html:has(#dx-home-why),\n.elementor-widget-html:has(#dx-home-why) > .elementor-widget-container,\n.dx-why-widget-fullwidth,\n.dx-why-widget-fullwidth > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n\/* =========================================================\n   RESET & VARIABLES\n========================================================= *\/\n\n#dx-home-why,\n#dx-home-why *,\n#dx-home-why *::before,\n#dx-home-why *::after {\n    box-sizing: border-box;\n}\n\n#dx-home-why {\n    --dx-why-purple: #6942d8;\n    --dx-why-purple-dark: #30156f;\n    --dx-why-purple-light: #9168ef;\n    --dx-why-yellow: #ffc441;\n    --dx-why-dark: #150a30;\n    --dx-why-text: #615b6e;\n    --dx-why-muted: #817b8b;\n    --dx-why-white: #ffffff;\n    --dx-why-border: rgba(105, 66, 216, 0.13);\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n\n    direction: ltr;\n\n    color: var(--dx-why-dark);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n\n    background:\n        radial-gradient(\n            circle at 12% 20%,\n            rgba(105, 66, 216, 0.055),\n            transparent 24%\n        ),\n        radial-gradient(\n            circle at 90% 85%,\n            rgba(145, 104, 239, 0.05),\n            transparent 27%\n        ),\n        #ffffff;\n}\n\n\/* =========================================================\n   DECORATIONS\n========================================================= *\/\n\n#dx-home-why .dx-why-orbit {\n    position: absolute;\n    z-index: -3;\n\n    border: 1px solid rgba(105, 66, 216, 0.10);\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-home-why .dx-why-orbit-one {\n    top: -190px;\n    right: -170px;\n\n    width: 390px;\n    height: 390px;\n}\n\n#dx-home-why .dx-why-orbit-two {\n    left: -185px;\n    bottom: -220px;\n\n    width: 430px;\n    height: 430px;\n}\n\n#dx-home-why .dx-why-dots {\n    position: absolute;\n    z-index: -2;\n\n    width: 120px;\n    height: 120px;\n\n    opacity: 0.25;\n\n    background-image:\n        radial-gradient(\n            circle,\n            var(--dx-why-purple-light) 2px,\n            transparent 2.6px\n        );\n\n    background-size: 17px 17px;\n\n    pointer-events: none;\n}\n\n#dx-home-why .dx-why-dots-one {\n    top: 55px;\n    left: 4%;\n}\n\n#dx-home-why .dx-why-dots-two {\n    right: 3%;\n    bottom: 35px;\n}\n\n\/* =========================================================\n   MAIN SECTION\n========================================================= *\/\n\n#dx-home-why .dx-why-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        88px\n        clamp(24px, 5vw, 90px)\n        94px;\n}\n\n#dx-home-why .dx-why-container {\n    width: min(1450px, 100%);\n    margin: 0 auto;\n}\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n#dx-home-why .dx-why-header {\n    max-width: 780px;\n\n    margin: 0 auto 58px;\n\n    text-align: center;\n}\n\n#dx-home-why .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: var(--dx-why-purple);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.6;\n}\n\n#dx-home-why .dx-why-eyebrow::before,\n#dx-home-why .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-home-why .dx-why-title {\n    margin: 0;\n\n    color: var(--dx-why-dark);\n\n    font-size: clamp(35px, 3.7vw, 56px);\n    font-weight: 900;\n    line-height: 1.25;\n    letter-spacing: -1px;\n\n    text-wrap: balance;\n}\n\n#dx-home-why .dx-why-description {\n    max-width: 680px;\n\n    margin: 16px auto 0;\n\n    color: var(--dx-why-text);\n\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.8;\n}\n\n\/* =========================================================\n   FEATURES TRACK\n========================================================= *\/\n\n#dx-home-why .dx-why-grid {\n    position: relative;\n\n    width: 100%;\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(5, minmax(0, 1fr));\n\n    align-items: start;\n\n    gap: 28px;\n}\n\n#dx-home-why .dx-why-grid::before {\n    content: \"\";\n\n    position: absolute;\n\n    top: 35px;\n    right: 9%;\n    left: 9%;\n\n    height: 1px;\n\n    background:\n        repeating-linear-gradient(\n            90deg,\n            rgba(105, 66, 216, 0.28) 0,\n            rgba(105, 66, 216, 0.28) 6px,\n            transparent 6px,\n            transparent 12px\n        );\n\n    pointer-events: none;\n}\n\n\/* =========================================================\n   FEATURE ITEM\n========================================================= *\/\n\n#dx-home-why .dx-why-item {\n    position: relative;\n    z-index: 2;\n\n    min-width: 0;\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    text-align: center;\n}\n\n#dx-home-why .dx-why-icon-wrap {\n    position: relative;\n\n    width: 72px;\n    height: 72px;\n    flex: 0 0 72px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-bottom: 21px;\n\n    border-radius: 21px;\n\n    color: var(--dx-why-white);\n\n    background:\n        linear-gradient(\n            145deg,\n            var(--dx-why-purple-light),\n            var(--dx-why-purple)\n        );\n\n    box-shadow:\n        0 15px 32px rgba(105, 66, 216, 0.25),\n        inset 0 1px 0 rgba(255, 255, 255, 0.20);\n\n    transition:\n        transform 0.3s ease,\n        box-shadow 0.3s ease;\n}\n\n#dx-home-why .dx-why-icon-wrap::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -1;\n\n    inset: -8px;\n\n    border: 1px solid rgba(105, 66, 216, 0.13);\n    border-radius: 25px;\n\n    background: rgba(105, 66, 216, 0.04);\n\n    transition:\n        transform 0.3s ease,\n        border-color 0.3s ease;\n}\n\n#dx-home-why .dx-why-item:hover .dx-why-icon-wrap {\n    transform:\n        translateY(-7px)\n        rotate(3deg);\n\n    box-shadow:\n        0 21px 42px rgba(105, 66, 216, 0.34),\n        inset 0 1px 0 rgba(255, 255, 255, 0.20);\n}\n\n#dx-home-why .dx-why-item:hover .dx-why-icon-wrap::before {\n    border-color: rgba(105, 66, 216, 0.30);\n\n    transform: scale(1.06);\n}\n\n#dx-home-why .dx-why-icon-wrap svg {\n    width: 33px;\n    height: 33px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.7;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-home-why .dx-why-item-title {\n    margin: 0;\n\n    color: var(--dx-why-dark);\n\n    font-size: 18px;\n    font-weight: 800;\n    line-height: 1.45;\n\n    text-wrap: balance;\n}\n\n#dx-home-why .dx-why-item-description {\n    max-width: 230px;\n\n    margin: 10px auto 0;\n\n    color: var(--dx-why-text);\n\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 1.75;\n\n    text-wrap: pretty;\n}\n\n\/* =========================================================\n   BOTTOM NOTE\n========================================================= *\/\n\n#dx-home-why .dx-why-note {\n    width: min(800px, 100%);\n\n    margin: 58px auto 0;\n\n    padding:\n        20px\n        25px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 12px;\n\n    border: 1px solid rgba(105, 66, 216, 0.12);\n    border-radius: 16px;\n\n    color: var(--dx-why-text);\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(105, 66, 216, 0.055),\n            rgba(145, 104, 239, 0.02)\n        );\n\n    box-shadow:\n        0 15px 35px rgba(33, 13, 77, 0.07);\n\n    font-size: 15px;\n    font-weight: 600;\n    line-height: 1.75;\n\n    text-align: center;\n}\n\n#dx-home-why .dx-why-note-icon {\n    width: 36px;\n    height: 36px;\n    flex: 0 0 36px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 10px;\n\n    color: var(--dx-why-purple);\n\n    background: rgba(105, 66, 216, 0.09);\n}\n\n#dx-home-why .dx-why-note-icon 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\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1100px) {\n\n    #dx-home-why .dx-why-grid {\n        grid-template-columns:\n            repeat(3, minmax(0, 1fr));\n\n        gap:\n            45px\n            28px;\n    }\n\n    #dx-home-why .dx-why-grid::before {\n        display: none;\n    }\n\n    #dx-home-why .dx-why-item:nth-child(4),\n    #dx-home-why .dx-why-item:nth-child(5) {\n        transform: translateX(50%);\n    }\n}\n\n\/* =========================================================\n   SMALL TABLET\n========================================================= *\/\n\n@media (max-width: 850px) {\n\n    #dx-home-why .dx-why-main {\n        padding:\n            75px\n            28px\n            78px;\n    }\n\n    #dx-home-why .dx-why-header {\n        margin-bottom:\n            46px;\n    }\n\n    #dx-home-why .dx-why-grid {\n        grid-template-columns:\n            repeat(2, minmax(0, 1fr));\n\n        gap:\n            42px\n            24px;\n    }\n\n    #dx-home-why .dx-why-item:nth-child(4),\n    #dx-home-why .dx-why-item:nth-child(5) {\n        transform: none;\n    }\n\n    #dx-home-why .dx-why-item:last-child {\n        grid-column:\n            1 \/ -1;\n\n        width:\n            min(360px, 100%);\n\n        margin:\n            0 auto;\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 600px) {\n\n    #dx-home-why .dx-why-main {\n        padding:\n            64px\n            20px\n            65px;\n    }\n\n    #dx-home-why .dx-why-header {\n        margin-bottom:\n            38px;\n    }\n\n    #dx-home-why .dx-why-eyebrow {\n        font-size:\n            13px;\n    }\n\n    #dx-home-why .dx-why-eyebrow::before,\n    #dx-home-why .dx-why-eyebrow::after {\n        width:\n            22px;\n    }\n\n    #dx-home-why .dx-why-title {\n        font-size:\n            clamp(\n                29px,\n                9vw,\n                40px\n            );\n\n        line-height:\n            1.3;\n    }\n\n    #dx-home-why .dx-why-description {\n        margin-top:\n            12px;\n\n        font-size:\n            15px;\n\n        line-height:\n            1.75;\n    }\n\n    #dx-home-why .dx-why-grid {\n        grid-template-columns:\n            1fr;\n\n        gap:\n            18px;\n    }\n\n    #dx-home-why .dx-why-item,\n    #dx-home-why .dx-why-item:last-child {\n        grid-column:\n            auto;\n\n        width:\n            100%;\n\n        display:\n            grid;\n\n        grid-template-columns:\n            58px minmax(0, 1fr);\n\n        grid-template-areas:\n            \"icon title\"\n            \"icon description\";\n\n        align-items:\n            start;\n\n        gap:\n            3px\n            15px;\n\n        padding:\n            22px;\n\n        border:\n            1px solid rgba(105, 66, 216, 0.11);\n\n        border-radius:\n            17px;\n\n        background:\n            linear-gradient(\n                145deg,\n                rgba(105, 66, 216, 0.045),\n                rgba(255, 255, 255, 0.90)\n            );\n\n        text-align:\n            left;\n    }\n\n    #dx-home-why .dx-why-icon-wrap {\n        grid-area:\n            icon;\n\n        width:\n            54px;\n\n        height:\n            54px;\n\n        flex-basis:\n            54px;\n\n        margin:\n            0;\n\n        border-radius:\n            15px;\n    }\n\n    #dx-home-why .dx-why-icon-wrap::before {\n        display:\n            none;\n    }\n\n    #dx-home-why .dx-why-icon-wrap svg {\n        width:\n            27px;\n\n        height:\n            27px;\n    }\n\n    #dx-home-why .dx-why-item-title {\n        grid-area:\n            title;\n\n        font-size:\n            16px;\n\n        line-height:\n            1.5;\n    }\n\n    #dx-home-why .dx-why-item-description {\n        grid-area:\n            description;\n\n        max-width:\n            none;\n\n        margin:\n            4px\n            0\n            0;\n\n        font-size:\n            13px;\n\n        line-height:\n            1.7;\n    }\n\n    #dx-home-why .dx-why-note {\n        margin-top:\n            38px;\n\n        padding:\n            18px;\n\n        align-items:\n            flex-start;\n\n        font-size:\n            14px;\n\n        line-height:\n            1.75;\n\n        text-align:\n            left;\n    }\n}\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 380px) {\n\n    #dx-home-why .dx-why-main {\n        padding-right:\n            16px;\n\n        padding-left:\n            16px;\n    }\n\n    #dx-home-why .dx-why-item {\n        grid-template-columns:\n            50px minmax(0, 1fr);\n\n        gap:\n            3px\n            12px;\n\n        padding:\n            18px\n            15px;\n    }\n\n    #dx-home-why .dx-why-icon-wrap {\n        width:\n            48px;\n\n        height:\n            48px;\n    }\n\n    #dx-home-why .dx-why-icon-wrap svg {\n        width:\n            24px;\n\n        height:\n            24px;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    #dx-home-why *,\n    #dx-home-why *::before,\n    #dx-home-why *::after {\n        animation-duration:\n            0.01ms !important;\n\n        animation-iteration-count:\n            1 !important;\n\n        transition-duration:\n            0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-home-why\"\n    aria-labelledby=\"dx-why-title\"\n    dir=\"ltr\"\n>\n\n    <!-- DECORATIVE ELEMENTS -->\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            <!-- =================================================\n                 HEADER\n            ================================================== -->\n\n            <header class=\"dx-why-header\">\n\n                <span class=\"dx-why-eyebrow\">\n                    Why Choose D-INDEX?\n                <\/span>\n\n                <h2\n                    id=\"dx-why-title\"\n                    class=\"dx-why-title\"\n                >\n                    A Digital Partner Focused on Your Success\n                <\/h2>\n\n                <p class=\"dx-why-description\">\n                    We combine technical expertise, practical thinking,\n                    and reliable delivery to build digital solutions\n                    that support your business goals and long-term growth.\n                <\/p>\n\n            <\/header>\n\n            <!-- =================================================\n                 REASONS\n            ================================================== -->\n\n            <div class=\"dx-why-grid\">\n\n                <!-- ITEM 1 -->\n\n                <article class=\"dx-why-item\">\n\n                    <span\n                        class=\"dx-why-icon-wrap\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M12 21s7-4 7-10V5l-7-3-7 3v6c0 6 7 10 7 10z\"><\/path>\n                            <path d=\"m9 11 2 2 4-4\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <h3 class=\"dx-why-item-title\">\n                        Post-Launch Support\n                    <\/h3>\n\n                    <p class=\"dx-why-item-description\">\n                        We stay involved after launch to help keep your\n                        digital solution stable, effective, and ready\n                        for future improvements.\n                    <\/p>\n\n                <\/article>\n\n                <!-- ITEM 2 -->\n\n                <article class=\"dx-why-item\">\n\n                    <span\n                        class=\"dx-why-icon-wrap\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M12 2v4\"><\/path>\n                            <path d=\"M12 18v4\"><\/path>\n                            <path d=\"M4.9 4.9l2.8 2.8\"><\/path>\n                            <path d=\"M16.3 16.3l2.8 2.8\"><\/path>\n                            <path d=\"M2 12h4\"><\/path>\n                            <path d=\"M18 12h4\"><\/path>\n                            <path d=\"M4.9 19.1l2.8-2.8\"><\/path>\n                            <path d=\"M16.3 7.7l2.8-2.8\"><\/path>\n                            <circle cx=\"12\" cy=\"12\" r=\"4\"><\/circle>\n                        <\/svg>\n                    <\/span>\n\n                    <h3 class=\"dx-why-item-title\">\n                        Tailored Solutions\n                    <\/h3>\n\n                    <p class=\"dx-why-item-description\">\n                        Every solution is shaped around your business,\n                        audience, and objectives instead of relying on\n                        one-size-fits-all templates.\n                    <\/p>\n\n                <\/article>\n\n                <!-- ITEM 3 -->\n\n                <article class=\"dx-why-item\">\n\n                    <span\n                        class=\"dx-why-icon-wrap\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\n                            <path d=\"M12 7v5l3 2\"><\/path>\n                            <path d=\"m8 3 1.5 2\"><\/path>\n                            <path d=\"m16 3-1.5 2\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <h3 class=\"dx-why-item-title\">\n                        Reliable Delivery\n                    <\/h3>\n\n                    <p class=\"dx-why-item-description\">\n                        We work with clear project plans and structured\n                        timelines to keep implementation organized and\n                        delivery on track.\n                    <\/p>\n\n                <\/article>\n\n                <!-- ITEM 4 -->\n\n                <article class=\"dx-why-item\">\n\n                    <span\n                        class=\"dx-why-icon-wrap\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M4 18V8\"><\/path>\n                            <path d=\"M10 18V4\"><\/path>\n                            <path d=\"M16 18v-6\"><\/path>\n                            <path d=\"M22 18H2\"><\/path>\n                            <path d=\"m4 7 6-4 6 5 5-4\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <h3 class=\"dx-why-item-title\">\n                        Strong Value\n                    <\/h3>\n\n                    <p class=\"dx-why-item-description\">\n                        We focus on delivering high-quality digital\n                        solutions that create meaningful value for\n                        your investment and business needs.\n                    <\/p>\n\n                <\/article>\n\n                <!-- ITEM 5 -->\n\n                <article class=\"dx-why-item\">\n\n                    <span\n                        class=\"dx-why-icon-wrap\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <circle cx=\"9\" cy=\"8\" r=\"3\"><\/circle>\n                            <circle cx=\"17\" cy=\"9\" r=\"2.5\"><\/circle>\n                            <path d=\"M3 20c0-4 2.5-6 6-6s6 2 6 6\"><\/path>\n                            <path d=\"M14 15c3.4-.5 6 1.2 7 4\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <h3 class=\"dx-why-item-title\">\n                        Specialized Technical Team\n                    <\/h3>\n\n                    <p class=\"dx-why-item-description\">\n                        Your project is supported by professionals\n                        who provide clear communication and practical\n                        technical solutions whenever needed.\n                    <\/p>\n\n                <\/article>\n\n            <\/div>\n\n            <!-- =================================================\n                 BOTTOM NOTE\n            ================================================== -->\n\n            <div class=\"dx-why-note\">\n\n                <span\n                    class=\"dx-why-note-icon\"\n                    aria-hidden=\"true\"\n                >\n                    <svg viewBox=\"0 0 24 24\">\n                        <path d=\"M12 3v3\"><\/path>\n                        <path d=\"M12 18v3\"><\/path>\n                        <path d=\"M3 12h3\"><\/path>\n                        <path d=\"M18 12h3\"><\/path>\n                        <circle cx=\"12\" cy=\"12\" r=\"4\"><\/circle>\n                    <\/svg>\n                <\/span>\n\n                <span>\n                    Our goal is not simply to complete a project,\n                    but to build a digital solution that supports\n                    real business results and sustainable growth.\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 initDxHomeWhy() {\n\n        const section =\n            document.getElementById(\n                \"dx-home-why\"\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 htmlWidget =\n            section.closest(\n                \".elementor-widget-html\"\n            );\n\n        if (htmlWidget) {\n\n            htmlWidget.classList.add(\n                \"dx-why-widget-fullwidth\"\n            );\n        }\n    }\n\n    if (\n        document.readyState === \"loading\"\n    ) {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxHomeWhy\n        );\n\n    } else {\n\n        initDxHomeWhy();\n\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a54ad04 e-con-full e-flex e-con e-parent\" data-id=\"a54ad04\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5bcc4c3 elementor-widget elementor-widget-html\" data-id=\"5bcc4c3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- =========================================================\n     HOME PORTFOLIO SECTION\n     Author: Mohamed El-Sehemy\n     Website Projects + Brand Identity Projects\n     English LTR - Elementor Compatible\n========================================================== -->\n\n<style>\n\/* =========================================================\n   ELEMENTOR FULL WIDTH\n========================================================= *\/\n\n.elementor-widget-html:has(#dx-home-portfolio),\n.elementor-widget-html:has(#dx-home-portfolio) > .elementor-widget-container,\n.dx-portfolio-widget-fullwidth,\n.dx-portfolio-widget-fullwidth > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n\/* =========================================================\n   RESET AND VARIABLES\n========================================================= *\/\n\n#dx-home-portfolio,\n#dx-home-portfolio *,\n#dx-home-portfolio *::before,\n#dx-home-portfolio *::after {\n    box-sizing: border-box;\n}\n\n#dx-home-portfolio {\n    --dx-dark: #08001f;\n    --dx-dark-2: #110331;\n    --dx-purple: #6942d8;\n    --dx-purple-light: #9168ef;\n    --dx-yellow: #ffc441;\n    --dx-white: #ffffff;\n    --dx-text: rgba(255, 255, 255, 0.76);\n    --dx-muted: rgba(255, 255, 255, 0.60);\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n\n    direction: ltr;\n\n    color: var(--dx-white);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n\n    background:\n        radial-gradient(\n            circle at 50% 4%,\n            rgba(105, 66, 216, 0.22),\n            transparent 31%\n        ),\n        radial-gradient(\n            circle at 5% 92%,\n            rgba(145, 104, 239, 0.14),\n            transparent 28%\n        ),\n        linear-gradient(\n            145deg,\n            var(--dx-dark-2),\n            var(--dx-dark)\n        );\n}\n\n#dx-home-portfolio a {\n    color: inherit;\n    text-decoration: none;\n}\n\n#dx-home-portfolio button {\n    font: inherit;\n}\n\n\/* =========================================================\n   BACKGROUND\n========================================================= *\/\n\n#dx-home-portfolio .dx-portfolio-bg {\n    position: absolute;\n    z-index: -4;\n\n    inset: 0;\n\n    opacity: 0.11;\n\n    background-image:\n        linear-gradient(\n            rgba(255, 255, 255, 0.035) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(255, 255, 255, 0.035) 1px,\n            transparent 1px\n        );\n\n    background-size: 74px 74px;\n\n    -webkit-mask-image:\n        linear-gradient(\n            to bottom,\n            transparent,\n            #000 18%,\n            #000 82%,\n            transparent\n        );\n\n    mask-image:\n        linear-gradient(\n            to bottom,\n            transparent,\n            #000 18%,\n            #000 82%,\n            transparent\n        );\n\n    pointer-events: none;\n}\n\n#dx-home-portfolio .dx-portfolio-orbit {\n    position: absolute;\n    z-index: -3;\n\n    border: 1px solid rgba(145, 104, 239, 0.15);\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-home-portfolio .dx-portfolio-orbit-one {\n    top: -230px;\n    right: -180px;\n\n    width: 450px;\n    height: 450px;\n}\n\n#dx-home-portfolio .dx-portfolio-orbit-two {\n    bottom: -260px;\n    left: -190px;\n\n    width: 490px;\n    height: 490px;\n}\n\n\/* =========================================================\n   MAIN\n========================================================= *\/\n\n#dx-home-portfolio .dx-portfolio-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        88px\n        clamp(22px, 5vw, 90px)\n        80px;\n}\n\n#dx-home-portfolio .dx-portfolio-container {\n    width: min(1480px, 100%);\n    margin: 0 auto;\n}\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n#dx-home-portfolio .dx-portfolio-header {\n    max-width: 800px;\n\n    margin: 0 auto 28px;\n\n    text-align: center;\n}\n\n#dx-home-portfolio .dx-portfolio-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    margin-bottom: 10px;\n\n    color: var(--dx-yellow);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.6;\n}\n\n#dx-home-portfolio .dx-portfolio-eyebrow::before,\n#dx-home-portfolio .dx-portfolio-eyebrow::after {\n    content: \"\";\n\n    width: 31px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-yellow),\n            var(--dx-purple-light)\n        );\n}\n\n#dx-home-portfolio .dx-portfolio-title {\n    margin: 0;\n\n    color: var(--dx-white);\n\n    font-size: clamp(35px, 3.7vw, 56px);\n    font-weight: 900;\n    line-height: 1.25;\n    letter-spacing: -1px;\n}\n\n#dx-home-portfolio .dx-portfolio-description {\n    max-width: 690px;\n\n    margin: 14px auto 0;\n\n    color: var(--dx-text);\n\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.8;\n}\n\n\/* =========================================================\n   TABS\n========================================================= *\/\n\n#dx-home-portfolio .dx-portfolio-tabs {\n    width: fit-content;\n\n    margin: 0 auto 36px;\n\n    padding: 5px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 5px;\n\n    border: 1px solid rgba(255, 255, 255, 0.11);\n    border-radius: 14px;\n\n    background: rgba(255, 255, 255, 0.045);\n\n    -webkit-backdrop-filter: blur(12px);\n    backdrop-filter: blur(12px);\n}\n\n#dx-home-portfolio .dx-portfolio-tab {\n    min-width: 170px;\n    min-height: 46px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 8px;\n\n    padding: 0 19px;\n\n    border: 0;\n    border-radius: 10px;\n\n    color: var(--dx-muted);\n\n    background: transparent;\n\n    font-size: 14px;\n    font-weight: 700;\n\n    cursor: pointer;\n\n    transition:\n        color 0.25s ease,\n        background 0.25s ease,\n        box-shadow 0.25s ease,\n        transform 0.25s ease;\n}\n\n#dx-home-portfolio .dx-portfolio-tab:hover {\n    color: var(--dx-white);\n}\n\n#dx-home-portfolio .dx-portfolio-tab.is-active {\n    color: var(--dx-white);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-purple),\n            var(--dx-purple-light)\n        );\n\n    box-shadow:\n        0 10px 25px rgba(105, 66, 216, 0.28);\n}\n\n#dx-home-portfolio .dx-portfolio-tab svg {\n    width: 18px;\n    height: 18px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   PANELS\n========================================================= *\/\n\n#dx-home-portfolio .dx-portfolio-panel {\n    display: none;\n}\n\n#dx-home-portfolio .dx-portfolio-panel.is-active {\n    display: block;\n\n    animation:\n        dxPortfolioFade\n        0.4s\n        ease\n        both;\n}\n\n@keyframes dxPortfolioFade {\n\n    from {\n        opacity: 0;\n\n        transform:\n            translateY(12px);\n    }\n\n    to {\n        opacity: 1;\n\n        transform:\n            translateY(0);\n    }\n}\n\n\/* =========================================================\n   PROJECTS GRID\n========================================================= *\/\n\n#dx-home-portfolio .dx-projects-grid {\n    width: 100%;\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(5, minmax(0, 1fr));\n\n    gap: 18px;\n}\n\n\/* =========================================================\n   PROJECT CARD\n========================================================= *\/\n\n#dx-home-portfolio .dx-project-card {\n    position: relative;\n    isolation: isolate;\n\n    min-width: 0;\n\n    aspect-ratio:\n        1 \/ 0.84;\n\n    display: block;\n\n    overflow: hidden;\n\n    border:\n        1px solid rgba(255, 255, 255, 0.13);\n\n    border-radius: 18px;\n\n    background:\n        rgba(255, 255, 255, 0.055);\n\n    box-shadow:\n        0 22px 45px\n        rgba(2, 0, 18, 0.27);\n\n    transition:\n        transform 0.35s ease,\n        border-color 0.35s ease,\n        box-shadow 0.35s ease;\n}\n\n#dx-home-portfolio .dx-project-card:hover,\n#dx-home-portfolio .dx-project-card:focus-visible {\n    border-color:\n        rgba(145, 104, 239, 0.62);\n\n    box-shadow:\n        0 30px 60px\n        rgba(2, 0, 18, 0.40),\n        0 0 0 1px\n        rgba(145, 104, 239, 0.10);\n\n    transform:\n        translateY(-9px);\n}\n\n#dx-home-portfolio .dx-project-image {\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n    object-position: center;\n\n    transition:\n        transform 0.55s ease,\n        filter 0.55s ease;\n}\n\n#dx-home-portfolio .dx-project-card:hover .dx-project-image,\n#dx-home-portfolio .dx-project-card:focus-visible .dx-project-image {\n    transform:\n        scale(1.07);\n\n    filter:\n        brightness(0.72);\n}\n\n\/* =========================================================\n   OVERLAY\n========================================================= *\/\n\n#dx-home-portfolio .dx-project-overlay {\n    position: absolute;\n    z-index: 3;\n\n    inset: 0;\n\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: flex-end;\n\n    padding:\n        23px\n        20px;\n\n    background:\n        linear-gradient(\n            to top,\n            rgba(8, 0, 31, 0.98),\n            rgba(8, 0, 31, 0.42) 58%,\n            transparent\n        );\n\n    opacity: 0;\n\n    transform:\n        translateY(12px);\n\n    transition:\n        opacity 0.32s ease,\n        transform 0.32s ease;\n}\n\n#dx-home-portfolio .dx-project-card:hover .dx-project-overlay,\n#dx-home-portfolio .dx-project-card:focus-visible .dx-project-overlay {\n    opacity: 1;\n\n    transform:\n        translateY(0);\n}\n\n#dx-home-portfolio .dx-project-category {\n    display: inline-flex;\n\n    margin-bottom: 7px;\n\n    padding:\n        5px\n        10px;\n\n    border-radius: 999px;\n\n    color: var(--dx-yellow);\n\n    background:\n        rgba(255, 196, 65, 0.11);\n\n    font-size: 11px;\n    font-weight: 700;\n    line-height: 1.4;\n}\n\n#dx-home-portfolio .dx-project-title {\n    margin: 0;\n\n    color: var(--dx-white);\n\n    font-size: 18px;\n    font-weight: 800;\n    line-height: 1.45;\n}\n\n#dx-home-portfolio .dx-project-link {\n    margin-top: 9px;\n\n    display: inline-flex;\n    align-items: center;\n\n    gap: 7px;\n\n    color:\n        rgba(255, 255, 255, 0.76);\n\n    font-size: 12px;\n    font-weight: 700;\n    line-height: 1.4;\n}\n\n#dx-home-portfolio .dx-project-link 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   BUTTON\n========================================================= *\/\n\n#dx-home-portfolio .dx-portfolio-actions {\n    margin-top: 38px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n#dx-home-portfolio .dx-portfolio-button {\n    min-width: 235px;\n    min-height: 52px;\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, 0.15);\n\n    border-radius: 11px;\n\n    color: var(--dx-white);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-purple),\n            var(--dx-purple-light)\n        );\n\n    box-shadow:\n        0 14px 32px\n        rgba(105, 66, 216, 0.29);\n\n    font-size: 14px;\n    font-weight: 800;\n\n    transition:\n        transform 0.25s ease,\n        border-color 0.25s ease,\n        background 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-home-portfolio .dx-portfolio-button:hover,\n#dx-home-portfolio .dx-portfolio-button:focus-visible {\n    border-color:\n        rgba(255, 255, 255, 0.28);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-purple-light),\n            var(--dx-purple)\n        );\n\n    box-shadow:\n        0 18px 40px\n        rgba(105, 66, 216, 0.38);\n\n    transform:\n        translateY(-3px);\n}\n\n#dx-home-portfolio .dx-portfolio-button svg {\n    width: 18px;\n    height: 18px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   RESPONSIVE\n========================================================= *\/\n\n@media (max-width: 1200px) {\n\n    #dx-home-portfolio .dx-projects-grid {\n        grid-template-columns:\n            repeat(3, minmax(0, 1fr));\n    }\n}\n\n@media (max-width: 850px) {\n\n    #dx-home-portfolio .dx-portfolio-main {\n        padding:\n            74px\n            28px\n            68px;\n    }\n\n    #dx-home-portfolio .dx-projects-grid {\n        grid-template-columns:\n            repeat(2, minmax(0, 1fr));\n    }\n}\n\n@media (max-width: 600px) {\n\n    #dx-home-portfolio .dx-portfolio-main {\n        padding:\n            62px\n            20px\n            58px;\n    }\n\n    #dx-home-portfolio .dx-portfolio-header {\n        margin-bottom:\n            23px;\n    }\n\n    #dx-home-portfolio .dx-portfolio-eyebrow {\n        font-size:\n            13px;\n    }\n\n    #dx-home-portfolio .dx-portfolio-title {\n        font-size:\n            clamp(\n                29px,\n                9vw,\n                40px\n            );\n\n        line-height:\n            1.3;\n    }\n\n    #dx-home-portfolio .dx-portfolio-description {\n        font-size:\n            15px;\n\n        line-height:\n            1.75;\n    }\n\n    #dx-home-portfolio .dx-portfolio-tabs {\n        width:\n            100%;\n\n        margin-bottom:\n            28px;\n    }\n\n    #dx-home-portfolio .dx-portfolio-tab {\n        min-width:\n            0;\n\n        width:\n            50%;\n\n        padding:\n            0\n            8px;\n\n        font-size:\n            12px;\n    }\n\n    #dx-home-portfolio .dx-projects-grid {\n        display: flex;\n\n        overflow-x: auto;\n\n        scroll-snap-type:\n            x mandatory;\n\n        scroll-behavior:\n            smooth;\n\n        gap:\n            14px;\n\n        padding-bottom:\n            8px;\n\n        scrollbar-width:\n            none;\n    }\n\n    #dx-home-portfolio .dx-projects-grid::-webkit-scrollbar {\n        display:\n            none;\n    }\n\n    #dx-home-portfolio .dx-project-card {\n        flex:\n            0 0\n            min(85%, 330px);\n\n        scroll-snap-align:\n            center;\n    }\n\n    #dx-home-portfolio .dx-project-overlay {\n        opacity:\n            1;\n\n        transform:\n            none;\n    }\n\n    #dx-home-portfolio .dx-portfolio-actions {\n        margin-top:\n            29px;\n    }\n\n    #dx-home-portfolio .dx-portfolio-button {\n        width:\n            100%;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-home-portfolio a:focus-visible,\n#dx-home-portfolio button:focus-visible {\n    outline:\n        2px solid var(--dx-yellow);\n\n    outline-offset:\n        4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n\n    #dx-home-portfolio *,\n    #dx-home-portfolio *::before,\n    #dx-home-portfolio *::after {\n        animation-duration:\n            0.01ms !important;\n\n        animation-iteration-count:\n            1 !important;\n\n        transition-duration:\n            0.01ms !important;\n\n        scroll-behavior:\n            auto !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-home-portfolio\"\n    aria-labelledby=\"dx-portfolio-title\"\n    dir=\"ltr\"\n>\n\n    <div\n        class=\"dx-portfolio-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <span\n        class=\"dx-portfolio-orbit dx-portfolio-orbit-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-portfolio-orbit dx-portfolio-orbit-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-portfolio-main\">\n\n        <div class=\"dx-portfolio-container\">\n\n            <!-- =================================================\n                 HEADER\n            ================================================== -->\n\n            <header class=\"dx-portfolio-header\">\n\n                <span class=\"dx-portfolio-eyebrow\">\n                    Our Work\n                <\/span>\n\n                <h2\n                    id=\"dx-portfolio-title\"\n                    class=\"dx-portfolio-title\"\n                >\n                    Selected Projects from Our Portfolio\n                <\/h2>\n\n                <p class=\"dx-portfolio-description\">\n                    Explore a selection of website development,\n                    e-commerce, digital platform, and brand identity\n                    projects delivered for businesses across different sectors.\n                <\/p>\n\n            <\/header>\n\n            <!-- =================================================\n                 TABS\n            ================================================== -->\n\n            <div\n                class=\"dx-portfolio-tabs\"\n                role=\"tablist\"\n                aria-label=\"Project categories\"\n            >\n\n                <button\n                    type=\"button\"\n                    class=\"dx-portfolio-tab is-active\"\n                    role=\"tab\"\n                    aria-selected=\"true\"\n                    aria-controls=\"dx-web-projects-panel\"\n                    data-panel=\"dx-web-projects-panel\"\n                >\n                    <svg\n                        viewBox=\"0 0 24 24\"\n                        aria-hidden=\"true\"\n                    >\n                        <rect\n                            x=\"3\"\n                            y=\"4\"\n                            width=\"18\"\n                            height=\"16\"\n                            rx=\"2\"\n                        ><\/rect>\n\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                    <\/svg>\n\n                    <span>\n                        Website Projects\n                    <\/span>\n                <\/button>\n\n                <button\n                    type=\"button\"\n                    class=\"dx-portfolio-tab\"\n                    role=\"tab\"\n                    aria-selected=\"false\"\n                    aria-controls=\"dx-brand-projects-panel\"\n                    data-panel=\"dx-brand-projects-panel\"\n                >\n                    <svg\n                        viewBox=\"0 0 24 24\"\n                        aria-hidden=\"true\"\n                    >\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\n                        <circle\n                            cx=\"8\"\n                            cy=\"10\"\n                            r=\"1\"\n                        ><\/circle>\n\n                        <circle\n                            cx=\"12\"\n                            cy=\"7\"\n                            r=\"1\"\n                        ><\/circle>\n\n                        <circle\n                            cx=\"16\"\n                            cy=\"10\"\n                            r=\"1\"\n                        ><\/circle>\n                    <\/svg>\n\n                    <span>\n                        Brand Identity\n                    <\/span>\n                <\/button>\n\n            <\/div>\n\n            <!-- =================================================\n                 WEBSITE PROJECTS\n            ================================================== -->\n\n            <div\n                id=\"dx-web-projects-panel\"\n                class=\"dx-portfolio-panel is-active\"\n                role=\"tabpanel\"\n            >\n\n                <div class=\"dx-projects-grid\">\n\n                    <!-- LUMEA -->\n\n                    <a\n                        href=\"https:\/\/lumea-line.store\/\"\n                        class=\"dx-project-card\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        aria-label=\"Visit LUM\u00c9A website\"\n                    >\n\n                        <img loading=\"lazy\"\n                            src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/12\/lumea-1-768x512.png\"\n                            class=\"dx-project-image\"\n                            alt=\"LUM\u00c9A e-commerce website project\"\n                            width=\"768\"\n                            height=\"512\"\n                            loading=\"lazy\"\n                            decoding=\"async\"\n                        >\n\n                        <span class=\"dx-project-overlay\">\n\n                            <span class=\"dx-project-category\">\n                                E-Commerce\n                            <\/span>\n\n                            <strong class=\"dx-project-title\">\n                                LUM\u00c9A\n                            <\/strong>\n\n                            <span class=\"dx-project-link\">\n\n                                <span>\n                                    View Website\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                            <\/span>\n\n                        <\/span>\n\n                    <\/a>\n\n                    <!-- BEIRUT BOOK -->\n\n                    <a\n                        href=\"https:\/\/beirutbook.shop\/\"\n                        class=\"dx-project-card\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        aria-label=\"Visit Beirut Book website\"\n                    >\n\n                        <img loading=\"lazy\"\n                            src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/12\/beirutbook-1-768x512.png\"\n                            class=\"dx-project-image\"\n                            alt=\"Beirut Book online bookstore project\"\n                            width=\"768\"\n                            height=\"512\"\n                            loading=\"lazy\"\n                            decoding=\"async\"\n                        >\n\n                        <span class=\"dx-project-overlay\">\n\n                            <span class=\"dx-project-category\">\n                                Online Bookstore\n                            <\/span>\n\n                            <strong class=\"dx-project-title\">\n                                Beirut Book\n                            <\/strong>\n\n                            <span class=\"dx-project-link\">\n\n                                <span>\n                                    View Website\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                            <\/span>\n\n                        <\/span>\n\n                    <\/a>\n\n                    <!-- B3 CUSTOM -->\n\n                    <a\n                        href=\"https:\/\/b3custom.com\/\"\n                        class=\"dx-project-card\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        aria-label=\"Visit B3 Custom website\"\n                    >\n\n                        <img loading=\"lazy\"\n                            src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/12\/b3custom-1-768x512.png\"\n                            class=\"dx-project-image\"\n                            alt=\"B3 Custom e-commerce website project\"\n                            width=\"768\"\n                            height=\"512\"\n                            loading=\"lazy\"\n                            decoding=\"async\"\n                        >\n\n                        <span class=\"dx-project-overlay\">\n\n                            <span class=\"dx-project-category\">\n                                E-Commerce\n                            <\/span>\n\n                            <strong class=\"dx-project-title\">\n                                B3 Custom\n                            <\/strong>\n\n                            <span class=\"dx-project-link\">\n\n                                <span>\n                                    View Website\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                            <\/span>\n\n                        <\/span>\n\n                    <\/a>\n\n                    <!-- UR SOLUTION -->\n\n                    <a\n                        href=\"https:\/\/ursolution.org\/\"\n                        class=\"dx-project-card\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        aria-label=\"Visit UR Solution website\"\n                    >\n\n                        <img loading=\"lazy\"\n                            src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/12\/ursolution-1-768x512.png\"\n                            class=\"dx-project-image\"\n                            alt=\"UR Solution training platform project\"\n                            width=\"768\"\n                            height=\"512\"\n                            loading=\"lazy\"\n                            decoding=\"async\"\n                        >\n\n                        <span class=\"dx-project-overlay\">\n\n                            <span class=\"dx-project-category\">\n                                Training Platform\n                            <\/span>\n\n                            <strong class=\"dx-project-title\">\n                                UR Solution\n                            <\/strong>\n\n                            <span class=\"dx-project-link\">\n\n                                <span>\n                                    View Website\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                            <\/span>\n\n                        <\/span>\n\n                    <\/a>\n\n                    <!-- AL ATTAR PERFUME -->\n\n                    <a\n                        href=\"https:\/\/alattarperfume.com\/\"\n                        class=\"dx-project-card\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        aria-label=\"Visit Al Attar Perfume website\"\n                    >\n\n                        <img loading=\"lazy\"\n                            src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/09\/atta-perfumes-scaled.png\"\n                            class=\"dx-project-image\"\n                            alt=\"Al Attar Perfume brand website project\"\n                            width=\"768\"\n                            height=\"512\"\n                            loading=\"lazy\"\n                            decoding=\"async\"\n                        >\n\n                        <span class=\"dx-project-overlay\">\n\n                            <span class=\"dx-project-category\">\n                                Brand Website\n                            <\/span>\n\n                            <strong class=\"dx-project-title\">\n                                Al Attar Perfume\n                            <\/strong>\n\n                            <span class=\"dx-project-link\">\n\n                                <span>\n                                    View Website\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                            <\/span>\n\n                        <\/span>\n\n                    <\/a>\n\n                <\/div>\n\n                <div class=\"dx-portfolio-actions\">\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/web-projects\/\"\n                        class=\"dx-portfolio-button\"\n                    >\n                        <span>\n                            View All Website Projects\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            <!-- =================================================\n                 BRAND IDENTITY PROJECTS\n            ================================================== -->\n\n            <div\n                id=\"dx-brand-projects-panel\"\n                class=\"dx-portfolio-panel\"\n                role=\"tabpanel\"\n                hidden\n            >\n\n                <div class=\"dx-projects-grid\">\n\n                    <!-- NOURISH MIND -->\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/brand-projects\/\"\n                        class=\"dx-project-card\"\n                        aria-label=\"View Nourish Mind brand identity project\"\n                    >\n\n                        <img\n                            src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/01\/nourish-mind-.01.png\"\n                            class=\"dx-project-image\"\n                            alt=\"Nourish Mind brand identity project\"\n                            loading=\"lazy\"\n                            decoding=\"async\"\n                        >\n\n                        <span class=\"dx-project-overlay\">\n\n                            <span class=\"dx-project-category\">\n                                Brand Identity\n                            <\/span>\n\n                            <strong class=\"dx-project-title\">\n                                Nourish Mind\n                            <\/strong>\n\n                        <\/span>\n\n                    <\/a>\n\n                    <!-- BONA PLAZA -->\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/brand-projects\/\"\n                        class=\"dx-project-card\"\n                        aria-label=\"View Bona Plaza brand identity project\"\n                    >\n\n                        <img\n                            src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/01\/bona-plaza.01.png\"\n                            class=\"dx-project-image\"\n                            alt=\"Bona Plaza brand identity project\"\n                            loading=\"lazy\"\n                            decoding=\"async\"\n                        >\n\n                        <span class=\"dx-project-overlay\">\n\n                            <span class=\"dx-project-category\">\n                                Brand Identity\n                            <\/span>\n\n                            <strong class=\"dx-project-title\">\n                                Bona Plaza\n                            <\/strong>\n\n                        <\/span>\n\n                    <\/a>\n\n                    <!-- PHYSICS ADVENTURE -->\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/brand-projects\/\"\n                        class=\"dx-project-card\"\n                        aria-label=\"View Physics Adventure brand identity project\"\n                    >\n\n                        <img\n                            src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/01\/Physics-Adventure-%E2%80%93-%D9%85%D8%BA%D8%A7%D9%85%D8%B1%D8%A9-%D9%81%D9%8A-%D8%B9%D8%A7%D9%84%D9%85-%D8%A7%D9%84%D9%81%D9%8A%D8%B2%D9%8A%D8%A7%D8%A1-.01.png\"\n                            class=\"dx-project-image\"\n                            alt=\"Physics Adventure educational brand identity project\"\n                            loading=\"lazy\"\n                            decoding=\"async\"\n                        >\n\n                        <span class=\"dx-project-overlay\">\n\n                            <span class=\"dx-project-category\">\n                                Educational Branding\n                            <\/span>\n\n                            <strong class=\"dx-project-title\">\n                                Physics Adventure\n                            <\/strong>\n\n                        <\/span>\n\n                    <\/a>\n\n                    <!-- STAGE LINE -->\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/brand-projects\/\"\n                        class=\"dx-project-card\"\n                        aria-label=\"View Stage Line brand identity project\"\n                    >\n\n                        <img\n                            src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/01\/stage-line-.01.png\"\n                            class=\"dx-project-image\"\n                            alt=\"Stage Line brand identity project\"\n                            loading=\"lazy\"\n                            decoding=\"async\"\n                        >\n\n                        <span class=\"dx-project-overlay\">\n\n                            <span class=\"dx-project-category\">\n                                Brand Identity\n                            <\/span>\n\n                            <strong class=\"dx-project-title\">\n                                Stage Line\n                            <\/strong>\n\n                        <\/span>\n\n                    <\/a>\n\n                    <!-- BASIRA -->\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/brand-projects\/\"\n                        class=\"dx-project-card\"\n                        aria-label=\"View Basira brand identity project\"\n                    >\n\n                        <img\n                            src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/01\/basira.png\"\n                            class=\"dx-project-image\"\n                            alt=\"Basira brand identity project\"\n                            loading=\"lazy\"\n                            decoding=\"async\"\n                        >\n\n                        <span class=\"dx-project-overlay\">\n\n                            <span class=\"dx-project-category\">\n                                Brand Identity\n                            <\/span>\n\n                            <strong class=\"dx-project-title\">\n                                Basira\n                            <\/strong>\n\n                        <\/span>\n\n                    <\/a>\n\n                <\/div>\n\n                <div class=\"dx-portfolio-actions\">\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/brand-projects\/\"\n                        class=\"dx-portfolio-button\"\n                    >\n                        <span>\n                            View All Brand Identity Projects\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    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxPortfolio() {\n\n        const section =\n            document.getElementById(\n                \"dx-home-portfolio\"\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-portfolio-widget-fullwidth\"\n            );\n        }\n\n        const tabs =\n            Array.from(\n                section.querySelectorAll(\n                    \".dx-portfolio-tab\"\n                )\n            );\n\n        const panels =\n            Array.from(\n                section.querySelectorAll(\n                    \".dx-portfolio-panel\"\n                )\n            );\n\n        tabs.forEach(\n            function (tab) {\n\n                tab.addEventListener(\n                    \"click\",\n                    function () {\n\n                        const panelId =\n                            tab.getAttribute(\n                                \"data-panel\"\n                            );\n\n                        tabs.forEach(\n                            function (item) {\n\n                                const isActive =\n                                    item === tab;\n\n                                item.classList.toggle(\n                                    \"is-active\",\n                                    isActive\n                                );\n\n                                item.setAttribute(\n                                    \"aria-selected\",\n                                    isActive\n                                        ? \"true\"\n                                        : \"false\"\n                                );\n                            }\n                        );\n\n                        panels.forEach(\n                            function (panel) {\n\n                                const isActive =\n                                    panel.id === panelId;\n\n                                panel.classList.toggle(\n                                    \"is-active\",\n                                    isActive\n                                );\n\n                                panel.hidden =\n                                    !isActive;\n                            }\n                        );\n                    }\n                );\n            }\n        );\n    }\n\n    if (\n        document.readyState === \"loading\"\n    ) {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxPortfolio\n        );\n\n    } else {\n\n        initDxPortfolio();\n\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-afb8d3d e-con-full e-flex e-con e-parent\" data-id=\"afb8d3d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4ac656b elementor-widget elementor-widget-html\" data-id=\"4ac656b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- =========================================================\n     HOME TESTIMONIALS SECTION\n     Author: Mohamed El-Sehemy\n     Video + Text Testimonials\n     English LTR - Elementor Compatible\n========================================================== -->\n\n<style>\n\/* =========================================================\n   ELEMENTOR FULL WIDTH\n========================================================= *\/\n\n.elementor-widget-html:has(#dx-home-testimonials),\n.elementor-widget-html:has(#dx-home-testimonials) > .elementor-widget-container,\n.dx-testimonials-widget-fullwidth,\n.dx-testimonials-widget-fullwidth > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n\/* =========================================================\n   RESET\n========================================================= *\/\n\n#dx-home-testimonials,\n#dx-home-testimonials *,\n#dx-home-testimonials *::before,\n#dx-home-testimonials *::after {\n    box-sizing: border-box;\n}\n\n#dx-home-testimonials {\n    --dx-purple: #6942d8;\n    --dx-purple-light: #9168ef;\n    --dx-yellow: #ffc441;\n    --dx-dark: #160a31;\n    --dx-text: #625c6f;\n    --dx-muted: #85808e;\n    --dx-white: #ffffff;\n    --dx-bg: #f8f7fc;\n    --dx-border: rgba(105, 66, 216, 0.13);\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n\n    direction: ltr;\n\n    color: var(--dx-dark);\n\n    background:\n        radial-gradient(\n            circle at 8% 10%,\n            rgba(105, 66, 216, 0.075),\n            transparent 25%\n        ),\n        radial-gradient(\n            circle at 92% 92%,\n            rgba(145, 104, 239, 0.065),\n            transparent 28%\n        ),\n        var(--dx-bg);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-home-testimonials button {\n    font: inherit;\n}\n\n\/* =========================================================\n   DECORATIONS\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-orbit {\n    position: absolute;\n    z-index: -3;\n\n    border: 1px solid rgba(105, 66, 216, 0.10);\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-home-testimonials .dx-test-orbit-one {\n    top: -210px;\n    left: -180px;\n\n    width: 430px;\n    height: 430px;\n}\n\n#dx-home-testimonials .dx-test-orbit-two {\n    right: -190px;\n    bottom: -250px;\n\n    width: 480px;\n    height: 480px;\n}\n\n#dx-home-testimonials .dx-test-dots {\n    position: absolute;\n    z-index: -2;\n\n    width: 120px;\n    height: 120px;\n\n    opacity: 0.23;\n\n    background-image:\n        radial-gradient(\n            circle,\n            var(--dx-purple-light) 2px,\n            transparent 2.7px\n        );\n\n    background-size: 17px 17px;\n\n    pointer-events: none;\n}\n\n#dx-home-testimonials .dx-test-dots-one {\n    top: 70px;\n    right: 4%;\n}\n\n#dx-home-testimonials .dx-test-dots-two {\n    left: 3%;\n    bottom: 50px;\n}\n\n\/* =========================================================\n   SECTION LAYOUT\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        90px\n        clamp(22px, 5vw, 90px)\n        88px;\n}\n\n#dx-home-testimonials .dx-test-container {\n    width: min(1450px, 100%);\n    margin: 0 auto;\n}\n\n\/* =========================================================\n   MAIN HEADER\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-header {\n    max-width: 800px;\n\n    margin: 0 auto 48px;\n\n    text-align: center;\n}\n\n#dx-home-testimonials .dx-test-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    margin-bottom: 11px;\n\n    color: var(--dx-purple);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.6;\n}\n\n#dx-home-testimonials .dx-test-eyebrow::before,\n#dx-home-testimonials .dx-test-eyebrow::after {\n    content: \"\";\n\n    width: 31px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-yellow),\n            var(--dx-purple-light)\n        );\n}\n\n#dx-home-testimonials .dx-test-title {\n    margin: 0;\n\n    color: var(--dx-dark);\n\n    font-size: clamp(35px, 3.7vw, 56px);\n    font-weight: 900;\n    line-height: 1.25;\n    letter-spacing: -1px;\n}\n\n#dx-home-testimonials .dx-test-description {\n    max-width: 700px;\n\n    margin: 15px auto 0;\n\n    color: var(--dx-text);\n\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.8;\n}\n\n\/* =========================================================\n   VIDEO TESTIMONIALS\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-video-grid {\n    width: min(1200px, 100%);\n\n    margin: 0 auto 62px;\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(2, minmax(0, 1fr));\n\n    gap: 25px;\n}\n\n#dx-home-testimonials .dx-test-video-card {\n    position: relative;\n    isolation: isolate;\n\n    width: 100%;\n    aspect-ratio: 16 \/ 9;\n\n    padding: 0;\n\n    overflow: hidden;\n\n    border: 1px solid rgba(105, 66, 216, 0.12);\n    border-radius: 22px;\n\n    background: #13082f;\n\n    box-shadow:\n        0 24px 55px rgba(31, 13, 70, 0.18);\n\n    cursor: pointer;\n\n    transition:\n        transform 0.35s ease,\n        box-shadow 0.35s ease,\n        border-color 0.35s ease;\n}\n\n#dx-home-testimonials .dx-test-video-card:hover,\n#dx-home-testimonials .dx-test-video-card:focus-visible {\n    border-color: rgba(105, 66, 216, 0.40);\n\n    box-shadow:\n        0 32px 70px rgba(31, 13, 70, 0.25);\n\n    transform: translateY(-7px);\n}\n\n#dx-home-testimonials .dx-test-video-image {\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n    object-position: center;\n\n    transition:\n        transform 0.55s ease,\n        filter 0.55s ease;\n}\n\n#dx-home-testimonials .dx-test-video-card:hover .dx-test-video-image {\n    transform: scale(1.045);\n\n    filter: brightness(0.82);\n}\n\n#dx-home-testimonials .dx-test-video-overlay {\n    position: absolute;\n    z-index: 2;\n\n    inset: 0;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    background:\n        linear-gradient(\n            180deg,\n            rgba(13, 4, 37, 0.08),\n            rgba(13, 4, 37, 0.35)\n        );\n}\n\n#dx-home-testimonials .dx-test-play {\n    position: relative;\n\n    width: 82px;\n    height: 82px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid rgba(255, 255, 255, 0.55);\n    border-radius: 50%;\n\n    color: var(--dx-white);\n\n    background:\n        linear-gradient(\n            135deg,\n            rgba(105, 66, 216, 0.96),\n            rgba(145, 104, 239, 0.96)\n        );\n\n    box-shadow:\n        0 18px 42px rgba(58, 26, 132, 0.40);\n\n    transition:\n        transform 0.3s ease,\n        box-shadow 0.3s ease;\n}\n\n#dx-home-testimonials .dx-test-play::before {\n    content: \"\";\n\n    position: absolute;\n\n    inset: -12px;\n\n    border: 1px solid rgba(255, 255, 255, 0.27);\n    border-radius: 50%;\n\n    animation:\n        dxTestPulse\n        2.2s\n        ease-out\n        infinite;\n}\n\n#dx-home-testimonials .dx-test-video-card:hover .dx-test-play {\n    transform: scale(1.08);\n\n    box-shadow:\n        0 23px 50px rgba(58, 26, 132, 0.52);\n}\n\n#dx-home-testimonials .dx-test-play svg {\n    width: 31px;\n    height: 31px;\n\n    fill: currentColor;\n\n    transform: translateX(2px);\n}\n\n@keyframes dxTestPulse {\n\n    0% {\n        opacity: 0.75;\n\n        transform: scale(0.88);\n    }\n\n    100% {\n        opacity: 0;\n\n        transform: scale(1.35);\n    }\n}\n\n#dx-home-testimonials .dx-test-video-badge {\n    position: absolute;\n    z-index: 3;\n\n    left: 18px;\n    bottom: 17px;\n\n    display: inline-flex;\n    align-items: center;\n\n    gap: 7px;\n\n    padding:\n        8px\n        12px;\n\n    border:\n        1px solid rgba(255, 255, 255, 0.16);\n\n    border-radius:\n        999px;\n\n    color:\n        var(--dx-white);\n\n    background:\n        rgba(13, 4, 37, 0.70);\n\n    -webkit-backdrop-filter:\n        blur(12px);\n\n    backdrop-filter:\n        blur(12px);\n\n    font-size:\n        12px;\n\n    font-weight:\n        700;\n\n    line-height:\n        1.4;\n}\n\n#dx-home-testimonials .dx-test-video-badge svg {\n    width: 15px;\n    height: 15px;\n\n    fill: currentColor;\n}\n\n\/* =========================================================\n   TEXT TESTIMONIALS HEADER\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-text-section {\n    position: relative;\n\n    width: 100%;\n}\n\n#dx-home-testimonials .dx-test-subheader {\n    max-width: 720px;\n\n    margin: 0 auto 30px;\n\n    text-align: center;\n}\n\n#dx-home-testimonials .dx-test-subtitle {\n    margin: 0;\n\n    color: var(--dx-dark);\n\n    font-size:\n        clamp(\n            25px,\n            2.4vw,\n            36px\n        );\n\n    font-weight: 900;\n    line-height: 1.3;\n}\n\n#dx-home-testimonials .dx-test-subdescription {\n    margin: 9px auto 0;\n\n    color: var(--dx-muted);\n\n    font-size: 15px;\n    font-weight: 400;\n    line-height: 1.75;\n}\n\n\/* =========================================================\n   SLIDER\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-slider {\n    position: relative;\n\n    width: 100%;\n\n    padding:\n        0\n        58px;\n}\n\n#dx-home-testimonials .dx-test-viewport {\n    width: 100%;\n\n    overflow: hidden;\n}\n\n#dx-home-testimonials .dx-test-track {\n    display: flex;\n\n    direction: ltr;\n\n    transition:\n        transform\n        1.05s\n        cubic-bezier(\n            0.22,\n            0.61,\n            0.36,\n            1\n        );\n\n    will-change: transform;\n}\n\n#dx-home-testimonials .dx-test-slide {\n    flex:\n        0\n        0\n        50%;\n\n    min-width: 0;\n\n    padding: 12px;\n}\n\n\/* =========================================================\n   REVIEW CARD\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-card {\n    position: relative;\n\n    height: 100%;\n    min-height: 320px;\n\n    padding:\n        31px\n        30px\n        28px;\n\n    display: flex;\n    flex-direction: column;\n\n    overflow: hidden;\n\n    border:\n        1px solid var(--dx-border);\n\n    border-radius:\n        21px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.98),\n            rgba(252, 250, 255, 0.96)\n        );\n\n    box-shadow:\n        0 20px 48px rgba(42, 20, 88, 0.09);\n\n    transition:\n        transform 0.3s ease,\n        box-shadow 0.3s ease,\n        border-color 0.3s ease;\n}\n\n#dx-home-testimonials .dx-test-card:hover {\n    border-color:\n        rgba(105, 66, 216, 0.28);\n\n    box-shadow:\n        0 27px 58px rgba(42, 20, 88, 0.14);\n\n    transform:\n        translateY(-5px);\n}\n\n#dx-home-testimonials .dx-test-quote-icon {\n    position: absolute;\n\n    top: 22px;\n    right: 24px;\n\n    width: 54px;\n    height: 54px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 17px;\n\n    color: var(--dx-purple);\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(105, 66, 216, 0.12),\n            rgba(145, 104, 239, 0.055)\n        );\n}\n\n#dx-home-testimonials .dx-test-quote-icon svg {\n    width: 27px;\n    height: 27px;\n\n    fill: currentColor;\n}\n\n#dx-home-testimonials .dx-test-stars {\n    display: flex;\n    align-items: center;\n\n    gap: 3px;\n\n    margin-bottom: 22px;\n\n    color: var(--dx-yellow);\n\n    font-size: 17px;\n    line-height: 1;\n}\n\n#dx-home-testimonials .dx-test-review {\n    flex-grow: 1;\n\n    margin: 0;\n\n    padding-right: 82px;\n\n    color: var(--dx-text);\n\n    font-size: 15px;\n    font-weight: 400;\n    line-height: 1.9;\n}\n\n#dx-home-testimonials .dx-test-person {\n    margin-top: 27px;\n\n    padding-top: 21px;\n\n    display: flex;\n    align-items: center;\n\n    gap: 13px;\n\n    border-top:\n        1px solid rgba(105, 66, 216, 0.10);\n}\n\n#dx-home-testimonials .dx-test-avatar {\n    width: 54px;\n    height: 54px;\n    flex: 0 0 54px;\n\n    overflow: hidden;\n\n    border:\n        3px solid rgba(105, 66, 216, 0.11);\n\n    border-radius: 50%;\n\n    background: #eeeaf7;\n}\n\n#dx-home-testimonials .dx-test-avatar img {\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n    object-position: center;\n}\n\n#dx-home-testimonials .dx-test-person-info {\n    min-width: 0;\n\n    display: flex;\n    flex-direction: column;\n\n    text-align: left;\n}\n\n#dx-home-testimonials .dx-test-person-name {\n    color: var(--dx-dark);\n\n    font-size: 15px;\n    font-weight: 800;\n    line-height: 1.5;\n}\n\n#dx-home-testimonials .dx-test-person-company {\n    margin-top: 3px;\n\n    color: var(--dx-muted);\n\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 1.5;\n}\n\n\/* =========================================================\n   SLIDER ARROWS\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-arrow {\n    position: absolute;\n    z-index: 10;\n\n    top: 50%;\n\n    width: 46px;\n    height: 46px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    padding: 0;\n\n    border:\n        1px solid rgba(105, 66, 216, 0.14);\n\n    border-radius: 50%;\n\n    color: var(--dx-purple);\n\n    background:\n        var(--dx-white);\n\n    box-shadow:\n        0 14px 30px rgba(41, 19, 87, 0.14);\n\n    cursor: pointer;\n\n    transform:\n        translateY(-50%);\n\n    transition:\n        color 0.25s ease,\n        background 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-home-testimonials .dx-test-arrow:hover,\n#dx-home-testimonials .dx-test-arrow:focus-visible {\n    color: var(--dx-white);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-purple),\n            var(--dx-purple-light)\n        );\n\n    box-shadow:\n        0 18px 38px rgba(105, 66, 216, 0.28);\n}\n\n#dx-home-testimonials .dx-test-arrow-prev {\n    left: 0;\n}\n\n#dx-home-testimonials .dx-test-arrow-next {\n    right: 0;\n}\n\n#dx-home-testimonials .dx-test-arrow svg {\n    width: 20px;\n    height: 20px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   PAGINATION\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-pagination {\n    margin-top: 24px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 8px;\n}\n\n#dx-home-testimonials .dx-test-dot {\n    width: 8px;\n    height: 8px;\n\n    padding: 0;\n\n    border: 0;\n    border-radius: 999px;\n\n    background:\n        rgba(105, 66, 216, 0.20);\n\n    cursor: pointer;\n\n    transition:\n        width 0.25s ease,\n        background 0.25s ease;\n}\n\n#dx-home-testimonials .dx-test-dot.is-active {\n    width: 28px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-purple),\n            var(--dx-purple-light)\n        );\n}\n\n\/* =========================================================\n   VIDEO MODAL\n========================================================= *\/\n\n.dx-test-modal {\n    position: fixed;\n    z-index: 999999;\n\n    inset: 0;\n\n    display: none;\n    align-items: center;\n    justify-content: center;\n\n    padding:\n        70px\n        28px\n        28px;\n\n    background:\n        rgba(5, 0, 20, 0.92);\n\n    -webkit-backdrop-filter:\n        blur(10px);\n\n    backdrop-filter:\n        blur(10px);\n}\n\n.dx-test-modal.is-open {\n    display: flex;\n\n    animation:\n        dxTestModalFade\n        0.25s\n        ease\n        both;\n}\n\n@keyframes dxTestModalFade {\n\n    from {\n        opacity: 0;\n    }\n\n    to {\n        opacity: 1;\n    }\n}\n\n.dx-test-modal-dialog {\n    position: relative;\n\n    width:\n        min(\n            1200px,\n            100%\n        );\n\n    aspect-ratio:\n        16 \/ 9;\n\n    overflow: hidden;\n\n    border:\n        1px solid rgba(255, 255, 255, 0.15);\n\n    border-radius:\n        20px;\n\n    background:\n        #000000;\n\n    box-shadow:\n        0 35px 100px rgba(0, 0, 0, 0.60);\n\n    animation:\n        dxTestModalScale\n        0.3s\n        ease\n        both;\n}\n\n@keyframes dxTestModalScale {\n\n    from {\n        opacity: 0;\n\n        transform:\n            scale(0.94)\n            translateY(10px);\n    }\n\n    to {\n        opacity: 1;\n\n        transform:\n            scale(1)\n            translateY(0);\n    }\n}\n\n.dx-test-modal-video {\n    width: 100%;\n    height: 100%;\n}\n\n.dx-test-modal-video iframe {\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    border: 0;\n}\n\n\/* =========================================================\n   VIDEO MODAL CLOSE BUTTON\n========================================================= *\/\n\n.dx-test-modal-close {\n    position:\n        fixed !important;\n\n    z-index:\n        2147483647 !important;\n\n    top:\n        22px !important;\n\n    right:\n        24px !important;\n\n    width:\n        48px !important;\n\n    height:\n        48px !important;\n\n    display:\n        flex !important;\n\n    align-items:\n        center !important;\n\n    justify-content:\n        center !important;\n\n    margin:\n        0 !important;\n\n    padding:\n        0 !important;\n\n    border:\n        1px solid rgba(255, 255, 255, 0.35) !important;\n\n    border-radius:\n        14px !important;\n\n    background:\n        linear-gradient(\n            135deg,\n            #6942d8,\n            #9168ef\n        ) !important;\n\n    box-shadow:\n        0 12px 30px rgba(0, 0, 0, 0.38) !important;\n\n    cursor:\n        pointer !important;\n\n    appearance:\n        none !important;\n\n    -webkit-appearance:\n        none !important;\n\n    opacity:\n        1 !important;\n\n    visibility:\n        visible !important;\n\n    transition:\n        transform 0.25s ease,\n        background 0.25s ease,\n        box-shadow 0.25s ease !important;\n}\n\n.dx-test-modal-close::before,\n.dx-test-modal-close::after {\n    content:\n        \"\" !important;\n\n    position:\n        absolute !important;\n\n    top:\n        50% !important;\n\n    left:\n        50% !important;\n\n    width:\n        23px !important;\n\n    height:\n        3px !important;\n\n    display:\n        block !important;\n\n    border-radius:\n        999px !important;\n\n    background:\n        #ffffff !important;\n\n    transform-origin:\n        center !important;\n\n    opacity:\n        1 !important;\n\n    visibility:\n        visible !important;\n\n    pointer-events:\n        none !important;\n}\n\n.dx-test-modal-close::before {\n    transform:\n        translate(-50%, -50%)\n        rotate(45deg) !important;\n}\n\n.dx-test-modal-close::after {\n    transform:\n        translate(-50%, -50%)\n        rotate(-45deg) !important;\n}\n\n.dx-test-modal-close:hover,\n.dx-test-modal-close:focus-visible {\n    background:\n        linear-gradient(\n            135deg,\n            #9168ef,\n            #6942d8\n        ) !important;\n\n    box-shadow:\n        0 16px 38px rgba(105, 66, 216, 0.48) !important;\n\n    transform:\n        scale(1.08) !important;\n}\n\n.dx-test-modal-close:focus-visible {\n    outline:\n        3px solid #ffc441 !important;\n\n    outline-offset:\n        4px !important;\n}\n\n\/* =========================================================\n   RESPONSIVE\n========================================================= *\/\n\n@media (max-width: 900px) {\n\n    #dx-home-testimonials .dx-test-main {\n        padding:\n            76px\n            28px\n            74px;\n    }\n\n    #dx-home-testimonials .dx-test-video-grid {\n        gap: 18px;\n\n        margin-bottom:\n            52px;\n    }\n\n    #dx-home-testimonials .dx-test-slide {\n        flex-basis: 100%;\n    }\n\n    #dx-home-testimonials .dx-test-card {\n        min-height:\n            300px;\n    }\n}\n\n@media (max-width: 700px) {\n\n    #dx-home-testimonials .dx-test-video-grid {\n        grid-template-columns:\n            1fr;\n    }\n\n    #dx-home-testimonials .dx-test-slider {\n        padding:\n            0\n            37px;\n    }\n\n    #dx-home-testimonials .dx-test-arrow {\n        width:\n            40px;\n\n        height:\n            40px;\n    }\n\n    #dx-home-testimonials .dx-test-arrow-prev {\n        left:\n            -5px;\n    }\n\n    #dx-home-testimonials .dx-test-arrow-next {\n        right:\n            -5px;\n    }\n}\n\n@media (max-width: 600px) {\n\n    #dx-home-testimonials .dx-test-main {\n        padding:\n            64px\n            20px\n            62px;\n    }\n\n    #dx-home-testimonials .dx-test-header {\n        margin-bottom:\n            35px;\n    }\n\n    #dx-home-testimonials .dx-test-title {\n        font-size:\n            clamp(\n                29px,\n                9vw,\n                40px\n            );\n\n        line-height:\n            1.3;\n    }\n\n    #dx-home-testimonials .dx-test-description {\n        font-size:\n            15px;\n\n        line-height:\n            1.75;\n    }\n\n    #dx-home-testimonials .dx-test-video-grid {\n        margin-bottom:\n            47px;\n    }\n\n    #dx-home-testimonials .dx-test-video-card {\n        border-radius:\n            17px;\n    }\n\n    #dx-home-testimonials .dx-test-play {\n        width:\n            66px;\n\n        height:\n            66px;\n    }\n\n    #dx-home-testimonials .dx-test-play svg {\n        width:\n            26px;\n\n        height:\n            26px;\n    }\n\n    #dx-home-testimonials .dx-test-subtitle {\n        font-size:\n            27px;\n\n        line-height:\n            1.35;\n    }\n\n    #dx-home-testimonials .dx-test-subdescription {\n        font-size:\n            14px;\n\n        line-height:\n            1.7;\n    }\n\n    #dx-home-testimonials .dx-test-slider {\n        padding:\n            0;\n    }\n\n    #dx-home-testimonials .dx-test-slide {\n        padding:\n            6px;\n    }\n\n    #dx-home-testimonials .dx-test-card {\n        min-height:\n            0;\n\n        padding:\n            26px\n            22px\n            23px;\n\n        border-radius:\n            17px;\n    }\n\n    #dx-home-testimonials .dx-test-quote-icon {\n        top:\n            18px;\n\n        right:\n            18px;\n\n        width:\n            46px;\n\n        height:\n            46px;\n\n        border-radius:\n            14px;\n    }\n\n    #dx-home-testimonials .dx-test-review {\n        padding-right:\n            58px;\n\n        font-size:\n            14px;\n\n        line-height:\n            1.8;\n    }\n\n    #dx-home-testimonials .dx-test-arrow {\n        top:\n            auto;\n\n        bottom:\n            -58px;\n\n        width:\n            42px;\n\n        height:\n            42px;\n    }\n\n    #dx-home-testimonials .dx-test-arrow-prev {\n        left:\n            calc(50% - 50px);\n    }\n\n    #dx-home-testimonials .dx-test-arrow-next {\n        right:\n            calc(50% - 50px);\n    }\n\n    #dx-home-testimonials .dx-test-pagination {\n        margin-top:\n            73px;\n    }\n\n    .dx-test-modal {\n        padding:\n            65px\n            12px\n            20px;\n    }\n\n    .dx-test-modal-dialog {\n        border-radius:\n            13px;\n    }\n\n    .dx-test-modal-close {\n        top:\n            14px !important;\n\n        right:\n            14px !important;\n\n        width:\n            44px !important;\n\n        height:\n            44px !important;\n\n        border-radius:\n            12px !important;\n    }\n\n    .dx-test-modal-close::before,\n    .dx-test-modal-close::after {\n        width:\n            21px !important;\n\n        height:\n            3px !important;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-home-testimonials button:focus-visible {\n    outline:\n        2px solid var(--dx-yellow);\n\n    outline-offset:\n        4px;\n}\n\nbody.dx-test-modal-open {\n    overflow:\n        hidden !important;\n}\n\n@media (prefers-reduced-motion: reduce) {\n\n    #dx-home-testimonials *,\n    #dx-home-testimonials *::before,\n    #dx-home-testimonials *::after,\n    .dx-test-modal *,\n    .dx-test-modal *::before,\n    .dx-test-modal *::after {\n        animation-duration:\n            0.01ms !important;\n\n        animation-iteration-count:\n            1 !important;\n\n        transition-duration:\n            0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-home-testimonials\"\n    aria-labelledby=\"dx-testimonials-title\"\n    dir=\"ltr\"\n>\n\n    <span\n        class=\"dx-test-orbit dx-test-orbit-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-test-orbit dx-test-orbit-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-test-dots dx-test-dots-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-test-dots dx-test-dots-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-test-main\">\n\n        <div class=\"dx-test-container\">\n\n            <!-- =================================================\n                 HEADER\n            ================================================== -->\n\n            <header class=\"dx-test-header\">\n\n                <span class=\"dx-test-eyebrow\">\n                    Client Testimonials\n                <\/span>\n\n                <h2\n                    id=\"dx-testimonials-title\"\n                    class=\"dx-test-title\"\n                >\n                    What Our Clients Say\n                <\/h2>\n\n                <p class=\"dx-test-description\">\n                    Real experiences from clients who trusted us\n                    to build, improve, and support their digital projects.\n                <\/p>\n\n            <\/header>\n\n            <!-- =================================================\n                 VIDEO TESTIMONIALS\n            ================================================== -->\n\n            <div class=\"dx-test-video-grid\">\n\n                <button\n                    type=\"button\"\n                    class=\"dx-test-video-card\"\n                    data-video-id=\"dtCRXdp2qag\"\n                    aria-label=\"Play the first client video testimonial\"\n                >\n                    <img loading=\"lazy\"\n                        src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/06\/84ef21a8-e751-498c-be44-d2fdf0882d6d.webp\"\n                        class=\"dx-test-video-image\"\n                        alt=\"Client video testimonial\"\n                        width=\"1600\"\n                        height=\"900\"\n                        loading=\"lazy\"\n                        decoding=\"async\"\n                    >\n\n                    <span class=\"dx-test-video-overlay\">\n\n                        <span\n                            class=\"dx-test-play\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M8 5v14l11-7z\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                    <\/span>\n\n                    <span class=\"dx-test-video-badge\">\n\n                        <svg\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <path d=\"M8 5v14l11-7z\"><\/path>\n                        <\/svg>\n\n                        <span>\n                            Watch Client Story\n                        <\/span>\n\n                    <\/span>\n                <\/button>\n\n                <button\n                    type=\"button\"\n                    class=\"dx-test-video-card\"\n                    data-video-id=\"tB7nBjjZoy8\"\n                    aria-label=\"Play the second client video testimonial\"\n                >\n                    <img loading=\"lazy\"\n                        src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/06\/e0eafccc-e822-4b9b-ace4-726086252662.webp\"\n                        class=\"dx-test-video-image\"\n                        alt=\"Client video testimonial\"\n                        width=\"1600\"\n                        height=\"900\"\n                        loading=\"lazy\"\n                        decoding=\"async\"\n                    >\n\n                    <span class=\"dx-test-video-overlay\">\n\n                        <span\n                            class=\"dx-test-play\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M8 5v14l11-7z\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                    <\/span>\n\n                    <span class=\"dx-test-video-badge\">\n\n                        <svg\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <path d=\"M8 5v14l11-7z\"><\/path>\n                        <\/svg>\n\n                        <span>\n                            Watch Client Story\n                        <\/span>\n\n                    <\/span>\n                <\/button>\n\n            <\/div>\n\n            <!-- =================================================\n                 TEXT TESTIMONIALS\n            ================================================== -->\n\n            <div class=\"dx-test-text-section\">\n\n                <header class=\"dx-test-subheader\">\n\n                    <h3 class=\"dx-test-subtitle\">\n                        Client Experiences\n                    <\/h3>\n\n                    <p class=\"dx-test-subdescription\">\n                        Feedback that reflects the quality of our work,\n                        communication, support, and overall client experience.\n                    <\/p>\n\n                <\/header>\n\n                <div\n                    class=\"dx-test-slider\"\n                    aria-roledescription=\"carousel\"\n                    aria-label=\"Client testimonials\"\n                >\n\n                    <!-- PREVIOUS -->\n\n                    <button\n                        type=\"button\"\n                        class=\"dx-test-arrow dx-test-arrow-prev\"\n                        aria-label=\"Previous testimonials\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"m15 18-6-6 6-6\"><\/path>\n                        <\/svg>\n                    <\/button>\n\n                    <div class=\"dx-test-viewport\">\n\n                        <div class=\"dx-test-track\">\n\n                            <!-- =====================================\n                                 TESTIMONIAL 1\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        I would like to thank the team for the\n                                        overall experience. It was very positive.\n                                        They listened carefully to my needs,\n                                        understood the idea clearly from the\n                                        beginning, and made a real effort to\n                                        bring it to life. Every question was\n                                        handled professionally and responses\n                                        were always quick, which was very\n                                        important to me.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5856-scaled.jpg\"\n                                                alt=\"Waseem\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                Waseem\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                Go Coach\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 2\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        What I appreciated most was the genuine\n                                        knowledge and the strong relationship\n                                        throughout the work. Wishing the team\n                                        continued success.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5856-scaled.jpg\"\n                                                alt=\"Mohamed El Khouly\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                Mohamed El Khouly\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                LUM\u00c9A\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 3\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        Great team and excellent service.\n                                        If you need a professional website to\n                                        promote your business or location,\n                                        D-INDEX is an excellent choice.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5856-scaled.jpg\"\n                                                alt=\"James Swayze\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                James Swayze\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                GMCS Power Stations\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 4\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        I highly recommend D-INDEX.\n                                        The team is always ready to help\n                                        whenever you have a question or need\n                                        support.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5857-scaled.jpg\"\n                                                alt=\"Karina Salier\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                Karina Salier\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                High Performance Brain Training\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 5\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        Honest and professional to work with,\n                                        very cooperative, and fairly priced.\n                                        Thank you for the great effort and\n                                        excellent work.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5856-scaled.jpg\"\n                                                alt=\"DZ Daly\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                DZ Daly\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                DZ Store\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 6\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        One of the best companies I have worked\n                                        with. Great service and, more\n                                        importantly, great and honest people.\n                                        Truly a five-star experience.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5856-scaled.jpg\"\n                                                alt=\"Ibrahim Hassan\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                Ibrahim Hassan\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                R&amp;G\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 7\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        One of the most professional companies\n                                        I have worked with. They understood the\n                                        requirements from the first meeting,\n                                        were cooperative in finding solutions,\n                                        and responded quickly whenever an issue\n                                        came up. Their professionalism and\n                                        respectful communication were also\n                                        greatly appreciated.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5857-scaled.jpg\"\n                                                alt=\"Roaa Ahmed\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                Roaa Ahmed\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                My Soul Space\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 8\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        I am genuinely grateful for the success\n                                        I achieved while working with D-INDEX.\n                                        They have a creative touch that is\n                                        clearly noticeable when you work with\n                                        their team.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5857-scaled.jpg\"\n                                                alt=\"Laila Kandil\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                Laila Kandil\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                Educational Creativity Center\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <!-- NEXT -->\n\n                    <button\n                        type=\"button\"\n                        class=\"dx-test-arrow dx-test-arrow-next\"\n                        aria-label=\"Next testimonials\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"m9 18 6-6-6-6\"><\/path>\n                        <\/svg>\n                    <\/button>\n\n                    <div\n                        class=\"dx-test-pagination\"\n                        aria-label=\"Testimonial navigation\"\n                    ><\/div>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<!-- =========================================================\n     VIDEO MODAL\n========================================================== -->\n\n<div\n    class=\"dx-test-modal\"\n    id=\"dx-test-video-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"Client video testimonial\"\n    aria-hidden=\"true\"\n>\n\n    <button\n        type=\"button\"\n        class=\"dx-test-modal-close\"\n        aria-label=\"Close video\"\n    ><\/button>\n\n    <div class=\"dx-test-modal-dialog\">\n\n        <div class=\"dx-test-modal-video\"><\/div>\n\n    <\/div>\n\n<\/div>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxTestimonials() {\n\n        const section =\n            document.getElementById(\n                \"dx-home-testimonials\"\n            );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized =\n            \"true\";\n\n        const widget =\n            section.closest(\n                \".elementor-widget-html\"\n            );\n\n        if (widget) {\n\n            widget.classList.add(\n                \"dx-testimonials-widget-fullwidth\"\n            );\n        }\n\n        \/* =====================================================\n           VIDEO MODAL\n        ====================================================== *\/\n\n        const videoButtons =\n            Array.from(\n                section.querySelectorAll(\n                    \".dx-test-video-card\"\n                )\n            );\n\n        const modal =\n            document.getElementById(\n                \"dx-test-video-modal\"\n            );\n\n        const modalVideo =\n            modal\n                ? modal.querySelector(\n                    \".dx-test-modal-video\"\n                )\n                : null;\n\n        const modalClose =\n            modal\n                ? modal.querySelector(\n                    \".dx-test-modal-close\"\n                )\n                : null;\n\n        let lastFocusedElement =\n            null;\n\n        function openVideo(\n            videoId,\n            trigger\n        ) {\n\n            if (\n                !modal ||\n                !modalVideo ||\n                !videoId\n            ) {\n                return;\n            }\n\n            lastFocusedElement =\n                trigger || null;\n\n            const iframe =\n                document.createElement(\n                    \"iframe\"\n                );\n\n            iframe.src =\n                \"https:\/\/www.youtube.com\/embed\/\" +\n                encodeURIComponent(videoId) +\n                \"?feature=oembed\" +\n                \"&autoplay=1\" +\n                \"&controls=1\" +\n                \"&rel=0\" +\n                \"&playsinline=1\";\n\n            iframe.title =\n                \"Client video testimonial\";\n\n            iframe.allow =\n                \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\";\n\n            iframe.allowFullscreen =\n                true;\n\n            iframe.referrerPolicy =\n                \"strict-origin-when-cross-origin\";\n\n            modalVideo.innerHTML =\n                \"\";\n\n            modalVideo.appendChild(\n                iframe\n            );\n\n            modal.classList.add(\n                \"is-open\"\n            );\n\n            modal.setAttribute(\n                \"aria-hidden\",\n                \"false\"\n            );\n\n            document.body.classList.add(\n                \"dx-test-modal-open\"\n            );\n\n            window.setTimeout(\n                function () {\n\n                    if (modalClose) {\n                        modalClose.focus();\n                    }\n\n                },\n                50\n            );\n        }\n\n        function closeVideo() {\n\n            if (\n                !modal ||\n                !modalVideo\n            ) {\n                return;\n            }\n\n            modal.classList.remove(\n                \"is-open\"\n            );\n\n            modal.setAttribute(\n                \"aria-hidden\",\n                \"true\"\n            );\n\n            modalVideo.innerHTML =\n                \"\";\n\n            document.body.classList.remove(\n                \"dx-test-modal-open\"\n            );\n\n            if (\n                lastFocusedElement &&\n                typeof lastFocusedElement.focus ===\n                    \"function\"\n            ) {\n                lastFocusedElement.focus();\n            }\n        }\n\n        videoButtons.forEach(\n            function (button) {\n\n                button.addEventListener(\n                    \"click\",\n                    function () {\n\n                        openVideo(\n                            button.getAttribute(\n                                \"data-video-id\"\n                            ),\n                            button\n                        );\n                    }\n                );\n            }\n        );\n\n        if (modalClose) {\n\n            modalClose.addEventListener(\n                \"click\",\n                closeVideo\n            );\n        }\n\n        if (modal) {\n\n            modal.addEventListener(\n                \"click\",\n                function (event) {\n\n                    if (\n                        event.target === modal\n                    ) {\n                        closeVideo();\n                    }\n                }\n            );\n        }\n\n        document.addEventListener(\n            \"keydown\",\n            function (event) {\n\n                if (\n                    event.key === \"Escape\" &&\n                    modal &&\n                    modal.classList.contains(\n                        \"is-open\"\n                    )\n                ) {\n                    closeVideo();\n                }\n            }\n        );\n\n        \/* =====================================================\n           TESTIMONIAL SLIDER\n        ====================================================== *\/\n\n        const slider =\n            section.querySelector(\n                \".dx-test-slider\"\n            );\n\n        const track =\n            section.querySelector(\n                \".dx-test-track\"\n            );\n\n        const slides =\n            Array.from(\n                section.querySelectorAll(\n                    \".dx-test-slide\"\n                )\n            );\n\n        const previousButton =\n            section.querySelector(\n                \".dx-test-arrow-prev\"\n            );\n\n        const nextButton =\n            section.querySelector(\n                \".dx-test-arrow-next\"\n            );\n\n        const pagination =\n            section.querySelector(\n                \".dx-test-pagination\"\n            );\n\n        if (\n            !slider ||\n            !track ||\n            slides.length === 0 ||\n            !pagination\n        ) {\n            return;\n        }\n\n        let currentIndex = 0;\n\n        let autoplayTimer =\n            null;\n\n        let touchStartX =\n            0;\n\n        let touchEndX =\n            0;\n\n        let resizeTimer =\n            null;\n\n        function getVisibleSlides() {\n\n            return window.innerWidth <= 900\n                ? 1\n                : 2;\n        }\n\n        function getPagesCount() {\n\n            return Math.max(\n                1,\n                Math.ceil(\n                    slides.length \/\n                    getVisibleSlides()\n                )\n            );\n        }\n\n        function normalizeIndex(\n            index\n        ) {\n\n            const pagesCount =\n                getPagesCount();\n\n            if (index < 0) {\n                return pagesCount - 1;\n            }\n\n            if (\n                index >= pagesCount\n            ) {\n                return 0;\n            }\n\n            return index;\n        }\n\n        function createPagination() {\n\n            pagination.innerHTML =\n                \"\";\n\n            const pagesCount =\n                getPagesCount();\n\n            for (\n                let index = 0;\n                index < pagesCount;\n                index += 1\n            ) {\n\n                const dot =\n                    document.createElement(\n                        \"button\"\n                    );\n\n                dot.type =\n                    \"button\";\n\n                dot.className =\n                    \"dx-test-dot\";\n\n                dot.setAttribute(\n                    \"aria-label\",\n                    \"Go to testimonial group \" +\n                    (index + 1)\n                );\n\n                dot.addEventListener(\n                    \"click\",\n                    function () {\n\n                        currentIndex =\n                            index;\n\n                        updateSlider();\n\n                        restartAutoplay();\n                    }\n                );\n\n                pagination.appendChild(\n                    dot\n                );\n            }\n        }\n\n        function updateSlider() {\n\n            const visibleSlides =\n                getVisibleSlides();\n\n            const slidePercentage =\n                100 \/ visibleSlides;\n\n            const offset =\n                currentIndex *\n                visibleSlides *\n                slidePercentage;\n\n            \/*\n             * LTR slider moves left as index increases.\n             *\/\n            track.style.transform =\n                \"translateX(-\" +\n                offset +\n                \"%)\";\n\n            const dots =\n                Array.from(\n                    pagination.querySelectorAll(\n                        \".dx-test-dot\"\n                    )\n                );\n\n            dots.forEach(\n                function (\n                    dot,\n                    index\n                ) {\n\n                    const isActive =\n                        index ===\n                        currentIndex;\n\n                    dot.classList.toggle(\n                        \"is-active\",\n                        isActive\n                    );\n\n                    dot.setAttribute(\n                        \"aria-current\",\n                        isActive\n                            ? \"true\"\n                            : \"false\"\n                    );\n                }\n            );\n        }\n\n        function goNext() {\n\n            currentIndex =\n                normalizeIndex(\n                    currentIndex + 1\n                );\n\n            updateSlider();\n        }\n\n        function goPrevious() {\n\n            currentIndex =\n                normalizeIndex(\n                    currentIndex - 1\n                );\n\n            updateSlider();\n        }\n\n        function stopAutoplay() {\n\n            if (autoplayTimer) {\n\n                window.clearInterval(\n                    autoplayTimer\n                );\n\n                autoplayTimer =\n                    null;\n            }\n        }\n\n        function startAutoplay() {\n\n            stopAutoplay();\n\n            autoplayTimer =\n                window.setInterval(\n                    goNext,\n                    5500\n                );\n        }\n\n        function restartAutoplay() {\n\n            stopAutoplay();\n\n            startAutoplay();\n        }\n\n        if (previousButton) {\n\n            previousButton.addEventListener(\n                \"click\",\n                function () {\n\n                    goPrevious();\n\n                    restartAutoplay();\n                }\n            );\n        }\n\n        if (nextButton) {\n\n            nextButton.addEventListener(\n                \"click\",\n                function () {\n\n                    goNext();\n\n                    restartAutoplay();\n                }\n            );\n        }\n\n        slider.addEventListener(\n            \"mouseenter\",\n            stopAutoplay\n        );\n\n        slider.addEventListener(\n            \"mouseleave\",\n            startAutoplay\n        );\n\n        slider.addEventListener(\n            \"focusin\",\n            stopAutoplay\n        );\n\n        slider.addEventListener(\n            \"focusout\",\n            startAutoplay\n        );\n\n        slider.addEventListener(\n            \"touchstart\",\n            function (event) {\n\n                touchStartX =\n                    event.changedTouches[0]\n                        .clientX;\n            },\n            {\n                passive: true\n            }\n        );\n\n        slider.addEventListener(\n            \"touchend\",\n            function (event) {\n\n                touchEndX =\n                    event.changedTouches[0]\n                        .clientX;\n\n                const distance =\n                    touchEndX -\n                    touchStartX;\n\n                if (\n                    Math.abs(distance) <\n                    45\n                ) {\n                    return;\n                }\n\n                \/*\n                 * LTR:\n                 * Swipe left  -> next\n                 * Swipe right -> previous\n                 *\/\n                if (\n                    distance < 0\n                ) {\n\n                    goNext();\n\n                } else {\n\n                    goPrevious();\n                }\n\n                restartAutoplay();\n            },\n            {\n                passive: true\n            }\n        );\n\n        window.addEventListener(\n            \"resize\",\n            function () {\n\n                window.clearTimeout(\n                    resizeTimer\n                );\n\n                resizeTimer =\n                    window.setTimeout(\n                        function () {\n\n                            currentIndex =\n                                0;\n\n                            createPagination();\n\n                            updateSlider();\n                        },\n                        150\n                    );\n            }\n        );\n\n        createPagination();\n        updateSlider();\n        startAutoplay();\n    }\n\n    if (\n        document.readyState ===\n        \"loading\"\n    ) {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxTestimonials\n        );\n\n    } else {\n\n        initDxTestimonials();\n\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0f5a6df e-con-full e-flex e-con e-parent\" data-id=\"0f5a6df\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4896aa5 elementor-widget elementor-widget-html\" data-id=\"4896aa5\" 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     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-final-cta),\n.elementor-widget-html:has(#dx-final-cta) > .elementor-widget-container,\n.dx-final-cta-widget-fullwidth,\n.dx-final-cta-widget-fullwidth > .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\n========================================================= *\/\n\n#dx-final-cta,\n#dx-final-cta *,\n#dx-final-cta *::before,\n#dx-final-cta *::after {\n    box-sizing: border-box;\n}\n\n#dx-final-cta {\n    --dx-cta-dark: #090020;\n    --dx-cta-dark-light: #20104b;\n    --dx-cta-purple: #6942d8;\n    --dx-cta-purple-light: #9168ef;\n    --dx-cta-yellow: #ffc441;\n    --dx-cta-yellow-light: #ffd66e;\n    --dx-cta-white: #ffffff;\n    --dx-cta-text: rgba(255, 255, 255, 0.74);\n    --dx-cta-border: rgba(255, 255, 255, 0.15);\n    --dx-cta-page-bg: #f8f7fc;\n\n    position: relative;\n    z-index: 2;\n    isolation: isolate;\n\n    display: block;\n    clear: both;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n\n    direction: ltr;\n\n    color: var(--dx-cta-white);\n\n    background: var(--dx-cta-page-bg);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-final-cta a {\n    color: inherit;\n    text-decoration: none;\n}\n\n#dx-final-cta button {\n    font: inherit;\n}\n\n\/* =========================================================\n   SECTION LAYOUT\n========================================================= *\/\n\n#dx-final-cta .dx-final-cta-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        58px\n        clamp(22px, 5vw, 90px)\n        62px;\n}\n\n#dx-final-cta .dx-final-cta-container {\n    position: relative;\n    isolation: isolate;\n\n    width: min(1580px, 100%);\n    min-height: 460px;\n\n    margin: 0 auto;\n\n    padding:\n        58px\n        clamp(28px, 5vw, 85px);\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    overflow: hidden;\n\n    border: 1px solid var(--dx-cta-border);\n    border-radius: 30px;\n\n    background:\n        radial-gradient(\n            circle at 18% 16%,\n            rgba(145, 104, 239, 0.28),\n            transparent 30%\n        ),\n        radial-gradient(\n            circle at 88% 82%,\n            rgba(105, 66, 216, 0.24),\n            transparent 35%\n        ),\n        linear-gradient(\n            145deg,\n            var(--dx-cta-dark-light),\n            var(--dx-cta-dark)\n        );\n\n    box-shadow:\n        0 30px 66px rgba(38, 17, 86, 0.20),\n        inset 0 1px 0 rgba(255, 255, 255, 0.08);\n}\n\n\/* =========================================================\n   INTERNAL BACKGROUND\n========================================================= *\/\n\n#dx-final-cta .dx-final-cta-grid {\n    position: absolute;\n    z-index: -5;\n\n    inset: 0;\n\n    opacity: 0.08;\n\n    background-image:\n        linear-gradient(\n            rgba(255, 255, 255, 0.05) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(255, 255, 255, 0.05) 1px,\n            transparent 1px\n        );\n\n    background-size: 68px 68px;\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-final-cta .dx-final-cta-center-orbit {\n    position: absolute;\n    z-index: -3;\n\n    top: -145px;\n    left: 50%;\n\n    width: 340px;\n    height: 340px;\n\n    border:\n        58px solid rgba(145, 104, 239, 0.10);\n\n    border-radius:\n        50%;\n\n    transform:\n        translateX(-50%);\n\n    pointer-events:\n        none;\n}\n\n#dx-final-cta .dx-final-cta-line {\n    position: absolute;\n    z-index: -2;\n\n    left: -90px;\n    bottom: 35px;\n\n    width: 350px;\n    height: 8px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            rgba(145, 104, 239, 0.58),\n            rgba(255, 196, 65, 0.38),\n            transparent\n        );\n\n    transform:\n        rotate(45deg);\n\n    pointer-events:\n        none;\n}\n\n#dx-final-cta .dx-final-cta-dots {\n    position: absolute;\n    z-index: -2;\n\n    right: 36px;\n    top: 30px;\n\n    width: 110px;\n    height: 110px;\n\n    opacity: 0.22;\n\n    background-image:\n        radial-gradient(\n            circle,\n            var(--dx-cta-purple-light) 2px,\n            transparent 2.7px\n        );\n\n    background-size:\n        17px 17px;\n\n    pointer-events:\n        none;\n}\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n#dx-final-cta .dx-final-cta-content {\n    position: relative;\n    z-index: 5;\n\n    width:\n        min(\n            920px,\n            100%\n        );\n\n    text-align:\n        center;\n}\n\n#dx-final-cta .dx-final-cta-label {\n    display:\n        inline-flex;\n\n    align-items:\n        center;\n\n    justify-content:\n        center;\n\n    gap:\n        10px;\n\n    margin-bottom:\n        13px;\n\n    color:\n        var(--dx-cta-yellow);\n\n    font-size:\n        14px;\n\n    font-weight:\n        800;\n\n    line-height:\n        1.6;\n}\n\n#dx-final-cta .dx-final-cta-label::before,\n#dx-final-cta .dx-final-cta-label::after {\n    content:\n        \"\";\n\n    width:\n        34px;\n\n    height:\n        2px;\n\n    border-radius:\n        999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-cta-yellow),\n            var(--dx-cta-purple-light)\n        );\n}\n\n#dx-final-cta .dx-final-cta-title {\n    margin:\n        0;\n\n    color:\n        var(--dx-cta-white);\n\n    font-size:\n        clamp(\n            34px,\n            4vw,\n            58px\n        );\n\n    font-weight:\n        900;\n\n    line-height:\n        1.22;\n\n    letter-spacing:\n        -1px;\n}\n\n#dx-final-cta .dx-final-cta-title-highlight {\n    color:\n        var(--dx-cta-yellow);\n}\n\n#dx-final-cta .dx-final-cta-description {\n    max-width:\n        740px;\n\n    margin:\n        18px\n        auto\n        0;\n\n    color:\n        var(--dx-cta-text);\n\n    font-size:\n        16px;\n\n    font-weight:\n        400;\n\n    line-height:\n        1.8;\n}\n\n\/* =========================================================\n   BUTTONS\n========================================================= *\/\n\n#dx-final-cta .dx-final-cta-actions {\n    margin-top:\n        28px;\n\n    display:\n        flex;\n\n    align-items:\n        center;\n\n    justify-content:\n        center;\n\n    flex-wrap:\n        wrap;\n\n    gap:\n        13px;\n}\n\n#dx-final-cta .dx-final-cta-button {\n    position:\n        relative;\n\n    min-width:\n        220px;\n\n    min-height:\n        56px;\n\n    display:\n        inline-flex;\n\n    align-items:\n        center;\n\n    justify-content:\n        center;\n\n    gap:\n        10px;\n\n    padding:\n        0\n        27px;\n\n    border:\n        1px solid transparent;\n\n    border-radius:\n        13px;\n\n    font-size:\n        14px;\n\n    font-weight:\n        800;\n\n    line-height:\n        1.5;\n\n    cursor:\n        pointer;\n\n    overflow:\n        hidden;\n\n    transition:\n        transform 0.25s ease,\n        box-shadow 0.25s ease,\n        border-color 0.25s ease,\n        background 0.25s ease,\n        color 0.25s ease;\n}\n\n#dx-final-cta .dx-final-cta-button-primary {\n    color:\n        #190c32;\n\n    border-color:\n        rgba(255, 255, 255, 0.25);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-cta-yellow),\n            var(--dx-cta-yellow-light)\n        );\n\n    box-shadow:\n        0 17px 38px\n        rgba(255, 196, 65, 0.24);\n}\n\n#dx-final-cta .dx-final-cta-button-primary::before {\n    content:\n        \"\";\n\n    position:\n        absolute;\n\n    top:\n        -50%;\n\n    left:\n        -70%;\n\n    width:\n        35%;\n\n    height:\n        200%;\n\n    background:\n        linear-gradient(\n            90deg,\n            transparent,\n            rgba(255, 255, 255, 0.55),\n            transparent\n        );\n\n    transform:\n        rotate(20deg);\n\n    transition:\n        left 0.55s ease;\n}\n\n#dx-final-cta .dx-final-cta-button-primary:hover::before {\n    left:\n        135%;\n}\n\n#dx-final-cta .dx-final-cta-button-secondary {\n    color:\n        var(--dx-cta-white);\n\n    border-color:\n        rgba(255, 255, 255, 0.22);\n\n    background:\n        rgba(255, 255, 255, 0.07);\n\n    -webkit-backdrop-filter:\n        blur(10px);\n\n    backdrop-filter:\n        blur(10px);\n}\n\n#dx-final-cta .dx-final-cta-button:hover,\n#dx-final-cta .dx-final-cta-button:focus-visible {\n    transform:\n        translateY(-4px);\n}\n\n#dx-final-cta .dx-final-cta-button-primary:hover,\n#dx-final-cta .dx-final-cta-button-primary:focus-visible {\n    color:\n        #120725;\n\n    box-shadow:\n        0 22px 48px\n        rgba(255, 196, 65, 0.34);\n}\n\n#dx-final-cta .dx-final-cta-button-secondary:hover,\n#dx-final-cta .dx-final-cta-button-secondary:focus-visible {\n    border-color:\n        rgba(145, 104, 239, 0.72);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-cta-purple),\n            var(--dx-cta-purple-light)\n        );\n\n    box-shadow:\n        0 19px 42px\n        rgba(105, 66, 216, 0.32);\n}\n\n#dx-final-cta .dx-final-cta-button svg {\n    position:\n        relative;\n\n    z-index:\n        2;\n\n    width:\n        20px;\n\n    height:\n        20px;\n\n    flex:\n        0 0 20px;\n\n    fill:\n        none;\n\n    stroke:\n        currentColor;\n\n    stroke-width:\n        1.9;\n\n    stroke-linecap:\n        round;\n\n    stroke-linejoin:\n        round;\n}\n\n\/* =========================================================\n   TRUST ITEMS\n========================================================= *\/\n\n#dx-final-cta .dx-final-cta-trust {\n    margin-top:\n        24px;\n\n    display:\n        flex;\n\n    align-items:\n        center;\n\n    justify-content:\n        center;\n\n    flex-wrap:\n        wrap;\n\n    gap:\n        10px\n        22px;\n}\n\n#dx-final-cta .dx-final-cta-trust-item {\n    display:\n        inline-flex;\n\n    align-items:\n        center;\n\n    gap:\n        8px;\n\n    color:\n        rgba(255, 255, 255, 0.66);\n\n    font-size:\n        13px;\n\n    font-weight:\n        600;\n\n    line-height:\n        1.6;\n}\n\n#dx-final-cta .dx-final-cta-trust-icon {\n    width:\n        22px;\n\n    height:\n        22px;\n\n    display:\n        inline-flex;\n\n    align-items:\n        center;\n\n    justify-content:\n        center;\n\n    border:\n        1px solid rgba(255, 196, 65, 0.30);\n\n    border-radius:\n        50%;\n\n    color:\n        var(--dx-cta-yellow);\n\n    background:\n        rgba(255, 196, 65, 0.08);\n}\n\n#dx-final-cta .dx-final-cta-trust-icon svg {\n    width:\n        12px;\n\n    height:\n        12px;\n\n    fill:\n        none;\n\n    stroke:\n        currentColor;\n\n    stroke-width:\n        2.2;\n\n    stroke-linecap:\n        round;\n\n    stroke-linejoin:\n        round;\n}\n\n\/* =========================================================\n   FLOATING SHAPES\n========================================================= *\/\n\n#dx-final-cta .dx-final-cta-floating {\n    position:\n        absolute;\n\n    z-index:\n        1;\n\n    pointer-events:\n        none;\n\n    animation:\n        dxFinalCtaFloat\n        5s\n        ease-in-out\n        infinite;\n}\n\n#dx-final-cta .dx-final-cta-floating-one {\n    top:\n        36px;\n\n    left:\n        48px;\n\n    width:\n        50px;\n\n    height:\n        50px;\n\n    border:\n        1px solid rgba(255, 255, 255, 0.18);\n\n    border-radius:\n        16px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(145, 104, 239, 0.72),\n            rgba(105, 66, 216, 0.20)\n        );\n\n    transform:\n        rotate(-16deg);\n}\n\n#dx-final-cta .dx-final-cta-floating-two {\n    right:\n        62px;\n\n    bottom:\n        44px;\n\n    width:\n        40px;\n\n    height:\n        40px;\n\n    border:\n        8px solid rgba(255, 196, 65, 0.60);\n\n    border-radius:\n        50%;\n\n    animation-delay:\n        -2.3s;\n}\n\n#dx-final-cta .dx-final-cta-floating-three {\n    top:\n        68px;\n\n    right:\n        82px;\n\n    width:\n        16px;\n\n    height:\n        16px;\n\n    border-radius:\n        50%;\n\n    background:\n        var(--dx-cta-yellow);\n\n    box-shadow:\n        0 0 30px\n        rgba(255, 196, 65, 0.50);\n\n    animation-delay:\n        -1.2s;\n}\n\n@keyframes dxFinalCtaFloat {\n\n    0%,\n    100% {\n        transform:\n            translateY(0)\n            rotate(-12deg);\n    }\n\n    50% {\n        transform:\n            translateY(-12px)\n            rotate(-18deg);\n    }\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 900px) {\n\n    #dx-final-cta .dx-final-cta-main {\n        padding:\n            52px\n            28px\n            56px;\n    }\n\n    #dx-final-cta .dx-final-cta-container {\n        min-height:\n            430px;\n\n        padding:\n            52px\n            34px;\n\n        border-radius:\n            27px;\n    }\n\n    #dx-final-cta .dx-final-cta-title {\n        font-size:\n            clamp(\n                34px,\n                6.5vw,\n                50px\n            );\n\n        line-height:\n            1.25;\n    }\n\n    #dx-final-cta .dx-final-cta-floating-one {\n        top:\n            25px;\n\n        left:\n            26px;\n    }\n\n    #dx-final-cta .dx-final-cta-floating-two {\n        right:\n            30px;\n\n        bottom:\n            30px;\n    }\n\n    #dx-final-cta .dx-final-cta-floating-three {\n        top:\n            38px;\n\n        right:\n            40px;\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 600px) {\n\n    #dx-final-cta .dx-final-cta-main {\n        padding:\n            38px\n            16px\n            42px;\n    }\n\n    #dx-final-cta .dx-final-cta-container {\n        min-height:\n            0;\n\n        padding:\n            46px\n            18px\n            42px;\n\n        border-radius:\n            22px;\n    }\n\n    #dx-final-cta .dx-final-cta-center-orbit {\n        top:\n            -75px;\n\n        width:\n            220px;\n\n        height:\n            220px;\n\n        border-width:\n            40px;\n    }\n\n    #dx-final-cta .dx-final-cta-label {\n        margin-bottom:\n            11px;\n\n        font-size:\n            13px;\n    }\n\n    #dx-final-cta .dx-final-cta-label::before,\n    #dx-final-cta .dx-final-cta-label::after {\n        width:\n            22px;\n    }\n\n    #dx-final-cta .dx-final-cta-title {\n        font-size:\n            clamp(\n                27px,\n                8.5vw,\n                36px\n            );\n\n        line-height:\n            1.3;\n\n        letter-spacing:\n            -0.4px;\n    }\n\n    #dx-final-cta .dx-final-cta-description {\n        margin-top:\n            14px;\n\n        font-size:\n            15px;\n\n        line-height:\n            1.75;\n    }\n\n    #dx-final-cta .dx-final-cta-actions {\n        margin-top:\n            23px;\n\n        gap:\n            10px;\n    }\n\n    #dx-final-cta .dx-final-cta-button {\n        width:\n            100%;\n\n        min-width:\n            0;\n\n        min-height:\n            54px;\n\n        padding-right:\n            18px;\n\n        padding-left:\n            18px;\n\n        font-size:\n            14px;\n    }\n\n    #dx-final-cta .dx-final-cta-trust {\n        margin-top:\n            21px;\n\n        display:\n            grid;\n\n        grid-template-columns:\n            1fr;\n\n        gap:\n            9px;\n    }\n\n    #dx-final-cta .dx-final-cta-trust-item {\n        justify-content:\n            center;\n\n        font-size:\n            12px;\n    }\n\n    #dx-final-cta .dx-final-cta-floating-one {\n        top:\n            16px;\n\n        left:\n            16px;\n\n        width:\n            36px;\n\n        height:\n            36px;\n\n        border-radius:\n            11px;\n\n        opacity:\n            0.70;\n    }\n\n    #dx-final-cta .dx-final-cta-floating-two {\n        right:\n            16px;\n\n        bottom:\n            16px;\n\n        width:\n            30px;\n\n        height:\n            30px;\n\n        border-width:\n            6px;\n\n        opacity:\n            0.66;\n    }\n\n    #dx-final-cta .dx-final-cta-floating-three {\n        top:\n            24px;\n\n        right:\n            24px;\n\n        width:\n            10px;\n\n        height:\n            10px;\n\n        opacity:\n            0.78;\n    }\n\n    #dx-final-cta .dx-final-cta-line {\n        left:\n            -170px;\n\n        bottom:\n            75px;\n\n        width:\n            340px;\n\n        height:\n            7px;\n\n        opacity:\n            0.50;\n    }\n\n    #dx-final-cta .dx-final-cta-dots {\n        display:\n            none;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-final-cta a:focus-visible,\n#dx-final-cta button:focus-visible {\n    outline:\n        3px solid var(--dx-cta-yellow);\n\n    outline-offset:\n        4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n\n    #dx-final-cta *,\n    #dx-final-cta *::before,\n    #dx-final-cta *::after {\n        animation-duration:\n            0.01ms !important;\n\n        animation-iteration-count:\n            1 !important;\n\n        transition-duration:\n            0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-final-cta\"\n    aria-labelledby=\"dx-final-cta-title\"\n    dir=\"ltr\"\n>\n\n    <div class=\"dx-final-cta-main\">\n\n        <div class=\"dx-final-cta-container\">\n\n            <div\n                class=\"dx-final-cta-grid\"\n                aria-hidden=\"true\"\n            ><\/div>\n\n            <span\n                class=\"dx-final-cta-center-orbit\"\n                aria-hidden=\"true\"\n            ><\/span>\n\n            <span\n                class=\"dx-final-cta-line\"\n                aria-hidden=\"true\"\n            ><\/span>\n\n            <span\n                class=\"dx-final-cta-dots\"\n                aria-hidden=\"true\"\n            ><\/span>\n\n            <span\n                class=\"dx-final-cta-floating dx-final-cta-floating-one\"\n                aria-hidden=\"true\"\n            ><\/span>\n\n            <span\n                class=\"dx-final-cta-floating dx-final-cta-floating-two\"\n                aria-hidden=\"true\"\n            ><\/span>\n\n            <span\n                class=\"dx-final-cta-floating dx-final-cta-floating-three\"\n                aria-hidden=\"true\"\n            ><\/span>\n\n            <div class=\"dx-final-cta-content\">\n\n                <span class=\"dx-final-cta-label\">\n                    Let\u2019s Start Your Project\n                <\/span>\n\n                <h2\n                    id=\"dx-final-cta-title\"\n                    class=\"dx-final-cta-title\"\n                >\n                    Have a Digital Project in Mind?\n                    <br>\n\n                    Let\u2019s Turn It Into a\n\n                    <span class=\"dx-final-cta-title-highlight\">\n                        Powerful Digital Solution\n                    <\/span>\n                <\/h2>\n\n                <p class=\"dx-final-cta-description\">\n                    Tell us about your idea and business goals.\n                    Our team will understand your requirements and\n                    recommend the right digital solution to help you\n                    launch, grow, and move forward with confidence.\n                <\/p>\n\n                <div class=\"dx-final-cta-actions\">\n\n                    <!-- PRIMARY CTA -->\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/contact\/\"\n                        class=\"dx-final-cta-button dx-final-cta-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=\"M8 3h8a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3h-5l-4 4v-4a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h1\"><\/path>\n                            <path d=\"M8 8h8\"><\/path>\n                            <path d=\"M8 11h5\"><\/path>\n                        <\/svg>\n                    <\/a>\n\n                    <!-- SECONDARY CTA -->\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/web-projects\/\"\n                        class=\"dx-final-cta-button dx-final-cta-button-secondary\"\n                    >\n                        <span>\n                            Explore Our Work\n                        <\/span>\n\n                        <svg\n                            class=\"dx-final-cta-contact-arrow\"\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                <!-- =================================================\n                     TRUST ITEMS\n                ================================================== -->\n\n                <div\n                    class=\"dx-final-cta-trust\"\n                    aria-label=\"Project consultation benefits\"\n                >\n\n                    <span class=\"dx-final-cta-trust-item\">\n\n                        <span\n                            class=\"dx-final-cta-trust-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"m6 12 4 4 8-8\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span>\n                            Free Initial Consultation\n                        <\/span>\n\n                    <\/span>\n\n                    <span class=\"dx-final-cta-trust-item\">\n\n                        <span\n                            class=\"dx-final-cta-trust-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"m6 12 4 4 8-8\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span>\n                            Clear Project Roadmap\n                        <\/span>\n\n                    <\/span>\n\n                    <span class=\"dx-final-cta-trust-item\">\n\n                        <span\n                            class=\"dx-final-cta-trust-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"m6 12 4 4 8-8\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span>\n                            Solutions Tailored to Your Business\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 initDxFinalCta() {\n\n        const section =\n            document.getElementById(\n                \"dx-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-final-cta-widget-fullwidth\"\n            );\n        }\n    }\n\n    if (\n        document.readyState === \"loading\"\n    ) {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxFinalCta\n        );\n\n    } else {\n\n        initDxFinalCta();\n\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>D-INDEX Your Partner in Digital Transformation We build high-performing websites, mobile apps, e-commerce platforms, and custom digital solutions designed to help businesses grow and compete in a digital-first world. Get a Free Consultation Explore Our Work 52+ Projects Delivered 141 Clients Worldwide 12+ Professional Team Members 98% Client Satisfaction About D-INDEX Digital Solutions Built to [&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-146","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>Home - 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\/en\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Home - D-INDEX - Your Partner in Digital Transformation\" \/>\n<meta property=\"og:description\" content=\"D-INDEX Your Partner in Digital Transformation We build high-performing websites, mobile apps, e-commerce platforms, and custom digital solutions designed to help businesses grow and compete in a digital-first world. Get a Free Consultation Explore Our Work 52+ Projects Delivered 141 Clients Worldwide 12+ Professional Team Members 98% Client Satisfaction About D-INDEX Digital Solutions Built to [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dindex.net\/en\/\" \/>\n<meta property=\"og:site_name\" content=\"D-INDEX - Your Partner in Digital Transformation\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-19T08:56:27+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\\\/en\\\/\",\"url\":\"https:\\\/\\\/dindex.net\\\/en\\\/\",\"name\":\"Home - D-INDEX - Your Partner in Digital Transformation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/dindex.net\\\/#website\"},\"datePublished\":\"2025-02-14T08:44:39+00:00\",\"dateModified\":\"2026-08-19T08:56:27+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/dindex.net\\\/en\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/dindex.net\\\/en\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/dindex.net\\\/en\\\/#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\":\"Home\"}]},{\"@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":"Home - 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\/en\/","og_locale":"en_US","og_type":"article","og_title":"Home - D-INDEX - Your Partner in Digital Transformation","og_description":"D-INDEX Your Partner in Digital Transformation We build high-performing websites, mobile apps, e-commerce platforms, and custom digital solutions designed to help businesses grow and compete in a digital-first world. Get a Free Consultation Explore Our Work 52+ Projects Delivered 141 Clients Worldwide 12+ Professional Team Members 98% Client Satisfaction About D-INDEX Digital Solutions Built to [&hellip;]","og_url":"https:\/\/dindex.net\/en\/","og_site_name":"D-INDEX - Your Partner in Digital Transformation","article_modified_time":"2026-08-19T08:56:27+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\/en\/","url":"https:\/\/dindex.net\/en\/","name":"Home - D-INDEX - Your Partner in Digital Transformation","isPartOf":{"@id":"https:\/\/dindex.net\/#website"},"datePublished":"2025-02-14T08:44:39+00:00","dateModified":"2026-08-19T08:56:27+00:00","breadcrumb":{"@id":"https:\/\/dindex.net\/en\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dindex.net\/en\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/dindex.net\/en\/#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":"Home"}]},{"@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\/146","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=146"}],"version-history":[{"count":117,"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/pages\/146\/revisions"}],"predecessor-version":[{"id":3885,"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/pages\/146\/revisions\/3885"}],"wp:attachment":[{"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/media?parent=146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}