{"id":407,"date":"2025-04-06T08:42:59","date_gmt":"2025-04-06T08:42:59","guid":{"rendered":"https:\/\/dindex.net\/?page_id=407"},"modified":"2026-08-20T09:10:58","modified_gmt":"2026-08-20T09:10:58","slug":"website-design-and-development","status":"publish","type":"page","link":"https:\/\/dindex.net\/en\/website-design-and-development\/","title":{"rendered":"Website Design and Development"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"407\" class=\"elementor elementor-407\" 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-dec0b2a e-con-full e-flex e-con e-parent\" data-id=\"dec0b2a\" 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-4e031e1 elementor-widget elementor-widget-html\" data-id=\"4e031e1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n\/* =========================================================\n   ELEMENTOR FULL WIDTH\n========================================================= *\/\n\n.elementor-widget-html:has(#dx-web-hero),\n.elementor-widget-html:has(#dx-web-hero) > .elementor-widget-container,\n.dx-web-hero-widget-fullwidth,\n.dx-web-hero-widget-fullwidth > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n\/* =========================================================\n   RESET\n========================================================= *\/\n\n#dx-web-hero,\n#dx-web-hero *,\n#dx-web-hero *::before,\n#dx-web-hero *::after {\n    box-sizing: border-box;\n}\n\n#dx-web-hero {\n    --dx-web-dark: #09001f;\n    --dx-web-dark-secondary: #16053c;\n    --dx-web-purple: #6942d8;\n    --dx-web-purple-light: #9168ef;\n    --dx-web-yellow: #ffc441;\n    --dx-web-yellow-light: #ffd66e;\n    --dx-web-white: #ffffff;\n    --dx-web-text: rgba(255, 255, 255, 0.76);\n    --dx-web-muted: rgba(255, 255, 255, 0.56);\n    --dx-web-border: rgba(255, 255, 255, 0.13);\n    --dx-web-green: #54d696;\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-web-white);\n\n    background:\n        radial-gradient(\n            circle at 12% 15%,\n            rgba(145, 104, 239, 0.25),\n            transparent 29%\n        ),\n        radial-gradient(\n            circle at 88% 82%,\n            rgba(105, 66, 216, 0.21),\n            transparent 31%\n        ),\n        linear-gradient(\n            145deg,\n            var(--dx-web-dark-secondary),\n            var(--dx-web-dark)\n        );\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-web-hero a {\n    color: inherit;\n    text-decoration: none;\n}\n\n#dx-web-hero img {\n    display: block;\n    max-width: 100%;\n}\n\n\/* =========================================================\n   BACKGROUND\n========================================================= *\/\n\n#dx-web-hero .dx-web-hero-grid-bg {\n    position: absolute;\n    z-index: -6;\n\n    inset: 0;\n\n    opacity: 0.11;\n\n    background-image:\n        linear-gradient(\n            rgba(255, 255, 255, 0.045) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(255, 255, 255, 0.045) 1px,\n            transparent 1px\n        );\n\n    background-size: 72px 72px;\n\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 16%,\n            transparent 84%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 16%,\n            transparent 84%\n        );\n\n    pointer-events: none;\n}\n\n#dx-web-hero .dx-web-hero-light {\n    position: absolute;\n    z-index: -5;\n\n    border-radius: 50%;\n    filter: blur(95px);\n\n    pointer-events: none;\n}\n\n#dx-web-hero .dx-web-hero-light-one {\n    top: 10%;\n    right: 38%;\n\n    width: 340px;\n    height: 340px;\n\n    background: rgba(105, 66, 216, 0.18);\n}\n\n#dx-web-hero .dx-web-hero-light-two {\n    left: -90px;\n    bottom: -150px;\n\n    width: 440px;\n    height: 350px;\n\n    background: rgba(255, 196, 65, 0.065);\n}\n\n\/* =========================================================\n   LAYOUT\n========================================================= *\/\n\n#dx-web-hero .dx-web-hero-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        88px\n        clamp(22px, 5vw, 90px)\n        92px;\n}\n\n#dx-web-hero .dx-web-hero-container {\n    width: min(1450px, 100%);\n    min-height: 610px;\n\n    margin: 0 auto;\n\n    display: grid;\n    grid-template-columns:\n        minmax(0, 0.94fr)\n        minmax(480px, 1.06fr);\n\n    align-items: center;\n\n    gap: clamp(55px, 7vw, 110px);\n}\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n#dx-web-hero .dx-web-hero-content {\n    position: relative;\n    z-index: 4;\n\n    min-width: 0;\n}\n\n#dx-web-hero .dx-web-hero-eyebrow {\n    display: inline-flex;\n    align-items: center;\n\n    gap: 10px;\n\n    margin-bottom: 15px;\n\n    color: var(--dx-web-yellow);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-web-hero .dx-web-hero-eyebrow::before {\n    content: \"\";\n\n    width: 40px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-web-yellow),\n            var(--dx-web-purple-light)\n        );\n}\n\n#dx-web-hero .dx-web-hero-title {\n    max-width: 720px;\n\n    margin: 0;\n\n    color: var(--dx-web-white);\n\n    font-size: clamp(38px, 4.2vw, 62px);\n    font-weight: 900;\n    line-height: 1.35;\n    letter-spacing: -0.7px;\n\n    text-wrap: balance;\n}\n\n#dx-web-hero .dx-web-hero-title span {\n    color: var(--dx-web-yellow);\n}\n\n#dx-web-hero .dx-web-hero-description {\n    max-width: 700px;\n\n    margin:\n        20px\n        0\n        0;\n\n    color: var(--dx-web-text);\n\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 2.05;\n\n    text-wrap: pretty;\n}\n\n#dx-web-hero .dx-web-hero-description strong {\n    color: var(--dx-web-white);\n    font-weight: 800;\n}\n\n\/* =========================================================\n   ACTIONS\n========================================================= *\/\n\n#dx-web-hero .dx-web-hero-actions {\n    margin-top: 31px;\n\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    gap: 12px;\n}\n\n#dx-web-hero .dx-web-hero-button {\n    min-width: 205px;\n    min-height: 54px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 9px;\n\n    padding:\n        0\n        24px;\n\n    border: 1px solid transparent;\n    border-radius: 12px;\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1;\n    white-space: nowrap;\n\n    transition:\n        transform 0.25s ease,\n        border-color 0.25s ease,\n        background 0.25s ease,\n        color 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-web-hero .dx-web-hero-button-primary {\n    color: #190c34;\n\n    border-color: rgba(255, 255, 255, 0.15);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-web-yellow),\n            var(--dx-web-yellow-light)\n        );\n\n    box-shadow:\n        0 17px 37px rgba(255, 196, 65, 0.22);\n}\n\n#dx-web-hero .dx-web-hero-button-secondary {\n    color: var(--dx-web-white);\n\n    border-color: rgba(255, 255, 255, 0.17);\n\n    background: rgba(255, 255, 255, 0.065);\n\n    box-shadow:\n        0 12px 28px rgba(2, 0, 20, 0.18);\n\n    -webkit-backdrop-filter: blur(10px);\n    backdrop-filter: blur(10px);\n}\n\n#dx-web-hero .dx-web-hero-button:hover,\n#dx-web-hero .dx-web-hero-button:focus-visible {\n    transform: translateY(-3px);\n}\n\n#dx-web-hero .dx-web-hero-button-primary:hover,\n#dx-web-hero .dx-web-hero-button-primary:focus-visible {\n    box-shadow:\n        0 23px 46px rgba(255, 196, 65, 0.31);\n}\n\n#dx-web-hero .dx-web-hero-button-secondary:hover,\n#dx-web-hero .dx-web-hero-button-secondary:focus-visible {\n    border-color: rgba(145, 104, 239, 0.55);\n\n    background: rgba(105, 66, 216, 0.18);\n\n    box-shadow:\n        0 18px 38px rgba(2, 0, 20, 0.28);\n}\n\n#dx-web-hero .dx-web-hero-button svg {\n    width: 18px;\n    height: 18px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   FEATURES\n========================================================= *\/\n\n#dx-web-hero .dx-web-hero-features {\n    margin-top: 27px;\n\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    gap:\n        11px\n        22px;\n}\n\n#dx-web-hero .dx-web-hero-feature {\n    display: inline-flex;\n    align-items: center;\n\n    gap: 8px;\n\n    color: var(--dx-web-muted);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.6;\n}\n\n#dx-web-hero .dx-web-hero-feature-icon {\n    width: 21px;\n    height: 21px;\n    flex: 0 0 21px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 7px;\n\n    color: #16845a;\n\n    background: rgba(84, 214, 150, 0.14);\n}\n\n#dx-web-hero .dx-web-hero-feature-icon svg {\n    width: 11px;\n    height: 11px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2.3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   VISUAL\n========================================================= *\/\n\n#dx-web-hero .dx-web-hero-visual {\n    position: relative;\n\n    min-width: 0;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n\/* =========================================================\n   BROWSER FRAME\n========================================================= *\/\n\n#dx-web-hero .dx-web-browser {\n    position: relative;\n    isolation: isolate;\n\n    width: min(100%, 690px);\n\n    overflow: hidden;\n\n    border: 1px solid rgba(255, 255, 255, 0.19);\n    border-radius: 25px;\n\n    background: #f8f6fc;\n\n    box-shadow:\n        0 42px 90px rgba(2, 0, 20, 0.48),\n        inset 0 1px 0 rgba(255, 255, 255, 0.95);\n\n    transform:\n        perspective(1300px)\n        rotateY(-4deg)\n        rotateX(1deg);\n\n    transition:\n        transform 0.45s ease,\n        box-shadow 0.45s ease;\n}\n\n#dx-web-hero .dx-web-browser:hover {\n    box-shadow:\n        0 50px 105px rgba(2, 0, 20, 0.58),\n        inset 0 1px 0 rgba(255, 255, 255, 0.98);\n\n    transform:\n        perspective(1300px)\n        rotateY(0deg)\n        rotateX(0deg)\n        translateY(-5px);\n}\n\n\/* =========================================================\n   BROWSER TOP\n========================================================= *\/\n\n#dx-web-hero .dx-web-browser-top {\n    min-height: 48px;\n\n    display: grid;\n    grid-template-columns:\n        auto\n        minmax(0, 1fr)\n        auto;\n\n    align-items: center;\n\n    gap: 16px;\n\n    padding:\n        0\n        17px;\n\n    border-bottom: 1px solid rgba(105, 66, 216, 0.10);\n\n    background: #ffffff;\n}\n\n#dx-web-hero .dx-web-browser-dots {\n    display: flex;\n    align-items: center;\n\n    gap: 6px;\n}\n\n#dx-web-hero .dx-web-browser-dot {\n    width: 8px;\n    height: 8px;\n\n    border-radius: 50%;\n\n    background: rgba(105, 66, 216, 0.30);\n}\n\n#dx-web-hero .dx-web-browser-dot:nth-child(2) {\n    background: rgba(255, 196, 65, 0.88);\n}\n\n#dx-web-hero .dx-web-browser-dot:nth-child(3) {\n    background: rgba(84, 214, 150, 0.85);\n}\n\n#dx-web-hero .dx-web-browser-address {\n    width: min(270px, 100%);\n    height: 25px;\n\n    justify-self: center;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    padding:\n        0\n        14px;\n\n    overflow: hidden;\n\n    border-radius: 8px;\n\n    color: rgba(24, 11, 53, 0.48);\n\n    background: #f4f1f8;\n\n    font-size: 14px;\n    font-weight: 700;\n    white-space: nowrap;\n}\n\n#dx-web-hero .dx-web-browser-menu {\n    display: flex;\n    align-items: center;\n\n    gap: 4px;\n}\n\n#dx-web-hero .dx-web-browser-menu span {\n    width: 4px;\n    height: 4px;\n\n    border-radius: 50%;\n\n    background: rgba(24, 11, 53, 0.28);\n}\n\n\/* =========================================================\n   BROWSER IMAGE\n========================================================= *\/\n\n#dx-web-hero .dx-web-browser-screen {\n    position: relative;\n\n    min-height: 410px;\n\n    overflow: hidden;\n\n    background:\n        linear-gradient(\n            145deg,\n            #f7f4fc,\n            #ffffff\n        );\n}\n\n#dx-web-hero .dx-web-browser-image {\n    width: 100%;\n    height: 410px;\n\n    object-fit: cover;\n    object-position: center;\n\n    opacity: 0.95;\n}\n\n#dx-web-hero .dx-web-browser-screen::after {\n    content: \"\";\n\n    position: absolute;\n\n    inset: 0;\n\n    background:\n        linear-gradient(\n            90deg,\n            rgba(9, 0, 31, 0.03),\n            transparent 45%\n        );\n\n    pointer-events: none;\n}\n\n\/* =========================================================\n   BROWSER BOTTOM BAR\n========================================================= *\/\n\n#dx-web-hero .dx-web-browser-bottom {\n    min-height: 73px;\n\n    display: grid;\n    grid-template-columns:\n        repeat(3, minmax(0, 1fr));\n\n    align-items: center;\n\n    padding:\n        13px\n        16px;\n\n    border-top: 1px solid rgba(105, 66, 216, 0.10);\n\n    background: #ffffff;\n}\n\n#dx-web-hero .dx-web-browser-feature {\n    min-width: 0;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 8px;\n\n    padding:\n        0\n        12px;\n\n    color: #554b62;\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.5;\n    white-space: nowrap;\n}\n\n#dx-web-hero .dx-web-browser-feature + .dx-web-browser-feature {\n    border-right: 1px solid rgba(105, 66, 216, 0.10);\n}\n\n#dx-web-hero .dx-web-browser-feature-icon {\n    width: 29px;\n    height: 29px;\n    flex: 0 0 29px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 9px;\n\n    color: var(--dx-web-purple);\n\n    background: rgba(105, 66, 216, 0.09);\n}\n\n#dx-web-hero\n    .dx-web-browser-feature:nth-child(2)\n    .dx-web-browser-feature-icon {\n    color: #9b6c00;\n\n    background: rgba(255, 196, 65, 0.18);\n}\n\n#dx-web-hero\n    .dx-web-browser-feature:nth-child(3)\n    .dx-web-browser-feature-icon {\n    color: #16845a;\n\n    background: rgba(84, 214, 150, 0.15);\n}\n\n#dx-web-hero .dx-web-browser-feature-icon svg {\n    width: 15px;\n    height: 15px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.9;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   DECORATIVE FRAME\n========================================================= *\/\n\n#dx-web-hero .dx-web-visual-frame {\n    position: absolute;\n    z-index: -1;\n\n    inset: -23px;\n\n    border: 1px solid rgba(145, 104, 239, 0.20);\n    border-radius: 34px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(145, 104, 239, 0.055),\n            rgba(255, 255, 255, 0.015)\n        );\n\n    pointer-events: none;\n}\n\n#dx-web-hero .dx-web-visual-frame::before,\n#dx-web-hero .dx-web-visual-frame::after {\n    content: \"\";\n\n    position: absolute;\n\n    width: 67px;\n    height: 67px;\n\n    border-color: var(--dx-web-yellow);\n    border-style: solid;\n\n    opacity: 0.7;\n}\n\n#dx-web-hero .dx-web-visual-frame::before {\n    top: -1px;\n    right: -1px;\n\n    border-width: 2px 2px 0 0;\n    border-radius: 0 19px 0 0;\n}\n\n#dx-web-hero .dx-web-visual-frame::after {\n    left: -1px;\n    bottom: -1px;\n\n    border-width: 0 0 2px 2px;\n    border-radius: 0 0 0 19px;\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1100px) {\n    #dx-web-hero .dx-web-hero-container {\n        grid-template-columns:\n            minmax(0, 0.92fr)\n            minmax(420px, 1.08fr);\n\n        gap: 50px;\n    }\n\n    #dx-web-hero .dx-web-hero-title {\n        font-size: clamp(36px, 4.5vw, 54px);\n    }\n\n    #dx-web-hero .dx-web-browser-screen,\n    #dx-web-hero .dx-web-browser-image {\n        height: 360px;\n        min-height: 360px;\n    }\n}\n\n@media (max-width: 850px) {\n    #dx-web-hero .dx-web-hero-main {\n        padding:\n            76px\n            28px\n            82px;\n    }\n\n    #dx-web-hero .dx-web-hero-container {\n        min-height: 0;\n\n        grid-template-columns: 1fr;\n\n        gap: 55px;\n    }\n\n    #dx-web-hero .dx-web-hero-content {\n        max-width: 760px;\n\n        margin: 0 auto;\n\n        text-align: center;\n    }\n\n    #dx-web-hero .dx-web-hero-eyebrow,\n    #dx-web-hero .dx-web-hero-actions,\n    #dx-web-hero .dx-web-hero-features {\n        justify-content: center;\n    }\n\n    #dx-web-hero .dx-web-hero-title,\n    #dx-web-hero .dx-web-hero-description {\n        margin-right: auto;\n        margin-left: auto;\n    }\n\n    #dx-web-hero .dx-web-hero-visual {\n        width: min(100%, 680px);\n\n        margin: 0 auto;\n    }\n\n    #dx-web-hero .dx-web-browser {\n        transform: none;\n    }\n\n    #dx-web-hero .dx-web-browser:hover {\n        transform: translateY(-4px);\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 600px) {\n    #dx-web-hero .dx-web-hero-main {\n        padding:\n            58px\n            16px\n            64px;\n    }\n\n    #dx-web-hero .dx-web-hero-container {\n        gap: 42px;\n    }\n\n    #dx-web-hero .dx-web-hero-eyebrow {\n        margin-bottom: 11px;\n\n        font-size: 14px;\n    }\n\n    #dx-web-hero .dx-web-hero-eyebrow::before {\n        width: 27px;\n    }\n\n    #dx-web-hero .dx-web-hero-title {\n        font-size: clamp(31px, 9vw, 40px);\n        line-height: 1.48;\n        letter-spacing: -0.3px;\n    }\n\n    #dx-web-hero .dx-web-hero-description {\n        margin-top: 14px;\n\n        font-size: 14px;\n        line-height: 2;\n    }\n\n    #dx-web-hero .dx-web-hero-actions {\n        margin-top: 24px;\n\n        display: grid;\n        grid-template-columns: 1fr;\n\n        gap: 9px;\n    }\n\n    #dx-web-hero .dx-web-hero-button {\n        width: 100%;\n        min-width: 0;\n        min-height: 50px;\n\n        font-size: 14px;\n    }\n\n    #dx-web-hero .dx-web-hero-features {\n        margin-top: 19px;\n\n        justify-content: center;\n\n        gap:\n            9px\n            14px;\n    }\n\n    #dx-web-hero .dx-web-hero-feature {\n        font-size: 14px;\n    }\n\n    #dx-web-hero .dx-web-visual-frame {\n        inset: -10px;\n\n        border-radius: 23px;\n    }\n\n    #dx-web-hero .dx-web-browser {\n        border-radius: 18px;\n    }\n\n    #dx-web-hero .dx-web-browser-top {\n        min-height: 41px;\n\n        grid-template-columns:\n            auto\n            minmax(0, 1fr);\n\n        gap: 10px;\n\n        padding:\n            0\n            11px;\n    }\n\n    #dx-web-hero .dx-web-browser-address {\n        height: 22px;\n\n        font-size: 14px;\n    }\n\n    #dx-web-hero .dx-web-browser-menu {\n        display: none;\n    }\n\n    #dx-web-hero .dx-web-browser-screen,\n    #dx-web-hero .dx-web-browser-image {\n        height: 245px;\n        min-height: 245px;\n    }\n\n    #dx-web-hero .dx-web-browser-bottom {\n        min-height: 0;\n\n        grid-template-columns: 1fr;\n\n        gap: 0;\n\n        padding:\n            7px\n            12px;\n    }\n\n    #dx-web-hero .dx-web-browser-feature {\n        min-height: 43px;\n\n        justify-content: flex-start;\n\n        padding:\n            6px\n            0;\n\n        font-size: 14px;\n    }\n\n    #dx-web-hero .dx-web-browser-feature + .dx-web-browser-feature {\n        border-top: 1px solid rgba(105, 66, 216, 0.09);\n        border-right: 0;\n    }\n\n    #dx-web-hero .dx-web-browser-feature-icon {\n        width: 27px;\n        height: 27px;\n        flex-basis: 27px;\n    }\n\n    #dx-web-hero .dx-web-hero-light {\n        display: none;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-web-hero a:focus-visible {\n    outline: 3px solid var(--dx-web-yellow);\n    outline-offset: 4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    #dx-web-hero *,\n    #dx-web-hero *::before,\n    #dx-web-hero *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n        scroll-behavior: auto !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-web-hero\"\n    aria-labelledby=\"dx-web-hero-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n    <div\n        class=\"dx-web-hero-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <span\n        class=\"dx-web-hero-light dx-web-hero-light-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-web-hero-light dx-web-hero-light-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-web-hero-main\">\n\n        <div class=\"dx-web-hero-container\">\n\n            <div class=\"dx-web-hero-content\">\n\n                <span class=\"dx-web-hero-eyebrow\">\n                    Digital Solutions Designed to Support Your Growth\n                <\/span>\n\n                <h1\n                    id=\"dx-web-hero-title\"\n                    class=\"dx-web-hero-title\"\n                >\n                    Website Design & Development\n                    <span>Built Around Your Goals<\/span>\n                <\/h1>\n\n                <p class=\"dx-web-hero-description\">\n                    We provide\n                    <strong>\n                        complete website design and development solutions\n                    <\/strong>\n                    that help your business stand out online. Whether\n                    you need a simple corporate website or a more advanced\n                    digital platform, we combine thoughtful design with\n                    modern technologies to create a smooth, professional,\n                    and engaging user experience.\n                <\/p>\n\n                <div class=\"dx-web-hero-actions\">\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/contact\/\"\n                        class=\"dx-web-hero-button dx-web-hero-button-primary\"\n                    >\n                        <span>Get a Free Consultation<\/span>\n\n                        <svg\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n                    <\/a>\n\n                    <a\n                        href=\"#dx-web-audience\"\n                        class=\"dx-web-hero-button dx-web-hero-button-secondary\"\n                    >\n                        <span>Explore the Right Solution<\/span>\n\n                        <svg\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <path d=\"M12 5v14\"><\/path>\n                            <path d=\"m18 13-6 6-6-6\"><\/path>\n                        <\/svg>\n                    <\/a>\n\n                <\/div>\n\n                <div\n                    class=\"dx-web-hero-features\"\n                    aria-label=\"Website development service features\"\n                >\n\n                    <span class=\"dx-web-hero-feature\">\n\n                        <span\n                            class=\"dx-web-hero-feature-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"m5 12 4 4L19 6\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        Responsive Design\n\n                    <\/span>\n\n                    <span class=\"dx-web-hero-feature\">\n\n                        <span\n                            class=\"dx-web-hero-feature-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"m5 12 4 4L19 6\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        SEO-Friendly Structure\n\n                    <\/span>\n\n                    <span class=\"dx-web-hero-feature\">\n\n                        <span\n                            class=\"dx-web-hero-feature-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"m5 12 4 4L19 6\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        Easy Content Management\n\n                    <\/span>\n\n                <\/div>\n\n            <\/div>\n\n            <div class=\"dx-web-hero-visual\">\n\n                <div\n                    class=\"dx-web-visual-frame\"\n                    aria-hidden=\"true\"\n                ><\/div>\n\n                <div class=\"dx-web-browser\">\n\n                    <div class=\"dx-web-browser-top\">\n\n                        <span\n                            class=\"dx-web-browser-dots\"\n                            aria-hidden=\"true\"\n                        >\n                            <span class=\"dx-web-browser-dot\"><\/span>\n                            <span class=\"dx-web-browser-dot\"><\/span>\n                            <span class=\"dx-web-browser-dot\"><\/span>\n                        <\/span>\n\n                        <span class=\"dx-web-browser-address\">\n                            Professional Responsive Website\n                        <\/span>\n\n                        <span\n                            class=\"dx-web-browser-menu\"\n                            aria-hidden=\"true\"\n                        >\n                            <span><\/span>\n                            <span><\/span>\n                            <span><\/span>\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"dx-web-browser-screen\">\n\n                        <img fetchpriority=\"high\"\n                            src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/06\/website-development-service-1024x683.jpg\"\n                            alt=\"Professional website design and development\"\n                            class=\"dx-web-browser-image\"\n                            width=\"1024\"\n                            height=\"683\"\n                            decoding=\"async\"\n                            fetchpriority=\"high\"\n                        >\n\n                    <\/div>\n\n                    <div class=\"dx-web-browser-bottom\">\n\n                        <div class=\"dx-web-browser-feature\">\n\n                            <span\n                                class=\"dx-web-browser-feature-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <rect\n                                        x=\"3\"\n                                        y=\"4\"\n                                        width=\"18\"\n                                        height=\"16\"\n                                        rx=\"2\"\n                                    ><\/rect>\n                                    <path d=\"M3 9h18\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span>Modern Interface<\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-web-browser-feature\">\n\n                            <span\n                                class=\"dx-web-browser-feature-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M4 19V5\"><\/path>\n                                    <path d=\"M4 19h16\"><\/path>\n                                    <path d=\"m7 15 4-4 3 3 5-6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span>Optimized Performance<\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-web-browser-feature\">\n\n                            <span\n                                class=\"dx-web-browser-feature-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path>\n                                    <path d=\"m9 12 2 2 4-4\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span>Secure Development<\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxWebHero() {\n        const section = document.getElementById(\n            \"dx-web-hero\"\n        );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized = \"true\";\n\n        const widget = section.closest(\n            \".elementor-widget-html\"\n        );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-web-hero-widget-fullwidth\"\n            );\n        }\n\n        const anchorLink = section.querySelector(\n            'a[href=\"#dx-web-audience\"]'\n        );\n\n        if (anchorLink) {\n            anchorLink.addEventListener(\n                \"click\",\n                function (event) {\n                    const target = document.getElementById(\n                        \"dx-web-audience\"\n                    );\n\n                    if (!target) {\n                        return;\n                    }\n\n                    event.preventDefault();\n\n                    target.scrollIntoView({\n                        behavior: window.matchMedia(\n                            \"(prefers-reduced-motion: reduce)\"\n                        ).matches\n                            ? \"auto\"\n                            : \"smooth\",\n                        block: \"start\"\n                    });\n                }\n            );\n        }\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxWebHero\n        );\n    } else {\n        initDxWebHero();\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2ca899b e-con-full e-flex e-con e-parent\" data-id=\"2ca899b\" 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-71d45b2 elementor-widget elementor-widget-html\" data-id=\"71d45b2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n\/* =========================================================\n   ELEMENTOR FULL WIDTH\n========================================================= *\/\n\n.elementor-widget-html:has(#dx-web-audience),\n.elementor-widget-html:has(#dx-web-audience) > .elementor-widget-container,\n.dx-web-audience-widget-fullwidth,\n.dx-web-audience-widget-fullwidth > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n\/* =========================================================\n   RESET & VARIABLES\n========================================================= *\/\n\n#dx-web-audience,\n#dx-web-audience *,\n#dx-web-audience *::before,\n#dx-web-audience *::after {\n    box-sizing: border-box;\n}\n\n#dx-web-audience {\n    --dx-audience-bg: #f7f5fb;\n    --dx-audience-white: #ffffff;\n    --dx-audience-dark: #180b35;\n    --dx-audience-text: #6d6478;\n    --dx-audience-muted: #958d9f;\n    --dx-audience-purple: #6942d8;\n    --dx-audience-purple-light: #9168ef;\n    --dx-audience-yellow: #ffc441;\n    --dx-audience-yellow-light: #ffd66e;\n    --dx-audience-green: #54d696;\n    --dx-audience-blue: #58a8f7;\n    --dx-audience-border: rgba(105, 66, 216, 0.13);\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n    direction: ltr;\n\n    color: var(--dx-audience-dark);\n\n    background:\n        radial-gradient(\n            circle at 8% 15%,\n            rgba(105, 66, 216, 0.08),\n            transparent 25%\n        ),\n        radial-gradient(\n            circle at 92% 86%,\n            rgba(145, 104, 239, 0.08),\n            transparent 25%\n        ),\n        var(--dx-audience-bg);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-web-audience a {\n    color: inherit;\n    text-decoration: none;\n}\n\n\/* =========================================================\n   BACKGROUND\n========================================================= *\/\n\n#dx-web-audience .dx-audience-grid-bg {\n    position: absolute;\n    z-index: -6;\n\n    inset: 0;\n\n    opacity: 0.15;\n\n    background-image:\n        linear-gradient(\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        );\n\n    background-size: 72px 72px;\n\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 18%,\n            transparent 82%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 18%,\n            transparent 82%\n        );\n\n    pointer-events: none;\n}\n\n#dx-web-audience .dx-audience-orbit {\n    position: absolute;\n    z-index: -5;\n\n    border: 1px solid rgba(105, 66, 216, 0.08);\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-web-audience .dx-audience-orbit-one {\n    top: -220px;\n    left: -190px;\n\n    width: 460px;\n    height: 460px;\n}\n\n#dx-web-audience .dx-audience-orbit-two {\n    right: -230px;\n    bottom: -270px;\n\n    width: 520px;\n    height: 520px;\n}\n\n\/* =========================================================\n   MAIN LAYOUT\n========================================================= *\/\n\n#dx-web-audience .dx-audience-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        92px\n        clamp(22px, 5vw, 90px)\n        98px;\n}\n\n#dx-web-audience .dx-audience-container {\n    width: min(1400px, 100%);\n    margin: 0 auto;\n}\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n#dx-web-audience .dx-audience-header {\n    max-width: 850px;\n\n    margin: 0 auto 48px;\n\n    text-align: center;\n}\n\n#dx-web-audience .dx-audience-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    margin-bottom: 11px;\n\n    color: var(--dx-audience-purple);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-web-audience .dx-audience-eyebrow::before,\n#dx-web-audience .dx-audience-eyebrow::after {\n    content: \"\";\n\n    width: 31px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-audience-yellow),\n            var(--dx-audience-purple-light)\n        );\n}\n\n#dx-web-audience .dx-audience-title {\n    margin: 0;\n\n    color: var(--dx-audience-dark);\n\n    font-size: clamp(32px, 3.5vw, 48px);\n    font-weight: 900;\n    line-height: 1.55;\n    letter-spacing: -0.45px;\n\n    text-wrap: balance;\n}\n\n#dx-web-audience .dx-audience-title span {\n    color: var(--dx-audience-purple);\n}\n\n#dx-web-audience .dx-audience-description {\n    max-width: 720px;\n\n    margin: 13px auto 0;\n\n    color: var(--dx-audience-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n\n    text-wrap: pretty;\n}\n\n\/* =========================================================\n   AUDIENCE LIST\n========================================================= *\/\n\n#dx-web-audience .dx-audience-list {\n    overflow: hidden;\n\n    border: 1px solid var(--dx-audience-border);\n    border-radius: 26px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.98),\n            rgba(250, 248, 254, 0.96)\n        );\n\n    box-shadow:\n        0 25px 65px rgba(40, 18, 84, 0.10),\n        inset 0 1px 0 rgba(255, 255, 255, 0.98);\n}\n\n\/* =========================================================\n   AUDIENCE ROW\n========================================================= *\/\n\n#dx-web-audience .dx-audience-item {\n    position: relative;\n    isolation: isolate;\n\n    min-height: 175px;\n\n    display: grid;\n    grid-template-columns:\n        82px\n        minmax(220px, 0.75fr)\n        minmax(0, 1.25fr)\n        46px;\n\n    align-items: center;\n\n    gap: clamp(22px, 3vw, 45px);\n\n    padding:\n        28px\n        clamp(24px, 4vw, 52px);\n\n    overflow: hidden;\n\n    transition:\n        background 0.3s ease,\n        transform 0.3s ease;\n}\n\n#dx-web-audience .dx-audience-item + .dx-audience-item {\n    border-top: 1px solid rgba(105, 66, 216, 0.10);\n}\n\n#dx-web-audience .dx-audience-item:hover,\n#dx-web-audience .dx-audience-item:focus-within {\n    background:\n        linear-gradient(\n            90deg,\n            rgba(105, 66, 216, 0.065),\n            rgba(255, 255, 255, 0.45)\n        );\n}\n\n#dx-web-audience .dx-audience-item::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    top: 50%;\n    left: -100px;\n\n    width: 260px;\n    height: 260px;\n\n    border-radius: 50%;\n\n    background: rgba(105, 66, 216, 0.08);\n\n    filter: blur(70px);\n\n    opacity: 0;\n\n    transform: translateY(-50%);\n\n    transition: opacity 0.35s ease;\n\n    pointer-events: none;\n}\n\n#dx-web-audience .dx-audience-item:hover::before,\n#dx-web-audience .dx-audience-item:focus-within::before {\n    opacity: 1;\n}\n\n\/* =========================================================\n   ICON\n========================================================= *\/\n\n#dx-web-audience .dx-audience-icon {\n    width: 72px;\n    height: 72px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid rgba(105, 66, 216, 0.15);\n    border-radius: 22px;\n\n    color: #ffffff;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-audience-purple),\n            var(--dx-audience-purple-light)\n        );\n\n    box-shadow:\n        0 17px 36px rgba(105, 66, 216, 0.22);\n\n    transition:\n        transform 0.3s ease,\n        box-shadow 0.3s ease;\n}\n\n#dx-web-audience .dx-audience-item:nth-child(2)\n    .dx-audience-icon {\n    color: #26113f;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-audience-yellow),\n            var(--dx-audience-yellow-light)\n        );\n\n    box-shadow:\n        0 17px 36px rgba(255, 196, 65, 0.22);\n}\n\n#dx-web-audience .dx-audience-item:nth-child(3)\n    .dx-audience-icon {\n    color: #0b4f38;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-audience-green),\n            #8ae6b9\n        );\n\n    box-shadow:\n        0 17px 36px rgba(84, 214, 150, 0.21);\n}\n\n#dx-web-audience .dx-audience-item:nth-child(4)\n    .dx-audience-icon {\n    color: #ffffff;\n\n    background:\n        linear-gradient(\n            135deg,\n            #428fe0,\n            var(--dx-audience-blue)\n        );\n\n    box-shadow:\n        0 17px 36px rgba(88, 168, 247, 0.22);\n}\n\n#dx-web-audience .dx-audience-item:hover\n    .dx-audience-icon {\n    transform:\n        translateY(-4px)\n        rotate(-4deg);\n}\n\n#dx-web-audience .dx-audience-icon svg {\n    width: 35px;\n    height: 35px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.75;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   TITLE\n========================================================= *\/\n\n#dx-web-audience .dx-audience-item-heading {\n    min-width: 0;\n}\n\n#dx-web-audience .dx-audience-item-number {\n    display: block;\n\n    margin-bottom: 5px;\n\n    color: rgba(105, 66, 216, 0.34);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.5;\n}\n\n#dx-web-audience .dx-audience-item-title {\n    margin: 0;\n\n    color: var(--dx-audience-dark);\n\n    font-size: 21px;\n    font-weight: 900;\n    line-height: 1.65;\n\n    text-wrap: balance;\n}\n\n#dx-web-audience .dx-audience-item-subtitle {\n    display: block;\n\n    margin-top: 4px;\n\n    color: var(--dx-audience-purple);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.7;\n}\n\n\/* =========================================================\n   DESCRIPTION\n========================================================= *\/\n\n#dx-web-audience .dx-audience-item-content {\n    min-width: 0;\n}\n\n#dx-web-audience .dx-audience-item-description {\n    margin: 0;\n\n    color: var(--dx-audience-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.95;\n\n    text-wrap: pretty;\n}\n\n#dx-web-audience .dx-audience-tags {\n    margin-top: 13px;\n\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    gap: 7px;\n}\n\n#dx-web-audience .dx-audience-tag {\n    min-height: 27px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    padding:\n        0\n        10px;\n\n    border: 1px solid rgba(105, 66, 216, 0.11);\n    border-radius: 999px;\n\n    color: var(--dx-audience-muted);\n\n    background: rgba(105, 66, 216, 0.045);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1;\n}\n\n\/* =========================================================\n   ARROW\n========================================================= *\/\n\n#dx-web-audience .dx-audience-arrow {\n    width: 42px;\n    height: 42px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid rgba(105, 66, 216, 0.13);\n    border-radius: 13px;\n\n    color: var(--dx-audience-purple);\n\n    background: rgba(105, 66, 216, 0.065);\n\n    transition:\n        color 0.3s ease,\n        background 0.3s ease,\n        transform 0.3s ease;\n}\n\n#dx-web-audience .dx-audience-item:hover\n    .dx-audience-arrow {\n    color: #ffffff;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-audience-purple),\n            var(--dx-audience-purple-light)\n        );\n\n    transform: translateX(4px);\n}\n\n#dx-web-audience .dx-audience-arrow svg {\n    width: 18px;\n    height: 18px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   BOTTOM NOTE\n========================================================= *\/\n\n#dx-web-audience .dx-audience-bottom {\n    margin-top: 26px;\n\n    display: grid;\n    grid-template-columns:\n        minmax(0, 1fr)\n        auto;\n\n    align-items: center;\n\n    gap: 25px;\n\n    padding:\n        22px\n        25px;\n\n    border: 1px solid rgba(105, 66, 216, 0.13);\n    border-radius: 18px;\n\n    background: rgba(255, 255, 255, 0.70);\n\n    box-shadow:\n        0 16px 38px rgba(40, 18, 84, 0.07);\n}\n\n#dx-web-audience .dx-audience-bottom-copy {\n    min-width: 0;\n\n    display: flex;\n    align-items: center;\n\n    gap: 14px;\n}\n\n#dx-web-audience .dx-audience-bottom-icon {\n    width: 45px;\n    height: 45px;\n    flex: 0 0 45px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 14px;\n\n    color: var(--dx-audience-purple);\n\n    background: rgba(105, 66, 216, 0.09);\n}\n\n#dx-web-audience .dx-audience-bottom-icon svg {\n    width: 23px;\n    height: 23px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.9;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-web-audience .dx-audience-bottom-title {\n    margin: 0;\n\n    color: var(--dx-audience-dark);\n\n    font-size: 15px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-web-audience .dx-audience-bottom-text {\n    margin:\n        4px\n        0\n        0;\n\n    color: var(--dx-audience-text);\n\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1.8;\n}\n\n#dx-web-audience .dx-audience-button {\n    min-width: 210px;\n    min-height: 49px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 9px;\n\n    padding:\n        0\n        21px;\n\n    border: 1px solid rgba(105, 66, 216, 0.18);\n    border-radius: 12px;\n\n    color: #ffffff;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-audience-purple),\n            var(--dx-audience-purple-light)\n        );\n\n    box-shadow:\n        0 16px 34px rgba(105, 66, 216, 0.23);\n\n    font-size: 14px;\n    font-weight: 900;\n    white-space: nowrap;\n\n    transition:\n        transform 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-web-audience .dx-audience-button:hover,\n#dx-web-audience .dx-audience-button:focus-visible {\n    box-shadow:\n        0 22px 44px rgba(105, 66, 216, 0.31);\n\n    transform: translateY(-3px);\n}\n\n#dx-web-audience .dx-audience-button svg {\n    width: 17px;\n    height: 17px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 950px) {\n    #dx-web-audience .dx-audience-main {\n        padding:\n            76px\n            28px\n            82px;\n    }\n\n    #dx-web-audience .dx-audience-item {\n        grid-template-columns:\n            72px\n            minmax(190px, 0.8fr)\n            minmax(0, 1.2fr);\n\n        gap: 22px;\n    }\n\n    #dx-web-audience .dx-audience-arrow {\n        display: none;\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 650px) {\n    #dx-web-audience .dx-audience-main {\n        padding:\n            59px\n            16px\n            65px;\n    }\n\n    #dx-web-audience .dx-audience-header {\n        margin-bottom: 31px;\n    }\n\n    #dx-web-audience .dx-audience-eyebrow {\n        font-size: 14px;\n    }\n\n    #dx-web-audience .dx-audience-eyebrow::before,\n    #dx-web-audience .dx-audience-eyebrow::after {\n        width: 22px;\n    }\n\n    #dx-web-audience .dx-audience-title {\n        font-size: clamp(27px, 8.3vw, 36px);\n        line-height: 1.65;\n        letter-spacing: -0.2px;\n    }\n\n    #dx-web-audience .dx-audience-description {\n        margin-top: 10px;\n\n        font-size: 14px;\n        line-height: 2;\n    }\n\n    #dx-web-audience .dx-audience-list {\n        border-radius: 19px;\n    }\n\n    #dx-web-audience .dx-audience-item {\n        min-height: 0;\n\n        grid-template-columns:\n            56px\n            minmax(0, 1fr);\n\n        grid-template-areas:\n            \"icon heading\"\n            \"content content\";\n\n        align-items: start;\n\n        gap:\n            14px\n            13px;\n\n        padding:\n            20px\n            17px;\n    }\n\n    #dx-web-audience .dx-audience-icon {\n        grid-area: icon;\n\n        width: 56px;\n        height: 56px;\n\n        border-radius: 17px;\n    }\n\n    #dx-web-audience .dx-audience-icon svg {\n        width: 28px;\n        height: 28px;\n    }\n\n    #dx-web-audience .dx-audience-item-heading {\n        grid-area: heading;\n    }\n\n    #dx-web-audience .dx-audience-item-content {\n        grid-area: content;\n    }\n\n    #dx-web-audience .dx-audience-item-number {\n        font-size: 14px;\n    }\n\n    #dx-web-audience .dx-audience-item-title {\n        font-size: 18px;\n        line-height: 1.6;\n    }\n\n    #dx-web-audience .dx-audience-item-subtitle {\n        font-size: 14px;\n    }\n\n    #dx-web-audience .dx-audience-item-description {\n        font-size: 14px;\n        line-height: 1.9;\n    }\n\n    #dx-web-audience .dx-audience-tags {\n        margin-top: 11px;\n\n        gap: 6px;\n    }\n\n    #dx-web-audience .dx-audience-tag {\n        min-height: 25px;\n\n        padding-right: 8px;\n        padding-left: 8px;\n\n        font-size: 14px;\n    }\n\n    #dx-web-audience .dx-audience-bottom {\n        margin-top: 18px;\n\n        grid-template-columns: 1fr;\n\n        gap: 16px;\n\n        padding:\n            18px\n            15px;\n\n        border-radius: 16px;\n\n        text-align: center;\n    }\n\n    #dx-web-audience .dx-audience-bottom-copy {\n        flex-direction: column;\n\n        gap: 10px;\n    }\n\n    #dx-web-audience .dx-audience-bottom-title {\n        font-size: 14px;\n    }\n\n    #dx-web-audience .dx-audience-bottom-text {\n        font-size: 14px;\n    }\n\n    #dx-web-audience .dx-audience-button {\n        width: 100%;\n        min-width: 0;\n        min-height: 48px;\n\n        font-size: 14px;\n    }\n\n    #dx-web-audience .dx-audience-orbit {\n        display: none;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-web-audience a:focus-visible {\n    outline: 3px solid var(--dx-audience-yellow);\n    outline-offset: 4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    #dx-web-audience *,\n    #dx-web-audience *::before,\n    #dx-web-audience *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-web-audience\"\n    aria-labelledby=\"dx-web-audience-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n    <div\n        class=\"dx-audience-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <span\n        class=\"dx-audience-orbit dx-audience-orbit-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-audience-orbit dx-audience-orbit-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-audience-main\">\n\n        <div class=\"dx-audience-container\">\n\n            <header class=\"dx-audience-header\">\n\n                <span class=\"dx-audience-eyebrow\">\n                    Solutions for Different Business Stages and Goals\n                <\/span>\n\n                <h2\n                    id=\"dx-web-audience-title\"\n                    class=\"dx-audience-title\"\n                >\n                    Who Is Our\n                    <span>Website Design & Development Service For?<\/span>\n                <\/h2>\n\n                <p class=\"dx-audience-description\">\n                    We develop websites around the nature of your project\n                    and your target audience, from professional corporate\n                    websites to e-commerce stores and advanced digital\n                    platforms.\n                <\/p>\n\n            <\/header>\n\n            <div class=\"dx-audience-list\">\n\n                <article class=\"dx-audience-item\">\n\n                    <span\n                        class=\"dx-audience-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M3 21h18\"><\/path>\n                            <path d=\"M5 21V7l7-4 7 4v14\"><\/path>\n                            <path d=\"M9 9h2\"><\/path>\n                            <path d=\"M13 9h2\"><\/path>\n                            <path d=\"M9 13h2\"><\/path>\n                            <path d=\"M13 13h2\"><\/path>\n                            <path d=\"M10 21v-4h4v4\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <div class=\"dx-audience-item-heading\">\n\n                        <span class=\"dx-audience-item-number\">\n                            Solution 01\n                        <\/span>\n\n                        <h3 class=\"dx-audience-item-title\">\n                            Companies & Organizations\n                        <\/h3>\n\n                        <span class=\"dx-audience-item-subtitle\">\n                            A Digital Presence That Reflects Your Brand\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"dx-audience-item-content\">\n\n                        <p class=\"dx-audience-item-description\">\n                            Professional websites that present your services,\n                            projects, and expertise clearly, helping potential\n                            customers understand your business, find the\n                            information they need, and contact you easily.\n                        <\/p>\n\n                        <div class=\"dx-audience-tags\">\n\n                            <span class=\"dx-audience-tag\">\n                                Corporate Website\n                            <\/span>\n\n                            <span class=\"dx-audience-tag\">\n                                Service Presentation\n                            <\/span>\n\n                            <span class=\"dx-audience-tag\">\n                                Portfolio\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <span\n                        class=\"dx-audience-arrow\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                <\/article>\n\n                <article class=\"dx-audience-item\">\n\n                    <span\n                        class=\"dx-audience-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M4 19V5\"><\/path>\n                            <path d=\"M4 19h16\"><\/path>\n                            <path d=\"m7 15 4-4 3 3 5-6\"><\/path>\n                            <path d=\"M16 8h3v3\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <div class=\"dx-audience-item-heading\">\n\n                        <span class=\"dx-audience-item-number\">\n                            Solution 02\n                        <\/span>\n\n                        <h3 class=\"dx-audience-item-title\">\n                            Startups\n                        <\/h3>\n\n                        <span class=\"dx-audience-item-subtitle\">\n                            Faster Launch With Room to Scale\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"dx-audience-item-content\">\n\n                        <p class=\"dx-audience-item-description\">\n                            Websites and digital products that help startups\n                            present their idea clearly, test the market,\n                            capture customer enquiries, and expand as the\n                            business grows.\n                        <\/p>\n\n                        <div class=\"dx-audience-tags\">\n\n                            <span class=\"dx-audience-tag\">\n                                Landing Page\n                            <\/span>\n\n                            <span class=\"dx-audience-tag\">\n                                MVP\n                            <\/span>\n\n                            <span class=\"dx-audience-tag\">\n                                Digital Platform\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <span\n                        class=\"dx-audience-arrow\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                <\/article>\n\n                <article class=\"dx-audience-item\">\n\n                    <span\n                        class=\"dx-audience-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <circle cx=\"9\" cy=\"20\" r=\"1\"><\/circle>\n                            <circle cx=\"19\" cy=\"20\" r=\"1\"><\/circle>\n                            <path d=\"M3 4h2l2.4 10.4A2 2 0 0 0 9.35 16H18a2 2 0 0 0 2-1.6L21 8H6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <div class=\"dx-audience-item-heading\">\n\n                        <span class=\"dx-audience-item-number\">\n                            Solution 03\n                        <\/span>\n\n                        <h3 class=\"dx-audience-item-title\">\n                            E-Commerce Businesses\n                        <\/h3>\n\n                        <span class=\"dx-audience-item-subtitle\">\n                            A Smooth and Organized Shopping Experience\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"dx-audience-item-content\">\n\n                        <p class=\"dx-audience-item-description\">\n                            E-commerce websites for showcasing products,\n                            managing orders and customers, processing\n                            payments, and organizing shipping, with a\n                            responsive buying experience across devices.\n                        <\/p>\n\n                        <div class=\"dx-audience-tags\">\n\n                            <span class=\"dx-audience-tag\">\n                                Product Management\n                            <\/span>\n\n                            <span class=\"dx-audience-tag\">\n                                Online Payments\n                            <\/span>\n\n                            <span class=\"dx-audience-tag\">\n                                Orders & Shipping\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <span\n                        class=\"dx-audience-arrow\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                <\/article>\n\n                <article class=\"dx-audience-item\">\n\n                    <span\n                        class=\"dx-audience-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <rect\n                                x=\"3\"\n                                y=\"4\"\n                                width=\"18\"\n                                height=\"16\"\n                                rx=\"2\"\n                            ><\/rect>\n                            <path d=\"M3 9h18\"><\/path>\n                            <path d=\"M8 14h3\"><\/path>\n                            <path d=\"M8 17h7\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <div class=\"dx-audience-item-heading\">\n\n                        <span class=\"dx-audience-item-number\">\n                            Solution 04\n                        <\/span>\n\n                        <h3 class=\"dx-audience-item-title\">\n                            Digital Platforms & Online Services\n                        <\/h3>\n\n                        <span class=\"dx-audience-item-subtitle\">\n                            Advanced Functionality Built Around the Project\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"dx-audience-item-content\">\n\n                        <p class=\"dx-audience-item-description\">\n                            Advanced web platforms with user accounts,\n                            dashboards, permissions, forms, reports, and\n                            integrations with external systems and services.\n                        <\/p>\n\n                        <div class=\"dx-audience-tags\">\n\n                            <span class=\"dx-audience-tag\">\n                                User Accounts\n                            <\/span>\n\n                            <span class=\"dx-audience-tag\">\n                                Dashboards\n                            <\/span>\n\n                            <span class=\"dx-audience-tag\">\n                                Custom Integrations\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <span\n                        class=\"dx-audience-arrow\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                <\/article>\n\n            <\/div>\n\n            <div class=\"dx-audience-bottom\">\n\n                <div class=\"dx-audience-bottom-copy\">\n\n                    <span\n                        class=\"dx-audience-bottom-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M12 3v18\"><\/path>\n                            <path d=\"M3 12h18\"><\/path>\n                            <circle\n                                cx=\"12\"\n                                cy=\"12\"\n                                r=\"9\"\n                            ><\/circle>\n                        <\/svg>\n                    <\/span>\n\n                    <div>\n\n                        <h3 class=\"dx-audience-bottom-title\">\n                            You Don\u2019t Need to Know the Technical Solution Before Contacting Us\n                        <\/h3>\n\n                        <p class=\"dx-audience-bottom-text\">\n                            We review your project and help you determine\n                            the right type of website, required features,\n                            and suitable technologies for your goals.\n                        <\/p>\n\n                    <\/div>\n\n                <\/div>\n\n                <a\n                    href=\"https:\/\/dindex.net\/en\/contact\/\"\n                    class=\"dx-audience-button\"\n                >\n                    <span>Discuss Your Idea With Us<\/span>\n\n                    <svg\n                        viewBox=\"0 0 24 24\"\n                        aria-hidden=\"true\"\n                    >\n                        <path d=\"M5 12h14\"><\/path>\n                        <path d=\"m13 6 6 6-6 6\"><\/path>\n                    <\/svg>\n                <\/a>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxWebAudience() {\n        const section = document.getElementById(\n            \"dx-web-audience\"\n        );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized = \"true\";\n\n        const widget = section.closest(\n            \".elementor-widget-html\"\n        );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-web-audience-widget-fullwidth\"\n            );\n        }\n\n        if (!(\"IntersectionObserver\" in window)) {\n            return;\n        }\n\n        const items = section.querySelectorAll(\n            \".dx-audience-item\"\n        );\n\n        items.forEach(function (item, index) {\n            item.style.opacity = \"0\";\n            item.style.transform = \"translateY(22px)\";\n\n            item.style.transition =\n                \"opacity 0.55s ease \" +\n                index * 0.08 +\n                \"s, transform 0.55s ease \" +\n                index * 0.08 +\n                \"s, background 0.3s ease\";\n        });\n\n        const observer = new IntersectionObserver(\n            function (entries, currentObserver) {\n                entries.forEach(function (entry) {\n                    if (!entry.isIntersecting) {\n                        return;\n                    }\n\n                    entry.target.style.opacity = \"1\";\n                    entry.target.style.transform = \"translateY(0)\";\n\n                    currentObserver.unobserve(\n                        entry.target\n                    );\n                });\n            },\n            {\n                threshold: 0.12\n            }\n        );\n\n        items.forEach(function (item) {\n            observer.observe(item);\n        });\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxWebAudience\n        );\n    } else {\n        initDxWebAudience();\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6c61b1b e-con-full e-flex e-con e-parent\" data-id=\"6c61b1b\" 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-74511e2 elementor-widget elementor-widget-html\" data-id=\"74511e2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n\/* =========================================================\n   ELEMENTOR FULL WIDTH\n========================================================= *\/\n\n.elementor-widget-html:has(#dx-web-capabilities),\n.elementor-widget-html:has(#dx-web-capabilities) > .elementor-widget-container,\n.dx-web-capabilities-widget-fullwidth,\n.dx-web-capabilities-widget-fullwidth > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n\/* =========================================================\n   RESET & VARIABLES\n========================================================= *\/\n\n#dx-web-capabilities,\n#dx-web-capabilities *,\n#dx-web-capabilities *::before,\n#dx-web-capabilities *::after {\n    box-sizing: border-box;\n}\n\n#dx-web-capabilities {\n    --dx-cap-dark: #09001f;\n    --dx-cap-dark-light: #17063c;\n    --dx-cap-white: #ffffff;\n    --dx-cap-text: rgba(255, 255, 255, 0.75);\n    --dx-cap-muted: rgba(255, 255, 255, 0.52);\n    --dx-cap-purple: #6942d8;\n    --dx-cap-purple-light: #9168ef;\n    --dx-cap-yellow: #ffc441;\n    --dx-cap-yellow-light: #ffd66e;\n    --dx-cap-green: #54d696;\n    --dx-cap-blue: #58a8f7;\n    --dx-cap-border: rgba(255, 255, 255, 0.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    overflow: hidden;\n    direction: ltr;\n\n    color: var(--dx-cap-white);\n\n    background:\n        radial-gradient(\n            circle at 10% 15%,\n            rgba(145, 104, 239, 0.22),\n            transparent 29%\n        ),\n        radial-gradient(\n            circle at 90% 85%,\n            rgba(105, 66, 216, 0.22),\n            transparent 31%\n        ),\n        linear-gradient(\n            145deg,\n            var(--dx-cap-dark-light),\n            var(--dx-cap-dark)\n        );\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-web-capabilities a {\n    color: inherit;\n    text-decoration: none;\n}\n\n\/* =========================================================\n   BACKGROUND\n========================================================= *\/\n\n#dx-web-capabilities .dx-cap-grid-bg {\n    position: absolute;\n    z-index: -6;\n\n    inset: 0;\n\n    opacity: 0.1;\n\n    background-image:\n        linear-gradient(\n            rgba(255, 255, 255, 0.045) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(255, 255, 255, 0.045) 1px,\n            transparent 1px\n        );\n\n    background-size: 72px 72px;\n\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 16%,\n            transparent 82%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 16%,\n            transparent 82%\n        );\n\n    pointer-events: none;\n}\n\n#dx-web-capabilities .dx-cap-glow {\n    position: absolute;\n    z-index: -5;\n\n    border-radius: 50%;\n    filter: blur(95px);\n\n    pointer-events: none;\n}\n\n#dx-web-capabilities .dx-cap-glow-one {\n    top: 15%;\n    right: 36%;\n\n    width: 340px;\n    height: 340px;\n\n    background: rgba(105, 66, 216, 0.18);\n}\n\n#dx-web-capabilities .dx-cap-glow-two {\n    left: -100px;\n    bottom: -160px;\n\n    width: 430px;\n    height: 350px;\n\n    background: rgba(255, 196, 65, 0.06);\n}\n\n\/* =========================================================\n   MAIN LAYOUT\n========================================================= *\/\n\n#dx-web-capabilities .dx-cap-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        94px\n        clamp(22px, 5vw, 90px)\n        100px;\n}\n\n#dx-web-capabilities .dx-cap-container {\n    width: min(1400px, 100%);\n    margin: 0 auto;\n\n    display: grid;\n    grid-template-columns:\n        minmax(330px, 0.78fr)\n        minmax(0, 1.22fr);\n\n    align-items: start;\n\n    gap: clamp(50px, 7vw, 105px);\n}\n\n\/* =========================================================\n   INTRO\n========================================================= *\/\n\n#dx-web-capabilities .dx-cap-intro {\n    position: sticky;\n    top: 110px;\n\n    min-width: 0;\n}\n\n#dx-web-capabilities .dx-cap-eyebrow {\n    display: inline-flex;\n    align-items: center;\n\n    gap: 10px;\n\n    margin-bottom: 13px;\n\n    color: var(--dx-cap-yellow);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-web-capabilities .dx-cap-eyebrow::before {\n    content: \"\";\n\n    width: 38px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-cap-yellow),\n            var(--dx-cap-purple-light)\n        );\n}\n\n#dx-web-capabilities .dx-cap-title {\n    margin: 0;\n\n    color: var(--dx-cap-white);\n\n    font-size: clamp(34px, 3.8vw, 52px);\n    font-weight: 900;\n    line-height: 1.5;\n    letter-spacing: -0.5px;\n\n    text-wrap: balance;\n}\n\n#dx-web-capabilities .dx-cap-title span {\n    color: var(--dx-cap-yellow);\n}\n\n#dx-web-capabilities .dx-cap-description {\n    max-width: 540px;\n\n    margin: 17px 0 0;\n\n    color: var(--dx-cap-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n\n    text-wrap: pretty;\n}\n\n\/* =========================================================\n   INTRO FEATURES\n========================================================= *\/\n\n#dx-web-capabilities .dx-cap-intro-points {\n    margin-top: 27px;\n    padding-top: 23px;\n\n    display: grid;\n\n    gap: 12px;\n\n    border-top: 1px solid rgba(255, 255, 255, 0.12);\n}\n\n#dx-web-capabilities .dx-cap-intro-point {\n    display: flex;\n    align-items: center;\n\n    gap: 10px;\n\n    color: var(--dx-cap-muted);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.7;\n}\n\n#dx-web-capabilities .dx-cap-intro-point-icon {\n    width: 22px;\n    height: 22px;\n    flex: 0 0 22px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 7px;\n\n    color: #16845a;\n\n    background: rgba(84, 214, 150, 0.13);\n}\n\n#dx-web-capabilities .dx-cap-intro-point-icon svg {\n    width: 12px;\n    height: 12px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2.3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   SERVICES LIST\n========================================================= *\/\n\n#dx-web-capabilities .dx-cap-list {\n    min-width: 0;\n\n    border-top: 1px solid var(--dx-cap-border);\n}\n\n\/* =========================================================\n   SERVICE ITEM\n========================================================= *\/\n\n#dx-web-capabilities .dx-cap-item {\n    position: relative;\n    isolation: isolate;\n\n    min-height: 175px;\n\n    display: grid;\n    grid-template-columns:\n        74px\n        minmax(0, 1fr)\n        auto;\n\n    align-items: center;\n\n    gap: 24px;\n\n    padding:\n        29px\n        6px;\n\n    overflow: hidden;\n\n    border-bottom: 1px solid var(--dx-cap-border);\n\n    transition:\n        padding 0.32s ease,\n        background 0.32s ease;\n}\n\n#dx-web-capabilities .dx-cap-item:hover,\n#dx-web-capabilities .dx-cap-item:focus-within {\n    padding-right: 22px;\n    padding-left: 22px;\n\n    background:\n        linear-gradient(\n            90deg,\n            rgba(145, 104, 239, 0.13),\n            rgba(255, 255, 255, 0.025)\n        );\n}\n\n#dx-web-capabilities .dx-cap-item::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    top: 50%;\n    left: -130px;\n\n    width: 300px;\n    height: 300px;\n\n    border-radius: 50%;\n\n    background: rgba(105, 66, 216, 0.16);\n\n    filter: blur(80px);\n\n    opacity: 0;\n\n    transform: translateY(-50%);\n\n    transition: opacity 0.32s ease;\n\n    pointer-events: none;\n}\n\n#dx-web-capabilities .dx-cap-item:hover::before,\n#dx-web-capabilities .dx-cap-item:focus-within::before {\n    opacity: 1;\n}\n\n\/* =========================================================\n   ICON\n========================================================= *\/\n\n#dx-web-capabilities .dx-cap-icon {\n    width: 68px;\n    height: 68px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid rgba(255, 255, 255, 0.15);\n    border-radius: 21px;\n\n    color: #ffffff;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-cap-purple),\n            var(--dx-cap-purple-light)\n        );\n\n    box-shadow:\n        0 17px 36px rgba(105, 66, 216, 0.25);\n\n    transition:\n        transform 0.3s ease,\n        box-shadow 0.3s ease;\n}\n\n#dx-web-capabilities .dx-cap-item:nth-child(2)\n    .dx-cap-icon {\n    color: #26113f;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-cap-yellow),\n            var(--dx-cap-yellow-light)\n        );\n\n    box-shadow:\n        0 17px 36px rgba(255, 196, 65, 0.21);\n}\n\n#dx-web-capabilities .dx-cap-item:nth-child(3)\n    .dx-cap-icon {\n    color: #0b4f38;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-cap-green),\n            #8ae6b9\n        );\n\n    box-shadow:\n        0 17px 36px rgba(84, 214, 150, 0.20);\n}\n\n#dx-web-capabilities .dx-cap-item:nth-child(4)\n    .dx-cap-icon {\n    color: #ffffff;\n\n    background:\n        linear-gradient(\n            135deg,\n            #428fe0,\n            var(--dx-cap-blue)\n        );\n\n    box-shadow:\n        0 17px 36px rgba(88, 168, 247, 0.21);\n}\n\n#dx-web-capabilities .dx-cap-item:nth-child(5)\n    .dx-cap-icon {\n    color: #ffffff;\n\n    background:\n        linear-gradient(\n            135deg,\n            #8755e4,\n            #b49af6\n        );\n}\n\n#dx-web-capabilities .dx-cap-item:nth-child(6)\n    .dx-cap-icon {\n    color: #26113f;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-cap-yellow),\n            var(--dx-cap-yellow-light)\n        );\n\n    box-shadow:\n        0 17px 36px rgba(255, 196, 65, 0.21);\n}\n\n#dx-web-capabilities .dx-cap-item:hover\n    .dx-cap-icon {\n    transform:\n        translateY(-4px)\n        rotate(-4deg);\n}\n\n#dx-web-capabilities .dx-cap-icon svg {\n    width: 33px;\n    height: 33px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.75;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n#dx-web-capabilities .dx-cap-item-content {\n    min-width: 0;\n}\n\n#dx-web-capabilities .dx-cap-item-meta {\n    display: flex;\n    align-items: center;\n\n    gap: 10px;\n\n    margin-bottom: 5px;\n}\n\n#dx-web-capabilities .dx-cap-number {\n    color: var(--dx-cap-yellow);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.5;\n}\n\n#dx-web-capabilities .dx-cap-category {\n    color: var(--dx-cap-muted);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.5;\n}\n\n#dx-web-capabilities .dx-cap-item-title {\n    margin: 0;\n\n    color: var(--dx-cap-white);\n\n    font-size: 21px;\n    font-weight: 900;\n    line-height: 1.6;\n\n    text-wrap: balance;\n}\n\n#dx-web-capabilities .dx-cap-item-description {\n    max-width: 720px;\n\n    margin: 7px 0 0;\n\n    color: var(--dx-cap-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.95;\n\n    text-wrap: pretty;\n}\n\n\/* =========================================================\n   TAGS\n========================================================= *\/\n\n#dx-web-capabilities .dx-cap-tags {\n    margin-top: 12px;\n\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    gap: 7px;\n}\n\n#dx-web-capabilities .dx-cap-tag {\n    min-height: 26px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    padding:\n        0\n        10px;\n\n    border: 1px solid rgba(255, 255, 255, 0.11);\n    border-radius: 999px;\n\n    color: var(--dx-cap-muted);\n\n    background: rgba(255, 255, 255, 0.045);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1;\n}\n\n\/* =========================================================\n   INDICATOR\n========================================================= *\/\n\n#dx-web-capabilities .dx-cap-indicator {\n    width: 43px;\n    height: 43px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid rgba(255, 255, 255, 0.13);\n    border-radius: 13px;\n\n    color: var(--dx-cap-white);\n\n    background: rgba(255, 255, 255, 0.05);\n\n    transition:\n        color 0.3s ease,\n        background 0.3s ease,\n        transform 0.3s ease;\n}\n\n#dx-web-capabilities .dx-cap-item:hover\n    .dx-cap-indicator {\n    color: #180b35;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-cap-yellow),\n            var(--dx-cap-yellow-light)\n        );\n\n    transform: translateX(4px);\n}\n\n#dx-web-capabilities .dx-cap-indicator svg {\n    width: 18px;\n    height: 18px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   BOTTOM\n========================================================= *\/\n\n#dx-web-capabilities .dx-cap-bottom {\n    grid-column: 1 \/ -1;\n\n    margin-top: 34px;\n\n    display: grid;\n    grid-template-columns:\n        minmax(0, 1fr)\n        auto;\n\n    align-items: center;\n\n    gap: 25px;\n\n    padding:\n        22px\n        25px;\n\n    border: 1px solid rgba(255, 255, 255, 0.13);\n    border-radius: 18px;\n\n    background: rgba(255, 255, 255, 0.055);\n\n    box-shadow:\n        0 17px 40px rgba(2, 0, 20, 0.20);\n\n    -webkit-backdrop-filter: blur(10px);\n    backdrop-filter: blur(10px);\n}\n\n#dx-web-capabilities .dx-cap-bottom-copy {\n    min-width: 0;\n\n    display: flex;\n    align-items: center;\n\n    gap: 14px;\n}\n\n#dx-web-capabilities .dx-cap-bottom-icon {\n    width: 45px;\n    height: 45px;\n    flex: 0 0 45px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 14px;\n\n    color: var(--dx-cap-yellow);\n\n    background: rgba(255, 196, 65, 0.10);\n}\n\n#dx-web-capabilities .dx-cap-bottom-icon svg {\n    width: 23px;\n    height: 23px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.9;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-web-capabilities .dx-cap-bottom-title {\n    margin: 0;\n\n    color: var(--dx-cap-white);\n\n    font-size: 15px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-web-capabilities .dx-cap-bottom-text {\n    margin:\n        4px\n        0\n        0;\n\n    color: var(--dx-cap-muted);\n\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1.8;\n}\n\n#dx-web-capabilities .dx-cap-button {\n    min-width: 210px;\n    min-height: 49px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 9px;\n\n    padding:\n        0\n        21px;\n\n    border: 1px solid rgba(255, 255, 255, 0.18);\n    border-radius: 12px;\n\n    color: #180b35;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-cap-yellow),\n            var(--dx-cap-yellow-light)\n        );\n\n    box-shadow:\n        0 16px 34px rgba(255, 196, 65, 0.21);\n\n    font-size: 14px;\n    font-weight: 900;\n    white-space: nowrap;\n\n    transition:\n        transform 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-web-capabilities .dx-cap-button:hover,\n#dx-web-capabilities .dx-cap-button:focus-visible {\n    box-shadow:\n        0 22px 44px rgba(255, 196, 65, 0.30);\n\n    transform: translateY(-3px);\n}\n\n#dx-web-capabilities .dx-cap-button svg {\n    width: 17px;\n    height: 17px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 900px) {\n    #dx-web-capabilities .dx-cap-main {\n        padding:\n            76px\n            28px\n            82px;\n    }\n\n    #dx-web-capabilities .dx-cap-container {\n        grid-template-columns: 1fr;\n\n        gap: 45px;\n    }\n\n    #dx-web-capabilities .dx-cap-intro {\n        position: static;\n\n        max-width: 780px;\n\n        margin: 0 auto;\n\n        text-align: center;\n    }\n\n    #dx-web-capabilities .dx-cap-eyebrow {\n        justify-content: center;\n    }\n\n    #dx-web-capabilities .dx-cap-eyebrow::after {\n        content: \"\";\n\n        width: 38px;\n        height: 2px;\n\n        border-radius: 999px;\n\n        background:\n            linear-gradient(\n                90deg,\n                var(--dx-cap-yellow),\n                var(--dx-cap-purple-light)\n            );\n    }\n\n    #dx-web-capabilities .dx-cap-description {\n        margin-right: auto;\n        margin-left: auto;\n    }\n\n    #dx-web-capabilities .dx-cap-intro-points {\n        max-width: 600px;\n\n        margin-right: auto;\n        margin-left: auto;\n\n        justify-items: center;\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 600px) {\n    #dx-web-capabilities .dx-cap-main {\n        padding:\n            59px\n            16px\n            65px;\n    }\n\n    #dx-web-capabilities .dx-cap-container {\n        gap: 31px;\n    }\n\n    #dx-web-capabilities .dx-cap-eyebrow {\n        margin-bottom: 10px;\n\n        font-size: 14px;\n    }\n\n    #dx-web-capabilities .dx-cap-eyebrow::before,\n    #dx-web-capabilities .dx-cap-eyebrow::after {\n        width: 22px;\n    }\n\n    #dx-web-capabilities .dx-cap-title {\n        font-size: clamp(27px, 8.3vw, 36px);\n        line-height: 1.65;\n        letter-spacing: -0.2px;\n    }\n\n    #dx-web-capabilities .dx-cap-description {\n        margin-top: 10px;\n\n        font-size: 14px;\n        line-height: 2;\n    }\n\n    #dx-web-capabilities .dx-cap-intro-points {\n        margin-top: 20px;\n        padding-top: 18px;\n\n        gap: 9px;\n    }\n\n    #dx-web-capabilities .dx-cap-intro-point {\n        font-size: 14px;\n    }\n\n    #dx-web-capabilities .dx-cap-item {\n        min-height: 0;\n\n        grid-template-columns:\n            55px\n            minmax(0, 1fr);\n\n        grid-template-areas:\n            \"icon content\"\n            \"tags tags\";\n\n        align-items: start;\n\n        gap:\n            12px\n            13px;\n\n        padding:\n            21px\n            0;\n    }\n\n    #dx-web-capabilities .dx-cap-item:hover,\n    #dx-web-capabilities .dx-cap-item:focus-within {\n        padding-right: 12px;\n        padding-left: 12px;\n    }\n\n    #dx-web-capabilities .dx-cap-icon {\n        grid-area: icon;\n\n        width: 55px;\n        height: 55px;\n\n        border-radius: 17px;\n    }\n\n    #dx-web-capabilities .dx-cap-icon svg {\n        width: 28px;\n        height: 28px;\n    }\n\n    #dx-web-capabilities .dx-cap-item-content {\n        grid-area: content;\n    }\n\n    #dx-web-capabilities .dx-cap-item-meta {\n        margin-bottom: 3px;\n    }\n\n    #dx-web-capabilities .dx-cap-number,\n    #dx-web-capabilities .dx-cap-category {\n        font-size: 14px;\n    }\n\n    #dx-web-capabilities .dx-cap-item-title {\n        font-size: 17px;\n        line-height: 1.65;\n    }\n\n    #dx-web-capabilities .dx-cap-item-description {\n        margin-top: 5px;\n\n        font-size: 14px;\n        line-height: 1.9;\n    }\n\n    #dx-web-capabilities .dx-cap-tags {\n        grid-area: tags;\n\n        margin-top: 0;\n\n        gap: 6px;\n    }\n\n    #dx-web-capabilities .dx-cap-tag {\n        min-height: 24px;\n\n        padding-right: 8px;\n        padding-left: 8px;\n\n        font-size: 14px;\n    }\n\n    #dx-web-capabilities .dx-cap-indicator {\n        display: none;\n    }\n\n    #dx-web-capabilities .dx-cap-bottom {\n        margin-top: 20px;\n\n        grid-template-columns: 1fr;\n\n        gap: 16px;\n\n        padding:\n            18px\n            15px;\n\n        border-radius: 16px;\n\n        text-align: center;\n    }\n\n    #dx-web-capabilities .dx-cap-bottom-copy {\n        flex-direction: column;\n\n        gap: 10px;\n    }\n\n    #dx-web-capabilities .dx-cap-bottom-title {\n        font-size: 14px;\n    }\n\n    #dx-web-capabilities .dx-cap-bottom-text {\n        font-size: 14px;\n    }\n\n    #dx-web-capabilities .dx-cap-button {\n        width: 100%;\n        min-width: 0;\n        min-height: 48px;\n\n        font-size: 14px;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-web-capabilities a:focus-visible {\n    outline: 3px solid var(--dx-cap-yellow);\n    outline-offset: 4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    #dx-web-capabilities *,\n    #dx-web-capabilities *::before,\n    #dx-web-capabilities *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-web-capabilities\"\n    aria-labelledby=\"dx-web-capabilities-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n    <div\n        class=\"dx-cap-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <span\n        class=\"dx-cap-glow dx-cap-glow-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-cap-glow dx-cap-glow-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-cap-main\">\n\n        <div class=\"dx-cap-container\">\n\n            <div class=\"dx-cap-intro\">\n\n                <span class=\"dx-cap-eyebrow\">\n                    Complete Solutions for a Professional Website\n                <\/span>\n\n                <h2\n                    id=\"dx-web-capabilities-title\"\n                    class=\"dx-cap-title\"\n                >\n                    What We Provide in\n                    <span>Website Design & Development<\/span>\n                <\/h2>\n\n                <p class=\"dx-cap-description\">\n                    Our work goes beyond creating an attractive interface.\n                    We focus on technology, performance, user experience,\n                    content management, and ongoing support so you get\n                    a website that serves your business goals and can\n                    continue evolving as your needs grow.\n                <\/p>\n\n                <div class=\"dx-cap-intro-points\">\n\n                    <span class=\"dx-cap-intro-point\">\n\n                        <span\n                            class=\"dx-cap-intro-point-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"m5 12 4 4L19 6\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        Development Tailored to Your Project\n\n                    <\/span>\n\n                    <span class=\"dx-cap-intro-point\">\n\n                        <span\n                            class=\"dx-cap-intro-point-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"m5 12 4 4L19 6\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        Fully Responsive Across All Devices\n\n                    <\/span>\n\n                    <span class=\"dx-cap-intro-point\">\n\n                        <span\n                            class=\"dx-cap-intro-point-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"m5 12 4 4L19 6\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        Post-Launch Support & Follow-Up\n\n                    <\/span>\n\n                <\/div>\n\n            <\/div>\n\n            <div class=\"dx-cap-list\">\n\n                <article class=\"dx-cap-item\">\n\n                    <span\n                        class=\"dx-cap-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"m8 9-3 3 3 3\"><\/path>\n                            <path d=\"m16 9 3 3-3 3\"><\/path>\n                            <path d=\"m14 5-4 14\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <div class=\"dx-cap-item-content\">\n\n                        <div class=\"dx-cap-item-meta\">\n                            <span class=\"dx-cap-number\">01<\/span>\n                            <span class=\"dx-cap-category\">Development<\/span>\n                        <\/div>\n\n                        <h3 class=\"dx-cap-item-title\">\n                            Modern Technologies\n                        <\/h3>\n\n                        <p class=\"dx-cap-item-description\">\n                            We select the right technology for your project,\n                            whether WordPress or a custom development solution,\n                            with a structured, secure, scalable, and\n                            maintainable technical foundation.\n                        <\/p>\n\n                        <div class=\"dx-cap-tags\">\n                            <span class=\"dx-cap-tag\">WordPress<\/span>\n                            <span class=\"dx-cap-tag\">Custom Development<\/span>\n                            <span class=\"dx-cap-tag\">API Integrations<\/span>\n                        <\/div>\n\n                    <\/div>\n\n                    <span\n                        class=\"dx-cap-indicator\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                <\/article>\n\n                <article class=\"dx-cap-item\">\n\n                    <span\n                        class=\"dx-cap-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <rect\n                                x=\"3\"\n                                y=\"4\"\n                                width=\"18\"\n                                height=\"16\"\n                                rx=\"2\"\n                            ><\/rect>\n                            <path d=\"M3 9h18\"><\/path>\n                            <path d=\"M8 14h3\"><\/path>\n                            <path d=\"M8 17h7\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <div class=\"dx-cap-item-content\">\n\n                        <div class=\"dx-cap-item-meta\">\n                            <span class=\"dx-cap-number\">02<\/span>\n                            <span class=\"dx-cap-category\">Design<\/span>\n                        <\/div>\n\n                        <h3 class=\"dx-cap-item-title\">\n                            Responsive Design Across All Devices\n                        <\/h3>\n\n                        <p class=\"dx-cap-item-description\">\n                            Your website is designed to work efficiently\n                            across mobile, tablet, and desktop devices while\n                            maintaining clear content, intuitive navigation,\n                            and a consistent experience at different\n                            screen sizes.\n                        <\/p>\n\n                        <div class=\"dx-cap-tags\">\n                            <span class=\"dx-cap-tag\">Mobile<\/span>\n                            <span class=\"dx-cap-tag\">Tablet<\/span>\n                            <span class=\"dx-cap-tag\">Desktop<\/span>\n                        <\/div>\n\n                    <\/div>\n\n                    <span\n                        class=\"dx-cap-indicator\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                <\/article>\n\n                <article class=\"dx-cap-item\">\n\n                    <span\n                        class=\"dx-cap-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <circle cx=\"11\" cy=\"11\" r=\"7\"><\/circle>\n                            <path d=\"m20 20-4-4\"><\/path>\n                            <path d=\"M8 11h6\"><\/path>\n                            <path d=\"M11 8v6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <div class=\"dx-cap-item-content\">\n\n                        <div class=\"dx-cap-item-meta\">\n                            <span class=\"dx-cap-number\">03<\/span>\n                            <span class=\"dx-cap-category\">User Experience<\/span>\n                        <\/div>\n\n                        <h3 class=\"dx-cap-item-title\">\n                            UI & User Experience Optimization\n                        <\/h3>\n\n                        <p class=\"dx-cap-item-description\">\n                            We organize pages, content, and navigation paths\n                            to help visitors reach the information or services\n                            they need more easily and improve opportunities\n                            for enquiries and conversions.\n                        <\/p>\n\n                        <div class=\"dx-cap-tags\">\n                            <span class=\"dx-cap-tag\">UX<\/span>\n                            <span class=\"dx-cap-tag\">UI<\/span>\n                            <span class=\"dx-cap-tag\">Conversion Optimization<\/span>\n                        <\/div>\n\n                    <\/div>\n\n                    <span\n                        class=\"dx-cap-indicator\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                <\/article>\n\n                <article class=\"dx-cap-item\">\n\n                    <span\n                        class=\"dx-cap-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M4 19V5\"><\/path>\n                            <path d=\"M4 19h16\"><\/path>\n                            <path d=\"m7 15 4-4 3 3 5-6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <div class=\"dx-cap-item-content\">\n\n                        <div class=\"dx-cap-item-meta\">\n                            <span class=\"dx-cap-number\">04<\/span>\n                            <span class=\"dx-cap-category\">Management<\/span>\n                        <\/div>\n\n                        <h3 class=\"dx-cap-item-title\">\n                            Powerful and Easy-to-Use Admin Panel\n                        <\/h3>\n\n                        <p class=\"dx-cap-item-description\">\n                            We provide a management interface that allows\n                            your team to update pages, content, images,\n                            enquiries, and data without needing to contact\n                            a developer for every routine change.\n                        <\/p>\n\n                        <div class=\"dx-cap-tags\">\n                            <span class=\"dx-cap-tag\">Content Management<\/span>\n                            <span class=\"dx-cap-tag\">Permissions<\/span>\n                            <span class=\"dx-cap-tag\">Reports<\/span>\n                        <\/div>\n\n                    <\/div>\n\n                    <span\n                        class=\"dx-cap-indicator\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                <\/article>\n\n                <article class=\"dx-cap-item\">\n\n                    <span\n                        class=\"dx-cap-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M21 15a4 4 0 0 1-4 4H8l-5 3v-7a4 4 0 0 1-1-3 4 4 0 0 1 4-4h11a4 4 0 0 1 4 4z\"><\/path>\n                            <path d=\"M8 12h8\"><\/path>\n                            <path d=\"M8 15h5\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <div class=\"dx-cap-item-content\">\n\n                        <div class=\"dx-cap-item-meta\">\n                            <span class=\"dx-cap-number\">05<\/span>\n                            <span class=\"dx-cap-category\">Support<\/span>\n                        <\/div>\n\n                        <h3 class=\"dx-cap-item-title\">\n                            Technical Support & Follow-Up\n                        <\/h3>\n\n                        <p class=\"dx-cap-item-description\">\n                            We provide technical follow-up to help maintain\n                            website stability and resolve operational issues,\n                            while supporting your team with website\n                            administration and available features.\n                        <\/p>\n\n                        <div class=\"dx-cap-tags\">\n                            <span class=\"dx-cap-tag\">Technical Support<\/span>\n                            <span class=\"dx-cap-tag\">Operational Follow-Up<\/span>\n                            <span class=\"dx-cap-tag\">Admin Assistance<\/span>\n                        <\/div>\n\n                    <\/div>\n\n                    <span\n                        class=\"dx-cap-indicator\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                <\/article>\n\n                <article class=\"dx-cap-item\">\n\n                    <span\n                        class=\"dx-cap-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path>\n                            <path d=\"m9 12 2 2 4-4\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <div class=\"dx-cap-item-content\">\n\n                        <div class=\"dx-cap-item-meta\">\n                            <span class=\"dx-cap-number\">06<\/span>\n                            <span class=\"dx-cap-category\">Setup<\/span>\n                        <\/div>\n\n                        <h3 class=\"dx-cap-item-title\">\n                            Free Services for the First Year\n                        <\/h3>\n\n                        <p class=\"dx-cap-item-description\">\n                            Domain registration, hosting, and an SSL\n                            certificate are provided free of charge for\n                            the first year as part of the project, helping\n                            reduce the initial setup steps and costs.\n                        <\/p>\n\n                        <div class=\"dx-cap-tags\">\n                            <span class=\"dx-cap-tag\">Domain<\/span>\n                            <span class=\"dx-cap-tag\">Hosting<\/span>\n                            <span class=\"dx-cap-tag\">SSL<\/span>\n                        <\/div>\n\n                    <\/div>\n\n                    <span\n                        class=\"dx-cap-indicator\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                <\/article>\n\n            <\/div>\n\n            <div class=\"dx-cap-bottom\">\n\n                <div class=\"dx-cap-bottom-copy\">\n\n                    <span\n                        class=\"dx-cap-bottom-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M12 3v18\"><\/path>\n                            <path d=\"M3 12h18\"><\/path>\n                            <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\n                        <\/svg>\n                    <\/span>\n\n                    <div>\n\n                        <h3 class=\"dx-cap-bottom-title\">\n                            Technical Details Are Defined Around Your Project Requirements\n                        <\/h3>\n\n                        <p class=\"dx-cap-bottom-text\">\n                            We determine the right website type, technologies,\n                            features, and integrations based on your business\n                            objectives, management requirements, and future\n                            scalability needs.\n                        <\/p>\n\n                    <\/div>\n\n                <\/div>\n\n                <a\n                    href=\"https:\/\/dindex.net\/en\/contact\/\"\n                    class=\"dx-cap-button\"\n                >\n                    <span>Request a Free Consultation<\/span>\n\n                    <svg\n                        viewBox=\"0 0 24 24\"\n                        aria-hidden=\"true\"\n                    >\n                        <path d=\"M5 12h14\"><\/path>\n                        <path d=\"m13 6 6 6-6 6\"><\/path>\n                    <\/svg>\n                <\/a>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxWebCapabilities() {\n        const section = document.getElementById(\n            \"dx-web-capabilities\"\n        );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized = \"true\";\n\n        const widget = section.closest(\n            \".elementor-widget-html\"\n        );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-web-capabilities-widget-fullwidth\"\n            );\n        }\n\n        if (\n            !(\"IntersectionObserver\" in window) ||\n            window.matchMedia(\n                \"(prefers-reduced-motion: reduce)\"\n            ).matches\n        ) {\n            return;\n        }\n\n        const items = section.querySelectorAll(\n            \".dx-cap-item\"\n        );\n\n        items.forEach(function (item, index) {\n            item.style.opacity = \"0\";\n            item.style.transform = \"translateY(22px)\";\n\n            item.style.transition =\n                \"opacity 0.55s ease \" +\n                index * 0.07 +\n                \"s, transform 0.55s ease \" +\n                index * 0.07 +\n                \"s, padding 0.32s ease, background 0.32s ease\";\n        });\n\n        const observer = new IntersectionObserver(\n            function (entries, currentObserver) {\n                entries.forEach(function (entry) {\n                    if (!entry.isIntersecting) {\n                        return;\n                    }\n\n                    entry.target.style.opacity = \"1\";\n                    entry.target.style.transform = \"translateY(0)\";\n\n                    currentObserver.unobserve(\n                        entry.target\n                    );\n                });\n            },\n            {\n                threshold: 0.12\n            }\n        );\n\n        items.forEach(function (item) {\n            observer.observe(item);\n        });\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxWebCapabilities\n        );\n    } else {\n        initDxWebCapabilities();\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-94b8c48 e-con-full e-flex e-con e-parent\" data-id=\"94b8c48\" 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-632030c elementor-widget elementor-widget-html\" data-id=\"632030c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n\/* =========================================================\n   ELEMENTOR FULL WIDTH\n========================================================= *\/\n\n.elementor-widget-html:has(#dx-web-project-showcase),\n.elementor-widget-html:has(#dx-web-project-showcase)\n    > .elementor-widget-container,\n.dx-web-project-showcase-widget-fullwidth,\n.dx-web-project-showcase-widget-fullwidth\n    > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n\/* =========================================================\n   RESET & VARIABLES\n========================================================= *\/\n\n#dx-web-project-showcase,\n#dx-web-project-showcase *,\n#dx-web-project-showcase *::before,\n#dx-web-project-showcase *::after {\n    box-sizing: border-box;\n}\n\n#dx-web-project-showcase {\n    --dx-project-bg: #f7f5fb;\n    --dx-project-white: #ffffff;\n    --dx-project-dark: #180b35;\n    --dx-project-text: #6d6478;\n    --dx-project-muted: #958d9f;\n    --dx-project-purple: #6942d8;\n    --dx-project-purple-light: #9168ef;\n    --dx-project-yellow: #ffc441;\n    --dx-project-yellow-light: #ffd66e;\n    --dx-project-green: #54d696;\n    --dx-project-border: rgba(105, 66, 216, 0.13);\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n    direction: ltr;\n\n    color: var(--dx-project-dark);\n\n    background:\n        radial-gradient(\n            circle at 8% 12%,\n            rgba(105, 66, 216, 0.08),\n            transparent 25%\n        ),\n        radial-gradient(\n            circle at 92% 88%,\n            rgba(145, 104, 239, 0.08),\n            transparent 27%\n        ),\n        var(--dx-project-bg);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-web-project-showcase a {\n    color: inherit;\n    text-decoration: none;\n}\n\n#dx-web-project-showcase img {\n    display: block;\n    max-width: 100%;\n}\n\n\/* =========================================================\n   BACKGROUND\n========================================================= *\/\n\n#dx-web-project-showcase .dx-project-grid-bg {\n    position: absolute;\n    z-index: -5;\n\n    inset: 0;\n\n    opacity: 0.15;\n\n    background-image:\n        linear-gradient(\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        );\n\n    background-size: 72px 72px;\n\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 18%,\n            transparent 82%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 18%,\n            transparent 82%\n        );\n\n    pointer-events: none;\n}\n\n#dx-web-project-showcase .dx-project-orbit {\n    position: absolute;\n    z-index: -4;\n\n    border: 1px solid rgba(105, 66, 216, 0.08);\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-web-project-showcase .dx-project-orbit-one {\n    top: -220px;\n    left: -190px;\n\n    width: 460px;\n    height: 460px;\n}\n\n#dx-web-project-showcase .dx-project-orbit-two {\n    right: -240px;\n    bottom: -280px;\n\n    width: 530px;\n    height: 530px;\n}\n\n\/* =========================================================\n   MAIN LAYOUT\n========================================================= *\/\n\n#dx-web-project-showcase .dx-project-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        92px\n        clamp(22px, 5vw, 90px)\n        98px;\n}\n\n#dx-web-project-showcase .dx-project-container {\n    width: min(1450px, 100%);\n    margin: 0 auto;\n}\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n#dx-web-project-showcase .dx-project-header {\n    max-width: 850px;\n\n    margin: 0 auto 48px;\n\n    text-align: center;\n}\n\n#dx-web-project-showcase .dx-project-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    margin-bottom: 11px;\n\n    color: var(--dx-project-purple);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-web-project-showcase .dx-project-eyebrow::before,\n#dx-web-project-showcase .dx-project-eyebrow::after {\n    content: \"\";\n\n    width: 31px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-project-yellow),\n            var(--dx-project-purple-light)\n        );\n}\n\n#dx-web-project-showcase .dx-project-title {\n    margin: 0;\n\n    color: var(--dx-project-dark);\n\n    font-size: clamp(32px, 3.5vw, 49px);\n    font-weight: 900;\n    line-height: 1.55;\n    letter-spacing: -0.45px;\n\n    text-wrap: balance;\n}\n\n#dx-web-project-showcase .dx-project-title span {\n    color: var(--dx-project-purple);\n}\n\n#dx-web-project-showcase .dx-project-description {\n    max-width: 720px;\n\n    margin: 13px auto 0;\n\n    color: var(--dx-project-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n\n    text-wrap: pretty;\n}\n\n\/* =========================================================\n   PROJECTS GRID\n========================================================= *\/\n\n#dx-web-project-showcase .dx-project-grid {\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n\n    align-items: stretch;\n\n    gap: 22px;\n}\n\n\/* =========================================================\n   PROJECT CARD\n========================================================= *\/\n\n#dx-web-project-showcase .dx-project-card {\n    position: relative;\n    isolation: isolate;\n\n    min-width: 0;\n    height: 100%;\n\n    display: flex;\n    flex-direction: column;\n\n    overflow: hidden;\n\n    border: 1px solid var(--dx-project-border);\n    border-radius: 24px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 1),\n            rgba(250, 248, 254, 0.97)\n        );\n\n    box-shadow:\n        0 24px 62px rgba(40, 18, 84, 0.10),\n        inset 0 1px 0 rgba(255, 255, 255, 0.98);\n\n    transition:\n        transform 0.35s ease,\n        border-color 0.35s ease,\n        box-shadow 0.35s ease;\n}\n\n#dx-web-project-showcase .dx-project-card:hover,\n#dx-web-project-showcase .dx-project-card:focus-within {\n    border-color: rgba(105, 66, 216, 0.34);\n\n    box-shadow:\n        0 34px 78px rgba(40, 18, 84, 0.17),\n        inset 0 1px 0 rgba(255, 255, 255, 1);\n\n    transform: translateY(-8px);\n}\n\n\/* =========================================================\n   PROJECT MEDIA\n========================================================= *\/\n\n#dx-web-project-showcase .dx-project-media {\n    position: relative;\n\n    width: 100%;\n    aspect-ratio: 16 \/ 10;\n\n    overflow: hidden;\n\n    background: #ece8f5;\n}\n\n#dx-web-project-showcase .dx-project-image {\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n    object-position: center;\n\n    transition:\n        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),\n        filter 0.7s ease;\n}\n\n#dx-web-project-showcase .dx-project-card:hover\n    .dx-project-image,\n#dx-web-project-showcase .dx-project-card:focus-within\n    .dx-project-image {\n    filter:\n        saturate(1.06)\n        contrast(1.02);\n\n    transform: scale(1.055);\n}\n\n\/* =========================================================\n   IMAGE OVERLAY\n========================================================= *\/\n\n#dx-web-project-showcase .dx-project-overlay {\n    position: absolute;\n\n    inset: 0;\n\n    display: flex;\n    align-items: flex-end;\n\n    padding: 22px;\n\n    background:\n        linear-gradient(\n            180deg,\n            transparent 24%,\n            rgba(12, 4, 34, 0.94)\n        );\n\n    opacity: 0;\n\n    transition: opacity 0.35s ease;\n}\n\n#dx-web-project-showcase .dx-project-card:hover\n    .dx-project-overlay,\n#dx-web-project-showcase .dx-project-card:focus-within\n    .dx-project-overlay {\n    opacity: 1;\n}\n\n#dx-web-project-showcase .dx-project-overlay-content {\n    width: 100%;\n\n    display: flex;\n    align-items: flex-end;\n    justify-content: space-between;\n\n    gap: 15px;\n\n    transform: translateY(12px);\n\n    transition: transform 0.35s ease;\n}\n\n#dx-web-project-showcase .dx-project-card:hover\n    .dx-project-overlay-content,\n#dx-web-project-showcase .dx-project-card:focus-within\n    .dx-project-overlay-content {\n    transform: translateY(0);\n}\n\n#dx-web-project-showcase .dx-project-overlay-text {\n    margin: 0;\n\n    color: rgba(255, 255, 255, 0.88);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.9;\n}\n\n#dx-web-project-showcase .dx-project-overlay-icon {\n    width: 44px;\n    height: 44px;\n    flex: 0 0 44px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid rgba(255, 255, 255, 0.18);\n    border-radius: 13px;\n\n    color: #180b35;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-project-yellow),\n            var(--dx-project-yellow-light)\n        );\n}\n\n#dx-web-project-showcase .dx-project-overlay-icon svg {\n    width: 19px;\n    height: 19px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   CATEGORY BADGE\n========================================================= *\/\n\n#dx-web-project-showcase .dx-project-category-badge {\n    position: absolute;\n    z-index: 4;\n\n    top: 16px;\n    right: 16px;\n\n    min-height: 31px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    padding:\n        0\n        12px;\n\n    border: 1px solid rgba(255, 255, 255, 0.18);\n    border-radius: 999px;\n\n    color: #ffffff;\n\n    background: rgba(20, 7, 48, 0.73);\n\n    box-shadow:\n        0 11px 27px rgba(2, 0, 20, 0.22);\n\n    -webkit-backdrop-filter: blur(9px);\n    backdrop-filter: blur(9px);\n\n    font-size: 14px;\n    font-weight: 900;\n}\n\n\/* =========================================================\n   CARD CONTENT\n========================================================= *\/\n\n#dx-web-project-showcase .dx-project-content {\n    flex: 1;\n\n    display: flex;\n    flex-direction: column;\n\n    padding:\n        23px\n        22px\n        24px;\n}\n\n#dx-web-project-showcase .dx-project-content-top {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n\n    gap: 14px;\n}\n\n#dx-web-project-showcase .dx-project-heading {\n    min-width: 0;\n}\n\n#dx-web-project-showcase .dx-project-number {\n    display: block;\n\n    margin-bottom: 5px;\n\n    color: rgba(105, 66, 216, 0.36);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.5;\n}\n\n#dx-web-project-showcase .dx-project-name {\n    margin: 0;\n\n    color: var(--dx-project-dark);\n\n    font-size: 22px;\n    font-weight: 900;\n    line-height: 1.45;\n\n    direction: ltr;\n    text-align: left;\n}\n\n#dx-web-project-showcase .dx-project-type {\n    min-height: 29px;\n    flex: 0 0 auto;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    padding:\n        0\n        10px;\n\n    border-radius: 999px;\n\n    color: var(--dx-project-purple);\n\n    background: rgba(105, 66, 216, 0.09);\n\n    font-size: 14px;\n    font-weight: 900;\n}\n\n#dx-web-project-showcase .dx-project-card:nth-child(2)\n    .dx-project-type {\n    color: #936500;\n\n    background: rgba(255, 196, 65, 0.18);\n}\n\n#dx-web-project-showcase .dx-project-card:nth-child(3)\n    .dx-project-type {\n    color: #16845a;\n\n    background: rgba(84, 214, 150, 0.15);\n}\n\n#dx-web-project-showcase .dx-project-card-description {\n    margin:\n        13px\n        0\n        0;\n\n    color: var(--dx-project-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.95;\n\n    text-wrap: pretty;\n}\n\n\/* =========================================================\n   PROJECT FOOTER\n========================================================= *\/\n\n#dx-web-project-showcase .dx-project-footer {\n    margin-top: auto;\n    padding-top: 19px;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    gap: 15px;\n\n    border-top: 1px solid rgba(105, 66, 216, 0.10);\n}\n\n#dx-web-project-showcase .dx-project-link {\n    display: inline-flex;\n    align-items: center;\n\n    gap: 8px;\n\n    color: var(--dx-project-purple);\n\n    font-size: 14px;\n    font-weight: 900;\n\n    transition:\n        gap 0.25s ease,\n        color 0.25s ease;\n}\n\n#dx-web-project-showcase .dx-project-link:hover,\n#dx-web-project-showcase .dx-project-link:focus-visible {\n    gap: 13px;\n\n    color: var(--dx-project-dark);\n}\n\n#dx-web-project-showcase .dx-project-link svg {\n    width: 17px;\n    height: 17px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-web-project-showcase .dx-project-device-list {\n    display: flex;\n    align-items: center;\n\n    gap: 5px;\n}\n\n#dx-web-project-showcase .dx-project-device {\n    width: 29px;\n    height: 29px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid rgba(105, 66, 216, 0.10);\n    border-radius: 8px;\n\n    color: var(--dx-project-muted);\n\n    background: rgba(105, 66, 216, 0.045);\n}\n\n#dx-web-project-showcase .dx-project-device svg {\n    width: 14px;\n    height: 14px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   BOTTOM CTA\n========================================================= *\/\n\n#dx-web-project-showcase .dx-project-bottom {\n    margin-top: 27px;\n\n    display: grid;\n    grid-template-columns:\n        minmax(0, 1fr)\n        auto;\n\n    align-items: center;\n\n    gap: 25px;\n\n    padding:\n        23px\n        25px;\n\n    border: 1px solid rgba(105, 66, 216, 0.13);\n    border-radius: 19px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.88),\n            rgba(250, 248, 254, 0.76)\n        );\n\n    box-shadow:\n        0 17px 42px rgba(40, 18, 84, 0.07);\n}\n\n#dx-web-project-showcase .dx-project-bottom-copy {\n    min-width: 0;\n\n    display: flex;\n    align-items: center;\n\n    gap: 14px;\n}\n\n#dx-web-project-showcase .dx-project-bottom-icon {\n    width: 47px;\n    height: 47px;\n    flex: 0 0 47px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 14px;\n\n    color: var(--dx-project-purple);\n\n    background: rgba(105, 66, 216, 0.09);\n}\n\n#dx-web-project-showcase .dx-project-bottom-icon svg {\n    width: 24px;\n    height: 24px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.9;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-web-project-showcase .dx-project-bottom-title {\n    margin: 0;\n\n    color: var(--dx-project-dark);\n\n    font-size: 16px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-web-project-showcase .dx-project-bottom-text {\n    margin:\n        4px\n        0\n        0;\n\n    color: var(--dx-project-text);\n\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1.8;\n}\n\n#dx-web-project-showcase .dx-project-all-button {\n    min-width: 215px;\n    min-height: 50px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 9px;\n\n    padding:\n        0\n        21px;\n\n    border: 1px solid rgba(105, 66, 216, 0.18);\n    border-radius: 12px;\n\n    color: #ffffff;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-project-purple),\n            var(--dx-project-purple-light)\n        );\n\n    box-shadow:\n        0 16px 34px rgba(105, 66, 216, 0.23);\n\n    font-size: 14px;\n    font-weight: 900;\n    white-space: nowrap;\n\n    transition:\n        transform 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-web-project-showcase .dx-project-all-button:hover,\n#dx-web-project-showcase .dx-project-all-button:focus-visible {\n    box-shadow:\n        0 22px 44px rgba(105, 66, 216, 0.31);\n\n    transform: translateY(-3px);\n}\n\n#dx-web-project-showcase .dx-project-all-button svg {\n    width: 17px;\n    height: 17px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1050px) {\n    #dx-web-project-showcase .dx-project-main {\n        padding:\n            76px\n            28px\n            82px;\n    }\n\n    #dx-web-project-showcase .dx-project-grid {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n\n    #dx-web-project-showcase .dx-project-card:last-child {\n        grid-column: 1 \/ -1;\n\n        width: min(100%, calc(50% - 11px));\n\n        margin-right: auto;\n        margin-left: auto;\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 680px) {\n    #dx-web-project-showcase .dx-project-main {\n        padding:\n            59px\n            16px\n            65px;\n    }\n\n    #dx-web-project-showcase .dx-project-header {\n        margin-bottom: 31px;\n    }\n\n    #dx-web-project-showcase .dx-project-eyebrow {\n        font-size: 14px;\n    }\n\n    #dx-web-project-showcase .dx-project-eyebrow::before,\n    #dx-web-project-showcase .dx-project-eyebrow::after {\n        width: 22px;\n    }\n\n    #dx-web-project-showcase .dx-project-title {\n        font-size: clamp(27px, 8.3vw, 36px);\n        line-height: 1.65;\n        letter-spacing: -0.2px;\n    }\n\n    #dx-web-project-showcase .dx-project-description {\n        margin-top: 10px;\n\n        font-size: 14px;\n        line-height: 2;\n    }\n\n    #dx-web-project-showcase .dx-project-grid {\n        grid-template-columns: 1fr;\n\n        gap: 16px;\n    }\n\n    #dx-web-project-showcase .dx-project-card:last-child {\n        grid-column: auto;\n\n        width: 100%;\n\n        margin: 0;\n    }\n\n    #dx-web-project-showcase .dx-project-card {\n        border-radius: 19px;\n    }\n\n    #dx-web-project-showcase .dx-project-media {\n        aspect-ratio: 16 \/ 10;\n    }\n\n    #dx-web-project-showcase .dx-project-overlay {\n        display: none;\n    }\n\n    #dx-web-project-showcase .dx-project-category-badge {\n        top: 12px;\n        right: 12px;\n\n        min-height: 28px;\n\n        padding-right: 10px;\n        padding-left: 10px;\n\n        font-size: 14px;\n    }\n\n    #dx-web-project-showcase .dx-project-content {\n        padding:\n            19px\n            17px\n            21px;\n    }\n\n    #dx-web-project-showcase .dx-project-content-top {\n        gap: 10px;\n    }\n\n    #dx-web-project-showcase .dx-project-name {\n        font-size: 20px;\n    }\n\n    #dx-web-project-showcase .dx-project-type {\n        min-height: 27px;\n\n        padding-right: 9px;\n        padding-left: 9px;\n\n        font-size: 14px;\n    }\n\n    #dx-web-project-showcase .dx-project-card-description {\n        margin-top: 10px;\n\n        font-size: 14px;\n        line-height: 1.9;\n    }\n\n    #dx-web-project-showcase .dx-project-footer {\n        padding-top: 16px;\n    }\n\n    #dx-web-project-showcase .dx-project-link {\n        font-size: 14px;\n    }\n\n    #dx-web-project-showcase .dx-project-device {\n        width: 27px;\n        height: 27px;\n    }\n\n    #dx-web-project-showcase .dx-project-bottom {\n        margin-top: 18px;\n\n        grid-template-columns: 1fr;\n\n        gap: 16px;\n\n        padding:\n            18px\n            15px;\n\n        border-radius: 16px;\n\n        text-align: center;\n    }\n\n    #dx-web-project-showcase .dx-project-bottom-copy {\n        flex-direction: column;\n\n        gap: 10px;\n    }\n\n    #dx-web-project-showcase .dx-project-bottom-title {\n        font-size: 14px;\n    }\n\n    #dx-web-project-showcase .dx-project-bottom-text {\n        font-size: 14px;\n    }\n\n    #dx-web-project-showcase .dx-project-all-button {\n        width: 100%;\n        min-width: 0;\n        min-height: 48px;\n\n        font-size: 14px;\n    }\n\n    #dx-web-project-showcase .dx-project-orbit {\n        display: none;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-web-project-showcase a:focus-visible {\n    outline: 3px solid var(--dx-project-yellow);\n    outline-offset: 4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    #dx-web-project-showcase *,\n    #dx-web-project-showcase *::before,\n    #dx-web-project-showcase *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-web-project-showcase\"\n    aria-labelledby=\"dx-web-project-showcase-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n    <div\n        class=\"dx-project-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <span\n        class=\"dx-project-orbit dx-project-orbit-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-project-orbit dx-project-orbit-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-project-main\">\n\n        <div class=\"dx-project-container\">\n\n            <header class=\"dx-project-header\">\n\n                <span class=\"dx-project-eyebrow\">\n                    Real Examples From Our Work\n                <\/span>\n\n                <h2\n                    id=\"dx-web-project-showcase-title\"\n                    class=\"dx-project-title\"\n                >\n                    Websites We Designed to Make\n                    <span>a Real Difference<\/span>\n                <\/h2>\n\n                <p class=\"dx-project-description\">\n                    A selection of e-commerce websites we designed\n                    and developed to deliver clear, responsive shopping\n                    experiences and professional product presentation.\n                <\/p>\n\n            <\/header>\n\n            <div class=\"dx-project-grid\">\n\n                <article class=\"dx-project-card\">\n\n                    <div class=\"dx-project-media\">\n\n                        <img loading=\"lazy\"\n                            src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/12\/lumea-1-scaled.png\"\n                            alt=\"LUM\u00c9A e-commerce project\"\n                            class=\"dx-project-image\"\n                            width=\"1280\"\n                            height=\"800\"\n                            loading=\"lazy\"\n                            decoding=\"async\"\n                        >\n\n                        <span class=\"dx-project-category-badge\">\n                            Fashion Store\n                        <\/span>\n\n                        <div class=\"dx-project-overlay\">\n\n                            <div class=\"dx-project-overlay-content\">\n\n                                <p class=\"dx-project-overlay-text\">\n                                    A modern e-commerce platform for\n                                    showcasing and selling premium women\u2019s\n                                    fashion through a clear and responsive\n                                    shopping experience.\n                                <\/p>\n\n                                <span\n                                    class=\"dx-project-overlay-icon\"\n                                    aria-hidden=\"true\"\n                                >\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"M5 12h14\"><\/path>\n                                        <path d=\"m13 6 6 6-6 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <div class=\"dx-project-content\">\n\n                        <div class=\"dx-project-content-top\">\n\n                            <div class=\"dx-project-heading\">\n\n                                <span class=\"dx-project-number\">\n                                    Project 01\n                                <\/span>\n\n                                <h3 class=\"dx-project-name\">\n                                    LUM\u00c9A\n                                <\/h3>\n\n                            <\/div>\n\n                            <span class=\"dx-project-type\">\n                                E-Commerce\n                            <\/span>\n\n                        <\/div>\n\n                        <p class=\"dx-project-card-description\">\n                            A modern online store for premium women\u2019s\n                            fashion, designed to provide an elegant\n                            shopping experience and professional product\n                            presentation across all devices.\n                        <\/p>\n\n                        <div class=\"dx-project-footer\">\n\n                            <a\n                                href=\"https:\/\/lumea-line.store\/\"\n                                target=\"_blank\"\n                                rel=\"noopener noreferrer\"\n                                class=\"dx-project-link\"\n                                aria-label=\"Visit the LUM\u00c9A website\"\n                            >\n                                <span>View Website<\/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                                class=\"dx-project-device-list\"\n                                aria-label=\"Website is responsive across devices\"\n                            >\n\n                                <span\n                                    class=\"dx-project-device\"\n                                    title=\"Desktop\"\n                                >\n                                    <svg\n                                        viewBox=\"0 0 24 24\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <rect\n                                            x=\"3\"\n                                            y=\"4\"\n                                            width=\"18\"\n                                            height=\"13\"\n                                            rx=\"2\"\n                                        ><\/rect>\n                                        <path d=\"M8 21h8\"><\/path>\n                                        <path d=\"M12 17v4\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                                <span\n                                    class=\"dx-project-device\"\n                                    title=\"Tablet\"\n                                >\n                                    <svg\n                                        viewBox=\"0 0 24 24\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <rect\n                                            x=\"5\"\n                                            y=\"2\"\n                                            width=\"14\"\n                                            height=\"20\"\n                                            rx=\"2\"\n                                        ><\/rect>\n                                        <path d=\"M12 18h.01\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                                <span\n                                    class=\"dx-project-device\"\n                                    title=\"Mobile\"\n                                >\n                                    <svg\n                                        viewBox=\"0 0 24 24\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <rect\n                                            x=\"7\"\n                                            y=\"2\"\n                                            width=\"10\"\n                                            height=\"20\"\n                                            rx=\"2\"\n                                        ><\/rect>\n                                        <path d=\"M11 18h2\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n                <article class=\"dx-project-card\">\n\n                    <div class=\"dx-project-media\">\n\n                        <img loading=\"lazy\"\n                            src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/12\/beirutbook-1-scaled.png\"\n                            alt=\"Beirut Book e-commerce project\"\n                            class=\"dx-project-image\"\n                            width=\"1280\"\n                            height=\"800\"\n                            loading=\"lazy\"\n                            decoding=\"async\"\n                        >\n\n                        <span class=\"dx-project-category-badge\">\n                            Book Store\n                        <\/span>\n\n                        <div class=\"dx-project-overlay\">\n\n                            <div class=\"dx-project-overlay-content\">\n\n                                <p class=\"dx-project-overlay-text\">\n                                    An online platform for selling books\n                                    and stationery with organized categories\n                                    and a simple browsing experience.\n                                <\/p>\n\n                                <span\n                                    class=\"dx-project-overlay-icon\"\n                                    aria-hidden=\"true\"\n                                >\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"M5 12h14\"><\/path>\n                                        <path d=\"m13 6 6 6-6 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <div class=\"dx-project-content\">\n\n                        <div class=\"dx-project-content-top\">\n\n                            <div class=\"dx-project-heading\">\n\n                                <span class=\"dx-project-number\">\n                                    Project 02\n                                <\/span>\n\n                                <h3 class=\"dx-project-name\">\n                                    Beirut Book\n                                <\/h3>\n\n                            <\/div>\n\n                            <span class=\"dx-project-type\">\n                                E-Commerce\n                            <\/span>\n\n                        <\/div>\n\n                        <p class=\"dx-project-card-description\">\n                            A complete online store for books and\n                            stationery, providing easy navigation,\n                            diverse categories, and professional\n                            product presentation.\n                        <\/p>\n\n                        <div class=\"dx-project-footer\">\n\n                            <a\n                                href=\"https:\/\/beirutbook.shop\/\"\n                                target=\"_blank\"\n                                rel=\"noopener noreferrer\"\n                                class=\"dx-project-link\"\n                                aria-label=\"Visit the Beirut Book website\"\n                            >\n                                <span>View Website<\/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                                class=\"dx-project-device-list\"\n                                aria-label=\"Website is responsive across devices\"\n                            >\n\n                                <span\n                                    class=\"dx-project-device\"\n                                    title=\"Desktop\"\n                                >\n                                    <svg\n                                        viewBox=\"0 0 24 24\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <rect\n                                            x=\"3\"\n                                            y=\"4\"\n                                            width=\"18\"\n                                            height=\"13\"\n                                            rx=\"2\"\n                                        ><\/rect>\n                                        <path d=\"M8 21h8\"><\/path>\n                                        <path d=\"M12 17v4\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                                <span\n                                    class=\"dx-project-device\"\n                                    title=\"Tablet\"\n                                >\n                                    <svg\n                                        viewBox=\"0 0 24 24\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <rect\n                                            x=\"5\"\n                                            y=\"2\"\n                                            width=\"14\"\n                                            height=\"20\"\n                                            rx=\"2\"\n                                        ><\/rect>\n                                        <path d=\"M12 18h.01\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                                <span\n                                    class=\"dx-project-device\"\n                                    title=\"Mobile\"\n                                >\n                                    <svg\n                                        viewBox=\"0 0 24 24\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <rect\n                                            x=\"7\"\n                                            y=\"2\"\n                                            width=\"10\"\n                                            height=\"20\"\n                                            rx=\"2\"\n                                        ><\/rect>\n                                        <path d=\"M11 18h2\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n                <article class=\"dx-project-card\">\n\n                    <div class=\"dx-project-media\">\n\n                        <img loading=\"lazy\"\n                            src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/12\/b3custom-1-scaled.png\"\n                            alt=\"B3 Custom e-commerce project\"\n                            class=\"dx-project-image\"\n                            width=\"1280\"\n                            height=\"800\"\n                            loading=\"lazy\"\n                            decoding=\"async\"\n                        >\n\n                        <span class=\"dx-project-category-badge\">\n                            Auto Parts & Accessories\n                        <\/span>\n\n                        <div class=\"dx-project-overlay\">\n\n                            <div class=\"dx-project-overlay-content\">\n\n                                <p class=\"dx-project-overlay-text\">\n                                    An e-commerce store for automotive\n                                    parts and accessories with organized\n                                    presentation and an improved shopping\n                                    experience.\n                                <\/p>\n\n                                <span\n                                    class=\"dx-project-overlay-icon\"\n                                    aria-hidden=\"true\"\n                                >\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"M5 12h14\"><\/path>\n                                        <path d=\"m13 6 6 6-6 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <div class=\"dx-project-content\">\n\n                        <div class=\"dx-project-content-top\">\n\n                            <div class=\"dx-project-heading\">\n\n                                <span class=\"dx-project-number\">\n                                    Project 03\n                                <\/span>\n\n                                <h3 class=\"dx-project-name\">\n                                    B3 Custom\n                                <\/h3>\n\n                            <\/div>\n\n                            <span class=\"dx-project-type\">\n                                E-Commerce\n                            <\/span>\n\n                        <\/div>\n\n                        <p class=\"dx-project-card-description\">\n                            A responsive online store for automotive\n                            parts and accessories, with a clean design,\n                            smooth navigation, and an improved buying\n                            experience.\n                        <\/p>\n\n                        <div class=\"dx-project-footer\">\n\n                            <a\n                                href=\"https:\/\/b3custom.com\/\"\n                                target=\"_blank\"\n                                rel=\"noopener noreferrer\"\n                                class=\"dx-project-link\"\n                                aria-label=\"Visit the B3 Custom website\"\n                            >\n                                <span>View Website<\/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                                class=\"dx-project-device-list\"\n                                aria-label=\"Website is responsive across devices\"\n                            >\n\n                                <span\n                                    class=\"dx-project-device\"\n                                    title=\"Desktop\"\n                                >\n                                    <svg\n                                        viewBox=\"0 0 24 24\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <rect\n                                            x=\"3\"\n                                            y=\"4\"\n                                            width=\"18\"\n                                            height=\"13\"\n                                            rx=\"2\"\n                                        ><\/rect>\n                                        <path d=\"M8 21h8\"><\/path>\n                                        <path d=\"M12 17v4\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                                <span\n                                    class=\"dx-project-device\"\n                                    title=\"Tablet\"\n                                >\n                                    <svg\n                                        viewBox=\"0 0 24 24\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <rect\n                                            x=\"5\"\n                                            y=\"2\"\n                                            width=\"14\"\n                                            height=\"20\"\n                                            rx=\"2\"\n                                        ><\/rect>\n                                        <path d=\"M12 18h.01\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                                <span\n                                    class=\"dx-project-device\"\n                                    title=\"Mobile\"\n                                >\n                                    <svg\n                                        viewBox=\"0 0 24 24\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <rect\n                                            x=\"7\"\n                                            y=\"2\"\n                                            width=\"10\"\n                                            height=\"20\"\n                                            rx=\"2\"\n                                        ><\/rect>\n                                        <path d=\"M11 18h2\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n            <\/div>\n\n            <div class=\"dx-project-bottom\">\n\n                <div class=\"dx-project-bottom-copy\">\n\n                    <span\n                        class=\"dx-project-bottom-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <rect\n                                x=\"3\"\n                                y=\"4\"\n                                width=\"18\"\n                                height=\"16\"\n                                rx=\"2\"\n                            ><\/rect>\n                            <path d=\"M3 9h18\"><\/path>\n                            <path d=\"M8 14h3\"><\/path>\n                            <path d=\"M8 17h7\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <div>\n\n                        <h3 class=\"dx-project-bottom-title\">\n                            Explore More Websites and Digital Platforms We\u2019ve Built\n                        <\/h3>\n\n                        <p class=\"dx-project-bottom-text\">\n                            View a broader selection of website,\n                            e-commerce, and digital platform projects\n                            across different industries and business\n                            requirements.\n                        <\/p>\n\n                    <\/div>\n\n                <\/div>\n\n                <a\n                    href=\"https:\/\/dindex.net\/en\/web-projects\/\"\n                    class=\"dx-project-all-button\"\n                >\n                    <span>View All Projects<\/span>\n\n                    <svg\n                        viewBox=\"0 0 24 24\"\n                        aria-hidden=\"true\"\n                    >\n                        <path d=\"M5 12h14\"><\/path>\n                        <path d=\"m13 6 6 6-6 6\"><\/path>\n                    <\/svg>\n                <\/a>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxWebProjectShowcase() {\n        const section = document.getElementById(\n            \"dx-web-project-showcase\"\n        );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized = \"true\";\n\n        const widget = section.closest(\n            \".elementor-widget-html\"\n        );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-web-project-showcase-widget-fullwidth\"\n            );\n        }\n\n        if (\n            !(\"IntersectionObserver\" in window) ||\n            window.matchMedia(\n                \"(prefers-reduced-motion: reduce)\"\n            ).matches\n        ) {\n            return;\n        }\n\n        const cards = section.querySelectorAll(\n            \".dx-project-card\"\n        );\n\n        cards.forEach(function (card, index) {\n            card.style.opacity = \"0\";\n            card.style.transform = \"translateY(25px)\";\n\n            card.style.transition =\n                \"opacity 0.58s ease \" +\n                index * 0.1 +\n                \"s, transform 0.58s ease \" +\n                index * 0.1 +\n                \"s, border-color 0.35s ease, box-shadow 0.35s ease\";\n        });\n\n        const observer = new IntersectionObserver(\n            function (entries, currentObserver) {\n                entries.forEach(function (entry) {\n                    if (!entry.isIntersecting) {\n                        return;\n                    }\n\n                    entry.target.style.opacity = \"1\";\n                    entry.target.style.transform = \"translateY(0)\";\n\n                    currentObserver.unobserve(\n                        entry.target\n                    );\n                });\n            },\n            {\n                threshold: 0.12\n            }\n        );\n\n        cards.forEach(function (card) {\n            observer.observe(card);\n        });\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxWebProjectShowcase\n        );\n    } else {\n        initDxWebProjectShowcase();\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c6de9a5 e-con-full e-flex e-con e-parent\" data-id=\"c6de9a5\" 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-bf203f0 elementor-widget elementor-widget-html\" data-id=\"bf203f0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n\/* =========================================================\n   ELEMENTOR FULL WIDTH\n========================================================= *\/\n\n.elementor-widget-html:has(#dx-web-process),\n.elementor-widget-html:has(#dx-web-process)\n    > .elementor-widget-container,\n.dx-web-process-widget-fullwidth,\n.dx-web-process-widget-fullwidth\n    > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n\/* =========================================================\n   RESET & VARIABLES\n========================================================= *\/\n\n#dx-web-process,\n#dx-web-process *,\n#dx-web-process *::before,\n#dx-web-process *::after {\n    box-sizing: border-box;\n}\n\n#dx-web-process {\n    --dx-process-dark: #09001f;\n    --dx-process-dark-light: #17063c;\n    --dx-process-white: #ffffff;\n    --dx-process-text: rgba(255, 255, 255, 0.75);\n    --dx-process-muted: rgba(255, 255, 255, 0.53);\n    --dx-process-purple: #6942d8;\n    --dx-process-purple-light: #9168ef;\n    --dx-process-yellow: #ffc441;\n    --dx-process-yellow-light: #ffd66e;\n    --dx-process-green: #54d696;\n    --dx-process-blue: #58a8f7;\n    --dx-process-border: rgba(255, 255, 255, 0.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    overflow: hidden;\n    direction: ltr;\n\n    color: var(--dx-process-white);\n\n    background:\n        radial-gradient(\n            circle at 10% 15%,\n            rgba(145, 104, 239, 0.22),\n            transparent 29%\n        ),\n        radial-gradient(\n            circle at 90% 85%,\n            rgba(105, 66, 216, 0.22),\n            transparent 31%\n        ),\n        linear-gradient(\n            145deg,\n            var(--dx-process-dark-light),\n            var(--dx-process-dark)\n        );\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-web-process a {\n    color: inherit;\n    text-decoration: none;\n}\n\n\/* =========================================================\n   BACKGROUND\n========================================================= *\/\n\n#dx-web-process .dx-process-grid-bg {\n    position: absolute;\n    z-index: -6;\n\n    inset: 0;\n\n    opacity: 0.10;\n\n    background-image:\n        linear-gradient(\n            rgba(255, 255, 255, 0.045) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(255, 255, 255, 0.045) 1px,\n            transparent 1px\n        );\n\n    background-size: 72px 72px;\n\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 17%,\n            transparent 82%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 17%,\n            transparent 82%\n        );\n\n    pointer-events: none;\n}\n\n#dx-web-process .dx-process-glow {\n    position: absolute;\n    z-index: -5;\n\n    border-radius: 50%;\n    filter: blur(95px);\n\n    pointer-events: none;\n}\n\n#dx-web-process .dx-process-glow-one {\n    top: 8%;\n    right: 35%;\n\n    width: 340px;\n    height: 340px;\n\n    background: rgba(105, 66, 216, 0.17);\n}\n\n#dx-web-process .dx-process-glow-two {\n    left: -110px;\n    bottom: -170px;\n\n    width: 430px;\n    height: 360px;\n\n    background: rgba(255, 196, 65, 0.06);\n}\n\n\/* =========================================================\n   MAIN LAYOUT\n========================================================= *\/\n\n#dx-web-process .dx-process-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        94px\n        clamp(22px, 5vw, 90px)\n        100px;\n}\n\n#dx-web-process .dx-process-container {\n    width: min(1420px, 100%);\n    margin: 0 auto;\n}\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n#dx-web-process .dx-process-header {\n    max-width: 860px;\n\n    margin: 0 auto 52px;\n\n    text-align: center;\n}\n\n#dx-web-process .dx-process-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    margin-bottom: 12px;\n\n    color: var(--dx-process-yellow);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-web-process .dx-process-eyebrow::before,\n#dx-web-process .dx-process-eyebrow::after {\n    content: \"\";\n\n    width: 31px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-process-yellow),\n            var(--dx-process-purple-light)\n        );\n}\n\n#dx-web-process .dx-process-title {\n    margin: 0;\n\n    color: var(--dx-process-white);\n\n    font-size: clamp(33px, 3.7vw, 51px);\n    font-weight: 900;\n    line-height: 1.55;\n    letter-spacing: -0.45px;\n\n    text-wrap: balance;\n}\n\n#dx-web-process .dx-process-title span {\n    color: var(--dx-process-yellow);\n}\n\n#dx-web-process .dx-process-description {\n    max-width: 730px;\n\n    margin: 14px auto 0;\n\n    color: var(--dx-process-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n\n    text-wrap: pretty;\n}\n\n\/* =========================================================\n   PROCESS LIST\n========================================================= *\/\n\n#dx-web-process .dx-process-list {\n    position: relative;\n\n    display: grid;\n\n    gap: 0;\n}\n\n\/* =========================================================\n   CENTER LINE\n========================================================= *\/\n\n#dx-web-process .dx-process-list::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: 1;\n\n    top: 58px;\n    bottom: 58px;\n    right: 50%;\n\n    width: 2px;\n\n    background:\n        linear-gradient(\n            180deg,\n            rgba(255, 196, 65, 0.15),\n            rgba(145, 104, 239, 0.55),\n            rgba(255, 196, 65, 0.15)\n        );\n\n    transform: translateX(50%);\n}\n\n\/* =========================================================\n   PROCESS ITEM\n========================================================= *\/\n\n#dx-web-process .dx-process-item {\n    position: relative;\n    z-index: 2;\n\n    min-height: 205px;\n\n    display: grid;\n    grid-template-columns:\n        minmax(0, 1fr)\n        90px\n        minmax(0, 1fr);\n\n    align-items: center;\n\n    gap: 30px;\n}\n\n#dx-web-process .dx-process-item-content {\n    min-width: 0;\n\n    padding:\n        27px\n        30px;\n\n    border: 1px solid var(--dx-process-border);\n    border-radius: 21px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.09),\n            rgba(255, 255, 255, 0.035)\n        );\n\n    box-shadow:\n        0 20px 50px rgba(2, 0, 20, 0.22),\n        inset 0 1px 0 rgba(255, 255, 255, 0.06);\n\n    -webkit-backdrop-filter: blur(10px);\n    backdrop-filter: blur(10px);\n\n    transition:\n        transform 0.35s ease,\n        border-color 0.35s ease,\n        background 0.35s ease,\n        box-shadow 0.35s ease;\n}\n\n#dx-web-process .dx-process-item:hover\n    .dx-process-item-content,\n#dx-web-process .dx-process-item:focus-within\n    .dx-process-item-content {\n    border-color: rgba(145, 104, 239, 0.48);\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(145, 104, 239, 0.16),\n            rgba(255, 255, 255, 0.045)\n        );\n\n    box-shadow:\n        0 28px 62px rgba(2, 0, 20, 0.30),\n        inset 0 1px 0 rgba(255, 255, 255, 0.08);\n}\n\n#dx-web-process .dx-process-item:nth-child(odd)\n    .dx-process-item-content {\n    grid-column: 1;\n}\n\n#dx-web-process .dx-process-item:nth-child(even)\n    .dx-process-item-content {\n    grid-column: 3;\n}\n\n#dx-web-process .dx-process-item:nth-child(odd):hover\n    .dx-process-item-content {\n    transform: translateX(-7px);\n}\n\n#dx-web-process .dx-process-item:nth-child(even):hover\n    .dx-process-item-content {\n    transform: translateX(7px);\n}\n\n\/* =========================================================\n   EMPTY SIDE\n========================================================= *\/\n\n#dx-web-process .dx-process-empty {\n    min-height: 1px;\n}\n\n#dx-web-process .dx-process-item:nth-child(odd)\n    .dx-process-empty {\n    grid-column: 3;\n}\n\n#dx-web-process .dx-process-item:nth-child(even)\n    .dx-process-empty {\n    grid-column: 1;\n    grid-row: 1;\n}\n\n\/* =========================================================\n   CENTER NODE\n========================================================= *\/\n\n#dx-web-process .dx-process-node {\n    position: relative;\n    z-index: 4;\n\n    grid-column: 2;\n    grid-row: 1;\n\n    width: 74px;\n    height: 74px;\n\n    justify-self: center;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 7px solid rgba(9, 0, 31, 0.92);\n    border-radius: 50%;\n\n    color: #ffffff;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-process-purple),\n            var(--dx-process-purple-light)\n        );\n\n    box-shadow:\n        0 0 0 1px rgba(255, 255, 255, 0.13),\n        0 16px 35px rgba(105, 66, 216, 0.34);\n\n    transition:\n        transform 0.3s ease,\n        box-shadow 0.3s ease;\n}\n\n#dx-web-process .dx-process-item:nth-child(2)\n    .dx-process-node {\n    color: #28113f;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-process-yellow),\n            var(--dx-process-yellow-light)\n        );\n\n    box-shadow:\n        0 0 0 1px rgba(255, 255, 255, 0.13),\n        0 16px 35px rgba(255, 196, 65, 0.27);\n}\n\n#dx-web-process .dx-process-item:nth-child(3)\n    .dx-process-node {\n    color: #0b4f38;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-process-green),\n            #8ae6b9\n        );\n\n    box-shadow:\n        0 0 0 1px rgba(255, 255, 255, 0.13),\n        0 16px 35px rgba(84, 214, 150, 0.24);\n}\n\n#dx-web-process .dx-process-item:nth-child(4)\n    .dx-process-node {\n    background:\n        linear-gradient(\n            135deg,\n            #428fe0,\n            var(--dx-process-blue)\n        );\n\n    box-shadow:\n        0 0 0 1px rgba(255, 255, 255, 0.13),\n        0 16px 35px rgba(88, 168, 247, 0.27);\n}\n\n#dx-web-process .dx-process-item:nth-child(5)\n    .dx-process-node {\n    color: #28113f;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-process-yellow),\n            var(--dx-process-yellow-light)\n        );\n\n    box-shadow:\n        0 0 0 1px rgba(255, 255, 255, 0.13),\n        0 16px 35px rgba(255, 196, 65, 0.27);\n}\n\n#dx-web-process .dx-process-item:hover\n    .dx-process-node {\n    transform: scale(1.08);\n\n    box-shadow:\n        0 0 0 1px rgba(255, 255, 255, 0.16),\n        0 22px 45px rgba(105, 66, 216, 0.38);\n}\n\n#dx-web-process .dx-process-node svg {\n    width: 30px;\n    height: 30px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   ITEM CONTENT\n========================================================= *\/\n\n#dx-web-process .dx-process-item-meta {\n    display: flex;\n    align-items: center;\n\n    gap: 10px;\n\n    margin-bottom: 7px;\n}\n\n#dx-web-process .dx-process-item-number {\n    color: var(--dx-process-yellow);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.5;\n}\n\n#dx-web-process .dx-process-item-label {\n    color: var(--dx-process-muted);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.5;\n}\n\n#dx-web-process .dx-process-item-title {\n    margin: 0;\n\n    color: var(--dx-process-white);\n\n    font-size: 21px;\n    font-weight: 900;\n    line-height: 1.6;\n\n    text-wrap: balance;\n}\n\n#dx-web-process .dx-process-item-description {\n    margin:\n        8px\n        0\n        0;\n\n    color: var(--dx-process-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.95;\n\n    text-wrap: pretty;\n}\n\n\/* =========================================================\n   DELIVERABLES\n========================================================= *\/\n\n#dx-web-process .dx-process-deliverables {\n    margin-top: 15px;\n\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    gap: 7px;\n}\n\n#dx-web-process .dx-process-deliverable {\n    min-height: 27px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    padding:\n        0\n        10px;\n\n    border: 1px solid rgba(255, 255, 255, 0.11);\n    border-radius: 999px;\n\n    color: var(--dx-process-muted);\n\n    background: rgba(255, 255, 255, 0.045);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1;\n}\n\n\/* =========================================================\n   BOTTOM CTA\n========================================================= *\/\n\n#dx-web-process .dx-process-bottom {\n    margin-top: 38px;\n\n    display: grid;\n    grid-template-columns:\n        minmax(0, 1fr)\n        auto;\n\n    align-items: center;\n\n    gap: 25px;\n\n    padding:\n        23px\n        25px;\n\n    border: 1px solid rgba(255, 255, 255, 0.13);\n    border-radius: 19px;\n\n    background: rgba(255, 255, 255, 0.055);\n\n    box-shadow:\n        0 18px 44px rgba(2, 0, 20, 0.21);\n\n    -webkit-backdrop-filter: blur(10px);\n    backdrop-filter: blur(10px);\n}\n\n#dx-web-process .dx-process-bottom-copy {\n    min-width: 0;\n\n    display: flex;\n    align-items: center;\n\n    gap: 14px;\n}\n\n#dx-web-process .dx-process-bottom-icon {\n    width: 47px;\n    height: 47px;\n    flex: 0 0 47px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 14px;\n\n    color: var(--dx-process-yellow);\n\n    background: rgba(255, 196, 65, 0.10);\n}\n\n#dx-web-process .dx-process-bottom-icon svg {\n    width: 24px;\n    height: 24px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.9;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-web-process .dx-process-bottom-title {\n    margin: 0;\n\n    color: var(--dx-process-white);\n\n    font-size: 15px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-web-process .dx-process-bottom-text {\n    margin:\n        4px\n        0\n        0;\n\n    color: var(--dx-process-muted);\n\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1.8;\n}\n\n#dx-web-process .dx-process-button {\n    min-width: 210px;\n    min-height: 50px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 9px;\n\n    padding:\n        0\n        21px;\n\n    border: 1px solid rgba(255, 255, 255, 0.18);\n    border-radius: 12px;\n\n    color: #180b35;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-process-yellow),\n            var(--dx-process-yellow-light)\n        );\n\n    box-shadow:\n        0 16px 34px rgba(255, 196, 65, 0.21);\n\n    font-size: 14px;\n    font-weight: 900;\n    white-space: nowrap;\n\n    transition:\n        transform 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-web-process .dx-process-button:hover,\n#dx-web-process .dx-process-button:focus-visible {\n    box-shadow:\n        0 22px 44px rgba(255, 196, 65, 0.30);\n\n    transform: translateY(-3px);\n}\n\n#dx-web-process .dx-process-button svg {\n    width: 17px;\n    height: 17px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 900px) {\n    #dx-web-process .dx-process-main {\n        padding:\n            76px\n            28px\n            82px;\n    }\n\n    #dx-web-process .dx-process-list::before {\n        right: 37px;\n\n        transform: none;\n    }\n\n    #dx-web-process .dx-process-item {\n        min-height: 0;\n\n        grid-template-columns:\n            74px\n            minmax(0, 1fr);\n\n        gap: 22px;\n\n        padding-bottom: 24px;\n    }\n\n    #dx-web-process .dx-process-node {\n        grid-column: 1;\n        grid-row: 1;\n\n        width: 68px;\n        height: 68px;\n    }\n\n    #dx-web-process .dx-process-item-content,\n    #dx-web-process .dx-process-item:nth-child(odd)\n        .dx-process-item-content,\n    #dx-web-process .dx-process-item:nth-child(even)\n        .dx-process-item-content {\n        grid-column: 2;\n        grid-row: 1;\n    }\n\n    #dx-web-process .dx-process-empty {\n        display: none;\n    }\n\n    #dx-web-process .dx-process-item:nth-child(odd):hover\n        .dx-process-item-content,\n    #dx-web-process .dx-process-item:nth-child(even):hover\n        .dx-process-item-content {\n        transform: translateX(5px);\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 600px) {\n    #dx-web-process .dx-process-main {\n        padding:\n            59px\n            16px\n            65px;\n    }\n\n    #dx-web-process .dx-process-header {\n        margin-bottom: 34px;\n    }\n\n    #dx-web-process .dx-process-eyebrow {\n        font-size: 14px;\n    }\n\n    #dx-web-process .dx-process-eyebrow::before,\n    #dx-web-process .dx-process-eyebrow::after {\n        width: 22px;\n    }\n\n    #dx-web-process .dx-process-title {\n        font-size: clamp(27px, 8.3vw, 36px);\n        line-height: 1.65;\n        letter-spacing: -0.2px;\n    }\n\n    #dx-web-process .dx-process-description {\n        margin-top: 10px;\n\n        font-size: 14px;\n        line-height: 2;\n    }\n\n    #dx-web-process .dx-process-list::before {\n        top: 26px;\n        bottom: 26px;\n        right: 25px;\n    }\n\n    #dx-web-process .dx-process-item {\n        grid-template-columns:\n            50px\n            minmax(0, 1fr);\n\n        gap: 12px;\n\n        padding-bottom: 15px;\n    }\n\n    #dx-web-process .dx-process-node {\n        width: 50px;\n        height: 50px;\n\n        border-width: 5px;\n    }\n\n    #dx-web-process .dx-process-node svg {\n        width: 22px;\n        height: 22px;\n    }\n\n    #dx-web-process .dx-process-item-content {\n        padding:\n            19px\n            16px;\n\n        border-radius: 16px;\n    }\n\n    #dx-web-process .dx-process-item-meta {\n        margin-bottom: 4px;\n    }\n\n    #dx-web-process .dx-process-item-number,\n    #dx-web-process .dx-process-item-label {\n        font-size: 14px;\n    }\n\n    #dx-web-process .dx-process-item-title {\n        font-size: 17px;\n        line-height: 1.65;\n    }\n\n    #dx-web-process .dx-process-item-description {\n        margin-top: 5px;\n\n        font-size: 14px;\n        line-height: 1.9;\n    }\n\n    #dx-web-process .dx-process-deliverables {\n        margin-top: 11px;\n\n        gap: 5px;\n    }\n\n    #dx-web-process .dx-process-deliverable {\n        min-height: 24px;\n\n        padding-right: 8px;\n        padding-left: 8px;\n\n        font-size: 14px;\n    }\n\n    #dx-web-process .dx-process-bottom {\n        margin-top: 20px;\n\n        grid-template-columns: 1fr;\n\n        gap: 16px;\n\n        padding:\n            18px\n            15px;\n\n        border-radius: 16px;\n\n        text-align: center;\n    }\n\n    #dx-web-process .dx-process-bottom-copy {\n        flex-direction: column;\n\n        gap: 10px;\n    }\n\n    #dx-web-process .dx-process-bottom-title {\n        font-size: 14px;\n    }\n\n    #dx-web-process .dx-process-bottom-text {\n        font-size: 14px;\n    }\n\n    #dx-web-process .dx-process-button {\n        width: 100%;\n        min-width: 0;\n        min-height: 48px;\n\n        font-size: 14px;\n    }\n\n    #dx-web-process .dx-process-glow {\n        display: none;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-web-process a:focus-visible {\n    outline: 3px solid var(--dx-process-yellow);\n    outline-offset: 4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    #dx-web-process *,\n    #dx-web-process *::before,\n    #dx-web-process *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-web-process\"\n    aria-labelledby=\"dx-web-process-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n    <div\n        class=\"dx-process-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <span\n        class=\"dx-process-glow dx-process-glow-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-process-glow dx-process-glow-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-process-main\">\n\n        <div class=\"dx-process-container\">\n\n            <header class=\"dx-process-header\">\n\n                <span class=\"dx-process-eyebrow\">\n                    Clear Steps From Idea to Launch\n                <\/span>\n\n                <h2\n                    id=\"dx-web-process-title\"\n                    class=\"dx-process-title\"\n                >\n                    How We Design and Develop\n                    <span>Your Website<\/span>\n                <\/h2>\n\n                <p class=\"dx-process-description\">\n                    We follow a structured implementation process that\n                    turns your project goals into a professional website,\n                    from understanding your business and target audience\n                    to testing, launch, and ongoing follow-up.\n                <\/p>\n\n            <\/header>\n\n            <div class=\"dx-process-list\">\n\n                <!-- STEP 01 -->\n\n                <article class=\"dx-process-item\">\n\n                    <div class=\"dx-process-item-content\">\n\n                        <div class=\"dx-process-item-meta\">\n                            <span class=\"dx-process-item-number\">\n                                Stage 01\n                            <\/span>\n\n                            <span class=\"dx-process-item-label\">\n                                Research & Planning\n                            <\/span>\n                        <\/div>\n\n                        <h3 class=\"dx-process-item-title\">\n                            Project & Requirements Analysis\n                        <\/h3>\n\n                        <p class=\"dx-process-item-description\">\n                            We begin by understanding your business,\n                            website goals, target audience, and competitors,\n                            then define the right website type, pages,\n                            features, and required integrations.\n                        <\/p>\n\n                        <div class=\"dx-process-deliverables\">\n                            <span class=\"dx-process-deliverable\">\n                                Project Goals\n                            <\/span>\n\n                            <span class=\"dx-process-deliverable\">\n                                Sitemap\n                            <\/span>\n\n                            <span class=\"dx-process-deliverable\">\n                                Technical Requirements\n                            <\/span>\n                        <\/div>\n\n                    <\/div>\n\n                    <span\n                        class=\"dx-process-node\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <circle\n                                cx=\"11\"\n                                cy=\"11\"\n                                r=\"7\"\n                            ><\/circle>\n                            <path d=\"m20 20-4-4\"><\/path>\n                            <path d=\"M8 11h6\"><\/path>\n                            <path d=\"M11 8v6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <div\n                        class=\"dx-process-empty\"\n                        aria-hidden=\"true\"\n                    ><\/div>\n\n                <\/article>\n\n                <!-- STEP 02 -->\n\n                <article class=\"dx-process-item\">\n\n                    <div\n                        class=\"dx-process-empty\"\n                        aria-hidden=\"true\"\n                    ><\/div>\n\n                    <span\n                        class=\"dx-process-node\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M3 6h18\"><\/path>\n                            <path d=\"M3 12h10\"><\/path>\n                            <path d=\"M3 18h14\"><\/path>\n                            <circle\n                                cx=\"18\"\n                                cy=\"12\"\n                                r=\"3\"\n                            ><\/circle>\n                        <\/svg>\n                    <\/span>\n\n                    <div class=\"dx-process-item-content\">\n\n                        <div class=\"dx-process-item-meta\">\n                            <span class=\"dx-process-item-number\">\n                                Stage 02\n                            <\/span>\n\n                            <span class=\"dx-process-item-label\">\n                                Structure & Content\n                            <\/span>\n                        <\/div>\n\n                        <h3 class=\"dx-process-item-title\">\n                            Page Structure & User Experience Planning\n                        <\/h3>\n\n                        <p class=\"dx-process-item-description\">\n                            We organize the visitor journey, content,\n                            sections, and calls to action so information\n                            is clear and users can reach the intended\n                            goal quickly and easily.\n                        <\/p>\n\n                        <div class=\"dx-process-deliverables\">\n                            <span class=\"dx-process-deliverable\">\n                                User Journey\n                            <\/span>\n\n                            <span class=\"dx-process-deliverable\">\n                                Content Structure\n                            <\/span>\n\n                            <span class=\"dx-process-deliverable\">\n                                Conversion Paths\n                            <\/span>\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n                <!-- STEP 03 -->\n\n                <article class=\"dx-process-item\">\n\n                    <div class=\"dx-process-item-content\">\n\n                        <div class=\"dx-process-item-meta\">\n                            <span class=\"dx-process-item-number\">\n                                Stage 03\n                            <\/span>\n\n                            <span class=\"dx-process-item-label\">\n                                Design\n                            <\/span>\n                        <\/div>\n\n                        <h3 class=\"dx-process-item-title\">\n                            Website Interface Design\n                        <\/h3>\n\n                        <p class=\"dx-process-item-description\">\n                            We design interfaces that align with your\n                            visual identity and business type, with a\n                            strong focus on content clarity, usability,\n                            and responsive behavior across mobile,\n                            tablet, and desktop.\n                        <\/p>\n\n                        <div class=\"dx-process-deliverables\">\n                            <span class=\"dx-process-deliverable\">\n                                Visual Identity\n                            <\/span>\n\n                            <span class=\"dx-process-deliverable\">\n                                UI Design\n                            <\/span>\n\n                            <span class=\"dx-process-deliverable\">\n                                Responsive Design\n                            <\/span>\n                        <\/div>\n\n                    <\/div>\n\n                    <span\n                        class=\"dx-process-node\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M12 20h9\"><\/path>\n                            <path d=\"M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z\"><\/path>\n                            <path d=\"m15 5 3 3\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <div\n                        class=\"dx-process-empty\"\n                        aria-hidden=\"true\"\n                    ><\/div>\n\n                <\/article>\n\n                <!-- STEP 04 -->\n\n                <article class=\"dx-process-item\">\n\n                    <div\n                        class=\"dx-process-empty\"\n                        aria-hidden=\"true\"\n                    ><\/div>\n\n                    <span\n                        class=\"dx-process-node\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"m8 9-3 3 3 3\"><\/path>\n                            <path d=\"m16 9 3 3-3 3\"><\/path>\n                            <path d=\"m14 5-4 14\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <div class=\"dx-process-item-content\">\n\n                        <div class=\"dx-process-item-meta\">\n                            <span class=\"dx-process-item-number\">\n                                Stage 04\n                            <\/span>\n\n                            <span class=\"dx-process-item-label\">\n                                Development\n                            <\/span>\n                        <\/div>\n\n                        <h3 class=\"dx-process-item-title\">\n                            Development & Integrations\n                        <\/h3>\n\n                        <p class=\"dx-process-item-description\">\n                            We turn the approved design into a fast and\n                            secure website, configure the admin panel,\n                            forms, and required functionality, and connect\n                            payment, booking, or external tools when needed.\n                        <\/p>\n\n                        <div class=\"dx-process-deliverables\">\n                            <span class=\"dx-process-deliverable\">\n                                Page Development\n                            <\/span>\n\n                            <span class=\"dx-process-deliverable\">\n                                Admin Panel\n                            <\/span>\n\n                            <span class=\"dx-process-deliverable\">\n                                Integrations\n                            <\/span>\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n                <!-- STEP 05 -->\n\n                <article class=\"dx-process-item\">\n\n                    <div class=\"dx-process-item-content\">\n\n                        <div class=\"dx-process-item-meta\">\n                            <span class=\"dx-process-item-number\">\n                                Stage 05\n                            <\/span>\n\n                            <span class=\"dx-process-item-label\">\n                                Testing & Launch\n                            <\/span>\n                        <\/div>\n\n                        <h3 class=\"dx-process-item-title\">\n                            Review, Launch & Follow-Up\n                        <\/h3>\n\n                        <p class=\"dx-process-item-description\">\n                            We review the website across different devices\n                            and browsers, test forms, links, and performance,\n                            then launch it and show your team how to manage\n                            the website with technical follow-up afterward.\n                        <\/p>\n\n                        <div class=\"dx-process-deliverables\">\n                            <span class=\"dx-process-deliverable\">\n                                Comprehensive Testing\n                            <\/span>\n\n                            <span class=\"dx-process-deliverable\">\n                                Website Launch\n                            <\/span>\n\n                            <span class=\"dx-process-deliverable\">\n                                Training & Support\n                            <\/span>\n                        <\/div>\n\n                    <\/div>\n\n                    <span\n                        class=\"dx-process-node\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M12 2v4\"><\/path>\n                            <path d=\"M12 18v4\"><\/path>\n                            <path d=\"M4.93 4.93 7.76 7.76\"><\/path>\n                            <path d=\"m16.24 16.24 2.83 2.83\"><\/path>\n                            <path d=\"M2 12h4\"><\/path>\n                            <path d=\"M18 12h4\"><\/path>\n                            <path d=\"m4.93 19.07 2.83-2.83\"><\/path>\n                            <path d=\"m16.24 7.76 2.83-2.83\"><\/path>\n                            <circle\n                                cx=\"12\"\n                                cy=\"12\"\n                                r=\"4\"\n                            ><\/circle>\n                        <\/svg>\n                    <\/span>\n\n                    <div\n                        class=\"dx-process-empty\"\n                        aria-hidden=\"true\"\n                    ><\/div>\n\n                <\/article>\n\n            <\/div>\n\n            <div class=\"dx-process-bottom\">\n\n                <div class=\"dx-process-bottom-copy\">\n\n                    <span\n                        class=\"dx-process-bottom-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M12 3v18\"><\/path>\n                            <path d=\"M3 12h18\"><\/path>\n                            <circle\n                                cx=\"12\"\n                                cy=\"12\"\n                                r=\"9\"\n                            ><\/circle>\n                        <\/svg>\n                    <\/span>\n\n                    <div>\n\n                        <h3 class=\"dx-process-bottom-title\">\n                            Every Project Gets an Implementation Plan Built Around Its Needs\n                        <\/h3>\n\n                        <p class=\"dx-process-bottom-text\">\n                            Pages, features, technologies, and project\n                            stages are defined according to the website\n                            type, business objectives, and required\n                            management approach.\n                        <\/p>\n\n                    <\/div>\n\n                <\/div>\n\n                <a\n                    href=\"https:\/\/dindex.net\/en\/contact\/\"\n                    class=\"dx-process-button\"\n                >\n                    <span>Start Your Project With Us<\/span>\n\n                    <svg\n                        viewBox=\"0 0 24 24\"\n                        aria-hidden=\"true\"\n                    >\n                        <path d=\"M5 12h14\"><\/path>\n                        <path d=\"m13 6 6 6-6 6\"><\/path>\n                    <\/svg>\n                <\/a>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxWebProcess() {\n        const section = document.getElementById(\n            \"dx-web-process\"\n        );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized = \"true\";\n\n        const widget = section.closest(\n            \".elementor-widget-html\"\n        );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-web-process-widget-fullwidth\"\n            );\n        }\n\n        if (\n            !(\"IntersectionObserver\" in window) ||\n            window.matchMedia(\n                \"(prefers-reduced-motion: reduce)\"\n            ).matches\n        ) {\n            return;\n        }\n\n        const items = section.querySelectorAll(\n            \".dx-process-item\"\n        );\n\n        items.forEach(function (item, index) {\n            item.style.opacity = \"0\";\n            item.style.transform = \"translateY(24px)\";\n\n            item.style.transition =\n                \"opacity 0.58s ease \" +\n                index * 0.08 +\n                \"s, transform 0.58s ease \" +\n                index * 0.08 +\n                \"s\";\n        });\n\n        const observer = new IntersectionObserver(\n            function (entries, currentObserver) {\n                entries.forEach(function (entry) {\n                    if (!entry.isIntersecting) {\n                        return;\n                    }\n\n                    entry.target.style.opacity = \"1\";\n                    entry.target.style.transform = \"translateY(0)\";\n\n                    currentObserver.unobserve(\n                        entry.target\n                    );\n                });\n            },\n            {\n                threshold: 0.12\n            }\n        );\n\n        items.forEach(function (item) {\n            observer.observe(item);\n        });\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxWebProcess\n        );\n    } else {\n        initDxWebProcess();\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f41c093 e-con-full e-flex e-con e-parent\" data-id=\"f41c093\" 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-aa66f04 elementor-widget elementor-widget-html\" data-id=\"aa66f04\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- =========================================================\n     HOME TESTIMONIALS SECTION\n     Author: Mohamed El-Sehemy\n     Video + Text Testimonials\n     English LTR - Elementor Compatible\n========================================================== -->\n\n<style>\n\/* =========================================================\n   ELEMENTOR FULL WIDTH\n========================================================= *\/\n\n.elementor-widget-html:has(#dx-home-testimonials),\n.elementor-widget-html:has(#dx-home-testimonials) > .elementor-widget-container,\n.dx-testimonials-widget-fullwidth,\n.dx-testimonials-widget-fullwidth > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n\/* =========================================================\n   RESET\n========================================================= *\/\n\n#dx-home-testimonials,\n#dx-home-testimonials *,\n#dx-home-testimonials *::before,\n#dx-home-testimonials *::after {\n    box-sizing: border-box;\n}\n\n#dx-home-testimonials {\n    --dx-purple: #6942d8;\n    --dx-purple-light: #9168ef;\n    --dx-yellow: #ffc441;\n    --dx-dark: #160a31;\n    --dx-text: #625c6f;\n    --dx-muted: #85808e;\n    --dx-white: #ffffff;\n    --dx-bg: #f8f7fc;\n    --dx-border: rgba(105, 66, 216, 0.13);\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n\n    direction: ltr;\n\n    color: var(--dx-dark);\n\n    background:\n        radial-gradient(\n            circle at 8% 10%,\n            rgba(105, 66, 216, 0.075),\n            transparent 25%\n        ),\n        radial-gradient(\n            circle at 92% 92%,\n            rgba(145, 104, 239, 0.065),\n            transparent 28%\n        ),\n        var(--dx-bg);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-home-testimonials button {\n    font: inherit;\n}\n\n\/* =========================================================\n   DECORATIONS\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-orbit {\n    position: absolute;\n    z-index: -3;\n\n    border: 1px solid rgba(105, 66, 216, 0.10);\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-home-testimonials .dx-test-orbit-one {\n    top: -210px;\n    left: -180px;\n\n    width: 430px;\n    height: 430px;\n}\n\n#dx-home-testimonials .dx-test-orbit-two {\n    right: -190px;\n    bottom: -250px;\n\n    width: 480px;\n    height: 480px;\n}\n\n#dx-home-testimonials .dx-test-dots {\n    position: absolute;\n    z-index: -2;\n\n    width: 120px;\n    height: 120px;\n\n    opacity: 0.23;\n\n    background-image:\n        radial-gradient(\n            circle,\n            var(--dx-purple-light) 2px,\n            transparent 2.7px\n        );\n\n    background-size: 17px 17px;\n\n    pointer-events: none;\n}\n\n#dx-home-testimonials .dx-test-dots-one {\n    top: 70px;\n    right: 4%;\n}\n\n#dx-home-testimonials .dx-test-dots-two {\n    left: 3%;\n    bottom: 50px;\n}\n\n\/* =========================================================\n   SECTION LAYOUT\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        90px\n        clamp(22px, 5vw, 90px)\n        88px;\n}\n\n#dx-home-testimonials .dx-test-container {\n    width: min(1450px, 100%);\n    margin: 0 auto;\n}\n\n\/* =========================================================\n   MAIN HEADER\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-header {\n    max-width: 800px;\n\n    margin: 0 auto 48px;\n\n    text-align: center;\n}\n\n#dx-home-testimonials .dx-test-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    margin-bottom: 11px;\n\n    color: var(--dx-purple);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.6;\n}\n\n#dx-home-testimonials .dx-test-eyebrow::before,\n#dx-home-testimonials .dx-test-eyebrow::after {\n    content: \"\";\n\n    width: 31px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-yellow),\n            var(--dx-purple-light)\n        );\n}\n\n#dx-home-testimonials .dx-test-title {\n    margin: 0;\n\n    color: var(--dx-dark);\n\n    font-size: clamp(35px, 3.7vw, 56px);\n    font-weight: 900;\n    line-height: 1.25;\n    letter-spacing: -1px;\n}\n\n#dx-home-testimonials .dx-test-description {\n    max-width: 700px;\n\n    margin: 15px auto 0;\n\n    color: var(--dx-text);\n\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.8;\n}\n\n\/* =========================================================\n   VIDEO TESTIMONIALS\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-video-grid {\n    width: min(1200px, 100%);\n\n    margin: 0 auto 62px;\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(2, minmax(0, 1fr));\n\n    gap: 25px;\n}\n\n#dx-home-testimonials .dx-test-video-card {\n    position: relative;\n    isolation: isolate;\n\n    width: 100%;\n    aspect-ratio: 16 \/ 9;\n\n    padding: 0;\n\n    overflow: hidden;\n\n    border: 1px solid rgba(105, 66, 216, 0.12);\n    border-radius: 22px;\n\n    background: #13082f;\n\n    box-shadow:\n        0 24px 55px rgba(31, 13, 70, 0.18);\n\n    cursor: pointer;\n\n    transition:\n        transform 0.35s ease,\n        box-shadow 0.35s ease,\n        border-color 0.35s ease;\n}\n\n#dx-home-testimonials .dx-test-video-card:hover,\n#dx-home-testimonials .dx-test-video-card:focus-visible {\n    border-color: rgba(105, 66, 216, 0.40);\n\n    box-shadow:\n        0 32px 70px rgba(31, 13, 70, 0.25);\n\n    transform: translateY(-7px);\n}\n\n#dx-home-testimonials .dx-test-video-image {\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n    object-position: center;\n\n    transition:\n        transform 0.55s ease,\n        filter 0.55s ease;\n}\n\n#dx-home-testimonials .dx-test-video-card:hover .dx-test-video-image {\n    transform: scale(1.045);\n\n    filter: brightness(0.82);\n}\n\n#dx-home-testimonials .dx-test-video-overlay {\n    position: absolute;\n    z-index: 2;\n\n    inset: 0;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    background:\n        linear-gradient(\n            180deg,\n            rgba(13, 4, 37, 0.08),\n            rgba(13, 4, 37, 0.35)\n        );\n}\n\n#dx-home-testimonials .dx-test-play {\n    position: relative;\n\n    width: 82px;\n    height: 82px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid rgba(255, 255, 255, 0.55);\n    border-radius: 50%;\n\n    color: var(--dx-white);\n\n    background:\n        linear-gradient(\n            135deg,\n            rgba(105, 66, 216, 0.96),\n            rgba(145, 104, 239, 0.96)\n        );\n\n    box-shadow:\n        0 18px 42px rgba(58, 26, 132, 0.40);\n\n    transition:\n        transform 0.3s ease,\n        box-shadow 0.3s ease;\n}\n\n#dx-home-testimonials .dx-test-play::before {\n    content: \"\";\n\n    position: absolute;\n\n    inset: -12px;\n\n    border: 1px solid rgba(255, 255, 255, 0.27);\n    border-radius: 50%;\n\n    animation:\n        dxTestPulse\n        2.2s\n        ease-out\n        infinite;\n}\n\n#dx-home-testimonials .dx-test-video-card:hover .dx-test-play {\n    transform: scale(1.08);\n\n    box-shadow:\n        0 23px 50px rgba(58, 26, 132, 0.52);\n}\n\n#dx-home-testimonials .dx-test-play svg {\n    width: 31px;\n    height: 31px;\n\n    fill: currentColor;\n\n    transform: translateX(2px);\n}\n\n@keyframes dxTestPulse {\n\n    0% {\n        opacity: 0.75;\n\n        transform: scale(0.88);\n    }\n\n    100% {\n        opacity: 0;\n\n        transform: scale(1.35);\n    }\n}\n\n#dx-home-testimonials .dx-test-video-badge {\n    position: absolute;\n    z-index: 3;\n\n    left: 18px;\n    bottom: 17px;\n\n    display: inline-flex;\n    align-items: center;\n\n    gap: 7px;\n\n    padding:\n        8px\n        12px;\n\n    border:\n        1px solid rgba(255, 255, 255, 0.16);\n\n    border-radius:\n        999px;\n\n    color:\n        var(--dx-white);\n\n    background:\n        rgba(13, 4, 37, 0.70);\n\n    -webkit-backdrop-filter:\n        blur(12px);\n\n    backdrop-filter:\n        blur(12px);\n\n    font-size:\n        12px;\n\n    font-weight:\n        700;\n\n    line-height:\n        1.4;\n}\n\n#dx-home-testimonials .dx-test-video-badge svg {\n    width: 15px;\n    height: 15px;\n\n    fill: currentColor;\n}\n\n\/* =========================================================\n   TEXT TESTIMONIALS HEADER\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-text-section {\n    position: relative;\n\n    width: 100%;\n}\n\n#dx-home-testimonials .dx-test-subheader {\n    max-width: 720px;\n\n    margin: 0 auto 30px;\n\n    text-align: center;\n}\n\n#dx-home-testimonials .dx-test-subtitle {\n    margin: 0;\n\n    color: var(--dx-dark);\n\n    font-size:\n        clamp(\n            25px,\n            2.4vw,\n            36px\n        );\n\n    font-weight: 900;\n    line-height: 1.3;\n}\n\n#dx-home-testimonials .dx-test-subdescription {\n    margin: 9px auto 0;\n\n    color: var(--dx-muted);\n\n    font-size: 15px;\n    font-weight: 400;\n    line-height: 1.75;\n}\n\n\/* =========================================================\n   SLIDER\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-slider {\n    position: relative;\n\n    width: 100%;\n\n    padding:\n        0\n        58px;\n}\n\n#dx-home-testimonials .dx-test-viewport {\n    width: 100%;\n\n    overflow: hidden;\n}\n\n#dx-home-testimonials .dx-test-track {\n    display: flex;\n\n    direction: ltr;\n\n    transition:\n        transform\n        1.05s\n        cubic-bezier(\n            0.22,\n            0.61,\n            0.36,\n            1\n        );\n\n    will-change: transform;\n}\n\n#dx-home-testimonials .dx-test-slide {\n    flex:\n        0\n        0\n        50%;\n\n    min-width: 0;\n\n    padding: 12px;\n}\n\n\/* =========================================================\n   REVIEW CARD\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-card {\n    position: relative;\n\n    height: 100%;\n    min-height: 320px;\n\n    padding:\n        31px\n        30px\n        28px;\n\n    display: flex;\n    flex-direction: column;\n\n    overflow: hidden;\n\n    border:\n        1px solid var(--dx-border);\n\n    border-radius:\n        21px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.98),\n            rgba(252, 250, 255, 0.96)\n        );\n\n    box-shadow:\n        0 20px 48px rgba(42, 20, 88, 0.09);\n\n    transition:\n        transform 0.3s ease,\n        box-shadow 0.3s ease,\n        border-color 0.3s ease;\n}\n\n#dx-home-testimonials .dx-test-card:hover {\n    border-color:\n        rgba(105, 66, 216, 0.28);\n\n    box-shadow:\n        0 27px 58px rgba(42, 20, 88, 0.14);\n\n    transform:\n        translateY(-5px);\n}\n\n#dx-home-testimonials .dx-test-quote-icon {\n    position: absolute;\n\n    top: 22px;\n    right: 24px;\n\n    width: 54px;\n    height: 54px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 17px;\n\n    color: var(--dx-purple);\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(105, 66, 216, 0.12),\n            rgba(145, 104, 239, 0.055)\n        );\n}\n\n#dx-home-testimonials .dx-test-quote-icon svg {\n    width: 27px;\n    height: 27px;\n\n    fill: currentColor;\n}\n\n#dx-home-testimonials .dx-test-stars {\n    display: flex;\n    align-items: center;\n\n    gap: 3px;\n\n    margin-bottom: 22px;\n\n    color: var(--dx-yellow);\n\n    font-size: 17px;\n    line-height: 1;\n}\n\n#dx-home-testimonials .dx-test-review {\n    flex-grow: 1;\n\n    margin: 0;\n\n    padding-right: 82px;\n\n    color: var(--dx-text);\n\n    font-size: 15px;\n    font-weight: 400;\n    line-height: 1.9;\n}\n\n#dx-home-testimonials .dx-test-person {\n    margin-top: 27px;\n\n    padding-top: 21px;\n\n    display: flex;\n    align-items: center;\n\n    gap: 13px;\n\n    border-top:\n        1px solid rgba(105, 66, 216, 0.10);\n}\n\n#dx-home-testimonials .dx-test-avatar {\n    width: 54px;\n    height: 54px;\n    flex: 0 0 54px;\n\n    overflow: hidden;\n\n    border:\n        3px solid rgba(105, 66, 216, 0.11);\n\n    border-radius: 50%;\n\n    background: #eeeaf7;\n}\n\n#dx-home-testimonials .dx-test-avatar img {\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n    object-position: center;\n}\n\n#dx-home-testimonials .dx-test-person-info {\n    min-width: 0;\n\n    display: flex;\n    flex-direction: column;\n\n    text-align: left;\n}\n\n#dx-home-testimonials .dx-test-person-name {\n    color: var(--dx-dark);\n\n    font-size: 15px;\n    font-weight: 800;\n    line-height: 1.5;\n}\n\n#dx-home-testimonials .dx-test-person-company {\n    margin-top: 3px;\n\n    color: var(--dx-muted);\n\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 1.5;\n}\n\n\/* =========================================================\n   SLIDER ARROWS\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-arrow {\n    position: absolute;\n    z-index: 10;\n\n    top: 50%;\n\n    width: 46px;\n    height: 46px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    padding: 0;\n\n    border:\n        1px solid rgba(105, 66, 216, 0.14);\n\n    border-radius: 50%;\n\n    color: var(--dx-purple);\n\n    background:\n        var(--dx-white);\n\n    box-shadow:\n        0 14px 30px rgba(41, 19, 87, 0.14);\n\n    cursor: pointer;\n\n    transform:\n        translateY(-50%);\n\n    transition:\n        color 0.25s ease,\n        background 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-home-testimonials .dx-test-arrow:hover,\n#dx-home-testimonials .dx-test-arrow:focus-visible {\n    color: var(--dx-white);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-purple),\n            var(--dx-purple-light)\n        );\n\n    box-shadow:\n        0 18px 38px rgba(105, 66, 216, 0.28);\n}\n\n#dx-home-testimonials .dx-test-arrow-prev {\n    left: 0;\n}\n\n#dx-home-testimonials .dx-test-arrow-next {\n    right: 0;\n}\n\n#dx-home-testimonials .dx-test-arrow svg {\n    width: 20px;\n    height: 20px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   PAGINATION\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-pagination {\n    margin-top: 24px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 8px;\n}\n\n#dx-home-testimonials .dx-test-dot {\n    width: 8px;\n    height: 8px;\n\n    padding: 0;\n\n    border: 0;\n    border-radius: 999px;\n\n    background:\n        rgba(105, 66, 216, 0.20);\n\n    cursor: pointer;\n\n    transition:\n        width 0.25s ease,\n        background 0.25s ease;\n}\n\n#dx-home-testimonials .dx-test-dot.is-active {\n    width: 28px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-purple),\n            var(--dx-purple-light)\n        );\n}\n\n\/* =========================================================\n   VIDEO MODAL\n========================================================= *\/\n\n.dx-test-modal {\n    position: fixed;\n    z-index: 999999;\n\n    inset: 0;\n\n    display: none;\n    align-items: center;\n    justify-content: center;\n\n    padding:\n        70px\n        28px\n        28px;\n\n    background:\n        rgba(5, 0, 20, 0.92);\n\n    -webkit-backdrop-filter:\n        blur(10px);\n\n    backdrop-filter:\n        blur(10px);\n}\n\n.dx-test-modal.is-open {\n    display: flex;\n\n    animation:\n        dxTestModalFade\n        0.25s\n        ease\n        both;\n}\n\n@keyframes dxTestModalFade {\n\n    from {\n        opacity: 0;\n    }\n\n    to {\n        opacity: 1;\n    }\n}\n\n.dx-test-modal-dialog {\n    position: relative;\n\n    width:\n        min(\n            1200px,\n            100%\n        );\n\n    aspect-ratio:\n        16 \/ 9;\n\n    overflow: hidden;\n\n    border:\n        1px solid rgba(255, 255, 255, 0.15);\n\n    border-radius:\n        20px;\n\n    background:\n        #000000;\n\n    box-shadow:\n        0 35px 100px rgba(0, 0, 0, 0.60);\n\n    animation:\n        dxTestModalScale\n        0.3s\n        ease\n        both;\n}\n\n@keyframes dxTestModalScale {\n\n    from {\n        opacity: 0;\n\n        transform:\n            scale(0.94)\n            translateY(10px);\n    }\n\n    to {\n        opacity: 1;\n\n        transform:\n            scale(1)\n            translateY(0);\n    }\n}\n\n.dx-test-modal-video {\n    width: 100%;\n    height: 100%;\n}\n\n.dx-test-modal-video iframe {\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    border: 0;\n}\n\n\/* =========================================================\n   VIDEO MODAL CLOSE BUTTON\n========================================================= *\/\n\n.dx-test-modal-close {\n    position:\n        fixed !important;\n\n    z-index:\n        2147483647 !important;\n\n    top:\n        22px !important;\n\n    right:\n        24px !important;\n\n    width:\n        48px !important;\n\n    height:\n        48px !important;\n\n    display:\n        flex !important;\n\n    align-items:\n        center !important;\n\n    justify-content:\n        center !important;\n\n    margin:\n        0 !important;\n\n    padding:\n        0 !important;\n\n    border:\n        1px solid rgba(255, 255, 255, 0.35) !important;\n\n    border-radius:\n        14px !important;\n\n    background:\n        linear-gradient(\n            135deg,\n            #6942d8,\n            #9168ef\n        ) !important;\n\n    box-shadow:\n        0 12px 30px rgba(0, 0, 0, 0.38) !important;\n\n    cursor:\n        pointer !important;\n\n    appearance:\n        none !important;\n\n    -webkit-appearance:\n        none !important;\n\n    opacity:\n        1 !important;\n\n    visibility:\n        visible !important;\n\n    transition:\n        transform 0.25s ease,\n        background 0.25s ease,\n        box-shadow 0.25s ease !important;\n}\n\n.dx-test-modal-close::before,\n.dx-test-modal-close::after {\n    content:\n        \"\" !important;\n\n    position:\n        absolute !important;\n\n    top:\n        50% !important;\n\n    left:\n        50% !important;\n\n    width:\n        23px !important;\n\n    height:\n        3px !important;\n\n    display:\n        block !important;\n\n    border-radius:\n        999px !important;\n\n    background:\n        #ffffff !important;\n\n    transform-origin:\n        center !important;\n\n    opacity:\n        1 !important;\n\n    visibility:\n        visible !important;\n\n    pointer-events:\n        none !important;\n}\n\n.dx-test-modal-close::before {\n    transform:\n        translate(-50%, -50%)\n        rotate(45deg) !important;\n}\n\n.dx-test-modal-close::after {\n    transform:\n        translate(-50%, -50%)\n        rotate(-45deg) !important;\n}\n\n.dx-test-modal-close:hover,\n.dx-test-modal-close:focus-visible {\n    background:\n        linear-gradient(\n            135deg,\n            #9168ef,\n            #6942d8\n        ) !important;\n\n    box-shadow:\n        0 16px 38px rgba(105, 66, 216, 0.48) !important;\n\n    transform:\n        scale(1.08) !important;\n}\n\n.dx-test-modal-close:focus-visible {\n    outline:\n        3px solid #ffc441 !important;\n\n    outline-offset:\n        4px !important;\n}\n\n\/* =========================================================\n   RESPONSIVE\n========================================================= *\/\n\n@media (max-width: 900px) {\n\n    #dx-home-testimonials .dx-test-main {\n        padding:\n            76px\n            28px\n            74px;\n    }\n\n    #dx-home-testimonials .dx-test-video-grid {\n        gap: 18px;\n\n        margin-bottom:\n            52px;\n    }\n\n    #dx-home-testimonials .dx-test-slide {\n        flex-basis: 100%;\n    }\n\n    #dx-home-testimonials .dx-test-card {\n        min-height:\n            300px;\n    }\n}\n\n@media (max-width: 700px) {\n\n    #dx-home-testimonials .dx-test-video-grid {\n        grid-template-columns:\n            1fr;\n    }\n\n    #dx-home-testimonials .dx-test-slider {\n        padding:\n            0\n            37px;\n    }\n\n    #dx-home-testimonials .dx-test-arrow {\n        width:\n            40px;\n\n        height:\n            40px;\n    }\n\n    #dx-home-testimonials .dx-test-arrow-prev {\n        left:\n            -5px;\n    }\n\n    #dx-home-testimonials .dx-test-arrow-next {\n        right:\n            -5px;\n    }\n}\n\n@media (max-width: 600px) {\n\n    #dx-home-testimonials .dx-test-main {\n        padding:\n            64px\n            20px\n            62px;\n    }\n\n    #dx-home-testimonials .dx-test-header {\n        margin-bottom:\n            35px;\n    }\n\n    #dx-home-testimonials .dx-test-title {\n        font-size:\n            clamp(\n                29px,\n                9vw,\n                40px\n            );\n\n        line-height:\n            1.3;\n    }\n\n    #dx-home-testimonials .dx-test-description {\n        font-size:\n            15px;\n\n        line-height:\n            1.75;\n    }\n\n    #dx-home-testimonials .dx-test-video-grid {\n        margin-bottom:\n            47px;\n    }\n\n    #dx-home-testimonials .dx-test-video-card {\n        border-radius:\n            17px;\n    }\n\n    #dx-home-testimonials .dx-test-play {\n        width:\n            66px;\n\n        height:\n            66px;\n    }\n\n    #dx-home-testimonials .dx-test-play svg {\n        width:\n            26px;\n\n        height:\n            26px;\n    }\n\n    #dx-home-testimonials .dx-test-subtitle {\n        font-size:\n            27px;\n\n        line-height:\n            1.35;\n    }\n\n    #dx-home-testimonials .dx-test-subdescription {\n        font-size:\n            14px;\n\n        line-height:\n            1.7;\n    }\n\n    #dx-home-testimonials .dx-test-slider {\n        padding:\n            0;\n    }\n\n    #dx-home-testimonials .dx-test-slide {\n        padding:\n            6px;\n    }\n\n    #dx-home-testimonials .dx-test-card {\n        min-height:\n            0;\n\n        padding:\n            26px\n            22px\n            23px;\n\n        border-radius:\n            17px;\n    }\n\n    #dx-home-testimonials .dx-test-quote-icon {\n        top:\n            18px;\n\n        right:\n            18px;\n\n        width:\n            46px;\n\n        height:\n            46px;\n\n        border-radius:\n            14px;\n    }\n\n    #dx-home-testimonials .dx-test-review {\n        padding-right:\n            58px;\n\n        font-size:\n            14px;\n\n        line-height:\n            1.8;\n    }\n\n    #dx-home-testimonials .dx-test-arrow {\n        top:\n            auto;\n\n        bottom:\n            -58px;\n\n        width:\n            42px;\n\n        height:\n            42px;\n    }\n\n    #dx-home-testimonials .dx-test-arrow-prev {\n        left:\n            calc(50% - 50px);\n    }\n\n    #dx-home-testimonials .dx-test-arrow-next {\n        right:\n            calc(50% - 50px);\n    }\n\n    #dx-home-testimonials .dx-test-pagination {\n        margin-top:\n            73px;\n    }\n\n    .dx-test-modal {\n        padding:\n            65px\n            12px\n            20px;\n    }\n\n    .dx-test-modal-dialog {\n        border-radius:\n            13px;\n    }\n\n    .dx-test-modal-close {\n        top:\n            14px !important;\n\n        right:\n            14px !important;\n\n        width:\n            44px !important;\n\n        height:\n            44px !important;\n\n        border-radius:\n            12px !important;\n    }\n\n    .dx-test-modal-close::before,\n    .dx-test-modal-close::after {\n        width:\n            21px !important;\n\n        height:\n            3px !important;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-home-testimonials button:focus-visible {\n    outline:\n        2px solid var(--dx-yellow);\n\n    outline-offset:\n        4px;\n}\n\nbody.dx-test-modal-open {\n    overflow:\n        hidden !important;\n}\n\n@media (prefers-reduced-motion: reduce) {\n\n    #dx-home-testimonials *,\n    #dx-home-testimonials *::before,\n    #dx-home-testimonials *::after,\n    .dx-test-modal *,\n    .dx-test-modal *::before,\n    .dx-test-modal *::after {\n        animation-duration:\n            0.01ms !important;\n\n        animation-iteration-count:\n            1 !important;\n\n        transition-duration:\n            0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-home-testimonials\"\n    aria-labelledby=\"dx-testimonials-title\"\n    dir=\"ltr\"\n>\n\n    <span\n        class=\"dx-test-orbit dx-test-orbit-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-test-orbit dx-test-orbit-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-test-dots dx-test-dots-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-test-dots dx-test-dots-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-test-main\">\n\n        <div class=\"dx-test-container\">\n\n            <!-- =================================================\n                 HEADER\n            ================================================== -->\n\n            <header class=\"dx-test-header\">\n\n                <span class=\"dx-test-eyebrow\">\n                    Client Testimonials\n                <\/span>\n\n                <h2\n                    id=\"dx-testimonials-title\"\n                    class=\"dx-test-title\"\n                >\n                    What Our Clients Say\n                <\/h2>\n\n                <p class=\"dx-test-description\">\n                    Real experiences from clients who trusted us\n                    to build, improve, and support their digital projects.\n                <\/p>\n\n            <\/header>\n\n            <!-- =================================================\n                 VIDEO TESTIMONIALS\n            ================================================== -->\n\n            <div class=\"dx-test-video-grid\">\n\n                <button\n                    type=\"button\"\n                    class=\"dx-test-video-card\"\n                    data-video-id=\"dtCRXdp2qag\"\n                    aria-label=\"Play the first client video testimonial\"\n                >\n                    <img loading=\"lazy\"\n                        src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/06\/84ef21a8-e751-498c-be44-d2fdf0882d6d.webp\"\n                        class=\"dx-test-video-image\"\n                        alt=\"Client video testimonial\"\n                        width=\"1600\"\n                        height=\"900\"\n                        loading=\"lazy\"\n                        decoding=\"async\"\n                    >\n\n                    <span class=\"dx-test-video-overlay\">\n\n                        <span\n                            class=\"dx-test-play\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M8 5v14l11-7z\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                    <\/span>\n\n                    <span class=\"dx-test-video-badge\">\n\n                        <svg\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <path d=\"M8 5v14l11-7z\"><\/path>\n                        <\/svg>\n\n                        <span>\n                            Watch Client Story\n                        <\/span>\n\n                    <\/span>\n                <\/button>\n\n                <button\n                    type=\"button\"\n                    class=\"dx-test-video-card\"\n                    data-video-id=\"tB7nBjjZoy8\"\n                    aria-label=\"Play the second client video testimonial\"\n                >\n                    <img loading=\"lazy\"\n                        src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/06\/e0eafccc-e822-4b9b-ace4-726086252662.webp\"\n                        class=\"dx-test-video-image\"\n                        alt=\"Client video testimonial\"\n                        width=\"1600\"\n                        height=\"900\"\n                        loading=\"lazy\"\n                        decoding=\"async\"\n                    >\n\n                    <span class=\"dx-test-video-overlay\">\n\n                        <span\n                            class=\"dx-test-play\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M8 5v14l11-7z\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                    <\/span>\n\n                    <span class=\"dx-test-video-badge\">\n\n                        <svg\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <path d=\"M8 5v14l11-7z\"><\/path>\n                        <\/svg>\n\n                        <span>\n                            Watch Client Story\n                        <\/span>\n\n                    <\/span>\n                <\/button>\n\n            <\/div>\n\n            <!-- =================================================\n                 TEXT TESTIMONIALS\n            ================================================== -->\n\n            <div class=\"dx-test-text-section\">\n\n                <header class=\"dx-test-subheader\">\n\n                    <h3 class=\"dx-test-subtitle\">\n                        Client Experiences\n                    <\/h3>\n\n                    <p class=\"dx-test-subdescription\">\n                        Feedback that reflects the quality of our work,\n                        communication, support, and overall client experience.\n                    <\/p>\n\n                <\/header>\n\n                <div\n                    class=\"dx-test-slider\"\n                    aria-roledescription=\"carousel\"\n                    aria-label=\"Client testimonials\"\n                >\n\n                    <!-- PREVIOUS -->\n\n                    <button\n                        type=\"button\"\n                        class=\"dx-test-arrow dx-test-arrow-prev\"\n                        aria-label=\"Previous testimonials\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"m15 18-6-6 6-6\"><\/path>\n                        <\/svg>\n                    <\/button>\n\n                    <div class=\"dx-test-viewport\">\n\n                        <div class=\"dx-test-track\">\n\n                            <!-- =====================================\n                                 TESTIMONIAL 1\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        I would like to thank the team for the\n                                        overall experience. It was very positive.\n                                        They listened carefully to my needs,\n                                        understood the idea clearly from the\n                                        beginning, and made a real effort to\n                                        bring it to life. Every question was\n                                        handled professionally and responses\n                                        were always quick, which was very\n                                        important to me.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5856-scaled.jpg\"\n                                                alt=\"Waseem\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                Waseem\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                Go Coach\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 2\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        What I appreciated most was the genuine\n                                        knowledge and the strong relationship\n                                        throughout the work. Wishing the team\n                                        continued success.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5856-scaled.jpg\"\n                                                alt=\"Mohamed El Khouly\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                Mohamed El Khouly\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                LUM\u00c9A\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 3\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        Great team and excellent service.\n                                        If you need a professional website to\n                                        promote your business or location,\n                                        D-INDEX is an excellent choice.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5856-scaled.jpg\"\n                                                alt=\"James Swayze\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                James Swayze\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                GMCS Power Stations\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 4\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        I highly recommend D-INDEX.\n                                        The team is always ready to help\n                                        whenever you have a question or need\n                                        support.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5857-scaled.jpg\"\n                                                alt=\"Karina Salier\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                Karina Salier\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                High Performance Brain Training\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 5\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        Honest and professional to work with,\n                                        very cooperative, and fairly priced.\n                                        Thank you for the great effort and\n                                        excellent work.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5856-scaled.jpg\"\n                                                alt=\"DZ Daly\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                DZ Daly\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                DZ Store\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 6\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        One of the best companies I have worked\n                                        with. Great service and, more\n                                        importantly, great and honest people.\n                                        Truly a five-star experience.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5856-scaled.jpg\"\n                                                alt=\"Ibrahim Hassan\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                Ibrahim Hassan\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                R&amp;G\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 7\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        One of the most professional companies\n                                        I have worked with. They understood the\n                                        requirements from the first meeting,\n                                        were cooperative in finding solutions,\n                                        and responded quickly whenever an issue\n                                        came up. Their professionalism and\n                                        respectful communication were also\n                                        greatly appreciated.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5857-scaled.jpg\"\n                                                alt=\"Roaa Ahmed\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                Roaa Ahmed\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                My Soul Space\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 8\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        I am genuinely grateful for the success\n                                        I achieved while working with D-INDEX.\n                                        They have a creative touch that is\n                                        clearly noticeable when you work with\n                                        their team.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5857-scaled.jpg\"\n                                                alt=\"Laila Kandil\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                Laila Kandil\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                Educational Creativity Center\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <!-- NEXT -->\n\n                    <button\n                        type=\"button\"\n                        class=\"dx-test-arrow dx-test-arrow-next\"\n                        aria-label=\"Next testimonials\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"m9 18 6-6-6-6\"><\/path>\n                        <\/svg>\n                    <\/button>\n\n                    <div\n                        class=\"dx-test-pagination\"\n                        aria-label=\"Testimonial navigation\"\n                    ><\/div>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<!-- =========================================================\n     VIDEO MODAL\n========================================================== -->\n\n<div\n    class=\"dx-test-modal\"\n    id=\"dx-test-video-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"Client video testimonial\"\n    aria-hidden=\"true\"\n>\n\n    <button\n        type=\"button\"\n        class=\"dx-test-modal-close\"\n        aria-label=\"Close video\"\n    ><\/button>\n\n    <div class=\"dx-test-modal-dialog\">\n\n        <div class=\"dx-test-modal-video\"><\/div>\n\n    <\/div>\n\n<\/div>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxTestimonials() {\n\n        const section =\n            document.getElementById(\n                \"dx-home-testimonials\"\n            );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized =\n            \"true\";\n\n        const widget =\n            section.closest(\n                \".elementor-widget-html\"\n            );\n\n        if (widget) {\n\n            widget.classList.add(\n                \"dx-testimonials-widget-fullwidth\"\n            );\n        }\n\n        \/* =====================================================\n           VIDEO MODAL\n        ====================================================== *\/\n\n        const videoButtons =\n            Array.from(\n                section.querySelectorAll(\n                    \".dx-test-video-card\"\n                )\n            );\n\n        const modal =\n            document.getElementById(\n                \"dx-test-video-modal\"\n            );\n\n        const modalVideo =\n            modal\n                ? modal.querySelector(\n                    \".dx-test-modal-video\"\n                )\n                : null;\n\n        const modalClose =\n            modal\n                ? modal.querySelector(\n                    \".dx-test-modal-close\"\n                )\n                : null;\n\n        let lastFocusedElement =\n            null;\n\n        function openVideo(\n            videoId,\n            trigger\n        ) {\n\n            if (\n                !modal ||\n                !modalVideo ||\n                !videoId\n            ) {\n                return;\n            }\n\n            lastFocusedElement =\n                trigger || null;\n\n            const iframe =\n                document.createElement(\n                    \"iframe\"\n                );\n\n            iframe.src =\n                \"https:\/\/www.youtube.com\/embed\/\" +\n                encodeURIComponent(videoId) +\n                \"?feature=oembed\" +\n                \"&autoplay=1\" +\n                \"&controls=1\" +\n                \"&rel=0\" +\n                \"&playsinline=1\";\n\n            iframe.title =\n                \"Client video testimonial\";\n\n            iframe.allow =\n                \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\";\n\n            iframe.allowFullscreen =\n                true;\n\n            iframe.referrerPolicy =\n                \"strict-origin-when-cross-origin\";\n\n            modalVideo.innerHTML =\n                \"\";\n\n            modalVideo.appendChild(\n                iframe\n            );\n\n            modal.classList.add(\n                \"is-open\"\n            );\n\n            modal.setAttribute(\n                \"aria-hidden\",\n                \"false\"\n            );\n\n            document.body.classList.add(\n                \"dx-test-modal-open\"\n            );\n\n            window.setTimeout(\n                function () {\n\n                    if (modalClose) {\n                        modalClose.focus();\n                    }\n\n                },\n                50\n            );\n        }\n\n        function closeVideo() {\n\n            if (\n                !modal ||\n                !modalVideo\n            ) {\n                return;\n            }\n\n            modal.classList.remove(\n                \"is-open\"\n            );\n\n            modal.setAttribute(\n                \"aria-hidden\",\n                \"true\"\n            );\n\n            modalVideo.innerHTML =\n                \"\";\n\n            document.body.classList.remove(\n                \"dx-test-modal-open\"\n            );\n\n            if (\n                lastFocusedElement &&\n                typeof lastFocusedElement.focus ===\n                    \"function\"\n            ) {\n                lastFocusedElement.focus();\n            }\n        }\n\n        videoButtons.forEach(\n            function (button) {\n\n                button.addEventListener(\n                    \"click\",\n                    function () {\n\n                        openVideo(\n                            button.getAttribute(\n                                \"data-video-id\"\n                            ),\n                            button\n                        );\n                    }\n                );\n            }\n        );\n\n        if (modalClose) {\n\n            modalClose.addEventListener(\n                \"click\",\n                closeVideo\n            );\n        }\n\n        if (modal) {\n\n            modal.addEventListener(\n                \"click\",\n                function (event) {\n\n                    if (\n                        event.target === modal\n                    ) {\n                        closeVideo();\n                    }\n                }\n            );\n        }\n\n        document.addEventListener(\n            \"keydown\",\n            function (event) {\n\n                if (\n                    event.key === \"Escape\" &&\n                    modal &&\n                    modal.classList.contains(\n                        \"is-open\"\n                    )\n                ) {\n                    closeVideo();\n                }\n            }\n        );\n\n        \/* =====================================================\n           TESTIMONIAL SLIDER\n        ====================================================== *\/\n\n        const slider =\n            section.querySelector(\n                \".dx-test-slider\"\n            );\n\n        const track =\n            section.querySelector(\n                \".dx-test-track\"\n            );\n\n        const slides =\n            Array.from(\n                section.querySelectorAll(\n                    \".dx-test-slide\"\n                )\n            );\n\n        const previousButton =\n            section.querySelector(\n                \".dx-test-arrow-prev\"\n            );\n\n        const nextButton =\n            section.querySelector(\n                \".dx-test-arrow-next\"\n            );\n\n        const pagination =\n            section.querySelector(\n                \".dx-test-pagination\"\n            );\n\n        if (\n            !slider ||\n            !track ||\n            slides.length === 0 ||\n            !pagination\n        ) {\n            return;\n        }\n\n        let currentIndex = 0;\n\n        let autoplayTimer =\n            null;\n\n        let touchStartX =\n            0;\n\n        let touchEndX =\n            0;\n\n        let resizeTimer =\n            null;\n\n        function getVisibleSlides() {\n\n            return window.innerWidth <= 900\n                ? 1\n                : 2;\n        }\n\n        function getPagesCount() {\n\n            return Math.max(\n                1,\n                Math.ceil(\n                    slides.length \/\n                    getVisibleSlides()\n                )\n            );\n        }\n\n        function normalizeIndex(\n            index\n        ) {\n\n            const pagesCount =\n                getPagesCount();\n\n            if (index < 0) {\n                return pagesCount - 1;\n            }\n\n            if (\n                index >= pagesCount\n            ) {\n                return 0;\n            }\n\n            return index;\n        }\n\n        function createPagination() {\n\n            pagination.innerHTML =\n                \"\";\n\n            const pagesCount =\n                getPagesCount();\n\n            for (\n                let index = 0;\n                index < pagesCount;\n                index += 1\n            ) {\n\n                const dot =\n                    document.createElement(\n                        \"button\"\n                    );\n\n                dot.type =\n                    \"button\";\n\n                dot.className =\n                    \"dx-test-dot\";\n\n                dot.setAttribute(\n                    \"aria-label\",\n                    \"Go to testimonial group \" +\n                    (index + 1)\n                );\n\n                dot.addEventListener(\n                    \"click\",\n                    function () {\n\n                        currentIndex =\n                            index;\n\n                        updateSlider();\n\n                        restartAutoplay();\n                    }\n                );\n\n                pagination.appendChild(\n                    dot\n                );\n            }\n        }\n\n        function updateSlider() {\n\n            const visibleSlides =\n                getVisibleSlides();\n\n            const slidePercentage =\n                100 \/ visibleSlides;\n\n            const offset =\n                currentIndex *\n                visibleSlides *\n                slidePercentage;\n\n            \/*\n             * LTR slider moves left as index increases.\n             *\/\n            track.style.transform =\n                \"translateX(-\" +\n                offset +\n                \"%)\";\n\n            const dots =\n                Array.from(\n                    pagination.querySelectorAll(\n                        \".dx-test-dot\"\n                    )\n                );\n\n            dots.forEach(\n                function (\n                    dot,\n                    index\n                ) {\n\n                    const isActive =\n                        index ===\n                        currentIndex;\n\n                    dot.classList.toggle(\n                        \"is-active\",\n                        isActive\n                    );\n\n                    dot.setAttribute(\n                        \"aria-current\",\n                        isActive\n                            ? \"true\"\n                            : \"false\"\n                    );\n                }\n            );\n        }\n\n        function goNext() {\n\n            currentIndex =\n                normalizeIndex(\n                    currentIndex + 1\n                );\n\n            updateSlider();\n        }\n\n        function goPrevious() {\n\n            currentIndex =\n                normalizeIndex(\n                    currentIndex - 1\n                );\n\n            updateSlider();\n        }\n\n        function stopAutoplay() {\n\n            if (autoplayTimer) {\n\n                window.clearInterval(\n                    autoplayTimer\n                );\n\n                autoplayTimer =\n                    null;\n            }\n        }\n\n        function startAutoplay() {\n\n            stopAutoplay();\n\n            autoplayTimer =\n                window.setInterval(\n                    goNext,\n                    5500\n                );\n        }\n\n        function restartAutoplay() {\n\n            stopAutoplay();\n\n            startAutoplay();\n        }\n\n        if (previousButton) {\n\n            previousButton.addEventListener(\n                \"click\",\n                function () {\n\n                    goPrevious();\n\n                    restartAutoplay();\n                }\n            );\n        }\n\n        if (nextButton) {\n\n            nextButton.addEventListener(\n                \"click\",\n                function () {\n\n                    goNext();\n\n                    restartAutoplay();\n                }\n            );\n        }\n\n        slider.addEventListener(\n            \"mouseenter\",\n            stopAutoplay\n        );\n\n        slider.addEventListener(\n            \"mouseleave\",\n            startAutoplay\n        );\n\n        slider.addEventListener(\n            \"focusin\",\n            stopAutoplay\n        );\n\n        slider.addEventListener(\n            \"focusout\",\n            startAutoplay\n        );\n\n        slider.addEventListener(\n            \"touchstart\",\n            function (event) {\n\n                touchStartX =\n                    event.changedTouches[0]\n                        .clientX;\n            },\n            {\n                passive: true\n            }\n        );\n\n        slider.addEventListener(\n            \"touchend\",\n            function (event) {\n\n                touchEndX =\n                    event.changedTouches[0]\n                        .clientX;\n\n                const distance =\n                    touchEndX -\n                    touchStartX;\n\n                if (\n                    Math.abs(distance) <\n                    45\n                ) {\n                    return;\n                }\n\n                \/*\n                 * LTR:\n                 * Swipe left  -> next\n                 * Swipe right -> previous\n                 *\/\n                if (\n                    distance < 0\n                ) {\n\n                    goNext();\n\n                } else {\n\n                    goPrevious();\n                }\n\n                restartAutoplay();\n            },\n            {\n                passive: true\n            }\n        );\n\n        window.addEventListener(\n            \"resize\",\n            function () {\n\n                window.clearTimeout(\n                    resizeTimer\n                );\n\n                resizeTimer =\n                    window.setTimeout(\n                        function () {\n\n                            currentIndex =\n                                0;\n\n                            createPagination();\n\n                            updateSlider();\n                        },\n                        150\n                    );\n            }\n        );\n\n        createPagination();\n        updateSlider();\n        startAutoplay();\n    }\n\n    if (\n        document.readyState ===\n        \"loading\"\n    ) {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxTestimonials\n        );\n\n    } else {\n\n        initDxTestimonials();\n\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-79ed3c6 e-con-full e-flex e-con e-parent\" data-id=\"79ed3c6\" 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-54945ff elementor-widget elementor-widget-html\" data-id=\"54945ff\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n\/* =========================================================\n   ELEMENTOR FULL WIDTH\n========================================================= *\/\n\n.elementor-widget-html:has(#dx-web-faq),\n.elementor-widget-html:has(#dx-web-faq)\n    > .elementor-widget-container,\n.dx-web-faq-widget-fullwidth,\n.dx-web-faq-widget-fullwidth\n    > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n\/* =========================================================\n   RESET & VARIABLES\n========================================================= *\/\n\n#dx-web-faq,\n#dx-web-faq *,\n#dx-web-faq *::before,\n#dx-web-faq *::after {\n    box-sizing: border-box;\n}\n\n#dx-web-faq {\n    --dx-faq-bg: #f7f5fb;\n    --dx-faq-white: #ffffff;\n    --dx-faq-dark: #180b35;\n    --dx-faq-text: #6d6478;\n    --dx-faq-muted: #958d9f;\n    --dx-faq-purple: #6942d8;\n    --dx-faq-purple-light: #9168ef;\n    --dx-faq-yellow: #ffc441;\n    --dx-faq-yellow-light: #ffd66e;\n    --dx-faq-green: #54d696;\n    --dx-faq-border: rgba(105, 66, 216, 0.13);\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n    direction: ltr;\n\n    color: var(--dx-faq-dark);\n\n    background:\n        radial-gradient(\n            circle at 8% 14%,\n            rgba(105, 66, 216, 0.08),\n            transparent 25%\n        ),\n        radial-gradient(\n            circle at 92% 86%,\n            rgba(145, 104, 239, 0.08),\n            transparent 26%\n        ),\n        var(--dx-faq-bg);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-web-faq button {\n    font: inherit;\n}\n\n\/* =========================================================\n   BACKGROUND\n========================================================= *\/\n\n#dx-web-faq .dx-faq-grid-bg {\n    position: absolute;\n    z-index: -5;\n\n    inset: 0;\n\n    opacity: 0.15;\n\n    background-image:\n        linear-gradient(\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        );\n\n    background-size: 72px 72px;\n\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 18%,\n            transparent 82%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 18%,\n            transparent 82%\n        );\n\n    pointer-events: none;\n}\n\n#dx-web-faq .dx-faq-orbit {\n    position: absolute;\n    z-index: -4;\n\n    border: 1px solid rgba(105, 66, 216, 0.08);\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-web-faq .dx-faq-orbit-one {\n    top: -220px;\n    left: -190px;\n\n    width: 460px;\n    height: 460px;\n}\n\n#dx-web-faq .dx-faq-orbit-two {\n    right: -240px;\n    bottom: -280px;\n\n    width: 530px;\n    height: 530px;\n}\n\n\/* =========================================================\n   MAIN\n========================================================= *\/\n\n#dx-web-faq .dx-faq-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        92px\n        clamp(22px, 5vw, 90px)\n        98px;\n}\n\n#dx-web-faq .dx-faq-container {\n    width: min(1380px, 100%);\n    margin: 0 auto;\n\n    display: grid;\n    grid-template-columns:\n        minmax(310px, 0.76fr)\n        minmax(0, 1.24fr);\n\n    align-items: start;\n\n    gap: clamp(50px, 7vw, 100px);\n}\n\n\/* =========================================================\n   INTRO\n========================================================= *\/\n\n#dx-web-faq .dx-faq-intro {\n    position: sticky;\n    top: 110px;\n\n    min-width: 0;\n}\n\n#dx-web-faq .dx-faq-eyebrow {\n    display: inline-flex;\n    align-items: center;\n\n    gap: 10px;\n\n    margin-bottom: 12px;\n\n    color: var(--dx-faq-purple);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-web-faq .dx-faq-eyebrow::before {\n    content: \"\";\n\n    width: 38px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-faq-yellow),\n            var(--dx-faq-purple-light)\n        );\n}\n\n#dx-web-faq .dx-faq-title {\n    margin: 0;\n\n    color: var(--dx-faq-dark);\n\n    font-size: clamp(33px, 3.7vw, 50px);\n    font-weight: 900;\n    line-height: 1.55;\n    letter-spacing: -0.45px;\n\n    text-wrap: balance;\n}\n\n#dx-web-faq .dx-faq-title span {\n    color: var(--dx-faq-purple);\n}\n\n#dx-web-faq .dx-faq-description {\n    max-width: 530px;\n\n    margin: 15px 0 0;\n\n    color: var(--dx-faq-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n\n    text-wrap: pretty;\n}\n\n\/* =========================================================\n   INTRO NOTE\n========================================================= *\/\n\n#dx-web-faq .dx-faq-note {\n    margin-top: 27px;\n    padding-top: 22px;\n\n    display: flex;\n    align-items: flex-start;\n\n    gap: 13px;\n\n    border-top: 1px solid rgba(105, 66, 216, 0.12);\n}\n\n#dx-web-faq .dx-faq-note-icon {\n    width: 43px;\n    height: 43px;\n    flex: 0 0 43px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 13px;\n\n    color: var(--dx-faq-purple);\n\n    background: rgba(105, 66, 216, 0.09);\n}\n\n#dx-web-faq .dx-faq-note-icon svg {\n    width: 22px;\n    height: 22px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.9;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-web-faq .dx-faq-note-copy {\n    min-width: 0;\n}\n\n#dx-web-faq .dx-faq-note-title {\n    margin: 0;\n\n    color: var(--dx-faq-dark);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.7;\n}\n\n#dx-web-faq .dx-faq-note-text {\n    margin: 4px 0 0;\n\n    color: var(--dx-faq-muted);\n\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1.8;\n}\n\n\/* =========================================================\n   FAQ LIST\n========================================================= *\/\n\n#dx-web-faq .dx-faq-list {\n    display: grid;\n\n    gap: 12px;\n}\n\n\/* =========================================================\n   FAQ ITEM\n========================================================= *\/\n\n#dx-web-faq .dx-faq-item {\n    overflow: hidden;\n\n    border: 1px solid var(--dx-faq-border);\n    border-radius: 17px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.98),\n            rgba(250, 248, 254, 0.96)\n        );\n\n    box-shadow:\n        0 16px 38px rgba(40, 18, 84, 0.07);\n\n    transition:\n        border-color 0.3s ease,\n        background 0.3s ease,\n        box-shadow 0.3s ease;\n}\n\n#dx-web-faq .dx-faq-item.is-open {\n    border-color: rgba(105, 66, 216, 0.35);\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(105, 66, 216, 0.07),\n            rgba(255, 255, 255, 0.98)\n        );\n\n    box-shadow:\n        0 22px 50px rgba(40, 18, 84, 0.11);\n}\n\n\/* =========================================================\n   QUESTION\n========================================================= *\/\n\n#dx-web-faq .dx-faq-question {\n    width: 100%;\n    min-height: 78px;\n\n    display: grid;\n    grid-template-columns:\n        auto\n        minmax(0, 1fr)\n        auto;\n\n    align-items: center;\n\n    gap: 16px;\n\n    padding:\n        17px\n        20px;\n\n    border: 0;\n\n    color: var(--dx-faq-dark);\n    background: transparent;\n\n    text-align: left;\n    cursor: pointer;\n}\n\n#dx-web-faq .dx-faq-number {\n    width: 35px;\n    height: 35px;\n    flex: 0 0 35px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 11px;\n\n    color: var(--dx-faq-purple);\n\n    background: rgba(105, 66, 216, 0.09);\n\n    font-size: 14px;\n    font-weight: 900;\n}\n\n#dx-web-faq .dx-faq-question-text {\n    color: var(--dx-faq-dark);\n\n    font-size: 15px;\n    font-weight: 900;\n    line-height: 1.75;\n}\n\n#dx-web-faq .dx-faq-toggle {\n    position: relative;\n\n    width: 35px;\n    height: 35px;\n    flex: 0 0 35px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid rgba(105, 66, 216, 0.14);\n    border-radius: 11px;\n\n    color: var(--dx-faq-purple);\n\n    background: rgba(105, 66, 216, 0.055);\n\n    transition:\n        color 0.3s ease,\n        background 0.3s ease,\n        transform 0.3s ease;\n}\n\n#dx-web-faq .dx-faq-toggle::before,\n#dx-web-faq .dx-faq-toggle::after {\n    content: \"\";\n\n    position: absolute;\n\n    width: 14px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background: currentColor;\n\n    transition: transform 0.3s ease;\n}\n\n#dx-web-faq .dx-faq-toggle::after {\n    transform: rotate(90deg);\n}\n\n#dx-web-faq .dx-faq-item.is-open\n    .dx-faq-toggle {\n    color: #ffffff;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-faq-purple),\n            var(--dx-faq-purple-light)\n        );\n}\n\n#dx-web-faq .dx-faq-item.is-open\n    .dx-faq-toggle::after {\n    transform: rotate(0deg);\n}\n\n\/* =========================================================\n   ANSWER\n========================================================= *\/\n\n#dx-web-faq .dx-faq-answer {\n    display: grid;\n    grid-template-rows: 0fr;\n\n    transition: grid-template-rows 0.4s ease;\n}\n\n#dx-web-faq .dx-faq-item.is-open\n    .dx-faq-answer {\n    grid-template-rows: 1fr;\n}\n\n#dx-web-faq .dx-faq-answer-inner {\n    min-height: 0;\n    overflow: hidden;\n}\n\n#dx-web-faq .dx-faq-answer-content {\n    margin:\n        0\n        20px\n        0\n        71px;\n\n    padding:\n        0\n        0\n        22px;\n\n    color: var(--dx-faq-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n\n    border-top: 1px solid rgba(105, 66, 216, 0.10);\n}\n\n#dx-web-faq .dx-faq-answer-content p {\n    margin: 17px 0 0;\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 900px) {\n    #dx-web-faq .dx-faq-main {\n        padding:\n            76px\n            28px\n            82px;\n    }\n\n    #dx-web-faq .dx-faq-container {\n        grid-template-columns: 1fr;\n\n        gap: 40px;\n    }\n\n    #dx-web-faq .dx-faq-intro {\n        position: static;\n\n        max-width: 780px;\n\n        margin: 0 auto;\n\n        text-align: center;\n    }\n\n    #dx-web-faq .dx-faq-eyebrow {\n        justify-content: center;\n    }\n\n    #dx-web-faq .dx-faq-eyebrow::after {\n        content: \"\";\n\n        width: 38px;\n        height: 2px;\n\n        border-radius: 999px;\n\n        background:\n            linear-gradient(\n                90deg,\n                var(--dx-faq-yellow),\n                var(--dx-faq-purple-light)\n            );\n    }\n\n    #dx-web-faq .dx-faq-description {\n        margin-right: auto;\n        margin-left: auto;\n    }\n\n    #dx-web-faq .dx-faq-note {\n        max-width: 600px;\n\n        margin-right: auto;\n        margin-left: auto;\n\n        justify-content: center;\n\n        text-align: left;\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 600px) {\n    #dx-web-faq .dx-faq-main {\n        padding:\n            59px\n            16px\n            65px;\n    }\n\n    #dx-web-faq .dx-faq-container {\n        gap: 31px;\n    }\n\n    #dx-web-faq .dx-faq-eyebrow {\n        margin-bottom: 10px;\n\n        font-size: 14px;\n    }\n\n    #dx-web-faq .dx-faq-eyebrow::before,\n    #dx-web-faq .dx-faq-eyebrow::after {\n        width: 22px;\n    }\n\n    #dx-web-faq .dx-faq-title {\n        font-size: clamp(27px, 8.3vw, 36px);\n        line-height: 1.65;\n        letter-spacing: -0.2px;\n    }\n\n    #dx-web-faq .dx-faq-description {\n        margin-top: 10px;\n\n        font-size: 14px;\n        line-height: 2;\n    }\n\n    #dx-web-faq .dx-faq-note {\n        margin-top: 20px;\n        padding-top: 18px;\n    }\n\n    #dx-web-faq .dx-faq-note-icon {\n        width: 39px;\n        height: 39px;\n        flex-basis: 39px;\n    }\n\n    #dx-web-faq .dx-faq-note-title {\n        font-size: 14px;\n    }\n\n    #dx-web-faq .dx-faq-note-text {\n        font-size: 14px;\n    }\n\n    #dx-web-faq .dx-faq-list {\n        gap: 10px;\n    }\n\n    #dx-web-faq .dx-faq-item {\n        border-radius: 14px;\n    }\n\n    #dx-web-faq .dx-faq-question {\n        min-height: 68px;\n\n        grid-template-columns:\n            minmax(0, 1fr)\n            auto;\n\n        gap: 12px;\n\n        padding:\n            14px;\n    }\n\n    #dx-web-faq .dx-faq-number {\n        display: none;\n    }\n\n    #dx-web-faq .dx-faq-question-text {\n        font-size: 14px;\n        line-height: 1.8;\n    }\n\n    #dx-web-faq .dx-faq-toggle {\n        width: 32px;\n        height: 32px;\n        flex-basis: 32px;\n\n        border-radius: 10px;\n    }\n\n    #dx-web-faq .dx-faq-answer-content {\n        margin:\n            0\n            14px;\n\n        padding-bottom: 18px;\n\n        font-size: 14px;\n        line-height: 1.95;\n    }\n\n    #dx-web-faq .dx-faq-answer-content p {\n        margin-top: 14px;\n    }\n\n    #dx-web-faq .dx-faq-orbit {\n        display: none;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-web-faq button:focus-visible {\n    outline: 3px solid var(--dx-faq-yellow);\n    outline-offset: 3px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    #dx-web-faq *,\n    #dx-web-faq *::before,\n    #dx-web-faq *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-web-faq\"\n    aria-labelledby=\"dx-web-faq-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n    <div\n        class=\"dx-faq-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <span\n        class=\"dx-faq-orbit dx-faq-orbit-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-faq-orbit dx-faq-orbit-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-faq-main\">\n\n        <div class=\"dx-faq-container\">\n\n            <div class=\"dx-faq-intro\">\n\n                <span class=\"dx-faq-eyebrow\">\n                    Clear Answers Before Your Project Begins\n                <\/span>\n\n                <h2\n                    id=\"dx-web-faq-title\"\n                    class=\"dx-faq-title\"\n                >\n                    Frequently Asked Questions About\n                    <span>Website Design & Development<\/span>\n                <\/h2>\n\n                <p class=\"dx-faq-description\">\n                    Find answers to common questions about choosing\n                    the right website type, content management,\n                    responsive design, development, website migration,\n                    SEO preparation, integrations, and post-launch support.\n                <\/p>\n\n                <div class=\"dx-faq-note\">\n\n                    <span\n                        class=\"dx-faq-note-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <circle\n                                cx=\"12\"\n                                cy=\"12\"\n                                r=\"9\"\n                            ><\/circle>\n                            <path d=\"M9.5 9a2.5 2.5 0 0 1 5 0c0 2-2.5 2-2.5 4\"><\/path>\n                            <path d=\"M12 17h.01\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <div class=\"dx-faq-note-copy\">\n\n                        <h3 class=\"dx-faq-note-title\">\n                            Every Project Has Different Requirements\n                        <\/h3>\n\n                        <p class=\"dx-faq-note-text\">\n                            Technologies, features, and implementation\n                            stages are defined after reviewing the\n                            website type and project goals.\n                        <\/p>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n            <div class=\"dx-faq-list\">\n\n                <!-- FAQ 01 -->\n\n                <article class=\"dx-faq-item is-open\">\n\n                    <h3>\n\n                        <button\n                            type=\"button\"\n                            class=\"dx-faq-question\"\n                            aria-expanded=\"true\"\n                            aria-controls=\"dx-web-faq-answer-1\"\n                        >\n                            <span class=\"dx-faq-number\">\n                                01\n                            <\/span>\n\n                            <span class=\"dx-faq-question-text\">\n                                What Type of Website Is Right for My Project?\n                            <\/span>\n\n                            <span\n                                class=\"dx-faq-toggle\"\n                                aria-hidden=\"true\"\n                            ><\/span>\n                        <\/button>\n\n                    <\/h3>\n\n                    <div\n                        id=\"dx-web-faq-answer-1\"\n                        class=\"dx-faq-answer\"\n                    >\n                        <div class=\"dx-faq-answer-inner\">\n\n                            <div class=\"dx-faq-answer-content\">\n                                <p>\n                                    It depends on your project goals,\n                                    target users, and required features.\n                                    The right solution may be a corporate\n                                    website, an e-commerce store, or an\n                                    advanced digital platform with user\n                                    accounts, dashboards, and custom\n                                    integrations.\n                                <\/p>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n\n                <\/article>\n\n                <!-- FAQ 02 -->\n\n                <article class=\"dx-faq-item\">\n\n                    <h3>\n\n                        <button\n                            type=\"button\"\n                            class=\"dx-faq-question\"\n                            aria-expanded=\"false\"\n                            aria-controls=\"dx-web-faq-answer-2\"\n                        >\n                            <span class=\"dx-faq-number\">\n                                02\n                            <\/span>\n\n                            <span class=\"dx-faq-question-text\">\n                                Will the Website Be Responsive on Mobile and Tablet Devices?\n                            <\/span>\n\n                            <span\n                                class=\"dx-faq-toggle\"\n                                aria-hidden=\"true\"\n                            ><\/span>\n                        <\/button>\n\n                    <\/h3>\n\n                    <div\n                        id=\"dx-web-faq-answer-2\"\n                        class=\"dx-faq-answer\"\n                    >\n                        <div class=\"dx-faq-answer-inner\">\n\n                            <div class=\"dx-faq-answer-content\">\n                                <p>\n                                    Yes. Pages are designed and developed\n                                    to work across mobile, tablet, and\n                                    desktop devices, with attention to\n                                    text sizes, images, navigation menus,\n                                    calls to action, and content presentation\n                                    at different screen sizes.\n                                <\/p>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n\n                <\/article>\n\n                <!-- FAQ 03 -->\n\n                <article class=\"dx-faq-item\">\n\n                    <h3>\n\n                        <button\n                            type=\"button\"\n                            class=\"dx-faq-question\"\n                            aria-expanded=\"false\"\n                            aria-controls=\"dx-web-faq-answer-3\"\n                        >\n                            <span class=\"dx-faq-number\">\n                                03\n                            <\/span>\n\n                            <span class=\"dx-faq-question-text\">\n                                Can I Manage the Website and Update the Content Myself?\n                            <\/span>\n\n                            <span\n                                class=\"dx-faq-toggle\"\n                                aria-hidden=\"true\"\n                            ><\/span>\n                        <\/button>\n\n                    <\/h3>\n\n                    <div\n                        id=\"dx-web-faq-answer-3\"\n                        class=\"dx-faq-answer\"\n                    >\n                        <div class=\"dx-faq-answer-inner\">\n\n                            <div class=\"dx-faq-answer-content\">\n                                <p>\n                                    Yes. We configure an admin panel that\n                                    allows you to update pages, content,\n                                    images, products, or services depending\n                                    on the project type, and we explain the\n                                    essential management functions to your team.\n                                <\/p>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n\n                <\/article>\n\n                <!-- FAQ 04 -->\n\n                <article class=\"dx-faq-item\">\n\n                    <h3>\n\n                        <button\n                            type=\"button\"\n                            class=\"dx-faq-question\"\n                            aria-expanded=\"false\"\n                            aria-controls=\"dx-web-faq-answer-4\"\n                        >\n                            <span class=\"dx-faq-number\">\n                                04\n                            <\/span>\n\n                            <span class=\"dx-faq-question-text\">\n                                Is the Website Prepared for Search Engines and SEO?\n                            <\/span>\n\n                            <span\n                                class=\"dx-faq-toggle\"\n                                aria-hidden=\"true\"\n                            ><\/span>\n                        <\/button>\n\n                    <\/h3>\n\n                    <div\n                        id=\"dx-web-faq-answer-4\"\n                        class=\"dx-faq-answer\"\n                    >\n                        <div class=\"dx-faq-answer-inner\">\n\n                            <div class=\"dx-faq-answer-content\">\n                                <p>\n                                    The website is built with an organized,\n                                    responsive structure, with attention to\n                                    page headings, loading performance,\n                                    crawlability, links, and images. Content\n                                    writing, ongoing SEO optimization, and\n                                    keyword research are defined separately\n                                    according to the project scope.\n                                <\/p>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n\n                <\/article>\n\n                <!-- FAQ 05 -->\n\n                <article class=\"dx-faq-item\">\n\n                    <h3>\n\n                        <button\n                            type=\"button\"\n                            class=\"dx-faq-question\"\n                            aria-expanded=\"false\"\n                            aria-controls=\"dx-web-faq-answer-5\"\n                        >\n                            <span class=\"dx-faq-number\">\n                                05\n                            <\/span>\n\n                            <span class=\"dx-faq-question-text\">\n                                Can the Website Integrate With External Systems or Services?\n                            <\/span>\n\n                            <span\n                                class=\"dx-faq-toggle\"\n                                aria-hidden=\"true\"\n                            ><\/span>\n                        <\/button>\n\n                    <\/h3>\n\n                    <div\n                        id=\"dx-web-faq-answer-5\"\n                        class=\"dx-faq-answer\"\n                    >\n                        <div class=\"dx-faq-answer-inner\">\n\n                            <div class=\"dx-faq-answer-content\">\n                                <p>\n                                    The website can be connected to payment\n                                    gateways, shipping services, booking systems,\n                                    CRM platforms, marketing tools, email services,\n                                    and other external solutions when a suitable\n                                    integration method is available, such as an\n                                    API, trusted plugin, or supported integration.\n                                <\/p>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n\n                <\/article>\n\n                <!-- FAQ 06 -->\n\n                <article class=\"dx-faq-item\">\n\n                    <h3>\n\n                        <button\n                            type=\"button\"\n                            class=\"dx-faq-question\"\n                            aria-expanded=\"false\"\n                            aria-controls=\"dx-web-faq-answer-6\"\n                        >\n                            <span class=\"dx-faq-number\">\n                                06\n                            <\/span>\n\n                            <span class=\"dx-faq-question-text\">\n                                Can You Redesign an Existing Website?\n                            <\/span>\n\n                            <span\n                                class=\"dx-faq-toggle\"\n                                aria-hidden=\"true\"\n                            ><\/span>\n                        <\/button>\n\n                    <\/h3>\n\n                    <div\n                        id=\"dx-web-faq-answer-6\"\n                        class=\"dx-faq-answer\"\n                    >\n                        <div class=\"dx-faq-answer-inner\">\n\n                            <div class=\"dx-faq-answer-content\">\n                                <p>\n                                    Yes. We can review your current website\n                                    and determine whether improving the\n                                    existing system or rebuilding it is the\n                                    better approach. The design, content,\n                                    technology, performance, and features are\n                                    reviewed before defining the implementation plan.\n                                <\/p>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n\n                <\/article>\n\n                <!-- FAQ 07 -->\n\n                <article class=\"dx-faq-item\">\n\n                    <h3>\n\n                        <button\n                            type=\"button\"\n                            class=\"dx-faq-question\"\n                            aria-expanded=\"false\"\n                            aria-controls=\"dx-web-faq-answer-7\"\n                        >\n                            <span class=\"dx-faq-number\">\n                                07\n                            <\/span>\n\n                            <span class=\"dx-faq-question-text\">\n                                Can an Existing Website Be Migrated From Its Current Hosting or Platform?\n                            <\/span>\n\n                            <span\n                                class=\"dx-faq-toggle\"\n                                aria-hidden=\"true\"\n                            ><\/span>\n                        <\/button>\n\n                    <\/h3>\n\n                    <div\n                        id=\"dx-web-faq-answer-7\"\n                        class=\"dx-faq-answer\"\n                    >\n                        <div class=\"dx-faq-answer-inner\">\n\n                            <div class=\"dx-faq-answer-content\">\n                                <p>\n                                    Website or data migration can be\n                                    considered after reviewing the current\n                                    system, available export and import\n                                    options, the amount of content, products,\n                                    and users, and whether the existing data\n                                    is compatible with the new system.\n                                <\/p>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n\n                <\/article>\n\n                <!-- FAQ 08 -->\n\n                <article class=\"dx-faq-item\">\n\n                    <h3>\n\n                        <button\n                            type=\"button\"\n                            class=\"dx-faq-question\"\n                            aria-expanded=\"false\"\n                            aria-controls=\"dx-web-faq-answer-8\"\n                        >\n                            <span class=\"dx-faq-number\">\n                                08\n                            <\/span>\n\n                            <span class=\"dx-faq-question-text\">\n                                Is Technical Support Available After the Website Launch?\n                            <\/span>\n\n                            <span\n                                class=\"dx-faq-toggle\"\n                                aria-hidden=\"true\"\n                            ><\/span>\n                        <\/button>\n\n                    <\/h3>\n\n                    <div\n                        id=\"dx-web-faq-answer-8\"\n                        class=\"dx-faq-answer\"\n                    >\n                        <div class=\"dx-faq-answer-inner\">\n\n                            <div class=\"dx-faq-answer-content\">\n                                <p>\n                                    Technical support and follow-up can be\n                                    provided after launch according to the\n                                    project scope. This may include resolving\n                                    operational issues and helping your team\n                                    use the admin panel and the features that\n                                    were implemented.\n                                <\/p>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n\n                <\/article>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxWebFaq() {\n        const section = document.getElementById(\n            \"dx-web-faq\"\n        );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized = \"true\";\n\n        const widget = section.closest(\n            \".elementor-widget-html\"\n        );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-web-faq-widget-fullwidth\"\n            );\n        }\n\n        const items = Array.from(\n            section.querySelectorAll(\n                \".dx-faq-item\"\n            )\n        );\n\n        items.forEach(function (item) {\n            const button = item.querySelector(\n                \".dx-faq-question\"\n            );\n\n            if (!button) {\n                return;\n            }\n\n            button.addEventListener(\n                \"click\",\n                function () {\n                    const isOpen =\n                        item.classList.contains(\n                            \"is-open\"\n                        );\n\n                    items.forEach(function (currentItem) {\n                        const currentButton =\n                            currentItem.querySelector(\n                                \".dx-faq-question\"\n                            );\n\n                        currentItem.classList.remove(\n                            \"is-open\"\n                        );\n\n                        if (currentButton) {\n                            currentButton.setAttribute(\n                                \"aria-expanded\",\n                                \"false\"\n                            );\n                        }\n                    });\n\n                    if (!isOpen) {\n                        item.classList.add(\n                            \"is-open\"\n                        );\n\n                        button.setAttribute(\n                            \"aria-expanded\",\n                            \"true\"\n                        );\n                    }\n                }\n            );\n        });\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxWebFaq\n        );\n    } else {\n        initDxWebFaq();\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b860f93 e-con-full e-flex e-con e-parent\" data-id=\"b860f93\" 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-59d2f43 elementor-widget elementor-widget-html\" data-id=\"59d2f43\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n\/* =========================================================\n   ELEMENTOR FULL WIDTH\n========================================================= *\/\n\n.elementor-widget-html:has(#dx-web-final-cta),\n.elementor-widget-html:has(#dx-web-final-cta)\n    > .elementor-widget-container,\n.dx-web-final-cta-widget-fullwidth,\n.dx-web-final-cta-widget-fullwidth\n    > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n\/* =========================================================\n   RESET & VARIABLES\n========================================================= *\/\n\n#dx-web-final-cta,\n#dx-web-final-cta *,\n#dx-web-final-cta *::before,\n#dx-web-final-cta *::after {\n    box-sizing: border-box;\n}\n\n#dx-web-final-cta {\n    --dx-cta-bg: #f5f1fb;\n    --dx-cta-white: #ffffff;\n    --dx-cta-dark: #180b35;\n    --dx-cta-text: #6d6478;\n    --dx-cta-muted: #958d9f;\n    --dx-cta-purple: #6942d8;\n    --dx-cta-purple-light: #9168ef;\n    --dx-cta-yellow: #ffc441;\n    --dx-cta-yellow-light: #ffd66e;\n    --dx-cta-green: #54d696;\n    --dx-cta-border: rgba(105, 66, 216, 0.13);\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n    direction: ltr;\n\n    color: var(--dx-cta-dark);\n\n    background:\n        radial-gradient(\n            circle at 10% 20%,\n            rgba(105, 66, 216, 0.09),\n            transparent 28%\n        ),\n        radial-gradient(\n            circle at 90% 82%,\n            rgba(145, 104, 239, 0.08),\n            transparent 27%\n        ),\n        var(--dx-cta-bg);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-web-final-cta a {\n    color: inherit;\n    text-decoration: none;\n}\n\n\/* =========================================================\n   BACKGROUND\n========================================================= *\/\n\n#dx-web-final-cta .dx-final-grid-bg {\n    position: absolute;\n    z-index: -5;\n\n    inset: 0;\n\n    opacity: 0.15;\n\n    background-image:\n        linear-gradient(\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        );\n\n    background-size: 72px 72px;\n\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 20%,\n            transparent 82%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 20%,\n            transparent 82%\n        );\n\n    pointer-events: none;\n}\n\n\/* =========================================================\n   MAIN\n========================================================= *\/\n\n#dx-web-final-cta .dx-final-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        72px\n        clamp(22px, 5vw, 90px)\n        78px;\n}\n\n#dx-web-final-cta .dx-final-container {\n    width: min(1360px, 100%);\n    margin: 0 auto;\n}\n\n\/* =========================================================\n   PANEL\n========================================================= *\/\n\n#dx-web-final-cta .dx-final-panel {\n    position: relative;\n    isolation: isolate;\n\n    min-height: 345px;\n\n    display: grid;\n    grid-template-columns:\n        minmax(0, 1.1fr)\n        minmax(320px, 0.9fr);\n\n    align-items: center;\n\n    gap: clamp(35px, 5vw, 70px);\n\n    overflow: hidden;\n\n    padding:\n        48px\n        clamp(30px, 5vw, 66px);\n\n    border: 1px solid rgba(105, 66, 216, 0.16);\n    border-radius: 29px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.98),\n            rgba(249, 246, 253, 0.96)\n        );\n\n    box-shadow:\n        0 28px 75px rgba(40, 18, 84, 0.12),\n        inset 0 1px 0 rgba(255, 255, 255, 0.98);\n}\n\n#dx-web-final-cta .dx-final-panel::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    top: -170px;\n    left: -120px;\n\n    width: 420px;\n    height: 420px;\n\n    border-radius: 50%;\n\n    background: rgba(105, 66, 216, 0.12);\n\n    filter: blur(95px);\n\n    pointer-events: none;\n}\n\n#dx-web-final-cta .dx-final-panel::after {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    right: -150px;\n    bottom: -220px;\n\n    width: 450px;\n    height: 450px;\n\n    border-radius: 50%;\n\n    background: rgba(255, 196, 65, 0.11);\n\n    filter: blur(105px);\n\n    pointer-events: none;\n}\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n#dx-web-final-cta .dx-final-content {\n    position: relative;\n    z-index: 3;\n\n    min-width: 0;\n}\n\n#dx-web-final-cta .dx-final-eyebrow {\n    display: inline-flex;\n    align-items: center;\n\n    gap: 10px;\n\n    margin-bottom: 13px;\n\n    color: var(--dx-cta-purple);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-web-final-cta .dx-final-eyebrow::before {\n    content: \"\";\n\n    width: 38px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-cta-yellow),\n            var(--dx-cta-purple-light)\n        );\n}\n\n#dx-web-final-cta .dx-final-title {\n    max-width: 760px;\n\n    margin: 0;\n\n    color: var(--dx-cta-dark);\n\n    font-size: clamp(34px, 3.8vw, 53px);\n    font-weight: 900;\n    line-height: 1.5;\n    letter-spacing: -0.5px;\n\n    text-wrap: balance;\n}\n\n#dx-web-final-cta .dx-final-title span {\n    color: var(--dx-cta-purple);\n}\n\n#dx-web-final-cta .dx-final-description {\n    max-width: 700px;\n\n    margin: 15px 0 0;\n\n    color: var(--dx-cta-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n\n    text-wrap: pretty;\n}\n\n\/* =========================================================\n   ACTIONS\n========================================================= *\/\n\n#dx-web-final-cta .dx-final-actions {\n    margin-top: 28px;\n\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    gap: 12px;\n}\n\n#dx-web-final-cta .dx-final-button {\n    min-width: 205px;\n    min-height: 54px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 9px;\n\n    padding:\n        0\n        24px;\n\n    border: 1px solid transparent;\n    border-radius: 12px;\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1;\n    white-space: nowrap;\n\n    transition:\n        transform 0.25s ease,\n        border-color 0.25s ease,\n        background 0.25s ease,\n        color 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-web-final-cta .dx-final-button-primary {\n    color: #ffffff;\n\n    border-color: rgba(105, 66, 216, 0.20);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-cta-purple),\n            var(--dx-cta-purple-light)\n        );\n\n    box-shadow:\n        0 17px 36px rgba(105, 66, 216, 0.24);\n}\n\n#dx-web-final-cta .dx-final-button-secondary {\n    color: var(--dx-cta-dark);\n\n    border-color: rgba(105, 66, 216, 0.15);\n\n    background: rgba(255, 255, 255, 0.80);\n\n    box-shadow:\n        0 12px 28px rgba(40, 18, 84, 0.07);\n}\n\n#dx-web-final-cta .dx-final-button:hover,\n#dx-web-final-cta .dx-final-button:focus-visible {\n    transform: translateY(-3px);\n}\n\n#dx-web-final-cta .dx-final-button-primary:hover,\n#dx-web-final-cta .dx-final-button-primary:focus-visible {\n    box-shadow:\n        0 23px 47px rgba(105, 66, 216, 0.32);\n}\n\n#dx-web-final-cta .dx-final-button-secondary:hover,\n#dx-web-final-cta .dx-final-button-secondary:focus-visible {\n    color: var(--dx-cta-purple);\n\n    border-color: rgba(105, 66, 216, 0.32);\n\n    background: #ffffff;\n\n    box-shadow:\n        0 18px 38px rgba(40, 18, 84, 0.11);\n}\n\n#dx-web-final-cta .dx-final-button svg {\n    width: 18px;\n    height: 18px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   POINTS\n========================================================= *\/\n\n#dx-web-final-cta .dx-final-points {\n    margin-top: 22px;\n\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    gap:\n        10px\n        22px;\n}\n\n#dx-web-final-cta .dx-final-point {\n    display: inline-flex;\n    align-items: center;\n\n    gap: 8px;\n\n    color: var(--dx-cta-muted);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.6;\n}\n\n#dx-web-final-cta .dx-final-point-icon {\n    width: 20px;\n    height: 20px;\n    flex: 0 0 20px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 7px;\n\n    color: #16845a;\n\n    background: rgba(84, 214, 150, 0.14);\n}\n\n#dx-web-final-cta .dx-final-point-icon svg {\n    width: 11px;\n    height: 11px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2.3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   VISUAL SUMMARY\n========================================================= *\/\n\n#dx-web-final-cta .dx-final-summary {\n    position: relative;\n    z-index: 3;\n\n    min-width: 0;\n\n    padding:\n        27px\n        25px;\n\n    border: 1px solid rgba(105, 66, 216, 0.14);\n    border-radius: 23px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(105, 66, 216, 0.08),\n            rgba(255, 255, 255, 0.76)\n        );\n\n    box-shadow:\n        0 20px 50px rgba(40, 18, 84, 0.09);\n}\n\n#dx-web-final-cta .dx-final-summary-head {\n    display: flex;\n    align-items: center;\n\n    gap: 13px;\n\n    padding-bottom: 19px;\n\n    border-bottom: 1px solid rgba(105, 66, 216, 0.11);\n}\n\n#dx-web-final-cta .dx-final-summary-icon {\n    width: 54px;\n    height: 54px;\n    flex: 0 0 54px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 17px;\n\n    color: #ffffff;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-cta-purple),\n            var(--dx-cta-purple-light)\n        );\n\n    box-shadow:\n        0 15px 32px rgba(105, 66, 216, 0.23);\n}\n\n#dx-web-final-cta .dx-final-summary-icon svg {\n    width: 28px;\n    height: 28px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-web-final-cta .dx-final-summary-copy {\n    min-width: 0;\n}\n\n#dx-web-final-cta .dx-final-summary-title {\n    margin: 0;\n\n    color: var(--dx-cta-dark);\n\n    font-size: 16px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-web-final-cta .dx-final-summary-subtitle {\n    margin:\n        3px\n        0\n        0;\n\n    color: var(--dx-cta-text);\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.7;\n}\n\n\/* =========================================================\n   SUMMARY LIST\n========================================================= *\/\n\n#dx-web-final-cta .dx-final-summary-list {\n    margin-top: 20px;\n\n    display: grid;\n\n    gap: 12px;\n}\n\n#dx-web-final-cta .dx-final-summary-item {\n    display: grid;\n    grid-template-columns:\n        34px\n        minmax(0, 1fr);\n\n    align-items: center;\n\n    gap: 11px;\n}\n\n#dx-web-final-cta .dx-final-summary-number {\n    width: 34px;\n    height: 34px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 10px;\n\n    color: var(--dx-cta-purple);\n\n    background: rgba(105, 66, 216, 0.09);\n\n    font-size: 14px;\n    font-weight: 900;\n}\n\n#dx-web-final-cta .dx-final-summary-item:nth-child(2)\n    .dx-final-summary-number {\n    color: #9b6c00;\n\n    background: rgba(255, 196, 65, 0.18);\n}\n\n#dx-web-final-cta .dx-final-summary-item:nth-child(3)\n    .dx-final-summary-number {\n    color: #16845a;\n\n    background: rgba(84, 214, 150, 0.15);\n}\n\n#dx-web-final-cta .dx-final-summary-item-title {\n    display: block;\n\n    color: var(--dx-cta-dark);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-web-final-cta .dx-final-summary-item-text {\n    display: block;\n\n    margin-top: 2px;\n\n    color: var(--dx-cta-muted);\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.7;\n}\n\n\/* =========================================================\n   SUMMARY FOOTER\n========================================================= *\/\n\n#dx-web-final-cta .dx-final-summary-footer {\n    margin-top: 21px;\n    padding-top: 18px;\n\n    display: flex;\n    align-items: center;\n\n    gap: 10px;\n\n    border-top: 1px solid rgba(105, 66, 216, 0.11);\n\n    color: var(--dx-cta-text);\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.7;\n}\n\n#dx-web-final-cta .dx-final-summary-status {\n    width: 8px;\n    height: 8px;\n    flex: 0 0 8px;\n\n    border-radius: 50%;\n\n    background: var(--dx-cta-green);\n\n    box-shadow:\n        0 0 0 5px rgba(84, 214, 150, 0.12);\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 900px) {\n    #dx-web-final-cta .dx-final-main {\n        padding:\n            66px\n            28px\n            72px;\n    }\n\n    #dx-web-final-cta .dx-final-panel {\n        grid-template-columns: 1fr;\n\n        min-height: 0;\n\n        padding:\n            44px\n            40px;\n\n        text-align: center;\n    }\n\n    #dx-web-final-cta .dx-final-eyebrow,\n    #dx-web-final-cta .dx-final-actions,\n    #dx-web-final-cta .dx-final-points {\n        justify-content: center;\n    }\n\n    #dx-web-final-cta .dx-final-title,\n    #dx-web-final-cta .dx-final-description {\n        margin-right: auto;\n        margin-left: auto;\n    }\n\n    #dx-web-final-cta .dx-final-summary {\n        width: min(100%, 600px);\n\n        margin: 0 auto;\n\n        text-align: left;\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 600px) {\n    #dx-web-final-cta .dx-final-main {\n        padding:\n            50px\n            16px\n            56px;\n    }\n\n    #dx-web-final-cta .dx-final-panel {\n        gap: 29px;\n\n        padding:\n            29px\n            18px;\n\n        border-radius: 21px;\n    }\n\n    #dx-web-final-cta .dx-final-eyebrow {\n        margin-bottom: 10px;\n\n        font-size: 14px;\n    }\n\n    #dx-web-final-cta .dx-final-eyebrow::before {\n        width: 27px;\n    }\n\n    #dx-web-final-cta .dx-final-title {\n        font-size: clamp(28px, 8.5vw, 37px);\n        line-height: 1.62;\n        letter-spacing: -0.2px;\n    }\n\n    #dx-web-final-cta .dx-final-description {\n        margin-top: 10px;\n\n        font-size: 14px;\n        line-height: 2;\n    }\n\n    #dx-web-final-cta .dx-final-actions {\n        margin-top: 23px;\n\n        display: grid;\n        grid-template-columns: 1fr;\n\n        gap: 9px;\n    }\n\n    #dx-web-final-cta .dx-final-button {\n        width: 100%;\n        min-width: 0;\n        min-height: 50px;\n\n        font-size: 14px;\n    }\n\n    #dx-web-final-cta .dx-final-points {\n        margin-top: 18px;\n\n        justify-content: flex-start;\n\n        gap:\n            8px\n            14px;\n    }\n\n    #dx-web-final-cta .dx-final-point {\n        font-size: 14px;\n    }\n\n    #dx-web-final-cta .dx-final-summary {\n        padding:\n            21px\n            17px;\n\n        border-radius: 18px;\n    }\n\n    #dx-web-final-cta .dx-final-summary-head {\n        padding-bottom: 15px;\n    }\n\n    #dx-web-final-cta .dx-final-summary-icon {\n        width: 47px;\n        height: 47px;\n        flex-basis: 47px;\n\n        border-radius: 14px;\n    }\n\n    #dx-web-final-cta .dx-final-summary-icon svg {\n        width: 24px;\n        height: 24px;\n    }\n\n    #dx-web-final-cta .dx-final-summary-title {\n        font-size: 14px;\n    }\n\n    #dx-web-final-cta .dx-final-summary-subtitle {\n        font-size: 14px;\n    }\n\n    #dx-web-final-cta .dx-final-summary-list {\n        margin-top: 16px;\n\n        gap: 10px;\n    }\n\n    #dx-web-final-cta .dx-final-summary-item {\n        grid-template-columns:\n            31px\n            minmax(0, 1fr);\n\n        gap: 9px;\n    }\n\n    #dx-web-final-cta .dx-final-summary-number {\n        width: 31px;\n        height: 31px;\n\n        border-radius: 9px;\n\n        font-size: 14px;\n    }\n\n    #dx-web-final-cta .dx-final-summary-item-title {\n        font-size: 14px;\n    }\n\n    #dx-web-final-cta .dx-final-summary-item-text {\n        font-size: 14px;\n    }\n\n    #dx-web-final-cta .dx-final-summary-footer {\n        margin-top: 17px;\n        padding-top: 15px;\n\n        font-size: 14px;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-web-final-cta a:focus-visible {\n    outline: 3px solid var(--dx-cta-yellow);\n    outline-offset: 4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    #dx-web-final-cta *,\n    #dx-web-final-cta *::before,\n    #dx-web-final-cta *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-web-final-cta\"\n    aria-labelledby=\"dx-web-final-cta-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n    <div\n        class=\"dx-final-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <div class=\"dx-final-main\">\n\n        <div class=\"dx-final-container\">\n\n            <div class=\"dx-final-panel\">\n\n                <div class=\"dx-final-content\">\n\n                    <span class=\"dx-final-eyebrow\">\n                        Start Your Digital Project\n                    <\/span>\n\n                    <h2\n                        id=\"dx-web-final-cta-title\"\n                        class=\"dx-final-title\"\n                    >\n                        Ready to Build a Website That Reflects\n                        <span>the Strength of Your Business?<\/span>\n                    <\/h2>\n\n                    <p class=\"dx-final-description\">\n                        Share your goals, website type, and the features\n                        you need, and we will help you define the right\n                        solution in terms of design, development,\n                        technologies, and implementation approach.\n                    <\/p>\n\n                    <div class=\"dx-final-actions\">\n\n                        <a\n                            href=\"https:\/\/dindex.net\/en\/contact\/\"\n                            class=\"dx-final-button dx-final-button-primary\"\n                        >\n                            <span>Get a Free Consultation<\/span>\n\n                            <svg\n                                viewBox=\"0 0 24 24\"\n                                aria-hidden=\"true\"\n                            >\n                                <path d=\"M5 12h14\"><\/path>\n                                <path d=\"m13 6 6 6-6 6\"><\/path>\n                            <\/svg>\n                        <\/a>\n\n                        <a\n                            href=\"https:\/\/dindex.net\/en\/web-projects\/\"\n                            class=\"dx-final-button dx-final-button-secondary\"\n                        >\n                            <span>View All Projects<\/span>\n\n                            <svg\n                                viewBox=\"0 0 24 24\"\n                                aria-hidden=\"true\"\n                            >\n                                <rect\n                                    x=\"3\"\n                                    y=\"4\"\n                                    width=\"18\"\n                                    height=\"16\"\n                                    rx=\"2\"\n                                ><\/rect>\n                                <path d=\"M3 9h18\"><\/path>\n                            <\/svg>\n                        <\/a>\n\n                    <\/div>\n\n                    <div\n                        class=\"dx-final-points\"\n                        aria-label=\"Project start benefits\"\n                    >\n\n                        <span class=\"dx-final-point\">\n\n                            <span\n                                class=\"dx-final-point-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            Project Requirements Analysis\n\n                        <\/span>\n\n                        <span class=\"dx-final-point\">\n\n                            <span\n                                class=\"dx-final-point-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            Custom Responsive Design\n\n                        <\/span>\n\n                        <span class=\"dx-final-point\">\n\n                            <span\n                                class=\"dx-final-point-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            Post-Launch Support\n\n                        <\/span>\n\n                    <\/div>\n\n                <\/div>\n\n                <aside\n                    class=\"dx-final-summary\"\n                    aria-label=\"Website project start process\"\n                >\n\n                    <div class=\"dx-final-summary-head\">\n\n                        <span\n                            class=\"dx-final-summary-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <rect\n                                    x=\"3\"\n                                    y=\"4\"\n                                    width=\"18\"\n                                    height=\"16\"\n                                    rx=\"2\"\n                                ><\/rect>\n                                <path d=\"M3 9h18\"><\/path>\n                                <path d=\"m8 14 2 2 5-5\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <div class=\"dx-final-summary-copy\">\n\n                            <h3 class=\"dx-final-summary-title\">\n                                Start With Simple Steps\n                            <\/h3>\n\n                            <p class=\"dx-final-summary-subtitle\">\n                                From discussing your idea to defining the implementation plan\n                            <\/p>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <div class=\"dx-final-summary-list\">\n\n                        <div class=\"dx-final-summary-item\">\n\n                            <span class=\"dx-final-summary-number\">\n                                01\n                            <\/span>\n\n                            <span>\n\n                                <strong class=\"dx-final-summary-item-title\">\n                                    Share Your Project Details\n                                <\/strong>\n\n                                <span class=\"dx-final-summary-item-text\">\n                                    Website type, goals, and required features.\n                                <\/span>\n\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-final-summary-item\">\n\n                            <span class=\"dx-final-summary-number\">\n                                02\n                            <\/span>\n\n                            <span>\n\n                                <strong class=\"dx-final-summary-item-title\">\n                                    We Define the Right Solution\n                                <\/strong>\n\n                                <span class=\"dx-final-summary-item-text\">\n                                    Pages, design, technologies, and integrations.\n                                <\/span>\n\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-final-summary-item\">\n\n                            <span class=\"dx-final-summary-number\">\n                                03\n                            <\/span>\n\n                            <span>\n\n                                <strong class=\"dx-final-summary-item-title\">\n                                    We Start the Implementation Plan\n                                <\/strong>\n\n                                <span class=\"dx-final-summary-item-text\">\n                                    Clear stages for design, development, and launch.\n                                <\/span>\n\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <div class=\"dx-final-summary-footer\">\n\n                        <span\n                            class=\"dx-final-summary-status\"\n                            aria-hidden=\"true\"\n                        ><\/span>\n\n                        <span>\n                            The initial consultation helps define the project scope more accurately.\n                        <\/span>\n\n                    <\/div>\n\n                <\/aside>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxWebFinalCta() {\n        const section = document.getElementById(\n            \"dx-web-final-cta\"\n        );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized = \"true\";\n\n        const widget = section.closest(\n            \".elementor-widget-html\"\n        );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-web-final-cta-widget-fullwidth\"\n            );\n        }\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxWebFinalCta\n        );\n    } else {\n        initDxWebFinalCta();\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Digital Solutions Designed to Support Your Growth Website Design &#038; Development Built Around Your Goals We provide complete website design and development solutions that help your business stand out online. Whether you need a simple corporate website or a more advanced digital platform, we combine thoughtful design with modern technologies to create a smooth, professional, [&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-407","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>Website Design and Development - 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\/website-design-and-development\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Website Design and Development - D-INDEX - Your Partner in Digital Transformation\" \/>\n<meta property=\"og:description\" content=\"Digital Solutions Designed to Support Your Growth Website Design &#038; Development Built Around Your Goals We provide complete website design and development solutions that help your business stand out online. Whether you need a simple corporate website or a more advanced digital platform, we combine thoughtful design with modern technologies to create a smooth, professional, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dindex.net\/website-design-and-development\/\" \/>\n<meta property=\"og:site_name\" content=\"D-INDEX - Your Partner in Digital Transformation\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-20T09:10:58+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/dindex.net\\\/website-design-and-development\\\/\",\"url\":\"https:\\\/\\\/dindex.net\\\/website-design-and-development\\\/\",\"name\":\"Website Design and Development - D-INDEX - Your Partner in Digital Transformation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/dindex.net\\\/#website\"},\"datePublished\":\"2025-04-06T08:42:59+00:00\",\"dateModified\":\"2026-08-20T09:10:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/dindex.net\\\/website-design-and-development\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/dindex.net\\\/website-design-and-development\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/dindex.net\\\/website-design-and-development\\\/#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\":\"Website Design and Development\"}]},{\"@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":"Website Design and Development - 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\/website-design-and-development\/","og_locale":"en_US","og_type":"article","og_title":"Website Design and Development - D-INDEX - Your Partner in Digital Transformation","og_description":"Digital Solutions Designed to Support Your Growth Website Design &#038; Development Built Around Your Goals We provide complete website design and development solutions that help your business stand out online. Whether you need a simple corporate website or a more advanced digital platform, we combine thoughtful design with modern technologies to create a smooth, professional, [&hellip;]","og_url":"https:\/\/dindex.net\/website-design-and-development\/","og_site_name":"D-INDEX - Your Partner in Digital Transformation","article_modified_time":"2026-08-20T09:10:58+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dindex.net\/website-design-and-development\/","url":"https:\/\/dindex.net\/website-design-and-development\/","name":"Website Design and Development - D-INDEX - Your Partner in Digital Transformation","isPartOf":{"@id":"https:\/\/dindex.net\/#website"},"datePublished":"2025-04-06T08:42:59+00:00","dateModified":"2026-08-20T09:10:58+00:00","breadcrumb":{"@id":"https:\/\/dindex.net\/website-design-and-development\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dindex.net\/website-design-and-development\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/dindex.net\/website-design-and-development\/#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":"Website Design and Development"}]},{"@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\/407","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=407"}],"version-history":[{"count":6,"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/pages\/407\/revisions"}],"predecessor-version":[{"id":4059,"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/pages\/407\/revisions\/4059"}],"wp:attachment":[{"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/media?parent=407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}