{"id":148,"date":"2025-02-14T08:44:52","date_gmt":"2025-02-14T08:44:52","guid":{"rendered":"https:\/\/lightslategray-hummingbird-166239.hostingersite.com\/?page_id=148"},"modified":"2026-08-19T09:32:16","modified_gmt":"2026-08-19T09:32:16","slug":"about","status":"publish","type":"page","link":"https:\/\/dindex.net\/en\/about\/","title":{"rendered":"About"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"148\" class=\"elementor elementor-148\" 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-b799741 e-con-full e-flex e-con e-parent\" data-id=\"b799741\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t<div class=\"elementor-element elementor-element-a1873d9 e-con-full e-flex e-con e-child\" data-id=\"a1873d9\" 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-7363250 elementor-absolute elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-image\" data-id=\"7363250\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"75\" height=\"211\" src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/Ellipse-7.png\" class=\"attachment-full size-full wp-image-83\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\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<div class=\"elementor-element elementor-element-44230f3 e-flex e-con-boxed e-con e-parent\" data-id=\"44230f3\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9bfe8df elementor-widget elementor-widget-html\" data-id=\"9bfe8df\" 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 ABOUT PAGE HERO\n     Author: Mohamed El-Sehemy\n     English LTR Version\n     Elementor Compatible\n========================================================== -->\n\n<style>\nhtml,\nbody {\n    max-width: 100%;\n    overflow-x: clip;\n}\n\n.elementor-widget-html:has(#dx-about-hero-en),\n.elementor-widget-html:has(#dx-about-hero-en) > .elementor-widget-container,\n.dx-about-hero-en-widget,\n.dx-about-hero-en-widget > .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-about-hero-en,\n#dx-about-hero-en *,\n#dx-about-hero-en *::before,\n#dx-about-hero-en *::after {\n    box-sizing: border-box;\n}\n\n#dx-about-hero-en {\n    --dx-dark: #08001f;\n    --dx-dark-2: #16053b;\n    --dx-purple: #6942d8;\n    --dx-purple-light: #9168ef;\n    --dx-yellow: #ffc441;\n    --dx-white: #ffffff;\n    --dx-text: rgba(255,255,255,.76);\n    --dx-border: rgba(255,255,255,.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: hidden;\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 85% 30%,\n            rgba(105,66,216,.27),\n            transparent 30%\n        ),\n        radial-gradient(\n            circle at 12% 15%,\n            rgba(145,104,239,.15),\n            transparent 26%\n        ),\n        linear-gradient(\n            220deg,\n            var(--dx-dark-2),\n            var(--dx-dark)\n        );\n}\n\n#dx-about-hero-en a {\n    color: inherit;\n    text-decoration: none;\n}\n\n\/* =========================================================\n   BACKGROUND\n========================================================= *\/\n\n#dx-about-hero-en .dx-about-hero-bg {\n    position: absolute;\n    z-index: -5;\n\n    inset: 0;\n\n    pointer-events: none;\n}\n\n#dx-about-hero-en .dx-about-hero-bg::before {\n    content: \"\";\n\n    position: absolute;\n\n    inset: 0;\n\n    opacity: .13;\n\n    background-image:\n        linear-gradient(\n            rgba(255,255,255,.035) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(255,255,255,.035) 1px,\n            transparent 1px\n        );\n\n    background-size: 72px 72px;\n\n    -webkit-mask-image:\n        linear-gradient(\n            to bottom,\n            #000 0%,\n            rgba(0,0,0,.9) 55%,\n            transparent 100%\n        );\n\n    mask-image:\n        linear-gradient(\n            to bottom,\n            #000 0%,\n            rgba(0,0,0,.9) 55%,\n            transparent 100%\n        );\n}\n\n#dx-about-hero-en .dx-about-hero-orbit {\n    position: absolute;\n\n    border:\n        1px solid rgba(145,104,239,.18);\n\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-about-hero-en .dx-about-hero-orbit-one {\n    top: 20px;\n    right: -190px;\n\n    width: 430px;\n    height: 430px;\n}\n\n#dx-about-hero-en .dx-about-hero-orbit-two {\n    left: -160px;\n    bottom: 20px;\n\n    width: 330px;\n    height: 330px;\n}\n\n#dx-about-hero-en .dx-about-hero-dots {\n    position: absolute;\n\n    top: 90px;\n    left: 5%;\n\n    width: 110px;\n    height: 110px;\n\n    opacity: .28;\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\/* =========================================================\n   MAIN\n========================================================= *\/\n\n#dx-about-hero-en .dx-about-hero-main {\n    position: relative;\n    z-index: 3;\n\n    width: 100%;\n\n    padding:\n        78px\n        clamp(24px,5vw,90px)\n        120px;\n}\n\n#dx-about-hero-en .dx-about-hero-container {\n    width: min(1450px,100%);\n\n    margin: 0 auto;\n\n    display: grid;\n\n    grid-template-columns:\n        minmax(440px,1fr)\n        minmax(440px,.95fr);\n\n    align-items: center;\n\n    gap:\n        clamp(50px,7vw,105px);\n}\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n#dx-about-hero-en .dx-about-hero-content {\n    max-width: 700px;\n\n    justify-self: start;\n\n    text-align: left;\n}\n\n#dx-about-hero-en .dx-about-hero-eyebrow {\n    display: inline-flex;\n\n    align-items: center;\n\n    gap: 10px;\n\n    margin-bottom: 14px;\n\n    color: var(--dx-yellow);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.7;\n}\n\n#dx-about-hero-en .dx-about-hero-eyebrow::before {\n    content: \"\";\n\n    width: 34px;\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-about-hero-en .dx-about-hero-title {\n    margin: 0;\n\n    color: var(--dx-white);\n\n    font-size:\n        clamp(\n            40px,\n            4.8vw,\n            68px\n        );\n\n    font-weight: 900;\n    line-height: 1.15;\n\n    letter-spacing: -1.6px;\n}\n\n#dx-about-hero-en .dx-about-hero-title span {\n    color: var(--dx-yellow);\n}\n\n#dx-about-hero-en .dx-about-hero-description {\n    max-width: 650px;\n\n    margin: 20px 0 0;\n\n    color: var(--dx-text);\n\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.8;\n}\n\n#dx-about-hero-en .dx-about-hero-actions {\n    margin-top: 30px;\n\n    display: flex;\n\n    align-items: center;\n\n    flex-wrap: wrap;\n\n    gap: 12px;\n}\n\n#dx-about-hero-en .dx-about-hero-button {\n    min-height: 54px;\n\n    display: inline-flex;\n\n    align-items: center;\n    justify-content: center;\n\n    gap: 9px;\n\n    padding: 0 24px;\n\n    border-radius: 12px;\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1;\n\n    transition:\n        transform .25s ease,\n        background .25s ease,\n        box-shadow .25s ease,\n        border-color .25s ease;\n}\n\n#dx-about-hero-en .dx-about-hero-button-primary {\n    min-width: 190px;\n\n    border:\n        1px solid rgba(255,255,255,.14);\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 rgba(105,66,216,.30);\n}\n\n#dx-about-hero-en .dx-about-hero-button-secondary {\n    min-width: 170px;\n\n    border:\n        1px solid rgba(255,255,255,.22);\n\n    background:\n        rgba(255,255,255,.055);\n}\n\n#dx-about-hero-en .dx-about-hero-button:hover,\n#dx-about-hero-en .dx-about-hero-button:focus-visible {\n    transform: translateY(-3px);\n}\n\n#dx-about-hero-en .dx-about-hero-button-primary:hover {\n    box-shadow:\n        0 19px 40px rgba(105,66,216,.40);\n}\n\n#dx-about-hero-en .dx-about-hero-button-secondary:hover {\n    border-color:\n        rgba(145,104,239,.65);\n\n    background:\n        rgba(105,66,216,.14);\n}\n\n#dx-about-hero-en .dx-about-hero-button svg {\n    width: 18px;\n    height: 18px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.9;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   VISUAL\n========================================================= *\/\n\n#dx-about-hero-en .dx-about-hero-visual {\n    position: relative;\n\n    width: 100%;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: center;\n}\n\n#dx-about-hero-en .dx-about-hero-image-wrap {\n    position: relative;\n    isolation: isolate;\n\n    width: min(100%,650px);\n\n    padding: 14px;\n}\n\n#dx-about-hero-en .dx-about-hero-image-wrap::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    inset: 7%;\n\n    border-radius: 30px;\n\n    background:\n        linear-gradient(\n            135deg,\n            rgba(145,104,239,.33),\n            rgba(255,196,65,.08)\n        );\n\n    transform:\n        rotate(-3deg);\n}\n\n#dx-about-hero-en .dx-about-hero-image-wrap::after {\n    content: \"\";\n\n    position: absolute;\n    z-index: -3;\n\n    left: 12%;\n    right: 12%;\n    bottom: -6%;\n\n    height: 30%;\n\n    border-radius: 50%;\n\n    background:\n        rgba(105,66,216,.30);\n\n    filter: blur(45px);\n}\n\n#dx-about-hero-en .dx-about-hero-image {\n    position: relative;\n    z-index: 2;\n\n    display: block;\n\n    width: 100%;\n\n    aspect-ratio: 1.48 \/ 1;\n\n    object-fit: cover;\n    object-position: center;\n\n    border:\n        1px solid rgba(255,255,255,.14);\n\n    border-radius: 25px;\n\n    box-shadow:\n        0 30px 65px rgba(0,0,0,.28);\n\n    animation:\n        dxAboutHeroFloatEn\n        5.5s\n        ease-in-out\n        infinite;\n}\n\n#dx-about-hero-en .dx-about-hero-image-accent {\n    position: absolute;\n    z-index: 5;\n\n    top: -3px;\n    left: -3px;\n\n    width: 72px;\n    height: 72px;\n\n    border:\n        12px solid var(--dx-yellow);\n\n    border-right-color:\n        transparent;\n\n    border-bottom-color:\n        transparent;\n\n    border-radius: 50%;\n\n    transform: rotate(-12deg);\n\n    filter:\n        drop-shadow(\n            0 8px 18px rgba(255,196,65,.25)\n        );\n\n    pointer-events: none;\n}\n\n\/* =========================================================\n   STATS\n========================================================= *\/\n\n#dx-about-hero-en .dx-about-hero-stats {\n    width: min(1120px,calc(100% - 60px));\n\n    margin:\n        -58px\n        auto\n        0;\n\n    position: relative;\n    z-index: 10;\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(3,minmax(0,1fr));\n\n    padding:\n        22px\n        30px;\n\n    border:\n        1px solid rgba(105,66,216,.10);\n\n    border-radius: 20px;\n\n    background:\n        rgba(255,255,255,.99);\n\n    box-shadow:\n        0 24px 55px rgba(15,3,42,.16);\n}\n\n#dx-about-hero-en .dx-about-hero-stat {\n    position: relative;\n\n    min-height: 95px;\n\n    display: flex;\n\n    flex-direction: column;\n\n    align-items: center;\n\n    justify-content: center;\n\n    padding: 10px 20px;\n\n    text-align: center;\n}\n\n#dx-about-hero-en .dx-about-hero-stat:not(:last-child)::after {\n    content: \"\";\n\n    position: absolute;\n\n    top: 12%;\n    right: 0;\n\n    width: 1px;\n    height: 76%;\n\n    background:\n        linear-gradient(\n            to bottom,\n            transparent,\n            rgba(105,66,216,.20),\n            transparent\n        );\n}\n\n#dx-about-hero-en .dx-about-hero-stat-number {\n    color: #180d31;\n\n    font-size:\n        clamp(\n            29px,\n            2.5vw,\n            38px\n        );\n\n    font-weight: 900;\n    line-height: 1.1;\n}\n\n#dx-about-hero-en .dx-about-hero-stat-label {\n    margin-top: 7px;\n\n    color: #706979;\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.6;\n}\n\n@keyframes dxAboutHeroFloatEn {\n    0%,\n    100% {\n        transform:\n            translateY(0);\n    }\n\n    50% {\n        transform:\n            translateY(-10px);\n    }\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 950px) {\n\n    #dx-about-hero-en .dx-about-hero-main {\n        padding-top: 65px;\n    }\n\n    #dx-about-hero-en .dx-about-hero-container {\n        grid-template-columns: 1fr;\n\n        gap: 44px;\n    }\n\n    #dx-about-hero-en .dx-about-hero-content {\n        max-width: 740px;\n\n        margin: 0 auto;\n\n        text-align: center;\n    }\n\n    #dx-about-hero-en .dx-about-hero-eyebrow {\n        justify-content: center;\n    }\n\n    #dx-about-hero-en .dx-about-hero-description {\n        margin-right: auto;\n        margin-left: auto;\n    }\n\n    #dx-about-hero-en .dx-about-hero-actions {\n        justify-content: center;\n    }\n\n    #dx-about-hero-en .dx-about-hero-image-wrap {\n        width: min(100%,680px);\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 600px) {\n\n    #dx-about-hero-en .dx-about-hero-main {\n        padding:\n            48px\n            20px\n            95px;\n    }\n\n    #dx-about-hero-en .dx-about-hero-title {\n        font-size:\n            clamp(\n                32px,\n                9vw,\n                43px\n            );\n\n        line-height: 1.2;\n    }\n\n    #dx-about-hero-en .dx-about-hero-description {\n        margin-top: 15px;\n\n        font-size: 15px;\n        line-height: 1.75;\n    }\n\n    #dx-about-hero-en .dx-about-hero-actions {\n        display: grid;\n\n        grid-template-columns: 1fr;\n\n        margin-top: 24px;\n    }\n\n    #dx-about-hero-en .dx-about-hero-button {\n        width: 100%;\n        min-width: 0;\n    }\n\n    #dx-about-hero-en .dx-about-hero-image-wrap {\n        padding: 7px;\n    }\n\n    #dx-about-hero-en .dx-about-hero-image {\n        aspect-ratio: 1.22 \/ 1;\n\n        border-radius: 19px;\n    }\n\n    #dx-about-hero-en .dx-about-hero-image-accent {\n        width: 52px;\n        height: 52px;\n\n        border-width: 9px;\n    }\n\n    #dx-about-hero-en .dx-about-hero-stats {\n        width: calc(100% - 28px);\n\n        margin-top: -54px;\n\n        grid-template-columns:\n            repeat(3,minmax(0,1fr));\n\n        padding:\n            12px\n            5px;\n\n        border-radius: 17px;\n    }\n\n    #dx-about-hero-en .dx-about-hero-stat {\n        min-height: 92px;\n\n        padding:\n            8px\n            5px;\n    }\n\n    #dx-about-hero-en .dx-about-hero-stat-number {\n        font-size: 25px;\n    }\n\n    #dx-about-hero-en .dx-about-hero-stat-label {\n        font-size: 12px;\n        line-height: 1.45;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-about-hero-en a:focus-visible {\n    outline:\n        2px solid var(--dx-yellow);\n\n    outline-offset: 5px;\n}\n\n@media (prefers-reduced-motion:reduce) {\n\n    #dx-about-hero-en *,\n    #dx-about-hero-en *::before,\n    #dx-about-hero-en *::after {\n        animation-duration: .01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: .01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-about-hero-en\"\n    aria-labelledby=\"dx-about-hero-title-en\"\n    dir=\"ltr\"\n>\n\n    <div\n        class=\"dx-about-hero-bg\"\n        aria-hidden=\"true\"\n    >\n\n        <span class=\"dx-about-hero-orbit dx-about-hero-orbit-one\"><\/span>\n\n        <span class=\"dx-about-hero-orbit dx-about-hero-orbit-two\"><\/span>\n\n        <span class=\"dx-about-hero-dots\"><\/span>\n\n    <\/div>\n\n    <div class=\"dx-about-hero-main\">\n\n        <div class=\"dx-about-hero-container\">\n\n            <div class=\"dx-about-hero-content\">\n\n                <span class=\"dx-about-hero-eyebrow\">\n                    About D-INDEX\n                <\/span>\n\n                <h1\n                    id=\"dx-about-hero-title-en\"\n                    class=\"dx-about-hero-title\"\n                >\n                    Your Partner for\n                    <span>Digital Solutions<\/span>\n                    That Move Business Forward\n                <\/h1>\n\n                <p class=\"dx-about-hero-description\">\n                    We design and develop digital solutions that help\n                    businesses turn ideas and operational needs into\n                    practical websites, mobile applications, and digital\n                    systems built around real business goals.\n                <\/p>\n\n                <div class=\"dx-about-hero-actions\">\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/contact\/\"\n                        class=\"dx-about-hero-button dx-about-hero-button-primary\"\n                    >\n                        <span>\n                            Start Your Project\n                        <\/span>\n\n                        <svg\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n                    <\/a>\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/services\/\"\n                        class=\"dx-about-hero-button dx-about-hero-button-secondary\"\n                    >\n                        <span>\n                            Explore Our Services\n                        <\/span>\n\n                        <svg\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n                    <\/a>\n\n                <\/div>\n\n            <\/div>\n\n            <div class=\"dx-about-hero-visual\">\n\n                <div class=\"dx-about-hero-image-wrap\">\n\n                    <span\n                        class=\"dx-about-hero-image-accent\"\n                        aria-hidden=\"true\"\n                    ><\/span>\n\n                    <img fetchpriority=\"high\"\n                        src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/php-programming-html-coding-cyberspace-concept.jpg\"\n                        class=\"dx-about-hero-image\"\n                        alt=\"D-INDEX digital design and software development solutions\"\n                        width=\"400\"\n                        height=\"259\"\n                        fetchpriority=\"high\"\n                        decoding=\"async\"\n                    >\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n    <div\n        class=\"dx-about-hero-stats\"\n        aria-label=\"D-INDEX statistics\"\n    >\n\n        <div class=\"dx-about-hero-stat\">\n\n            <strong class=\"dx-about-hero-stat-number\">\n                45+\n            <\/strong>\n\n            <span class=\"dx-about-hero-stat-label\">\n                Projects Delivered\n            <\/span>\n\n        <\/div>\n\n        <div class=\"dx-about-hero-stat\">\n\n            <strong class=\"dx-about-hero-stat-number\">\n                141\n            <\/strong>\n\n            <span class=\"dx-about-hero-stat-label\">\n                Clients Worldwide\n            <\/span>\n\n        <\/div>\n\n        <div class=\"dx-about-hero-stat\">\n\n            <strong class=\"dx-about-hero-stat-number\">\n                12+\n            <\/strong>\n\n            <span class=\"dx-about-hero-stat-label\">\n                Specialized Team Members\n            <\/span>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxAboutHeroEn() {\n\n        const section =\n            document.getElementById(\n                \"dx-about-hero-en\"\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-about-hero-en-widget\"\n            );\n        }\n    }\n\n    if (\n        document.readyState === \"loading\"\n    ) {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxAboutHeroEn\n        );\n\n    } else {\n\n        initDxAboutHeroEn();\n\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b2c7806 e-flex e-con-boxed e-con e-parent\" data-id=\"b2c7806\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4a7e9b4 elementor-widget elementor-widget-html\" data-id=\"4a7e9b4\" 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 ABOUT MISSION SECTION\n     Author: Mohamed El-Sehemy\n     English LTR Version\n     Elementor Compatible\n========================================================== -->\n\n<style>\n.elementor-widget-html:has(#dx-about-mission-en),\n.elementor-widget-html:has(#dx-about-mission-en) > .elementor-widget-container,\n.dx-about-mission-en-widget,\n.dx-about-mission-en-widget > .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-about-mission-en,\n#dx-about-mission-en *,\n#dx-about-mission-en *::before,\n#dx-about-mission-en *::after {\n    box-sizing: border-box;\n}\n\n#dx-about-mission-en {\n    --dx-purple: #6942d8;\n    --dx-purple-light: #9168ef;\n    --dx-yellow: #ffc441;\n    --dx-dark: #160a31;\n    --dx-text: #625c70;\n    --dx-muted: #817b8c;\n    --dx-bg: #f8f7fc;\n    --dx-white: #ffffff;\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    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n\n    background:\n        radial-gradient(\n            circle at 90% 20%,\n            rgba(105,66,216,.06),\n            transparent 25%\n        ),\n        radial-gradient(\n            circle at 8% 86%,\n            rgba(145,104,239,.055),\n            transparent 27%\n        ),\n        var(--dx-bg);\n}\n\n\/* =========================================================\n   DECORATIONS\n========================================================= *\/\n\n#dx-about-mission-en .dx-about-mission-orbit {\n    position: absolute;\n    z-index: -3;\n\n    border:\n        1px solid rgba(105,66,216,.10);\n\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-about-mission-en .dx-about-mission-orbit-one {\n    top: -180px;\n    right: -160px;\n\n    width: 370px;\n    height: 370px;\n}\n\n#dx-about-mission-en .dx-about-mission-dots {\n    position: absolute;\n    z-index: -2;\n\n    left: 4%;\n    bottom: 45px;\n\n    width: 110px;\n    height: 110px;\n\n    opacity: .20;\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\/* =========================================================\n   MAIN\n========================================================= *\/\n\n#dx-about-mission-en .dx-about-mission-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        105px\n        clamp(24px,5vw,90px)\n        95px;\n}\n\n#dx-about-mission-en .dx-about-mission-container {\n    width: min(1420px,100%);\n\n    margin: 0 auto;\n\n    display: grid;\n\n    grid-template-columns:\n        minmax(430px,.95fr)\n        minmax(460px,1.05fr);\n\n    align-items: center;\n\n    gap:\n        clamp(55px,7vw,105px);\n}\n\n\/* =========================================================\n   IMAGE\n========================================================= *\/\n\n#dx-about-mission-en .dx-about-mission-visual {\n    position: relative;\n\n    width: 100%;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n}\n\n#dx-about-mission-en .dx-about-mission-image-wrap {\n    position: relative;\n    isolation: isolate;\n\n    width: min(100%,650px);\n\n    padding: 12px;\n}\n\n#dx-about-mission-en .dx-about-mission-image-wrap::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    inset: 5%;\n\n    border-radius: 28px;\n\n    background:\n        linear-gradient(\n            135deg,\n            rgba(105,66,216,.15),\n            rgba(255,196,65,.08)\n        );\n\n    transform:\n        rotate(3deg)\n        translate(8px,8px);\n}\n\n#dx-about-mission-en .dx-about-mission-image-wrap::after {\n    content: \"\";\n\n    position: absolute;\n    z-index: -3;\n\n    left: 12%;\n    right: 12%;\n    bottom: -8%;\n\n    height: 28%;\n\n    border-radius: 50%;\n\n    background:\n        rgba(105,66,216,.17);\n\n    filter: blur(38px);\n}\n\n#dx-about-mission-en .dx-about-mission-image {\n    position: relative;\n    z-index: 2;\n\n    display: block;\n\n    width: 100%;\n\n    aspect-ratio: 1.53 \/ 1;\n\n    object-fit: cover;\n    object-position: center;\n\n    border:\n        1px solid rgba(105,66,216,.11);\n\n    border-radius: 24px;\n\n    box-shadow:\n        0 28px 60px rgba(35,17,73,.14);\n\n    transition:\n        transform .45s ease,\n        box-shadow .45s ease;\n}\n\n#dx-about-mission-en .dx-about-mission-image-wrap:hover\n.dx-about-mission-image {\n    transform:\n        translateY(-5px)\n        scale(1.01);\n\n    box-shadow:\n        0 35px 70px rgba(35,17,73,.20);\n}\n\n#dx-about-mission-en .dx-about-mission-accent {\n    position: absolute;\n    z-index: 5;\n\n    top: -4px;\n    right: -3px;\n\n    width: 66px;\n    height: 66px;\n\n    border:\n        11px solid var(--dx-yellow);\n\n    border-left-color: transparent;\n    border-bottom-color: transparent;\n\n    border-radius: 50%;\n\n    transform: rotate(15deg);\n\n    filter:\n        drop-shadow(\n            0 8px 15px rgba(255,196,65,.24)\n        );\n\n    pointer-events: none;\n}\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n#dx-about-mission-en .dx-about-mission-content {\n    max-width: 680px;\n\n    justify-self: start;\n\n    text-align: left;\n}\n\n#dx-about-mission-en .dx-about-mission-eyebrow {\n    display: inline-flex;\n\n    align-items: center;\n\n    gap: 10px;\n\n    margin-bottom: 13px;\n\n    color: var(--dx-purple);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.7;\n}\n\n#dx-about-mission-en .dx-about-mission-eyebrow::before {\n    content: \"\";\n\n    width: 35px;\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-about-mission-en .dx-about-mission-title {\n    margin: 0;\n\n    color: var(--dx-dark);\n\n    font-size:\n        clamp(\n            35px,\n            3.7vw,\n            55px\n        );\n\n    font-weight: 900;\n    line-height: 1.23;\n\n    letter-spacing: -1px;\n}\n\n#dx-about-mission-en .dx-about-mission-title span {\n    color: var(--dx-purple);\n}\n\n#dx-about-mission-en .dx-about-mission-description {\n    max-width: 650px;\n\n    margin: 20px 0 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   PRINCIPLES\n========================================================= *\/\n\n#dx-about-mission-en .dx-about-mission-points {\n    margin-top: 30px;\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(3,minmax(0,1fr));\n\n    gap: 18px;\n}\n\n#dx-about-mission-en .dx-about-mission-point {\n    min-width: 0;\n\n    display: flex;\n\n    flex-direction: column;\n\n    align-items: flex-start;\n\n    text-align: left;\n}\n\n#dx-about-mission-en .dx-about-mission-point-icon {\n    width: 48px;\n    height: 48px;\n\n    display: inline-flex;\n\n    align-items: center;\n    justify-content: center;\n\n    margin-bottom: 11px;\n\n    border:\n        1px solid rgba(105,66,216,.13);\n\n    border-radius: 14px;\n\n    color: var(--dx-purple);\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(105,66,216,.09),\n            rgba(145,104,239,.035)\n        );\n\n    box-shadow:\n        0 10px 24px rgba(105,66,216,.08);\n\n    transition:\n        color .25s ease,\n        background .25s ease,\n        transform .25s ease;\n}\n\n#dx-about-mission-en .dx-about-mission-point:hover\n.dx-about-mission-point-icon {\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    transform: translateY(-4px);\n}\n\n#dx-about-mission-en .dx-about-mission-point-icon svg {\n    width: 24px;\n    height: 24px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-about-mission-en .dx-about-mission-point-title {\n    color: var(--dx-dark);\n\n    font-size: 15px;\n    font-weight: 800;\n    line-height: 1.6;\n}\n\n#dx-about-mission-en .dx-about-mission-point-text {\n    margin-top: 4px;\n\n    color: var(--dx-muted);\n\n    font-size: 13px;\n    font-weight: 400;\n    line-height: 1.65;\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width:950px) {\n\n    #dx-about-mission-en .dx-about-mission-main {\n        padding:\n            90px\n            28px\n            80px;\n    }\n\n    #dx-about-mission-en .dx-about-mission-container {\n        grid-template-columns: 1fr;\n\n        gap: 52px;\n    }\n\n    #dx-about-mission-en .dx-about-mission-content {\n        max-width: 740px;\n\n        margin: 0 auto;\n\n        text-align: center;\n    }\n\n    #dx-about-mission-en .dx-about-mission-eyebrow {\n        justify-content: center;\n    }\n\n    #dx-about-mission-en .dx-about-mission-description {\n        margin-right: auto;\n        margin-left: auto;\n    }\n\n    #dx-about-mission-en .dx-about-mission-points {\n        max-width: 680px;\n\n        margin-right: auto;\n        margin-left: auto;\n    }\n\n    #dx-about-mission-en .dx-about-mission-point {\n        align-items: center;\n\n        text-align: center;\n    }\n\n    #dx-about-mission-en .dx-about-mission-visual {\n        grid-row: 2;\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width:600px) {\n\n    #dx-about-mission-en .dx-about-mission-main {\n        padding:\n            72px\n            20px\n            66px;\n    }\n\n    #dx-about-mission-en .dx-about-mission-container {\n        gap: 40px;\n    }\n\n    #dx-about-mission-en .dx-about-mission-eyebrow {\n        font-size: 13px;\n    }\n\n    #dx-about-mission-en .dx-about-mission-title {\n        font-size:\n            clamp(\n                29px,\n                8.7vw,\n                40px\n            );\n\n        line-height: 1.27;\n    }\n\n    #dx-about-mission-en .dx-about-mission-description {\n        margin-top: 15px;\n\n        font-size: 15px;\n        line-height: 1.75;\n    }\n\n    #dx-about-mission-en .dx-about-mission-points {\n        margin-top: 26px;\n\n        grid-template-columns: 1fr;\n\n        gap: 17px;\n    }\n\n    #dx-about-mission-en .dx-about-mission-point {\n        display: grid;\n\n        grid-template-columns:\n            52px minmax(0,1fr);\n\n        grid-template-areas:\n            \"icon title\"\n            \"icon text\";\n\n        align-items: start;\n\n        gap:\n            2px\n            13px;\n\n        text-align: left;\n    }\n\n    #dx-about-mission-en .dx-about-mission-point-icon {\n        grid-area: icon;\n\n        width: 48px;\n        height: 48px;\n\n        margin: 0;\n    }\n\n    #dx-about-mission-en .dx-about-mission-point-title {\n        grid-area: title;\n\n        font-size: 14px;\n    }\n\n    #dx-about-mission-en .dx-about-mission-point-text {\n        grid-area: text;\n\n        font-size: 13px;\n    }\n\n    #dx-about-mission-en .dx-about-mission-image-wrap {\n        padding: 7px;\n    }\n\n    #dx-about-mission-en .dx-about-mission-image {\n        aspect-ratio: 1.18 \/ 1;\n\n        border-radius: 19px;\n    }\n\n    #dx-about-mission-en .dx-about-mission-accent {\n        width: 50px;\n        height: 50px;\n\n        border-width: 8px;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n@media (prefers-reduced-motion:reduce) {\n\n    #dx-about-mission-en *,\n    #dx-about-mission-en *::before,\n    #dx-about-mission-en *::after {\n        animation-duration: .01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: .01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-about-mission-en\"\n    aria-labelledby=\"dx-about-mission-title-en\"\n    dir=\"ltr\"\n>\n\n    <span\n        class=\"dx-about-mission-orbit dx-about-mission-orbit-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-about-mission-dots\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-about-mission-main\">\n\n        <div class=\"dx-about-mission-container\">\n\n            <!-- IMAGE -->\n\n            <div class=\"dx-about-mission-visual\">\n\n                <div class=\"dx-about-mission-image-wrap\">\n\n                    <span\n                        class=\"dx-about-mission-accent\"\n                        aria-hidden=\"true\"\n                    ><\/span>\n\n                    <img loading=\"lazy\"\n                        src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/03\/image-1.png\"\n                        class=\"dx-about-mission-image\"\n                        alt=\"D-INDEX mission and digital solution development\"\n                        width=\"515\"\n                        height=\"336\"\n                        loading=\"lazy\"\n                        decoding=\"async\"\n                    >\n\n                <\/div>\n\n            <\/div>\n\n            <!-- CONTENT -->\n\n            <div class=\"dx-about-mission-content\">\n\n                <span class=\"dx-about-mission-eyebrow\">\n                    Our Mission\n                <\/span>\n\n                <h2\n                    id=\"dx-about-mission-title-en\"\n                    class=\"dx-about-mission-title\"\n                >\n                    Turning Ideas into\n                    <span>Practical Digital Solutions<\/span>\n                <\/h2>\n\n                <p class=\"dx-about-mission-description\">\n                    We believe successful digital projects begin with\n                    understanding the goal before choosing the technology.\n                    Our mission is to work closely with clients to transform\n                    ideas and business needs into practical digital solutions\n                    that combine thoughtful strategy, suitable technology,\n                    and a clear user experience.\n                <\/p>\n\n                <div class=\"dx-about-mission-points\">\n\n                    <article class=\"dx-about-mission-point\">\n\n                        <span\n                            class=\"dx-about-mission-point-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                        <strong class=\"dx-about-mission-point-title\">\n                            Inspire\n                        <\/strong>\n\n                        <span class=\"dx-about-mission-point-text\">\n                            Understand the idea and help shape it.\n                        <\/span>\n\n                    <\/article>\n\n                    <article class=\"dx-about-mission-point\">\n\n                        <span\n                            class=\"dx-about-mission-point-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                                <circle cx=\"12\" cy=\"12\" r=\"4\"><\/circle>\n                            <\/svg>\n                        <\/span>\n\n                        <strong class=\"dx-about-mission-point-title\">\n                            Innovate\n                        <\/strong>\n\n                        <span class=\"dx-about-mission-point-text\">\n                            Choose technology that fits the project.\n                        <\/span>\n\n                    <\/article>\n\n                    <article class=\"dx-about-mission-point\">\n\n                        <span\n                            class=\"dx-about-mission-point-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <circle cx=\"8\" cy=\"8\" r=\"3\"><\/circle>\n                                <circle cx=\"17\" cy=\"9\" r=\"2.5\"><\/circle>\n                                <path d=\"M2 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                        <strong class=\"dx-about-mission-point-title\">\n                            Collaborate\n                        <\/strong>\n\n                        <span class=\"dx-about-mission-point-text\">\n                            Work with clients throughout the journey.\n                        <\/span>\n\n                    <\/article>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxAboutMissionEn() {\n\n        const section =\n            document.getElementById(\n                \"dx-about-mission-en\"\n            );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized = \"true\";\n\n        const widget =\n            section.closest(\n                \".elementor-widget-html\"\n            );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-about-mission-en-widget\"\n            );\n        }\n    }\n\n    if (document.readyState === \"loading\") {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxAboutMissionEn\n        );\n\n    } else {\n\n        initDxAboutMissionEn();\n\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-88fd8f9 e-flex e-con-boxed e-con e-parent\" data-id=\"88fd8f9\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6efa5f7 elementor-widget elementor-widget-html\" data-id=\"6efa5f7\" 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 ABOUT VISION SECTION\n     Author: Mohamed El-Sehemy\n     English LTR Version\n     Elementor Compatible\n========================================================== -->\n\n<style>\n.elementor-widget-html:has(#dx-about-vision-en),\n.elementor-widget-html:has(#dx-about-vision-en) > .elementor-widget-container,\n.dx-about-vision-en-widget,\n.dx-about-vision-en-widget > .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-about-vision-en,\n#dx-about-vision-en *,\n#dx-about-vision-en *::before,\n#dx-about-vision-en *::after {\n    box-sizing: border-box;\n}\n\n#dx-about-vision-en {\n    --dx-dark: #08001f;\n    --dx-dark-2: #16053b;\n    --dx-purple: #6942d8;\n    --dx-purple-light: #9168ef;\n    --dx-yellow: #ffc441;\n    --dx-white: #ffffff;\n    --dx-text: rgba(255,255,255,.76);\n    --dx-muted: rgba(255,255,255,.58);\n    --dx-border: rgba(255,255,255,.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    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 88% 22%,\n            rgba(105,66,216,.28),\n            transparent 29%\n        ),\n        radial-gradient(\n            circle at 10% 84%,\n            rgba(145,104,239,.16),\n            transparent 30%\n        ),\n        linear-gradient(\n            215deg,\n            var(--dx-dark-2),\n            var(--dx-dark)\n        );\n}\n\n\/* =========================================================\n   BACKGROUND\n========================================================= *\/\n\n#dx-about-vision-en .dx-about-vision-grid-bg {\n    position: absolute;\n    z-index: -5;\n\n    inset: 0;\n\n    opacity: .10;\n\n    background-image:\n        linear-gradient(\n            rgba(255,255,255,.04) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(255,255,255,.04) 1px,\n            transparent 1px\n        );\n\n    background-size: 70px 70px;\n\n    pointer-events: none;\n}\n\n#dx-about-vision-en .dx-about-vision-orbit {\n    position: absolute;\n    z-index: -3;\n\n    border:\n        1px solid rgba(145,104,239,.17);\n\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-about-vision-en .dx-about-vision-orbit-one {\n    top: -220px;\n    left: -170px;\n\n    width: 440px;\n    height: 440px;\n}\n\n#dx-about-vision-en .dx-about-vision-orbit-two {\n    right: -180px;\n    bottom: -220px;\n\n    width: 420px;\n    height: 420px;\n}\n\n#dx-about-vision-en .dx-about-vision-dots {\n    position: absolute;\n    z-index: -2;\n\n    top: 72px;\n    right: 5%;\n\n    width: 110px;\n    height: 110px;\n\n    opacity: .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\/* =========================================================\n   MAIN\n========================================================= *\/\n\n#dx-about-vision-en .dx-about-vision-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        100px\n        clamp(24px,5vw,90px)\n        100px;\n}\n\n#dx-about-vision-en .dx-about-vision-container {\n    width: min(1450px,100%);\n\n    margin: 0 auto;\n\n    display: grid;\n\n    grid-template-columns:\n        minmax(470px,1.05fr)\n        minmax(420px,.95fr);\n\n    align-items: center;\n\n    gap:\n        clamp(55px,7vw,105px);\n}\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n#dx-about-vision-en .dx-about-vision-content {\n    max-width: 700px;\n\n    justify-self: start;\n\n    text-align: left;\n}\n\n#dx-about-vision-en .dx-about-vision-eyebrow {\n    display: inline-flex;\n\n    align-items: center;\n\n    gap: 10px;\n\n    margin-bottom: 13px;\n\n    color: var(--dx-yellow);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.7;\n}\n\n#dx-about-vision-en .dx-about-vision-eyebrow::before {\n    content: \"\";\n\n    width: 35px;\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-about-vision-en .dx-about-vision-title {\n    margin: 0;\n\n    color: var(--dx-white);\n\n    font-size:\n        clamp(\n            36px,\n            3.9vw,\n            57px\n        );\n\n    font-weight: 900;\n    line-height: 1.2;\n\n    letter-spacing: -1px;\n}\n\n#dx-about-vision-en .dx-about-vision-title span {\n    color: var(--dx-yellow);\n}\n\n#dx-about-vision-en .dx-about-vision-description {\n    max-width: 660px;\n\n    margin: 20px 0 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   PRINCIPLES\n========================================================= *\/\n\n#dx-about-vision-en .dx-about-vision-principles {\n    margin-top: 32px;\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(3,minmax(0,1fr));\n\n    gap: 14px;\n}\n\n#dx-about-vision-en .dx-about-vision-principle {\n    min-width: 0;\n\n    padding:\n        17px\n        15px;\n\n    border:\n        1px solid rgba(255,255,255,.10);\n\n    border-radius: 15px;\n\n    background:\n        rgba(255,255,255,.045);\n\n    -webkit-backdrop-filter: blur(10px);\n    backdrop-filter: blur(10px);\n\n    transition:\n        transform .25s ease,\n        border-color .25s ease,\n        background .25s ease;\n}\n\n#dx-about-vision-en .dx-about-vision-principle:hover {\n    border-color:\n        rgba(145,104,239,.42);\n\n    background:\n        rgba(105,66,216,.13);\n\n    transform:\n        translateY(-4px);\n}\n\n#dx-about-vision-en .dx-about-vision-principle-icon {\n    width: 42px;\n    height: 42px;\n\n    display: inline-flex;\n\n    align-items: center;\n    justify-content: center;\n\n    margin-bottom: 10px;\n\n    border-radius: 12px;\n\n    color: var(--dx-yellow);\n\n    background:\n        rgba(255,196,65,.09);\n}\n\n#dx-about-vision-en .dx-about-vision-principle-icon svg {\n    width: 21px;\n    height: 21px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-about-vision-en .dx-about-vision-principle-title {\n    display: block;\n\n    color: var(--dx-white);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.6;\n}\n\n#dx-about-vision-en .dx-about-vision-principle-text {\n    display: block;\n\n    margin-top: 4px;\n\n    color: var(--dx-muted);\n\n    font-size: 13px;\n    font-weight: 400;\n    line-height: 1.7;\n}\n\n\/* =========================================================\n   VISUAL\n========================================================= *\/\n\n#dx-about-vision-en .dx-about-vision-visual {\n    position: relative;\n\n    width: 100%;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n}\n\n#dx-about-vision-en .dx-about-vision-frame {\n    position: relative;\n    isolation: isolate;\n\n    width: min(100%,650px);\n\n    padding: 14px;\n}\n\n#dx-about-vision-en .dx-about-vision-frame::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    inset: 6%;\n\n    border-radius: 30px;\n\n    background:\n        linear-gradient(\n            135deg,\n            rgba(145,104,239,.34),\n            rgba(255,196,65,.09)\n        );\n\n    transform:\n        rotate(-3deg);\n}\n\n#dx-about-vision-en .dx-about-vision-frame::after {\n    content: \"\";\n\n    position: absolute;\n    z-index: -3;\n\n    left: 10%;\n    right: 10%;\n    bottom: -9%;\n\n    height: 30%;\n\n    border-radius: 50%;\n\n    background:\n        rgba(105,66,216,.32);\n\n    filter: blur(42px);\n}\n\n#dx-about-vision-en .dx-about-vision-image {\n    position: relative;\n    z-index: 2;\n\n    display: block;\n\n    width: 100%;\n\n    aspect-ratio: 1.54 \/ 1;\n\n    object-fit: cover;\n    object-position: center;\n\n    border:\n        1px solid rgba(255,255,255,.14);\n\n    border-radius: 25px;\n\n    box-shadow:\n        0 30px 65px rgba(0,0,0,.28);\n\n    transition:\n        transform .45s ease,\n        box-shadow .45s ease;\n}\n\n#dx-about-vision-en .dx-about-vision-frame:hover\n.dx-about-vision-image {\n    transform:\n        translateY(-6px)\n        scale(1.012);\n\n    box-shadow:\n        0 38px 75px rgba(0,0,0,.36);\n}\n\n\/* =========================================================\n   VISION MARK\n========================================================= *\/\n\n#dx-about-vision-en .dx-about-vision-mark {\n    position: absolute;\n    z-index: 5;\n\n    left: -2px;\n    bottom: 6%;\n\n    width: 92px;\n    height: 92px;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    border:\n        1px solid rgba(255,255,255,.17);\n\n    border-radius: 50%;\n\n    color: var(--dx-yellow);\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(105,66,216,.94),\n            rgba(71,33,156,.94)\n        );\n\n    box-shadow:\n        0 18px 38px rgba(0,0,0,.25);\n\n    -webkit-backdrop-filter: blur(12px);\n    backdrop-filter: blur(12px);\n}\n\n#dx-about-vision-en .dx-about-vision-mark svg {\n    width: 42px;\n    height: 42px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.6;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width:950px) {\n\n    #dx-about-vision-en .dx-about-vision-main {\n        padding:\n            82px\n            28px\n            82px;\n    }\n\n    #dx-about-vision-en .dx-about-vision-container {\n        grid-template-columns: 1fr;\n\n        gap: 50px;\n    }\n\n    #dx-about-vision-en .dx-about-vision-content {\n        max-width: 760px;\n\n        margin: 0 auto;\n\n        text-align: center;\n    }\n\n    #dx-about-vision-en .dx-about-vision-eyebrow {\n        justify-content: center;\n    }\n\n    #dx-about-vision-en .dx-about-vision-description {\n        margin-right: auto;\n        margin-left: auto;\n    }\n\n    #dx-about-vision-en .dx-about-vision-principles {\n        max-width: 690px;\n\n        margin-right: auto;\n        margin-left: auto;\n    }\n\n    #dx-about-vision-en .dx-about-vision-visual {\n        grid-row: 2;\n    }\n\n    #dx-about-vision-en .dx-about-vision-frame {\n        width: min(100%,680px);\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width:600px) {\n\n    #dx-about-vision-en .dx-about-vision-main {\n        padding:\n            66px\n            20px\n            66px;\n    }\n\n    #dx-about-vision-en .dx-about-vision-container {\n        gap: 40px;\n    }\n\n    #dx-about-vision-en .dx-about-vision-eyebrow {\n        font-size: 14px;\n    }\n\n    #dx-about-vision-en .dx-about-vision-title {\n        font-size:\n            clamp(\n                29px,\n                8.8vw,\n                40px\n            );\n\n        line-height: 1.25;\n    }\n\n    #dx-about-vision-en .dx-about-vision-description {\n        margin-top: 15px;\n\n        font-size: 15px;\n        line-height: 1.75;\n    }\n\n    #dx-about-vision-en .dx-about-vision-principles {\n        margin-top: 25px;\n\n        grid-template-columns: 1fr;\n\n        gap: 11px;\n    }\n\n    #dx-about-vision-en .dx-about-vision-principle {\n        display: grid;\n\n        grid-template-columns:\n            45px minmax(0,1fr);\n\n        grid-template-areas:\n            \"icon title\"\n            \"icon text\";\n\n        align-items: start;\n\n        gap:\n            2px\n            12px;\n\n        padding: 15px;\n\n        text-align: left;\n    }\n\n    #dx-about-vision-en .dx-about-vision-principle-icon {\n        grid-area: icon;\n\n        width: 42px;\n        height: 42px;\n\n        margin: 0;\n    }\n\n    #dx-about-vision-en .dx-about-vision-principle-title {\n        grid-area: title;\n\n        font-size: 14px;\n    }\n\n    #dx-about-vision-en .dx-about-vision-principle-text {\n        grid-area: text;\n\n        font-size: 13px;\n    }\n\n    #dx-about-vision-en .dx-about-vision-frame {\n        padding: 7px;\n    }\n\n    #dx-about-vision-en .dx-about-vision-image {\n        aspect-ratio: 1.18 \/ 1;\n\n        border-radius: 19px;\n    }\n\n    #dx-about-vision-en .dx-about-vision-mark {\n        left: 0;\n\n        width: 68px;\n        height: 68px;\n    }\n\n    #dx-about-vision-en .dx-about-vision-mark svg {\n        width: 31px;\n        height: 31px;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n@media (prefers-reduced-motion:reduce) {\n\n    #dx-about-vision-en *,\n    #dx-about-vision-en *::before,\n    #dx-about-vision-en *::after {\n        animation-duration: .01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: .01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-about-vision-en\"\n    aria-labelledby=\"dx-about-vision-title-en\"\n    dir=\"ltr\"\n>\n\n    <div\n        class=\"dx-about-vision-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <span\n        class=\"dx-about-vision-orbit dx-about-vision-orbit-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-about-vision-orbit dx-about-vision-orbit-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-about-vision-dots\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-about-vision-main\">\n\n        <div class=\"dx-about-vision-container\">\n\n            <!-- CONTENT -->\n\n            <div class=\"dx-about-vision-content\">\n\n                <span class=\"dx-about-vision-eyebrow\">\n                    Our Vision\n                <\/span>\n\n                <h2\n                    id=\"dx-about-vision-title-en\"\n                    class=\"dx-about-vision-title\"\n                >\n                    Attention to Detail for\n                    <span>Better Digital Experiences<\/span>\n                <\/h2>\n\n                <p class=\"dx-about-vision-description\">\n                    At D-INDEX, we aim to be more than a company that\n                    delivers digital solutions. Our vision is to build\n                    genuine partnerships with clients, understand their\n                    ambitions, and help turn them into thoughtful digital\n                    products and experiences that support business growth.\n                <\/p>\n\n                <div class=\"dx-about-vision-principles\">\n\n                    <article class=\"dx-about-vision-principle\">\n\n                        <span\n                            class=\"dx-about-vision-principle-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M3 12s3.5-6 9-6 9 6 9 6-3.5 6-9 6-9-6-9-6z\"><\/path>\n                                <circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle>\n                            <\/svg>\n                        <\/span>\n\n                        <strong class=\"dx-about-vision-principle-title\">\n                            Clear Vision\n                        <\/strong>\n\n                        <span class=\"dx-about-vision-principle-text\">\n                            We understand the goal before choosing technology.\n                        <\/span>\n\n                    <\/article>\n\n                    <article class=\"dx-about-vision-principle\">\n\n                        <span\n                            class=\"dx-about-vision-principle-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <circle cx=\"12\" cy=\"12\" r=\"8\"><\/circle>\n                                <circle cx=\"12\" cy=\"12\" r=\"4\"><\/circle>\n                                <path d=\"M12 2v3\"><\/path>\n                                <path d=\"M12 19v3\"><\/path>\n                                <path d=\"M2 12h3\"><\/path>\n                                <path d=\"M19 12h3\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <strong class=\"dx-about-vision-principle-title\">\n                            Attention to Detail\n                        <\/strong>\n\n                        <span class=\"dx-about-vision-principle-text\">\n                            Every element is considered with purpose.\n                        <\/span>\n\n                    <\/article>\n\n                    <article class=\"dx-about-vision-principle\">\n\n                        <span\n                            class=\"dx-about-vision-principle-icon\"\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                        <strong class=\"dx-about-vision-principle-title\">\n                            Continuous Growth\n                        <\/strong>\n\n                        <span class=\"dx-about-vision-principle-text\">\n                            Solutions designed to evolve with your business.\n                        <\/span>\n\n                    <\/article>\n\n                <\/div>\n\n            <\/div>\n\n            <!-- VISUAL -->\n\n            <div class=\"dx-about-vision-visual\">\n\n                <div class=\"dx-about-vision-frame\">\n\n                    <span\n                        class=\"dx-about-vision-mark\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M3 12s3.5-6 9-6 9 6 9 6-3.5 6-9 6-9-6-9-6z\"><\/path>\n                            <circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle>\n                        <\/svg>\n                    <\/span>\n\n                    <img loading=\"lazy\"\n                        src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/03\/image-1-1.png\"\n                        class=\"dx-about-vision-image\"\n                        alt=\"D-INDEX vision for professional digital solutions and experiences\"\n                        width=\"514\"\n                        height=\"334\"\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 initDxAboutVisionEn() {\n\n        const section =\n            document.getElementById(\n                \"dx-about-vision-en\"\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-about-vision-en-widget\"\n            );\n        }\n    }\n\n    if (document.readyState === \"loading\") {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxAboutVisionEn\n        );\n\n    } else {\n\n        initDxAboutVisionEn();\n\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e3668ad e-flex e-con-boxed e-con e-parent\" data-id=\"e3668ad\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c53f74e elementor-widget elementor-widget-html\" data-id=\"c53f74e\" 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 ABOUT WHY CHOOSE US\n     Author: Mohamed El-Sehemy\n     English LTR Version\n     Elementor Compatible\n========================================================== -->\n\n<style>\n.elementor-widget-html:has(#dx-about-why-en),\n.elementor-widget-html:has(#dx-about-why-en) > .elementor-widget-container,\n.dx-about-why-en-widget,\n.dx-about-why-en-widget > .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-about-why-en,\n#dx-about-why-en *,\n#dx-about-why-en *::before,\n#dx-about-why-en *::after {\n    box-sizing: border-box;\n}\n\n#dx-about-why-en {\n    --dx-purple: #6942d8;\n    --dx-purple-light: #9168ef;\n    --dx-yellow: #ffc441;\n    --dx-dark: #160a31;\n    --dx-text: #625c70;\n    --dx-muted: #817b8c;\n    --dx-white: #ffffff;\n    --dx-bg: #f8f7fc;\n    --dx-border: rgba(105,66,216,.12);\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: hidden;\n\n    color: var(--dx-dark);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n\n    background:\n        radial-gradient(\n            circle at 90% 18%,\n            rgba(105,66,216,.065),\n            transparent 26%\n        ),\n        radial-gradient(\n            circle at 8% 86%,\n            rgba(145,104,239,.05),\n            transparent 27%\n        ),\n        var(--dx-bg);\n}\n\n\/* =========================================================\n   DECORATIONS\n========================================================= *\/\n\n#dx-about-why-en .dx-about-why-orbit {\n    position: absolute;\n    z-index: -3;\n\n    border:\n        1px solid rgba(105,66,216,.10);\n\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-about-why-en .dx-about-why-orbit-one {\n    top: -200px;\n    right: -170px;\n\n    width: 410px;\n    height: 410px;\n}\n\n#dx-about-why-en .dx-about-why-dots {\n    position: absolute;\n    z-index: -2;\n\n    left: 4%;\n    bottom: 48px;\n\n    width: 110px;\n    height: 110px;\n\n    opacity: .20;\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\/* =========================================================\n   MAIN\n========================================================= *\/\n\n#dx-about-why-en .dx-about-why-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        100px\n        clamp(24px,5vw,90px)\n        95px;\n}\n\n#dx-about-why-en .dx-about-why-container {\n    width: min(1420px,100%);\n\n    margin: 0 auto;\n\n    display: grid;\n\n    grid-template-columns:\n        minmax(410px,.85fr)\n        minmax(500px,1.15fr);\n\n    align-items: center;\n\n    gap:\n        clamp(55px,7vw,105px);\n}\n\n\/* =========================================================\n   VISUAL\n========================================================= *\/\n\n#dx-about-why-en .dx-about-why-visual {\n    position: relative;\n\n    width: 100%;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n#dx-about-why-en .dx-about-why-image-wrap {\n    position: relative;\n    isolation: isolate;\n\n    width: min(100%,470px);\n\n    padding: 12px;\n}\n\n#dx-about-why-en .dx-about-why-image-wrap::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    inset: 5%;\n\n    border-radius: 30px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(105,66,216,.17),\n            rgba(255,196,65,.08)\n        );\n\n    transform:\n        rotate(3deg)\n        translate(8px,8px);\n}\n\n#dx-about-why-en .dx-about-why-image-wrap::after {\n    content: \"\";\n\n    position: absolute;\n    z-index: -3;\n\n    left: 13%;\n    right: 13%;\n    bottom: -6%;\n\n    height: 26%;\n\n    border-radius: 50%;\n\n    background:\n        rgba(105,66,216,.18);\n\n    filter: blur(38px);\n}\n\n#dx-about-why-en .dx-about-why-image {\n    position: relative;\n    z-index: 2;\n\n    display: block;\n\n    width: 100%;\n    height: auto;\n\n    border:\n        1px solid rgba(105,66,216,.11);\n\n    border-radius: 25px;\n\n    background: #ece8f6;\n\n    box-shadow:\n        0 30px 62px rgba(35,17,73,.15);\n\n    transition:\n        transform .45s ease,\n        box-shadow .45s ease;\n}\n\n#dx-about-why-en .dx-about-why-image-wrap:hover\n.dx-about-why-image {\n    transform:\n        translateY(-5px)\n        scale(1.01);\n\n    box-shadow:\n        0 38px 72px rgba(35,17,73,.21);\n}\n\n#dx-about-why-en .dx-about-why-accent {\n    position: absolute;\n    z-index: 5;\n\n    top: 7%;\n    left: -2px;\n\n    width: 62px;\n    height: 62px;\n\n    border:\n        10px solid var(--dx-yellow);\n\n    border-right-color: transparent;\n    border-bottom-color: transparent;\n\n    border-radius: 50%;\n\n    transform: rotate(-14deg);\n\n    filter:\n        drop-shadow(\n            0 8px 16px rgba(255,196,65,.22)\n        );\n\n    pointer-events: none;\n}\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n#dx-about-why-en .dx-about-why-content {\n    max-width: 730px;\n\n    justify-self: start;\n\n    text-align: left;\n}\n\n#dx-about-why-en .dx-about-why-eyebrow {\n    display: inline-flex;\n\n    align-items: center;\n\n    gap: 10px;\n\n    margin-bottom: 13px;\n\n    color: var(--dx-purple);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.7;\n}\n\n#dx-about-why-en .dx-about-why-eyebrow::before {\n    content: \"\";\n\n    width: 35px;\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-about-why-en .dx-about-why-title {\n    max-width: 690px;\n\n    margin: 0;\n\n    color: var(--dx-dark);\n\n    font-size:\n        clamp(\n            35px,\n            3.7vw,\n            55px\n        );\n\n    font-weight: 900;\n    line-height: 1.22;\n\n    letter-spacing: -1px;\n}\n\n#dx-about-why-en .dx-about-why-title span {\n    color: var(--dx-purple);\n}\n\n#dx-about-why-en .dx-about-why-description {\n    max-width: 680px;\n\n    margin: 18px 0 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   FEATURES\n========================================================= *\/\n\n#dx-about-why-en .dx-about-why-features {\n    margin-top: 34px;\n\n    display: grid;\n\n    gap: 14px;\n}\n\n#dx-about-why-en .dx-about-why-feature {\n    position: relative;\n\n    min-width: 0;\n\n    display: grid;\n\n    grid-template-columns:\n        58px minmax(0,1fr);\n\n    align-items: start;\n\n    gap: 16px;\n\n    padding:\n        19px\n        20px;\n\n    border-top:\n        1px solid var(--dx-border);\n\n    transition:\n        border-color .25s ease,\n        transform .25s ease;\n}\n\n#dx-about-why-en .dx-about-why-feature:last-child {\n    border-bottom:\n        1px solid var(--dx-border);\n}\n\n#dx-about-why-en .dx-about-why-feature:hover {\n    border-color:\n        rgba(105,66,216,.28);\n\n    transform:\n        translateX(4px);\n}\n\n#dx-about-why-en .dx-about-why-feature-icon {\n    width: 54px;\n    height: 54px;\n\n    display: inline-flex;\n\n    align-items: center;\n    justify-content: center;\n\n    border:\n        1px solid rgba(105,66,216,.14);\n\n    border-radius: 15px;\n\n    color: var(--dx-purple);\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(105,66,216,.10),\n            rgba(145,104,239,.035)\n        );\n\n    box-shadow:\n        0 10px 24px rgba(105,66,216,.08);\n\n    transition:\n        color .25s ease,\n        background .25s ease,\n        transform .25s ease,\n        box-shadow .25s ease;\n}\n\n#dx-about-why-en .dx-about-why-feature:hover\n.dx-about-why-feature-icon {\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 30px rgba(105,66,216,.20);\n\n    transform:\n        translateY(-3px);\n}\n\n#dx-about-why-en .dx-about-why-feature-icon svg {\n    width: 27px;\n    height: 27px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.75;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-about-why-en .dx-about-why-feature-title {\n    margin: 0;\n\n    color: var(--dx-dark);\n\n    font-size: 17px;\n    font-weight: 800;\n    line-height: 1.5;\n}\n\n#dx-about-why-en .dx-about-why-feature-text {\n    margin: 5px 0 0;\n\n    color: var(--dx-muted);\n\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 1.75;\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width:950px) {\n\n    #dx-about-why-en .dx-about-why-main {\n        padding:\n            82px\n            28px\n            80px;\n    }\n\n    #dx-about-why-en .dx-about-why-container {\n        grid-template-columns: 1fr;\n\n        gap: 52px;\n    }\n\n    #dx-about-why-en .dx-about-why-content {\n        max-width: 760px;\n\n        margin: 0 auto;\n\n        text-align: center;\n    }\n\n    #dx-about-why-en .dx-about-why-eyebrow {\n        justify-content: center;\n    }\n\n    #dx-about-why-en .dx-about-why-title,\n    #dx-about-why-en .dx-about-why-description {\n        margin-right: auto;\n        margin-left: auto;\n    }\n\n    #dx-about-why-en .dx-about-why-features {\n        max-width: 720px;\n\n        margin-right: auto;\n        margin-left: auto;\n    }\n\n    #dx-about-why-en .dx-about-why-feature {\n        text-align: left;\n    }\n\n    #dx-about-why-en .dx-about-why-visual {\n        grid-row: 2;\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width:600px) {\n\n    #dx-about-why-en .dx-about-why-main {\n        padding:\n            66px\n            20px\n            64px;\n    }\n\n    #dx-about-why-en .dx-about-why-container {\n        gap: 40px;\n    }\n\n    #dx-about-why-en .dx-about-why-eyebrow {\n        font-size: 14px;\n    }\n\n    #dx-about-why-en .dx-about-why-title {\n        font-size:\n            clamp(\n                29px,\n                8.8vw,\n                40px\n            );\n\n        line-height: 1.25;\n    }\n\n    #dx-about-why-en .dx-about-why-description {\n        margin-top: 14px;\n\n        font-size: 15px;\n        line-height: 1.75;\n    }\n\n    #dx-about-why-en .dx-about-why-features {\n        margin-top: 27px;\n\n        gap: 6px;\n    }\n\n    #dx-about-why-en .dx-about-why-feature {\n        grid-template-columns:\n            50px minmax(0,1fr);\n\n        gap: 13px;\n\n        padding:\n            17px\n            4px;\n    }\n\n    #dx-about-why-en .dx-about-why-feature-icon {\n        width: 48px;\n        height: 48px;\n\n        border-radius: 13px;\n    }\n\n    #dx-about-why-en .dx-about-why-feature-icon svg {\n        width: 24px;\n        height: 24px;\n    }\n\n    #dx-about-why-en .dx-about-why-feature-title {\n        font-size: 16px;\n    }\n\n    #dx-about-why-en .dx-about-why-feature-text {\n        font-size: 14px;\n        line-height: 1.7;\n    }\n\n    #dx-about-why-en .dx-about-why-image-wrap {\n        width: min(100%,390px);\n\n        padding: 7px;\n    }\n\n    #dx-about-why-en .dx-about-why-image {\n        border-radius: 19px;\n    }\n\n    #dx-about-why-en .dx-about-why-accent {\n        width: 48px;\n        height: 48px;\n\n        border-width: 8px;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    #dx-about-why-en *,\n    #dx-about-why-en *::before,\n    #dx-about-why-en *::after {\n        animation-duration: .01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: .01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-about-why-en\"\n    aria-labelledby=\"dx-about-why-title-en\"\n    dir=\"ltr\"\n>\n\n    <span\n        class=\"dx-about-why-orbit dx-about-why-orbit-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-about-why-dots\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-about-why-main\">\n\n        <div class=\"dx-about-why-container\">\n\n            <!-- VISUAL -->\n\n            <div class=\"dx-about-why-visual\">\n\n                <div class=\"dx-about-why-image-wrap\">\n\n                    <span\n                        class=\"dx-about-why-accent\"\n                        aria-hidden=\"true\"\n                    ><\/span>\n\n                    <img loading=\"lazy\"\n                        src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/Group-245.jpg\"\n                        class=\"dx-about-why-image\"\n                        alt=\"D-INDEX custom software and digital solutions\"\n                        width=\"372\"\n                        height=\"606\"\n                        loading=\"lazy\"\n                        decoding=\"async\"\n                    >\n\n                <\/div>\n\n            <\/div>\n\n            <!-- CONTENT -->\n\n            <div class=\"dx-about-why-content\">\n\n                <span class=\"dx-about-why-eyebrow\">\n                    Why Choose Us?\n                <\/span>\n\n                <h2\n                    id=\"dx-about-why-title-en\"\n                    class=\"dx-about-why-title\"\n                >\n                    Digital Solutions Built Around\n                    <span>Your Business Needs<\/span>\n                <\/h2>\n\n                <p class=\"dx-about-why-description\">\n                    We focus on practical digital solutions that combine\n                    flexibility, clear communication, and quality execution,\n                    giving every project an experience shaped around its\n                    goals, audience, and real business requirements.\n                <\/p>\n\n                <div class=\"dx-about-why-features\">\n\n                    <!-- CUSTOMIZATION -->\n\n                    <article class=\"dx-about-why-feature\">\n\n                        <span\n                            class=\"dx-about-why-feature-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M4 7h10\"><\/path>\n                                <path d=\"M18 7h2\"><\/path>\n                                <circle cx=\"16\" cy=\"7\" r=\"2\"><\/circle>\n\n                                <path d=\"M4 17h2\"><\/path>\n                                <path d=\"M10 17h10\"><\/path>\n                                <circle cx=\"8\" cy=\"17\" r=\"2\"><\/circle>\n\n                                <path d=\"M4 12h5\"><\/path>\n                                <path d=\"M13 12h7\"><\/path>\n                                <circle cx=\"11\" cy=\"12\" r=\"2\"><\/circle>\n                            <\/svg>\n                        <\/span>\n\n                        <div>\n\n                            <h3 class=\"dx-about-why-feature-title\">\n                                Flexible Customization\n                            <\/h3>\n\n                            <p class=\"dx-about-why-feature-text\">\n                                We develop flexible solutions that can be\n                                adapted to your project requirements,\n                                workflows, and business-specific features.\n                            <\/p>\n\n                        <\/div>\n\n                    <\/article>\n\n                    <!-- COMMUNICATION -->\n\n                    <article class=\"dx-about-why-feature\">\n\n                        <span\n                            class=\"dx-about-why-feature-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M21 11.5a8.4 8.4 0 0 1-9 8.5 9.7 9.7 0 0 1-4-.8L3 21l1.8-4.8A8.3 8.3 0 0 1 3 11.5a8.5 8.5 0 0 1 9-8.5 8.5 8.5 0 0 1 9 8.5z\"><\/path>\n                                <path d=\"M8 11h.01\"><\/path>\n                                <path d=\"M12 11h.01\"><\/path>\n                                <path d=\"M16 11h.01\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <div>\n\n                            <h3 class=\"dx-about-why-feature-title\">\n                                Clear Communication\n                            <\/h3>\n\n                            <p class=\"dx-about-why-feature-text\">\n                                We maintain clear communication throughout\n                                the project to discuss requirements,\n                                progress, updates, and questions.\n                            <\/p>\n\n                        <\/div>\n\n                    <\/article>\n\n                    <!-- QUALITY -->\n\n                    <article class=\"dx-about-why-feature\">\n\n                        <span\n                            class=\"dx-about-why-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                        <div>\n\n                            <h3 class=\"dx-about-why-feature-title\">\n                                Quality-Focused Execution\n                            <\/h3>\n\n                            <p class=\"dx-about-why-feature-text\">\n                                We focus on performance, responsive design,\n                                usability, and implementation quality to\n                                deliver a consistent digital experience.\n                            <\/p>\n\n                        <\/div>\n\n                    <\/article>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxAboutWhyEn() {\n\n        const section =\n            document.getElementById(\n                \"dx-about-why-en\"\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-about-why-en-widget\"\n            );\n        }\n    }\n\n    if (document.readyState === \"loading\") {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxAboutWhyEn\n        );\n\n    } else {\n\n        initDxAboutWhyEn();\n\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-358c27b e-flex e-con-boxed e-con e-parent\" data-id=\"358c27b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-df8b5d2 elementor-widget elementor-widget-html\" data-id=\"df8b5d2\" 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 ABOUT TECHNOLOGIES SECTION\n     Author: Mohamed El-Sehemy\n     English LTR Version\n     Elementor Compatible\n========================================================== -->\n\n<style>\n.elementor-widget-html:has(#dx-about-tech-en),\n.elementor-widget-html:has(#dx-about-tech-en) > .elementor-widget-container,\n.dx-about-tech-en-widget,\n.dx-about-tech-en-widget > .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-about-tech-en,\n#dx-about-tech-en *,\n#dx-about-tech-en *::before,\n#dx-about-tech-en *::after {\n    box-sizing: border-box;\n}\n\n#dx-about-tech-en {\n    --dx-dark: #08001f;\n    --dx-dark-2: #16053b;\n    --dx-purple: #6942d8;\n    --dx-purple-light: #9168ef;\n    --dx-yellow: #ffc441;\n    --dx-white: #ffffff;\n    --dx-text: rgba(255,255,255,.74);\n    --dx-muted: rgba(255,255,255,.64);\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n    direction: ltr;\n\n    color: var(--dx-white);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n\n    background:\n        radial-gradient(\n            circle at 87% 20%,\n            rgba(105,66,216,.25),\n            transparent 29%\n        ),\n        radial-gradient(\n            circle at 12% 88%,\n            rgba(145,104,239,.14),\n            transparent 29%\n        ),\n        linear-gradient(\n            215deg,\n            var(--dx-dark-2),\n            var(--dx-dark)\n        );\n}\n\n\/* =========================================================\n   BACKGROUND\n========================================================= *\/\n\n#dx-about-tech-en .dx-tech-grid-bg {\n    position: absolute;\n    z-index: -5;\n\n    inset: 0;\n\n    opacity: .09;\n\n    background-image:\n        linear-gradient(\n            rgba(255,255,255,.04) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(255,255,255,.04) 1px,\n            transparent 1px\n        );\n\n    background-size: 70px 70px;\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-about-tech-en .dx-tech-orbit {\n    position: absolute;\n    z-index: -3;\n\n    border:\n        1px solid rgba(145,104,239,.16);\n\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-about-tech-en .dx-tech-orbit-one {\n    top: -220px;\n    left: -170px;\n\n    width: 430px;\n    height: 430px;\n}\n\n#dx-about-tech-en .dx-tech-orbit-two {\n    right: -180px;\n    bottom: -230px;\n\n    width: 430px;\n    height: 430px;\n}\n\n#dx-about-tech-en .dx-tech-dots {\n    position: absolute;\n    z-index: -2;\n\n    top: 70px;\n    right: 4%;\n\n    width: 110px;\n    height: 110px;\n\n    opacity: .22;\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\/* =========================================================\n   MAIN\n========================================================= *\/\n\n#dx-about-tech-en .dx-tech-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        92px\n        0\n        96px;\n}\n\n#dx-about-tech-en .dx-tech-container {\n    width:\n        min(\n            1450px,\n            calc(100% - 48px)\n        );\n\n    margin: 0 auto;\n}\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n#dx-about-tech-en .dx-tech-header {\n    max-width: 800px;\n\n    margin:\n        0\n        auto\n        48px;\n\n    text-align: center;\n}\n\n#dx-about-tech-en .dx-tech-eyebrow {\n    display: inline-flex;\n\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    margin-bottom: 12px;\n\n    color: var(--dx-yellow);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.6;\n}\n\n#dx-about-tech-en .dx-tech-eyebrow::before,\n#dx-about-tech-en .dx-tech-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-yellow),\n            var(--dx-purple-light)\n        );\n}\n\n#dx-about-tech-en .dx-tech-title {\n    margin: 0;\n\n    color: var(--dx-white);\n\n    font-size:\n        clamp(\n            35px,\n            3.7vw,\n            56px\n        );\n\n    font-weight: 900;\n    line-height: 1.2;\n\n    letter-spacing: -1px;\n}\n\n#dx-about-tech-en .dx-tech-title span {\n    color: var(--dx-yellow);\n}\n\n#dx-about-tech-en .dx-tech-description {\n    max-width: 700px;\n\n    margin:\n        16px\n        auto\n        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   MARQUEE\n========================================================= *\/\n\n#dx-about-tech-en .dx-tech-marquee {\n    position: relative;\n\n    width: 100%;\n\n    overflow: hidden;\n\n    padding:\n        14px\n        0;\n}\n\n#dx-about-tech-en .dx-tech-marquee::before,\n#dx-about-tech-en .dx-tech-marquee::after {\n    content: \"\";\n\n    position: absolute;\n    z-index: 10;\n\n    top: 0;\n    bottom: 0;\n\n    width:\n        clamp(\n            35px,\n            7vw,\n            120px\n        );\n\n    pointer-events: none;\n}\n\n#dx-about-tech-en .dx-tech-marquee::before {\n    left: 0;\n\n    background:\n        linear-gradient(\n            to right,\n            var(--dx-dark),\n            transparent\n        );\n}\n\n#dx-about-tech-en .dx-tech-marquee::after {\n    right: 0;\n\n    background:\n        linear-gradient(\n            to left,\n            var(--dx-dark),\n            transparent\n        );\n}\n\n#dx-about-tech-en .dx-tech-track {\n    width: max-content;\n\n    display: flex;\n\n    direction: ltr;\n\n    animation:\n        dxAboutTechScrollEn\n        28s\n        linear\n        infinite;\n\n    will-change: transform;\n}\n\n#dx-about-tech-en .dx-tech-marquee:hover\n.dx-tech-track,\n#dx-about-tech-en .dx-tech-marquee:focus-within\n.dx-tech-track {\n    animation-play-state: paused;\n}\n\n#dx-about-tech-en .dx-tech-group {\n    display: flex;\n\n    align-items: stretch;\n\n    gap: 18px;\n\n    padding-right: 18px;\n}\n\n\/* =========================================================\n   TECHNOLOGY CARD - WHITE\n========================================================= *\/\n\n#dx-about-tech-en .dx-tech-item {\n    width: 190px;\n    min-height: 116px;\n\n    flex: 0 0 190px;\n\n    display: flex;\n\n    flex-direction: column;\n\n    align-items: center;\n    justify-content: center;\n\n    gap: 12px;\n\n    padding:\n        19px\n        18px;\n\n    border:\n        1px solid rgba(105,66,216,.14);\n\n    border-radius: 18px;\n\n    background: #ffffff;\n\n    box-shadow:\n        0 16px 34px rgba(0,0,0,.17);\n\n    transition:\n        transform .3s ease,\n        border-color .3s ease,\n        box-shadow .3s ease;\n}\n\n#dx-about-tech-en .dx-tech-item:hover {\n    border-color:\n        rgba(145,104,239,.70);\n\n    background: #ffffff;\n\n    box-shadow:\n        0 23px 46px rgba(0,0,0,.24),\n        0 0 0 1px rgba(145,104,239,.08);\n\n    transform:\n        translateY(-6px);\n}\n\n\/* =========================================================\n   LOGOS\n========================================================= *\/\n\n#dx-about-tech-en .dx-tech-logo-wrap {\n    width: 100%;\n    height: 52px;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n}\n\n#dx-about-tech-en .dx-tech-logo {\n    display: block;\n\n    max-width: 128px;\n    max-height: 48px;\n\n    width: auto;\n    height: auto;\n\n    object-fit: contain;\n\n    filter:\n        drop-shadow(\n            0 4px 8px rgba(20,10,45,.08)\n        );\n}\n\n#dx-about-tech-en .dx-tech-logo-flutter {\n    max-width: 132px;\n    max-height: 42px;\n}\n\n#dx-about-tech-en .dx-tech-name {\n    color: #24173f;\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.5;\n\n    text-align: center;\n}\n\n\/* =========================================================\n   BOTTOM NOTE\n========================================================= *\/\n\n#dx-about-tech-en .dx-tech-bottom {\n    width: min(850px,100%);\n\n    margin:\n        43px\n        auto\n        0;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    gap: 12px;\n\n    padding:\n        17px\n        22px;\n\n    border-top:\n        1px solid rgba(255,255,255,.10);\n\n    border-bottom:\n        1px solid rgba(255,255,255,.10);\n\n    color: var(--dx-muted);\n\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 1.75;\n\n    text-align: center;\n}\n\n#dx-about-tech-en .dx-tech-bottom-icon {\n    width: 38px;\n    height: 38px;\n\n    flex: 0 0 38px;\n\n    display: inline-flex;\n\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 11px;\n\n    color: var(--dx-yellow);\n\n    background:\n        rgba(255,196,65,.08);\n}\n\n#dx-about-tech-en .dx-tech-bottom-icon svg {\n    width: 20px;\n    height: 20px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   ANIMATION\n========================================================= *\/\n\n@keyframes dxAboutTechScrollEn {\n\n    from {\n        transform:\n            translateX(0);\n    }\n\n    to {\n        transform:\n            translateX(-50%);\n    }\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width:900px) {\n\n    #dx-about-tech-en .dx-tech-main {\n        padding:\n            78px\n            0\n            80px;\n    }\n\n    #dx-about-tech-en .dx-tech-container {\n        width:\n            min(\n                calc(100% - 40px),\n                1450px\n            );\n    }\n\n    #dx-about-tech-en .dx-tech-header {\n        margin-bottom: 39px;\n    }\n\n    #dx-about-tech-en .dx-tech-item {\n        width: 175px;\n\n        flex-basis: 175px;\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width:600px) {\n\n    #dx-about-tech-en .dx-tech-main {\n        padding:\n            64px\n            0\n            66px;\n    }\n\n    #dx-about-tech-en .dx-tech-container {\n        width:\n            calc(100% - 32px);\n    }\n\n    #dx-about-tech-en .dx-tech-header {\n        margin-bottom: 30px;\n    }\n\n    #dx-about-tech-en .dx-tech-eyebrow {\n        font-size: 14px;\n    }\n\n    #dx-about-tech-en .dx-tech-eyebrow::before,\n    #dx-about-tech-en .dx-tech-eyebrow::after {\n        width: 22px;\n    }\n\n    #dx-about-tech-en .dx-tech-title {\n        font-size:\n            clamp(\n                29px,\n                8.8vw,\n                40px\n            );\n\n        line-height: 1.25;\n    }\n\n    #dx-about-tech-en .dx-tech-description {\n        margin-top: 13px;\n\n        font-size: 15px;\n        line-height: 1.75;\n    }\n\n    #dx-about-tech-en .dx-tech-group {\n        gap: 12px;\n\n        padding-right: 12px;\n    }\n\n    #dx-about-tech-en .dx-tech-item {\n        width: 150px;\n        min-height: 105px;\n\n        flex-basis: 150px;\n\n        padding:\n            16px\n            14px;\n\n        border-radius: 15px;\n    }\n\n    #dx-about-tech-en .dx-tech-logo-wrap {\n        height: 45px;\n    }\n\n    #dx-about-tech-en .dx-tech-logo {\n        max-width: 110px;\n        max-height: 42px;\n    }\n\n    #dx-about-tech-en .dx-tech-name {\n        font-size: 14px;\n    }\n\n    #dx-about-tech-en .dx-tech-bottom {\n        margin-top: 32px;\n\n        padding:\n            15px\n            6px;\n\n        align-items: flex-start;\n\n        font-size: 14px;\n        line-height: 1.7;\n    }\n}\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    #dx-about-tech-en .dx-tech-track {\n        animation: none !important;\n    }\n\n    #dx-about-tech-en *,\n    #dx-about-tech-en *::before,\n    #dx-about-tech-en *::after {\n        transition-duration:\n            .01ms !important;\n    }\n\n    #dx-about-tech-en .dx-tech-marquee {\n        overflow-x: auto;\n\n        scrollbar-width: none;\n    }\n\n    #dx-about-tech-en .dx-tech-marquee::-webkit-scrollbar {\n        display: none;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-about-tech-en\"\n    aria-labelledby=\"dx-about-tech-title-en\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n\n    <div\n        class=\"dx-tech-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <span\n        class=\"dx-tech-orbit dx-tech-orbit-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-tech-orbit dx-tech-orbit-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-tech-dots\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-tech-main\">\n\n        <div class=\"dx-tech-container\">\n\n            <header class=\"dx-tech-header\">\n\n                <span class=\"dx-tech-eyebrow\">\n                    Our Technology Stack\n                <\/span>\n\n                <h2\n                    id=\"dx-about-tech-title-en\"\n                    class=\"dx-tech-title\"\n                >\n                    Modern Technologies for\n                    <span>Reliable Digital Solutions<\/span>\n                <\/h2>\n\n                <p class=\"dx-tech-description\">\n                    We select technologies according to the requirements\n                    of each project, focusing on performance, flexibility,\n                    maintainability, and the ability to support future\n                    development.\n                <\/p>\n\n            <\/header>\n\n            <div\n                class=\"dx-tech-marquee\"\n                aria-label=\"Technologies and tools we use\"\n            >\n\n                <div class=\"dx-tech-track\">\n\n                    <!-- GROUP 1 -->\n\n                    <div class=\"dx-tech-group\">\n\n                        <article class=\"dx-tech-item\">\n\n                            <span class=\"dx-tech-logo-wrap\">\n                                <img\n                                    src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/jquery.png\"\n                                    class=\"dx-tech-logo\"\n                                    alt=\"jQuery\"\n                                    loading=\"lazy\"\n                                    decoding=\"async\"\n                                >\n                            <\/span>\n\n                            <span class=\"dx-tech-name\">\n                                jQuery\n                            <\/span>\n\n                        <\/article>\n\n                        <article class=\"dx-tech-item\">\n\n                            <span class=\"dx-tech-logo-wrap\">\n                                <img\n                                    src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/sketch-1.png\"\n                                    class=\"dx-tech-logo\"\n                                    alt=\"Sketch\"\n                                    loading=\"lazy\"\n                                    decoding=\"async\"\n                                >\n                            <\/span>\n\n                            <span class=\"dx-tech-name\">\n                                Sketch\n                            <\/span>\n\n                        <\/article>\n\n                        <article class=\"dx-tech-item\">\n\n                            <span class=\"dx-tech-logo-wrap\">\n                                <img\n                                    src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/Elementor-Logo-Full-Red-1.png\"\n                                    class=\"dx-tech-logo\"\n                                    alt=\"Elementor\"\n                                    loading=\"lazy\"\n                                    decoding=\"async\"\n                                >\n                            <\/span>\n\n                            <span class=\"dx-tech-name\">\n                                Elementor\n                            <\/span>\n\n                        <\/article>\n\n                        <article class=\"dx-tech-item\">\n\n                            <span class=\"dx-tech-logo-wrap\">\n                                <img\n                                    src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/Ruby.png\"\n                                    class=\"dx-tech-logo\"\n                                    alt=\"Ruby\"\n                                    loading=\"lazy\"\n                                    decoding=\"async\"\n                                >\n                            <\/span>\n\n                            <span class=\"dx-tech-name\">\n                                Ruby\n                            <\/span>\n\n                        <\/article>\n\n                        <article class=\"dx-tech-item\">\n\n                            <span class=\"dx-tech-logo-wrap\">\n                                <img\n                                    src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/nodejs.png\"\n                                    class=\"dx-tech-logo\"\n                                    alt=\"Node.js\"\n                                    loading=\"lazy\"\n                                    decoding=\"async\"\n                                >\n                            <\/span>\n\n                            <span class=\"dx-tech-name\">\n                                Node.js\n                            <\/span>\n\n                        <\/article>\n\n                        <article class=\"dx-tech-item\">\n\n                            <span class=\"dx-tech-logo-wrap\">\n                                <img\n                                    src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/04\/google-flutter-logo.png\"\n                                    class=\"dx-tech-logo dx-tech-logo-flutter\"\n                                    alt=\"Flutter\"\n                                    loading=\"lazy\"\n                                    decoding=\"async\"\n                                >\n                            <\/span>\n\n                            <span class=\"dx-tech-name\">\n                                Flutter\n                            <\/span>\n\n                        <\/article>\n\n                    <\/div>\n\n                    <!-- DUPLICATED GROUP -->\n\n                    <div\n                        class=\"dx-tech-group\"\n                        aria-hidden=\"true\"\n                    >\n\n                        <article class=\"dx-tech-item\">\n                            <span class=\"dx-tech-logo-wrap\">\n                                <img\n                                    src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/jquery.png\"\n                                    class=\"dx-tech-logo\"\n                                    alt=\"\"\n                                    loading=\"lazy\"\n                                    decoding=\"async\"\n                                >\n                            <\/span>\n                            <span class=\"dx-tech-name\">\n                                jQuery\n                            <\/span>\n                        <\/article>\n\n                        <article class=\"dx-tech-item\">\n                            <span class=\"dx-tech-logo-wrap\">\n                                <img\n                                    src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/sketch-1.png\"\n                                    class=\"dx-tech-logo\"\n                                    alt=\"\"\n                                    loading=\"lazy\"\n                                    decoding=\"async\"\n                                >\n                            <\/span>\n                            <span class=\"dx-tech-name\">\n                                Sketch\n                            <\/span>\n                        <\/article>\n\n                        <article class=\"dx-tech-item\">\n                            <span class=\"dx-tech-logo-wrap\">\n                                <img\n                                    src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/Elementor-Logo-Full-Red-1.png\"\n                                    class=\"dx-tech-logo\"\n                                    alt=\"\"\n                                    loading=\"lazy\"\n                                    decoding=\"async\"\n                                >\n                            <\/span>\n                            <span class=\"dx-tech-name\">\n                                Elementor\n                            <\/span>\n                        <\/article>\n\n                        <article class=\"dx-tech-item\">\n                            <span class=\"dx-tech-logo-wrap\">\n                                <img\n                                    src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/Ruby.png\"\n                                    class=\"dx-tech-logo\"\n                                    alt=\"\"\n                                    loading=\"lazy\"\n                                    decoding=\"async\"\n                                >\n                            <\/span>\n                            <span class=\"dx-tech-name\">\n                                Ruby\n                            <\/span>\n                        <\/article>\n\n                        <article class=\"dx-tech-item\">\n                            <span class=\"dx-tech-logo-wrap\">\n                                <img\n                                    src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/nodejs.png\"\n                                    class=\"dx-tech-logo\"\n                                    alt=\"\"\n                                    loading=\"lazy\"\n                                    decoding=\"async\"\n                                >\n                            <\/span>\n                            <span class=\"dx-tech-name\">\n                                Node.js\n                            <\/span>\n                        <\/article>\n\n                        <article class=\"dx-tech-item\">\n                            <span class=\"dx-tech-logo-wrap\">\n                                <img\n                                    src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/04\/google-flutter-logo.png\"\n                                    class=\"dx-tech-logo dx-tech-logo-flutter\"\n                                    alt=\"\"\n                                    loading=\"lazy\"\n                                    decoding=\"async\"\n                                >\n                            <\/span>\n                            <span class=\"dx-tech-name\">\n                                Flutter\n                            <\/span>\n                        <\/article>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n            <div class=\"dx-tech-bottom\">\n\n                <span\n                    class=\"dx-tech-bottom-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                    Technology is a tool for achieving the right\n                    business outcome, so we choose the stack that\n                    best fits each digital solution.\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 initDxAboutTechEn() {\n\n        const section =\n            document.getElementById(\n                \"dx-about-tech-en\"\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-about-tech-en-widget\"\n            );\n        }\n    }\n\n    if (document.readyState === \"loading\") {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxAboutTechEn\n        );\n\n    } else {\n\n        initDxAboutTechEn();\n\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-343653a e-flex e-con-boxed e-con e-parent\" data-id=\"343653a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cb2ede6 elementor-widget elementor-widget-html\" data-id=\"cb2ede6\" 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 ABOUT FINAL CTA\n     Author: Mohamed El-Sehemy\n     English LTR Version\n     Elementor Compatible\n========================================================== -->\n\n<style>\n.elementor-widget-html:has(#dx-about-final-cta-en),\n.elementor-widget-html:has(#dx-about-final-cta-en) > .elementor-widget-container,\n.dx-about-final-cta-en-widget,\n.dx-about-final-cta-en-widget > .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-about-final-cta-en,\n#dx-about-final-cta-en *,\n#dx-about-final-cta-en *::before,\n#dx-about-final-cta-en *::after {\n    box-sizing: border-box;\n}\n\n#dx-about-final-cta-en {\n    --dx-dark: #08001f;\n    --dx-dark-2: #1b0846;\n    --dx-purple: #6942d8;\n    --dx-purple-light: #9168ef;\n    --dx-yellow: #ffc441;\n    --dx-yellow-light: #ffd66e;\n    --dx-white: #ffffff;\n    --dx-text: rgba(255,255,255,.76);\n    --dx-bg: #f8f7fc;\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n    direction: ltr;\n\n    color: var(--dx-white);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n\n    background:\n        radial-gradient(\n            circle at 85% 20%,\n            rgba(105,66,216,.06),\n            transparent 26%\n        ),\n        radial-gradient(\n            circle at 12% 85%,\n            rgba(145,104,239,.05),\n            transparent 28%\n        ),\n        var(--dx-bg);\n}\n\n#dx-about-final-cta-en a {\n    color: inherit;\n    text-decoration: none;\n}\n\n\/* =========================================================\n   MAIN\n========================================================= *\/\n\n#dx-about-final-cta-en .dx-about-cta-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        62px\n        clamp(22px,5vw,90px)\n        68px;\n}\n\n#dx-about-final-cta-en .dx-about-cta-container {\n    position: relative;\n    isolation: isolate;\n\n    width: min(1500px,100%);\n    min-height: 445px;\n\n    margin: 0 auto;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    overflow: hidden;\n\n    padding:\n        65px\n        clamp(28px,6vw,95px);\n\n    border:\n        1px solid rgba(255,255,255,.13);\n\n    border-radius: 30px;\n\n    background:\n        radial-gradient(\n            circle at 85% 16%,\n            rgba(145,104,239,.30),\n            transparent 31%\n        ),\n        radial-gradient(\n            circle at 12% 84%,\n            rgba(105,66,216,.25),\n            transparent 34%\n        ),\n        linear-gradient(\n            215deg,\n            var(--dx-dark-2),\n            var(--dx-dark)\n        );\n\n    box-shadow:\n        0 30px 68px rgba(36,16,78,.20),\n        inset 0 1px 0 rgba(255,255,255,.07);\n}\n\n\/* =========================================================\n   BACKGROUND DETAILS\n========================================================= *\/\n\n#dx-about-final-cta-en .dx-about-cta-grid {\n    position: absolute;\n    z-index: -5;\n\n    inset: 0;\n\n    opacity: .08;\n\n    background-image:\n        linear-gradient(\n            rgba(255,255,255,.05) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(255,255,255,.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-about-final-cta-en .dx-about-cta-orbit {\n    position: absolute;\n    z-index: -3;\n\n    top: -150px;\n    left: 50%;\n\n    width: 350px;\n    height: 350px;\n\n    border:\n        60px solid rgba(145,104,239,.10);\n\n    border-radius: 50%;\n\n    transform:\n        translateX(-50%);\n\n    pointer-events: none;\n}\n\n#dx-about-final-cta-en .dx-about-cta-dots {\n    position: absolute;\n    z-index: -2;\n\n    top: 32px;\n    right: 38px;\n\n    width: 110px;\n    height: 110px;\n\n    opacity: .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-about-final-cta-en .dx-about-cta-line {\n    position: absolute;\n    z-index: -2;\n\n    left: -100px;\n    bottom: 35px;\n\n    width: 360px;\n    height: 8px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            rgba(255,196,65,.40),\n            rgba(145,104,239,.58),\n            transparent\n        );\n\n    transform:\n        rotate(45deg);\n\n    pointer-events: none;\n}\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n#dx-about-final-cta-en .dx-about-cta-content {\n    position: relative;\n    z-index: 5;\n\n    width: min(930px,100%);\n\n    text-align: center;\n}\n\n#dx-about-final-cta-en .dx-about-cta-eyebrow {\n    display: inline-flex;\n\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    margin-bottom: 13px;\n\n    color: var(--dx-yellow);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.6;\n}\n\n#dx-about-final-cta-en .dx-about-cta-eyebrow::before,\n#dx-about-final-cta-en .dx-about-cta-eyebrow::after {\n    content: \"\";\n\n    width: 34px;\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-about-final-cta-en .dx-about-cta-title {\n    margin: 0;\n\n    color: var(--dx-white);\n\n    font-size:\n        clamp(\n            35px,\n            4vw,\n            58px\n        );\n\n    font-weight: 900;\n    line-height: 1.2;\n\n    letter-spacing: -1px;\n}\n\n#dx-about-final-cta-en .dx-about-cta-title span {\n    color: var(--dx-yellow);\n}\n\n#dx-about-final-cta-en .dx-about-cta-description {\n    max-width: 740px;\n\n    margin:\n        18px\n        auto\n        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   ACTIONS\n========================================================= *\/\n\n#dx-about-final-cta-en .dx-about-cta-actions {\n    margin-top: 29px;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    flex-wrap: wrap;\n\n    gap: 13px;\n}\n\n#dx-about-final-cta-en .dx-about-cta-button {\n    min-width: 215px;\n    min-height: 56px;\n\n    display: inline-flex;\n\n    align-items: center;\n    justify-content: center;\n\n    gap: 9px;\n\n    padding:\n        0\n        26px;\n\n    border:\n        1px solid transparent;\n\n    border-radius: 13px;\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.5;\n\n    transition:\n        transform .25s ease,\n        box-shadow .25s ease,\n        border-color .25s ease,\n        background .25s ease;\n}\n\n#dx-about-final-cta-en .dx-about-cta-primary {\n    color: #190c32;\n\n    border-color:\n        rgba(255,255,255,.24);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-yellow),\n            var(--dx-yellow-light)\n        );\n\n    box-shadow:\n        0 17px 38px rgba(255,196,65,.24);\n}\n\n#dx-about-final-cta-en .dx-about-cta-secondary {\n    color: var(--dx-white);\n\n    border-color:\n        rgba(255,255,255,.22);\n\n    background:\n        rgba(255,255,255,.07);\n\n    -webkit-backdrop-filter: blur(10px);\n    backdrop-filter: blur(10px);\n}\n\n#dx-about-final-cta-en .dx-about-cta-button:hover,\n#dx-about-final-cta-en .dx-about-cta-button:focus-visible {\n    transform:\n        translateY(-4px);\n}\n\n#dx-about-final-cta-en .dx-about-cta-primary:hover,\n#dx-about-final-cta-en .dx-about-cta-primary:focus-visible {\n    box-shadow:\n        0 22px 48px rgba(255,196,65,.34);\n}\n\n#dx-about-final-cta-en .dx-about-cta-secondary:hover,\n#dx-about-final-cta-en .dx-about-cta-secondary:focus-visible {\n    border-color:\n        rgba(145,104,239,.70);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-purple),\n            var(--dx-purple-light)\n        );\n\n    box-shadow:\n        0 19px 42px rgba(105,66,216,.30);\n}\n\n#dx-about-final-cta-en .dx-about-cta-button svg {\n    width: 19px;\n    height: 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   NOTE\n========================================================= *\/\n\n#dx-about-final-cta-en .dx-about-cta-note {\n    margin-top: 24px;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    gap: 9px;\n\n    color:\n        rgba(255,255,255,.67);\n\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1.7;\n}\n\n#dx-about-final-cta-en .dx-about-cta-note-icon {\n    width: 23px;\n    height: 23px;\n\n    display: inline-flex;\n\n    align-items: center;\n    justify-content: center;\n\n    border:\n        1px solid rgba(255,196,65,.30);\n\n    border-radius: 50%;\n\n    color: var(--dx-yellow);\n\n    background:\n        rgba(255,196,65,.08);\n}\n\n#dx-about-final-cta-en .dx-about-cta-note-icon svg {\n    width: 12px;\n    height: 12px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2.2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width:900px) {\n\n    #dx-about-final-cta-en .dx-about-cta-main {\n        padding:\n            52px\n            28px\n            57px;\n    }\n\n    #dx-about-final-cta-en .dx-about-cta-container {\n        min-height: 420px;\n\n        padding:\n            54px\n            34px;\n\n        border-radius: 27px;\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width:600px) {\n\n    #dx-about-final-cta-en .dx-about-cta-main {\n        padding:\n            38px\n            16px\n            42px;\n    }\n\n    #dx-about-final-cta-en .dx-about-cta-container {\n        min-height: 0;\n\n        padding:\n            46px\n            18px\n            42px;\n\n        border-radius: 22px;\n    }\n\n    #dx-about-final-cta-en .dx-about-cta-orbit {\n        top: -80px;\n\n        width: 225px;\n        height: 225px;\n\n        border-width: 40px;\n    }\n\n    #dx-about-final-cta-en .dx-about-cta-eyebrow {\n        font-size: 14px;\n    }\n\n    #dx-about-final-cta-en .dx-about-cta-eyebrow::before,\n    #dx-about-final-cta-en .dx-about-cta-eyebrow::after {\n        width: 22px;\n    }\n\n    #dx-about-final-cta-en .dx-about-cta-title {\n        font-size:\n            clamp(\n                28px,\n                8.6vw,\n                38px\n            );\n\n        line-height: 1.25;\n    }\n\n    #dx-about-final-cta-en .dx-about-cta-description {\n        margin-top: 14px;\n\n        font-size: 15px;\n        line-height: 1.75;\n    }\n\n    #dx-about-final-cta-en .dx-about-cta-actions {\n        margin-top: 23px;\n\n        display: grid;\n\n        grid-template-columns: 1fr;\n\n        gap: 10px;\n    }\n\n    #dx-about-final-cta-en .dx-about-cta-button {\n        width: 100%;\n        min-width: 0;\n\n        min-height: 54px;\n    }\n\n    #dx-about-final-cta-en .dx-about-cta-note {\n        margin-top: 20px;\n\n        align-items: flex-start;\n\n        font-size: 14px;\n        line-height: 1.7;\n    }\n\n    #dx-about-final-cta-en .dx-about-cta-dots {\n        display: none;\n    }\n\n    #dx-about-final-cta-en .dx-about-cta-line {\n        left: -180px;\n\n        bottom: 65px;\n\n        opacity: .55;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-about-final-cta-en a:focus-visible {\n    outline:\n        3px solid var(--dx-yellow);\n\n    outline-offset: 4px;\n}\n\n@media (prefers-reduced-motion:reduce) {\n\n    #dx-about-final-cta-en *,\n    #dx-about-final-cta-en *::before,\n    #dx-about-final-cta-en *::after {\n        animation-duration: .01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: .01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-about-final-cta-en\"\n    aria-labelledby=\"dx-about-final-cta-title-en\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n\n    <div class=\"dx-about-cta-main\">\n\n        <div class=\"dx-about-cta-container\">\n\n            <div\n                class=\"dx-about-cta-grid\"\n                aria-hidden=\"true\"\n            ><\/div>\n\n            <span\n                class=\"dx-about-cta-orbit\"\n                aria-hidden=\"true\"\n            ><\/span>\n\n            <span\n                class=\"dx-about-cta-dots\"\n                aria-hidden=\"true\"\n            ><\/span>\n\n            <span\n                class=\"dx-about-cta-line\"\n                aria-hidden=\"true\"\n            ><\/span>\n\n            <div class=\"dx-about-cta-content\">\n\n                <span class=\"dx-about-cta-eyebrow\">\n                    Ready to Work with Us?\n                <\/span>\n\n                <h2\n                    id=\"dx-about-final-cta-title-en\"\n                    class=\"dx-about-cta-title\"\n                >\n                    Let\u2019s Turn Your Idea Into a\n                    <span>Digital Solution Built for Your Business<\/span>\n                <\/h2>\n\n                <p class=\"dx-about-cta-description\">\n                    Tell us about your idea, business needs, or upcoming\n                    project. We\u2019ll understand your goals and help you identify\n                    the right digital solution before moving forward with a\n                    clear implementation plan.\n                <\/p>\n\n                <div class=\"dx-about-cta-actions\">\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/contact\/\"\n                        class=\"dx-about-cta-button dx-about-cta-primary\"\n                    >\n                        <span>\n                            Get a Free Consultation\n                        <\/span>\n\n                        <svg\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n                    <\/a>\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/services\/\"\n                        class=\"dx-about-cta-button dx-about-cta-secondary\"\n                    >\n                        <span>\n                            Explore Our Services\n                        <\/span>\n\n                        <svg\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n                    <\/a>\n\n                <\/div>\n\n                <div class=\"dx-about-cta-note\">\n\n                    <span\n                        class=\"dx-about-cta-note-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                        We start by understanding your project before recommending a solution.\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 initDxAboutFinalCtaEn() {\n\n        const section =\n            document.getElementById(\n                \"dx-about-final-cta-en\"\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-about-final-cta-en-widget\"\n            );\n        }\n    }\n\n    if (document.readyState === \"loading\") {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxAboutFinalCtaEn\n        );\n\n    } else {\n\n        initDxAboutFinalCtaEn();\n\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>About D-INDEX Your Partner for Digital Solutions That Move Business Forward We design and develop digital solutions that help businesses turn ideas and operational needs into practical websites, mobile applications, and digital systems built around real business goals. Start Your Project Explore Our Services 45+ Projects Delivered 141 Clients Worldwide 12+ Specialized Team Members Our [&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-148","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>About - 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\/about\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"About - D-INDEX - Your Partner in Digital Transformation\" \/>\n<meta property=\"og:description\" content=\"About D-INDEX Your Partner for Digital Solutions That Move Business Forward We design and develop digital solutions that help businesses turn ideas and operational needs into practical websites, mobile applications, and digital systems built around real business goals. Start Your Project Explore Our Services 45+ Projects Delivered 141 Clients Worldwide 12+ Specialized Team Members Our [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dindex.net\/en\/about\/\" \/>\n<meta property=\"og:site_name\" content=\"D-INDEX - Your Partner in Digital Transformation\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-19T09:32:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/Ellipse-7.png\" \/>\n\t<meta property=\"og:image:width\" content=\"75\" \/>\n\t<meta property=\"og:image:height\" content=\"211\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/dindex.net\\\/en\\\/about\\\/\",\"url\":\"https:\\\/\\\/dindex.net\\\/en\\\/about\\\/\",\"name\":\"About - D-INDEX - Your Partner in Digital Transformation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/dindex.net\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/dindex.net\\\/en\\\/about\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/dindex.net\\\/en\\\/about\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/dindex.net\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/Ellipse-7.png\",\"datePublished\":\"2025-02-14T08:44:52+00:00\",\"dateModified\":\"2026-08-19T09:32:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/dindex.net\\\/en\\\/about\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/dindex.net\\\/en\\\/about\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/dindex.net\\\/en\\\/about\\\/#primaryimage\",\"url\":\"https:\\\/\\\/dindex.net\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/Ellipse-7.png\",\"contentUrl\":\"https:\\\/\\\/dindex.net\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/Ellipse-7.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/dindex.net\\\/en\\\/about\\\/#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\":\"About\"}]},{\"@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":"About - 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\/about\/","og_locale":"en_US","og_type":"article","og_title":"About - D-INDEX - Your Partner in Digital Transformation","og_description":"About D-INDEX Your Partner for Digital Solutions That Move Business Forward We design and develop digital solutions that help businesses turn ideas and operational needs into practical websites, mobile applications, and digital systems built around real business goals. Start Your Project Explore Our Services 45+ Projects Delivered 141 Clients Worldwide 12+ Specialized Team Members Our [&hellip;]","og_url":"https:\/\/dindex.net\/en\/about\/","og_site_name":"D-INDEX - Your Partner in Digital Transformation","article_modified_time":"2026-08-19T09:32:16+00:00","og_image":[{"width":75,"height":211,"url":"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/Ellipse-7.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dindex.net\/en\/about\/","url":"https:\/\/dindex.net\/en\/about\/","name":"About - D-INDEX - Your Partner in Digital Transformation","isPartOf":{"@id":"https:\/\/dindex.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/dindex.net\/en\/about\/#primaryimage"},"image":{"@id":"https:\/\/dindex.net\/en\/about\/#primaryimage"},"thumbnailUrl":"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/Ellipse-7.png","datePublished":"2025-02-14T08:44:52+00:00","dateModified":"2026-08-19T09:32:16+00:00","breadcrumb":{"@id":"https:\/\/dindex.net\/en\/about\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dindex.net\/en\/about\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dindex.net\/en\/about\/#primaryimage","url":"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/Ellipse-7.png","contentUrl":"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/Ellipse-7.png"},{"@type":"BreadcrumbList","@id":"https:\/\/dindex.net\/en\/about\/#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":"About"}]},{"@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\/148","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=148"}],"version-history":[{"count":27,"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/pages\/148\/revisions"}],"predecessor-version":[{"id":3934,"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/pages\/148\/revisions\/3934"}],"wp:attachment":[{"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/media?parent=148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}