{"id":2252,"date":"2026-01-13T13:27:21","date_gmt":"2026-01-13T13:27:21","guid":{"rendered":"https:\/\/dindex.net\/?page_id=2252"},"modified":"2026-08-19T13:12:08","modified_gmt":"2026-08-19T13:12:08","slug":"brand-projects","status":"publish","type":"page","link":"https:\/\/dindex.net\/en\/brand-projects\/","title":{"rendered":"Brand Projects"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2252\" class=\"elementor elementor-2252\" 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-4e525a2 e-con-full e-flex e-con e-parent\" data-id=\"4e525a2\" 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-5e7a87f elementor-widget elementor-widget-html\" data-id=\"5e7a87f\" 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     BRAND PROJECTS PAGE \u2014 HERO SECTION\n     Author: Mohamed El-Sehemy\n     English LTR - Elementor Compatible\n========================================================== -->\n\n<style>\n\/* =========================================================\n   ELEMENTOR FULL WIDTH\n========================================================= *\/\n\n.elementor-widget-html:has(#dx-brand-projects-hero),\n.elementor-widget-html:has(#dx-brand-projects-hero)\n    > .elementor-widget-container,\n.dx-brand-projects-hero-widget-fullwidth,\n.dx-brand-projects-hero-widget-fullwidth\n    > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n\n    margin: 0 !important;\n    padding: 0 !important;\n\n    overflow: visible !important;\n}\n\n\/* =========================================================\n   RESET & VARIABLES\n========================================================= *\/\n\n#dx-brand-projects-hero,\n#dx-brand-projects-hero *,\n#dx-brand-projects-hero *::before,\n#dx-brand-projects-hero *::after {\n    box-sizing: border-box;\n}\n\n#dx-brand-projects-hero {\n    --dx-brand-dark: #08001f;\n    --dx-brand-dark-light: #160638;\n    --dx-brand-purple: #6942d8;\n    --dx-brand-purple-light: #9168ef;\n    --dx-brand-yellow: #ffc441;\n    --dx-brand-white: #ffffff;\n    --dx-brand-text: rgba(255, 255, 255, 0.76);\n    --dx-brand-muted: rgba(255, 255, 255, 0.58);\n    --dx-brand-border: rgba(255, 255, 255, 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    color: var(--dx-brand-white);\n\n    background:\n        radial-gradient(\n            circle at 88% 18%,\n            rgba(145, 104, 239, 0.25),\n            transparent 31%\n        ),\n        radial-gradient(\n            circle at 12% 78%,\n            rgba(105, 66, 216, 0.25),\n            transparent 33%\n        ),\n        linear-gradient(\n            215deg,\n            var(--dx-brand-dark-light),\n            var(--dx-brand-dark)\n        );\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-brand-projects-hero a {\n    color: inherit;\n    text-decoration: none;\n}\n\n\/* =========================================================\n   BACKGROUND\n========================================================= *\/\n\n#dx-brand-projects-hero .dx-brand-hero-grid {\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 18%,\n            transparent 78%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 18%,\n            transparent 78%\n        );\n\n    pointer-events: none;\n}\n\n#dx-brand-projects-hero .dx-brand-hero-orbit {\n    position: absolute;\n    z-index: -4;\n\n    border: 1px solid rgba(255, 255, 255, 0.09);\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-brand-projects-hero .dx-brand-hero-orbit-one {\n    top: -230px;\n    left: -180px;\n\n    width: 470px;\n    height: 470px;\n}\n\n#dx-brand-projects-hero .dx-brand-hero-orbit-two {\n    right: -220px;\n    bottom: -270px;\n\n    width: 540px;\n    height: 540px;\n}\n\n#dx-brand-projects-hero .dx-brand-hero-glow {\n    position: absolute;\n    z-index: -5;\n\n    border-radius: 50%;\n\n    filter: blur(90px);\n\n    pointer-events: none;\n}\n\n#dx-brand-projects-hero .dx-brand-hero-glow-one {\n    top: 8%;\n    left: 32%;\n\n    width: 310px;\n    height: 310px;\n\n    background: rgba(105, 66, 216, 0.22);\n}\n\n#dx-brand-projects-hero .dx-brand-hero-glow-two {\n    right: 8%;\n    bottom: -60px;\n\n    width: 360px;\n    height: 280px;\n\n    background: rgba(255, 196, 65, 0.07);\n}\n\n#dx-brand-projects-hero .dx-brand-hero-dots {\n    position: absolute;\n    z-index: -3;\n\n    width: 125px;\n    height: 125px;\n\n    opacity: 0.25;\n\n    background-image:\n        radial-gradient(\n            circle,\n            var(--dx-brand-purple-light) 2px,\n            transparent 2.7px\n        );\n\n    background-size: 17px 17px;\n\n    pointer-events: none;\n}\n\n#dx-brand-projects-hero .dx-brand-hero-dots-one {\n    top: 78px;\n    right: 4%;\n}\n\n#dx-brand-projects-hero .dx-brand-hero-dots-two {\n    left: 4%;\n    bottom: 60px;\n}\n\n\/* =========================================================\n   LAYOUT\n========================================================= *\/\n\n#dx-brand-projects-hero .dx-brand-hero-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        92px\n        clamp(22px, 5vw, 90px)\n        96px;\n}\n\n#dx-brand-projects-hero .dx-brand-hero-container {\n    width: min(1450px, 100%);\n    min-height: 520px;\n\n    margin: 0 auto;\n\n    display: grid;\n    grid-template-columns:\n        minmax(440px, 0.96fr)\n        minmax(500px, 1.04fr);\n\n    align-items: center;\n    gap: clamp(48px, 6vw, 95px);\n}\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n#dx-brand-projects-hero .dx-brand-hero-content {\n    position: relative;\n    z-index: 4;\n\n    max-width: 700px;\n\n    justify-self: start;\n    text-align: left;\n}\n\n#dx-brand-projects-hero .dx-brand-hero-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n\n    margin-bottom: 16px;\n\n    color: var(--dx-brand-yellow);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-brand-projects-hero .dx-brand-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-brand-yellow),\n            var(--dx-brand-purple-light)\n        );\n}\n\n#dx-brand-projects-hero .dx-brand-hero-title {\n    margin: 0;\n\n    color: var(--dx-brand-white);\n\n    font-size: clamp(46px, 5vw, 76px);\n    font-weight: 900;\n    line-height: 1.38;\n    letter-spacing: -0.8px;\n\n    text-wrap: balance;\n}\n\n#dx-brand-projects-hero .dx-brand-hero-title-highlight {\n    color: var(--dx-brand-yellow);\n}\n\n#dx-brand-projects-hero .dx-brand-hero-description {\n    max-width: 670px;\n\n    margin: 21px 0 0;\n\n    color: var(--dx-brand-text);\n\n    font-size: 16px;\n    font-weight: 500;\n    line-height: 2;\n\n    text-wrap: pretty;\n}\n\n#dx-brand-projects-hero .dx-brand-hero-points {\n    margin-top: 22px;\n\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    gap: 12px 22px;\n}\n\n#dx-brand-projects-hero .dx-brand-hero-point {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n\n    color: var(--dx-brand-muted);\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.6;\n}\n\n#dx-brand-projects-hero .dx-brand-hero-point::before {\n    content: \"\";\n\n    width: 7px;\n    height: 7px;\n    flex: 0 0 7px;\n\n    border-radius: 50%;\n\n    background: var(--dx-brand-yellow);\n\n    box-shadow:\n        0 0 0 5px rgba(255, 196, 65, 0.11);\n}\n\n\/* =========================================================\n   ACTIONS\n========================================================= *\/\n\n#dx-brand-projects-hero .dx-brand-hero-actions {\n    margin-top: 32px;\n\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    gap: 13px;\n}\n\n#dx-brand-projects-hero .dx-brand-hero-button {\n    position: relative;\n    isolation: isolate;\n\n    min-width: 210px;\n    min-height: 56px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n\n    padding: 0 26px;\n\n    overflow: hidden;\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        box-shadow 0.25s ease;\n}\n\n#dx-brand-projects-hero .dx-brand-hero-button-primary {\n    color: #160a2d;\n\n    border-color: rgba(255, 255, 255, 0.25);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-brand-yellow),\n            #ffd66e\n        );\n\n    box-shadow:\n        0 17px 38px rgba(255, 196, 65, 0.22);\n}\n\n#dx-brand-projects-hero\n    .dx-brand-hero-button-primary::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -1;\n\n    top: -40%;\n    left: -70%;\n\n    width: 36%;\n    height: 180%;\n\n    background:\n        linear-gradient(\n            90deg,\n            transparent,\n            rgba(255, 255, 255, 0.58),\n            transparent\n        );\n\n    transform: rotate(18deg);\n\n    transition: left 0.55s ease;\n}\n\n#dx-brand-projects-hero\n    .dx-brand-hero-button-primary:hover::before {\n    left: 135%;\n}\n\n#dx-brand-projects-hero .dx-brand-hero-button-secondary {\n    color: var(--dx-brand-white);\n\n    border-color: rgba(255, 255, 255, 0.22);\n\n    background: rgba(255, 255, 255, 0.055);\n\n    -webkit-backdrop-filter: blur(10px);\n    backdrop-filter: blur(10px);\n}\n\n#dx-brand-projects-hero .dx-brand-hero-button:hover,\n#dx-brand-projects-hero .dx-brand-hero-button:focus-visible {\n    transform: translateY(-4px);\n}\n\n#dx-brand-projects-hero\n    .dx-brand-hero-button-primary:hover,\n#dx-brand-projects-hero\n    .dx-brand-hero-button-primary:focus-visible {\n    box-shadow:\n        0 23px 48px rgba(255, 196, 65, 0.32);\n}\n\n#dx-brand-projects-hero\n    .dx-brand-hero-button-secondary:hover,\n#dx-brand-projects-hero\n    .dx-brand-hero-button-secondary:focus-visible {\n    border-color: rgba(145, 104, 239, 0.75);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-brand-purple),\n            var(--dx-brand-purple-light)\n        );\n\n    box-shadow:\n        0 19px 42px rgba(105, 66, 216, 0.32);\n}\n\n#dx-brand-projects-hero .dx-brand-hero-button svg {\n    width: 19px;\n    height: 19px;\n    flex: 0 0 19px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.9;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   VISUAL\n========================================================= *\/\n\n#dx-brand-projects-hero .dx-brand-hero-visual {\n    position: relative;\n\n    width: 100%;\n    min-width: 0;\n    min-height: 500px;\n\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n}\n\n#dx-brand-projects-hero .dx-brand-mockup-scene {\n    position: relative;\n\n    width: min(100%, 670px);\n    min-height: 490px;\n\n    margin-right: auto;\n}\n\n\/* Main board *\/\n\n#dx-brand-projects-hero .dx-brand-board {\n    position: absolute;\n\n    top: 36px;\n    left: 34px;\n\n    width: min(74%, 470px);\n    height: 360px;\n\n    overflow: hidden;\n\n    border: 1px solid rgba(255, 255, 255, 0.14);\n    border-radius: 27px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.11),\n            rgba(255, 255, 255, 0.035)\n        );\n\n    box-shadow:\n        0 38px 80px rgba(2, 0, 20, 0.38),\n        inset 0 1px 0 rgba(255, 255, 255, 0.09);\n\n    -webkit-backdrop-filter: blur(14px);\n    backdrop-filter: blur(14px);\n\n    transform:\n        perspective(1200px)\n        rotateY(5deg)\n        rotateX(2deg);\n\n    transition: transform 0.42s ease;\n}\n\n#dx-brand-projects-hero .dx-brand-mockup-scene:hover\n    .dx-brand-board {\n    transform:\n        perspective(1200px)\n        rotateY(1deg)\n        rotateX(0deg)\n        translateY(-5px);\n}\n\n#dx-brand-projects-hero .dx-brand-board-inner {\n    position: absolute;\n    inset: 18px;\n\n    overflow: hidden;\n\n    border-radius: 19px;\n\n    background:\n        radial-gradient(\n            circle at 22% 18%,\n            rgba(255, 196, 65, 0.18),\n            transparent 28%\n        ),\n        linear-gradient(\n            215deg,\n            #fefefe,\n            #f1edf9\n        );\n}\n\n#dx-brand-projects-hero .dx-brand-board-header {\n    height: 52px;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    padding: 0 18px;\n\n    border-bottom: 1px solid rgba(105, 66, 216, 0.10);\n\n    background: rgba(255, 255, 255, 0.80);\n}\n\n#dx-brand-projects-hero .dx-brand-board-logo {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n#dx-brand-projects-hero .dx-brand-board-logo-mark {\n    width: 34px;\n    height: 34px;\n\n    border-radius: 11px;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-brand-purple),\n            var(--dx-brand-purple-light)\n        );\n\n    box-shadow:\n        0 10px 22px rgba(105, 66, 216, 0.25);\n}\n\n#dx-brand-projects-hero .dx-brand-board-logo-lines {\n    display: grid;\n    gap: 5px;\n}\n\n#dx-brand-projects-hero .dx-brand-board-logo-lines span {\n    display: block;\n\n    height: 5px;\n\n    border-radius: 999px;\n\n    background: rgba(24, 11, 53, 0.18);\n}\n\n#dx-brand-projects-hero\n    .dx-brand-board-logo-lines span:first-child {\n    width: 70px;\n}\n\n#dx-brand-projects-hero\n    .dx-brand-board-logo-lines span:last-child {\n    width: 45px;\n}\n\n#dx-brand-projects-hero .dx-brand-board-dots {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n#dx-brand-projects-hero .dx-brand-board-dots span {\n    width: 8px;\n    height: 8px;\n\n    border-radius: 50%;\n\n    background: rgba(105, 66, 216, 0.22);\n}\n\n#dx-brand-projects-hero .dx-brand-board-body {\n    position: relative;\n\n    height: calc(100% - 52px);\n\n    padding: 28px;\n}\n\n#dx-brand-projects-hero .dx-brand-board-title {\n    width: 58%;\n    height: 28px;\n\n    border-radius: 9px;\n\n    background: #180b35;\n}\n\n#dx-brand-projects-hero .dx-brand-board-text {\n    width: 78%;\n    height: 8px;\n\n    margin-top: 12px;\n\n    border-radius: 999px;\n\n    background: rgba(36, 22, 67, 0.16);\n}\n\n#dx-brand-projects-hero .dx-brand-board-text.is-short {\n    width: 51%;\n}\n\n#dx-brand-projects-hero .dx-brand-color-row {\n    margin-top: 32px;\n\n    display: flex;\n    align-items: center;\n    gap: 11px;\n}\n\n#dx-brand-projects-hero .dx-brand-color {\n    width: 45px;\n    height: 45px;\n\n    border-radius: 14px;\n\n    box-shadow:\n        0 10px 20px rgba(30, 13, 69, 0.11);\n}\n\n#dx-brand-projects-hero .dx-brand-color:nth-child(1) {\n    background: var(--dx-brand-purple);\n}\n\n#dx-brand-projects-hero .dx-brand-color:nth-child(2) {\n    background: var(--dx-brand-purple-light);\n}\n\n#dx-brand-projects-hero .dx-brand-color:nth-child(3) {\n    background: var(--dx-brand-yellow);\n}\n\n#dx-brand-projects-hero .dx-brand-color:nth-child(4) {\n    background: #180b35;\n}\n\n#dx-brand-projects-hero .dx-brand-board-cards {\n    margin-top: 28px;\n\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n\n    gap: 10px;\n}\n\n#dx-brand-projects-hero .dx-brand-board-card {\n    height: 84px;\n\n    border: 1px solid rgba(105, 66, 216, 0.10);\n    border-radius: 13px;\n\n    background:\n        linear-gradient(\n            145deg,\n            #ffffff,\n            #f7f3fd\n        );\n\n    box-shadow:\n        0 12px 24px rgba(51, 30, 99, 0.08);\n}\n\n\/* Business card *\/\n\n#dx-brand-projects-hero .dx-brand-business-card {\n    position: absolute;\n    z-index: 4;\n\n    right: 10px;\n    bottom: 65px;\n\n    width: 265px;\n    height: 150px;\n\n    padding: 22px;\n\n    overflow: hidden;\n\n    border: 1px solid rgba(255, 255, 255, 0.18);\n    border-radius: 20px;\n\n    background:\n        radial-gradient(\n            circle at 85% 15%,\n            rgba(255, 255, 255, 0.15),\n            transparent 28%\n        ),\n        linear-gradient(\n            225deg,\n            var(--dx-brand-purple-light),\n            var(--dx-brand-purple)\n        );\n\n    box-shadow:\n        0 26px 58px rgba(31, 10, 78, 0.42);\n\n    transform: rotate(7deg);\n\n    animation:\n        dxBrandFloatOne\n        5.5s\n        ease-in-out\n        infinite;\n}\n\n#dx-brand-projects-hero\n    .dx-brand-business-card::before {\n    content: \"\";\n\n    position: absolute;\n\n    left: -70px;\n    bottom: -75px;\n\n    width: 180px;\n    height: 180px;\n\n    border: 1px solid rgba(255, 255, 255, 0.16);\n    border-radius: 50%;\n}\n\n#dx-brand-projects-hero .dx-brand-card-logo {\n    width: 43px;\n    height: 43px;\n\n    border-radius: 13px;\n\n    background: var(--dx-brand-yellow);\n\n    box-shadow:\n        0 12px 25px rgba(255, 196, 65, 0.25);\n}\n\n#dx-brand-projects-hero .dx-brand-card-line {\n    width: 118px;\n    height: 7px;\n\n    margin-top: 19px;\n\n    border-radius: 999px;\n\n    background: rgba(255, 255, 255, 0.78);\n}\n\n#dx-brand-projects-hero .dx-brand-card-line.is-short {\n    width: 78px;\n\n    margin-top: 8px;\n\n    opacity: 0.55;\n}\n\n\/* Packaging *\/\n\n#dx-brand-projects-hero .dx-brand-package {\n    position: absolute;\n    z-index: 5;\n\n    left: 0;\n    bottom: 15px;\n\n    width: 175px;\n    height: 235px;\n\n    padding: 22px;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n\n    overflow: hidden;\n\n    border: 1px solid rgba(255, 255, 255, 0.18);\n    border-radius: 21px 21px 30px 30px;\n\n    background:\n        radial-gradient(\n            circle at 30% 18%,\n            rgba(145, 104, 239, 0.25),\n            transparent 30%\n        ),\n        linear-gradient(\n            200deg,\n            #ffffff,\n            #ebe6f6\n        );\n\n    box-shadow:\n        0 28px 60px rgba(17, 5, 50, 0.35);\n\n    transform: rotate(-6deg);\n\n    animation:\n        dxBrandFloatTwo\n        6.2s\n        ease-in-out\n        infinite;\n}\n\n#dx-brand-projects-hero .dx-brand-package-mark {\n    width: 55px;\n    height: 55px;\n\n    margin: 0 auto;\n\n    border-radius: 18px;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-brand-purple),\n            var(--dx-brand-purple-light)\n        );\n\n    box-shadow:\n        0 13px 26px rgba(105, 66, 216, 0.25);\n}\n\n#dx-brand-projects-hero .dx-brand-package-lines {\n    display: grid;\n    gap: 8px;\n}\n\n#dx-brand-projects-hero .dx-brand-package-lines span {\n    height: 7px;\n\n    border-radius: 999px;\n\n    background: rgba(24, 11, 53, 0.15);\n}\n\n#dx-brand-projects-hero\n    .dx-brand-package-lines span:nth-child(2) {\n    width: 78%;\n}\n\n#dx-brand-projects-hero\n    .dx-brand-package-lines span:nth-child(3) {\n    width: 56%;\n}\n\n\/* Social post *\/\n\n#dx-brand-projects-hero .dx-brand-social-post {\n    position: absolute;\n    z-index: 3;\n\n    top: 18px;\n    right: 45px;\n\n    width: 155px;\n    height: 155px;\n\n    padding: 17px;\n\n    border: 1px solid rgba(255, 255, 255, 0.18);\n    border-radius: 24px;\n\n    background:\n        linear-gradient(\n            145deg,\n            var(--dx-brand-yellow),\n            #ffd66e\n        );\n\n    box-shadow:\n        0 24px 50px rgba(255, 196, 65, 0.22);\n\n    transform: rotate(4deg);\n\n    animation:\n        dxBrandFloatThree\n        5.8s\n        ease-in-out\n        infinite;\n}\n\n#dx-brand-projects-hero .dx-brand-social-shape {\n    width: 64px;\n    height: 64px;\n\n    margin: 0 auto 14px;\n\n    border-radius:\n        22px\n        22px\n        22px\n        7px;\n\n    background: #180b35;\n}\n\n#dx-brand-projects-hero .dx-brand-social-line {\n    height: 7px;\n\n    margin-top: 8px;\n\n    border-radius: 999px;\n\n    background: rgba(24, 11, 53, 0.24);\n}\n\n#dx-brand-projects-hero\n    .dx-brand-social-line.is-short {\n    width: 65%;\n}\n\n\/* Floating tags *\/\n\n#dx-brand-projects-hero .dx-brand-floating-tag {\n    position: absolute;\n    z-index: 7;\n\n    display: inline-flex;\n    align-items: center;\n    gap: 9px;\n\n    padding: 11px 15px;\n\n    border: 1px solid rgba(255, 255, 255, 0.16);\n    border-radius: 13px;\n\n    color: var(--dx-brand-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 38px rgba(42, 15, 105, 0.35);\n\n    font-size: 14px;\n    font-weight: 900;\n\n    animation:\n        dxBrandTagFloat\n        4.8s\n        ease-in-out\n        infinite;\n}\n\n#dx-brand-projects-hero .dx-brand-floating-tag-one {\n    top: 9%;\n    left: -12px;\n}\n\n#dx-brand-projects-hero .dx-brand-floating-tag-two {\n    right: -12px;\n    bottom: 3%;\n\n    color: #1a0d31;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-brand-yellow),\n            #ffd66e\n        );\n\n    animation-delay: -2.1s;\n}\n\n#dx-brand-projects-hero .dx-brand-floating-tag svg {\n    width: 18px;\n    height: 18px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.9;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   ANIMATIONS\n========================================================= *\/\n\n@keyframes dxBrandFloatOne {\n    0%,\n    100% {\n        transform:\n            rotate(7deg)\n            translateY(0);\n    }\n\n    50% {\n        transform:\n            rotate(5deg)\n            translateY(-10px);\n    }\n}\n\n@keyframes dxBrandFloatTwo {\n    0%,\n    100% {\n        transform:\n            rotate(-6deg)\n            translateY(0);\n    }\n\n    50% {\n        transform:\n            rotate(-4deg)\n            translateY(-12px);\n    }\n}\n\n@keyframes dxBrandFloatThree {\n    0%,\n    100% {\n        transform:\n            rotate(4deg)\n            translateY(0);\n    }\n\n    50% {\n        transform:\n            rotate(2deg)\n            translateY(-9px);\n    }\n}\n\n@keyframes dxBrandTagFloat {\n    0%,\n    100% {\n        transform: translateY(0);\n    }\n\n    50% {\n        transform: translateY(-10px);\n    }\n}\n\n\/* =========================================================\n   RESPONSIVE\n========================================================= *\/\n\n@media (max-width: 1100px) {\n    #dx-brand-projects-hero .dx-brand-hero-container {\n        grid-template-columns:\n            minmax(380px, 0.95fr)\n            minmax(420px, 1.05fr);\n\n        gap: 38px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-hero-title {\n        font-size: clamp(43px, 5.6vw, 64px);\n    }\n\n    #dx-brand-projects-hero .dx-brand-mockup-scene {\n        transform: scale(0.92);\n        transform-origin: center;\n    }\n}\n\n@media (max-width: 850px) {\n    #dx-brand-projects-hero .dx-brand-hero-main {\n        padding:\n            74px\n            28px\n            80px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-hero-container {\n        min-height: 0;\n\n        grid-template-columns: 1fr;\n\n        gap: 45px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-hero-content {\n        max-width: 720px;\n\n        margin: 0 auto;\n\n        justify-self: center;\n        text-align: center;\n    }\n\n    #dx-brand-projects-hero .dx-brand-hero-eyebrow {\n        justify-content: center;\n    }\n\n    #dx-brand-projects-hero .dx-brand-hero-description {\n        margin-right: auto;\n        margin-left: auto;\n    }\n\n    #dx-brand-projects-hero .dx-brand-hero-points,\n    #dx-brand-projects-hero .dx-brand-hero-actions {\n        justify-content: center;\n    }\n\n    #dx-brand-projects-hero .dx-brand-hero-visual {\n        min-height: 470px;\n\n        justify-content: center;\n    }\n\n    #dx-brand-projects-hero .dx-brand-mockup-scene {\n        width: min(100%, 650px);\n\n        margin: 0 auto;\n\n        transform: none;\n    }\n}\n\n@media (max-width: 600px) {\n    #dx-brand-projects-hero .dx-brand-hero-main {\n        padding:\n            58px\n            18px\n            62px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-hero-container {\n        gap: 34px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-hero-eyebrow {\n        margin-bottom: 12px;\n\n        font-size: 14px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-hero-eyebrow::before {\n        width: 28px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-hero-title {\n        font-size: clamp(34px, 10vw, 47px);\n        line-height: 1.52;\n        letter-spacing: -0.3px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-hero-description {\n        margin-top: 15px;\n\n        font-size: 14px;\n        line-height: 2;\n    }\n\n    #dx-brand-projects-hero .dx-brand-hero-points {\n        margin-top: 17px;\n\n        display: grid;\n        grid-template-columns: 1fr;\n\n        justify-items: center;\n\n        gap: 10px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-hero-actions {\n        margin-top: 25px;\n\n        display: grid;\n        grid-template-columns: 1fr;\n\n        gap: 10px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-hero-button {\n        width: 100%;\n        min-width: 0;\n        min-height: 54px;\n\n        font-size: 14px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-hero-visual {\n        min-height: 335px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-mockup-scene {\n        min-height: 335px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-board {\n        top: 22px;\n        left: 50%;\n\n        width: 82%;\n        height: 260px;\n\n        transform:\n            translateX(-50%)\n            rotateY(0deg)\n            rotateX(0deg);\n\n        border-radius: 20px;\n    }\n\n    #dx-brand-projects-hero\n        .dx-brand-mockup-scene:hover\n        .dx-brand-board {\n        transform:\n            translateX(-50%)\n            translateY(-3px);\n    }\n\n    #dx-brand-projects-hero .dx-brand-board-inner {\n        inset: 11px;\n\n        border-radius: 14px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-board-header {\n        height: 42px;\n\n        padding: 0 12px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-board-logo-mark {\n        width: 27px;\n        height: 27px;\n\n        border-radius: 9px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-board-logo-lines span:first-child {\n        width: 50px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-board-logo-lines span:last-child {\n        width: 34px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-board-body {\n        height: calc(100% - 42px);\n\n        padding: 18px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-board-title {\n        height: 20px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-color-row {\n        margin-top: 20px;\n        gap: 8px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-color {\n        width: 32px;\n        height: 32px;\n\n        border-radius: 10px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-board-cards {\n        margin-top: 18px;\n\n        gap: 7px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-board-card {\n        height: 52px;\n\n        border-radius: 9px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-business-card {\n        right: 3px;\n        bottom: 26px;\n\n        width: 155px;\n        height: 92px;\n\n        padding: 14px;\n\n        border-radius: 15px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-card-logo {\n        width: 29px;\n        height: 29px;\n\n        border-radius: 9px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-card-line {\n        width: 78px;\n        height: 5px;\n\n        margin-top: 10px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-card-line.is-short {\n        width: 50px;\n        margin-top: 5px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-package {\n        left: 2px;\n        bottom: 12px;\n\n        width: 105px;\n        height: 145px;\n\n        padding: 13px;\n\n        border-radius: 15px 15px 20px 20px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-package-mark {\n        width: 35px;\n        height: 35px;\n\n        border-radius: 11px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-package-lines {\n        gap: 5px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-package-lines span {\n        height: 5px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-social-post {\n        top: 2px;\n        right: 3px;\n\n        width: 92px;\n        height: 92px;\n\n        padding: 10px;\n\n        border-radius: 15px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-social-shape {\n        width: 38px;\n        height: 38px;\n\n        margin-bottom: 7px;\n\n        border-radius:\n            13px\n            13px\n            13px\n            5px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-social-line {\n        height: 4px;\n        margin-top: 5px;\n    }\n\n    #dx-brand-projects-hero .dx-brand-floating-tag,\n    #dx-brand-projects-hero .dx-brand-hero-dots {\n        display: none;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-brand-projects-hero a:focus-visible {\n    outline: 3px solid var(--dx-brand-yellow);\n    outline-offset: 4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    #dx-brand-projects-hero *,\n    #dx-brand-projects-hero *::before,\n    #dx-brand-projects-hero *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-brand-projects-hero\"\n    aria-labelledby=\"dx-brand-projects-hero-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n    <div\n        class=\"dx-brand-hero-grid\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <span\n        class=\"dx-brand-hero-orbit dx-brand-hero-orbit-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-brand-hero-orbit dx-brand-hero-orbit-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-brand-hero-glow dx-brand-hero-glow-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-brand-hero-glow dx-brand-hero-glow-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-brand-hero-dots dx-brand-hero-dots-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-brand-hero-dots dx-brand-hero-dots-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-brand-hero-main\">\n\n        <div class=\"dx-brand-hero-container\">\n\n            <div class=\"dx-brand-hero-content\">\n\n                <span class=\"dx-brand-hero-eyebrow\">\n                    Featured Projects\n                <\/span>\n\n                <h1\n                    id=\"dx-brand-projects-hero-title\"\n                    class=\"dx-brand-hero-title\"\n                >\n                    Brand Identity\n                    <span class=\"dx-brand-hero-title-highlight\">\n                        Projects\n                    <\/span>\n                <\/h1>\n\n                <p class=\"dx-brand-hero-description\">\n                    We create complete visual identities that give brands\n                    a clear personality and professional presence, from\n                    logos, colors, and typography to branded applications\n                    across digital platforms and marketing materials.\n                <\/p>\n\n                <div\n                    class=\"dx-brand-hero-points\"\n                    aria-label=\"Brand identity elements\"\n                >\n                    <span class=\"dx-brand-hero-point\">\n                        Logo Design\n                    <\/span>\n\n                    <span class=\"dx-brand-hero-point\">\n                        Colors & Typography\n                    <\/span>\n\n                    <span class=\"dx-brand-hero-point\">\n                        Brand Applications\n                    <\/span>\n                <\/div>\n\n                <div class=\"dx-brand-hero-actions\">\n\n                    <a\n                        href=\"#dx-brand-projects-grid\"\n                        class=\"dx-brand-hero-button dx-brand-hero-button-primary\"\n                    >\n                        <span>Explore Brand Projects<\/span>\n\n                        <svg\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <path d=\"M12 5v14\"><\/path>\n                            <path d=\"m18 13-6 6-6-6\"><\/path>\n                        <\/svg>\n                    <\/a>\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/contact\/\"\n                        class=\"dx-brand-hero-button dx-brand-hero-button-secondary\"\n                    >\n                        <span>Start Your Brand 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 class=\"dx-brand-hero-visual\">\n\n                <div class=\"dx-brand-mockup-scene\">\n\n                    <div class=\"dx-brand-board\">\n\n                        <div class=\"dx-brand-board-inner\">\n\n                            <div class=\"dx-brand-board-header\">\n\n                                <div class=\"dx-brand-board-logo\">\n\n                                    <span\n                                        class=\"dx-brand-board-logo-mark\"\n                                        aria-hidden=\"true\"\n                                    ><\/span>\n\n                                    <span\n                                        class=\"dx-brand-board-logo-lines\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <span><\/span>\n                                        <span><\/span>\n                                    <\/span>\n\n                                <\/div>\n\n                                <span\n                                    class=\"dx-brand-board-dots\"\n                                    aria-hidden=\"true\"\n                                >\n                                    <span><\/span>\n                                    <span><\/span>\n                                    <span><\/span>\n                                <\/span>\n\n                            <\/div>\n\n                            <div class=\"dx-brand-board-body\">\n\n                                <div\n                                    class=\"dx-brand-board-title\"\n                                    aria-hidden=\"true\"\n                                ><\/div>\n\n                                <div\n                                    class=\"dx-brand-board-text\"\n                                    aria-hidden=\"true\"\n                                ><\/div>\n\n                                <div\n                                    class=\"dx-brand-board-text is-short\"\n                                    aria-hidden=\"true\"\n                                ><\/div>\n\n                                <div\n                                    class=\"dx-brand-color-row\"\n                                    aria-label=\"Brand color palette\"\n                                >\n                                    <span class=\"dx-brand-color\"><\/span>\n                                    <span class=\"dx-brand-color\"><\/span>\n                                    <span class=\"dx-brand-color\"><\/span>\n                                    <span class=\"dx-brand-color\"><\/span>\n                                <\/div>\n\n                                <div\n                                    class=\"dx-brand-board-cards\"\n                                    aria-hidden=\"true\"\n                                >\n                                    <span class=\"dx-brand-board-card\"><\/span>\n                                    <span class=\"dx-brand-board-card\"><\/span>\n                                    <span class=\"dx-brand-board-card\"><\/span>\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <div\n                        class=\"dx-brand-business-card\"\n                        aria-hidden=\"true\"\n                    >\n                        <div class=\"dx-brand-card-logo\"><\/div>\n                        <div class=\"dx-brand-card-line\"><\/div>\n                        <div class=\"dx-brand-card-line is-short\"><\/div>\n                    <\/div>\n\n                    <div\n                        class=\"dx-brand-package\"\n                        aria-hidden=\"true\"\n                    >\n                        <div class=\"dx-brand-package-mark\"><\/div>\n\n                        <div class=\"dx-brand-package-lines\">\n                            <span><\/span>\n                            <span><\/span>\n                            <span><\/span>\n                        <\/div>\n                    <\/div>\n\n                    <div\n                        class=\"dx-brand-social-post\"\n                        aria-hidden=\"true\"\n                    >\n                        <div class=\"dx-brand-social-shape\"><\/div>\n                        <div class=\"dx-brand-social-line\"><\/div>\n                        <div class=\"dx-brand-social-line is-short\"><\/div>\n                    <\/div>\n\n                    <span\n                        class=\"dx-brand-floating-tag dx-brand-floating-tag-one\"\n                    >\n                        <svg\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <path d=\"M12 3c-5 0-9 4-9 9 0 3 2 5 5 5h1c1 0 2 1 2 2s1 2 2 2c5 0 8-4 8-9 0-5-4-9-9-9z\"><\/path>\n                            <circle cx=\"8\" cy=\"10\" r=\"1\"><\/circle>\n                            <circle cx=\"12\" cy=\"7\" r=\"1\"><\/circle>\n                            <circle cx=\"16\" cy=\"10\" r=\"1\"><\/circle>\n                        <\/svg>\n\n                        <span>Complete Brand Identity<\/span>\n                    <\/span>\n\n                    <span\n                        class=\"dx-brand-floating-tag dx-brand-floating-tag-two\"\n                    >\n                        <svg\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <path d=\"M4 5h16v14H4z\"><\/path>\n                            <path d=\"M4 9h16\"><\/path>\n                            <path d=\"M8 13h8\"><\/path>\n                            <path d=\"M8 16h5\"><\/path>\n                        <\/svg>\n\n                        <span>Professional Applications<\/span>\n                    <\/span>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxBrandProjectsHero() {\n        const hero = document.getElementById(\n            \"dx-brand-projects-hero\"\n        );\n\n        if (\n            !hero ||\n            hero.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        hero.dataset.dxInitialized = \"true\";\n\n        const widget = hero.closest(\n            \".elementor-widget-html\"\n        );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-brand-projects-hero-widget-fullwidth\"\n            );\n        }\n\n        const projectsButton = hero.querySelector(\n            'a[href=\"#dx-brand-projects-grid\"]'\n        );\n\n        if (projectsButton) {\n            projectsButton.addEventListener(\n                \"click\",\n                function (event) {\n                    const target = document.getElementById(\n                        \"dx-brand-projects-grid\"\n                    );\n\n                    if (!target) {\n                        return;\n                    }\n\n                    event.preventDefault();\n\n                    target.scrollIntoView({\n                        behavior:\n                            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            initDxBrandProjectsHero\n        );\n    } else {\n        initDxBrandProjectsHero();\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-0f4f40c e-con-full e-flex e-con e-parent\" data-id=\"0f4f40c\" 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-4e35e5e elementor-widget elementor-widget-html\" data-id=\"4e35e5e\" 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     BRAND PROJECTS PAGE \u2014 INTERACTIVE PORTFOLIO GRID\n     Author: Mohamed El-Sehemy\n     English LTR - Elementor Compatible\n========================================================== -->\n\n<style>\n.elementor-widget-html:has(#dx-brand-projects-grid),\n.elementor-widget-html:has(#dx-brand-projects-grid) > .elementor-widget-container,\n.dx-brand-grid-widget-fullwidth,\n.dx-brand-grid-widget-fullwidth > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n#dx-brand-projects-grid,\n#dx-brand-projects-grid *,\n#dx-brand-projects-grid *::before,\n#dx-brand-projects-grid *::after {\n    box-sizing: border-box;\n}\n\n#dx-brand-projects-grid {\n    --dx-bg: #f8f7fc;\n    --dx-dark: #160a31;\n    --dx-purple: #6942d8;\n    --dx-purple-light: #9168ef;\n    --dx-yellow: #ffc441;\n    --dx-white: #ffffff;\n    --dx-text: #665f72;\n    --dx-muted: #8b8494;\n    --dx-border: rgba(105, 66, 216, 0.15);\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n    scroll-margin-top: 90px;\n\n    direction: ltr;\n\n    color: var(--dx-dark);\n\n    background:\n        radial-gradient(\n            circle at 95% 8%,\n            rgba(105, 66, 216, 0.08),\n            transparent 24%\n        ),\n        radial-gradient(\n            circle at 5% 95%,\n            rgba(145, 104, 239, 0.08),\n            transparent 26%\n        ),\n        var(--dx-bg);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-brand-projects-grid a {\n    color: inherit;\n    text-decoration: none;\n}\n\n#dx-brand-projects-grid button {\n    font: inherit;\n}\n\n\/* =========================================================\n   MAIN\n========================================================= *\/\n\n#dx-brand-projects-grid .dx-brand-grid-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        95px\n        clamp(22px, 5vw, 90px)\n        100px;\n}\n\n#dx-brand-projects-grid .dx-brand-grid-container {\n    width: min(1450px, 100%);\n\n    margin: 0 auto;\n}\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n#dx-brand-projects-grid .dx-brand-grid-header {\n    max-width: 790px;\n\n    margin:\n        0\n        auto\n        34px;\n\n    text-align: center;\n}\n\n#dx-brand-projects-grid .dx-brand-grid-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    margin-bottom: 12px;\n\n    color: var(--dx-purple);\n\n    font-size: 14px;\n    font-weight: 900;\n}\n\n#dx-brand-projects-grid .dx-brand-grid-eyebrow::before,\n#dx-brand-projects-grid .dx-brand-grid-eyebrow::after {\n    content: \"\";\n\n    width: 32px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-yellow),\n            var(--dx-purple-light)\n        );\n}\n\n#dx-brand-projects-grid .dx-brand-grid-title {\n    margin: 0;\n\n    color: var(--dx-dark);\n\n    font-size:\n        clamp(\n            35px,\n            3.8vw,\n            56px\n        );\n\n    font-weight: 900;\n    line-height: 1.55;\n    letter-spacing: -0.6px;\n\n    text-wrap: balance;\n}\n\n#dx-brand-projects-grid .dx-brand-grid-title span {\n    color: var(--dx-purple);\n}\n\n#dx-brand-projects-grid .dx-brand-grid-description {\n    max-width: 690px;\n\n    margin:\n        14px\n        auto\n        0;\n\n    color: var(--dx-text);\n\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 2;\n}\n\n\/* =========================================================\n   FILTERS\n========================================================= *\/\n\n#dx-brand-projects-grid .dx-brand-filters {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-wrap: wrap;\n\n    gap: 10px;\n\n    margin:\n        0\n        auto\n        34px;\n}\n\n#dx-brand-projects-grid .dx-brand-filter {\n    min-height: 43px;\n\n    padding:\n        0\n        18px;\n\n    border:\n        1px solid rgba(105, 66, 216, 0.18);\n\n    border-radius: 999px;\n\n    color: var(--dx-text);\n\n    background:\n        rgba(255, 255, 255, 0.8);\n\n    box-shadow:\n        0 9px 22px rgba(40, 18, 84, 0.06);\n\n    font-size: 14px;\n    font-weight: 800;\n\n    cursor: pointer;\n\n    transition: 0.25s ease;\n}\n\n#dx-brand-projects-grid .dx-brand-filter:hover,\n#dx-brand-projects-grid .dx-brand-filter:focus-visible,\n#dx-brand-projects-grid .dx-brand-filter.is-active {\n    color: var(--dx-white);\n\n    border-color: transparent;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-purple),\n            var(--dx-purple-light)\n        );\n\n    box-shadow:\n        0 13px 28px rgba(105, 66, 216, 0.24);\n\n    transform: translateY(-2px);\n}\n\n\/* =========================================================\n   GRID\n========================================================= *\/\n\n#dx-brand-projects-grid .dx-brand-list {\n    display: grid;\n\n    grid-template-columns:\n        repeat(3, minmax(0, 1fr));\n\n    gap: 24px;\n}\n\n\/* =========================================================\n   CARD\n========================================================= *\/\n\n#dx-brand-projects-grid .dx-brand-card {\n    position: relative;\n\n    min-width: 0;\n\n    overflow: hidden;\n\n    border:\n        1px solid var(--dx-border);\n\n    border-radius: 24px;\n\n    background:\n        rgba(255, 255, 255, 0.97);\n\n    box-shadow:\n        0 22px 55px rgba(40, 18, 84, 0.09);\n\n    transition:\n        transform 0.35s ease,\n        border-color 0.35s ease,\n        box-shadow 0.35s ease;\n}\n\n#dx-brand-projects-grid .dx-brand-card[hidden] {\n    display: none !important;\n}\n\n#dx-brand-projects-grid .dx-brand-card:hover,\n#dx-brand-projects-grid .dx-brand-card:focus-within {\n    border-color:\n        rgba(105, 66, 216, 0.34);\n\n    box-shadow:\n        0 30px 72px rgba(40, 18, 84, 0.15);\n\n    transform:\n        translateY(-7px);\n}\n\n\/* =========================================================\n   PREVIEW\n========================================================= *\/\n\n#dx-brand-projects-grid .dx-brand-preview {\n    position: relative;\n\n    height: 480px;\n\n    overflow: hidden;\n\n    background: #ece8f5;\n\n    cursor: zoom-in;\n}\n\n#dx-brand-projects-grid .dx-brand-preview img {\n    display: block;\n\n    width: 100%;\n    height: auto;\n    min-height: 100%;\n\n    object-fit: cover;\n    object-position: top center;\n\n    transform:\n        translateY(0);\n\n    transition:\n        transform\n        var(--dx-scroll-duration, 7s)\n        cubic-bezier(0.22, 0.61, 0.36, 1);\n\n    will-change: transform;\n}\n\n@media (hover: hover) and (pointer: fine) {\n\n    #dx-brand-projects-grid\n    .dx-brand-card:hover\n    .dx-brand-preview img,\n\n    #dx-brand-projects-grid\n    .dx-brand-card:focus-within\n    .dx-brand-preview img {\n        transform:\n            translateY(\n                var(--dx-image-shift, 0px)\n            );\n    }\n}\n\n#dx-brand-projects-grid .dx-brand-preview::after {\n    content: \"\";\n\n    position: absolute;\n\n    inset: 0;\n\n    background:\n        linear-gradient(\n            180deg,\n            transparent 62%,\n            rgba(11, 3, 34, 0.42)\n        );\n\n    pointer-events: none;\n}\n\n#dx-brand-projects-grid .dx-brand-preview-label {\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: 8px;\n\n    padding:\n        10px\n        13px;\n\n    border:\n        1px solid rgba(255, 255, 255, 0.24);\n\n    border-radius: 12px;\n\n    color: #fff;\n\n    background:\n        rgba(20, 8, 50, 0.62);\n\n    -webkit-backdrop-filter:\n        blur(10px);\n\n    backdrop-filter:\n        blur(10px);\n\n    font-size: 14px;\n    font-weight: 800;\n}\n\n#dx-brand-projects-grid .dx-brand-preview-label svg {\n    width: 16px;\n    height: 16px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   CARD BODY\n========================================================= *\/\n\n#dx-brand-projects-grid .dx-brand-card-body {\n    padding:\n        23px\n        23px\n        22px;\n}\n\n#dx-brand-projects-grid .dx-brand-card-top {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n\n    gap: 18px;\n}\n\n#dx-brand-projects-grid .dx-brand-card-title {\n    margin: 0;\n\n    color: var(--dx-dark);\n\n    font-size: 22px;\n    font-weight: 900;\n    line-height: 1.5;\n}\n\n#dx-brand-projects-grid .dx-brand-card-number {\n    color:\n        rgba(105, 66, 216, 0.22);\n\n    font-size: 28px;\n    font-weight: 900;\n    line-height: 1;\n}\n\n#dx-brand-projects-grid .dx-brand-card-footer {\n    margin-top: 16px;\n\n    padding-top: 16px;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    gap: 15px;\n\n    border-top:\n        1px solid rgba(105, 66, 216, 0.10);\n}\n\n#dx-brand-projects-grid .dx-brand-card-type {\n    display: inline-flex;\n    align-items: center;\n\n    gap: 8px;\n\n    color: var(--dx-muted);\n\n    font-size: 14px;\n    font-weight: 700;\n}\n\n#dx-brand-projects-grid .dx-brand-card-type::before {\n    content: \"\";\n\n    width: 7px;\n    height: 7px;\n\n    border-radius: 50%;\n\n    background:\n        var(--dx-yellow);\n\n    box-shadow:\n        0 0 0 5px rgba(255, 196, 65, 0.12);\n}\n\n#dx-brand-projects-grid .dx-brand-open {\n    display: inline-flex;\n    align-items: center;\n\n    gap: 7px;\n\n    padding: 0;\n\n    border: 0;\n\n    color:\n        var(--dx-purple);\n\n    background:\n        transparent;\n\n    font-size: 14px;\n    font-weight: 900;\n\n    cursor: pointer;\n}\n\n#dx-brand-projects-grid .dx-brand-open svg {\n    width: 17px;\n    height: 17px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.9;\n}\n\n\/* =========================================================\n   LOAD MORE\n========================================================= *\/\n\n#dx-brand-projects-grid .dx-brand-load-more-wrap {\n    margin-top: 38px;\n\n    display: flex;\n    justify-content: center;\n}\n\n#dx-brand-projects-grid .dx-brand-load-more {\n    min-width: 175px;\n    min-height: 52px;\n\n    padding:\n        0\n        24px;\n\n    border:\n        1px solid rgba(105, 66, 216, 0.28);\n\n    border-radius: 12px;\n\n    color:\n        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 15px 34px rgba(105, 66, 216, 0.24);\n\n    font-size: 14px;\n    font-weight: 900;\n\n    cursor: pointer;\n\n    transition: 0.25s ease;\n}\n\n#dx-brand-projects-grid .dx-brand-load-more:hover,\n#dx-brand-projects-grid .dx-brand-load-more:focus-visible {\n    transform:\n        translateY(-3px);\n\n    box-shadow:\n        0 20px 42px rgba(105, 66, 216, 0.32);\n}\n\n#dx-brand-projects-grid .dx-brand-load-more[hidden] {\n    display: none !important;\n}\n\n\/* =========================================================\n   LIGHTBOX\n========================================================= *\/\n\n#dx-brand-projects-grid .dx-brand-lightbox {\n    position: fixed;\n    z-index: 100000;\n\n    inset: 0;\n\n    display: none;\n    align-items: center;\n    justify-content: center;\n\n    padding: 28px;\n\n    background:\n        rgba(6, 1, 20, 0.82);\n\n    -webkit-backdrop-filter:\n        blur(10px);\n\n    backdrop-filter:\n        blur(10px);\n}\n\n#dx-brand-projects-grid .dx-brand-lightbox.is-open {\n    display: flex;\n}\n\n#dx-brand-projects-grid .dx-brand-lightbox-dialog {\n    position: relative;\n\n    width:\n        min(1100px, 96vw);\n\n    height:\n        min(88vh, 900px);\n\n    display: grid;\n\n    grid-template-rows:\n        auto\n        1fr;\n\n    overflow: hidden;\n\n    border:\n        1px solid rgba(255, 255, 255, 0.14);\n\n    border-radius: 22px;\n\n    background: #fff;\n\n    box-shadow:\n        0 35px 90px rgba(0, 0, 0, 0.45);\n}\n\n#dx-brand-projects-grid .dx-brand-lightbox-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    gap: 18px;\n\n    padding:\n        15px\n        18px;\n\n    border-bottom:\n        1px solid rgba(105, 66, 216, 0.12);\n\n    background: #fff;\n}\n\n#dx-brand-projects-grid .dx-brand-lightbox-title {\n    margin: 0;\n\n    color: var(--dx-dark);\n\n    font-size: 18px;\n    font-weight: 900;\n}\n\n#dx-brand-projects-grid .dx-brand-lightbox-actions {\n    display: flex;\n    align-items: center;\n\n    gap: 8px;\n}\n\n#dx-brand-projects-grid .dx-brand-lightbox-btn {\n    width: 42px;\n    height: 42px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border:\n        1px solid rgba(105, 66, 216, 0.16);\n\n    border-radius: 11px;\n\n    color:\n        var(--dx-purple);\n\n    background:\n        #f7f4fd;\n\n    cursor: pointer;\n}\n\n#dx-brand-projects-grid .dx-brand-lightbox-btn 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#dx-brand-projects-grid .dx-brand-lightbox-body {\n    overflow: auto;\n\n    overscroll-behavior:\n        contain;\n\n    background:\n        #efedf4;\n}\n\n#dx-brand-projects-grid .dx-brand-lightbox-body img {\n    display: block;\n\n    width:\n        min(100%, 980px);\n\n    height: auto;\n\n    margin: 0 auto;\n\n    background: #fff;\n}\n\nbody.dx-brand-lightbox-open {\n    overflow: hidden !important;\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1080px) {\n\n    #dx-brand-projects-grid .dx-brand-list {\n        grid-template-columns:\n            repeat(2, minmax(0, 1fr));\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 700px) {\n\n    #dx-brand-projects-grid .dx-brand-grid-main {\n        padding:\n            64px\n            18px\n            70px;\n    }\n\n    #dx-brand-projects-grid .dx-brand-grid-header {\n        margin-bottom: 28px;\n    }\n\n    #dx-brand-projects-grid .dx-brand-grid-title {\n        font-size:\n            clamp(\n                29px,\n                9vw,\n                40px\n            );\n    }\n\n    #dx-brand-projects-grid .dx-brand-grid-description {\n        font-size: 14px;\n    }\n\n    #dx-brand-projects-grid .dx-brand-filters {\n        justify-content: flex-start;\n\n        flex-wrap: nowrap;\n\n        overflow-x: auto;\n\n        padding-bottom: 6px;\n\n        scrollbar-width: thin;\n    }\n\n    #dx-brand-projects-grid .dx-brand-filter {\n        flex:\n            0\n            0\n            auto;\n    }\n\n    #dx-brand-projects-grid .dx-brand-list {\n        grid-template-columns:\n            1fr;\n\n        gap: 17px;\n    }\n\n    #dx-brand-projects-grid .dx-brand-preview {\n        height: 420px;\n    }\n\n    #dx-brand-projects-grid .dx-brand-preview-label {\n        left: 13px;\n        bottom: 13px;\n    }\n\n    #dx-brand-projects-grid .dx-brand-card-body {\n        padding:\n            20px\n            18px\n            19px;\n    }\n\n    #dx-brand-projects-grid .dx-brand-card-title {\n        font-size: 20px;\n    }\n\n    #dx-brand-projects-grid .dx-brand-lightbox {\n        padding: 10px;\n    }\n\n    #dx-brand-projects-grid .dx-brand-lightbox-dialog {\n        width: 100%;\n        height: 94vh;\n\n        border-radius: 16px;\n    }\n\n    #dx-brand-projects-grid .dx-brand-lightbox-head {\n        padding:\n            11px\n            12px;\n    }\n\n    #dx-brand-projects-grid .dx-brand-lightbox-title {\n        font-size: 15px;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-brand-projects-grid button:focus-visible,\n#dx-brand-projects-grid [tabindex]:focus-visible {\n    outline:\n        3px solid var(--dx-yellow);\n\n    outline-offset: 4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n\n    #dx-brand-projects-grid *,\n    #dx-brand-projects-grid *::before,\n    #dx-brand-projects-grid *::after {\n        animation-duration:\n            0.01ms !important;\n\n        transition-duration:\n            0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-brand-projects-grid\"\n    aria-labelledby=\"dx-brand-grid-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n\n    <div class=\"dx-brand-grid-main\">\n\n        <div class=\"dx-brand-grid-container\">\n\n            <header class=\"dx-brand-grid-header\">\n\n                <span class=\"dx-brand-grid-eyebrow\">\n                    Selected Work\n                <\/span>\n\n                <h2\n                    id=\"dx-brand-grid-title\"\n                    class=\"dx-brand-grid-title\"\n                >\n                    Brand Identities That Built a\n                    <span>Distinctive Presence<\/span>\n                <\/h2>\n\n                <p class=\"dx-brand-grid-description\">\n                    Hover over any project to explore the full identity\n                    with a smooth scrolling preview, or open the project\n                    to view the complete presentation and navigate between\n                    brand identities.\n                <\/p>\n\n            <\/header>\n\n            <div\n                class=\"dx-brand-filters\"\n                role=\"group\"\n                aria-label=\"Filter brand identity projects\"\n            >\n\n                <button\n                    class=\"dx-brand-filter is-active\"\n                    type=\"button\"\n                    data-filter=\"all\"\n                >\n                    All\n                <\/button>\n\n                <button\n                    class=\"dx-brand-filter\"\n                    type=\"button\"\n                    data-filter=\"education\"\n                >\n                    Education\n                <\/button>\n\n                <button\n                    class=\"dx-brand-filter\"\n                    type=\"button\"\n                    data-filter=\"commercial\"\n                >\n                    Commercial\n                <\/button>\n\n                <button\n                    class=\"dx-brand-filter\"\n                    type=\"button\"\n                    data-filter=\"services\"\n                >\n                    Services\n                <\/button>\n\n                <button\n                    class=\"dx-brand-filter\"\n                    type=\"button\"\n                    data-filter=\"personal\"\n                >\n                    Personal\n                <\/button>\n\n            <\/div>\n\n            <div class=\"dx-brand-list\">\n\n                <!-- 01 -->\n\n                <article\n                    class=\"dx-brand-card\"\n                    data-category=\"education\"\n                    data-title=\"Physics Adventure\"\n                >\n\n                    <div\n                        class=\"dx-brand-preview\"\n                        tabindex=\"0\"\n                        role=\"button\"\n                        aria-label=\"View the full Physics Adventure brand identity\"\n                    >\n\n                        <img\n                            src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/01\/Physics-Adventure-%E2%80%93-%D9%85%D8%BA%D8%A7%D9%85%D8%B1%D8%A9-%D9%81%D9%8A-%D8%B9%D8%A7%D9%84%D9%85-%D8%A7%D9%84%D9%81%D9%8A%D8%B2%D9%8A%D8%A7%D8%A1-.01.png\"\n                            alt=\"Physics Adventure brand identity\"\n                            loading=\"lazy\"\n                            decoding=\"async\"\n                        >\n\n                        <span class=\"dx-brand-preview-label\">\n\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M8 3H5a2 2 0 0 0-2 2v3\"><\/path>\n                                <path d=\"M16 3h3a2 2 0 0 1 2 2v3\"><\/path>\n                                <path d=\"M8 21H5a2 2 0 0 1-2-2v-3\"><\/path>\n                                <path d=\"M16 21h3a2 2 0 0 0 2-2v-3\"><\/path>\n                            <\/svg>\n\n                            Hover to Explore\n\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"dx-brand-card-body\">\n\n                        <div class=\"dx-brand-card-top\">\n\n                            <h3 class=\"dx-brand-card-title\">\n                                Physics Adventure\n                            <\/h3>\n\n                            <span class=\"dx-brand-card-number\">\n                                01\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-brand-card-footer\">\n\n                            <span class=\"dx-brand-card-type\">\n                                Educational Brand\n                            <\/span>\n\n                            <button\n                                class=\"dx-brand-open\"\n                                type=\"button\"\n                            >\n                                Full View\n\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M8 3H5a2 2 0 0 0-2 2v3\"><\/path>\n                                    <path d=\"M16 3h3a2 2 0 0 1 2 2v3\"><\/path>\n                                    <path d=\"M8 21H5a2 2 0 0 1-2-2v-3\"><\/path>\n                                    <path d=\"M16 21h3a2 2 0 0 0 2-2v-3\"><\/path>\n                                <\/svg>\n                            <\/button>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n                <!-- 02 -->\n\n                <article\n                    class=\"dx-brand-card\"\n                    data-category=\"commercial\"\n                    data-title=\"Bona Plaza\"\n                >\n\n                    <div\n                        class=\"dx-brand-preview\"\n                        tabindex=\"0\"\n                        role=\"button\"\n                        aria-label=\"View the full Bona Plaza brand identity\"\n                    >\n\n                        <img\n                            src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/01\/bona-plaza.01.png\"\n                            alt=\"Bona Plaza brand identity\"\n                            loading=\"lazy\"\n                            decoding=\"async\"\n                        >\n\n                        <span class=\"dx-brand-preview-label\">\n                            Hover to Explore\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"dx-brand-card-body\">\n\n                        <div class=\"dx-brand-card-top\">\n\n                            <h3 class=\"dx-brand-card-title\">\n                                Bona Plaza\n                            <\/h3>\n\n                            <span class=\"dx-brand-card-number\">\n                                02\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-brand-card-footer\">\n\n                            <span class=\"dx-brand-card-type\">\n                                Commercial Brand\n                            <\/span>\n\n                            <button\n                                class=\"dx-brand-open\"\n                                type=\"button\"\n                            >\n                                Full View\n                            <\/button>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n                <!-- 03 -->\n\n                <article\n                    class=\"dx-brand-card\"\n                    data-category=\"education\"\n                    data-title=\"Nourish Mind\"\n                >\n\n                    <div\n                        class=\"dx-brand-preview\"\n                        tabindex=\"0\"\n                        role=\"button\"\n                        aria-label=\"View the full Nourish Mind brand identity\"\n                    >\n\n                        <img\n                            src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/01\/nourish-mind-.01.png\"\n                            alt=\"Nourish Mind brand identity\"\n                            loading=\"lazy\"\n                            decoding=\"async\"\n                        >\n\n                        <span class=\"dx-brand-preview-label\">\n                            Hover to Explore\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"dx-brand-card-body\">\n\n                        <div class=\"dx-brand-card-top\">\n\n                            <h3 class=\"dx-brand-card-title\">\n                                Nourish Mind\n                            <\/h3>\n\n                            <span class=\"dx-brand-card-number\">\n                                03\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-brand-card-footer\">\n\n                            <span class=\"dx-brand-card-type\">\n                                Educational Brand\n                            <\/span>\n\n                            <button\n                                class=\"dx-brand-open\"\n                                type=\"button\"\n                            >\n                                Full View\n                            <\/button>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n                <!-- 04 -->\n\n                <article\n                    class=\"dx-brand-card\"\n                    data-category=\"commercial\"\n                    data-title=\"Al Basira\"\n                >\n\n                    <div\n                        class=\"dx-brand-preview\"\n                        tabindex=\"0\"\n                        role=\"button\"\n                        aria-label=\"View the full Al Basira brand identity\"\n                    >\n\n                        <img\n                            src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/01\/basira.png\"\n                            alt=\"Al Basira brand identity\"\n                            loading=\"lazy\"\n                            decoding=\"async\"\n                        >\n\n                        <span class=\"dx-brand-preview-label\">\n                            Hover to Explore\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"dx-brand-card-body\">\n\n                        <div class=\"dx-brand-card-top\">\n\n                            <h3 class=\"dx-brand-card-title\">\n                                Al Basira\n                            <\/h3>\n\n                            <span class=\"dx-brand-card-number\">\n                                04\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-brand-card-footer\">\n\n                            <span class=\"dx-brand-card-type\">\n                                Commercial Brand\n                            <\/span>\n\n                            <button\n                                class=\"dx-brand-open\"\n                                type=\"button\"\n                            >\n                                Full View\n                            <\/button>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n                <!-- 05 -->\n\n                <article\n                    class=\"dx-brand-card\"\n                    data-category=\"services\"\n                    data-title=\"Stage Line\"\n                >\n\n                    <div\n                        class=\"dx-brand-preview\"\n                        tabindex=\"0\"\n                        role=\"button\"\n                        aria-label=\"View the full Stage Line brand identity\"\n                    >\n\n                        <img\n                            src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/01\/stage-line-.01.png\"\n                            alt=\"Stage Line brand identity\"\n                            loading=\"lazy\"\n                            decoding=\"async\"\n                        >\n\n                        <span class=\"dx-brand-preview-label\">\n                            Hover to Explore\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"dx-brand-card-body\">\n\n                        <div class=\"dx-brand-card-top\">\n\n                            <h3 class=\"dx-brand-card-title\">\n                                Stage Line\n                            <\/h3>\n\n                            <span class=\"dx-brand-card-number\">\n                                05\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-brand-card-footer\">\n\n                            <span class=\"dx-brand-card-type\">\n                                Service Brand\n                            <\/span>\n\n                            <button\n                                class=\"dx-brand-open\"\n                                type=\"button\"\n                            >\n                                Full View\n                            <\/button>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n                <!-- 06 -->\n\n                <article\n                    class=\"dx-brand-card\"\n                    data-category=\"education\"\n                    data-title=\"Al Ibdaa Center\"\n                >\n\n                    <div\n                        class=\"dx-brand-preview\"\n                        tabindex=\"0\"\n                        role=\"button\"\n                        aria-label=\"View the full Al Ibdaa Center brand identity\"\n                    >\n\n                        <img\n                            src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/01\/%D9%85%D8%B1%D9%83%D8%B2-%D8%A7%D9%84%D8%A5%D8%A8%D8%AF%D8%A7%D8%B9-%D9%84%D9%84%D8%BA%D8%A7%D8%AA-%D9%88%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%B4%D8%A7%D8%B1%D8%A7%D8%AA-.0-1.png\"\n                            alt=\"Al Ibdaa Center brand identity\"\n                            loading=\"lazy\"\n                            decoding=\"async\"\n                        >\n\n                        <span class=\"dx-brand-preview-label\">\n                            Hover to Explore\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"dx-brand-card-body\">\n\n                        <div class=\"dx-brand-card-top\">\n\n                            <h3 class=\"dx-brand-card-title\">\n                                Al Ibdaa Center\n                            <\/h3>\n\n                            <span class=\"dx-brand-card-number\">\n                                06\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-brand-card-footer\">\n\n                            <span class=\"dx-brand-card-type\">\n                                Educational Brand\n                            <\/span>\n\n                            <button\n                                class=\"dx-brand-open\"\n                                type=\"button\"\n                            >\n                                Full View\n                            <\/button>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n                <!-- 07 -->\n\n                <article\n                    class=\"dx-brand-card\"\n                    data-category=\"commercial\"\n                    data-title=\"Nasi\"\n                >\n\n                    <div\n                        class=\"dx-brand-preview\"\n                        tabindex=\"0\"\n                        role=\"button\"\n                        aria-label=\"View the full Nasi brand identity\"\n                    >\n\n                        <img\n                            src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/01\/nasi-.01.png\"\n                            alt=\"Nasi brand identity\"\n                            loading=\"lazy\"\n                            decoding=\"async\"\n                        >\n\n                        <span class=\"dx-brand-preview-label\">\n                            Hover to Explore\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"dx-brand-card-body\">\n\n                        <div class=\"dx-brand-card-top\">\n\n                            <h3 class=\"dx-brand-card-title\">\n                                Nasi\n                            <\/h3>\n\n                            <span class=\"dx-brand-card-number\">\n                                07\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-brand-card-footer\">\n\n                            <span class=\"dx-brand-card-type\">\n                                Commercial Brand\n                            <\/span>\n\n                            <button\n                                class=\"dx-brand-open\"\n                                type=\"button\"\n                            >\n                                Full View\n                            <\/button>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n                <!-- 08 -->\n\n                <article\n                    class=\"dx-brand-card\"\n                    data-category=\"commercial\"\n                    data-title=\"Bambino Kids Store\"\n                >\n\n                    <div\n                        class=\"dx-brand-preview\"\n                        tabindex=\"0\"\n                        role=\"button\"\n                        aria-label=\"View the full Bambino Kids Store brand identity\"\n                    >\n\n                        <img\n                            src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/01\/bambino.01.png\"\n                            alt=\"Bambino Kids Store brand identity\"\n                            loading=\"lazy\"\n                            decoding=\"async\"\n                        >\n\n                        <span class=\"dx-brand-preview-label\">\n                            Hover to Explore\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"dx-brand-card-body\">\n\n                        <div class=\"dx-brand-card-top\">\n\n                            <h3 class=\"dx-brand-card-title\">\n                                Bambino Kids Store\n                            <\/h3>\n\n                            <span class=\"dx-brand-card-number\">\n                                08\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-brand-card-footer\">\n\n                            <span class=\"dx-brand-card-type\">\n                                Commercial Brand\n                            <\/span>\n\n                            <button\n                                class=\"dx-brand-open\"\n                                type=\"button\"\n                            >\n                                Full View\n                            <\/button>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n                <!-- 09 -->\n\n                <article\n                    class=\"dx-brand-card\"\n                    data-category=\"personal\"\n                    data-title=\"My Soul Space\"\n                >\n\n                    <div\n                        class=\"dx-brand-preview\"\n                        tabindex=\"0\"\n                        role=\"button\"\n                        aria-label=\"View the full My Soul Space brand identity\"\n                    >\n\n                        <img\n                            src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/01\/my-soul-space.01.png\"\n                            alt=\"My Soul Space brand identity\"\n                            loading=\"lazy\"\n                            decoding=\"async\"\n                        >\n\n                        <span class=\"dx-brand-preview-label\">\n                            Hover to Explore\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"dx-brand-card-body\">\n\n                        <div class=\"dx-brand-card-top\">\n\n                            <h3 class=\"dx-brand-card-title\">\n                                My Soul Space\n                            <\/h3>\n\n                            <span class=\"dx-brand-card-number\">\n                                09\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-brand-card-footer\">\n\n                            <span class=\"dx-brand-card-type\">\n                                Personal Brand\n                            <\/span>\n\n                            <button\n                                class=\"dx-brand-open\"\n                                type=\"button\"\n                            >\n                                Full View\n                            <\/button>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n                <!-- 10 -->\n\n                <article\n                    class=\"dx-brand-card\"\n                    data-category=\"services\"\n                    data-title=\"Pro Fix\"\n                >\n\n                    <div\n                        class=\"dx-brand-preview\"\n                        tabindex=\"0\"\n                        role=\"button\"\n                        aria-label=\"View the full Pro Fix brand identity\"\n                    >\n\n                        <img\n                            src=\"https:\/\/dindex.net\/wp-content\/uploads\/2026\/01\/pro-fix.01.png\"\n                            alt=\"Pro Fix brand identity\"\n                            loading=\"lazy\"\n                            decoding=\"async\"\n                        >\n\n                        <span class=\"dx-brand-preview-label\">\n                            Hover to Explore\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"dx-brand-card-body\">\n\n                        <div class=\"dx-brand-card-top\">\n\n                            <h3 class=\"dx-brand-card-title\">\n                                Pro Fix\n                            <\/h3>\n\n                            <span class=\"dx-brand-card-number\">\n                                10\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-brand-card-footer\">\n\n                            <span class=\"dx-brand-card-type\">\n                                Service Brand\n                            <\/span>\n\n                            <button\n                                class=\"dx-brand-open\"\n                                type=\"button\"\n                            >\n                                Full View\n                            <\/button>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n            <\/div>\n\n            <div class=\"dx-brand-load-more-wrap\">\n\n                <button\n                    class=\"dx-brand-load-more\"\n                    type=\"button\"\n                >\n                    Show More\n                <\/button>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n    <!-- LIGHTBOX -->\n\n    <div\n        class=\"dx-brand-lightbox\"\n        aria-hidden=\"true\"\n    >\n\n        <div\n            class=\"dx-brand-lightbox-dialog\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby=\"dx-brand-lightbox-title\"\n        >\n\n            <div class=\"dx-brand-lightbox-head\">\n\n                <h3\n                    id=\"dx-brand-lightbox-title\"\n                    class=\"dx-brand-lightbox-title\"\n                ><\/h3>\n\n                <div class=\"dx-brand-lightbox-actions\">\n\n                    <button\n                        class=\"dx-brand-lightbox-btn dx-brand-prev\"\n                        type=\"button\"\n                        aria-label=\"Previous project\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"m15 18-6-6 6-6\"><\/path>\n                        <\/svg>\n                    <\/button>\n\n                    <button\n                        class=\"dx-brand-lightbox-btn dx-brand-next\"\n                        type=\"button\"\n                        aria-label=\"Next project\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"m9 18 6-6-6-6\"><\/path>\n                        <\/svg>\n                    <\/button>\n\n                    <button\n                        class=\"dx-brand-lightbox-btn dx-brand-close\"\n                        type=\"button\"\n                        aria-label=\"Close\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M6 6l12 12\"><\/path>\n                            <path d=\"M18 6 6 18\"><\/path>\n                        <\/svg>\n                    <\/button>\n\n                <\/div>\n\n            <\/div>\n\n            <div class=\"dx-brand-lightbox-body\">\n\n                <img decoding=\"async\"\n                    src=\"\"\n                    alt=\"\"\n                >\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxBrandGrid() {\n\n        const section =\n            document.getElementById(\n                \"dx-brand-projects-grid\"\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            widget.classList.add(\n                \"dx-brand-grid-widget-fullwidth\"\n            );\n        }\n\n        const cards =\n            Array.from(\n                section.querySelectorAll(\n                    \".dx-brand-card\"\n                )\n            );\n\n        const filters =\n            Array.from(\n                section.querySelectorAll(\n                    \".dx-brand-filter\"\n                )\n            );\n\n        const loadMore =\n            section.querySelector(\n                \".dx-brand-load-more\"\n            );\n\n        const lightbox =\n            section.querySelector(\n                \".dx-brand-lightbox\"\n            );\n\n        const lightboxTitle =\n            section.querySelector(\n                \".dx-brand-lightbox-title\"\n            );\n\n        const lightboxImage =\n            section.querySelector(\n                \".dx-brand-lightbox-body img\"\n            );\n\n        const lightboxBody =\n            section.querySelector(\n                \".dx-brand-lightbox-body\"\n            );\n\n        const closeButton =\n            section.querySelector(\n                \".dx-brand-close\"\n            );\n\n        const prevButton =\n            section.querySelector(\n                \".dx-brand-prev\"\n            );\n\n        const nextButton =\n            section.querySelector(\n                \".dx-brand-next\"\n            );\n\n        let activeFilter = \"all\";\n        let visibleLimit = 9;\n        let activeIndex = 0;\n        let lastFocused = null;\n\n        function calculateImageMotion(card) {\n\n            const preview =\n                card.querySelector(\n                    \".dx-brand-preview\"\n                );\n\n            const image =\n                card.querySelector(\"img\");\n\n            if (\n                !preview ||\n                !image\n            ) {\n                return;\n            }\n\n            const update =\n                function () {\n\n                    const shift =\n                        Math.min(\n                            0,\n                            preview.clientHeight -\n                            image.scrollHeight\n                        );\n\n                    const distance =\n                        Math.abs(shift);\n\n                    const duration =\n                        Math.max(\n                            5,\n                            Math.min(\n                                14,\n                                distance \/ 110\n                            )\n                        );\n\n                    card.style.setProperty(\n                        \"--dx-image-shift\",\n                        shift + \"px\"\n                    );\n\n                    card.style.setProperty(\n                        \"--dx-scroll-duration\",\n                        duration + \"s\"\n                    );\n                };\n\n            if (image.complete) {\n\n                update();\n\n            } else {\n\n                image.addEventListener(\n                    \"load\",\n                    update,\n                    {\n                        once: true\n                    }\n                );\n            }\n\n            window.addEventListener(\n                \"resize\",\n                update,\n                {\n                    passive: true\n                }\n            );\n        }\n\n        function getFilteredCards() {\n\n            return cards.filter(\n                function (card) {\n\n                    return (\n                        activeFilter === \"all\" ||\n                        card.dataset.category ===\n                            activeFilter\n                    );\n                }\n            );\n        }\n\n        function renderCards() {\n\n            const filtered =\n                getFilteredCards();\n\n            cards.forEach(\n                function (card) {\n                    card.hidden = true;\n                }\n            );\n\n            filtered\n                .slice(\n                    0,\n                    visibleLimit\n                )\n                .forEach(\n                    function (card) {\n                        card.hidden = false;\n                    }\n                );\n\n            loadMore.hidden =\n                filtered.length <= visibleLimit;\n        }\n\n        function setFilter(filter) {\n\n            activeFilter = filter;\n            visibleLimit = 9;\n\n            filters.forEach(\n                function (button) {\n\n                    const isActive =\n                        button.dataset.filter ===\n                        filter;\n\n                    button.classList.toggle(\n                        \"is-active\",\n                        isActive\n                    );\n\n                    button.setAttribute(\n                        \"aria-pressed\",\n                        String(isActive)\n                    );\n                }\n            );\n\n            renderCards();\n        }\n\n        function openLightbox(card) {\n\n            const visibleCards =\n                getFilteredCards();\n\n            activeIndex =\n                visibleCards.indexOf(card);\n\n            if (activeIndex < 0) {\n                activeIndex = 0;\n            }\n\n            lastFocused =\n                document.activeElement;\n\n            updateLightbox();\n\n            lightbox.classList.add(\n                \"is-open\"\n            );\n\n            lightbox.setAttribute(\n                \"aria-hidden\",\n                \"false\"\n            );\n\n            document.body.classList.add(\n                \"dx-brand-lightbox-open\"\n            );\n\n            window.setTimeout(\n                function () {\n                    closeButton.focus();\n                },\n                50\n            );\n        }\n\n        function updateLightbox() {\n\n            const visibleCards =\n                getFilteredCards();\n\n            if (!visibleCards.length) {\n                return;\n            }\n\n            const card =\n                visibleCards[activeIndex];\n\n            const image =\n                card.querySelector(\"img\");\n\n            lightboxTitle.textContent =\n                card.dataset.title || \"\";\n\n            lightboxImage.src =\n                image.currentSrc ||\n                image.src;\n\n            lightboxImage.alt =\n                image.alt || \"\";\n\n            lightboxBody.scrollTop = 0;\n        }\n\n        function closeLightbox() {\n\n            lightbox.classList.remove(\n                \"is-open\"\n            );\n\n            lightbox.setAttribute(\n                \"aria-hidden\",\n                \"true\"\n            );\n\n            document.body.classList.remove(\n                \"dx-brand-lightbox-open\"\n            );\n\n            lightboxImage.src = \"\";\n\n            if (\n                lastFocused &&\n                typeof lastFocused.focus ===\n                    \"function\"\n            ) {\n                lastFocused.focus();\n            }\n        }\n\n        function moveLightbox(step) {\n\n            const visibleCards =\n                getFilteredCards();\n\n            if (!visibleCards.length) {\n                return;\n            }\n\n            activeIndex =\n                (\n                    activeIndex +\n                    step +\n                    visibleCards.length\n                ) %\n                visibleCards.length;\n\n            updateLightbox();\n        }\n\n        filters.forEach(\n            function (button) {\n\n                button.addEventListener(\n                    \"click\",\n                    function () {\n\n                        setFilter(\n                            button.dataset.filter\n                        );\n                    }\n                );\n            }\n        );\n\n        loadMore.addEventListener(\n            \"click\",\n            function () {\n\n                visibleLimit += 6;\n\n                renderCards();\n            }\n        );\n\n        cards.forEach(\n            function (card) {\n\n                calculateImageMotion(card);\n\n                const preview =\n                    card.querySelector(\n                        \".dx-brand-preview\"\n                    );\n\n                const openButton =\n                    card.querySelector(\n                        \".dx-brand-open\"\n                    );\n\n                [preview, openButton].forEach(\n                    function (trigger) {\n\n                        trigger.addEventListener(\n                            \"click\",\n                            function () {\n                                openLightbox(card);\n                            }\n                        );\n                    }\n                );\n\n                preview.addEventListener(\n                    \"keydown\",\n                    function (event) {\n\n                        if (\n                            event.key === \"Enter\" ||\n                            event.key === \" \"\n                        ) {\n\n                            event.preventDefault();\n\n                            openLightbox(card);\n                        }\n                    }\n                );\n            }\n        );\n\n        closeButton.addEventListener(\n            \"click\",\n            closeLightbox\n        );\n\n        prevButton.addEventListener(\n            \"click\",\n            function () {\n                moveLightbox(-1);\n            }\n        );\n\n        nextButton.addEventListener(\n            \"click\",\n            function () {\n                moveLightbox(1);\n            }\n        );\n\n        lightbox.addEventListener(\n            \"click\",\n            function (event) {\n\n                if (\n                    event.target === lightbox\n                ) {\n                    closeLightbox();\n                }\n            }\n        );\n\n        document.addEventListener(\n            \"keydown\",\n            function (event) {\n\n                if (\n                    !lightbox.classList.contains(\n                        \"is-open\"\n                    )\n                ) {\n                    return;\n                }\n\n                if (event.key === \"Escape\") {\n                    closeLightbox();\n                }\n\n                if (event.key === \"ArrowLeft\") {\n                    moveLightbox(-1);\n                }\n\n                if (event.key === \"ArrowRight\") {\n                    moveLightbox(1);\n                }\n            }\n        );\n\n        setFilter(\"all\");\n    }\n\n    if (\n        document.readyState === \"loading\"\n    ) {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxBrandGrid\n        );\n\n    } else {\n\n        initDxBrandGrid();\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-a8b4b01 e-con-full e-flex e-con e-parent\" data-id=\"a8b4b01\" 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-738bf10 elementor-widget elementor-widget-html\" data-id=\"738bf10\" 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     BRAND PROJECTS PAGE \u2014 FINAL CTA SECTION\n     Author: Mohamed El-Sehemy\n     English LTR - Elementor Compatible\n========================================================== -->\n\n<style>\n.elementor-widget-html:has(#dx-brand-projects-final-cta),\n.elementor-widget-html:has(#dx-brand-projects-final-cta)\n    > .elementor-widget-container,\n.dx-brand-final-cta-widget-fullwidth,\n.dx-brand-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#dx-brand-projects-final-cta,\n#dx-brand-projects-final-cta *,\n#dx-brand-projects-final-cta *::before,\n#dx-brand-projects-final-cta *::after {\n    box-sizing: border-box;\n}\n\n#dx-brand-projects-final-cta {\n    --dx-brand-final-dark: #08001f;\n    --dx-brand-final-dark-light: #160638;\n    --dx-brand-final-purple: #6942d8;\n    --dx-brand-final-purple-light: #9168ef;\n    --dx-brand-final-yellow: #ffc441;\n    --dx-brand-final-white: #ffffff;\n    --dx-brand-final-text: rgba(255, 255, 255, 0.76);\n    --dx-brand-final-muted: rgba(255, 255, 255, 0.62);\n    --dx-brand-final-border: rgba(255, 255, 255, 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    color: var(--dx-brand-final-white);\n\n    background:\n        radial-gradient(\n            circle at 8% 18%,\n            rgba(105, 66, 216, 0.08),\n            transparent 27%\n        ),\n        radial-gradient(\n            circle at 92% 85%,\n            rgba(145, 104, 239, 0.08),\n            transparent 29%\n        ),\n        #f8f7fc;\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-brand-projects-final-cta a {\n    color: inherit;\n    text-decoration: none;\n}\n\n\/* =========================================================\n   OUTER DECORATIONS\n========================================================= *\/\n\n#dx-brand-projects-final-cta .dx-brand-final-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-brand-projects-final-cta .dx-brand-final-orbit-one {\n    top: -230px;\n    right: -210px;\n\n    width: 490px;\n    height: 490px;\n}\n\n#dx-brand-projects-final-cta .dx-brand-final-orbit-two {\n    left: -220px;\n    bottom: -255px;\n\n    width: 520px;\n    height: 520px;\n}\n\n#dx-brand-projects-final-cta .dx-brand-final-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-brand-final-purple-light) 2px,\n            transparent 2.7px\n        );\n\n    background-size: 17px 17px;\n\n    pointer-events: none;\n}\n\n#dx-brand-projects-final-cta .dx-brand-final-dots-one {\n    top: 78px;\n    left: 3%;\n}\n\n#dx-brand-projects-final-cta .dx-brand-final-dots-two {\n    right: 3%;\n    bottom: 78px;\n}\n\n\/* =========================================================\n   SECTION LAYOUT\n========================================================= *\/\n\n#dx-brand-projects-final-cta .dx-brand-final-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-brand-projects-final-cta .dx-brand-final-container {\n    position: relative;\n    isolation: isolate;\n\n    width: min(1450px, 100%);\n    min-height: 460px;\n\n    margin: 0 auto;\n\n    display: grid;\n    grid-template-columns:\n        minmax(0, 1fr)\n        minmax(300px, 0.65fr);\n\n    align-items: center;\n\n    gap:\n        clamp(\n            45px,\n            6vw,\n            90px\n        );\n\n    padding:\n        64px\n        clamp(30px, 6vw, 88px);\n\n    overflow: hidden;\n\n    border:\n        1px solid var(--dx-brand-final-border);\n\n    border-radius: 31px;\n\n    background:\n        radial-gradient(\n            circle at 12% 18%,\n            rgba(145, 104, 239, 0.29),\n            transparent 31%\n        ),\n        radial-gradient(\n            circle at 88% 82%,\n            rgba(105, 66, 216, 0.27),\n            transparent 33%\n        ),\n        linear-gradient(\n            145deg,\n            var(--dx-brand-final-dark-light),\n            var(--dx-brand-final-dark)\n        );\n\n    box-shadow:\n        0 36px 85px rgba(28, 8, 70, 0.23),\n        inset 0 1px 0 rgba(255, 255, 255, 0.08);\n}\n\n\/* =========================================================\n   CONTAINER DECORATIONS\n========================================================= *\/\n\n#dx-brand-projects-final-cta\n    .dx-brand-final-container::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    top: -150px;\n    right: 33%;\n\n    width: 480px;\n    height: 300px;\n\n    border-radius: 50%;\n\n    background:\n        rgba(105, 66, 216, 0.25);\n\n    filter:\n        blur(90px);\n\n    pointer-events: none;\n}\n\n#dx-brand-projects-final-cta\n    .dx-brand-final-container::after {\n    content: \"\";\n\n    position: absolute;\n    z-index: -3;\n\n    inset: 0;\n\n    opacity: 0.10;\n\n    background-image:\n        linear-gradient(\n            rgba(255, 255, 255, 0.05) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(255, 255, 255, 0.05) 1px,\n            transparent 1px\n        );\n\n    background-size: 64px 64px;\n\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000,\n            transparent 78%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000,\n            transparent 78%\n        );\n\n    pointer-events: none;\n}\n\n#dx-brand-projects-final-cta .dx-brand-final-shape {\n    position: absolute;\n    z-index: -1;\n\n    border:\n        1px solid rgba(255, 255, 255, 0.09);\n\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-brand-projects-final-cta .dx-brand-final-shape-one {\n    top: -170px;\n    right: -120px;\n\n    width: 370px;\n    height: 370px;\n}\n\n#dx-brand-projects-final-cta .dx-brand-final-shape-two {\n    left: -135px;\n    bottom: -190px;\n\n    width: 390px;\n    height: 390px;\n}\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n#dx-brand-projects-final-cta .dx-brand-final-content {\n    position: relative;\n    z-index: 3;\n\n    max-width: 790px;\n\n    text-align: left;\n}\n\n#dx-brand-projects-final-cta .dx-brand-final-eyebrow {\n    display: inline-flex;\n    align-items: center;\n\n    gap: 10px;\n\n    margin-bottom: 13px;\n\n    color:\n        var(--dx-brand-final-yellow);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-brand-projects-final-cta\n    .dx-brand-final-eyebrow::before {\n    content: \"\";\n\n    width: 36px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-brand-final-yellow),\n            var(--dx-brand-final-purple-light)\n        );\n}\n\n#dx-brand-projects-final-cta .dx-brand-final-title {\n    margin: 0;\n\n    color:\n        var(--dx-brand-final-white);\n\n    font-size:\n        clamp(\n            38px,\n            4.3vw,\n            63px\n        );\n\n    font-weight: 900;\n    line-height: 1.5;\n    letter-spacing: -0.7px;\n\n    text-wrap: balance;\n}\n\n#dx-brand-projects-final-cta\n    .dx-brand-final-title-highlight {\n    color:\n        var(--dx-brand-final-yellow);\n}\n\n#dx-brand-projects-final-cta .dx-brand-final-description {\n    max-width: 710px;\n\n    margin:\n        17px\n        0\n        0;\n\n    color:\n        var(--dx-brand-final-text);\n\n    font-size: 16px;\n    font-weight: 500;\n    line-height: 2;\n\n    text-wrap: pretty;\n}\n\n\/* =========================================================\n   ACTIONS\n========================================================= *\/\n\n#dx-brand-projects-final-cta .dx-brand-final-actions {\n    margin-top: 31px;\n\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    gap: 13px;\n}\n\n#dx-brand-projects-final-cta .dx-brand-final-button {\n    position: relative;\n    isolation: isolate;\n\n    min-width: 205px;\n    min-height: 55px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    padding:\n        0\n        25px;\n\n    overflow: hidden;\n\n    border:\n        1px solid transparent;\n\n    border-radius: 12px;\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1;\n    white-space: nowrap;\n\n    transition:\n        transform 0.27s ease,\n        border-color 0.27s ease,\n        background 0.27s ease,\n        box-shadow 0.27s ease;\n}\n\n#dx-brand-projects-final-cta\n    .dx-brand-final-button-primary {\n    color: #160a2e;\n\n    border-color:\n        rgba(255, 255, 255, 0.28);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-brand-final-yellow),\n            #ffd873\n        );\n\n    box-shadow:\n        0 18px 40px rgba(255, 196, 65, 0.23);\n}\n\n#dx-brand-projects-final-cta\n    .dx-brand-final-button-primary::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -1;\n\n    top: -45%;\n    left: -80%;\n\n    width: 40%;\n    height: 190%;\n\n    background:\n        linear-gradient(\n            90deg,\n            transparent,\n            rgba(255, 255, 255, 0.65),\n            transparent\n        );\n\n    transform:\n        rotate(18deg);\n\n    transition:\n        left 0.58s ease;\n}\n\n#dx-brand-projects-final-cta\n    .dx-brand-final-button-primary:hover::before {\n    left: 140%;\n}\n\n#dx-brand-projects-final-cta\n    .dx-brand-final-button-primary:hover,\n#dx-brand-projects-final-cta\n    .dx-brand-final-button-primary:focus-visible {\n    transform:\n        translateY(-4px);\n\n    box-shadow:\n        0 24px 50px rgba(255, 196, 65, 0.34);\n}\n\n#dx-brand-projects-final-cta\n    .dx-brand-final-button-secondary {\n    color:\n        var(--dx-brand-final-white);\n\n    border-color:\n        rgba(255, 255, 255, 0.21);\n\n    background:\n        rgba(255, 255, 255, 0.055);\n\n    box-shadow:\n        inset 0 1px 0 rgba(255, 255, 255, 0.06);\n\n    -webkit-backdrop-filter:\n        blur(10px);\n\n    backdrop-filter:\n        blur(10px);\n}\n\n#dx-brand-projects-final-cta\n    .dx-brand-final-button-secondary:hover,\n#dx-brand-projects-final-cta\n    .dx-brand-final-button-secondary:focus-visible {\n    border-color:\n        rgba(145, 104, 239, 0.74);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-brand-final-purple),\n            var(--dx-brand-final-purple-light)\n        );\n\n    box-shadow:\n        0 19px 43px rgba(105, 66, 216, 0.33);\n\n    transform:\n        translateY(-4px);\n}\n\n#dx-brand-projects-final-cta .dx-brand-final-button svg {\n    width: 18px;\n    height: 18px;\n    flex: 0 0 18px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.9;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   VISUAL SIDE\n========================================================= *\/\n\n#dx-brand-projects-final-cta .dx-brand-final-visual {\n    position: relative;\n    z-index: 3;\n\n    min-height: 290px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n#dx-brand-projects-final-cta .dx-brand-final-logo-card {\n    position: relative;\n\n    width:\n        min(\n            100%,\n            330px\n        );\n\n    min-height: 270px;\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n\n    padding: 35px;\n\n    overflow: hidden;\n\n    border:\n        1px solid rgba(255, 255, 255, 0.16);\n\n    border-radius: 27px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.10),\n            rgba(255, 255, 255, 0.035)\n        );\n\n    box-shadow:\n        0 27px 60px rgba(3, 0, 20, 0.32),\n        inset 0 1px 0 rgba(255, 255, 255, 0.08);\n\n    -webkit-backdrop-filter:\n        blur(12px);\n\n    backdrop-filter:\n        blur(12px);\n\n    transform:\n        rotate(-3deg);\n\n    transition:\n        transform 0.35s ease;\n}\n\n#dx-brand-projects-final-cta\n    .dx-brand-final-logo-card:hover {\n    transform:\n        rotate(0deg)\n        translateY(-5px);\n}\n\n#dx-brand-projects-final-cta\n    .dx-brand-final-logo-card::before {\n    content: \"\";\n\n    position: absolute;\n\n    right: -85px;\n    bottom: -95px;\n\n    width: 220px;\n    height: 220px;\n\n    border:\n        1px solid rgba(255, 255, 255, 0.13);\n\n    border-radius: 50%;\n}\n\n#dx-brand-projects-final-cta\n    .dx-brand-final-logo-mark {\n    width: 96px;\n    height: 96px;\n\n    border-radius: 29px;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-brand-final-yellow),\n            #ffd873\n        );\n\n    box-shadow:\n        0 22px 44px rgba(255, 196, 65, 0.24);\n\n    transform:\n        rotate(10deg);\n\n    transition:\n        transform 0.35s ease;\n}\n\n#dx-brand-projects-final-cta\n    .dx-brand-final-logo-card:hover\n    .dx-brand-final-logo-mark {\n    transform:\n        rotate(0deg);\n}\n\n#dx-brand-projects-final-cta\n    .dx-brand-final-logo-name {\n    width: 155px;\n    height: 15px;\n\n    margin-top: 28px;\n\n    border-radius: 999px;\n\n    background:\n        rgba(255, 255, 255, 0.82);\n}\n\n#dx-brand-projects-final-cta\n    .dx-brand-final-logo-subtitle {\n    width: 105px;\n    height: 7px;\n\n    margin-top: 11px;\n\n    border-radius: 999px;\n\n    background:\n        rgba(255, 255, 255, 0.30);\n}\n\n#dx-brand-projects-final-cta\n    .dx-brand-final-color-list {\n    margin-top: 26px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 9px;\n}\n\n#dx-brand-projects-final-cta\n    .dx-brand-final-color {\n    width: 29px;\n    height: 29px;\n\n    border:\n        2px solid rgba(255, 255, 255, 0.20);\n\n    border-radius: 10px;\n}\n\n#dx-brand-projects-final-cta\n    .dx-brand-final-color:nth-child(1) {\n    background:\n        var(--dx-brand-final-yellow);\n}\n\n#dx-brand-projects-final-cta\n    .dx-brand-final-color:nth-child(2) {\n    background:\n        var(--dx-brand-final-purple);\n}\n\n#dx-brand-projects-final-cta\n    .dx-brand-final-color:nth-child(3) {\n    background:\n        var(--dx-brand-final-purple-light);\n}\n\n#dx-brand-projects-final-cta\n    .dx-brand-final-color:nth-child(4) {\n    background:\n        #ffffff;\n}\n\n\/* =========================================================\n   TRUST ITEMS\n========================================================= *\/\n\n#dx-brand-projects-final-cta .dx-brand-final-trust {\n    margin-top: 30px;\n\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    gap:\n        12px\n        24px;\n}\n\n#dx-brand-projects-final-cta\n    .dx-brand-final-trust-item {\n    display: inline-flex;\n    align-items: center;\n\n    gap: 8px;\n\n    color:\n        var(--dx-brand-final-muted);\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.6;\n}\n\n#dx-brand-projects-final-cta\n    .dx-brand-final-trust-item::before {\n    content: \"\";\n\n    width: 7px;\n    height: 7px;\n    flex: 0 0 7px;\n\n    border-radius: 50%;\n\n    background:\n        var(--dx-brand-final-yellow);\n\n    box-shadow:\n        0 0 0 5px rgba(255, 196, 65, 0.11);\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 900px) {\n\n    #dx-brand-projects-final-cta .dx-brand-final-main {\n        padding:\n            75px\n            28px\n            78px;\n    }\n\n    #dx-brand-projects-final-cta\n        .dx-brand-final-container {\n        min-height: 0;\n\n        grid-template-columns:\n            1fr;\n\n        gap: 45px;\n\n        padding:\n            56px\n            35px;\n    }\n\n    #dx-brand-projects-final-cta\n        .dx-brand-final-content {\n        max-width: 780px;\n\n        margin: 0 auto;\n\n        text-align: center;\n    }\n\n    #dx-brand-projects-final-cta\n        .dx-brand-final-eyebrow,\n    #dx-brand-projects-final-cta\n        .dx-brand-final-actions,\n    #dx-brand-projects-final-cta\n        .dx-brand-final-trust {\n        justify-content: center;\n    }\n\n    #dx-brand-projects-final-cta\n        .dx-brand-final-description {\n        margin-right: auto;\n        margin-left: auto;\n    }\n\n    #dx-brand-projects-final-cta\n        .dx-brand-final-visual {\n        min-height: 260px;\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 600px) {\n\n    #dx-brand-projects-final-cta .dx-brand-final-main {\n        padding:\n            58px\n            16px\n            58px;\n    }\n\n    #dx-brand-projects-final-cta\n        .dx-brand-final-container {\n        padding:\n            44px\n            18px\n            40px;\n\n        gap: 35px;\n\n        border-radius: 22px;\n    }\n\n    #dx-brand-projects-final-cta\n        .dx-brand-final-eyebrow {\n        margin-bottom: 10px;\n\n        font-size: 14px;\n    }\n\n    #dx-brand-projects-final-cta\n        .dx-brand-final-eyebrow::before {\n        width: 25px;\n    }\n\n    #dx-brand-projects-final-cta\n        .dx-brand-final-title {\n        font-size:\n            clamp(\n                30px,\n                9.2vw,\n                41px\n            );\n\n        line-height: 1.62;\n        letter-spacing: -0.3px;\n    }\n\n    #dx-brand-projects-final-cta\n        .dx-brand-final-description {\n        margin-top: 12px;\n\n        font-size: 14px;\n        line-height: 2;\n    }\n\n    #dx-brand-projects-final-cta\n        .dx-brand-final-actions {\n        margin-top: 25px;\n\n        display: grid;\n\n        grid-template-columns:\n            1fr;\n\n        gap: 10px;\n    }\n\n    #dx-brand-projects-final-cta\n        .dx-brand-final-button {\n        width: 100%;\n        min-width: 0;\n        min-height: 53px;\n\n        padding-right: 18px;\n        padding-left: 18px;\n\n        font-size: 14px;\n    }\n\n    #dx-brand-projects-final-cta\n        .dx-brand-final-trust {\n        margin-top: 25px;\n\n        display: grid;\n\n        grid-template-columns:\n            1fr;\n\n        justify-items: center;\n\n        gap: 10px;\n    }\n\n    #dx-brand-projects-final-cta\n        .dx-brand-final-visual {\n        min-height: 220px;\n    }\n\n    #dx-brand-projects-final-cta\n        .dx-brand-final-logo-card {\n        width:\n            min(\n                100%,\n                285px\n            );\n\n        min-height: 230px;\n\n        padding: 28px;\n\n        border-radius: 21px;\n    }\n\n    #dx-brand-projects-final-cta\n        .dx-brand-final-logo-mark {\n        width: 78px;\n        height: 78px;\n\n        border-radius: 23px;\n    }\n\n    #dx-brand-projects-final-cta\n        .dx-brand-final-logo-name {\n        width: 135px;\n\n        margin-top: 23px;\n    }\n\n    #dx-brand-projects-final-cta\n        .dx-brand-final-dots {\n        display: none;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-brand-projects-final-cta a:focus-visible {\n    outline:\n        3px solid var(--dx-brand-final-yellow);\n\n    outline-offset: 4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n\n    #dx-brand-projects-final-cta *,\n    #dx-brand-projects-final-cta *::before,\n    #dx-brand-projects-final-cta *::after {\n        animation-duration:\n            0.01ms !important;\n\n        animation-iteration-count:\n            1 !important;\n\n        transition-duration:\n            0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-brand-projects-final-cta\"\n    aria-labelledby=\"dx-brand-final-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n\n    <span\n        class=\"dx-brand-final-orbit dx-brand-final-orbit-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-brand-final-orbit dx-brand-final-orbit-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-brand-final-dots dx-brand-final-dots-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-brand-final-dots dx-brand-final-dots-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-brand-final-main\">\n\n        <div class=\"dx-brand-final-container\">\n\n            <span\n                class=\"dx-brand-final-shape dx-brand-final-shape-one\"\n                aria-hidden=\"true\"\n            ><\/span>\n\n            <span\n                class=\"dx-brand-final-shape dx-brand-final-shape-two\"\n                aria-hidden=\"true\"\n            ><\/span>\n\n            <div class=\"dx-brand-final-content\">\n\n                <span class=\"dx-brand-final-eyebrow\">\n                    Build a Brand People Remember\n                <\/span>\n\n                <h2\n                    id=\"dx-brand-final-title\"\n                    class=\"dx-brand-final-title\"\n                >\n                    Ready to Build a Brand Identity That Gives Your Business\n                    <span class=\"dx-brand-final-title-highlight\">\n                        a Stronger Presence?\n                    <\/span>\n                <\/h2>\n\n                <p class=\"dx-brand-final-description\">\n                    We create complete visual identities that reflect your\n                    brand personality and help your business present itself\n                    professionally and consistently across digital platforms,\n                    marketing materials, and brand applications.\n                <\/p>\n\n                <div class=\"dx-brand-final-actions\">\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/contact\/\"\n                        class=\"dx-brand-final-button dx-brand-final-button-primary\"\n                    >\n                        <span>Start Your Brand 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                    <a\n                        href=\"https:\/\/dindex.net\/en\/services\/\"\n                        class=\"dx-brand-final-button dx-brand-final-button-secondary\"\n                    >\n                        <span>Explore Our Services<\/span>\n\n                        <svg\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <rect\n                                x=\"4\"\n                                y=\"4\"\n                                width=\"6\"\n                                height=\"6\"\n                                rx=\"1\"\n                            ><\/rect>\n\n                            <rect\n                                x=\"14\"\n                                y=\"4\"\n                                width=\"6\"\n                                height=\"6\"\n                                rx=\"1\"\n                            ><\/rect>\n\n                            <rect\n                                x=\"4\"\n                                y=\"14\"\n                                width=\"6\"\n                                height=\"6\"\n                                rx=\"1\"\n                            ><\/rect>\n\n                            <rect\n                                x=\"14\"\n                                y=\"14\"\n                                width=\"6\"\n                                height=\"6\"\n                                rx=\"1\"\n                            ><\/rect>\n                        <\/svg>\n                    <\/a>\n\n                <\/div>\n\n                <div\n                    class=\"dx-brand-final-trust\"\n                    aria-label=\"Brand identity features\"\n                >\n\n                    <span class=\"dx-brand-final-trust-item\">\n                        Professional Logo Design\n                    <\/span>\n\n                    <span class=\"dx-brand-final-trust-item\">\n                        Color & Typography Guidelines\n                    <\/span>\n\n                    <span class=\"dx-brand-final-trust-item\">\n                        Complete Brand Applications\n                    <\/span>\n\n                <\/div>\n\n            <\/div>\n\n            <div\n                class=\"dx-brand-final-visual\"\n                aria-hidden=\"true\"\n            >\n\n                <div class=\"dx-brand-final-logo-card\">\n\n                    <div class=\"dx-brand-final-logo-mark\"><\/div>\n\n                    <div class=\"dx-brand-final-logo-name\"><\/div>\n\n                    <div class=\"dx-brand-final-logo-subtitle\"><\/div>\n\n                    <div class=\"dx-brand-final-color-list\">\n\n                        <span class=\"dx-brand-final-color\"><\/span>\n                        <span class=\"dx-brand-final-color\"><\/span>\n                        <span class=\"dx-brand-final-color\"><\/span>\n                        <span class=\"dx-brand-final-color\"><\/span>\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 initDxBrandProjectsFinalCta() {\n\n        const section =\n            document.getElementById(\n                \"dx-brand-projects-final-cta\"\n            );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized =\n            \"true\";\n\n        const widget =\n            section.closest(\n                \".elementor-widget-html\"\n            );\n\n        if (widget) {\n\n            widget.classList.add(\n                \"dx-brand-final-cta-widget-fullwidth\"\n            );\n        }\n    }\n\n    if (\n        document.readyState === \"loading\"\n    ) {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxBrandProjectsFinalCta\n        );\n\n    } else {\n\n        initDxBrandProjectsFinalCta();\n\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Featured Projects Brand Identity Projects We create complete visual identities that give brands a clear personality and professional presence, from logos, colors, and typography to branded applications across digital platforms and marketing materials. Logo Design Colors &#038; Typography Brand Applications Explore Brand Projects Start Your Brand With Us Complete Brand Identity Professional Applications Selected Work [&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-2252","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>Brand Projects - 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\/brand-projects\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Brand Projects - D-INDEX - Your Partner in Digital Transformation\" \/>\n<meta property=\"og:description\" content=\"Featured Projects Brand Identity Projects We create complete visual identities that give brands a clear personality and professional presence, from logos, colors, and typography to branded applications across digital platforms and marketing materials. Logo Design Colors &#038; Typography Brand Applications Explore Brand Projects Start Your Brand With Us Complete Brand Identity Professional Applications Selected Work [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dindex.net\/brand-projects\/\" \/>\n<meta property=\"og:site_name\" content=\"D-INDEX - Your Partner in Digital Transformation\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-19T13:12:08+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=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/dindex.net\\\/brand-projects\\\/\",\"url\":\"https:\\\/\\\/dindex.net\\\/brand-projects\\\/\",\"name\":\"Brand Projects - D-INDEX - Your Partner in Digital Transformation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/dindex.net\\\/#website\"},\"datePublished\":\"2026-01-13T13:27:21+00:00\",\"dateModified\":\"2026-08-19T13:12:08+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/dindex.net\\\/brand-projects\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/dindex.net\\\/brand-projects\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/dindex.net\\\/brand-projects\\\/#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\":\"Brand Projects\"}]},{\"@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":"Brand Projects - 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\/brand-projects\/","og_locale":"en_US","og_type":"article","og_title":"Brand Projects - D-INDEX - Your Partner in Digital Transformation","og_description":"Featured Projects Brand Identity Projects We create complete visual identities that give brands a clear personality and professional presence, from logos, colors, and typography to branded applications across digital platforms and marketing materials. Logo Design Colors &#038; Typography Brand Applications Explore Brand Projects Start Your Brand With Us Complete Brand Identity Professional Applications Selected Work [&hellip;]","og_url":"https:\/\/dindex.net\/brand-projects\/","og_site_name":"D-INDEX - Your Partner in Digital Transformation","article_modified_time":"2026-08-19T13:12:08+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dindex.net\/brand-projects\/","url":"https:\/\/dindex.net\/brand-projects\/","name":"Brand Projects - D-INDEX - Your Partner in Digital Transformation","isPartOf":{"@id":"https:\/\/dindex.net\/#website"},"datePublished":"2026-01-13T13:27:21+00:00","dateModified":"2026-08-19T13:12:08+00:00","breadcrumb":{"@id":"https:\/\/dindex.net\/brand-projects\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dindex.net\/brand-projects\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/dindex.net\/brand-projects\/#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":"Brand Projects"}]},{"@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\/2252","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=2252"}],"version-history":[{"count":70,"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/pages\/2252\/revisions"}],"predecessor-version":[{"id":4028,"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/pages\/2252\/revisions\/4028"}],"wp:attachment":[{"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/media?parent=2252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}