{"id":398,"date":"2025-04-06T08:21:30","date_gmt":"2025-04-06T08:21:30","guid":{"rendered":"https:\/\/dindex.net\/?page_id=398"},"modified":"2026-08-20T08:34:23","modified_gmt":"2026-08-20T08:34:23","slug":"lms","status":"publish","type":"page","link":"https:\/\/dindex.net\/en\/lms\/","title":{"rendered":"LMS"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"398\" class=\"elementor elementor-398\" 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-f8b5fb7 e-con-full e-flex e-con e-parent\" data-id=\"f8b5fb7\" 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-bad13a1 elementor-widget elementor-widget-html\" data-id=\"bad13a1\" 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     LMS SERVICE PAGE \u2014 HERO SECTION\n     Author: Mohamed El-Sehemy\n     English LTR - Elementor Compatible\n========================================================== -->\n\n<style>\n.elementor-widget-html:has(#dx-lms-hero),\n.elementor-widget-html:has(#dx-lms-hero) > .elementor-widget-container,\n.dx-lms-hero-widget-fullwidth,\n.dx-lms-hero-widget-fullwidth > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n#dx-lms-hero,\n#dx-lms-hero *,\n#dx-lms-hero *::before,\n#dx-lms-hero *::after {\n    box-sizing: border-box;\n}\n\n#dx-lms-hero {\n    --dx-dark: #08001f;\n    --dx-dark-light: #17063c;\n    --dx-purple: #6942d8;\n    --dx-purple-light: #9168ef;\n    --dx-yellow: #ffc441;\n    --dx-yellow-light: #ffd66e;\n    --dx-white: #ffffff;\n    --dx-text: rgba(255, 255, 255, 0.78);\n    --dx-muted: rgba(255, 255, 255, 0.58);\n    --dx-green: #54d696;\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n    direction: ltr;\n\n    color: var(--dx-white);\n\n    background:\n        radial-gradient(\n            circle at 10% 18%,\n            rgba(145, 104, 239, 0.27),\n            transparent 30%\n        ),\n        radial-gradient(\n            circle at 89% 82%,\n            rgba(105, 66, 216, 0.26),\n            transparent 32%\n        ),\n        linear-gradient(\n            145deg,\n            var(--dx-dark-light),\n            var(--dx-dark)\n        );\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-lms-hero a {\n    color: inherit;\n    text-decoration: none;\n}\n\n\/* Background *\/\n\n#dx-lms-hero .dx-lms-grid-bg {\n    position: absolute;\n    z-index: -7;\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 80%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 18%,\n            transparent 80%\n        );\n\n    pointer-events: none;\n}\n\n#dx-lms-hero .dx-lms-glow {\n    position: absolute;\n    z-index: -6;\n\n    border-radius: 50%;\n    filter: blur(90px);\n\n    pointer-events: none;\n}\n\n#dx-lms-hero .dx-lms-glow-one {\n    top: 2%;\n    right: 33%;\n\n    width: 340px;\n    height: 340px;\n\n    background: rgba(105, 66, 216, 0.23);\n}\n\n#dx-lms-hero .dx-lms-glow-two {\n    left: 5%;\n    bottom: -90px;\n\n    width: 390px;\n    height: 300px;\n\n    background: rgba(255, 196, 65, 0.07);\n}\n\n#dx-lms-hero .dx-lms-orbit {\n    position: absolute;\n    z-index: -5;\n\n    border: 1px solid rgba(255, 255, 255, 0.08);\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-lms-hero .dx-lms-orbit-one {\n    top: -245px;\n    right: -205px;\n\n    width: 500px;\n    height: 500px;\n}\n\n#dx-lms-hero .dx-lms-orbit-two {\n    left: -250px;\n    bottom: -285px;\n\n    width: 560px;\n    height: 560px;\n}\n\n#dx-lms-hero .dx-lms-dots {\n    position: absolute;\n    z-index: -4;\n\n    width: 125px;\n    height: 125px;\n\n    opacity: 0.24;\n\n    background-image:\n        radial-gradient(\n            circle,\n            var(--dx-purple-light) 2px,\n            transparent 2.7px\n        );\n\n    background-size: 17px 17px;\n\n    pointer-events: none;\n}\n\n#dx-lms-hero .dx-lms-dots-one {\n    top: 80px;\n    left: 4%;\n}\n\n#dx-lms-hero .dx-lms-dots-two {\n    right: 4%;\n    bottom: 68px;\n}\n\n\/* Layout *\/\n\n#dx-lms-hero .dx-lms-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        82px\n        clamp(22px, 5vw, 90px)\n        90px;\n}\n\n#dx-lms-hero .dx-lms-container {\n    width: min(1450px, 100%);\n    min-height: 560px;\n\n    margin: 0 auto;\n\n    display: grid;\n    grid-template-columns:\n        minmax(420px, 0.94fr)\n        minmax(520px, 1.06fr);\n\n    align-items: center;\n\n    gap: clamp(45px, 6vw, 90px);\n}\n\n\/* Content *\/\n\n#dx-lms-hero .dx-lms-content {\n    position: relative;\n    z-index: 5;\n\n    max-width: 720px;\n\n    justify-self: start;\n\n    text-align: left;\n}\n\n#dx-lms-hero .dx-lms-eyebrow {\n    display: inline-flex;\n    align-items: center;\n\n    gap: 10px;\n\n    margin-bottom: 14px;\n\n    color: var(--dx-yellow);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-lms-hero .dx-lms-eyebrow::before {\n    content: \"\";\n\n    width: 38px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-yellow),\n            var(--dx-purple-light)\n        );\n}\n\n#dx-lms-hero .dx-lms-title {\n    max-width: 720px;\n\n    margin: 0;\n\n    color: var(--dx-white);\n\n    font-size: clamp(38px, 3.7vw, 54px);\n    font-weight: 900;\n    line-height: 1.48;\n    letter-spacing: -0.55px;\n\n    text-wrap: balance;\n}\n\n#dx-lms-hero .dx-lms-title-highlight {\n    color: var(--dx-yellow);\n}\n\n#dx-lms-hero .dx-lms-description {\n    max-width: 680px;\n\n    margin: 17px 0 0;\n\n    color: var(--dx-text);\n\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 2;\n\n    text-wrap: pretty;\n}\n\n\/* Points *\/\n\n#dx-lms-hero .dx-lms-points {\n    margin-top: 21px;\n\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    gap: 12px 22px;\n}\n\n#dx-lms-hero .dx-lms-point {\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: 800;\n    line-height: 1.6;\n}\n\n#dx-lms-hero .dx-lms-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-yellow);\n\n    box-shadow:\n        0 0 0 5px rgba(255, 196, 65, 0.11);\n}\n\n\/* Buttons *\/\n\n#dx-lms-hero .dx-lms-actions {\n    margin-top: 29px;\n\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    gap: 13px;\n}\n\n#dx-lms-hero .dx-lms-button {\n    position: relative;\n    isolation: isolate;\n\n    min-width: 210px;\n    min-height: 55px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    padding: 0 25px;\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-lms-hero .dx-lms-button-primary {\n    color: #180b35;\n\n    border-color: rgba(255, 255, 255, 0.25);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-yellow),\n            var(--dx-yellow-light)\n        );\n\n    box-shadow:\n        0 17px 38px rgba(255, 196, 65, 0.22);\n}\n\n#dx-lms-hero .dx-lms-button-primary::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -1;\n\n    top: -45%;\n    left: -70%;\n\n    width: 36%;\n    height: 190%;\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-lms-hero .dx-lms-button-primary:hover::before {\n    left: 135%;\n}\n\n#dx-lms-hero .dx-lms-button-secondary {\n    color: var(--dx-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-lms-hero .dx-lms-button:hover,\n#dx-lms-hero .dx-lms-button:focus-visible {\n    transform: translateY(-4px);\n}\n\n#dx-lms-hero .dx-lms-button-primary:hover,\n#dx-lms-hero .dx-lms-button-primary:focus-visible {\n    box-shadow:\n        0 23px 48px rgba(255, 196, 65, 0.32);\n}\n\n#dx-lms-hero .dx-lms-button-secondary:hover,\n#dx-lms-hero .dx-lms-button-secondary:focus-visible {\n    border-color: rgba(145, 104, 239, 0.75);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-purple),\n            var(--dx-purple-light)\n        );\n\n    box-shadow:\n        0 19px 42px rgba(105, 66, 216, 0.32);\n}\n\n#dx-lms-hero .dx-lms-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\/* Trust *\/\n\n#dx-lms-hero .dx-lms-trust-note {\n    margin-top: 18px;\n\n    display: inline-flex;\n    align-items: center;\n\n    gap: 9px;\n\n    color: rgba(255, 255, 255, 0.48);\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.7;\n}\n\n#dx-lms-hero .dx-lms-trust-icon {\n    width: 27px;\n    height: 27px;\n    flex: 0 0 27px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid rgba(255, 255, 255, 0.12);\n    border-radius: 50%;\n\n    color: var(--dx-green);\n\n    background: rgba(84, 214, 150, 0.08);\n}\n\n#dx-lms-hero .dx-lms-trust-icon svg {\n    width: 14px;\n    height: 14px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2.1;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* Visual *\/\n\n#dx-lms-hero .dx-lms-visual {\n    position: relative;\n\n    min-width: 0;\n    min-height: 520px;\n\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n}\n\n#dx-lms-hero .dx-lms-dashboard-scene {\n    position: relative;\n\n    width: min(100%, 670px);\n    min-height: 510px;\n\n    margin-left: auto;\n}\n\n#dx-lms-hero .dx-lms-dashboard {\n    position: absolute;\n    z-index: 4;\n\n    top: 50%;\n    right: 50%;\n\n    width: min(100%, 550px);\n    min-height: 375px;\n\n    overflow: hidden;\n\n    border: 1px solid rgba(255, 255, 255, 0.16);\n    border-radius: 25px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.98),\n            rgba(246, 242, 252, 0.98)\n        );\n\n    box-shadow:\n        0 38px 85px rgba(2, 0, 20, 0.48),\n        inset 0 1px 0 rgba(255, 255, 255, 0.92);\n\n    transform:\n        translate(50%, -50%)\n        perspective(1100px)\n        rotateY(-4deg)\n        rotateX(1deg);\n\n    transition:\n        transform 0.45s ease,\n        box-shadow 0.45s ease;\n}\n\n#dx-lms-hero .dx-lms-dashboard-scene:hover .dx-lms-dashboard {\n    box-shadow:\n        0 46px 100px rgba(2, 0, 20, 0.56),\n        inset 0 1px 0 rgba(255, 255, 255, 0.95);\n\n    transform:\n        translate(50%, -50%)\n        perspective(1100px)\n        rotateY(-1deg)\n        rotateX(0deg)\n        translateY(-5px);\n}\n\n\/* Dashboard header *\/\n\n#dx-lms-hero .dx-lms-dashboard-head {\n    min-height: 58px;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    gap: 16px;\n\n    padding: 0 18px;\n\n    border-bottom: 1px solid rgba(105, 66, 216, 0.10);\n\n    background:\n        linear-gradient(\n            180deg,\n            #ffffff,\n            #faf8fd\n        );\n}\n\n#dx-lms-hero .dx-lms-dashboard-brand,\n#dx-lms-hero .dx-lms-dashboard-user {\n    display: flex;\n    align-items: center;\n\n    gap: 9px;\n}\n\n#dx-lms-hero .dx-lms-dashboard-logo {\n    width: 33px;\n    height: 33px;\n    flex: 0 0 33px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 11px;\n\n    color: #ffffff;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-purple),\n            var(--dx-purple-light)\n        );\n\n    box-shadow:\n        0 9px 19px rgba(105, 66, 216, 0.22);\n}\n\n#dx-lms-hero .dx-lms-dashboard-logo 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#dx-lms-hero .dx-lms-dashboard-brand-text,\n#dx-lms-hero .dx-lms-dashboard-user-lines {\n    display: grid;\n    gap: 3px;\n}\n\n#dx-lms-hero .dx-lms-dashboard-brand-title {\n    color: #1c0d39;\n    font-size: 14px;\n    font-weight: 900;\n}\n\n#dx-lms-hero .dx-lms-dashboard-brand-subtitle {\n    color: #988fa4;\n    font-size: 14px;\n    font-weight: 700;\n}\n\n#dx-lms-hero .dx-lms-dashboard-user-lines {\n    justify-items: end;\n    gap: 4px;\n}\n\n#dx-lms-hero .dx-lms-dashboard-user-line {\n    height: 6px;\n    border-radius: 999px;\n    background: rgba(22, 10, 49, 0.12);\n}\n\n#dx-lms-hero .dx-lms-dashboard-user-line:first-child {\n    width: 48px;\n}\n\n#dx-lms-hero .dx-lms-dashboard-user-line:last-child {\n    width: 32px;\n    background: rgba(105, 66, 216, 0.12);\n}\n\n#dx-lms-hero .dx-lms-dashboard-avatar {\n    width: 33px;\n    height: 33px;\n    flex: 0 0 33px;\n\n    border: 3px solid rgba(105, 66, 216, 0.10);\n    border-radius: 50%;\n\n    background:\n        linear-gradient(\n            145deg,\n            var(--dx-yellow),\n            var(--dx-yellow-light)\n        );\n}\n\n\/* Dashboard body *\/\n\n#dx-lms-hero .dx-lms-dashboard-body {\n    display: grid;\n    grid-template-columns: 76px minmax(0, 1fr);\n    min-height: 317px;\n}\n\n#dx-lms-hero .dx-lms-dashboard-sidebar {\n    padding: 17px 12px;\n\n    display: grid;\n    align-content: start;\n    gap: 10px;\n\n    background:\n        linear-gradient(\n            180deg,\n            #180b35,\n            #0e0327\n        );\n}\n\n#dx-lms-hero .dx-lms-sidebar-item {\n    height: 32px;\n\n    display: flex;\n    align-items: center;\n\n    gap: 7px;\n\n    padding: 0 8px;\n\n    border-radius: 9px;\n\n    color: rgba(255, 255, 255, 0.38);\n\n    background: rgba(255, 255, 255, 0.035);\n}\n\n#dx-lms-hero .dx-lms-sidebar-item:first-child {\n    color: #180b35;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-yellow),\n            var(--dx-yellow-light)\n        );\n}\n\n#dx-lms-hero .dx-lms-sidebar-icon {\n    width: 13px;\n    height: 13px;\n    flex: 0 0 13px;\n\n    border-radius: 4px;\n\n    background: currentColor;\n    opacity: 0.55;\n}\n\n#dx-lms-hero .dx-lms-sidebar-line {\n    width: 29px;\n    height: 5px;\n\n    border-radius: 999px;\n\n    background: currentColor;\n    opacity: 0.55;\n}\n\n#dx-lms-hero .dx-lms-dashboard-content {\n    min-width: 0;\n    padding: 19px 18px 18px;\n}\n\n#dx-lms-hero .dx-lms-dashboard-welcome {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n\n    gap: 16px;\n}\n\n#dx-lms-hero .dx-lms-dashboard-welcome-copy {\n    display: grid;\n    gap: 7px;\n}\n\n#dx-lms-hero .dx-lms-dashboard-heading-line {\n    width: 128px;\n    height: 13px;\n\n    border-radius: 5px;\n    background: #1b0d35;\n}\n\n#dx-lms-hero .dx-lms-dashboard-copy-line {\n    width: 185px;\n    height: 7px;\n\n    border-radius: 999px;\n    background: rgba(22, 10, 49, 0.11);\n}\n\n#dx-lms-hero .dx-lms-dashboard-date {\n    min-width: 89px;\n    min-height: 30px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid rgba(105, 66, 216, 0.10);\n    border-radius: 9px;\n\n    color: var(--dx-purple);\n    background: rgba(105, 66, 216, 0.06);\n\n    font-size: 14px;\n    font-weight: 900;\n}\n\n\/* Stats *\/\n\n#dx-lms-hero .dx-lms-dashboard-stats {\n    margin-top: 16px;\n\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n\n    gap: 9px;\n}\n\n#dx-lms-hero .dx-lms-stat-card {\n    min-height: 74px;\n\n    padding: 11px 10px;\n\n    border: 1px solid rgba(105, 66, 216, 0.09);\n    border-radius: 13px;\n\n    background:\n        linear-gradient(\n            145deg,\n            #ffffff,\n            #f8f5fc\n        );\n\n    box-shadow:\n        0 10px 24px rgba(40, 18, 84, 0.07);\n}\n\n#dx-lms-hero .dx-lms-stat-top {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 8px;\n}\n\n#dx-lms-hero .dx-lms-stat-icon {\n    width: 24px;\n    height: 24px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 8px;\n\n    color: var(--dx-purple);\n    background: rgba(105, 66, 216, 0.09);\n}\n\n#dx-lms-hero .dx-lms-stat-card:nth-child(2) .dx-lms-stat-icon {\n    color: #b97800;\n    background: rgba(255, 196, 65, 0.18);\n}\n\n#dx-lms-hero .dx-lms-stat-card:nth-child(3) .dx-lms-stat-icon {\n    color: #15855b;\n    background: rgba(84, 214, 150, 0.15);\n}\n\n#dx-lms-hero .dx-lms-stat-icon svg {\n    width: 14px;\n    height: 14px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.9;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-lms-hero .dx-lms-stat-change {\n    color: #15855b;\n    font-size: 14px;\n    font-weight: 900;\n}\n\n#dx-lms-hero .dx-lms-stat-value {\n    display: block;\n\n    margin-top: 8px;\n\n    color: #1b0d35;\n\n    font-size: 15px;\n    font-weight: 900;\n}\n\n#dx-lms-hero .dx-lms-stat-label {\n    display: block;\n\n    margin-top: 5px;\n\n    color: #938b9d;\n\n    font-size: 14px;\n    font-weight: 700;\n}\n\n\/* Lower panels *\/\n\n#dx-lms-hero .dx-lms-dashboard-lower {\n    margin-top: 11px;\n\n    display: grid;\n    grid-template-columns:\n        minmax(0, 1.1fr)\n        minmax(145px, 0.9fr);\n\n    gap: 9px;\n}\n\n#dx-lms-hero .dx-lms-chart-card,\n#dx-lms-hero .dx-lms-courses-card {\n    min-width: 0;\n\n    padding: 11px;\n\n    border: 1px solid rgba(105, 66, 216, 0.09);\n    border-radius: 13px;\n\n    background: #ffffff;\n\n    box-shadow:\n        0 10px 24px rgba(40, 18, 84, 0.06);\n}\n\n#dx-lms-hero .dx-lms-mini-title {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    gap: 10px;\n}\n\n#dx-lms-hero .dx-lms-mini-title-line {\n    width: 70px;\n    height: 8px;\n\n    border-radius: 999px;\n    background: #1b0d35;\n}\n\n#dx-lms-hero .dx-lms-mini-filter {\n    width: 37px;\n    height: 18px;\n\n    border-radius: 999px;\n    background: rgba(105, 66, 216, 0.08);\n}\n\n#dx-lms-hero .dx-lms-chart {\n    position: relative;\n\n    height: 84px;\n\n    margin-top: 12px;\n\n    overflow: hidden;\n\n    border-radius: 9px;\n\n    background:\n        linear-gradient(\n            rgba(105, 66, 216, 0.06) 1px,\n            transparent 1px\n        );\n\n    background-size: 100% 21px;\n}\n\n#dx-lms-hero .dx-lms-chart svg {\n    position: absolute;\n    inset: 0;\n\n    width: 100%;\n    height: 100%;\n}\n\n#dx-lms-hero .dx-lms-chart-line {\n    fill: none;\n    stroke: var(--dx-purple);\n    stroke-width: 2.2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-lms-hero .dx-lms-chart-area {\n    fill: url(#dxLmsChartGradient);\n}\n\n#dx-lms-hero .dx-lms-course-list {\n    margin-top: 11px;\n\n    display: grid;\n    gap: 8px;\n}\n\n#dx-lms-hero .dx-lms-course-item {\n    display: grid;\n    grid-template-columns: 27px minmax(0, 1fr);\n\n    align-items: center;\n    gap: 8px;\n}\n\n#dx-lms-hero .dx-lms-course-thumb {\n    width: 27px;\n    height: 27px;\n\n    border-radius: 8px;\n\n    background:\n        linear-gradient(\n            145deg,\n            var(--dx-purple),\n            var(--dx-purple-light)\n        );\n}\n\n#dx-lms-hero .dx-lms-course-item:nth-child(2) .dx-lms-course-thumb {\n    background:\n        linear-gradient(\n            145deg,\n            var(--dx-yellow),\n            var(--dx-yellow-light)\n        );\n}\n\n#dx-lms-hero .dx-lms-course-item:nth-child(3) .dx-lms-course-thumb {\n    background:\n        linear-gradient(\n            145deg,\n            #54d696,\n            #8ae6b9\n        );\n}\n\n#dx-lms-hero .dx-lms-course-copy {\n    display: grid;\n    gap: 5px;\n}\n\n#dx-lms-hero .dx-lms-course-line {\n    height: 6px;\n\n    border-radius: 999px;\n    background: rgba(22, 10, 49, 0.14);\n}\n\n#dx-lms-hero .dx-lms-course-line:first-child {\n    width: 82%;\n}\n\n#dx-lms-hero .dx-lms-course-line:last-child {\n    width: 53%;\n    background: rgba(105, 66, 216, 0.11);\n}\n\n\/* Floating cards *\/\n\n#dx-lms-hero .dx-lms-floating-card {\n    position: absolute;\n    z-index: 8;\n\n    min-width: 145px;\n    min-height: 67px;\n\n    display: flex;\n    align-items: center;\n\n    gap: 10px;\n\n    padding: 11px 13px;\n\n    border: 1px solid rgba(255, 255, 255, 0.17);\n    border-radius: 16px;\n\n    color: var(--dx-white);\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.12),\n            rgba(255, 255, 255, 0.045)\n        );\n\n    box-shadow:\n        0 21px 45px rgba(2, 0, 20, 0.34),\n        inset 0 1px 0 rgba(255, 255, 255, 0.09);\n\n    -webkit-backdrop-filter: blur(13px);\n    backdrop-filter: blur(13px);\n\n    animation:\n        dxLmsFloatingCard\n        5.5s\n        ease-in-out\n        infinite;\n}\n\n#dx-lms-hero .dx-lms-floating-card-one {\n    top: 25px;\n    right: 2px;\n\n    animation-delay: -0.8s;\n}\n\n#dx-lms-hero .dx-lms-floating-card-two {\n    top: 88px;\n    left: -3px;\n\n    animation-delay: -2.1s;\n}\n\n#dx-lms-hero .dx-lms-floating-card-three {\n    right: 7px;\n    bottom: 18px;\n\n    animation-delay: -3.4s;\n}\n\n#dx-lms-hero .dx-lms-floating-icon {\n    width: 40px;\n    height: 40px;\n    flex: 0 0 40px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid rgba(255, 255, 255, 0.19);\n    border-radius: 13px;\n\n    color: #180b35;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-yellow),\n            var(--dx-yellow-light)\n        );\n\n    box-shadow:\n        0 11px 23px rgba(255, 196, 65, 0.20);\n}\n\n#dx-lms-hero .dx-lms-floating-card-two .dx-lms-floating-icon {\n    color: var(--dx-white);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-purple),\n            var(--dx-purple-light)\n        );\n}\n\n#dx-lms-hero .dx-lms-floating-card-three .dx-lms-floating-icon {\n    color: #0b4f38;\n\n    background:\n        linear-gradient(\n            135deg,\n            #54d696,\n            #8ae6b9\n        );\n}\n\n#dx-lms-hero .dx-lms-floating-icon svg {\n    width: 21px;\n    height: 21px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-lms-hero .dx-lms-floating-copy {\n    display: grid;\n    gap: 4px;\n}\n\n#dx-lms-hero .dx-lms-floating-title {\n    color: var(--dx-white);\n\n    font-size: 14px;\n    font-weight: 900;\n}\n\n#dx-lms-hero .dx-lms-floating-text {\n    color: rgba(255, 255, 255, 0.55);\n\n    font-size: 14px;\n    font-weight: 700;\n}\n\n\/* Completion *\/\n\n#dx-lms-hero .dx-lms-completion-badge {\n    position: absolute;\n    z-index: 9;\n\n    left: 50px;\n    bottom: 3px;\n\n    min-width: 168px;\n    min-height: 47px;\n\n    display: flex;\n    align-items: center;\n\n    gap: 10px;\n\n    padding: 8px 12px;\n\n    border: 1px solid rgba(255, 255, 255, 0.20);\n    border-radius: 14px;\n\n    color: #180b35;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-yellow),\n            var(--dx-yellow-light)\n        );\n\n    box-shadow:\n        0 18px 38px rgba(255, 196, 65, 0.24);\n\n    animation:\n        dxLmsCompletionFloat\n        4.8s\n        ease-in-out\n        infinite;\n}\n\n#dx-lms-hero .dx-lms-completion-circle {\n    width: 31px;\n    height: 31px;\n    flex: 0 0 31px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 3px solid rgba(24, 11, 53, 0.18);\n    border-top-color: #180b35;\n    border-radius: 50%;\n\n    font-size: 14px;\n    font-weight: 900;\n\n    transform: rotate(-20deg);\n}\n\n#dx-lms-hero .dx-lms-completion-circle span {\n    transform: rotate(20deg);\n}\n\n#dx-lms-hero .dx-lms-completion-copy {\n    display: grid;\n    gap: 4px;\n}\n\n#dx-lms-hero .dx-lms-completion-title {\n    font-size: 14px;\n    font-weight: 900;\n}\n\n#dx-lms-hero .dx-lms-completion-text {\n    color: rgba(24, 11, 53, 0.62);\n\n    font-size: 14px;\n    font-weight: 800;\n}\n\n\/* Animations *\/\n\n@keyframes dxLmsFloatingCard {\n    0%,\n    100% {\n        transform: translateY(0);\n    }\n\n    50% {\n        transform: translateY(-10px);\n    }\n}\n\n@keyframes dxLmsCompletionFloat {\n    0%,\n    100% {\n        transform: translateY(0);\n    }\n\n    50% {\n        transform: translateY(-8px);\n    }\n}\n\n\/* Tablet *\/\n\n@media (max-width: 1150px) {\n    #dx-lms-hero .dx-lms-container {\n        grid-template-columns:\n            minmax(370px, 0.95fr)\n            minmax(450px, 1.05fr);\n\n        gap: 40px;\n    }\n\n    #dx-lms-hero .dx-lms-title {\n        font-size: clamp(36px, 4.4vw, 48px);\n    }\n\n    #dx-lms-hero .dx-lms-dashboard-scene {\n        transform: scale(0.92);\n        transform-origin: center;\n    }\n}\n\n@media (max-width: 880px) {\n    #dx-lms-hero .dx-lms-main {\n        padding: 68px 28px 76px;\n    }\n\n    #dx-lms-hero .dx-lms-container {\n        min-height: 0;\n\n        grid-template-columns: 1fr;\n\n        gap: 47px;\n    }\n\n    #dx-lms-hero .dx-lms-content {\n        max-width: 720px;\n\n        margin: 0 auto;\n\n        justify-self: center;\n\n        text-align: center;\n    }\n\n    #dx-lms-hero .dx-lms-eyebrow,\n    #dx-lms-hero .dx-lms-points,\n    #dx-lms-hero .dx-lms-actions,\n    #dx-lms-hero .dx-lms-trust-note {\n        justify-content: center;\n    }\n\n    #dx-lms-hero .dx-lms-description {\n        margin-right: auto;\n        margin-left: auto;\n    }\n\n    #dx-lms-hero .dx-lms-visual {\n        min-height: 510px;\n\n        justify-content: center;\n    }\n\n    #dx-lms-hero .dx-lms-dashboard-scene {\n        width: min(100%, 650px);\n\n        margin: 0 auto;\n\n        transform: none;\n    }\n}\n\n\/* Mobile *\/\n\n@media (max-width: 600px) {\n    #dx-lms-hero .dx-lms-main {\n        padding: 53px 17px 59px;\n    }\n\n    #dx-lms-hero .dx-lms-container {\n        gap: 34px;\n    }\n\n    #dx-lms-hero .dx-lms-eyebrow {\n        margin-bottom: 10px;\n\n        font-size: 14px;\n    }\n\n    #dx-lms-hero .dx-lms-eyebrow::before {\n        width: 27px;\n    }\n\n    #dx-lms-hero .dx-lms-title {\n        font-size: clamp(29px, 8.7vw, 37px);\n        line-height: 1.58;\n        letter-spacing: -0.2px;\n    }\n\n    #dx-lms-hero .dx-lms-description {\n        margin-top: 13px;\n\n        font-size: 14px;\n        line-height: 2;\n    }\n\n    #dx-lms-hero .dx-lms-points {\n        width: 100%;\n\n        margin-top: 17px;\n\n        justify-content: center;\n        flex-wrap: wrap;\n\n        gap: 8px 12px;\n    }\n\n    #dx-lms-hero .dx-lms-point {\n        gap: 5px;\n\n        font-size: 14px;\n    }\n\n    #dx-lms-hero .dx-lms-point::before {\n        width: 5px;\n        height: 5px;\n        flex-basis: 5px;\n\n        box-shadow:\n            0 0 0 3px rgba(255, 196, 65, 0.10);\n    }\n\n    #dx-lms-hero .dx-lms-actions {\n        margin-top: 23px;\n\n        display: grid;\n        grid-template-columns: 1fr;\n\n        gap: 9px;\n    }\n\n    #dx-lms-hero .dx-lms-button {\n        width: 100%;\n        min-width: 0;\n        min-height: 51px;\n\n        font-size: 14px;\n    }\n\n    #dx-lms-hero .dx-lms-trust-note {\n        margin-top: 15px;\n\n        font-size: 14px;\n    }\n\n    #dx-lms-hero .dx-lms-trust-icon {\n        width: 23px;\n        height: 23px;\n        flex-basis: 23px;\n    }\n\n    #dx-lms-hero .dx-lms-visual {\n        min-height: 390px;\n    }\n\n    #dx-lms-hero .dx-lms-dashboard-scene {\n        min-height: 380px;\n    }\n\n    #dx-lms-hero .dx-lms-dashboard {\n        width: 100%;\n        min-height: 295px;\n\n        border-radius: 20px;\n\n        transform:\n            translate(50%, -50%)\n            perspective(900px)\n            rotateY(-2deg);\n    }\n\n    #dx-lms-hero .dx-lms-dashboard-scene:hover .dx-lms-dashboard {\n        transform:\n            translate(50%, -50%)\n            perspective(900px)\n            rotateY(0deg)\n            translateY(-3px);\n    }\n\n    #dx-lms-hero .dx-lms-dashboard-head {\n        min-height: 45px;\n\n        padding: 0 11px;\n    }\n\n    #dx-lms-hero .dx-lms-dashboard-logo {\n        width: 26px;\n        height: 26px;\n        flex-basis: 26px;\n\n        border-radius: 9px;\n    }\n\n    #dx-lms-hero .dx-lms-dashboard-logo svg {\n        width: 14px;\n        height: 14px;\n    }\n\n    #dx-lms-hero .dx-lms-dashboard-brand-title,\n    #dx-lms-hero .dx-lms-dashboard-brand-subtitle {\n        display: none;\n    }\n\n    #dx-lms-hero .dx-lms-dashboard-user-line:first-child {\n        width: 34px;\n    }\n\n    #dx-lms-hero .dx-lms-dashboard-user-line:last-child {\n        width: 22px;\n    }\n\n    #dx-lms-hero .dx-lms-dashboard-avatar {\n        width: 26px;\n        height: 26px;\n        flex-basis: 26px;\n    }\n\n    #dx-lms-hero .dx-lms-dashboard-body {\n        grid-template-columns: 51px minmax(0, 1fr);\n\n        min-height: 245px;\n    }\n\n    #dx-lms-hero .dx-lms-dashboard-sidebar {\n        padding: 11px 7px;\n        gap: 7px;\n    }\n\n    #dx-lms-hero .dx-lms-sidebar-item {\n        height: 24px;\n\n        gap: 5px;\n\n        padding: 0 5px;\n\n        border-radius: 7px;\n    }\n\n    #dx-lms-hero .dx-lms-sidebar-icon {\n        width: 9px;\n        height: 9px;\n        flex-basis: 9px;\n    }\n\n    #dx-lms-hero .dx-lms-sidebar-line {\n        width: 18px;\n        height: 4px;\n    }\n\n    #dx-lms-hero .dx-lms-dashboard-content {\n        padding: 13px 10px 11px;\n    }\n\n    #dx-lms-hero .dx-lms-dashboard-heading-line {\n        width: 88px;\n        height: 10px;\n    }\n\n    #dx-lms-hero .dx-lms-dashboard-copy-line {\n        width: 120px;\n        height: 5px;\n    }\n\n    #dx-lms-hero .dx-lms-dashboard-date {\n        display: none;\n    }\n\n    #dx-lms-hero .dx-lms-dashboard-stats {\n        margin-top: 11px;\n        gap: 5px;\n    }\n\n    #dx-lms-hero .dx-lms-stat-card {\n        min-height: 58px;\n\n        padding: 7px 6px;\n\n        border-radius: 9px;\n    }\n\n    #dx-lms-hero .dx-lms-stat-icon {\n        width: 18px;\n        height: 18px;\n\n        border-radius: 6px;\n    }\n\n    #dx-lms-hero .dx-lms-stat-icon svg {\n        width: 10px;\n        height: 10px;\n    }\n\n    #dx-lms-hero .dx-lms-stat-change,\n    #dx-lms-hero .dx-lms-stat-label {\n        display: none;\n    }\n\n    #dx-lms-hero .dx-lms-stat-value {\n        margin-top: 5px;\n        font-size: 14px;\n    }\n\n    #dx-lms-hero .dx-lms-dashboard-lower {\n        margin-top: 7px;\n\n        grid-template-columns:\n            minmax(0, 1fr)\n            108px;\n\n        gap: 5px;\n    }\n\n    #dx-lms-hero .dx-lms-chart-card,\n    #dx-lms-hero .dx-lms-courses-card {\n        padding: 7px;\n        border-radius: 9px;\n    }\n\n    #dx-lms-hero .dx-lms-mini-title-line {\n        width: 45px;\n        height: 5px;\n    }\n\n    #dx-lms-hero .dx-lms-mini-filter {\n        width: 25px;\n        height: 12px;\n    }\n\n    #dx-lms-hero .dx-lms-chart {\n        height: 59px;\n\n        margin-top: 8px;\n\n        background-size: 100% 14px;\n    }\n\n    #dx-lms-hero .dx-lms-course-list {\n        margin-top: 7px;\n        gap: 5px;\n    }\n\n    #dx-lms-hero .dx-lms-course-item {\n        grid-template-columns: 19px minmax(0, 1fr);\n        gap: 5px;\n    }\n\n    #dx-lms-hero .dx-lms-course-thumb {\n        width: 19px;\n        height: 19px;\n\n        border-radius: 6px;\n    }\n\n    #dx-lms-hero .dx-lms-course-copy {\n        gap: 3px;\n    }\n\n    #dx-lms-hero .dx-lms-course-line {\n        height: 4px;\n    }\n\n    #dx-lms-hero .dx-lms-floating-card {\n        min-width: 108px;\n        min-height: 50px;\n\n        gap: 7px;\n\n        padding: 7px 8px;\n\n        border-radius: 11px;\n    }\n\n    #dx-lms-hero .dx-lms-floating-card-one {\n        top: 5px;\n        right: -3px;\n    }\n\n    #dx-lms-hero .dx-lms-floating-card-two {\n        top: 58px;\n        left: -5px;\n    }\n\n    #dx-lms-hero .dx-lms-floating-card-three {\n        right: -4px;\n        bottom: 3px;\n    }\n\n    #dx-lms-hero .dx-lms-floating-icon {\n        width: 30px;\n        height: 30px;\n        flex-basis: 30px;\n\n        border-radius: 9px;\n    }\n\n    #dx-lms-hero .dx-lms-floating-icon svg {\n        width: 16px;\n        height: 16px;\n    }\n\n    #dx-lms-hero .dx-lms-floating-title,\n    #dx-lms-hero .dx-lms-floating-text {\n        display: none;\n    }\n\n    #dx-lms-hero .dx-lms-completion-badge {\n        left: 15px;\n        bottom: -13px;\n\n        min-width: 128px;\n        min-height: 38px;\n\n        gap: 7px;\n\n        padding: 6px 8px;\n\n        border-radius: 10px;\n    }\n\n    #dx-lms-hero .dx-lms-completion-circle {\n        width: 26px;\n        height: 26px;\n        flex-basis: 26px;\n\n        font-size: 14px;\n    }\n\n    #dx-lms-hero .dx-lms-completion-title,\n    #dx-lms-hero .dx-lms-completion-text {\n        display: none;\n    }\n\n    #dx-lms-hero .dx-lms-dots {\n        display: none;\n    }\n}\n\n@media (max-width: 370px) {\n    #dx-lms-hero .dx-lms-main {\n        padding-right: 13px;\n        padding-left: 13px;\n    }\n\n    #dx-lms-hero .dx-lms-title {\n        font-size: 28px;\n    }\n\n    #dx-lms-hero .dx-lms-points {\n        gap: 8px;\n    }\n\n    #dx-lms-hero .dx-lms-dashboard-lower {\n        grid-template-columns:\n            minmax(0, 1fr)\n            94px;\n    }\n}\n\n\/* Accessibility *\/\n\n#dx-lms-hero a:focus-visible {\n    outline: 3px solid var(--dx-yellow);\n    outline-offset: 4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    #dx-lms-hero *,\n    #dx-lms-hero *::before,\n    #dx-lms-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-lms-hero\"\n    aria-labelledby=\"dx-lms-hero-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n    <div\n        class=\"dx-lms-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <span\n        class=\"dx-lms-glow dx-lms-glow-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-lms-glow dx-lms-glow-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-lms-orbit dx-lms-orbit-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-lms-orbit dx-lms-orbit-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-lms-dots dx-lms-dots-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-lms-dots dx-lms-dots-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-lms-main\">\n\n        <div class=\"dx-lms-container\">\n\n            <div class=\"dx-lms-content\">\n\n                <span class=\"dx-lms-eyebrow\">\n                    Learning Management System\n                <\/span>\n\n                <h1\n                    id=\"dx-lms-hero-title\"\n                    class=\"dx-lms-title\"\n                >\n                    An Integrated LMS That Turns Your Content Into\n                    <span class=\"dx-lms-title-highlight\">\n                        an Effective Learning Experience\n                    <\/span>\n                <\/h1>\n\n                <p class=\"dx-lms-description\">\n                    Create and manage courses, learners, instructors,\n                    assessments, and certificates from one platform,\n                    with virtual classrooms and reporting tools that\n                    help you monitor performance and improve the\n                    learning experience.\n                <\/p>\n\n                <div\n                    class=\"dx-lms-points\"\n                    aria-label=\"Learning Management System features\"\n                >\n                    <span class=\"dx-lms-point\">\n                        Centralized Management\n                    <\/span>\n\n                    <span class=\"dx-lms-point\">\n                        Reports & Analytics\n                    <\/span>\n\n                    <span class=\"dx-lms-point\">\n                        Customizable & Scalable\n                    <\/span>\n                <\/div>\n\n                <div class=\"dx-lms-actions\">\n\n                    <a\n                        href=\"https:\/\/dindex.net\/en\/contact\/\"\n                        class=\"dx-lms-button dx-lms-button-primary\"\n                    >\n                        <span>Get a Free Consultation<\/span>\n\n                        <svg\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n                    <\/a>\n\n                    <a\n                        href=\"#dx-lms-audience\"\n                        class=\"dx-lms-button dx-lms-button-secondary\"\n                    >\n                        <span>Explore LMS Features<\/span>\n\n                        <svg\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <path d=\"M12 5v14\"><\/path>\n                            <path d=\"m18 13-6 6-6-6\"><\/path>\n                        <\/svg>\n                    <\/a>\n\n                <\/div>\n\n                <div class=\"dx-lms-trust-note\">\n\n                    <span\n                        class=\"dx-lms-trust-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"m5 12 4 4L19 6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <span>\n                        Suitable for educational institutions,\n                        training centers, and corporate learning.\n                    <\/span>\n\n                <\/div>\n\n            <\/div>\n\n            <div\n                class=\"dx-lms-visual\"\n                aria-label=\"Learning Management System dashboard illustration\"\n            >\n\n                <div class=\"dx-lms-dashboard-scene\">\n\n                    <div class=\"dx-lms-dashboard\">\n\n                        <div class=\"dx-lms-dashboard-head\">\n\n                            <div class=\"dx-lms-dashboard-brand\">\n\n                                <span\n                                    class=\"dx-lms-dashboard-logo\"\n                                    aria-hidden=\"true\"\n                                >\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m3 9 9-5 9 5-9 5-9-5z\"><\/path>\n                                        <path d=\"M7 12v5c3 2 7 2 10 0v-5\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                                <span class=\"dx-lms-dashboard-brand-text\">\n\n                                    <span class=\"dx-lms-dashboard-brand-title\">\n                                        Learning Dashboard\n                                    <\/span>\n\n                                    <span class=\"dx-lms-dashboard-brand-subtitle\">\n                                        Complete Platform Overview\n                                    <\/span>\n\n                                <\/span>\n\n                            <\/div>\n\n                            <div class=\"dx-lms-dashboard-user\">\n\n                                <span class=\"dx-lms-dashboard-user-lines\">\n                                    <span class=\"dx-lms-dashboard-user-line\"><\/span>\n                                    <span class=\"dx-lms-dashboard-user-line\"><\/span>\n                                <\/span>\n\n                                <span class=\"dx-lms-dashboard-avatar\"><\/span>\n\n                            <\/div>\n\n                        <\/div>\n\n                        <div class=\"dx-lms-dashboard-body\">\n\n                            <aside\n                                class=\"dx-lms-dashboard-sidebar\"\n                                aria-hidden=\"true\"\n                            >\n                                <span class=\"dx-lms-sidebar-item\">\n                                    <span class=\"dx-lms-sidebar-icon\"><\/span>\n                                    <span class=\"dx-lms-sidebar-line\"><\/span>\n                                <\/span>\n\n                                <span class=\"dx-lms-sidebar-item\">\n                                    <span class=\"dx-lms-sidebar-icon\"><\/span>\n                                    <span class=\"dx-lms-sidebar-line\"><\/span>\n                                <\/span>\n\n                                <span class=\"dx-lms-sidebar-item\">\n                                    <span class=\"dx-lms-sidebar-icon\"><\/span>\n                                    <span class=\"dx-lms-sidebar-line\"><\/span>\n                                <\/span>\n\n                                <span class=\"dx-lms-sidebar-item\">\n                                    <span class=\"dx-lms-sidebar-icon\"><\/span>\n                                    <span class=\"dx-lms-sidebar-line\"><\/span>\n                                <\/span>\n\n                                <span class=\"dx-lms-sidebar-item\">\n                                    <span class=\"dx-lms-sidebar-icon\"><\/span>\n                                    <span class=\"dx-lms-sidebar-line\"><\/span>\n                                <\/span>\n                            <\/aside>\n\n                            <div class=\"dx-lms-dashboard-content\">\n\n                                <div class=\"dx-lms-dashboard-welcome\">\n\n                                    <div class=\"dx-lms-dashboard-welcome-copy\">\n                                        <span class=\"dx-lms-dashboard-heading-line\"><\/span>\n                                        <span class=\"dx-lms-dashboard-copy-line\"><\/span>\n                                    <\/div>\n\n                                    <span class=\"dx-lms-dashboard-date\">\n                                        This Month\n                                    <\/span>\n\n                                <\/div>\n\n                                <div class=\"dx-lms-dashboard-stats\">\n\n                                    <div class=\"dx-lms-stat-card\">\n\n                                        <div class=\"dx-lms-stat-top\">\n\n                                            <span\n                                                class=\"dx-lms-stat-icon\"\n                                                aria-hidden=\"true\"\n                                            >\n                                                <svg viewBox=\"0 0 24 24\">\n                                                    <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"><\/path>\n                                                    <circle cx=\"9\" cy=\"7\" r=\"4\"><\/circle>\n                                                    <path d=\"M19 8v6\"><\/path>\n                                                    <path d=\"M22 11h-6\"><\/path>\n                                                <\/svg>\n                                            <\/span>\n\n                                            <span class=\"dx-lms-stat-change\">\n                                                +12%\n                                            <\/span>\n\n                                        <\/div>\n\n                                        <strong class=\"dx-lms-stat-value\">\n                                            1,248\n                                        <\/strong>\n\n                                        <span class=\"dx-lms-stat-label\">\n                                            Active Learners\n                                        <\/span>\n\n                                    <\/div>\n\n                                    <div class=\"dx-lms-stat-card\">\n\n                                        <div class=\"dx-lms-stat-top\">\n\n                                            <span\n                                                class=\"dx-lms-stat-icon\"\n                                                aria-hidden=\"true\"\n                                            >\n                                                <svg viewBox=\"0 0 24 24\">\n                                                    <path d=\"M4 19.5A2.5 2.5 0 0 1 6.5 17H20\"><\/path>\n                                                    <path d=\"M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z\"><\/path>\n                                                <\/svg>\n                                            <\/span>\n\n                                            <span class=\"dx-lms-stat-change\">\n                                                +8%\n                                            <\/span>\n\n                                        <\/div>\n\n                                        <strong class=\"dx-lms-stat-value\">\n                                            36\n                                        <\/strong>\n\n                                        <span class=\"dx-lms-stat-label\">\n                                            Available Courses\n                                        <\/span>\n\n                                    <\/div>\n\n                                    <div class=\"dx-lms-stat-card\">\n\n                                        <div class=\"dx-lms-stat-top\">\n\n                                            <span\n                                                class=\"dx-lms-stat-icon\"\n                                                aria-hidden=\"true\"\n                                            >\n                                                <svg viewBox=\"0 0 24 24\">\n                                                    <path d=\"M4 19V5\"><\/path>\n                                                    <path d=\"M4 19h16\"><\/path>\n                                                    <path d=\"m7 15 4-4 3 3 5-6\"><\/path>\n                                                <\/svg>\n                                            <\/span>\n\n                                            <span class=\"dx-lms-stat-change\">\n                                                +15%\n                                            <\/span>\n\n                                        <\/div>\n\n                                        <strong class=\"dx-lms-stat-value\">\n                                            84%\n                                        <\/strong>\n\n                                        <span class=\"dx-lms-stat-label\">\n                                            Completion Rate\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                                <div class=\"dx-lms-dashboard-lower\">\n\n                                    <div class=\"dx-lms-chart-card\">\n\n                                        <div class=\"dx-lms-mini-title\">\n                                            <span class=\"dx-lms-mini-title-line\"><\/span>\n                                            <span class=\"dx-lms-mini-filter\"><\/span>\n                                        <\/div>\n\n                                        <div class=\"dx-lms-chart\">\n\n                                            <svg\n                                                viewBox=\"0 0 260 90\"\n                                                preserveAspectRatio=\"none\"\n                                                aria-hidden=\"true\"\n                                            >\n                                                <defs>\n                                                    <linearGradient\n                                                        id=\"dxLmsChartGradient\"\n                                                        x1=\"0\"\n                                                        y1=\"0\"\n                                                        x2=\"0\"\n                                                        y2=\"1\"\n                                                    >\n                                                        <stop\n                                                            offset=\"0%\"\n                                                            stop-color=\"#6942d8\"\n                                                            stop-opacity=\"0.24\"\n                                                        ><\/stop>\n\n                                                        <stop\n                                                            offset=\"100%\"\n                                                            stop-color=\"#6942d8\"\n                                                            stop-opacity=\"0\"\n                                                        ><\/stop>\n                                                    <\/linearGradient>\n                                                <\/defs>\n\n                                                <path\n                                                    class=\"dx-lms-chart-area\"\n                                                    d=\"M0 76 C24 69 28 62 49 66 C70 70 78 47 101 50 C124 53 135 34 157 39 C181 44 195 18 217 27 C235 34 245 17 260 11 L260 90 L0 90 Z\"\n                                                ><\/path>\n\n                                                <path\n                                                    class=\"dx-lms-chart-line\"\n                                                    d=\"M0 76 C24 69 28 62 49 66 C70 70 78 47 101 50 C124 53 135 34 157 39 C181 44 195 18 217 27 C235 34 245 17 260 11\"\n                                                ><\/path>\n                                            <\/svg>\n\n                                        <\/div>\n\n                                    <\/div>\n\n                                    <div class=\"dx-lms-courses-card\">\n\n                                        <div class=\"dx-lms-mini-title\">\n                                            <span class=\"dx-lms-mini-title-line\"><\/span>\n                                            <span class=\"dx-lms-mini-filter\"><\/span>\n                                        <\/div>\n\n                                        <div class=\"dx-lms-course-list\">\n\n                                            <div class=\"dx-lms-course-item\">\n                                                <span class=\"dx-lms-course-thumb\"><\/span>\n\n                                                <span class=\"dx-lms-course-copy\">\n                                                    <span class=\"dx-lms-course-line\"><\/span>\n                                                    <span class=\"dx-lms-course-line\"><\/span>\n                                                <\/span>\n                                            <\/div>\n\n                                            <div class=\"dx-lms-course-item\">\n                                                <span class=\"dx-lms-course-thumb\"><\/span>\n\n                                                <span class=\"dx-lms-course-copy\">\n                                                    <span class=\"dx-lms-course-line\"><\/span>\n                                                    <span class=\"dx-lms-course-line\"><\/span>\n                                                <\/span>\n                                            <\/div>\n\n                                            <div class=\"dx-lms-course-item\">\n                                                <span class=\"dx-lms-course-thumb\"><\/span>\n\n                                                <span class=\"dx-lms-course-copy\">\n                                                    <span class=\"dx-lms-course-line\"><\/span>\n                                                    <span class=\"dx-lms-course-line\"><\/span>\n                                                <\/span>\n                                            <\/div>\n\n                                        <\/div>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <div class=\"dx-lms-floating-card dx-lms-floating-card-one\">\n\n                        <span\n                            class=\"dx-lms-floating-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M9 11l3 3L22 4\"><\/path>\n                                <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"dx-lms-floating-copy\">\n                            <strong class=\"dx-lms-floating-title\">\n                                Assessments & Quizzes\n                            <\/strong>\n\n                            <span class=\"dx-lms-floating-text\">\n                                Automatic Result Tracking\n                            <\/span>\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"dx-lms-floating-card dx-lms-floating-card-two\">\n\n                        <span\n                            class=\"dx-lms-floating-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <rect\n                                    x=\"3\"\n                                    y=\"5\"\n                                    width=\"18\"\n                                    height=\"14\"\n                                    rx=\"2\"\n                                ><\/rect>\n                                <path d=\"m10 9 5 3-5 3V9z\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"dx-lms-floating-copy\">\n                            <strong class=\"dx-lms-floating-title\">\n                                Live Classes\n                            <\/strong>\n\n                            <span class=\"dx-lms-floating-text\">\n                                Integrated Virtual Sessions\n                            <\/span>\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"dx-lms-floating-card dx-lms-floating-card-three\">\n\n                        <span\n                            class=\"dx-lms-floating-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <circle cx=\"12\" cy=\"8\" r=\"5\"><\/circle>\n                                <path d=\"M8.5 12.5 7 22l5-3 5 3-1.5-9.5\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"dx-lms-floating-copy\">\n                            <strong class=\"dx-lms-floating-title\">\n                                Digital Certificates\n                            <\/strong>\n\n                            <span class=\"dx-lms-floating-text\">\n                                Automatically Issued on Completion\n                            <\/span>\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"dx-lms-completion-badge\">\n\n                        <span class=\"dx-lms-completion-circle\">\n                            <span>84%<\/span>\n                        <\/span>\n\n                        <span class=\"dx-lms-completion-copy\">\n\n                            <strong class=\"dx-lms-completion-title\">\n                                Course Completion Rate\n                            <\/strong>\n\n                            <span class=\"dx-lms-completion-text\">\n                                Continuous Improvement in Learner Performance\n                            <\/span>\n\n                        <\/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 initDxLmsHero() {\n        const section = document.getElementById(\n            \"dx-lms-hero\"\n        );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized = \"true\";\n\n        const widget = section.closest(\n            \".elementor-widget-html\"\n        );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-lms-hero-widget-fullwidth\"\n            );\n        }\n\n        const exploreButton = section.querySelector(\n            'a[href=\"#dx-lms-audience\"]'\n        );\n\n        if (exploreButton) {\n            exploreButton.addEventListener(\n                \"click\",\n                function (event) {\n                    const target = document.getElementById(\n                        \"dx-lms-audience\"\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            initDxLmsHero\n        );\n    } else {\n        initDxLmsHero();\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-d9bb170 e-con-full e-flex e-con e-parent\" data-id=\"d9bb170\" 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-9e4afbb elementor-widget elementor-widget-html\" data-id=\"9e4afbb\" 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     LMS SERVICE PAGE \u2014 TARGET AUDIENCE 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-lms-audience),\n.elementor-widget-html:has(#dx-lms-audience)\n    > .elementor-widget-container,\n.dx-lms-audience-widget-fullwidth,\n.dx-lms-audience-widget-fullwidth\n    > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n\/* =========================================================\n   RESET & VARIABLES\n========================================================= *\/\n\n#dx-lms-audience,\n#dx-lms-audience *,\n#dx-lms-audience *::before,\n#dx-lms-audience *::after {\n    box-sizing: border-box;\n}\n\n#dx-lms-audience {\n    --dx-audience-bg: #f7f5fb;\n    --dx-audience-white: #ffffff;\n    --dx-audience-dark: #180b35;\n    --dx-audience-text: #6d6478;\n    --dx-audience-muted: #958d9f;\n    --dx-audience-purple: #6942d8;\n    --dx-audience-purple-light: #9168ef;\n    --dx-audience-yellow: #ffc441;\n    --dx-audience-green: #54d696;\n    --dx-audience-border: rgba(105, 66, 216, 0.13);\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n\n    direction: ltr;\n    color: var(--dx-audience-dark);\n\n    background:\n        radial-gradient(\n            circle at 8% 12%,\n            rgba(105, 66, 216, 0.08),\n            transparent 24%\n        ),\n        radial-gradient(\n            circle at 92% 88%,\n            rgba(145, 104, 239, 0.08),\n            transparent 25%\n        ),\n        var(--dx-audience-bg);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-lms-audience a {\n    color: inherit;\n    text-decoration: none;\n}\n\n\/* =========================================================\n   BACKGROUND DECORATION\n========================================================= *\/\n\n#dx-lms-audience .dx-audience-grid-bg {\n    position: absolute;\n    z-index: -5;\n\n    inset: 0;\n\n    opacity: 0.16;\n\n    background-image:\n        linear-gradient(\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        );\n\n    background-size: 72px 72px;\n\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 20%,\n            transparent 80%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 20%,\n            transparent 80%\n        );\n\n    pointer-events: none;\n}\n\n#dx-lms-audience .dx-audience-orbit {\n    position: absolute;\n    z-index: -4;\n\n    border: 1px solid rgba(105, 66, 216, 0.09);\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-lms-audience .dx-audience-orbit-one {\n    top: -210px;\n    left: -190px;\n\n    width: 430px;\n    height: 430px;\n}\n\n#dx-lms-audience .dx-audience-orbit-two {\n    right: -220px;\n    bottom: -260px;\n\n    width: 500px;\n    height: 500px;\n}\n\n\/* =========================================================\n   LAYOUT\n========================================================= *\/\n\n#dx-lms-audience .dx-audience-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        88px\n        clamp(22px, 5vw, 90px)\n        94px;\n}\n\n#dx-lms-audience .dx-audience-container {\n    width: min(1450px, 100%);\n    margin: 0 auto;\n}\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n#dx-lms-audience .dx-audience-header {\n    max-width: 820px;\n\n    margin: 0 auto 45px;\n\n    text-align: center;\n}\n\n#dx-lms-audience .dx-audience-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    margin-bottom: 11px;\n\n    color: var(--dx-audience-purple);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-lms-audience .dx-audience-eyebrow::before,\n#dx-lms-audience .dx-audience-eyebrow::after {\n    content: \"\";\n\n    width: 31px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-audience-yellow),\n            var(--dx-audience-purple-light)\n        );\n}\n\n#dx-lms-audience .dx-audience-title {\n    margin: 0;\n\n    color: var(--dx-audience-dark);\n\n    font-size: clamp(32px, 3.6vw, 50px);\n    font-weight: 900;\n    line-height: 1.55;\n    letter-spacing: -0.45px;\n\n    text-wrap: balance;\n}\n\n#dx-lms-audience .dx-audience-title span {\n    color: var(--dx-audience-purple);\n}\n\n#dx-lms-audience .dx-audience-description {\n    max-width: 690px;\n\n    margin: 13px auto 0;\n\n    color: var(--dx-audience-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n\n    text-wrap: pretty;\n}\n\n\/* =========================================================\n   GRID\n========================================================= *\/\n\n#dx-lms-audience .dx-audience-grid {\n    display: grid;\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n\n    gap: 19px;\n}\n\n\/* =========================================================\n   CARD\n========================================================= *\/\n\n#dx-lms-audience .dx-audience-card {\n    position: relative;\n    isolation: isolate;\n\n    min-width: 0;\n    min-height: 315px;\n\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n\n    padding:\n        27px\n        23px\n        24px;\n\n    overflow: hidden;\n\n    border: 1px solid var(--dx-audience-border);\n    border-radius: 24px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 1),\n            rgba(250, 248, 254, 0.97)\n        );\n\n    box-shadow:\n        0 21px 56px rgba(40, 18, 84, 0.09),\n        inset 0 1px 0 rgba(255, 255, 255, 0.95);\n\n    transition:\n        transform 0.35s ease,\n        border-color 0.35s ease,\n        box-shadow 0.35s ease;\n}\n\n#dx-lms-audience .dx-audience-card::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    top: -120px;\n    left: -90px;\n\n    width: 240px;\n    height: 240px;\n\n    border-radius: 50%;\n\n    background: rgba(105, 66, 216, 0.08);\n\n    filter: blur(60px);\n\n    pointer-events: none;\n}\n\n#dx-lms-audience .dx-audience-card::after {\n    content: \"\";\n\n    position: absolute;\n\n    right: 23px;\n    bottom: 0;\n\n    width: calc(100% - 46px);\n    height: 3px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            transparent,\n            var(--dx-audience-purple),\n            var(--dx-audience-yellow),\n            transparent\n        );\n\n    opacity: 0;\n\n    transition: opacity 0.35s ease;\n}\n\n#dx-lms-audience .dx-audience-card:hover,\n#dx-lms-audience .dx-audience-card:focus-within {\n    border-color: rgba(105, 66, 216, 0.28);\n\n    box-shadow:\n        0 31px 70px rgba(40, 18, 84, 0.15),\n        inset 0 1px 0 rgba(255, 255, 255, 1);\n\n    transform: translateY(-8px);\n}\n\n#dx-lms-audience .dx-audience-card:hover::after,\n#dx-lms-audience .dx-audience-card:focus-within::after {\n    opacity: 1;\n}\n\n\/* =========================================================\n   CARD TOP\n========================================================= *\/\n\n#dx-lms-audience .dx-audience-card-top {\n    width: 100%;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    gap: 15px;\n}\n\n#dx-lms-audience .dx-audience-icon {\n    width: 62px;\n    height: 62px;\n    flex: 0 0 62px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid rgba(105, 66, 216, 0.16);\n    border-radius: 19px;\n\n    color: var(--dx-audience-white);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-audience-purple),\n            var(--dx-audience-purple-light)\n        );\n\n    box-shadow:\n        0 16px 34px rgba(105, 66, 216, 0.22);\n\n    transition:\n        transform 0.3s ease,\n        box-shadow 0.3s ease;\n}\n\n#dx-lms-audience .dx-audience-card:nth-child(2)\n    .dx-audience-icon {\n    color: #26113f;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-audience-yellow),\n            #ffd66e\n        );\n\n    box-shadow:\n        0 16px 34px rgba(255, 196, 65, 0.21);\n}\n\n#dx-lms-audience .dx-audience-card:nth-child(3)\n    .dx-audience-icon {\n    color: #0b4f38;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-audience-green),\n            #8ae6b9\n        );\n\n    box-shadow:\n        0 16px 34px rgba(84, 214, 150, 0.20);\n}\n\n#dx-lms-audience .dx-audience-card:nth-child(4)\n    .dx-audience-icon {\n    background:\n        linear-gradient(\n            135deg,\n            #8c5fe8,\n            #b49af6\n        );\n}\n\n#dx-lms-audience .dx-audience-card:hover\n    .dx-audience-icon {\n    box-shadow:\n        0 21px 43px rgba(105, 66, 216, 0.28);\n\n    transform:\n        translateY(-4px)\n        rotate(-4deg);\n}\n\n#dx-lms-audience .dx-audience-icon svg {\n    width: 31px;\n    height: 31px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.75;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-lms-audience .dx-audience-number {\n    color: rgba(105, 66, 216, 0.13);\n\n    font-size: 32px;\n    font-weight: 900;\n    line-height: 1;\n}\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n#dx-lms-audience .dx-audience-card-title {\n    margin:\n        22px\n        0\n        0;\n\n    color: var(--dx-audience-dark);\n\n    font-size: 21px;\n    font-weight: 900;\n    line-height: 1.65;\n\n    text-wrap: balance;\n}\n\n#dx-lms-audience .dx-audience-card-description {\n    margin:\n        9px\n        0\n        0;\n\n    color: var(--dx-audience-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.95;\n\n    text-wrap: pretty;\n}\n\n\/* =========================================================\n   FEATURES\n========================================================= *\/\n\n#dx-lms-audience .dx-audience-features {\n    width: 100%;\n\n    margin-top: auto;\n    padding-top: 20px;\n\n    display: grid;\n\n    gap: 8px;\n}\n\n#dx-lms-audience .dx-audience-feature {\n    display: flex;\n    align-items: center;\n\n    gap: 8px;\n\n    color: var(--dx-audience-muted);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.6;\n}\n\n#dx-lms-audience .dx-audience-feature::before {\n    content: \"\";\n\n    width: 6px;\n    height: 6px;\n    flex: 0 0 6px;\n\n    border-radius: 50%;\n\n    background: var(--dx-audience-yellow);\n\n    box-shadow:\n        0 0 0 4px rgba(255, 196, 65, 0.10);\n}\n\n\/* =========================================================\n   BOTTOM NOTE\n========================================================= *\/\n\n#dx-lms-audience .dx-audience-bottom {\n    margin-top: 27px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 12px;\n\n    padding:\n        18px\n        22px;\n\n    border: 1px solid rgba(105, 66, 216, 0.12);\n    border-radius: 17px;\n\n    color: var(--dx-audience-text);\n\n    background:\n        rgba(255, 255, 255, 0.66);\n\n    box-shadow:\n        0 13px 32px rgba(40, 18, 84, 0.06);\n\n    text-align: center;\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.8;\n}\n\n#dx-lms-audience .dx-audience-bottom-icon {\n    width: 32px;\n    height: 32px;\n    flex: 0 0 32px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 10px;\n\n    color: var(--dx-audience-purple);\n\n    background: rgba(105, 66, 216, 0.09);\n}\n\n#dx-lms-audience .dx-audience-bottom-icon svg {\n    width: 17px;\n    height: 17px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.9;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1080px) {\n    #dx-lms-audience .dx-audience-grid {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n\n    #dx-lms-audience .dx-audience-card {\n        min-height: 285px;\n    }\n}\n\n@media (max-width: 800px) {\n    #dx-lms-audience .dx-audience-main {\n        padding:\n            74px\n            28px\n            80px;\n    }\n\n    #dx-lms-audience .dx-audience-header {\n        margin-bottom: 37px;\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 600px) {\n    #dx-lms-audience .dx-audience-main {\n        padding:\n            59px\n            16px\n            65px;\n    }\n\n    #dx-lms-audience .dx-audience-header {\n        margin-bottom: 31px;\n    }\n\n    #dx-lms-audience .dx-audience-eyebrow {\n        font-size: 14px;\n    }\n\n    #dx-lms-audience .dx-audience-eyebrow::before,\n    #dx-lms-audience .dx-audience-eyebrow::after {\n        width: 22px;\n    }\n\n    #dx-lms-audience .dx-audience-title {\n        font-size: clamp(27px, 8.3vw, 36px);\n        line-height: 1.65;\n        letter-spacing: -0.2px;\n    }\n\n    #dx-lms-audience .dx-audience-description {\n        margin-top: 10px;\n\n        font-size: 14px;\n        line-height: 2;\n    }\n\n    #dx-lms-audience .dx-audience-grid {\n        grid-template-columns: 1fr;\n\n        gap: 14px;\n    }\n\n    #dx-lms-audience .dx-audience-card {\n        min-height: 0;\n\n        display: grid;\n        grid-template-columns:\n            57px\n            minmax(0, 1fr);\n\n        grid-template-areas:\n            \"icon title\"\n            \"icon description\"\n            \"features features\";\n\n        align-items: start;\n\n        gap:\n            6px\n            14px;\n\n        padding:\n            20px\n            17px;\n\n        border-radius: 19px;\n    }\n\n    #dx-lms-audience .dx-audience-card-top {\n        display: contents;\n    }\n\n    #dx-lms-audience .dx-audience-icon {\n        grid-area: icon;\n\n        width: 54px;\n        height: 54px;\n        flex-basis: 54px;\n\n        border-radius: 16px;\n    }\n\n    #dx-lms-audience .dx-audience-icon svg {\n        width: 27px;\n        height: 27px;\n    }\n\n    #dx-lms-audience .dx-audience-number {\n        display: none;\n    }\n\n    #dx-lms-audience .dx-audience-card-title {\n        grid-area: title;\n\n        margin: 0;\n\n        font-size: 18px;\n        line-height: 1.65;\n    }\n\n    #dx-lms-audience .dx-audience-card-description {\n        grid-area: description;\n\n        margin: 0;\n\n        font-size: 14px;\n        line-height: 1.9;\n    }\n\n    #dx-lms-audience .dx-audience-features {\n        grid-area: features;\n\n        margin-top: 8px;\n        padding-top: 0;\n\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n\n        gap:\n            7px\n            10px;\n    }\n\n    #dx-lms-audience .dx-audience-feature {\n        font-size: 14px;\n    }\n\n    #dx-lms-audience .dx-audience-feature::before {\n        width: 5px;\n        height: 5px;\n        flex-basis: 5px;\n\n        box-shadow:\n            0 0 0 3px rgba(255, 196, 65, 0.09);\n    }\n\n    #dx-lms-audience .dx-audience-bottom {\n        margin-top: 18px;\n\n        align-items: flex-start;\n\n        padding:\n            16px\n            14px;\n\n        border-radius: 15px;\n\n        font-size: 14px;\n        line-height: 1.8;\n    }\n\n    #dx-lms-audience .dx-audience-bottom-icon {\n        width: 28px;\n        height: 28px;\n        flex-basis: 28px;\n\n        border-radius: 9px;\n    }\n\n    #dx-lms-audience .dx-audience-orbit {\n        display: none;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n    #dx-lms-audience *,\n    #dx-lms-audience *::before,\n    #dx-lms-audience *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-lms-audience\"\n    aria-labelledby=\"dx-lms-audience-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n    <div\n        class=\"dx-audience-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <span\n        class=\"dx-audience-orbit dx-audience-orbit-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-audience-orbit dx-audience-orbit-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-audience-main\">\n\n        <div class=\"dx-audience-container\">\n\n            <header class=\"dx-audience-header\">\n\n                <span class=\"dx-audience-eyebrow\">\n                    Solutions Tailored to Your Needs\n                <\/span>\n\n                <h2\n                    id=\"dx-lms-audience-title\"\n                    class=\"dx-audience-title\"\n                >\n                    Who Is an\n                    <span>LMS Designed For?<\/span>\n                <\/h2>\n\n                <p class=\"dx-audience-description\">\n                    The learning management system can be customized\n                    around your organization, number of users, and\n                    method of delivering content, whether for academic\n                    education, professional training, or internal\n                    corporate learning.\n                <\/p>\n\n            <\/header>\n\n            <div class=\"dx-audience-grid\">\n\n                <!-- CARD 01 -->\n\n                <article class=\"dx-audience-card\">\n\n                    <div class=\"dx-audience-card-top\">\n\n                        <span\n                            class=\"dx-audience-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"m3 9 9-5 9 5-9 5-9-5z\"><\/path>\n                                <path d=\"M7 12v5c3 2 7 2 10 0v-5\"><\/path>\n                                <path d=\"M21 9v6\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"dx-audience-number\">\n                            01\n                        <\/span>\n\n                    <\/div>\n\n                    <h3 class=\"dx-audience-card-title\">\n                        Schools & Universities\n                    <\/h3>\n\n                    <p class=\"dx-audience-card-description\">\n                        Manage courses, students, faculty members,\n                        assessments, and results through one centralized\n                        and easy-to-use learning environment.\n                    <\/p>\n\n                    <div class=\"dx-audience-features\">\n\n                        <span class=\"dx-audience-feature\">\n                            Course Management\n                        <\/span>\n\n                        <span class=\"dx-audience-feature\">\n                            Student Tracking\n                        <\/span>\n\n                    <\/div>\n\n                <\/article>\n\n                <!-- CARD 02 -->\n\n                <article class=\"dx-audience-card\">\n\n                    <div class=\"dx-audience-card-top\">\n\n                        <span\n                            class=\"dx-audience-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <rect\n                                    x=\"3\"\n                                    y=\"4\"\n                                    width=\"18\"\n                                    height=\"16\"\n                                    rx=\"2\"\n                                ><\/rect>\n                                <path d=\"M3 9h18\"><\/path>\n                                <path d=\"m9 14 2 2 4-4\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"dx-audience-number\">\n                            02\n                        <\/span>\n\n                    <\/div>\n\n                    <h3 class=\"dx-audience-card-title\">\n                        Academies & Training Centers\n                    <\/h3>\n\n                    <p class=\"dx-audience-card-description\">\n                        Organize training programs, sell courses,\n                        monitor attendance and learner progress,\n                        and automatically issue certificates after\n                        successful completion.\n                    <\/p>\n\n                    <div class=\"dx-audience-features\">\n\n                        <span class=\"dx-audience-feature\">\n                            Course Sales\n                        <\/span>\n\n                        <span class=\"dx-audience-feature\">\n                            Certificate Issuance\n                        <\/span>\n\n                    <\/div>\n\n                <\/article>\n\n                <!-- CARD 03 -->\n\n                <article class=\"dx-audience-card\">\n\n                    <div class=\"dx-audience-card-top\">\n\n                        <span\n                            class=\"dx-audience-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <rect\n                                    x=\"3\"\n                                    y=\"7\"\n                                    width=\"18\"\n                                    height=\"13\"\n                                    rx=\"2\"\n                                ><\/rect>\n                                <path d=\"M8 7V4h8v3\"><\/path>\n                                <path d=\"M3 12h18\"><\/path>\n                                <path d=\"M10 12v2h4v-2\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"dx-audience-number\">\n                            03\n                        <\/span>\n\n                    <\/div>\n\n                    <h3 class=\"dx-audience-card-title\">\n                        Companies & Internal Training\n                    <\/h3>\n\n                    <p class=\"dx-audience-card-description\">\n                        Train employees, onboard new team members,\n                        measure engagement with learning content and\n                        assessments, and provide management with clear\n                        performance reports.\n                    <\/p>\n\n                    <div class=\"dx-audience-features\">\n\n                        <span class=\"dx-audience-feature\">\n                            Employee Training\n                        <\/span>\n\n                        <span class=\"dx-audience-feature\">\n                            Management Reports\n                        <\/span>\n\n                    <\/div>\n\n                <\/article>\n\n                <!-- CARD 04 -->\n\n                <article class=\"dx-audience-card\">\n\n                    <div class=\"dx-audience-card-top\">\n\n                        <span\n                            class=\"dx-audience-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <circle cx=\"12\" cy=\"8\" r=\"4\"><\/circle>\n                                <path d=\"M4 21a8 8 0 0 1 16 0\"><\/path>\n                                <path d=\"M18 6h3\"><\/path>\n                                <path d=\"M19.5 4.5v3\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"dx-audience-number\">\n                            04\n                        <\/span>\n\n                    <\/div>\n\n                    <h3 class=\"dx-audience-card-title\">\n                        Trainers & Content Creators\n                    <\/h3>\n\n                    <p class=\"dx-audience-card-description\">\n                        Deliver recorded and live courses, manage\n                        subscribers, assessments, and payments through\n                        a professional learning platform built around\n                        your own brand.\n                    <\/p>\n\n                    <div class=\"dx-audience-features\">\n\n                        <span class=\"dx-audience-feature\">\n                            Your Own Branded Platform\n                        <\/span>\n\n                        <span class=\"dx-audience-feature\">\n                            Subscriber Management\n                        <\/span>\n\n                    <\/div>\n\n                <\/article>\n\n            <\/div>\n\n            <div class=\"dx-audience-bottom\">\n\n                <span\n                    class=\"dx-audience-bottom-icon\"\n                    aria-hidden=\"true\"\n                >\n                    <svg viewBox=\"0 0 24 24\">\n                        <path d=\"M12 3v18\"><\/path>\n                        <path d=\"M3 12h18\"><\/path>\n                        <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\n                    <\/svg>\n                <\/span>\n\n                <span>\n                    The system can be built around your organization\u2019s\n                    requirements, whether you need a small learning\n                    platform or a multi-department environment with\n                    multiple branches and user groups.\n                <\/span>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxLmsAudience() {\n        const section = document.getElementById(\n            \"dx-lms-audience\"\n        );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized = \"true\";\n\n        const widget = section.closest(\n            \".elementor-widget-html\"\n        );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-lms-audience-widget-fullwidth\"\n            );\n        }\n\n        if (\n            !(\"IntersectionObserver\" in window) ||\n            window.matchMedia(\n                \"(prefers-reduced-motion: reduce)\"\n            ).matches\n        ) {\n            return;\n        }\n\n        const cards = section.querySelectorAll(\n            \".dx-audience-card\"\n        );\n\n        cards.forEach(function (card, index) {\n            card.style.opacity = \"0\";\n            card.style.transform = \"translateY(24px)\";\n\n            card.style.transition =\n                \"opacity 0.58s ease \" +\n                index * 0.09 +\n                \"s, transform 0.58s ease \" +\n                index * 0.09 +\n                \"s\";\n        });\n\n        const observer = new IntersectionObserver(\n            function (entries, currentObserver) {\n                entries.forEach(function (entry) {\n                    if (!entry.isIntersecting) {\n                        return;\n                    }\n\n                    entry.target.style.opacity = \"1\";\n                    entry.target.style.transform = \"translateY(0)\";\n\n                    currentObserver.unobserve(\n                        entry.target\n                    );\n                });\n            },\n            {\n                threshold: 0.14\n            }\n        );\n\n        cards.forEach(function (card) {\n            observer.observe(card);\n        });\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxLmsAudience\n        );\n    } else {\n        initDxLmsAudience();\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-1ddba75 e-con-full e-flex e-con e-parent\" data-id=\"1ddba75\" 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-d5c53cc elementor-widget elementor-widget-html\" data-id=\"d5c53cc\" 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     LMS SERVICE PAGE \u2014 SYSTEM MODULES 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-lms-modules),\n.elementor-widget-html:has(#dx-lms-modules)\n    > .elementor-widget-container,\n.dx-lms-modules-widget-fullwidth,\n.dx-lms-modules-widget-fullwidth\n    > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n\/* =========================================================\n   RESET & VARIABLES\n========================================================= *\/\n\n#dx-lms-modules,\n#dx-lms-modules *,\n#dx-lms-modules *::before,\n#dx-lms-modules *::after {\n    box-sizing: border-box;\n}\n\n#dx-lms-modules {\n    --dx-modules-dark: #09001f;\n    --dx-modules-dark-light: #17063c;\n    --dx-modules-white: #ffffff;\n    --dx-modules-text: rgba(255, 255, 255, 0.76);\n    --dx-modules-muted: rgba(255, 255, 255, 0.55);\n    --dx-modules-purple: #6942d8;\n    --dx-modules-purple-light: #9168ef;\n    --dx-modules-yellow: #ffc441;\n    --dx-modules-green: #54d696;\n    --dx-modules-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-modules-white);\n\n    background:\n        radial-gradient(\n            circle at 12% 12%,\n            rgba(145, 104, 239, 0.24),\n            transparent 30%\n        ),\n        radial-gradient(\n            circle at 88% 86%,\n            rgba(105, 66, 216, 0.25),\n            transparent 32%\n        ),\n        linear-gradient(\n            145deg,\n            var(--dx-modules-dark-light),\n            var(--dx-modules-dark)\n        );\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n\/* =========================================================\n   BACKGROUND\n========================================================= *\/\n\n#dx-lms-modules .dx-modules-grid-bg {\n    position: absolute;\n    z-index: -6;\n\n    inset: 0;\n\n    opacity: 0.11;\n\n    background-image:\n        linear-gradient(\n            rgba(255, 255, 255, 0.045) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(255, 255, 255, 0.045) 1px,\n            transparent 1px\n        );\n\n    background-size: 70px 70px;\n\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 18%,\n            transparent 82%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 18%,\n            transparent 82%\n        );\n\n    pointer-events: none;\n}\n\n#dx-lms-modules .dx-modules-glow {\n    position: absolute;\n    z-index: -5;\n\n    border-radius: 50%;\n\n    filter: blur(85px);\n\n    pointer-events: none;\n}\n\n#dx-lms-modules .dx-modules-glow-one {\n    top: 12%;\n    right: 38%;\n\n    width: 330px;\n    height: 330px;\n\n    background: rgba(105, 66, 216, 0.20);\n}\n\n#dx-lms-modules .dx-modules-glow-two {\n    left: 5%;\n    bottom: -90px;\n\n    width: 370px;\n    height: 290px;\n\n    background: rgba(255, 196, 65, 0.07);\n}\n\n\/* =========================================================\n   LAYOUT\n========================================================= *\/\n\n#dx-lms-modules .dx-modules-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        92px\n        clamp(22px, 5vw, 90px)\n        98px;\n}\n\n#dx-lms-modules .dx-modules-container {\n    width: min(1450px, 100%);\n    margin: 0 auto;\n}\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n#dx-lms-modules .dx-modules-header {\n    max-width: 850px;\n\n    margin: 0 auto 54px;\n\n    text-align: center;\n}\n\n#dx-lms-modules .dx-modules-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-modules-yellow);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-lms-modules .dx-modules-eyebrow::before,\n#dx-lms-modules .dx-modules-eyebrow::after {\n    content: \"\";\n\n    width: 31px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-modules-yellow),\n            var(--dx-modules-purple-light)\n        );\n}\n\n#dx-lms-modules .dx-modules-title {\n    margin: 0;\n\n    color: var(--dx-modules-white);\n\n    font-size: clamp(32px, 3.5vw, 49px);\n    font-weight: 900;\n    line-height: 1.55;\n    letter-spacing: -0.45px;\n\n    text-wrap: balance;\n}\n\n#dx-lms-modules .dx-modules-title span {\n    color: var(--dx-modules-yellow);\n}\n\n#dx-lms-modules .dx-modules-description {\n    max-width: 720px;\n\n    margin: 14px auto 0;\n\n    color: var(--dx-modules-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n\n    text-wrap: pretty;\n}\n\n\/* =========================================================\n   SYSTEM MAP\n========================================================= *\/\n\n#dx-lms-modules .dx-modules-map {\n    position: relative;\n\n    min-height: 660px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n\/* =========================================================\n   CENTER CORE\n========================================================= *\/\n\n#dx-lms-modules .dx-modules-core {\n    position: absolute;\n    z-index: 6;\n\n    top: 50%;\n    right: 50%;\n\n    width: 255px;\n    height: 255px;\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n\n    gap: 13px;\n\n    border: 1px solid rgba(255, 255, 255, 0.18);\n    border-radius: 50%;\n\n    color: var(--dx-modules-white);\n\n    background:\n        radial-gradient(\n            circle at 30% 20%,\n            rgba(255, 255, 255, 0.16),\n            transparent 30%\n        ),\n        linear-gradient(\n            145deg,\n            var(--dx-modules-purple-light),\n            var(--dx-modules-purple)\n        );\n\n    box-shadow:\n        0 35px 80px rgba(31, 9, 82, 0.50),\n        inset 0 1px 0 rgba(255, 255, 255, 0.16);\n\n    text-align: center;\n\n    transform: translate(50%, -50%);\n\n    animation:\n        dxModulesCoreFloat\n        5.5s\n        ease-in-out\n        infinite;\n}\n\n#dx-lms-modules .dx-modules-core::before,\n#dx-lms-modules .dx-modules-core::after {\n    content: \"\";\n\n    position: absolute;\n\n    border: 1px solid rgba(145, 104, 239, 0.22);\n    border-radius: 50%;\n\n    animation:\n        dxModulesPulse\n        4s\n        ease-out\n        infinite;\n}\n\n#dx-lms-modules .dx-modules-core::before {\n    inset: -30px;\n}\n\n#dx-lms-modules .dx-modules-core::after {\n    inset: -62px;\n\n    animation-delay: -2s;\n}\n\n#dx-lms-modules .dx-modules-core-icon {\n    position: relative;\n    z-index: 2;\n\n    width: 72px;\n    height: 72px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 22px;\n\n    color: #180b35;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-modules-yellow),\n            #ffd66e\n        );\n\n    box-shadow:\n        0 17px 35px rgba(255, 196, 65, 0.24);\n}\n\n#dx-lms-modules .dx-modules-core-icon svg {\n    width: 36px;\n    height: 36px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-lms-modules .dx-modules-core-title {\n    position: relative;\n    z-index: 2;\n\n    margin: 0;\n\n    color: var(--dx-modules-white);\n\n    font-size: 21px;\n    font-weight: 900;\n    line-height: 1.55;\n}\n\n#dx-lms-modules .dx-modules-core-text {\n    position: relative;\n    z-index: 2;\n\n    max-width: 170px;\n\n    margin: 0;\n\n    color: rgba(255, 255, 255, 0.67);\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.7;\n}\n\n\/* =========================================================\n   MODULE CARDS\n========================================================= *\/\n\n#dx-lms-modules .dx-module-card {\n    position: absolute;\n    z-index: 7;\n\n    width: min(330px, 29%);\n\n    display: grid;\n    grid-template-columns:\n        58px\n        minmax(0, 1fr);\n\n    align-items: center;\n\n    gap: 15px;\n\n    min-height: 130px;\n\n    padding:\n        20px\n        20px;\n\n    border: 1px solid var(--dx-modules-border);\n    border-radius: 21px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.115),\n            rgba(255, 255, 255, 0.045)\n        );\n\n    box-shadow:\n        0 22px 48px rgba(2, 0, 20, 0.30),\n        inset 0 1px 0 rgba(255, 255, 255, 0.08);\n\n    -webkit-backdrop-filter: blur(13px);\n    backdrop-filter: blur(13px);\n\n    transition:\n        transform 0.35s ease,\n        border-color 0.35s ease,\n        background 0.35s ease,\n        box-shadow 0.35s ease;\n}\n\n#dx-lms-modules .dx-module-card:hover {\n    border-color: rgba(145, 104, 239, 0.48);\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(145, 104, 239, 0.20),\n            rgba(255, 255, 255, 0.055)\n        );\n\n    box-shadow:\n        0 30px 60px rgba(2, 0, 20, 0.38),\n        inset 0 1px 0 rgba(255, 255, 255, 0.11);\n\n    transform: translateY(-6px);\n}\n\n\/* Positions *\/\n\n#dx-lms-modules .dx-module-card-one {\n    top: 18px;\n    right: 3%;\n}\n\n#dx-lms-modules .dx-module-card-two {\n    top: 18px;\n    left: 3%;\n}\n\n#dx-lms-modules .dx-module-card-three {\n    top: 50%;\n\n    right: 0;\n\n    transform: translateY(-50%);\n}\n\n#dx-lms-modules .dx-module-card-three:hover {\n    transform:\n        translateY(calc(-50% - 6px));\n}\n\n#dx-lms-modules .dx-module-card-four {\n    top: 50%;\n\n    left: 0;\n\n    transform: translateY(-50%);\n}\n\n#dx-lms-modules .dx-module-card-four:hover {\n    transform:\n        translateY(calc(-50% - 6px));\n}\n\n#dx-lms-modules .dx-module-card-five {\n    right: 3%;\n    bottom: 18px;\n}\n\n#dx-lms-modules .dx-module-card-six {\n    left: 3%;\n    bottom: 18px;\n}\n\n\/* =========================================================\n   ICONS\n========================================================= *\/\n\n#dx-lms-modules .dx-module-icon {\n    width: 58px;\n    height: 58px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid rgba(255, 255, 255, 0.16);\n    border-radius: 18px;\n\n    color: #180b35;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-modules-yellow),\n            #ffd66e\n        );\n\n    box-shadow:\n        0 14px 29px rgba(255, 196, 65, 0.20);\n\n    transition:\n        transform 0.3s ease,\n        box-shadow 0.3s ease;\n}\n\n#dx-lms-modules .dx-module-card:nth-of-type(2)\n    .dx-module-icon,\n#dx-lms-modules .dx-module-card:nth-of-type(5)\n    .dx-module-icon {\n    color: var(--dx-modules-white);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-modules-purple),\n            var(--dx-modules-purple-light)\n        );\n\n    box-shadow:\n        0 14px 29px rgba(105, 66, 216, 0.25);\n}\n\n#dx-lms-modules .dx-module-card:nth-of-type(4)\n    .dx-module-icon {\n    color: #0b4f38;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-modules-green),\n            #8ae6b9\n        );\n\n    box-shadow:\n        0 14px 29px rgba(84, 214, 150, 0.20);\n}\n\n#dx-lms-modules .dx-module-card:hover\n    .dx-module-icon {\n    transform:\n        translateY(-3px)\n        rotate(-4deg);\n}\n\n#dx-lms-modules .dx-module-icon svg {\n    width: 29px;\n    height: 29px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.75;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   CARD CONTENT\n========================================================= *\/\n\n#dx-lms-modules .dx-module-content {\n    min-width: 0;\n}\n\n#dx-lms-modules .dx-module-title {\n    margin: 0;\n\n    color: var(--dx-modules-white);\n\n    font-size: 17px;\n    font-weight: 900;\n    line-height: 1.55;\n}\n\n#dx-lms-modules .dx-module-description {\n    margin:\n        7px\n        0\n        0;\n\n    color: var(--dx-modules-muted);\n\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1.85;\n}\n\n\/* =========================================================\n   CONNECTING LINES\n========================================================= *\/\n\n#dx-lms-modules .dx-module-line {\n    position: absolute;\n    z-index: 2;\n\n    top: 50%;\n    right: 50%;\n\n    width: 200px;\n    height: 1px;\n\n    transform-origin: right center;\n\n    background:\n        linear-gradient(\n            90deg,\n            rgba(145, 104, 239, 0.08),\n            rgba(145, 104, 239, 0.62),\n            rgba(255, 196, 65, 0.30)\n        );\n}\n\n#dx-lms-modules .dx-module-line::after {\n    content: \"\";\n\n    position: absolute;\n\n    top: 50%;\n    left: 15%;\n\n    width: 6px;\n    height: 6px;\n\n    border-radius: 50%;\n\n    background: var(--dx-modules-yellow);\n\n    box-shadow:\n        0 0 13px rgba(255, 196, 65, 0.55);\n\n    transform: translateY(-50%);\n\n    animation:\n        dxModulesLinePoint\n        3.4s\n        linear\n        infinite;\n}\n\n#dx-lms-modules .dx-module-line-one {\n    transform: rotate(-38deg);\n}\n\n#dx-lms-modules .dx-module-line-two {\n    transform: rotate(38deg);\n}\n\n#dx-lms-modules .dx-module-line-three {\n    transform: rotate(0deg);\n}\n\n#dx-lms-modules .dx-module-line-four {\n    transform: rotate(180deg);\n}\n\n#dx-lms-modules .dx-module-line-five {\n    transform: rotate(145deg);\n}\n\n#dx-lms-modules .dx-module-line-six {\n    transform: rotate(215deg);\n}\n\n\/* =========================================================\n   BOTTOM NOTE\n========================================================= *\/\n\n#dx-lms-modules .dx-modules-bottom {\n    max-width: 900px;\n\n    margin:\n        42px\n        auto\n        0;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 12px;\n\n    padding:\n        18px\n        22px;\n\n    border: 1px solid rgba(255, 255, 255, 0.12);\n    border-radius: 17px;\n\n    color: var(--dx-modules-text);\n\n    background: rgba(255, 255, 255, 0.055);\n\n    -webkit-backdrop-filter: blur(10px);\n    backdrop-filter: blur(10px);\n\n    text-align: center;\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.8;\n}\n\n#dx-lms-modules .dx-modules-bottom-icon {\n    width: 34px;\n    height: 34px;\n    flex: 0 0 34px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 11px;\n\n    color: var(--dx-modules-yellow);\n\n    background: rgba(255, 196, 65, 0.10);\n}\n\n#dx-lms-modules .dx-modules-bottom-icon 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 dxModulesCoreFloat {\n    0%,\n    100% {\n        transform:\n            translate(50%, -50%)\n            translateY(0);\n    }\n\n    50% {\n        transform:\n            translate(50%, -50%)\n            translateY(-10px);\n    }\n}\n\n@keyframes dxModulesPulse {\n    0% {\n        opacity: 0.62;\n        transform: scale(0.86);\n    }\n\n    100% {\n        opacity: 0;\n        transform: scale(1.15);\n    }\n}\n\n@keyframes dxModulesLinePoint {\n    0% {\n        left: 10%;\n        opacity: 0;\n    }\n\n    20% {\n        opacity: 1;\n    }\n\n    80% {\n        opacity: 1;\n    }\n\n    100% {\n        left: 90%;\n        opacity: 0;\n    }\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1100px) {\n    #dx-lms-modules .dx-modules-map {\n        min-height: 750px;\n    }\n\n    #dx-lms-modules .dx-module-card {\n        width: min(350px, 36%);\n    }\n\n    #dx-lms-modules .dx-module-line {\n        width: 165px;\n    }\n}\n\n@media (max-width: 850px) {\n    #dx-lms-modules .dx-modules-main {\n        padding:\n            76px\n            28px\n            82px;\n    }\n\n    #dx-lms-modules .dx-modules-header {\n        margin-bottom: 40px;\n    }\n\n    #dx-lms-modules .dx-modules-map {\n        min-height: 0;\n\n        display: grid;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n\n        gap: 16px;\n    }\n\n    #dx-lms-modules .dx-modules-core {\n        position: relative;\n\n        top: auto;\n        right: auto;\n\n        grid-column: 1 \/ -1;\n\n        width: 220px;\n        height: 220px;\n\n        margin:\n            5px\n            auto\n            24px;\n\n        transform: none;\n    }\n\n    #dx-lms-modules .dx-module-card {\n        position: relative;\n\n        top: auto;\n        right: auto;\n        bottom: auto;\n        left: auto;\n\n        width: 100%;\n\n        transform: none;\n    }\n\n    #dx-lms-modules .dx-module-card-three,\n    #dx-lms-modules .dx-module-card-four {\n        transform: none;\n    }\n\n    #dx-lms-modules .dx-module-card:hover,\n    #dx-lms-modules .dx-module-card-three:hover,\n    #dx-lms-modules .dx-module-card-four:hover {\n        transform: translateY(-6px);\n    }\n\n    #dx-lms-modules .dx-module-line {\n        display: none;\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 600px) {\n    #dx-lms-modules .dx-modules-main {\n        padding:\n            59px\n            16px\n            65px;\n    }\n\n    #dx-lms-modules .dx-modules-header {\n        margin-bottom: 31px;\n    }\n\n    #dx-lms-modules .dx-modules-eyebrow {\n        font-size: 14px;\n    }\n\n    #dx-lms-modules .dx-modules-eyebrow::before,\n    #dx-lms-modules .dx-modules-eyebrow::after {\n        width: 22px;\n    }\n\n    #dx-lms-modules .dx-modules-title {\n        font-size: clamp(27px, 8.3vw, 36px);\n        line-height: 1.65;\n        letter-spacing: -0.2px;\n    }\n\n    #dx-lms-modules .dx-modules-description {\n        margin-top: 10px;\n\n        font-size: 14px;\n        line-height: 2;\n    }\n\n    #dx-lms-modules .dx-modules-map {\n        grid-template-columns: 1fr;\n\n        gap: 13px;\n    }\n\n    #dx-lms-modules .dx-modules-core {\n        grid-column: auto;\n\n        width: 185px;\n        height: 185px;\n\n        margin-bottom: 17px;\n    }\n\n    #dx-lms-modules .dx-modules-core::before {\n        inset: -20px;\n    }\n\n    #dx-lms-modules .dx-modules-core::after {\n        inset: -39px;\n    }\n\n    #dx-lms-modules .dx-modules-core-icon {\n        width: 58px;\n        height: 58px;\n\n        border-radius: 18px;\n    }\n\n    #dx-lms-modules .dx-modules-core-icon svg {\n        width: 29px;\n        height: 29px;\n    }\n\n    #dx-lms-modules .dx-modules-core-title {\n        font-size: 17px;\n    }\n\n    #dx-lms-modules .dx-modules-core-text {\n        max-width: 145px;\n\n        font-size: 14px;\n    }\n\n    #dx-lms-modules .dx-module-card {\n        min-height: 0;\n\n        grid-template-columns:\n            52px\n            minmax(0, 1fr);\n\n        gap: 13px;\n\n        padding:\n            17px\n            15px;\n\n        border-radius: 18px;\n    }\n\n    #dx-lms-modules .dx-module-icon {\n        width: 52px;\n        height: 52px;\n\n        border-radius: 16px;\n    }\n\n    #dx-lms-modules .dx-module-icon svg {\n        width: 26px;\n        height: 26px;\n    }\n\n    #dx-lms-modules .dx-module-title {\n        font-size: 16px;\n    }\n\n    #dx-lms-modules .dx-module-description {\n        margin-top: 5px;\n\n        font-size: 14px;\n        line-height: 1.8;\n    }\n\n    #dx-lms-modules .dx-modules-bottom {\n        margin-top: 20px;\n\n        align-items: flex-start;\n\n        padding:\n            16px\n            14px;\n\n        border-radius: 15px;\n\n        font-size: 14px;\n        line-height: 1.8;\n    }\n\n    #dx-lms-modules .dx-modules-bottom-icon {\n        width: 29px;\n        height: 29px;\n        flex-basis: 29px;\n\n        border-radius: 9px;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n    #dx-lms-modules *,\n    #dx-lms-modules *::before,\n    #dx-lms-modules *::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-lms-modules\"\n    aria-labelledby=\"dx-lms-modules-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n    <div\n        class=\"dx-modules-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <span\n        class=\"dx-modules-glow dx-modules-glow-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-modules-glow dx-modules-glow-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-modules-main\">\n\n        <div class=\"dx-modules-container\">\n\n            <header class=\"dx-modules-header\">\n\n                <span class=\"dx-modules-eyebrow\">\n                    One Platform to Manage Everything\n                <\/span>\n\n                <h2\n                    id=\"dx-lms-modules-title\"\n                    class=\"dx-modules-title\"\n                >\n                    What Can You Manage Through Your\n                    <span>Learning Management System?<\/span>\n                <\/h2>\n\n                <p class=\"dx-modules-description\">\n                    Manage every part of the learning process from one\n                    centralized platform, from creating educational content\n                    and registering users to assessments, certificates,\n                    reporting, and performance tracking.\n                <\/p>\n\n            <\/header>\n\n            <div class=\"dx-modules-map\">\n\n                <span\n                    class=\"dx-module-line dx-module-line-one\"\n                    aria-hidden=\"true\"\n                ><\/span>\n\n                <span\n                    class=\"dx-module-line dx-module-line-two\"\n                    aria-hidden=\"true\"\n                ><\/span>\n\n                <span\n                    class=\"dx-module-line dx-module-line-three\"\n                    aria-hidden=\"true\"\n                ><\/span>\n\n                <span\n                    class=\"dx-module-line dx-module-line-four\"\n                    aria-hidden=\"true\"\n                ><\/span>\n\n                <span\n                    class=\"dx-module-line dx-module-line-five\"\n                    aria-hidden=\"true\"\n                ><\/span>\n\n                <span\n                    class=\"dx-module-line dx-module-line-six\"\n                    aria-hidden=\"true\"\n                ><\/span>\n\n                <div class=\"dx-modules-core\">\n\n                    <span\n                        class=\"dx-modules-core-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"m3 9 9-5 9 5-9 5-9-5z\"><\/path>\n                            <path d=\"M7 12v5c3 2 7 2 10 0v-5\"><\/path>\n                            <path d=\"M21 9v6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <h3 class=\"dx-modules-core-title\">\n                        Centralized Learning Platform\n                    <\/h3>\n\n                    <p class=\"dx-modules-core-text\">\n                        Manage content, users, assessments, certificates,\n                        and reports from one dashboard.\n                    <\/p>\n\n                <\/div>\n\n                <article class=\"dx-module-card dx-module-card-one\">\n\n                    <span\n                        class=\"dx-module-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M4 19.5A2.5 2.5 0 0 1 6.5 17H20\"><\/path>\n                            <path d=\"M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z\"><\/path>\n                            <path d=\"M8 7h8\"><\/path>\n                            <path d=\"M8 11h6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <div class=\"dx-module-content\">\n\n                        <h3 class=\"dx-module-title\">\n                            Courses & Content\n                        <\/h3>\n\n                        <p class=\"dx-module-description\">\n                            Create courses, organize lessons, videos,\n                            files, and resources, and define structured\n                            learning paths.\n                        <\/p>\n\n                    <\/div>\n\n                <\/article>\n\n                <article class=\"dx-module-card dx-module-card-two\">\n\n                    <span\n                        class=\"dx-module-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"><\/path>\n                            <circle cx=\"9\" cy=\"7\" r=\"4\"><\/circle>\n                            <path d=\"M19 8v6\"><\/path>\n                            <path d=\"M22 11h-6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <div class=\"dx-module-content\">\n\n                        <h3 class=\"dx-module-title\">\n                            Learners & Instructors\n                        <\/h3>\n\n                        <p class=\"dx-module-description\">\n                            Manage accounts, roles, permissions, groups,\n                            and monitor each user\u2019s activity throughout\n                            the platform.\n                        <\/p>\n\n                    <\/div>\n\n                <\/article>\n\n                <article class=\"dx-module-card dx-module-card-three\">\n\n                    <span\n                        class=\"dx-module-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M9 11l3 3L22 4\"><\/path>\n                            <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <div class=\"dx-module-content\">\n\n                        <h3 class=\"dx-module-title\">\n                            Assessments & Quizzes\n                        <\/h3>\n\n                        <p class=\"dx-module-description\">\n                            Create quizzes and question banks, automate\n                            grading, and monitor learner performance\n                            and results.\n                        <\/p>\n\n                    <\/div>\n\n                <\/article>\n\n                <article class=\"dx-module-card dx-module-card-four\">\n\n                    <span\n                        class=\"dx-module-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <circle cx=\"12\" cy=\"8\" r=\"5\"><\/circle>\n                            <path d=\"M8.5 12.5 7 22l5-3 5 3-1.5-9.5\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <div class=\"dx-module-content\">\n\n                        <h3 class=\"dx-module-title\">\n                            Digital Certificates\n                        <\/h3>\n\n                        <p class=\"dx-module-description\">\n                            Automatically issue customizable certificates\n                            when learners complete a course or successfully\n                            pass an assessment.\n                        <\/p>\n\n                    <\/div>\n\n                <\/article>\n\n                <article class=\"dx-module-card dx-module-card-five\">\n\n                    <span\n                        class=\"dx-module-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <rect\n                                x=\"3\"\n                                y=\"5\"\n                                width=\"18\"\n                                height=\"14\"\n                                rx=\"2\"\n                            ><\/rect>\n                            <path d=\"m10 9 5 3-5 3V9z\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <div class=\"dx-module-content\">\n\n                        <h3 class=\"dx-module-title\">\n                            Live Virtual Classes\n                        <\/h3>\n\n                        <p class=\"dx-module-description\">\n                            Deliver live training sessions and integrate\n                            them with platforms such as Zoom, Teams,\n                            and WebEx.\n                        <\/p>\n\n                    <\/div>\n\n                <\/article>\n\n                <article class=\"dx-module-card dx-module-card-six\">\n\n                    <span\n                        class=\"dx-module-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M4 19V5\"><\/path>\n                            <path d=\"M4 19h16\"><\/path>\n                            <path d=\"m7 15 4-4 3 3 5-6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <div class=\"dx-module-content\">\n\n                        <h3 class=\"dx-module-title\">\n                            Reports & Analytics\n                        <\/h3>\n\n                        <p class=\"dx-module-description\">\n                            Track completion rates, assessment results,\n                            user activity, and generate reports that support\n                            informed management decisions.\n                        <\/p>\n\n                    <\/div>\n\n                <\/article>\n\n            <\/div>\n\n            <div class=\"dx-modules-bottom\">\n\n                <span\n                    class=\"dx-modules-bottom-icon\"\n                    aria-hidden=\"true\"\n                >\n                    <svg viewBox=\"0 0 24 24\">\n                        <path d=\"M12 3v18\"><\/path>\n                        <path d=\"M3 12h18\"><\/path>\n                        <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\n                    <\/svg>\n                <\/span>\n\n                <span>\n                    Additional modules and features can be added based on\n                    your organization, training model, number of users,\n                    and required integrations.\n                <\/span>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxLmsModules() {\n        const section = document.getElementById(\n            \"dx-lms-modules\"\n        );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized = \"true\";\n\n        const widget = section.closest(\n            \".elementor-widget-html\"\n        );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-lms-modules-widget-fullwidth\"\n            );\n        }\n\n        if (\n            !(\"IntersectionObserver\" in window) ||\n            window.matchMedia(\n                \"(prefers-reduced-motion: reduce)\"\n            ).matches\n        ) {\n            return;\n        }\n\n        const cards = section.querySelectorAll(\n            \".dx-module-card\"\n        );\n\n        cards.forEach(function (card, index) {\n            card.style.opacity = \"0\";\n\n            if (\n                card.classList.contains(\n                    \"dx-module-card-three\"\n                ) ||\n                card.classList.contains(\n                    \"dx-module-card-four\"\n                )\n            ) {\n                card.dataset.dxMiddleCard = \"true\";\n            } else {\n                card.style.transform = \"translateY(24px)\";\n            }\n\n            card.style.transitionDelay =\n                index * 0.08 + \"s\";\n        });\n\n        const observer = new IntersectionObserver(\n            function (entries, currentObserver) {\n                entries.forEach(function (entry) {\n                    if (!entry.isIntersecting) {\n                        return;\n                    }\n\n                    entry.target.style.opacity = \"1\";\n\n                    if (\n                        entry.target.dataset.dxMiddleCard !==\n                        \"true\"\n                    ) {\n                        entry.target.style.transform =\n                            \"translateY(0)\";\n                    }\n\n                    currentObserver.unobserve(\n                        entry.target\n                    );\n                });\n            },\n            {\n                threshold: 0.14\n            }\n        );\n\n        cards.forEach(function (card) {\n            observer.observe(card);\n        });\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxLmsModules\n        );\n    } else {\n        initDxLmsModules();\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-24bb083 e-con-full e-flex e-con e-parent\" data-id=\"24bb083\" 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-70e53f3 elementor-widget elementor-widget-html\" data-id=\"70e53f3\" 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     LMS SERVICE PAGE \u2014 FEATURES BENTO 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-lms-features),\n.elementor-widget-html:has(#dx-lms-features)\n    > .elementor-widget-container,\n.dx-lms-features-widget-fullwidth,\n.dx-lms-features-widget-fullwidth\n    > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n\/* =========================================================\n   RESET & VARIABLES\n========================================================= *\/\n\n#dx-lms-features,\n#dx-lms-features *,\n#dx-lms-features *::before,\n#dx-lms-features *::after {\n    box-sizing: border-box;\n}\n\n#dx-lms-features {\n    --dx-feature-bg: #f7f5fb;\n    --dx-feature-white: #ffffff;\n    --dx-feature-dark: #180b35;\n    --dx-feature-text: #6d6478;\n    --dx-feature-muted: #958d9f;\n    --dx-feature-purple: #6942d8;\n    --dx-feature-purple-light: #9168ef;\n    --dx-feature-purple-soft: #b49af6;\n    --dx-feature-yellow: #ffc441;\n    --dx-feature-yellow-light: #ffd66e;\n    --dx-feature-green: #54d696;\n    --dx-feature-blue: #58a8f7;\n    --dx-feature-border: rgba(105, 66, 216, 0.13);\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n\n    direction: ltr;\n    color: var(--dx-feature-dark);\n\n    background:\n        radial-gradient(\n            circle at 7% 12%,\n            rgba(105, 66, 216, 0.08),\n            transparent 24%\n        ),\n        radial-gradient(\n            circle at 93% 88%,\n            rgba(145, 104, 239, 0.08),\n            transparent 25%\n        ),\n        var(--dx-feature-bg);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-lms-features a {\n    color: inherit;\n    text-decoration: none;\n}\n\n\/* =========================================================\n   BACKGROUND DECORATIONS\n========================================================= *\/\n\n#dx-lms-features .dx-features-grid-bg {\n    position: absolute;\n    z-index: -6;\n\n    inset: 0;\n\n    opacity: 0.16;\n\n    background-image:\n        linear-gradient(\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        );\n\n    background-size: 72px 72px;\n\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 18%,\n            transparent 80%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 18%,\n            transparent 80%\n        );\n\n    pointer-events: none;\n}\n\n#dx-lms-features .dx-features-orbit {\n    position: absolute;\n    z-index: -5;\n\n    border: 1px solid rgba(105, 66, 216, 0.09);\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-lms-features .dx-features-orbit-one {\n    top: -230px;\n    right: -210px;\n\n    width: 480px;\n    height: 480px;\n}\n\n#dx-lms-features .dx-features-orbit-two {\n    left: -220px;\n    bottom: -250px;\n\n    width: 500px;\n    height: 500px;\n}\n\n\/* =========================================================\n   MAIN LAYOUT\n========================================================= *\/\n\n#dx-lms-features .dx-features-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        92px\n        clamp(22px, 5vw, 90px)\n        98px;\n}\n\n#dx-lms-features .dx-features-container {\n    width: min(1450px, 100%);\n    margin: 0 auto;\n}\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n#dx-lms-features .dx-features-header {\n    max-width: 850px;\n\n    margin: 0 auto 48px;\n\n    text-align: center;\n}\n\n#dx-lms-features .dx-features-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    margin-bottom: 11px;\n\n    color: var(--dx-feature-purple);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-lms-features .dx-features-eyebrow::before,\n#dx-lms-features .dx-features-eyebrow::after {\n    content: \"\";\n\n    width: 31px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-feature-yellow),\n            var(--dx-feature-purple-light)\n        );\n}\n\n#dx-lms-features .dx-features-title {\n    margin: 0;\n\n    color: var(--dx-feature-dark);\n\n    font-size: clamp(32px, 3.5vw, 49px);\n    font-weight: 900;\n    line-height: 1.55;\n    letter-spacing: -0.45px;\n\n    text-wrap: balance;\n}\n\n#dx-lms-features .dx-features-title span {\n    color: var(--dx-feature-purple);\n}\n\n#dx-lms-features .dx-features-description {\n    max-width: 710px;\n\n    margin: 13px auto 0;\n\n    color: var(--dx-feature-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n\n    text-wrap: pretty;\n}\n\n\/* =========================================================\n   BENTO GRID\n========================================================= *\/\n\n#dx-lms-features .dx-features-grid {\n    display: grid;\n\n    grid-template-columns:\n        repeat(12, minmax(0, 1fr));\n\n    grid-auto-rows: minmax(165px, auto);\n\n    gap: 18px;\n}\n\n\/* =========================================================\n   FEATURE CARD\n========================================================= *\/\n\n#dx-lms-features .dx-feature-card {\n    position: relative;\n    isolation: isolate;\n\n    min-width: 0;\n\n    display: flex;\n    flex-direction: column;\n\n    overflow: hidden;\n\n    border: 1px solid var(--dx-feature-border);\n    border-radius: 25px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 1),\n            rgba(250, 248, 254, 0.98)\n        );\n\n    box-shadow:\n        0 22px 58px rgba(40, 18, 84, 0.09),\n        inset 0 1px 0 rgba(255, 255, 255, 0.96);\n\n    transition:\n        transform 0.35s ease,\n        border-color 0.35s ease,\n        box-shadow 0.35s ease;\n}\n\n#dx-lms-features .dx-feature-card:hover,\n#dx-lms-features .dx-feature-card:focus-within {\n    border-color: rgba(105, 66, 216, 0.30);\n\n    box-shadow:\n        0 33px 72px rgba(40, 18, 84, 0.15),\n        inset 0 1px 0 rgba(255, 255, 255, 1);\n\n    transform: translateY(-7px);\n}\n\n#dx-lms-features .dx-feature-card::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -3;\n\n    width: 260px;\n    height: 260px;\n\n    border-radius: 50%;\n\n    filter: blur(65px);\n\n    pointer-events: none;\n}\n\n#dx-lms-features .dx-feature-card::after {\n    content: \"\";\n\n    position: absolute;\n    z-index: 2;\n\n    right: 24px;\n    bottom: 0;\n\n    width: calc(100% - 48px);\n    height: 3px;\n\n    border-radius: 999px;\n\n    opacity: 0;\n\n    background:\n        linear-gradient(\n            90deg,\n            transparent,\n            var(--dx-feature-purple),\n            var(--dx-feature-yellow),\n            transparent\n        );\n\n    transition: opacity 0.35s ease;\n}\n\n#dx-lms-features .dx-feature-card:hover::after,\n#dx-lms-features .dx-feature-card:focus-within::after {\n    opacity: 1;\n}\n\n\/* =========================================================\n   GRID POSITIONS\n========================================================= *\/\n\n#dx-lms-features .dx-feature-card-one {\n    grid-column: span 7;\n    grid-row: span 2;\n\n    min-height: 360px;\n\n    padding:\n        33px\n        31px;\n}\n\n#dx-lms-features .dx-feature-card-two {\n    grid-column: span 5;\n    grid-row: span 2;\n\n    min-height: 360px;\n\n    padding:\n        31px\n        28px;\n}\n\n#dx-lms-features .dx-feature-card-three,\n#dx-lms-features .dx-feature-card-four,\n#dx-lms-features .dx-feature-card-five {\n    grid-column: span 4;\n\n    min-height: 245px;\n\n    padding:\n        26px\n        24px;\n}\n\n#dx-lms-features .dx-feature-card-six {\n    grid-column: span 12;\n\n    min-height: 210px;\n\n    padding:\n        29px\n        30px;\n\n    display: grid;\n\n    grid-template-columns:\n        minmax(0, 1.1fr)\n        minmax(300px, 0.9fr);\n\n    align-items: center;\n\n    gap: 35px;\n}\n\n\/* =========================================================\n   CARD COLORS\n========================================================= *\/\n\n#dx-lms-features .dx-feature-card-one::before {\n    top: -110px;\n    left: -80px;\n\n    background: rgba(105, 66, 216, 0.12);\n}\n\n#dx-lms-features .dx-feature-card-two::before {\n    right: -100px;\n    bottom: -100px;\n\n    background: rgba(255, 196, 65, 0.14);\n}\n\n#dx-lms-features .dx-feature-card-three::before {\n    top: -120px;\n    left: -90px;\n\n    background: rgba(84, 214, 150, 0.11);\n}\n\n#dx-lms-features .dx-feature-card-four::before {\n    top: -120px;\n    right: -90px;\n\n    background: rgba(88, 168, 247, 0.10);\n}\n\n#dx-lms-features .dx-feature-card-five::before {\n    left: -100px;\n    bottom: -100px;\n\n    background: rgba(145, 104, 239, 0.12);\n}\n\n#dx-lms-features .dx-feature-card-six::before {\n    right: 25%;\n    bottom: -150px;\n\n    width: 360px;\n    height: 360px;\n\n    background: rgba(105, 66, 216, 0.12);\n}\n\n\/* =========================================================\n   CARD TOP\n========================================================= *\/\n\n#dx-lms-features .dx-feature-top {\n    width: 100%;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    gap: 18px;\n}\n\n#dx-lms-features .dx-feature-icon {\n    width: 64px;\n    height: 64px;\n    flex: 0 0 64px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid rgba(105, 66, 216, 0.15);\n    border-radius: 20px;\n\n    color: var(--dx-feature-white);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-feature-purple),\n            var(--dx-feature-purple-light)\n        );\n\n    box-shadow:\n        0 16px 35px rgba(105, 66, 216, 0.22);\n\n    transition:\n        transform 0.3s ease,\n        box-shadow 0.3s ease;\n}\n\n#dx-lms-features .dx-feature-card-two\n    .dx-feature-icon {\n    color: #26113f;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-feature-yellow),\n            var(--dx-feature-yellow-light)\n        );\n\n    box-shadow:\n        0 16px 35px rgba(255, 196, 65, 0.22);\n}\n\n#dx-lms-features .dx-feature-card-three\n    .dx-feature-icon {\n    color: #0b4f38;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-feature-green),\n            #8ae6b9\n        );\n\n    box-shadow:\n        0 16px 35px rgba(84, 214, 150, 0.21);\n}\n\n#dx-lms-features .dx-feature-card-four\n    .dx-feature-icon {\n    color: #ffffff;\n\n    background:\n        linear-gradient(\n            135deg,\n            #428fe0,\n            var(--dx-feature-blue)\n        );\n\n    box-shadow:\n        0 16px 35px rgba(88, 168, 247, 0.22);\n}\n\n#dx-lms-features .dx-feature-card-five\n    .dx-feature-icon {\n    background:\n        linear-gradient(\n            135deg,\n            #8654e4,\n            var(--dx-feature-purple-soft)\n        );\n}\n\n#dx-lms-features .dx-feature-card-six\n    .dx-feature-icon {\n    color: #26113f;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-feature-yellow),\n            var(--dx-feature-yellow-light)\n        );\n\n    box-shadow:\n        0 16px 35px rgba(255, 196, 65, 0.22);\n}\n\n#dx-lms-features .dx-feature-card:hover\n    .dx-feature-icon {\n    transform:\n        translateY(-4px)\n        rotate(-4deg);\n}\n\n#dx-lms-features .dx-feature-icon svg {\n    width: 32px;\n    height: 32px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.75;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-lms-features .dx-feature-number {\n    color: rgba(105, 66, 216, 0.13);\n\n    font-size: 34px;\n    font-weight: 900;\n    line-height: 1;\n}\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n#dx-lms-features .dx-feature-content {\n    position: relative;\n    z-index: 3;\n\n    min-width: 0;\n}\n\n#dx-lms-features .dx-feature-title {\n    margin:\n        21px\n        0\n        0;\n\n    color: var(--dx-feature-dark);\n\n    font-size: 22px;\n    font-weight: 900;\n    line-height: 1.6;\n\n    text-wrap: balance;\n}\n\n#dx-lms-features .dx-feature-description {\n    margin:\n        9px\n        0\n        0;\n\n    color: var(--dx-feature-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.95;\n\n    text-wrap: pretty;\n}\n\n\/* =========================================================\n   FEATURE LIST\n========================================================= *\/\n\n#dx-lms-features .dx-feature-list {\n    margin-top: 19px;\n\n    display: grid;\n\n    gap: 9px;\n}\n\n#dx-lms-features .dx-feature-list-item {\n    display: flex;\n    align-items: flex-start;\n\n    gap: 9px;\n\n    color: var(--dx-feature-muted);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.7;\n}\n\n#dx-lms-features .dx-feature-list-item::before {\n    content: \"\";\n\n    width: 6px;\n    height: 6px;\n    flex: 0 0 6px;\n\n    margin-top: 6px;\n\n    border-radius: 50%;\n\n    background: var(--dx-feature-yellow);\n\n    box-shadow:\n        0 0 0 4px rgba(255, 196, 65, 0.10);\n}\n\n\/* =========================================================\n   VISUAL \u2014 AUTOMATION\n========================================================= *\/\n\n#dx-lms-features .dx-feature-automation-visual {\n    position: relative;\n\n    min-height: 130px;\n\n    margin-top: auto;\n    padding-top: 24px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 13px;\n}\n\n#dx-lms-features .dx-automation-step {\n    position: relative;\n\n    width: 78px;\n    min-height: 78px;\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n\n    gap: 7px;\n\n    border: 1px solid rgba(105, 66, 216, 0.12);\n    border-radius: 17px;\n\n    background: rgba(255, 255, 255, 0.85);\n\n    box-shadow:\n        0 12px 27px rgba(40, 18, 84, 0.08);\n}\n\n#dx-lms-features .dx-automation-step-icon {\n    width: 31px;\n    height: 31px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 10px;\n\n    color: var(--dx-feature-purple);\n\n    background: rgba(105, 66, 216, 0.09);\n}\n\n#dx-lms-features .dx-automation-step:nth-child(3)\n    .dx-automation-step-icon {\n    color: #9b6c00;\n\n    background: rgba(255, 196, 65, 0.18);\n}\n\n#dx-lms-features .dx-automation-step:nth-child(5)\n    .dx-automation-step-icon {\n    color: #16845a;\n\n    background: rgba(84, 214, 150, 0.16);\n}\n\n#dx-lms-features .dx-automation-step-icon svg {\n    width: 17px;\n    height: 17px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.9;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-lms-features .dx-automation-step-label {\n    color: var(--dx-feature-dark);\n\n    font-size: 14px;\n    font-weight: 900;\n}\n\n#dx-lms-features .dx-automation-arrow {\n    width: 28px;\n    height: 28px;\n    flex: 0 0 28px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 50%;\n\n    color: var(--dx-feature-purple);\n\n    background: rgba(105, 66, 216, 0.08);\n}\n\n#dx-lms-features .dx-automation-arrow svg {\n    width: 15px;\n    height: 15px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   VISUAL \u2014 USER EXPERIENCE\n========================================================= *\/\n\n#dx-lms-features .dx-feature-ui-visual {\n    position: relative;\n\n    min-height: 160px;\n\n    margin-top: auto;\n    padding-top: 25px;\n\n    display: flex;\n    align-items: flex-end;\n    justify-content: center;\n\n    gap: 12px;\n}\n\n#dx-lms-features .dx-ui-device {\n    position: relative;\n\n    overflow: hidden;\n\n    border: 1px solid rgba(105, 66, 216, 0.14);\n\n    background:\n        linear-gradient(\n            145deg,\n            #ffffff,\n            #f7f3fc\n        );\n\n    box-shadow:\n        0 15px 35px rgba(40, 18, 84, 0.11);\n}\n\n#dx-lms-features .dx-ui-device-desktop {\n    width: 185px;\n    height: 116px;\n\n    padding: 12px;\n\n    border-radius: 15px;\n}\n\n#dx-lms-features .dx-ui-device-mobile {\n    width: 61px;\n    height: 126px;\n\n    padding: 9px 7px;\n\n    border-radius: 17px;\n}\n\n#dx-lms-features .dx-ui-line {\n    height: 7px;\n\n    margin-bottom: 7px;\n\n    border-radius: 999px;\n\n    background: rgba(22, 10, 49, 0.11);\n}\n\n#dx-lms-features .dx-ui-line-one {\n    width: 70%;\n\n    background: rgba(105, 66, 216, 0.16);\n}\n\n#dx-lms-features .dx-ui-line-two {\n    width: 48%;\n}\n\n#dx-lms-features .dx-ui-grid {\n    margin-top: 12px;\n\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n\n    gap: 7px;\n}\n\n#dx-lms-features .dx-ui-box {\n    height: 39px;\n\n    border-radius: 9px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(105, 66, 216, 0.14),\n            rgba(145, 104, 239, 0.08)\n        );\n}\n\n#dx-lms-features .dx-ui-mobile-circle {\n    width: 24px;\n    height: 24px;\n\n    margin: 0 auto 11px;\n\n    border-radius: 50%;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-feature-yellow),\n            var(--dx-feature-yellow-light)\n        );\n}\n\n#dx-lms-features .dx-ui-mobile-card {\n    height: 34px;\n\n    margin-top: 7px;\n\n    border-radius: 8px;\n\n    background: rgba(105, 66, 216, 0.10);\n}\n\n\/* =========================================================\n   SMALL CARD DECORATION\n========================================================= *\/\n\n#dx-lms-features .dx-feature-mini-visual {\n    margin-top: auto;\n    padding-top: 24px;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    gap: 13px;\n}\n\n#dx-lms-features .dx-feature-mini-chart {\n    flex: 1;\n\n    height: 54px;\n\n    display: flex;\n    align-items: flex-end;\n\n    gap: 6px;\n}\n\n#dx-lms-features .dx-feature-mini-bar {\n    flex: 1;\n\n    min-width: 8px;\n\n    border-radius: 6px 6px 2px 2px;\n\n    background:\n        linear-gradient(\n            to top,\n            var(--dx-feature-purple),\n            var(--dx-feature-purple-light)\n        );\n}\n\n#dx-lms-features .dx-feature-mini-bar:nth-child(1) {\n    height: 36%;\n}\n\n#dx-lms-features .dx-feature-mini-bar:nth-child(2) {\n    height: 60%;\n}\n\n#dx-lms-features .dx-feature-mini-bar:nth-child(3) {\n    height: 45%;\n}\n\n#dx-lms-features .dx-feature-mini-bar:nth-child(4) {\n    height: 78%;\n}\n\n#dx-lms-features .dx-feature-mini-bar:nth-child(5) {\n    height: 95%;\n}\n\n#dx-lms-features .dx-feature-mini-badge {\n    min-width: 64px;\n    min-height: 48px;\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n\n    gap: 3px;\n\n    border-radius: 14px;\n\n    color: var(--dx-feature-dark);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-feature-yellow),\n            var(--dx-feature-yellow-light)\n        );\n\n    box-shadow:\n        0 13px 27px rgba(255, 196, 65, 0.20);\n}\n\n#dx-lms-features .dx-feature-mini-badge strong {\n    font-size: 15px;\n    font-weight: 900;\n}\n\n#dx-lms-features .dx-feature-mini-badge span {\n    font-size: 14px;\n    font-weight: 800;\n}\n\n\/* =========================================================\n   SUPPORT VISUAL\n========================================================= *\/\n\n#dx-lms-features .dx-support-visual {\n    margin-top: auto;\n    padding-top: 24px;\n\n    display: flex;\n    align-items: center;\n\n    gap: 9px;\n}\n\n#dx-lms-features .dx-support-avatar {\n    width: 37px;\n    height: 37px;\n    flex: 0 0 37px;\n\n    border: 3px solid #ffffff;\n    border-radius: 50%;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-feature-purple),\n            var(--dx-feature-purple-light)\n        );\n\n    box-shadow:\n        0 7px 18px rgba(40, 18, 84, 0.13);\n}\n\n#dx-lms-features .dx-support-avatar + .dx-support-avatar {\n    margin-left: -16px;\n}\n\n#dx-lms-features .dx-support-avatar:nth-child(2) {\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-feature-yellow),\n            var(--dx-feature-yellow-light)\n        );\n}\n\n#dx-lms-features .dx-support-avatar:nth-child(3) {\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-feature-green),\n            #8ae6b9\n        );\n}\n\n#dx-lms-features .dx-support-status {\n    margin-left: 8px;\n\n    display: inline-flex;\n    align-items: center;\n\n    gap: 7px;\n\n    color: var(--dx-feature-text);\n\n    font-size: 14px;\n    font-weight: 800;\n}\n\n#dx-lms-features .dx-support-status::before {\n    content: \"\";\n\n    width: 7px;\n    height: 7px;\n\n    border-radius: 50%;\n\n    background: var(--dx-feature-green);\n\n    box-shadow:\n        0 0 0 4px rgba(84, 214, 150, 0.12);\n}\n\n\/* =========================================================\n   INTEGRATION VISUAL\n========================================================= *\/\n\n#dx-lms-features .dx-integration-visual {\n    margin-top: auto;\n    padding-top: 24px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n}\n\n#dx-lms-features .dx-integration-node {\n    width: 45px;\n    height: 45px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid rgba(105, 66, 216, 0.12);\n    border-radius: 14px;\n\n    color: var(--dx-feature-purple);\n\n    background: rgba(105, 66, 216, 0.07);\n\n    font-size: 14px;\n    font-weight: 900;\n}\n\n#dx-lms-features .dx-integration-node-main {\n    width: 58px;\n    height: 58px;\n\n    color: #ffffff;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-feature-purple),\n            var(--dx-feature-purple-light)\n        );\n\n    box-shadow:\n        0 15px 30px rgba(105, 66, 216, 0.24);\n}\n\n#dx-lms-features .dx-integration-connector {\n    width: 21px;\n    height: 1px;\n\n    background:\n        linear-gradient(\n            90deg,\n            rgba(105, 66, 216, 0.15),\n            rgba(105, 66, 216, 0.55)\n        );\n}\n\n\/* =========================================================\n   DEVELOPMENT CARD\n========================================================= *\/\n\n#dx-lms-features .dx-feature-card-six\n    .dx-feature-content {\n    max-width: 700px;\n}\n\n#dx-lms-features .dx-feature-card-six\n    .dx-feature-title {\n    margin-top: 17px;\n}\n\n#dx-lms-features .dx-development-visual {\n    position: relative;\n\n    min-height: 145px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n#dx-lms-features .dx-development-core {\n    position: relative;\n    z-index: 3;\n\n    width: 112px;\n    height: 112px;\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n\n    gap: 8px;\n\n    border: 1px solid rgba(105, 66, 216, 0.17);\n    border-radius: 28px;\n\n    color: #ffffff;\n\n    background:\n        linear-gradient(\n            145deg,\n            var(--dx-feature-purple-light),\n            var(--dx-feature-purple)\n        );\n\n    box-shadow:\n        0 21px 45px rgba(105, 66, 216, 0.28);\n}\n\n#dx-lms-features .dx-development-core svg {\n    width: 34px;\n    height: 34px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-lms-features .dx-development-core span {\n    font-size: 14px;\n    font-weight: 900;\n}\n\n#dx-lms-features .dx-development-tag {\n    position: absolute;\n    z-index: 2;\n\n    min-height: 34px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    padding:\n        0\n        13px;\n\n    border: 1px solid rgba(105, 66, 216, 0.12);\n    border-radius: 999px;\n\n    color: var(--dx-feature-text);\n\n    background: rgba(255, 255, 255, 0.88);\n\n    box-shadow:\n        0 10px 25px rgba(40, 18, 84, 0.08);\n\n    font-size: 14px;\n    font-weight: 900;\n}\n\n#dx-lms-features .dx-development-tag-one {\n    top: 5px;\n    right: 5px;\n}\n\n#dx-lms-features .dx-development-tag-two {\n    top: 5px;\n    left: 5px;\n}\n\n#dx-lms-features .dx-development-tag-three {\n    right: 0;\n    bottom: 5px;\n}\n\n#dx-lms-features .dx-development-tag-four {\n    left: 0;\n    bottom: 5px;\n}\n\n\/* =========================================================\n   BOTTOM NOTE\n========================================================= *\/\n\n#dx-lms-features .dx-features-bottom {\n    max-width: 940px;\n\n    margin:\n        30px\n        auto\n        0;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 12px;\n\n    padding:\n        18px\n        22px;\n\n    border: 1px solid rgba(105, 66, 216, 0.12);\n    border-radius: 17px;\n\n    color: var(--dx-feature-text);\n\n    background: rgba(255, 255, 255, 0.67);\n\n    box-shadow:\n        0 14px 34px rgba(40, 18, 84, 0.06);\n\n    text-align: center;\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.8;\n}\n\n#dx-lms-features .dx-features-bottom-icon {\n    width: 33px;\n    height: 33px;\n    flex: 0 0 33px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 11px;\n\n    color: var(--dx-feature-purple);\n\n    background: rgba(105, 66, 216, 0.09);\n}\n\n#dx-lms-features .dx-features-bottom-icon svg {\n    width: 17px;\n    height: 17px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.9;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1050px) {\n    #dx-lms-features .dx-feature-card-one,\n    #dx-lms-features .dx-feature-card-two {\n        grid-column: span 6;\n    }\n\n    #dx-lms-features .dx-feature-card-three,\n    #dx-lms-features .dx-feature-card-four,\n    #dx-lms-features .dx-feature-card-five {\n        grid-column: span 4;\n    }\n\n    #dx-lms-features .dx-feature-card-six {\n        grid-template-columns:\n            minmax(0, 1fr)\n            minmax(260px, 0.8fr);\n    }\n}\n\n@media (max-width: 800px) {\n    #dx-lms-features .dx-features-main {\n        padding:\n            76px\n            28px\n            82px;\n    }\n\n    #dx-lms-features .dx-features-header {\n        margin-bottom: 40px;\n    }\n\n    #dx-lms-features .dx-features-grid {\n        grid-template-columns:\n            repeat(2, minmax(0, 1fr));\n\n        grid-auto-rows: auto;\n    }\n\n    #dx-lms-features .dx-feature-card-one,\n    #dx-lms-features .dx-feature-card-two,\n    #dx-lms-features .dx-feature-card-three,\n    #dx-lms-features .dx-feature-card-four,\n    #dx-lms-features .dx-feature-card-five {\n        grid-column: span 1;\n        grid-row: auto;\n\n        min-height: 310px;\n    }\n\n    #dx-lms-features .dx-feature-card-six {\n        grid-column: 1 \/ -1;\n\n        grid-template-columns: 1fr;\n\n        text-align: center;\n    }\n\n    #dx-lms-features .dx-feature-card-six\n        .dx-feature-top {\n        justify-content: center;\n    }\n\n    #dx-lms-features .dx-feature-card-six\n        .dx-feature-number {\n        display: none;\n    }\n\n    #dx-lms-features .dx-feature-card-six\n        .dx-feature-list {\n        max-width: 500px;\n\n        margin-right: auto;\n        margin-left: auto;\n\n        justify-items: start;\n    }\n\n    #dx-lms-features .dx-development-visual {\n        width: min(100%, 430px);\n\n        margin: 0 auto;\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 600px) {\n    #dx-lms-features .dx-features-main {\n        padding:\n            59px\n            16px\n            65px;\n    }\n\n    #dx-lms-features .dx-features-header {\n        margin-bottom: 31px;\n    }\n\n    #dx-lms-features .dx-features-eyebrow {\n        font-size: 14px;\n    }\n\n    #dx-lms-features .dx-features-eyebrow::before,\n    #dx-lms-features .dx-features-eyebrow::after {\n        width: 22px;\n    }\n\n    #dx-lms-features .dx-features-title {\n        font-size: clamp(27px, 8.3vw, 36px);\n        line-height: 1.65;\n        letter-spacing: -0.2px;\n    }\n\n    #dx-lms-features .dx-features-description {\n        margin-top: 10px;\n\n        font-size: 14px;\n        line-height: 2;\n    }\n\n    #dx-lms-features .dx-features-grid {\n        grid-template-columns: 1fr;\n\n        gap: 13px;\n    }\n\n    #dx-lms-features .dx-feature-card-one,\n    #dx-lms-features .dx-feature-card-two,\n    #dx-lms-features .dx-feature-card-three,\n    #dx-lms-features .dx-feature-card-four,\n    #dx-lms-features .dx-feature-card-five,\n    #dx-lms-features .dx-feature-card-six {\n        grid-column: auto;\n\n        min-height: 0;\n\n        padding:\n            21px\n            17px;\n\n        border-radius: 19px;\n    }\n\n    #dx-lms-features .dx-feature-card-six {\n        display: grid;\n\n        gap: 23px;\n\n        text-align: left;\n    }\n\n    #dx-lms-features .dx-feature-card-six\n        .dx-feature-top {\n        justify-content: space-between;\n    }\n\n    #dx-lms-features .dx-feature-card-six\n        .dx-feature-number {\n        display: block;\n    }\n\n    #dx-lms-features .dx-feature-card-six\n        .dx-feature-list {\n        margin-right: 0;\n        margin-left: 0;\n    }\n\n    #dx-lms-features .dx-feature-icon {\n        width: 54px;\n        height: 54px;\n        flex-basis: 54px;\n\n        border-radius: 16px;\n    }\n\n    #dx-lms-features .dx-feature-icon svg {\n        width: 27px;\n        height: 27px;\n    }\n\n    #dx-lms-features .dx-feature-number {\n        font-size: 28px;\n    }\n\n    #dx-lms-features .dx-feature-title {\n        margin-top: 17px;\n\n        font-size: 18px;\n        line-height: 1.65;\n    }\n\n    #dx-lms-features .dx-feature-description {\n        margin-top: 7px;\n\n        font-size: 14px;\n        line-height: 1.9;\n    }\n\n    #dx-lms-features .dx-feature-list {\n        margin-top: 15px;\n\n        gap: 7px;\n    }\n\n    #dx-lms-features .dx-feature-list-item {\n        font-size: 14px;\n    }\n\n    #dx-lms-features .dx-feature-automation-visual {\n        min-height: 92px;\n\n        padding-top: 18px;\n\n        gap: 6px;\n    }\n\n    #dx-lms-features .dx-automation-step {\n        width: 65px;\n        min-height: 65px;\n\n        gap: 5px;\n\n        border-radius: 14px;\n    }\n\n    #dx-lms-features .dx-automation-step-icon {\n        width: 26px;\n        height: 26px;\n\n        border-radius: 8px;\n    }\n\n    #dx-lms-features .dx-automation-step-icon svg {\n        width: 14px;\n        height: 14px;\n    }\n\n    #dx-lms-features .dx-automation-step-label {\n        font-size: 14px;\n    }\n\n    #dx-lms-features .dx-automation-arrow {\n        width: 22px;\n        height: 22px;\n        flex-basis: 22px;\n    }\n\n    #dx-lms-features .dx-feature-ui-visual {\n        min-height: 126px;\n\n        padding-top: 18px;\n    }\n\n    #dx-lms-features .dx-ui-device-desktop {\n        width: 155px;\n        height: 99px;\n    }\n\n    #dx-lms-features .dx-ui-device-mobile {\n        width: 52px;\n        height: 108px;\n    }\n\n    #dx-lms-features .dx-feature-mini-visual,\n    #dx-lms-features .dx-support-visual,\n    #dx-lms-features .dx-integration-visual {\n        padding-top: 18px;\n    }\n\n    #dx-lms-features .dx-development-visual {\n        min-height: 125px;\n    }\n\n    #dx-lms-features .dx-development-core {\n        width: 90px;\n        height: 90px;\n\n        border-radius: 23px;\n    }\n\n    #dx-lms-features .dx-development-core svg {\n        width: 28px;\n        height: 28px;\n    }\n\n    #dx-lms-features .dx-development-tag {\n        min-height: 29px;\n\n        padding-right: 9px;\n        padding-left: 9px;\n\n        font-size: 14px;\n    }\n\n    #dx-lms-features .dx-features-bottom {\n        margin-top: 18px;\n\n        align-items: flex-start;\n\n        padding:\n            16px\n            14px;\n\n        border-radius: 15px;\n\n        font-size: 14px;\n        line-height: 1.8;\n    }\n\n    #dx-lms-features .dx-features-bottom-icon {\n        width: 29px;\n        height: 29px;\n        flex-basis: 29px;\n\n        border-radius: 9px;\n    }\n\n    #dx-lms-features .dx-features-orbit {\n        display: none;\n    }\n}\n\n\/* =========================================================\n   VERY SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 370px) {\n    #dx-lms-features .dx-feature-automation-visual {\n        gap: 4px;\n    }\n\n    #dx-lms-features .dx-automation-step {\n        width: 57px;\n        min-height: 60px;\n    }\n\n    #dx-lms-features .dx-automation-arrow {\n        width: 19px;\n        height: 19px;\n        flex-basis: 19px;\n    }\n\n    #dx-lms-features .dx-development-tag {\n        font-size: 14px;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n    #dx-lms-features *,\n    #dx-lms-features *::before,\n    #dx-lms-features *::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-lms-features\"\n    aria-labelledby=\"dx-lms-features-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n    <div\n        class=\"dx-features-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <span\n        class=\"dx-features-orbit dx-features-orbit-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-features-orbit dx-features-orbit-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-features-main\">\n\n        <div class=\"dx-features-container\">\n\n            <header class=\"dx-features-header\">\n\n                <span class=\"dx-features-eyebrow\">\n                    Features for a Better Learning Experience\n                <\/span>\n\n                <h2\n                    id=\"dx-lms-features-title\"\n                    class=\"dx-features-title\"\n                >\n                    Key Features of Our\n                    <span>Learning Management System<\/span>\n                <\/h2>\n\n                <p class=\"dx-features-description\">\n                    The system combines ease of use with powerful\n                    management and analytics tools, giving both your\n                    organization and learners a more efficient, flexible,\n                    and scalable learning experience.\n                <\/p>\n\n            <\/header>\n\n            <div class=\"dx-features-grid\">\n\n                <!-- FEATURE 01 -->\n\n                <article class=\"dx-feature-card dx-feature-card-one\">\n\n                    <div class=\"dx-feature-content\">\n\n                        <div class=\"dx-feature-top\">\n\n                            <span\n                                class=\"dx-feature-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M4 4h16v16H4z\"><\/path>\n                                    <path d=\"M8 2v4\"><\/path>\n                                    <path d=\"M16 2v4\"><\/path>\n                                    <path d=\"M4 9h16\"><\/path>\n                                    <path d=\"m8 14 2 2 5-5\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span class=\"dx-feature-number\">\n                                01\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-feature-title\">\n                            End-to-End Learning Automation\n                        <\/h3>\n\n                        <p class=\"dx-feature-description\">\n                            Automate the learning process from user\n                            registration and content access through\n                            assessments, certificate issuance, and\n                            performance tracking.\n                        <\/p>\n\n                        <div class=\"dx-feature-list\">\n\n                            <span class=\"dx-feature-list-item\">\n                                User Registration & Management\n                            <\/span>\n\n                            <span class=\"dx-feature-list-item\">\n                                Content & Assessment Scheduling\n                            <\/span>\n\n                            <span class=\"dx-feature-list-item\">\n                                Automatic Certificate Issuance\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <div\n                        class=\"dx-feature-automation-visual\"\n                        aria-hidden=\"true\"\n                    >\n\n                        <div class=\"dx-automation-step\">\n\n                            <span class=\"dx-automation-step-icon\">\n                                <svg viewBox=\"0 0 24 24\">\n                                    <circle cx=\"12\" cy=\"8\" r=\"4\"><\/circle>\n                                    <path d=\"M4 21a8 8 0 0 1 16 0\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span class=\"dx-automation-step-label\">\n                                Register\n                            <\/span>\n\n                        <\/div>\n\n                        <span class=\"dx-automation-arrow\">\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M5 12h14\"><\/path>\n                                <path d=\"m13 6 6 6-6 6\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <div class=\"dx-automation-step\">\n\n                            <span class=\"dx-automation-step-icon\">\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M4 19.5A2.5 2.5 0 0 1 6.5 17H20\"><\/path>\n                                    <path d=\"M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5z\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span class=\"dx-automation-step-label\">\n                                Learn\n                            <\/span>\n\n                        <\/div>\n\n                        <span class=\"dx-automation-arrow\">\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M5 12h14\"><\/path>\n                                <path d=\"m13 6 6 6-6 6\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <div class=\"dx-automation-step\">\n\n                            <span class=\"dx-automation-step-icon\">\n                                <svg viewBox=\"0 0 24 24\">\n                                    <circle cx=\"12\" cy=\"8\" r=\"5\"><\/circle>\n                                    <path d=\"M8.5 12.5 7 22l5-3 5 3-1.5-9.5\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span class=\"dx-automation-step-label\">\n                                Certify\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n                <!-- FEATURE 02 -->\n\n                <article class=\"dx-feature-card dx-feature-card-two\">\n\n                    <div class=\"dx-feature-content\">\n\n                        <div class=\"dx-feature-top\">\n\n                            <span\n                                class=\"dx-feature-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <rect\n                                        x=\"3\"\n                                        y=\"4\"\n                                        width=\"18\"\n                                        height=\"16\"\n                                        rx=\"2\"\n                                    ><\/rect>\n                                    <path d=\"M3 9h18\"><\/path>\n                                    <path d=\"M8 14h3\"><\/path>\n                                    <path d=\"M8 17h7\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span class=\"dx-feature-number\">\n                                02\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-feature-title\">\n                            Easy User Experience\n                        <\/h3>\n\n                        <p class=\"dx-feature-description\">\n                            Clear and responsive interfaces for learners,\n                            instructors, and administrators, designed to\n                            work efficiently across desktop, tablet,\n                            and mobile devices.\n                        <\/p>\n\n                        <div class=\"dx-feature-list\">\n\n                            <span class=\"dx-feature-list-item\">\n                                Simple and Intuitive Interface\n                            <\/span>\n\n                            <span class=\"dx-feature-list-item\">\n                                Responsive Across All Devices\n                            <\/span>\n\n                            <span class=\"dx-feature-list-item\">\n                                Role-Based Dashboards\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <div\n                        class=\"dx-feature-ui-visual\"\n                        aria-hidden=\"true\"\n                    >\n\n                        <div class=\"dx-ui-device dx-ui-device-desktop\">\n\n                            <div class=\"dx-ui-line dx-ui-line-one\"><\/div>\n                            <div class=\"dx-ui-line dx-ui-line-two\"><\/div>\n\n                            <div class=\"dx-ui-grid\">\n                                <span class=\"dx-ui-box\"><\/span>\n                                <span class=\"dx-ui-box\"><\/span>\n                                <span class=\"dx-ui-box\"><\/span>\n                                <span class=\"dx-ui-box\"><\/span>\n                            <\/div>\n\n                        <\/div>\n\n                        <div class=\"dx-ui-device dx-ui-device-mobile\">\n\n                            <div class=\"dx-ui-mobile-circle\"><\/div>\n\n                            <div class=\"dx-ui-line dx-ui-line-one\"><\/div>\n                            <div class=\"dx-ui-line dx-ui-line-two\"><\/div>\n\n                            <div class=\"dx-ui-mobile-card\"><\/div>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n                <!-- FEATURE 03 -->\n\n                <article class=\"dx-feature-card dx-feature-card-three\">\n\n                    <div class=\"dx-feature-content\">\n\n                        <div class=\"dx-feature-top\">\n\n                            <span\n                                class=\"dx-feature-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M4 19V5\"><\/path>\n                                    <path d=\"M4 19h16\"><\/path>\n                                    <path d=\"m7 15 4-4 3 3 5-6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span class=\"dx-feature-number\">\n                                03\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-feature-title\">\n                            Advanced Tracking & Analytics\n                        <\/h3>\n\n                        <p class=\"dx-feature-description\">\n                            Monitor user activity, completion rates,\n                            assessment results, and content engagement\n                            through clear and actionable reports.\n                        <\/p>\n\n                    <\/div>\n\n                    <div\n                        class=\"dx-feature-mini-visual\"\n                        aria-hidden=\"true\"\n                    >\n\n                        <div class=\"dx-feature-mini-chart\">\n                            <span class=\"dx-feature-mini-bar\"><\/span>\n                            <span class=\"dx-feature-mini-bar\"><\/span>\n                            <span class=\"dx-feature-mini-bar\"><\/span>\n                            <span class=\"dx-feature-mini-bar\"><\/span>\n                            <span class=\"dx-feature-mini-bar\"><\/span>\n                        <\/div>\n\n                        <div class=\"dx-feature-mini-badge\">\n                            <strong>84%<\/strong>\n                            <span>Completion Rate<\/span>\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n                <!-- FEATURE 04 -->\n\n                <article class=\"dx-feature-card dx-feature-card-four\">\n\n                    <div class=\"dx-feature-content\">\n\n                        <div class=\"dx-feature-top\">\n\n                            <span\n                                class=\"dx-feature-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M21 15a4 4 0 0 1-4 4H8l-5 3v-7a4 4 0 0 1-1-3 4 4 0 0 1 4-4h11a4 4 0 0 1 4 4z\"><\/path>\n                                    <path d=\"M8 12h8\"><\/path>\n                                    <path d=\"M8 15h5\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span class=\"dx-feature-number\">\n                                04\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-feature-title\">\n                            Comprehensive Technical Support\n                        <\/h3>\n\n                        <p class=\"dx-feature-description\">\n                            Ongoing assistance to help maintain system\n                            stability, support your team with platform\n                            management, and resolve technical issues.\n                        <\/p>\n\n                    <\/div>\n\n                    <div\n                        class=\"dx-support-visual\"\n                        aria-hidden=\"true\"\n                    >\n\n                        <span class=\"dx-support-avatar\"><\/span>\n                        <span class=\"dx-support-avatar\"><\/span>\n                        <span class=\"dx-support-avatar\"><\/span>\n\n                        <span class=\"dx-support-status\">\n                            Support Team Available\n                        <\/span>\n\n                    <\/div>\n\n                <\/article>\n\n                <!-- FEATURE 05 -->\n\n                <article class=\"dx-feature-card dx-feature-card-five\">\n\n                    <div class=\"dx-feature-content\">\n\n                        <div class=\"dx-feature-top\">\n\n                            <span\n                                class=\"dx-feature-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <circle cx=\"6\" cy=\"6\" r=\"3\"><\/circle>\n                                    <circle cx=\"18\" cy=\"6\" r=\"3\"><\/circle>\n                                    <circle cx=\"12\" cy=\"18\" r=\"3\"><\/circle>\n                                    <path d=\"M8.5 7.5 10.5 15\"><\/path>\n                                    <path d=\"M15.5 7.5 13.5 15\"><\/path>\n                                    <path d=\"M9 6h6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span class=\"dx-feature-number\">\n                                05\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-feature-title\">\n                            Seamless Integrations\n                        <\/h3>\n\n                        <p class=\"dx-feature-description\">\n                            Connect the LMS with virtual classroom tools\n                            and external services to support live learning\n                            and efficient data exchange.\n                        <\/p>\n\n                    <\/div>\n\n                    <div\n                        class=\"dx-integration-visual\"\n                        aria-hidden=\"true\"\n                    >\n\n                        <span class=\"dx-integration-node\">\n                            Zoom\n                        <\/span>\n\n                        <span class=\"dx-integration-connector\"><\/span>\n\n                        <span class=\"dx-integration-node dx-integration-node-main\">\n                            LMS\n                        <\/span>\n\n                        <span class=\"dx-integration-connector\"><\/span>\n\n                        <span class=\"dx-integration-node\">\n                            Teams\n                        <\/span>\n\n                    <\/div>\n\n                <\/article>\n\n                <!-- FEATURE 06 -->\n\n                <article class=\"dx-feature-card dx-feature-card-six\">\n\n                    <div class=\"dx-feature-content\">\n\n                        <div class=\"dx-feature-top\">\n\n                            <span\n                                class=\"dx-feature-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M12 3v18\"><\/path>\n                                    <path d=\"M3 12h18\"><\/path>\n                                    <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\n                                <\/svg>\n                            <\/span>\n\n                            <span class=\"dx-feature-number\">\n                                06\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-feature-title\">\n                            Flexible Development Around Your Organization\n                        <\/h3>\n\n                        <p class=\"dx-feature-description\">\n                            The system can be expanded with additional\n                            features and connected to the tools already\n                            used within your organization, allowing it\n                            to adapt to existing workflows and scale as\n                            your users, courses, and branches grow.\n                        <\/p>\n\n                        <div class=\"dx-feature-list\">\n\n                            <span class=\"dx-feature-list-item\">\n                                Custom Design & Branding\n                            <\/span>\n\n                            <span class=\"dx-feature-list-item\">\n                                Additional Roles & Modules\n                            <\/span>\n\n                            <span class=\"dx-feature-list-item\">\n                                External System Integrations\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <div\n                        class=\"dx-development-visual\"\n                        aria-hidden=\"true\"\n                    >\n\n                        <span class=\"dx-development-tag dx-development-tag-one\">\n                            Custom Branding\n                        <\/span>\n\n                        <span class=\"dx-development-tag dx-development-tag-two\">\n                            Advanced Permissions\n                        <\/span>\n\n                        <span class=\"dx-development-tag dx-development-tag-three\">\n                            Extra Integrations\n                        <\/span>\n\n                        <span class=\"dx-development-tag dx-development-tag-four\">\n                            Future Scalability\n                        <\/span>\n\n                        <div class=\"dx-development-core\">\n\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M12 2v4\"><\/path>\n                                <path d=\"M12 18v4\"><\/path>\n                                <path d=\"m4.93 4.93 2.83 2.83\"><\/path>\n                                <path d=\"m16.24 16.24 2.83 2.83\"><\/path>\n                                <path d=\"M2 12h4\"><\/path>\n                                <path d=\"M18 12h4\"><\/path>\n                                <path d=\"m4.93 19.07 2.83-2.83\"><\/path>\n                                <path d=\"m16.24 7.76 2.83-2.83\"><\/path>\n                                <circle cx=\"12\" cy=\"12\" r=\"4\"><\/circle>\n                            <\/svg>\n\n                            <span>\n                                Flexible System\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n            <\/div>\n\n            <div class=\"dx-features-bottom\">\n\n                <span\n                    class=\"dx-features-bottom-icon\"\n                    aria-hidden=\"true\"\n                >\n                    <svg viewBox=\"0 0 24 24\">\n                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                    <\/svg>\n                <\/span>\n\n                <span>\n                    The final LMS features are defined according to your\n                    organization\u2019s requirements, content delivery model,\n                    number of users, and required integrations.\n                <\/span>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxLmsFeatures() {\n        const section = document.getElementById(\n            \"dx-lms-features\"\n        );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized = \"true\";\n\n        const widget = section.closest(\n            \".elementor-widget-html\"\n        );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-lms-features-widget-fullwidth\"\n            );\n        }\n\n        if (\n            !(\"IntersectionObserver\" in window) ||\n            window.matchMedia(\n                \"(prefers-reduced-motion: reduce)\"\n            ).matches\n        ) {\n            return;\n        }\n\n        const cards = section.querySelectorAll(\n            \".dx-feature-card\"\n        );\n\n        cards.forEach(function (card, index) {\n            card.style.opacity = \"0\";\n            card.style.transform = \"translateY(25px)\";\n\n            card.style.transition =\n                \"opacity 0.58s ease \" +\n                index * 0.08 +\n                \"s, transform 0.58s ease \" +\n                index * 0.08 +\n                \"s, border-color 0.35s ease, box-shadow 0.35s ease\";\n        });\n\n        const observer = new IntersectionObserver(\n            function (entries, currentObserver) {\n                entries.forEach(function (entry) {\n                    if (!entry.isIntersecting) {\n                        return;\n                    }\n\n                    entry.target.style.opacity = \"1\";\n                    entry.target.style.transform = \"translateY(0)\";\n\n                    currentObserver.unobserve(\n                        entry.target\n                    );\n                });\n            },\n            {\n                threshold: 0.12\n            }\n        );\n\n        cards.forEach(function (card) {\n            observer.observe(card);\n        });\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxLmsFeatures\n        );\n    } else {\n        initDxLmsFeatures();\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-f8925d1 e-con-full e-flex e-con e-parent\" data-id=\"f8925d1\" 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-013d08a elementor-widget elementor-widget-html\" data-id=\"013d08a\" 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     LMS SERVICE PAGE \u2014 EDUCATIONAL PROJECTS SECTION\n     Author: Mohamed El-Sehemy\n     English LTR - Elementor Compatible\n========================================================== -->\n\n<style>\n.elementor-widget-html:has(#dx-lms-projects),\n.elementor-widget-html:has(#dx-lms-projects) > .elementor-widget-container,\n.dx-lms-projects-widget-fullwidth,\n.dx-lms-projects-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-lms-projects,\n#dx-lms-projects *,\n#dx-lms-projects *::before,\n#dx-lms-projects *::after {\n    box-sizing: border-box;\n}\n\n#dx-lms-projects {\n    --dx-project-dark: #0b0223;\n    --dx-project-dark-light: #18063d;\n    --dx-project-white: #ffffff;\n    --dx-project-text: rgba(255, 255, 255, 0.76);\n    --dx-project-muted: rgba(255, 255, 255, 0.55);\n    --dx-project-purple: #6942d8;\n    --dx-project-purple-light: #9168ef;\n    --dx-project-yellow: #ffc441;\n    --dx-project-yellow-light: #ffd66e;\n    --dx-project-green: #54d696;\n    --dx-project-border: rgba(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    direction: ltr;\n\n    color: var(--dx-project-white);\n\n    background:\n        radial-gradient(\n            circle at 8% 12%,\n            rgba(145, 104, 239, 0.22),\n            transparent 29%\n        ),\n        radial-gradient(\n            circle at 92% 88%,\n            rgba(105, 66, 216, 0.24),\n            transparent 31%\n        ),\n        linear-gradient(\n            145deg,\n            var(--dx-project-dark-light),\n            var(--dx-project-dark)\n        );\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-lms-projects a {\n    color: inherit;\n    text-decoration: none;\n}\n\n\/* Background *\/\n\n#dx-lms-projects .dx-projects-grid-bg {\n    position: absolute;\n    z-index: -5;\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 15%,\n            transparent 82%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 15%,\n            transparent 82%\n        );\n\n    pointer-events: none;\n}\n\n#dx-lms-projects .dx-projects-glow {\n    position: absolute;\n    z-index: -4;\n\n    border-radius: 50%;\n    filter: blur(90px);\n\n    pointer-events: none;\n}\n\n#dx-lms-projects .dx-projects-glow-one {\n    top: 12%;\n    right: 35%;\n\n    width: 330px;\n    height: 330px;\n\n    background: rgba(105, 66, 216, 0.18);\n}\n\n#dx-lms-projects .dx-projects-glow-two {\n    left: 4%;\n    bottom: -120px;\n\n    width: 380px;\n    height: 300px;\n\n    background: rgba(255, 196, 65, 0.06);\n}\n\n\/* Layout *\/\n\n#dx-lms-projects .dx-projects-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        92px\n        clamp(22px, 5vw, 90px)\n        98px;\n}\n\n#dx-lms-projects .dx-projects-container {\n    width: min(1450px, 100%);\n    margin: 0 auto;\n}\n\n\/* Header *\/\n\n#dx-lms-projects .dx-projects-header {\n    max-width: 850px;\n\n    margin: 0 auto 48px;\n\n    text-align: center;\n}\n\n#dx-lms-projects .dx-projects-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    margin-bottom: 11px;\n\n    color: var(--dx-project-yellow);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-lms-projects .dx-projects-eyebrow::before,\n#dx-lms-projects .dx-projects-eyebrow::after {\n    content: \"\";\n\n    width: 31px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-project-yellow),\n            var(--dx-project-purple-light)\n        );\n}\n\n#dx-lms-projects .dx-projects-title {\n    margin: 0;\n\n    color: var(--dx-project-white);\n\n    font-size: clamp(32px, 3.5vw, 49px);\n    font-weight: 900;\n    line-height: 1.55;\n    letter-spacing: -0.45px;\n\n    text-wrap: balance;\n}\n\n#dx-lms-projects .dx-projects-title span {\n    color: var(--dx-project-yellow);\n}\n\n#dx-lms-projects .dx-projects-description {\n    max-width: 700px;\n\n    margin: 13px auto 0;\n\n    color: var(--dx-project-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n\n    text-wrap: pretty;\n}\n\n\/* Grid *\/\n\n#dx-lms-projects .dx-projects-grid {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n\n    gap: 21px;\n}\n\n\/* Project card *\/\n\n#dx-lms-projects .dx-project-card {\n    position: relative;\n    isolation: isolate;\n\n    min-width: 0;\n\n    display: flex;\n    flex-direction: column;\n\n    overflow: hidden;\n\n    border: 1px solid var(--dx-project-border);\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.045)\n        );\n\n    box-shadow:\n        0 28px 65px rgba(2, 0, 20, 0.31),\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    transition:\n        transform 0.38s ease,\n        border-color 0.38s ease,\n        box-shadow 0.38s ease;\n}\n\n#dx-lms-projects .dx-project-card:hover,\n#dx-lms-projects .dx-project-card:focus-within {\n    border-color: rgba(145, 104, 239, 0.48);\n\n    box-shadow:\n        0 38px 78px rgba(2, 0, 20, 0.43),\n        inset 0 1px 0 rgba(255, 255, 255, 0.12);\n\n    transform: translateY(-7px);\n}\n\n#dx-lms-projects .dx-project-card::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    width: 280px;\n    height: 280px;\n\n    border-radius: 50%;\n    filter: blur(70px);\n\n    pointer-events: none;\n}\n\n#dx-lms-projects .dx-project-card-one::before {\n    top: -130px;\n    left: -100px;\n\n    background: rgba(105, 66, 216, 0.23);\n}\n\n#dx-lms-projects .dx-project-card-two::before {\n    right: -120px;\n    bottom: -130px;\n\n    background: rgba(255, 196, 65, 0.10);\n}\n\n\/* Visual *\/\n\n#dx-lms-projects .dx-project-visual {\n    position: relative;\n\n    min-height: 320px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    padding: 34px 28px;\n\n    overflow: hidden;\n\n    border-bottom: 1px solid rgba(255, 255, 255, 0.09);\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(105, 66, 216, 0.16),\n            rgba(255, 255, 255, 0.025)\n        );\n}\n\n#dx-lms-projects .dx-project-card-two .dx-project-visual {\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 196, 65, 0.10),\n            rgba(105, 66, 216, 0.08)\n        );\n}\n\n\/* Browser *\/\n\n#dx-lms-projects .dx-project-browser {\n    position: relative;\n    z-index: 3;\n\n    width: min(100%, 520px);\n    min-height: 245px;\n\n    overflow: hidden;\n\n    border: 1px solid rgba(255, 255, 255, 0.20);\n    border-radius: 20px;\n\n    background: #f8f6fc;\n\n    box-shadow:\n        0 27px 58px rgba(2, 0, 20, 0.38);\n\n    transform:\n        perspective(900px)\n        rotateY(3deg)\n        rotateX(1deg);\n\n    transition:\n        transform 0.45s ease,\n        box-shadow 0.45s ease;\n}\n\n#dx-lms-projects .dx-project-card:hover .dx-project-browser {\n    box-shadow:\n        0 34px 68px rgba(2, 0, 20, 0.47);\n\n    transform:\n        perspective(900px)\n        rotateY(0deg)\n        rotateX(0deg)\n        translateY(-4px);\n}\n\n#dx-lms-projects .dx-browser-top {\n    min-height: 38px;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    padding: 0 13px;\n\n    border-bottom: 1px solid rgba(105, 66, 216, 0.10);\n\n    background: #ffffff;\n}\n\n#dx-lms-projects .dx-browser-dots {\n    display: flex;\n    gap: 5px;\n}\n\n#dx-lms-projects .dx-browser-dot {\n    width: 7px;\n    height: 7px;\n\n    border-radius: 50%;\n\n    background: rgba(105, 66, 216, 0.30);\n}\n\n#dx-lms-projects .dx-browser-dot:nth-child(2) {\n    background: rgba(255, 196, 65, 0.85);\n}\n\n#dx-lms-projects .dx-browser-dot:nth-child(3) {\n    background: rgba(84, 214, 150, 0.80);\n}\n\n#dx-lms-projects .dx-browser-url {\n    width: 115px;\n    height: 7px;\n\n    border-radius: 999px;\n\n    background: rgba(22, 10, 49, 0.09);\n}\n\n#dx-lms-projects .dx-browser-body {\n    min-height: 207px;\n\n    display: grid;\n    grid-template-columns: 60px minmax(0, 1fr);\n}\n\n#dx-lms-projects .dx-browser-sidebar {\n    padding: 13px 9px;\n\n    display: grid;\n    align-content: start;\n\n    gap: 8px;\n\n    background:\n        linear-gradient(\n            180deg,\n            #17063c,\n            #0c0223\n        );\n}\n\n#dx-lms-projects .dx-browser-sidebar-item {\n    height: 27px;\n\n    border-radius: 7px;\n\n    background: rgba(255, 255, 255, 0.07);\n}\n\n#dx-lms-projects .dx-browser-sidebar-item:first-child {\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-project-yellow),\n            var(--dx-project-yellow-light)\n        );\n}\n\n#dx-lms-projects .dx-browser-content {\n    min-width: 0;\n\n    padding: 17px 15px;\n}\n\n#dx-lms-projects .dx-browser-heading {\n    width: 130px;\n    height: 12px;\n\n    border-radius: 4px;\n\n    background: #1a0c35;\n}\n\n#dx-lms-projects .dx-browser-copy {\n    width: 190px;\n    max-width: 80%;\n    height: 6px;\n\n    margin-top: 8px;\n\n    border-radius: 999px;\n\n    background: rgba(22, 10, 49, 0.11);\n}\n\n#dx-lms-projects .dx-browser-cards {\n    margin-top: 17px;\n\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n\n    gap: 9px;\n}\n\n#dx-lms-projects .dx-browser-card {\n    min-height: 91px;\n\n    padding: 10px;\n\n    border: 1px solid rgba(105, 66, 216, 0.09);\n    border-radius: 11px;\n\n    background: #ffffff;\n\n    box-shadow:\n        0 8px 18px rgba(40, 18, 84, 0.06);\n}\n\n#dx-lms-projects .dx-browser-card-image {\n    height: 42px;\n\n    border-radius: 8px;\n\n    background:\n        linear-gradient(\n            135deg,\n            rgba(105, 66, 216, 0.78),\n            rgba(145, 104, 239, 0.55)\n        );\n}\n\n#dx-lms-projects .dx-browser-card:nth-child(2)\n    .dx-browser-card-image {\n    background:\n        linear-gradient(\n            135deg,\n            rgba(255, 196, 65, 0.95),\n            rgba(255, 214, 110, 0.75)\n        );\n}\n\n#dx-lms-projects .dx-browser-card:nth-child(3)\n    .dx-browser-card-image {\n    background:\n        linear-gradient(\n            135deg,\n            rgba(84, 214, 150, 0.92),\n            rgba(138, 230, 185, 0.70)\n        );\n}\n\n#dx-lms-projects .dx-browser-card-line {\n    width: 84%;\n    height: 5px;\n\n    margin-top: 9px;\n\n    border-radius: 999px;\n\n    background: rgba(22, 10, 49, 0.13);\n}\n\n#dx-lms-projects .dx-browser-card-line:last-child {\n    width: 55%;\n\n    margin-top: 5px;\n\n    background: rgba(105, 66, 216, 0.10);\n}\n\n\/* Floating tags *\/\n\n#dx-lms-projects .dx-project-visual-tag {\n    position: absolute;\n    z-index: 5;\n\n    min-height: 39px;\n\n    display: inline-flex;\n    align-items: center;\n\n    gap: 7px;\n\n    padding: 0 12px;\n\n    border: 1px solid rgba(255, 255, 255, 0.17);\n    border-radius: 12px;\n\n    color: var(--dx-project-white);\n\n    background: rgba(16, 5, 45, 0.76);\n\n    box-shadow:\n        0 14px 30px rgba(2, 0, 20, 0.28);\n\n    -webkit-backdrop-filter: blur(10px);\n    backdrop-filter: blur(10px);\n\n    font-size: 14px;\n    font-weight: 900;\n\n    animation:\n        dxProjectTagFloat\n        5s\n        ease-in-out\n        infinite;\n}\n\n#dx-lms-projects .dx-project-visual-tag::before {\n    content: \"\";\n\n    width: 7px;\n    height: 7px;\n\n    border-radius: 50%;\n\n    background: var(--dx-project-yellow);\n\n    box-shadow:\n        0 0 0 4px rgba(255, 196, 65, 0.10);\n}\n\n#dx-lms-projects .dx-project-visual-tag-one {\n    top: 35px;\n    right: 17px;\n}\n\n#dx-lms-projects .dx-project-visual-tag-two {\n    left: 16px;\n    bottom: 35px;\n\n    animation-delay: -2.2s;\n}\n\n\/* Content *\/\n\n#dx-lms-projects .dx-project-content {\n    position: relative;\n    z-index: 3;\n\n    min-width: 0;\n\n    display: flex;\n    flex-direction: column;\n\n    padding: 31px 29px 32px;\n}\n\n#dx-lms-projects .dx-project-meta {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    gap: 8px;\n}\n\n#dx-lms-projects .dx-project-tag {\n    min-height: 30px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    padding: 0 12px;\n\n    border: 1px solid rgba(255, 255, 255, 0.13);\n    border-radius: 999px;\n\n    color: var(--dx-project-yellow);\n\n    background: rgba(255, 196, 65, 0.08);\n\n    font-size: 14px;\n    font-weight: 900;\n}\n\n#dx-lms-projects .dx-project-tag-secondary {\n    color: rgba(255, 255, 255, 0.68);\n\n    background: rgba(255, 255, 255, 0.055);\n}\n\n#dx-lms-projects .dx-project-name {\n    margin: 21px 0 0;\n\n    color: var(--dx-project-white);\n\n    font-size: 26px;\n    font-weight: 900;\n    line-height: 1.5;\n}\n\n#dx-lms-projects .dx-project-description {\n    margin: 10px 0 0;\n\n    color: var(--dx-project-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.95;\n}\n\n#dx-lms-projects .dx-project-features {\n    margin-top: 21px;\n\n    display: grid;\n\n    gap: 10px;\n}\n\n#dx-lms-projects .dx-project-feature {\n    display: flex;\n    align-items: flex-start;\n\n    gap: 9px;\n\n    color: var(--dx-project-muted);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.7;\n}\n\n#dx-lms-projects .dx-project-feature::before {\n    content: \"\";\n\n    width: 6px;\n    height: 6px;\n    flex: 0 0 6px;\n\n    margin-top: 6px;\n\n    border-radius: 50%;\n\n    background: var(--dx-project-yellow);\n\n    box-shadow:\n        0 0 0 4px rgba(255, 196, 65, 0.09);\n}\n\n#dx-lms-projects .dx-project-link {\n    width: fit-content;\n\n    margin-top: 24px;\n\n    display: inline-flex;\n    align-items: center;\n\n    gap: 9px;\n\n    color: var(--dx-project-white);\n\n    font-size: 14px;\n    font-weight: 900;\n\n    transition:\n        color 0.25s ease,\n        gap 0.25s ease;\n}\n\n#dx-lms-projects .dx-project-link:hover,\n#dx-lms-projects .dx-project-link:focus-visible {\n    gap: 14px;\n\n    color: var(--dx-project-yellow);\n}\n\n#dx-lms-projects .dx-project-link svg {\n    width: 18px;\n    height: 18px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* Bottom *\/\n\n#dx-lms-projects .dx-projects-bottom {\n    margin-top: 26px;\n\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) auto;\n\n    align-items: center;\n\n    gap: 25px;\n\n    padding: 22px 25px;\n\n    border: 1px solid rgba(255, 255, 255, 0.13);\n    border-radius: 19px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.09),\n            rgba(255, 255, 255, 0.04)\n        );\n\n    box-shadow:\n        0 18px 40px rgba(2, 0, 20, 0.21);\n\n    -webkit-backdrop-filter: blur(11px);\n    backdrop-filter: blur(11px);\n}\n\n#dx-lms-projects .dx-projects-bottom-title {\n    margin: 0;\n\n    color: var(--dx-project-white);\n\n    font-size: 16px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-lms-projects .dx-projects-bottom-text {\n    margin: 5px 0 0;\n\n    color: var(--dx-project-muted);\n\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1.8;\n}\n\n#dx-lms-projects .dx-projects-button {\n    min-width: 195px;\n    min-height: 49px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 9px;\n\n    padding: 0 20px;\n\n    border: 1px solid rgba(255, 255, 255, 0.22);\n    border-radius: 12px;\n\n    color: #180b35;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-project-yellow),\n            var(--dx-project-yellow-light)\n        );\n\n    box-shadow:\n        0 15px 32px rgba(255, 196, 65, 0.20);\n\n    font-size: 14px;\n    font-weight: 900;\n\n    transition:\n        transform 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-lms-projects .dx-projects-button:hover,\n#dx-lms-projects .dx-projects-button:focus-visible {\n    box-shadow:\n        0 21px 42px rgba(255, 196, 65, 0.29);\n\n    transform: translateY(-3px);\n}\n\n#dx-lms-projects .dx-projects-button svg {\n    width: 17px;\n    height: 17px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n@keyframes dxProjectTagFloat {\n    0%,\n    100% {\n        transform: translateY(0);\n    }\n\n    50% {\n        transform: translateY(-8px);\n    }\n}\n\n\/* Tablet *\/\n\n@media (max-width: 900px) {\n    #dx-lms-projects .dx-projects-main {\n        padding: 76px 28px 82px;\n    }\n\n    #dx-lms-projects .dx-projects-grid {\n        grid-template-columns: 1fr;\n    }\n\n    #dx-lms-projects .dx-project-visual {\n        min-height: 340px;\n    }\n}\n\n\/* Mobile *\/\n\n@media (max-width: 600px) {\n    #dx-lms-projects .dx-projects-main {\n        padding: 59px 16px 65px;\n    }\n\n    #dx-lms-projects .dx-projects-header {\n        margin-bottom: 31px;\n    }\n\n    #dx-lms-projects .dx-projects-eyebrow {\n        font-size: 14px;\n    }\n\n    #dx-lms-projects .dx-projects-eyebrow::before,\n    #dx-lms-projects .dx-projects-eyebrow::after {\n        width: 22px;\n    }\n\n    #dx-lms-projects .dx-projects-title {\n        font-size: clamp(27px, 8.3vw, 36px);\n        line-height: 1.65;\n    }\n\n    #dx-lms-projects .dx-projects-description {\n        font-size: 14px;\n    }\n\n    #dx-lms-projects .dx-project-card {\n        border-radius: 20px;\n    }\n\n    #dx-lms-projects .dx-project-visual {\n        min-height: 285px;\n\n        padding: 26px 17px;\n    }\n\n    #dx-lms-projects .dx-project-browser {\n        min-height: 215px;\n\n        border-radius: 16px;\n    }\n\n    #dx-lms-projects .dx-browser-body {\n        min-height: 177px;\n\n        grid-template-columns: 45px minmax(0, 1fr);\n    }\n\n    #dx-lms-projects .dx-browser-sidebar {\n        padding: 10px 6px;\n\n        gap: 6px;\n    }\n\n    #dx-lms-projects .dx-browser-sidebar-item {\n        height: 22px;\n    }\n\n    #dx-lms-projects .dx-browser-content {\n        padding: 13px 10px;\n    }\n\n    #dx-lms-projects .dx-browser-cards {\n        gap: 5px;\n    }\n\n    #dx-lms-projects .dx-browser-card {\n        min-height: 75px;\n\n        padding: 6px;\n    }\n\n    #dx-lms-projects .dx-browser-card-image {\n        height: 34px;\n    }\n\n    #dx-lms-projects .dx-project-content {\n        padding: 22px 18px 25px;\n    }\n\n    #dx-lms-projects .dx-project-name {\n        margin-top: 17px;\n\n        font-size: 21px;\n    }\n\n    #dx-lms-projects .dx-project-description {\n        font-size: 14px;\n    }\n\n    #dx-lms-projects .dx-project-feature {\n        font-size: 14px;\n    }\n\n    #dx-lms-projects .dx-projects-bottom {\n        grid-template-columns: 1fr;\n\n        gap: 15px;\n\n        padding: 19px 16px;\n\n        text-align: center;\n    }\n\n    #dx-lms-projects .dx-projects-button {\n        width: 100%;\n    }\n}\n\n\/* Accessibility *\/\n\n#dx-lms-projects a:focus-visible {\n    outline: 3px solid var(--dx-project-yellow);\n    outline-offset: 4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    #dx-lms-projects *,\n    #dx-lms-projects *::before,\n    #dx-lms-projects *::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-lms-projects\"\n    aria-labelledby=\"dx-lms-projects-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n    <div\n        class=\"dx-projects-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <span\n        class=\"dx-projects-glow dx-projects-glow-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-projects-glow dx-projects-glow-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-projects-main\">\n\n        <div class=\"dx-projects-container\">\n\n            <header class=\"dx-projects-header\">\n\n                <span class=\"dx-projects-eyebrow\">\n                    Experience Turned Into Real Learning Platforms\n                <\/span>\n\n                <h2\n                    id=\"dx-lms-projects-title\"\n                    class=\"dx-projects-title\"\n                >\n                    Selected\n                    <span>Educational Projects<\/span>\n                <\/h2>\n\n                <p class=\"dx-projects-description\">\n                    Explore examples of educational platforms we designed\n                    and developed to deliver learning content, manage courses\n                    and users, and create structured, responsive learning\n                    experiences.\n                <\/p>\n\n            <\/header>\n\n            <div class=\"dx-projects-grid\">\n\n                <!-- ACADEMO -->\n\n                <article class=\"dx-project-card dx-project-card-one\">\n\n                    <div\n                        class=\"dx-project-visual\"\n                        aria-hidden=\"true\"\n                    >\n\n                        <span class=\"dx-project-visual-tag dx-project-visual-tag-one\">\n                            Academic Programs\n                        <\/span>\n\n                        <span class=\"dx-project-visual-tag dx-project-visual-tag-two\">\n                            Student Experience\n                        <\/span>\n\n                        <div class=\"dx-project-browser\">\n\n                            <div class=\"dx-browser-top\">\n\n                                <span class=\"dx-browser-dots\">\n                                    <span class=\"dx-browser-dot\"><\/span>\n                                    <span class=\"dx-browser-dot\"><\/span>\n                                    <span class=\"dx-browser-dot\"><\/span>\n                                <\/span>\n\n                                <span class=\"dx-browser-url\"><\/span>\n\n                            <\/div>\n\n                            <div class=\"dx-browser-body\">\n\n                                <div class=\"dx-browser-sidebar\">\n                                    <span class=\"dx-browser-sidebar-item\"><\/span>\n                                    <span class=\"dx-browser-sidebar-item\"><\/span>\n                                    <span class=\"dx-browser-sidebar-item\"><\/span>\n                                    <span class=\"dx-browser-sidebar-item\"><\/span>\n                                    <span class=\"dx-browser-sidebar-item\"><\/span>\n                                <\/div>\n\n                                <div class=\"dx-browser-content\">\n\n                                    <div class=\"dx-browser-heading\"><\/div>\n                                    <div class=\"dx-browser-copy\"><\/div>\n\n                                    <div class=\"dx-browser-cards\">\n\n                                        <div class=\"dx-browser-card\">\n                                            <div class=\"dx-browser-card-image\"><\/div>\n                                            <div class=\"dx-browser-card-line\"><\/div>\n                                            <div class=\"dx-browser-card-line\"><\/div>\n                                        <\/div>\n\n                                        <div class=\"dx-browser-card\">\n                                            <div class=\"dx-browser-card-image\"><\/div>\n                                            <div class=\"dx-browser-card-line\"><\/div>\n                                            <div class=\"dx-browser-card-line\"><\/div>\n                                        <\/div>\n\n                                        <div class=\"dx-browser-card\">\n                                            <div class=\"dx-browser-card-image\"><\/div>\n                                            <div class=\"dx-browser-card-line\"><\/div>\n                                            <div class=\"dx-browser-card-line\"><\/div>\n                                        <\/div>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <div class=\"dx-project-content\">\n\n                        <div class=\"dx-project-meta\">\n\n                            <span class=\"dx-project-tag\">\n                                School Learning Platform\n                            <\/span>\n\n                            <span class=\"dx-project-tag dx-project-tag-secondary\">\n                                Academo\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-project-name\">\n                            Academo Learning Platform\n                        <\/h3>\n\n                        <p class=\"dx-project-description\">\n                            An educational platform offering academic programs\n                            and learning materials for students from Grade 6\n                            through Grade 12, with an organized experience that\n                            helps learners explore the subjects and programs\n                            relevant to their stage.\n                        <\/p>\n\n                        <div class=\"dx-project-features\">\n\n                            <span class=\"dx-project-feature\">\n                                Organized Academic Subjects and Programs\n                            <\/span>\n\n                            <span class=\"dx-project-feature\">\n                                Learning Paths for Multiple Grade Levels\n                            <\/span>\n\n                            <span class=\"dx-project-feature\">\n                                Responsive Learning Experience\n                            <\/span>\n\n                        <\/div>\n\n                        <a\n                            href=\"https:\/\/academo.academy\/\"\n                            target=\"_blank\"\n                            rel=\"noopener noreferrer\"\n                            class=\"dx-project-link\"\n                            aria-label=\"Visit the Academo learning platform\"\n                        >\n                            <span>Visit Project<\/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                <\/article>\n\n                <!-- OBOOOR -->\n\n                <article class=\"dx-project-card dx-project-card-two\">\n\n                    <div\n                        class=\"dx-project-visual\"\n                        aria-hidden=\"true\"\n                    >\n\n                        <span class=\"dx-project-visual-tag dx-project-visual-tag-one\">\n                            Training Courses\n                        <\/span>\n\n                        <span class=\"dx-project-visual-tag dx-project-visual-tag-two\">\n                            Professional Certification\n                        <\/span>\n\n                        <div class=\"dx-project-browser\">\n\n                            <div class=\"dx-browser-top\">\n\n                                <span class=\"dx-browser-dots\">\n                                    <span class=\"dx-browser-dot\"><\/span>\n                                    <span class=\"dx-browser-dot\"><\/span>\n                                    <span class=\"dx-browser-dot\"><\/span>\n                                <\/span>\n\n                                <span class=\"dx-browser-url\"><\/span>\n\n                            <\/div>\n\n                            <div class=\"dx-browser-body\">\n\n                                <div class=\"dx-browser-sidebar\">\n                                    <span class=\"dx-browser-sidebar-item\"><\/span>\n                                    <span class=\"dx-browser-sidebar-item\"><\/span>\n                                    <span class=\"dx-browser-sidebar-item\"><\/span>\n                                    <span class=\"dx-browser-sidebar-item\"><\/span>\n                                    <span class=\"dx-browser-sidebar-item\"><\/span>\n                                <\/div>\n\n                                <div class=\"dx-browser-content\">\n\n                                    <div class=\"dx-browser-heading\"><\/div>\n                                    <div class=\"dx-browser-copy\"><\/div>\n\n                                    <div class=\"dx-browser-cards\">\n\n                                        <div class=\"dx-browser-card\">\n                                            <div class=\"dx-browser-card-image\"><\/div>\n                                            <div class=\"dx-browser-card-line\"><\/div>\n                                            <div class=\"dx-browser-card-line\"><\/div>\n                                        <\/div>\n\n                                        <div class=\"dx-browser-card\">\n                                            <div class=\"dx-browser-card-image\"><\/div>\n                                            <div class=\"dx-browser-card-line\"><\/div>\n                                            <div class=\"dx-browser-card-line\"><\/div>\n                                        <\/div>\n\n                                        <div class=\"dx-browser-card\">\n                                            <div class=\"dx-browser-card-image\"><\/div>\n                                            <div class=\"dx-browser-card-line\"><\/div>\n                                            <div class=\"dx-browser-card-line\"><\/div>\n                                        <\/div>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <div class=\"dx-project-content\">\n\n                        <div class=\"dx-project-meta\">\n\n                            <span class=\"dx-project-tag\">\n                                Professional Training Platform\n                            <\/span>\n\n                            <span class=\"dx-project-tag dx-project-tag-secondary\">\n                                Obooor\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-project-name\">\n                            Obooor Learning Platform\n                        <\/h3>\n\n                        <p class=\"dx-project-description\">\n                            An education and training platform offering courses\n                            and programs that help learners develop their skills\n                            and prepare for professional certification, with\n                            online registration and course purchasing.\n                        <\/p>\n\n                        <div class=\"dx-project-features\">\n\n                            <span class=\"dx-project-feature\">\n                                Training Course Management and Sales\n                            <\/span>\n\n                            <span class=\"dx-project-feature\">\n                                Student Accounts and Subscription Management\n                            <\/span>\n\n                            <span class=\"dx-project-feature\">\n                                Professional Certification Courses and Materials\n                            <\/span>\n\n                        <\/div>\n\n                        <a\n                            href=\"https:\/\/obooor.com\/\"\n                            target=\"_blank\"\n                            rel=\"noopener noreferrer\"\n                            class=\"dx-project-link\"\n                            aria-label=\"Visit the Obooor learning platform\"\n                        >\n                            <span>Visit Project<\/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                <\/article>\n\n            <\/div>\n\n            <div class=\"dx-projects-bottom\">\n\n                <div>\n\n                    <h3 class=\"dx-projects-bottom-title\">\n                        Explore More Projects We Have Delivered\n                    <\/h3>\n\n                    <p class=\"dx-projects-bottom-text\">\n                        View additional websites and digital platforms\n                        designed and developed for different industries,\n                        audiences, and business requirements.\n                    <\/p>\n\n                <\/div>\n\n                <a\n                    href=\"https:\/\/dindex.net\/en\/web-projects\/\"\n                    class=\"dx-projects-button\"\n                >\n                    <span>View All Projects<\/span>\n\n                    <svg\n                        viewBox=\"0 0 24 24\"\n                        aria-hidden=\"true\"\n                    >\n                        <path d=\"M5 12h14\"><\/path>\n                        <path d=\"m13 6 6 6-6 6\"><\/path>\n                    <\/svg>\n                <\/a>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxLmsProjects() {\n        const section = document.getElementById(\n            \"dx-lms-projects\"\n        );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized = \"true\";\n\n        const widget = section.closest(\n            \".elementor-widget-html\"\n        );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-lms-projects-widget-fullwidth\"\n            );\n        }\n\n        if (\n            !(\"IntersectionObserver\" in window) ||\n            window.matchMedia(\n                \"(prefers-reduced-motion: reduce)\"\n            ).matches\n        ) {\n            return;\n        }\n\n        const cards = section.querySelectorAll(\n            \".dx-project-card\"\n        );\n\n        cards.forEach(function (card, index) {\n            card.style.opacity = \"0\";\n            card.style.transform = \"translateY(27px)\";\n\n            card.style.transition =\n                \"opacity 0.62s ease \" +\n                index * 0.12 +\n                \"s, transform 0.62s ease \" +\n                index * 0.12 +\n                \"s, border-color 0.38s ease, box-shadow 0.38s ease\";\n        });\n\n        const observer = new IntersectionObserver(\n            function (entries, currentObserver) {\n                entries.forEach(function (entry) {\n                    if (!entry.isIntersecting) {\n                        return;\n                    }\n\n                    entry.target.style.opacity = \"1\";\n                    entry.target.style.transform = \"translateY(0)\";\n\n                    currentObserver.unobserve(\n                        entry.target\n                    );\n                });\n            },\n            {\n                threshold: 0.13\n            }\n        );\n\n        cards.forEach(function (card) {\n            observer.observe(card);\n        });\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxLmsProjects\n        );\n    } else {\n        initDxLmsProjects();\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-2b10c4d e-con-full e-flex e-con e-parent\" data-id=\"2b10c4d\" 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-00a248c elementor-widget elementor-widget-html\" data-id=\"00a248c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- =========================================================\n     HOME TESTIMONIALS SECTION\n     Author: Mohamed El-Sehemy\n     Video + Text Testimonials\n     English LTR - Elementor Compatible\n========================================================== -->\n\n<style>\n\/* =========================================================\n   ELEMENTOR FULL WIDTH\n========================================================= *\/\n\n.elementor-widget-html:has(#dx-home-testimonials),\n.elementor-widget-html:has(#dx-home-testimonials) > .elementor-widget-container,\n.dx-testimonials-widget-fullwidth,\n.dx-testimonials-widget-fullwidth > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n\/* =========================================================\n   RESET\n========================================================= *\/\n\n#dx-home-testimonials,\n#dx-home-testimonials *,\n#dx-home-testimonials *::before,\n#dx-home-testimonials *::after {\n    box-sizing: border-box;\n}\n\n#dx-home-testimonials {\n    --dx-purple: #6942d8;\n    --dx-purple-light: #9168ef;\n    --dx-yellow: #ffc441;\n    --dx-dark: #160a31;\n    --dx-text: #625c6f;\n    --dx-muted: #85808e;\n    --dx-white: #ffffff;\n    --dx-bg: #f8f7fc;\n    --dx-border: rgba(105, 66, 216, 0.13);\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n\n    direction: ltr;\n\n    color: var(--dx-dark);\n\n    background:\n        radial-gradient(\n            circle at 8% 10%,\n            rgba(105, 66, 216, 0.075),\n            transparent 25%\n        ),\n        radial-gradient(\n            circle at 92% 92%,\n            rgba(145, 104, 239, 0.065),\n            transparent 28%\n        ),\n        var(--dx-bg);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-home-testimonials button {\n    font: inherit;\n}\n\n\/* =========================================================\n   DECORATIONS\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-orbit {\n    position: absolute;\n    z-index: -3;\n\n    border: 1px solid rgba(105, 66, 216, 0.10);\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-home-testimonials .dx-test-orbit-one {\n    top: -210px;\n    left: -180px;\n\n    width: 430px;\n    height: 430px;\n}\n\n#dx-home-testimonials .dx-test-orbit-two {\n    right: -190px;\n    bottom: -250px;\n\n    width: 480px;\n    height: 480px;\n}\n\n#dx-home-testimonials .dx-test-dots {\n    position: absolute;\n    z-index: -2;\n\n    width: 120px;\n    height: 120px;\n\n    opacity: 0.23;\n\n    background-image:\n        radial-gradient(\n            circle,\n            var(--dx-purple-light) 2px,\n            transparent 2.7px\n        );\n\n    background-size: 17px 17px;\n\n    pointer-events: none;\n}\n\n#dx-home-testimonials .dx-test-dots-one {\n    top: 70px;\n    right: 4%;\n}\n\n#dx-home-testimonials .dx-test-dots-two {\n    left: 3%;\n    bottom: 50px;\n}\n\n\/* =========================================================\n   SECTION LAYOUT\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        90px\n        clamp(22px, 5vw, 90px)\n        88px;\n}\n\n#dx-home-testimonials .dx-test-container {\n    width: min(1450px, 100%);\n    margin: 0 auto;\n}\n\n\/* =========================================================\n   MAIN HEADER\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-header {\n    max-width: 800px;\n\n    margin: 0 auto 48px;\n\n    text-align: center;\n}\n\n#dx-home-testimonials .dx-test-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    margin-bottom: 11px;\n\n    color: var(--dx-purple);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.6;\n}\n\n#dx-home-testimonials .dx-test-eyebrow::before,\n#dx-home-testimonials .dx-test-eyebrow::after {\n    content: \"\";\n\n    width: 31px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-yellow),\n            var(--dx-purple-light)\n        );\n}\n\n#dx-home-testimonials .dx-test-title {\n    margin: 0;\n\n    color: var(--dx-dark);\n\n    font-size: clamp(35px, 3.7vw, 56px);\n    font-weight: 900;\n    line-height: 1.25;\n    letter-spacing: -1px;\n}\n\n#dx-home-testimonials .dx-test-description {\n    max-width: 700px;\n\n    margin: 15px auto 0;\n\n    color: var(--dx-text);\n\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.8;\n}\n\n\/* =========================================================\n   VIDEO TESTIMONIALS\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-video-grid {\n    width: min(1200px, 100%);\n\n    margin: 0 auto 62px;\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(2, minmax(0, 1fr));\n\n    gap: 25px;\n}\n\n#dx-home-testimonials .dx-test-video-card {\n    position: relative;\n    isolation: isolate;\n\n    width: 100%;\n    aspect-ratio: 16 \/ 9;\n\n    padding: 0;\n\n    overflow: hidden;\n\n    border: 1px solid rgba(105, 66, 216, 0.12);\n    border-radius: 22px;\n\n    background: #13082f;\n\n    box-shadow:\n        0 24px 55px rgba(31, 13, 70, 0.18);\n\n    cursor: pointer;\n\n    transition:\n        transform 0.35s ease,\n        box-shadow 0.35s ease,\n        border-color 0.35s ease;\n}\n\n#dx-home-testimonials .dx-test-video-card:hover,\n#dx-home-testimonials .dx-test-video-card:focus-visible {\n    border-color: rgba(105, 66, 216, 0.40);\n\n    box-shadow:\n        0 32px 70px rgba(31, 13, 70, 0.25);\n\n    transform: translateY(-7px);\n}\n\n#dx-home-testimonials .dx-test-video-image {\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n    object-position: center;\n\n    transition:\n        transform 0.55s ease,\n        filter 0.55s ease;\n}\n\n#dx-home-testimonials .dx-test-video-card:hover .dx-test-video-image {\n    transform: scale(1.045);\n\n    filter: brightness(0.82);\n}\n\n#dx-home-testimonials .dx-test-video-overlay {\n    position: absolute;\n    z-index: 2;\n\n    inset: 0;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    background:\n        linear-gradient(\n            180deg,\n            rgba(13, 4, 37, 0.08),\n            rgba(13, 4, 37, 0.35)\n        );\n}\n\n#dx-home-testimonials .dx-test-play {\n    position: relative;\n\n    width: 82px;\n    height: 82px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid rgba(255, 255, 255, 0.55);\n    border-radius: 50%;\n\n    color: var(--dx-white);\n\n    background:\n        linear-gradient(\n            135deg,\n            rgba(105, 66, 216, 0.96),\n            rgba(145, 104, 239, 0.96)\n        );\n\n    box-shadow:\n        0 18px 42px rgba(58, 26, 132, 0.40);\n\n    transition:\n        transform 0.3s ease,\n        box-shadow 0.3s ease;\n}\n\n#dx-home-testimonials .dx-test-play::before {\n    content: \"\";\n\n    position: absolute;\n\n    inset: -12px;\n\n    border: 1px solid rgba(255, 255, 255, 0.27);\n    border-radius: 50%;\n\n    animation:\n        dxTestPulse\n        2.2s\n        ease-out\n        infinite;\n}\n\n#dx-home-testimonials .dx-test-video-card:hover .dx-test-play {\n    transform: scale(1.08);\n\n    box-shadow:\n        0 23px 50px rgba(58, 26, 132, 0.52);\n}\n\n#dx-home-testimonials .dx-test-play svg {\n    width: 31px;\n    height: 31px;\n\n    fill: currentColor;\n\n    transform: translateX(2px);\n}\n\n@keyframes dxTestPulse {\n\n    0% {\n        opacity: 0.75;\n\n        transform: scale(0.88);\n    }\n\n    100% {\n        opacity: 0;\n\n        transform: scale(1.35);\n    }\n}\n\n#dx-home-testimonials .dx-test-video-badge {\n    position: absolute;\n    z-index: 3;\n\n    left: 18px;\n    bottom: 17px;\n\n    display: inline-flex;\n    align-items: center;\n\n    gap: 7px;\n\n    padding:\n        8px\n        12px;\n\n    border:\n        1px solid rgba(255, 255, 255, 0.16);\n\n    border-radius:\n        999px;\n\n    color:\n        var(--dx-white);\n\n    background:\n        rgba(13, 4, 37, 0.70);\n\n    -webkit-backdrop-filter:\n        blur(12px);\n\n    backdrop-filter:\n        blur(12px);\n\n    font-size:\n        12px;\n\n    font-weight:\n        700;\n\n    line-height:\n        1.4;\n}\n\n#dx-home-testimonials .dx-test-video-badge svg {\n    width: 15px;\n    height: 15px;\n\n    fill: currentColor;\n}\n\n\/* =========================================================\n   TEXT TESTIMONIALS HEADER\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-text-section {\n    position: relative;\n\n    width: 100%;\n}\n\n#dx-home-testimonials .dx-test-subheader {\n    max-width: 720px;\n\n    margin: 0 auto 30px;\n\n    text-align: center;\n}\n\n#dx-home-testimonials .dx-test-subtitle {\n    margin: 0;\n\n    color: var(--dx-dark);\n\n    font-size:\n        clamp(\n            25px,\n            2.4vw,\n            36px\n        );\n\n    font-weight: 900;\n    line-height: 1.3;\n}\n\n#dx-home-testimonials .dx-test-subdescription {\n    margin: 9px auto 0;\n\n    color: var(--dx-muted);\n\n    font-size: 15px;\n    font-weight: 400;\n    line-height: 1.75;\n}\n\n\/* =========================================================\n   SLIDER\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-slider {\n    position: relative;\n\n    width: 100%;\n\n    padding:\n        0\n        58px;\n}\n\n#dx-home-testimonials .dx-test-viewport {\n    width: 100%;\n\n    overflow: hidden;\n}\n\n#dx-home-testimonials .dx-test-track {\n    display: flex;\n\n    direction: ltr;\n\n    transition:\n        transform\n        1.05s\n        cubic-bezier(\n            0.22,\n            0.61,\n            0.36,\n            1\n        );\n\n    will-change: transform;\n}\n\n#dx-home-testimonials .dx-test-slide {\n    flex:\n        0\n        0\n        50%;\n\n    min-width: 0;\n\n    padding: 12px;\n}\n\n\/* =========================================================\n   REVIEW CARD\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-card {\n    position: relative;\n\n    height: 100%;\n    min-height: 320px;\n\n    padding:\n        31px\n        30px\n        28px;\n\n    display: flex;\n    flex-direction: column;\n\n    overflow: hidden;\n\n    border:\n        1px solid var(--dx-border);\n\n    border-radius:\n        21px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.98),\n            rgba(252, 250, 255, 0.96)\n        );\n\n    box-shadow:\n        0 20px 48px rgba(42, 20, 88, 0.09);\n\n    transition:\n        transform 0.3s ease,\n        box-shadow 0.3s ease,\n        border-color 0.3s ease;\n}\n\n#dx-home-testimonials .dx-test-card:hover {\n    border-color:\n        rgba(105, 66, 216, 0.28);\n\n    box-shadow:\n        0 27px 58px rgba(42, 20, 88, 0.14);\n\n    transform:\n        translateY(-5px);\n}\n\n#dx-home-testimonials .dx-test-quote-icon {\n    position: absolute;\n\n    top: 22px;\n    right: 24px;\n\n    width: 54px;\n    height: 54px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 17px;\n\n    color: var(--dx-purple);\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(105, 66, 216, 0.12),\n            rgba(145, 104, 239, 0.055)\n        );\n}\n\n#dx-home-testimonials .dx-test-quote-icon svg {\n    width: 27px;\n    height: 27px;\n\n    fill: currentColor;\n}\n\n#dx-home-testimonials .dx-test-stars {\n    display: flex;\n    align-items: center;\n\n    gap: 3px;\n\n    margin-bottom: 22px;\n\n    color: var(--dx-yellow);\n\n    font-size: 17px;\n    line-height: 1;\n}\n\n#dx-home-testimonials .dx-test-review {\n    flex-grow: 1;\n\n    margin: 0;\n\n    padding-right: 82px;\n\n    color: var(--dx-text);\n\n    font-size: 15px;\n    font-weight: 400;\n    line-height: 1.9;\n}\n\n#dx-home-testimonials .dx-test-person {\n    margin-top: 27px;\n\n    padding-top: 21px;\n\n    display: flex;\n    align-items: center;\n\n    gap: 13px;\n\n    border-top:\n        1px solid rgba(105, 66, 216, 0.10);\n}\n\n#dx-home-testimonials .dx-test-avatar {\n    width: 54px;\n    height: 54px;\n    flex: 0 0 54px;\n\n    overflow: hidden;\n\n    border:\n        3px solid rgba(105, 66, 216, 0.11);\n\n    border-radius: 50%;\n\n    background: #eeeaf7;\n}\n\n#dx-home-testimonials .dx-test-avatar img {\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n    object-position: center;\n}\n\n#dx-home-testimonials .dx-test-person-info {\n    min-width: 0;\n\n    display: flex;\n    flex-direction: column;\n\n    text-align: left;\n}\n\n#dx-home-testimonials .dx-test-person-name {\n    color: var(--dx-dark);\n\n    font-size: 15px;\n    font-weight: 800;\n    line-height: 1.5;\n}\n\n#dx-home-testimonials .dx-test-person-company {\n    margin-top: 3px;\n\n    color: var(--dx-muted);\n\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 1.5;\n}\n\n\/* =========================================================\n   SLIDER ARROWS\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-arrow {\n    position: absolute;\n    z-index: 10;\n\n    top: 50%;\n\n    width: 46px;\n    height: 46px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    padding: 0;\n\n    border:\n        1px solid rgba(105, 66, 216, 0.14);\n\n    border-radius: 50%;\n\n    color: var(--dx-purple);\n\n    background:\n        var(--dx-white);\n\n    box-shadow:\n        0 14px 30px rgba(41, 19, 87, 0.14);\n\n    cursor: pointer;\n\n    transform:\n        translateY(-50%);\n\n    transition:\n        color 0.25s ease,\n        background 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-home-testimonials .dx-test-arrow:hover,\n#dx-home-testimonials .dx-test-arrow:focus-visible {\n    color: var(--dx-white);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-purple),\n            var(--dx-purple-light)\n        );\n\n    box-shadow:\n        0 18px 38px rgba(105, 66, 216, 0.28);\n}\n\n#dx-home-testimonials .dx-test-arrow-prev {\n    left: 0;\n}\n\n#dx-home-testimonials .dx-test-arrow-next {\n    right: 0;\n}\n\n#dx-home-testimonials .dx-test-arrow svg {\n    width: 20px;\n    height: 20px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   PAGINATION\n========================================================= *\/\n\n#dx-home-testimonials .dx-test-pagination {\n    margin-top: 24px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 8px;\n}\n\n#dx-home-testimonials .dx-test-dot {\n    width: 8px;\n    height: 8px;\n\n    padding: 0;\n\n    border: 0;\n    border-radius: 999px;\n\n    background:\n        rgba(105, 66, 216, 0.20);\n\n    cursor: pointer;\n\n    transition:\n        width 0.25s ease,\n        background 0.25s ease;\n}\n\n#dx-home-testimonials .dx-test-dot.is-active {\n    width: 28px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-purple),\n            var(--dx-purple-light)\n        );\n}\n\n\/* =========================================================\n   VIDEO MODAL\n========================================================= *\/\n\n.dx-test-modal {\n    position: fixed;\n    z-index: 999999;\n\n    inset: 0;\n\n    display: none;\n    align-items: center;\n    justify-content: center;\n\n    padding:\n        70px\n        28px\n        28px;\n\n    background:\n        rgba(5, 0, 20, 0.92);\n\n    -webkit-backdrop-filter:\n        blur(10px);\n\n    backdrop-filter:\n        blur(10px);\n}\n\n.dx-test-modal.is-open {\n    display: flex;\n\n    animation:\n        dxTestModalFade\n        0.25s\n        ease\n        both;\n}\n\n@keyframes dxTestModalFade {\n\n    from {\n        opacity: 0;\n    }\n\n    to {\n        opacity: 1;\n    }\n}\n\n.dx-test-modal-dialog {\n    position: relative;\n\n    width:\n        min(\n            1200px,\n            100%\n        );\n\n    aspect-ratio:\n        16 \/ 9;\n\n    overflow: hidden;\n\n    border:\n        1px solid rgba(255, 255, 255, 0.15);\n\n    border-radius:\n        20px;\n\n    background:\n        #000000;\n\n    box-shadow:\n        0 35px 100px rgba(0, 0, 0, 0.60);\n\n    animation:\n        dxTestModalScale\n        0.3s\n        ease\n        both;\n}\n\n@keyframes dxTestModalScale {\n\n    from {\n        opacity: 0;\n\n        transform:\n            scale(0.94)\n            translateY(10px);\n    }\n\n    to {\n        opacity: 1;\n\n        transform:\n            scale(1)\n            translateY(0);\n    }\n}\n\n.dx-test-modal-video {\n    width: 100%;\n    height: 100%;\n}\n\n.dx-test-modal-video iframe {\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    border: 0;\n}\n\n\/* =========================================================\n   VIDEO MODAL CLOSE BUTTON\n========================================================= *\/\n\n.dx-test-modal-close {\n    position:\n        fixed !important;\n\n    z-index:\n        2147483647 !important;\n\n    top:\n        22px !important;\n\n    right:\n        24px !important;\n\n    width:\n        48px !important;\n\n    height:\n        48px !important;\n\n    display:\n        flex !important;\n\n    align-items:\n        center !important;\n\n    justify-content:\n        center !important;\n\n    margin:\n        0 !important;\n\n    padding:\n        0 !important;\n\n    border:\n        1px solid rgba(255, 255, 255, 0.35) !important;\n\n    border-radius:\n        14px !important;\n\n    background:\n        linear-gradient(\n            135deg,\n            #6942d8,\n            #9168ef\n        ) !important;\n\n    box-shadow:\n        0 12px 30px rgba(0, 0, 0, 0.38) !important;\n\n    cursor:\n        pointer !important;\n\n    appearance:\n        none !important;\n\n    -webkit-appearance:\n        none !important;\n\n    opacity:\n        1 !important;\n\n    visibility:\n        visible !important;\n\n    transition:\n        transform 0.25s ease,\n        background 0.25s ease,\n        box-shadow 0.25s ease !important;\n}\n\n.dx-test-modal-close::before,\n.dx-test-modal-close::after {\n    content:\n        \"\" !important;\n\n    position:\n        absolute !important;\n\n    top:\n        50% !important;\n\n    left:\n        50% !important;\n\n    width:\n        23px !important;\n\n    height:\n        3px !important;\n\n    display:\n        block !important;\n\n    border-radius:\n        999px !important;\n\n    background:\n        #ffffff !important;\n\n    transform-origin:\n        center !important;\n\n    opacity:\n        1 !important;\n\n    visibility:\n        visible !important;\n\n    pointer-events:\n        none !important;\n}\n\n.dx-test-modal-close::before {\n    transform:\n        translate(-50%, -50%)\n        rotate(45deg) !important;\n}\n\n.dx-test-modal-close::after {\n    transform:\n        translate(-50%, -50%)\n        rotate(-45deg) !important;\n}\n\n.dx-test-modal-close:hover,\n.dx-test-modal-close:focus-visible {\n    background:\n        linear-gradient(\n            135deg,\n            #9168ef,\n            #6942d8\n        ) !important;\n\n    box-shadow:\n        0 16px 38px rgba(105, 66, 216, 0.48) !important;\n\n    transform:\n        scale(1.08) !important;\n}\n\n.dx-test-modal-close:focus-visible {\n    outline:\n        3px solid #ffc441 !important;\n\n    outline-offset:\n        4px !important;\n}\n\n\/* =========================================================\n   RESPONSIVE\n========================================================= *\/\n\n@media (max-width: 900px) {\n\n    #dx-home-testimonials .dx-test-main {\n        padding:\n            76px\n            28px\n            74px;\n    }\n\n    #dx-home-testimonials .dx-test-video-grid {\n        gap: 18px;\n\n        margin-bottom:\n            52px;\n    }\n\n    #dx-home-testimonials .dx-test-slide {\n        flex-basis: 100%;\n    }\n\n    #dx-home-testimonials .dx-test-card {\n        min-height:\n            300px;\n    }\n}\n\n@media (max-width: 700px) {\n\n    #dx-home-testimonials .dx-test-video-grid {\n        grid-template-columns:\n            1fr;\n    }\n\n    #dx-home-testimonials .dx-test-slider {\n        padding:\n            0\n            37px;\n    }\n\n    #dx-home-testimonials .dx-test-arrow {\n        width:\n            40px;\n\n        height:\n            40px;\n    }\n\n    #dx-home-testimonials .dx-test-arrow-prev {\n        left:\n            -5px;\n    }\n\n    #dx-home-testimonials .dx-test-arrow-next {\n        right:\n            -5px;\n    }\n}\n\n@media (max-width: 600px) {\n\n    #dx-home-testimonials .dx-test-main {\n        padding:\n            64px\n            20px\n            62px;\n    }\n\n    #dx-home-testimonials .dx-test-header {\n        margin-bottom:\n            35px;\n    }\n\n    #dx-home-testimonials .dx-test-title {\n        font-size:\n            clamp(\n                29px,\n                9vw,\n                40px\n            );\n\n        line-height:\n            1.3;\n    }\n\n    #dx-home-testimonials .dx-test-description {\n        font-size:\n            15px;\n\n        line-height:\n            1.75;\n    }\n\n    #dx-home-testimonials .dx-test-video-grid {\n        margin-bottom:\n            47px;\n    }\n\n    #dx-home-testimonials .dx-test-video-card {\n        border-radius:\n            17px;\n    }\n\n    #dx-home-testimonials .dx-test-play {\n        width:\n            66px;\n\n        height:\n            66px;\n    }\n\n    #dx-home-testimonials .dx-test-play svg {\n        width:\n            26px;\n\n        height:\n            26px;\n    }\n\n    #dx-home-testimonials .dx-test-subtitle {\n        font-size:\n            27px;\n\n        line-height:\n            1.35;\n    }\n\n    #dx-home-testimonials .dx-test-subdescription {\n        font-size:\n            14px;\n\n        line-height:\n            1.7;\n    }\n\n    #dx-home-testimonials .dx-test-slider {\n        padding:\n            0;\n    }\n\n    #dx-home-testimonials .dx-test-slide {\n        padding:\n            6px;\n    }\n\n    #dx-home-testimonials .dx-test-card {\n        min-height:\n            0;\n\n        padding:\n            26px\n            22px\n            23px;\n\n        border-radius:\n            17px;\n    }\n\n    #dx-home-testimonials .dx-test-quote-icon {\n        top:\n            18px;\n\n        right:\n            18px;\n\n        width:\n            46px;\n\n        height:\n            46px;\n\n        border-radius:\n            14px;\n    }\n\n    #dx-home-testimonials .dx-test-review {\n        padding-right:\n            58px;\n\n        font-size:\n            14px;\n\n        line-height:\n            1.8;\n    }\n\n    #dx-home-testimonials .dx-test-arrow {\n        top:\n            auto;\n\n        bottom:\n            -58px;\n\n        width:\n            42px;\n\n        height:\n            42px;\n    }\n\n    #dx-home-testimonials .dx-test-arrow-prev {\n        left:\n            calc(50% - 50px);\n    }\n\n    #dx-home-testimonials .dx-test-arrow-next {\n        right:\n            calc(50% - 50px);\n    }\n\n    #dx-home-testimonials .dx-test-pagination {\n        margin-top:\n            73px;\n    }\n\n    .dx-test-modal {\n        padding:\n            65px\n            12px\n            20px;\n    }\n\n    .dx-test-modal-dialog {\n        border-radius:\n            13px;\n    }\n\n    .dx-test-modal-close {\n        top:\n            14px !important;\n\n        right:\n            14px !important;\n\n        width:\n            44px !important;\n\n        height:\n            44px !important;\n\n        border-radius:\n            12px !important;\n    }\n\n    .dx-test-modal-close::before,\n    .dx-test-modal-close::after {\n        width:\n            21px !important;\n\n        height:\n            3px !important;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-home-testimonials button:focus-visible {\n    outline:\n        2px solid var(--dx-yellow);\n\n    outline-offset:\n        4px;\n}\n\nbody.dx-test-modal-open {\n    overflow:\n        hidden !important;\n}\n\n@media (prefers-reduced-motion: reduce) {\n\n    #dx-home-testimonials *,\n    #dx-home-testimonials *::before,\n    #dx-home-testimonials *::after,\n    .dx-test-modal *,\n    .dx-test-modal *::before,\n    .dx-test-modal *::after {\n        animation-duration:\n            0.01ms !important;\n\n        animation-iteration-count:\n            1 !important;\n\n        transition-duration:\n            0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-home-testimonials\"\n    aria-labelledby=\"dx-testimonials-title\"\n    dir=\"ltr\"\n>\n\n    <span\n        class=\"dx-test-orbit dx-test-orbit-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-test-orbit dx-test-orbit-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-test-dots dx-test-dots-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-test-dots dx-test-dots-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-test-main\">\n\n        <div class=\"dx-test-container\">\n\n            <!-- =================================================\n                 HEADER\n            ================================================== -->\n\n            <header class=\"dx-test-header\">\n\n                <span class=\"dx-test-eyebrow\">\n                    Client Testimonials\n                <\/span>\n\n                <h2\n                    id=\"dx-testimonials-title\"\n                    class=\"dx-test-title\"\n                >\n                    What Our Clients Say\n                <\/h2>\n\n                <p class=\"dx-test-description\">\n                    Real experiences from clients who trusted us\n                    to build, improve, and support their digital projects.\n                <\/p>\n\n            <\/header>\n\n            <!-- =================================================\n                 VIDEO TESTIMONIALS\n            ================================================== -->\n\n            <div class=\"dx-test-video-grid\">\n\n                <button\n                    type=\"button\"\n                    class=\"dx-test-video-card\"\n                    data-video-id=\"dtCRXdp2qag\"\n                    aria-label=\"Play the first client video testimonial\"\n                >\n                    <img loading=\"lazy\"\n                        src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/06\/84ef21a8-e751-498c-be44-d2fdf0882d6d.webp\"\n                        class=\"dx-test-video-image\"\n                        alt=\"Client video testimonial\"\n                        width=\"1600\"\n                        height=\"900\"\n                        loading=\"lazy\"\n                        decoding=\"async\"\n                    >\n\n                    <span class=\"dx-test-video-overlay\">\n\n                        <span\n                            class=\"dx-test-play\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M8 5v14l11-7z\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                    <\/span>\n\n                    <span class=\"dx-test-video-badge\">\n\n                        <svg\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <path d=\"M8 5v14l11-7z\"><\/path>\n                        <\/svg>\n\n                        <span>\n                            Watch Client Story\n                        <\/span>\n\n                    <\/span>\n                <\/button>\n\n                <button\n                    type=\"button\"\n                    class=\"dx-test-video-card\"\n                    data-video-id=\"tB7nBjjZoy8\"\n                    aria-label=\"Play the second client video testimonial\"\n                >\n                    <img loading=\"lazy\"\n                        src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/06\/e0eafccc-e822-4b9b-ace4-726086252662.webp\"\n                        class=\"dx-test-video-image\"\n                        alt=\"Client video testimonial\"\n                        width=\"1600\"\n                        height=\"900\"\n                        loading=\"lazy\"\n                        decoding=\"async\"\n                    >\n\n                    <span class=\"dx-test-video-overlay\">\n\n                        <span\n                            class=\"dx-test-play\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M8 5v14l11-7z\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                    <\/span>\n\n                    <span class=\"dx-test-video-badge\">\n\n                        <svg\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <path d=\"M8 5v14l11-7z\"><\/path>\n                        <\/svg>\n\n                        <span>\n                            Watch Client Story\n                        <\/span>\n\n                    <\/span>\n                <\/button>\n\n            <\/div>\n\n            <!-- =================================================\n                 TEXT TESTIMONIALS\n            ================================================== -->\n\n            <div class=\"dx-test-text-section\">\n\n                <header class=\"dx-test-subheader\">\n\n                    <h3 class=\"dx-test-subtitle\">\n                        Client Experiences\n                    <\/h3>\n\n                    <p class=\"dx-test-subdescription\">\n                        Feedback that reflects the quality of our work,\n                        communication, support, and overall client experience.\n                    <\/p>\n\n                <\/header>\n\n                <div\n                    class=\"dx-test-slider\"\n                    aria-roledescription=\"carousel\"\n                    aria-label=\"Client testimonials\"\n                >\n\n                    <!-- PREVIOUS -->\n\n                    <button\n                        type=\"button\"\n                        class=\"dx-test-arrow dx-test-arrow-prev\"\n                        aria-label=\"Previous testimonials\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"m15 18-6-6 6-6\"><\/path>\n                        <\/svg>\n                    <\/button>\n\n                    <div class=\"dx-test-viewport\">\n\n                        <div class=\"dx-test-track\">\n\n                            <!-- =====================================\n                                 TESTIMONIAL 1\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        I would like to thank the team for the\n                                        overall experience. It was very positive.\n                                        They listened carefully to my needs,\n                                        understood the idea clearly from the\n                                        beginning, and made a real effort to\n                                        bring it to life. Every question was\n                                        handled professionally and responses\n                                        were always quick, which was very\n                                        important to me.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5856-scaled.jpg\"\n                                                alt=\"Waseem\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                Waseem\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                Go Coach\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 2\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        What I appreciated most was the genuine\n                                        knowledge and the strong relationship\n                                        throughout the work. Wishing the team\n                                        continued success.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5856-scaled.jpg\"\n                                                alt=\"Mohamed El Khouly\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                Mohamed El Khouly\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                LUM\u00c9A\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 3\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        Great team and excellent service.\n                                        If you need a professional website to\n                                        promote your business or location,\n                                        D-INDEX is an excellent choice.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5856-scaled.jpg\"\n                                                alt=\"James Swayze\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                James Swayze\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                GMCS Power Stations\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 4\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        I highly recommend D-INDEX.\n                                        The team is always ready to help\n                                        whenever you have a question or need\n                                        support.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5857-scaled.jpg\"\n                                                alt=\"Karina Salier\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                Karina Salier\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                High Performance Brain Training\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 5\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        Honest and professional to work with,\n                                        very cooperative, and fairly priced.\n                                        Thank you for the great effort and\n                                        excellent work.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5856-scaled.jpg\"\n                                                alt=\"DZ Daly\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                DZ Daly\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                DZ Store\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 6\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        One of the best companies I have worked\n                                        with. Great service and, more\n                                        importantly, great and honest people.\n                                        Truly a five-star experience.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5856-scaled.jpg\"\n                                                alt=\"Ibrahim Hassan\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                Ibrahim Hassan\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                R&amp;G\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 7\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        One of the most professional companies\n                                        I have worked with. They understood the\n                                        requirements from the first meeting,\n                                        were cooperative in finding solutions,\n                                        and responded quickly whenever an issue\n                                        came up. Their professionalism and\n                                        respectful communication were also\n                                        greatly appreciated.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5857-scaled.jpg\"\n                                                alt=\"Roaa Ahmed\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                Roaa Ahmed\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                My Soul Space\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                            <!-- =====================================\n                                 TESTIMONIAL 8\n                            ====================================== -->\n\n                            <article class=\"dx-test-slide\">\n\n                                <div class=\"dx-test-card\">\n\n                                    <span\n                                        class=\"dx-test-quote-icon\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <path d=\"M10 11H6.5A4.5 4.5 0 0 1 11 6.5V4a7 7 0 0 0-7 7v8h6v-8zm10 0h-3.5A4.5 4.5 0 0 1 21 6.5V4a7 7 0 0 0-7 7v8h6v-8z\"><\/path>\n                                        <\/svg>\n                                    <\/span>\n\n                                    <div\n                                        class=\"dx-test-stars\"\n                                        aria-label=\"5 out of 5 stars\"\n                                    >\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                        <span>\u2605<\/span>\n                                    <\/div>\n\n                                    <p class=\"dx-test-review\">\n                                        I am genuinely grateful for the success\n                                        I achieved while working with D-INDEX.\n                                        They have a creative touch that is\n                                        clearly noticeable when you work with\n                                        their team.\n                                    <\/p>\n\n                                    <div class=\"dx-test-person\">\n\n                                        <span class=\"dx-test-avatar\">\n\n                                            <img\n                                                src=\"https:\/\/dindex.net\/wp-content\/uploads\/2025\/02\/5857-scaled.jpg\"\n                                                alt=\"Laila Kandil\"\n                                                loading=\"lazy\"\n                                                decoding=\"async\"\n                                            >\n\n                                        <\/span>\n\n                                        <span class=\"dx-test-person-info\">\n\n                                            <strong class=\"dx-test-person-name\">\n                                                Laila Kandil\n                                            <\/strong>\n\n                                            <span class=\"dx-test-person-company\">\n                                                Educational Creativity Center\n                                            <\/span>\n\n                                        <\/span>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/article>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <!-- NEXT -->\n\n                    <button\n                        type=\"button\"\n                        class=\"dx-test-arrow dx-test-arrow-next\"\n                        aria-label=\"Next testimonials\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"m9 18 6-6-6-6\"><\/path>\n                        <\/svg>\n                    <\/button>\n\n                    <div\n                        class=\"dx-test-pagination\"\n                        aria-label=\"Testimonial navigation\"\n                    ><\/div>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<!-- =========================================================\n     VIDEO MODAL\n========================================================== -->\n\n<div\n    class=\"dx-test-modal\"\n    id=\"dx-test-video-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"Client video testimonial\"\n    aria-hidden=\"true\"\n>\n\n    <button\n        type=\"button\"\n        class=\"dx-test-modal-close\"\n        aria-label=\"Close video\"\n    ><\/button>\n\n    <div class=\"dx-test-modal-dialog\">\n\n        <div class=\"dx-test-modal-video\"><\/div>\n\n    <\/div>\n\n<\/div>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxTestimonials() {\n\n        const section =\n            document.getElementById(\n                \"dx-home-testimonials\"\n            );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized =\n            \"true\";\n\n        const widget =\n            section.closest(\n                \".elementor-widget-html\"\n            );\n\n        if (widget) {\n\n            widget.classList.add(\n                \"dx-testimonials-widget-fullwidth\"\n            );\n        }\n\n        \/* =====================================================\n           VIDEO MODAL\n        ====================================================== *\/\n\n        const videoButtons =\n            Array.from(\n                section.querySelectorAll(\n                    \".dx-test-video-card\"\n                )\n            );\n\n        const modal =\n            document.getElementById(\n                \"dx-test-video-modal\"\n            );\n\n        const modalVideo =\n            modal\n                ? modal.querySelector(\n                    \".dx-test-modal-video\"\n                )\n                : null;\n\n        const modalClose =\n            modal\n                ? modal.querySelector(\n                    \".dx-test-modal-close\"\n                )\n                : null;\n\n        let lastFocusedElement =\n            null;\n\n        function openVideo(\n            videoId,\n            trigger\n        ) {\n\n            if (\n                !modal ||\n                !modalVideo ||\n                !videoId\n            ) {\n                return;\n            }\n\n            lastFocusedElement =\n                trigger || null;\n\n            const iframe =\n                document.createElement(\n                    \"iframe\"\n                );\n\n            iframe.src =\n                \"https:\/\/www.youtube.com\/embed\/\" +\n                encodeURIComponent(videoId) +\n                \"?feature=oembed\" +\n                \"&autoplay=1\" +\n                \"&controls=1\" +\n                \"&rel=0\" +\n                \"&playsinline=1\";\n\n            iframe.title =\n                \"Client video testimonial\";\n\n            iframe.allow =\n                \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\";\n\n            iframe.allowFullscreen =\n                true;\n\n            iframe.referrerPolicy =\n                \"strict-origin-when-cross-origin\";\n\n            modalVideo.innerHTML =\n                \"\";\n\n            modalVideo.appendChild(\n                iframe\n            );\n\n            modal.classList.add(\n                \"is-open\"\n            );\n\n            modal.setAttribute(\n                \"aria-hidden\",\n                \"false\"\n            );\n\n            document.body.classList.add(\n                \"dx-test-modal-open\"\n            );\n\n            window.setTimeout(\n                function () {\n\n                    if (modalClose) {\n                        modalClose.focus();\n                    }\n\n                },\n                50\n            );\n        }\n\n        function closeVideo() {\n\n            if (\n                !modal ||\n                !modalVideo\n            ) {\n                return;\n            }\n\n            modal.classList.remove(\n                \"is-open\"\n            );\n\n            modal.setAttribute(\n                \"aria-hidden\",\n                \"true\"\n            );\n\n            modalVideo.innerHTML =\n                \"\";\n\n            document.body.classList.remove(\n                \"dx-test-modal-open\"\n            );\n\n            if (\n                lastFocusedElement &&\n                typeof lastFocusedElement.focus ===\n                    \"function\"\n            ) {\n                lastFocusedElement.focus();\n            }\n        }\n\n        videoButtons.forEach(\n            function (button) {\n\n                button.addEventListener(\n                    \"click\",\n                    function () {\n\n                        openVideo(\n                            button.getAttribute(\n                                \"data-video-id\"\n                            ),\n                            button\n                        );\n                    }\n                );\n            }\n        );\n\n        if (modalClose) {\n\n            modalClose.addEventListener(\n                \"click\",\n                closeVideo\n            );\n        }\n\n        if (modal) {\n\n            modal.addEventListener(\n                \"click\",\n                function (event) {\n\n                    if (\n                        event.target === modal\n                    ) {\n                        closeVideo();\n                    }\n                }\n            );\n        }\n\n        document.addEventListener(\n            \"keydown\",\n            function (event) {\n\n                if (\n                    event.key === \"Escape\" &&\n                    modal &&\n                    modal.classList.contains(\n                        \"is-open\"\n                    )\n                ) {\n                    closeVideo();\n                }\n            }\n        );\n\n        \/* =====================================================\n           TESTIMONIAL SLIDER\n        ====================================================== *\/\n\n        const slider =\n            section.querySelector(\n                \".dx-test-slider\"\n            );\n\n        const track =\n            section.querySelector(\n                \".dx-test-track\"\n            );\n\n        const slides =\n            Array.from(\n                section.querySelectorAll(\n                    \".dx-test-slide\"\n                )\n            );\n\n        const previousButton =\n            section.querySelector(\n                \".dx-test-arrow-prev\"\n            );\n\n        const nextButton =\n            section.querySelector(\n                \".dx-test-arrow-next\"\n            );\n\n        const pagination =\n            section.querySelector(\n                \".dx-test-pagination\"\n            );\n\n        if (\n            !slider ||\n            !track ||\n            slides.length === 0 ||\n            !pagination\n        ) {\n            return;\n        }\n\n        let currentIndex = 0;\n\n        let autoplayTimer =\n            null;\n\n        let touchStartX =\n            0;\n\n        let touchEndX =\n            0;\n\n        let resizeTimer =\n            null;\n\n        function getVisibleSlides() {\n\n            return window.innerWidth <= 900\n                ? 1\n                : 2;\n        }\n\n        function getPagesCount() {\n\n            return Math.max(\n                1,\n                Math.ceil(\n                    slides.length \/\n                    getVisibleSlides()\n                )\n            );\n        }\n\n        function normalizeIndex(\n            index\n        ) {\n\n            const pagesCount =\n                getPagesCount();\n\n            if (index < 0) {\n                return pagesCount - 1;\n            }\n\n            if (\n                index >= pagesCount\n            ) {\n                return 0;\n            }\n\n            return index;\n        }\n\n        function createPagination() {\n\n            pagination.innerHTML =\n                \"\";\n\n            const pagesCount =\n                getPagesCount();\n\n            for (\n                let index = 0;\n                index < pagesCount;\n                index += 1\n            ) {\n\n                const dot =\n                    document.createElement(\n                        \"button\"\n                    );\n\n                dot.type =\n                    \"button\";\n\n                dot.className =\n                    \"dx-test-dot\";\n\n                dot.setAttribute(\n                    \"aria-label\",\n                    \"Go to testimonial group \" +\n                    (index + 1)\n                );\n\n                dot.addEventListener(\n                    \"click\",\n                    function () {\n\n                        currentIndex =\n                            index;\n\n                        updateSlider();\n\n                        restartAutoplay();\n                    }\n                );\n\n                pagination.appendChild(\n                    dot\n                );\n            }\n        }\n\n        function updateSlider() {\n\n            const visibleSlides =\n                getVisibleSlides();\n\n            const slidePercentage =\n                100 \/ visibleSlides;\n\n            const offset =\n                currentIndex *\n                visibleSlides *\n                slidePercentage;\n\n            \/*\n             * LTR slider moves left as index increases.\n             *\/\n            track.style.transform =\n                \"translateX(-\" +\n                offset +\n                \"%)\";\n\n            const dots =\n                Array.from(\n                    pagination.querySelectorAll(\n                        \".dx-test-dot\"\n                    )\n                );\n\n            dots.forEach(\n                function (\n                    dot,\n                    index\n                ) {\n\n                    const isActive =\n                        index ===\n                        currentIndex;\n\n                    dot.classList.toggle(\n                        \"is-active\",\n                        isActive\n                    );\n\n                    dot.setAttribute(\n                        \"aria-current\",\n                        isActive\n                            ? \"true\"\n                            : \"false\"\n                    );\n                }\n            );\n        }\n\n        function goNext() {\n\n            currentIndex =\n                normalizeIndex(\n                    currentIndex + 1\n                );\n\n            updateSlider();\n        }\n\n        function goPrevious() {\n\n            currentIndex =\n                normalizeIndex(\n                    currentIndex - 1\n                );\n\n            updateSlider();\n        }\n\n        function stopAutoplay() {\n\n            if (autoplayTimer) {\n\n                window.clearInterval(\n                    autoplayTimer\n                );\n\n                autoplayTimer =\n                    null;\n            }\n        }\n\n        function startAutoplay() {\n\n            stopAutoplay();\n\n            autoplayTimer =\n                window.setInterval(\n                    goNext,\n                    5500\n                );\n        }\n\n        function restartAutoplay() {\n\n            stopAutoplay();\n\n            startAutoplay();\n        }\n\n        if (previousButton) {\n\n            previousButton.addEventListener(\n                \"click\",\n                function () {\n\n                    goPrevious();\n\n                    restartAutoplay();\n                }\n            );\n        }\n\n        if (nextButton) {\n\n            nextButton.addEventListener(\n                \"click\",\n                function () {\n\n                    goNext();\n\n                    restartAutoplay();\n                }\n            );\n        }\n\n        slider.addEventListener(\n            \"mouseenter\",\n            stopAutoplay\n        );\n\n        slider.addEventListener(\n            \"mouseleave\",\n            startAutoplay\n        );\n\n        slider.addEventListener(\n            \"focusin\",\n            stopAutoplay\n        );\n\n        slider.addEventListener(\n            \"focusout\",\n            startAutoplay\n        );\n\n        slider.addEventListener(\n            \"touchstart\",\n            function (event) {\n\n                touchStartX =\n                    event.changedTouches[0]\n                        .clientX;\n            },\n            {\n                passive: true\n            }\n        );\n\n        slider.addEventListener(\n            \"touchend\",\n            function (event) {\n\n                touchEndX =\n                    event.changedTouches[0]\n                        .clientX;\n\n                const distance =\n                    touchEndX -\n                    touchStartX;\n\n                if (\n                    Math.abs(distance) <\n                    45\n                ) {\n                    return;\n                }\n\n                \/*\n                 * LTR:\n                 * Swipe left  -> next\n                 * Swipe right -> previous\n                 *\/\n                if (\n                    distance < 0\n                ) {\n\n                    goNext();\n\n                } else {\n\n                    goPrevious();\n                }\n\n                restartAutoplay();\n            },\n            {\n                passive: true\n            }\n        );\n\n        window.addEventListener(\n            \"resize\",\n            function () {\n\n                window.clearTimeout(\n                    resizeTimer\n                );\n\n                resizeTimer =\n                    window.setTimeout(\n                        function () {\n\n                            currentIndex =\n                                0;\n\n                            createPagination();\n\n                            updateSlider();\n                        },\n                        150\n                    );\n            }\n        );\n\n        createPagination();\n        updateSlider();\n        startAutoplay();\n    }\n\n    if (\n        document.readyState ===\n        \"loading\"\n    ) {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxTestimonials\n        );\n\n    } else {\n\n        initDxTestimonials();\n\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0bc6114 e-con-full e-flex e-con e-parent\" data-id=\"0bc6114\" 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-1067640 elementor-widget elementor-widget-html\" data-id=\"1067640\" 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     LMS SERVICE PAGE \u2014 IMPLEMENTATION PROCESS 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-lms-process),\n.elementor-widget-html:has(#dx-lms-process) > .elementor-widget-container,\n.dx-lms-process-widget-fullwidth,\n.dx-lms-process-widget-fullwidth > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n}\n\n\/* =========================================================\n   RESET & VARIABLES\n========================================================= *\/\n\n#dx-lms-process,\n#dx-lms-process *,\n#dx-lms-process *::before,\n#dx-lms-process *::after {\n    box-sizing: border-box;\n}\n\n#dx-lms-process {\n    --dx-process-bg: #f7f5fb;\n    --dx-process-white: #ffffff;\n    --dx-process-dark: #180b35;\n    --dx-process-text: #6d6478;\n    --dx-process-muted: #958d9f;\n    --dx-process-purple: #6942d8;\n    --dx-process-purple-light: #9168ef;\n    --dx-process-yellow: #ffc441;\n    --dx-process-yellow-light: #ffd66e;\n    --dx-process-green: #54d696;\n    --dx-process-blue: #58a8f7;\n    --dx-process-border: rgba(105, 66, 216, 0.13);\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n\n    direction: ltr;\n    color: var(--dx-process-dark);\n\n    background:\n        radial-gradient(\n            circle at 8% 15%,\n            rgba(105, 66, 216, 0.08),\n            transparent 25%\n        ),\n        radial-gradient(\n            circle at 92% 86%,\n            rgba(145, 104, 239, 0.08),\n            transparent 25%\n        ),\n        var(--dx-process-bg);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-lms-process a {\n    color: inherit;\n    text-decoration: none;\n}\n\n\/* =========================================================\n   BACKGROUND\n========================================================= *\/\n\n#dx-lms-process .dx-process-grid-bg {\n    position: absolute;\n    z-index: -6;\n\n    inset: 0;\n\n    opacity: 0.16;\n\n    background-image:\n        linear-gradient(\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        );\n\n    background-size: 72px 72px;\n\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 18%,\n            transparent 82%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 18%,\n            transparent 82%\n        );\n\n    pointer-events: none;\n}\n\n#dx-lms-process .dx-process-orbit {\n    position: absolute;\n    z-index: -5;\n\n    border: 1px solid rgba(105, 66, 216, 0.09);\n    border-radius: 50%;\n\n    pointer-events: none;\n}\n\n#dx-lms-process .dx-process-orbit-one {\n    top: -230px;\n    right: -200px;\n\n    width: 480px;\n    height: 480px;\n}\n\n#dx-lms-process .dx-process-orbit-two {\n    left: -240px;\n    bottom: -280px;\n\n    width: 520px;\n    height: 520px;\n}\n\n\/* =========================================================\n   LAYOUT\n========================================================= *\/\n\n#dx-lms-process .dx-process-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        92px\n        clamp(22px, 5vw, 90px)\n        98px;\n}\n\n#dx-lms-process .dx-process-container {\n    width: min(1380px, 100%);\n    margin: 0 auto;\n}\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n#dx-lms-process .dx-process-header {\n    max-width: 850px;\n\n    margin: 0 auto 52px;\n\n    text-align: center;\n}\n\n#dx-lms-process .dx-process-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    margin-bottom: 11px;\n\n    color: var(--dx-process-purple);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-lms-process .dx-process-eyebrow::before,\n#dx-lms-process .dx-process-eyebrow::after {\n    content: \"\";\n\n    width: 31px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-process-yellow),\n            var(--dx-process-purple-light)\n        );\n}\n\n#dx-lms-process .dx-process-title {\n    margin: 0;\n\n    color: var(--dx-process-dark);\n\n    font-size: clamp(32px, 3.5vw, 49px);\n    font-weight: 900;\n    line-height: 1.55;\n    letter-spacing: -0.45px;\n\n    text-wrap: balance;\n}\n\n#dx-lms-process .dx-process-title span {\n    color: var(--dx-process-purple);\n}\n\n#dx-lms-process .dx-process-description {\n    max-width: 720px;\n\n    margin: 13px auto 0;\n\n    color: var(--dx-process-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n\n    text-wrap: pretty;\n}\n\n\/* =========================================================\n   PROCESS WRAPPER\n========================================================= *\/\n\n#dx-lms-process .dx-process-flow {\n    position: relative;\n}\n\n\/* =========================================================\n   CONNECTION LINE\n========================================================= *\/\n\n#dx-lms-process .dx-process-line {\n    position: absolute;\n    z-index: 1;\n\n    top: 71px;\n    right: 12.5%;\n    left: 12.5%;\n\n    height: 2px;\n\n    overflow: hidden;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            rgba(105, 66, 216, 0.12),\n            rgba(105, 66, 216, 0.34),\n            rgba(255, 196, 65, 0.42),\n            rgba(105, 66, 216, 0.34),\n            rgba(105, 66, 216, 0.12)\n        );\n}\n\n#dx-lms-process .dx-process-line::after {\n    content: \"\";\n\n    position: absolute;\n\n    top: 0;\n    right: -20%;\n\n    width: 24%;\n    height: 100%;\n\n    background:\n        linear-gradient(\n            90deg,\n            transparent,\n            var(--dx-process-yellow),\n            transparent\n        );\n\n    animation:\n        dxProcessLineMove\n        4.5s\n        linear\n        infinite;\n}\n\n\/* =========================================================\n   STEPS GRID\n========================================================= *\/\n\n#dx-lms-process .dx-process-grid {\n    position: relative;\n    z-index: 2;\n\n    display: grid;\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n\n    gap: 19px;\n}\n\n\/* =========================================================\n   STEP CARD\n========================================================= *\/\n\n#dx-lms-process .dx-process-card {\n    position: relative;\n    isolation: isolate;\n\n    min-width: 0;\n    min-height: 410px;\n\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n\n    padding:\n        25px\n        23px\n        24px;\n\n    overflow: hidden;\n\n    border: 1px solid var(--dx-process-border);\n    border-radius: 24px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 1),\n            rgba(250, 248, 254, 0.98)\n        );\n\n    box-shadow:\n        0 22px 58px rgba(40, 18, 84, 0.09),\n        inset 0 1px 0 rgba(255, 255, 255, 0.96);\n\n    transition:\n        transform 0.35s ease,\n        border-color 0.35s ease,\n        box-shadow 0.35s ease;\n}\n\n#dx-lms-process .dx-process-card:hover,\n#dx-lms-process .dx-process-card:focus-within {\n    border-color: rgba(105, 66, 216, 0.30);\n\n    box-shadow:\n        0 32px 72px rgba(40, 18, 84, 0.15),\n        inset 0 1px 0 rgba(255, 255, 255, 1);\n\n    transform: translateY(-8px);\n}\n\n#dx-lms-process .dx-process-card::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    top: -130px;\n    left: -100px;\n\n    width: 280px;\n    height: 280px;\n\n    border-radius: 50%;\n\n    background: rgba(105, 66, 216, 0.09);\n\n    filter: blur(70px);\n\n    pointer-events: none;\n}\n\n#dx-lms-process .dx-process-card:nth-child(2)::before {\n    background: rgba(255, 196, 65, 0.11);\n}\n\n#dx-lms-process .dx-process-card:nth-child(3)::before {\n    background: rgba(84, 214, 150, 0.10);\n}\n\n#dx-lms-process .dx-process-card:nth-child(4)::before {\n    background: rgba(88, 168, 247, 0.10);\n}\n\n#dx-lms-process .dx-process-card::after {\n    content: \"\";\n\n    position: absolute;\n\n    right: 23px;\n    bottom: 0;\n\n    width: calc(100% - 46px);\n    height: 3px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            transparent,\n            var(--dx-process-purple),\n            var(--dx-process-yellow),\n            transparent\n        );\n\n    opacity: 0;\n\n    transition: opacity 0.35s ease;\n}\n\n#dx-lms-process .dx-process-card:hover::after,\n#dx-lms-process .dx-process-card:focus-within::after {\n    opacity: 1;\n}\n\n\/* =========================================================\n   STEP TOP\n========================================================= *\/\n\n#dx-lms-process .dx-process-card-top {\n    width: 100%;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    gap: 15px;\n}\n\n#dx-lms-process .dx-process-icon {\n    position: relative;\n    z-index: 3;\n\n    width: 72px;\n    height: 72px;\n    flex: 0 0 72px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid rgba(105, 66, 216, 0.15);\n    border-radius: 22px;\n\n    color: #ffffff;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-process-purple),\n            var(--dx-process-purple-light)\n        );\n\n    box-shadow:\n        0 17px 36px rgba(105, 66, 216, 0.23);\n\n    transition:\n        transform 0.3s ease,\n        box-shadow 0.3s ease;\n}\n\n#dx-lms-process .dx-process-card:nth-child(2)\n    .dx-process-icon {\n    color: #26113f;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-process-yellow),\n            var(--dx-process-yellow-light)\n        );\n\n    box-shadow:\n        0 17px 36px rgba(255, 196, 65, 0.22);\n}\n\n#dx-lms-process .dx-process-card:nth-child(3)\n    .dx-process-icon {\n    color: #0b4f38;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-process-green),\n            #8ae6b9\n        );\n\n    box-shadow:\n        0 17px 36px rgba(84, 214, 150, 0.21);\n}\n\n#dx-lms-process .dx-process-card:nth-child(4)\n    .dx-process-icon {\n    color: #ffffff;\n\n    background:\n        linear-gradient(\n            135deg,\n            #428fe0,\n            var(--dx-process-blue)\n        );\n\n    box-shadow:\n        0 17px 36px rgba(88, 168, 247, 0.22);\n}\n\n#dx-lms-process .dx-process-card:hover\n    .dx-process-icon {\n    transform:\n        translateY(-4px)\n        rotate(-4deg);\n}\n\n#dx-lms-process .dx-process-icon svg {\n    width: 35px;\n    height: 35px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.75;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-lms-process .dx-process-number {\n    color: rgba(105, 66, 216, 0.13);\n\n    font-size: 34px;\n    font-weight: 900;\n    line-height: 1;\n}\n\n\/* =========================================================\n   CARD CONTENT\n========================================================= *\/\n\n#dx-lms-process .dx-process-card-title {\n    margin:\n        23px\n        0\n        0;\n\n    color: var(--dx-process-dark);\n\n    font-size: 21px;\n    font-weight: 900;\n    line-height: 1.65;\n\n    text-wrap: balance;\n}\n\n#dx-lms-process .dx-process-card-description {\n    margin:\n        9px\n        0\n        0;\n\n    color: var(--dx-process-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.95;\n\n    text-wrap: pretty;\n}\n\n\/* =========================================================\n   CHECKLIST\n========================================================= *\/\n\n#dx-lms-process .dx-process-list {\n    width: 100%;\n\n    margin-top: auto;\n    padding-top: 21px;\n\n    display: grid;\n\n    gap: 10px;\n}\n\n#dx-lms-process .dx-process-list-item {\n    display: flex;\n    align-items: flex-start;\n\n    gap: 9px;\n\n    color: var(--dx-process-muted);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.7;\n}\n\n#dx-lms-process .dx-process-list-icon {\n    width: 18px;\n    height: 18px;\n    flex: 0 0 18px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-top: 1px;\n\n    border-radius: 6px;\n\n    color: var(--dx-process-purple);\n\n    background: rgba(105, 66, 216, 0.08);\n}\n\n#dx-lms-process .dx-process-card:nth-child(2)\n    .dx-process-list-icon {\n    color: #9b6c00;\n\n    background: rgba(255, 196, 65, 0.17);\n}\n\n#dx-lms-process .dx-process-card:nth-child(3)\n    .dx-process-list-icon {\n    color: #16845a;\n\n    background: rgba(84, 214, 150, 0.15);\n}\n\n#dx-lms-process .dx-process-card:nth-child(4)\n    .dx-process-list-icon {\n    color: #2e78bb;\n\n    background: rgba(88, 168, 247, 0.14);\n}\n\n#dx-lms-process .dx-process-list-icon svg {\n    width: 11px;\n    height: 11px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2.3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   BOTTOM PANEL\n========================================================= *\/\n\n#dx-lms-process .dx-process-bottom {\n    margin-top: 27px;\n\n    display: grid;\n    grid-template-columns:\n        minmax(0, 1fr)\n        auto;\n\n    align-items: center;\n\n    gap: 25px;\n\n    padding:\n        23px\n        25px;\n\n    border: 1px solid rgba(105, 66, 216, 0.13);\n    border-radius: 19px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.86),\n            rgba(250, 248, 254, 0.72)\n        );\n\n    box-shadow:\n        0 17px 40px rgba(40, 18, 84, 0.07);\n}\n\n#dx-lms-process .dx-process-bottom-copy {\n    min-width: 0;\n\n    display: flex;\n    align-items: center;\n\n    gap: 14px;\n}\n\n#dx-lms-process .dx-process-bottom-icon {\n    width: 46px;\n    height: 46px;\n    flex: 0 0 46px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 14px;\n\n    color: var(--dx-process-purple);\n\n    background: rgba(105, 66, 216, 0.09);\n}\n\n#dx-lms-process .dx-process-bottom-icon svg {\n    width: 23px;\n    height: 23px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.9;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-lms-process .dx-process-bottom-title {\n    margin: 0;\n\n    color: var(--dx-process-dark);\n\n    font-size: 15px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-lms-process .dx-process-bottom-text {\n    margin:\n        4px\n        0\n        0;\n\n    color: var(--dx-process-text);\n\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1.8;\n}\n\n#dx-lms-process .dx-process-button {\n    min-width: 210px;\n    min-height: 50px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 9px;\n\n    padding:\n        0\n        21px;\n\n    border: 1px solid rgba(105, 66, 216, 0.18);\n    border-radius: 12px;\n\n    color: #ffffff;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-process-purple),\n            var(--dx-process-purple-light)\n        );\n\n    box-shadow:\n        0 16px 34px rgba(105, 66, 216, 0.23);\n\n    font-size: 14px;\n    font-weight: 900;\n    white-space: nowrap;\n\n    transition:\n        transform 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-lms-process .dx-process-button:hover,\n#dx-lms-process .dx-process-button:focus-visible {\n    box-shadow:\n        0 22px 44px rgba(105, 66, 216, 0.31);\n\n    transform: translateY(-3px);\n}\n\n#dx-lms-process .dx-process-button svg {\n    width: 17px;\n    height: 17px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   ANIMATION\n========================================================= *\/\n\n@keyframes dxProcessLineMove {\n    0% {\n        right: -25%;\n    }\n\n    100% {\n        right: 110%;\n    }\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1050px) {\n    #dx-lms-process .dx-process-grid {\n        grid-template-columns:\n            repeat(2, minmax(0, 1fr));\n    }\n\n    #dx-lms-process .dx-process-line {\n        display: none;\n    }\n\n    #dx-lms-process .dx-process-card {\n        min-height: 360px;\n    }\n}\n\n@media (max-width: 800px) {\n    #dx-lms-process .dx-process-main {\n        padding:\n            76px\n            28px\n            82px;\n    }\n\n    #dx-lms-process .dx-process-header {\n        margin-bottom: 40px;\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 600px) {\n    #dx-lms-process .dx-process-main {\n        padding:\n            59px\n            16px\n            65px;\n    }\n\n    #dx-lms-process .dx-process-header {\n        margin-bottom: 31px;\n    }\n\n    #dx-lms-process .dx-process-eyebrow {\n        font-size: 14px;\n    }\n\n    #dx-lms-process .dx-process-eyebrow::before,\n    #dx-lms-process .dx-process-eyebrow::after {\n        width: 22px;\n    }\n\n    #dx-lms-process .dx-process-title {\n        font-size: clamp(27px, 8.3vw, 36px);\n        line-height: 1.65;\n        letter-spacing: -0.2px;\n    }\n\n    #dx-lms-process .dx-process-description {\n        margin-top: 10px;\n\n        font-size: 14px;\n        line-height: 2;\n    }\n\n    #dx-lms-process .dx-process-grid {\n        grid-template-columns: 1fr;\n\n        gap: 13px;\n    }\n\n    #dx-lms-process .dx-process-card {\n        min-height: 0;\n\n        display: grid;\n        grid-template-columns:\n            58px\n            minmax(0, 1fr);\n\n        grid-template-areas:\n            \"icon title\"\n            \"icon description\"\n            \"list list\";\n\n        align-items: start;\n\n        gap:\n            6px\n            14px;\n\n        padding:\n            20px\n            17px;\n\n        border-radius: 19px;\n    }\n\n    #dx-lms-process .dx-process-card-top {\n        display: contents;\n    }\n\n    #dx-lms-process .dx-process-icon {\n        grid-area: icon;\n\n        width: 56px;\n        height: 56px;\n        flex-basis: 56px;\n\n        border-radius: 17px;\n    }\n\n    #dx-lms-process .dx-process-icon svg {\n        width: 28px;\n        height: 28px;\n    }\n\n    #dx-lms-process .dx-process-number {\n        display: none;\n    }\n\n    #dx-lms-process .dx-process-card-title {\n        grid-area: title;\n\n        margin: 0;\n\n        font-size: 18px;\n        line-height: 1.65;\n    }\n\n    #dx-lms-process .dx-process-card-description {\n        grid-area: description;\n\n        margin: 0;\n\n        font-size: 14px;\n        line-height: 1.9;\n    }\n\n    #dx-lms-process .dx-process-list {\n        grid-area: list;\n\n        margin-top: 9px;\n        padding-top: 0;\n\n        grid-template-columns:\n            repeat(2, minmax(0, 1fr));\n\n        gap:\n            8px\n            10px;\n    }\n\n    #dx-lms-process .dx-process-list-item {\n        font-size: 14px;\n    }\n\n    #dx-lms-process .dx-process-list-icon {\n        width: 16px;\n        height: 16px;\n        flex-basis: 16px;\n    }\n\n    #dx-lms-process .dx-process-bottom {\n        margin-top: 18px;\n\n        grid-template-columns: 1fr;\n\n        gap: 16px;\n\n        padding:\n            18px\n            15px;\n\n        border-radius: 16px;\n\n        text-align: center;\n    }\n\n    #dx-lms-process .dx-process-bottom-copy {\n        flex-direction: column;\n\n        gap: 10px;\n    }\n\n    #dx-lms-process .dx-process-bottom-icon {\n        width: 42px;\n        height: 42px;\n        flex-basis: 42px;\n    }\n\n    #dx-lms-process .dx-process-bottom-title {\n        font-size: 14px;\n    }\n\n    #dx-lms-process .dx-process-bottom-text {\n        font-size: 14px;\n    }\n\n    #dx-lms-process .dx-process-button {\n        width: 100%;\n        min-width: 0;\n        min-height: 48px;\n\n        font-size: 14px;\n    }\n\n    #dx-lms-process .dx-process-orbit {\n        display: none;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-lms-process a:focus-visible {\n    outline: 3px solid var(--dx-process-yellow);\n    outline-offset: 4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    #dx-lms-process *,\n    #dx-lms-process *::before,\n    #dx-lms-process *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-lms-process\"\n    aria-labelledby=\"dx-lms-process-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n    <div\n        class=\"dx-process-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <span\n        class=\"dx-process-orbit dx-process-orbit-one\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <span\n        class=\"dx-process-orbit dx-process-orbit-two\"\n        aria-hidden=\"true\"\n    ><\/span>\n\n    <div class=\"dx-process-main\">\n\n        <div class=\"dx-process-container\">\n\n            <header class=\"dx-process-header\">\n\n                <span class=\"dx-process-eyebrow\">\n                    Clear Steps From Idea to Launch\n                <\/span>\n\n                <h2\n                    id=\"dx-lms-process-title\"\n                    class=\"dx-process-title\"\n                >\n                    How Do We Implement Your\n                    <span>Learning Management System?<\/span>\n                <\/h2>\n\n                <p class=\"dx-process-description\">\n                    We follow a clear implementation process that begins\n                    with understanding your organization\u2019s requirements\n                    and ends with launching a stable, scalable platform,\n                    followed by ongoing support after deployment.\n                <\/p>\n\n            <\/header>\n\n            <div class=\"dx-process-flow\">\n\n                <span\n                    class=\"dx-process-line\"\n                    aria-hidden=\"true\"\n                ><\/span>\n\n                <div class=\"dx-process-grid\">\n\n                    <!-- STEP 01 -->\n\n                    <article class=\"dx-process-card\">\n\n                        <div class=\"dx-process-card-top\">\n\n                            <span\n                                class=\"dx-process-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <circle\n                                        cx=\"11\"\n                                        cy=\"11\"\n                                        r=\"7\"\n                                    ><\/circle>\n\n                                    <path d=\"m20 20-4-4\"><\/path>\n\n                                    <path d=\"M8 11h6\"><\/path>\n\n                                    <path d=\"M11 8v6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span class=\"dx-process-number\">\n                                01\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-process-card-title\">\n                            Requirements Analysis\n                        <\/h3>\n\n                        <p class=\"dx-process-card-description\">\n                            We begin by reviewing your organization\u2019s goals,\n                            content delivery model, target users, expected\n                            number of users, and the features required\n                            within the system.\n                        <\/p>\n\n                        <div class=\"dx-process-list\">\n\n                            <span class=\"dx-process-list-item\">\n\n                                <span\n                                    class=\"dx-process-list-icon\"\n                                    aria-hidden=\"true\"\n                                >\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                                Define Platform Objectives\n\n                            <\/span>\n\n                            <span class=\"dx-process-list-item\">\n\n                                <span\n                                    class=\"dx-process-list-icon\"\n                                    aria-hidden=\"true\"\n                                >\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                                Analyze User Roles\n\n                            <\/span>\n\n                            <span class=\"dx-process-list-item\">\n\n                                <span\n                                    class=\"dx-process-list-icon\"\n                                    aria-hidden=\"true\"\n                                >\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                                Define Features & Integrations\n\n                            <\/span>\n\n                        <\/div>\n\n                    <\/article>\n\n                    <!-- STEP 02 -->\n\n                    <article class=\"dx-process-card\">\n\n                        <div class=\"dx-process-card-top\">\n\n                            <span\n                                class=\"dx-process-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <rect\n                                        x=\"3\"\n                                        y=\"4\"\n                                        width=\"18\"\n                                        height=\"16\"\n                                        rx=\"2\"\n                                    ><\/rect>\n\n                                    <path d=\"M3 9h18\"><\/path>\n\n                                    <path d=\"M8 14h3\"><\/path>\n\n                                    <path d=\"M8 17h7\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span class=\"dx-process-number\">\n                                02\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-process-card-title\">\n                            Platform Design & Preparation\n                        <\/h3>\n\n                        <p class=\"dx-process-card-description\">\n                            We design the user experience, dashboards,\n                            and learning pages to match your organization\u2019s\n                            visual identity, content structure, and\n                            target audience.\n                        <\/p>\n\n                        <div class=\"dx-process-list\">\n\n                            <span class=\"dx-process-list-item\">\n\n                                <span\n                                    class=\"dx-process-list-icon\"\n                                    aria-hidden=\"true\"\n                                >\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                                User Interface Design\n\n                            <\/span>\n\n                            <span class=\"dx-process-list-item\">\n\n                                <span\n                                    class=\"dx-process-list-icon\"\n                                    aria-hidden=\"true\"\n                                >\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                                Apply Visual Identity\n\n                            <\/span>\n\n                            <span class=\"dx-process-list-item\">\n\n                                <span\n                                    class=\"dx-process-list-icon\"\n                                    aria-hidden=\"true\"\n                                >\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                                Dashboard Planning\n\n                            <\/span>\n\n                        <\/div>\n\n                    <\/article>\n\n                    <!-- STEP 03 -->\n\n                    <article class=\"dx-process-card\">\n\n                        <div class=\"dx-process-card-top\">\n\n                            <span\n                                class=\"dx-process-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m8 9-3 3 3 3\"><\/path>\n                                    <path d=\"m16 9 3 3-3 3\"><\/path>\n                                    <path d=\"m14 5-4 14\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span class=\"dx-process-number\">\n                                03\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-process-card-title\">\n                            Development & Integration\n                        <\/h3>\n\n                        <p class=\"dx-process-card-description\">\n                            We develop the system, configure roles,\n                            courses, assessments, and reports, implement\n                            the required integrations, and migrate existing\n                            content when needed.\n                        <\/p>\n\n                        <div class=\"dx-process-list\">\n\n                            <span class=\"dx-process-list-item\">\n\n                                <span\n                                    class=\"dx-process-list-icon\"\n                                    aria-hidden=\"true\"\n                                >\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                                Develop System Features\n\n                            <\/span>\n\n                            <span class=\"dx-process-list-item\">\n\n                                <span\n                                    class=\"dx-process-list-icon\"\n                                    aria-hidden=\"true\"\n                                >\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                                Implement Required Integrations\n\n                            <\/span>\n\n                            <span class=\"dx-process-list-item\">\n\n                                <span\n                                    class=\"dx-process-list-icon\"\n                                    aria-hidden=\"true\"\n                                >\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                                Prepare or Migrate Content\n\n                            <\/span>\n\n                        <\/div>\n\n                    <\/article>\n\n                    <!-- STEP 04 -->\n\n                    <article class=\"dx-process-card\">\n\n                        <div class=\"dx-process-card-top\">\n\n                            <span\n                                class=\"dx-process-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"M12 2v4\"><\/path>\n                                    <path d=\"M12 18v4\"><\/path>\n                                    <path d=\"M4.93 4.93 7.76 7.76\"><\/path>\n                                    <path d=\"m16.24 16.24 2.83 2.83\"><\/path>\n                                    <path d=\"M2 12h4\"><\/path>\n                                    <path d=\"M18 12h4\"><\/path>\n                                    <path d=\"m4.93 19.07 2.83-2.83\"><\/path>\n                                    <path d=\"m16.24 7.76 2.83-2.83\"><\/path>\n                                    <circle\n                                        cx=\"12\"\n                                        cy=\"12\"\n                                        r=\"4\"\n                                    ><\/circle>\n                                <\/svg>\n                            <\/span>\n\n                            <span class=\"dx-process-number\">\n                                04\n                            <\/span>\n\n                        <\/div>\n\n                        <h3 class=\"dx-process-card-title\">\n                            Testing, Launch & Support\n                        <\/h3>\n\n                        <p class=\"dx-process-card-description\">\n                            We test the platform across different devices\n                            and account types, launch the system, train\n                            your administrative team, and provide support\n                            and follow-up after deployment.\n                        <\/p>\n\n                        <div class=\"dx-process-list\">\n\n                            <span class=\"dx-process-list-item\">\n\n                                <span\n                                    class=\"dx-process-list-icon\"\n                                    aria-hidden=\"true\"\n                                >\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                                Functionality & Performance Testing\n\n                            <\/span>\n\n                            <span class=\"dx-process-list-item\">\n\n                                <span\n                                    class=\"dx-process-list-icon\"\n                                    aria-hidden=\"true\"\n                                >\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                                Team Training\n\n                            <\/span>\n\n                            <span class=\"dx-process-list-item\">\n\n                                <span\n                                    class=\"dx-process-list-icon\"\n                                    aria-hidden=\"true\"\n                                >\n                                    <svg viewBox=\"0 0 24 24\">\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\n                                    <\/svg>\n                                <\/span>\n\n                                Post-Launch Support & Follow-Up\n\n                            <\/span>\n\n                        <\/div>\n\n                    <\/article>\n\n                <\/div>\n\n            <\/div>\n\n            <div class=\"dx-process-bottom\">\n\n                <div class=\"dx-process-bottom-copy\">\n\n                    <span\n                        class=\"dx-process-bottom-icon\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M12 3v18\"><\/path>\n                            <path d=\"M3 12h18\"><\/path>\n                            <circle\n                                cx=\"12\"\n                                cy=\"12\"\n                                r=\"9\"\n                            ><\/circle>\n                        <\/svg>\n                    <\/span>\n\n                    <div>\n\n                        <h3 class=\"dx-process-bottom-title\">\n                            Every Platform Is Implemented Around Its Own Requirements\n                        <\/h3>\n\n                        <p class=\"dx-process-bottom-text\">\n                            The implementation and customization process\n                            varies based on organization size, number of\n                            users, content, integrations, and required\n                            features.\n                        <\/p>\n\n                    <\/div>\n\n                <\/div>\n\n                <a\n                    href=\"https:\/\/dindex.net\/en\/contact\/\"\n                    class=\"dx-process-button\"\n                >\n                    <span>Discuss Your Project With Us<\/span>\n\n                    <svg\n                        viewBox=\"0 0 24 24\"\n                        aria-hidden=\"true\"\n                    >\n                        <path d=\"M5 12h14\"><\/path>\n                        <path d=\"m13 6 6 6-6 6\"><\/path>\n                    <\/svg>\n                <\/a>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxLmsProcess() {\n        const section = document.getElementById(\n            \"dx-lms-process\"\n        );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized = \"true\";\n\n        const widget = section.closest(\n            \".elementor-widget-html\"\n        );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-lms-process-widget-fullwidth\"\n            );\n        }\n\n        if (!(\"IntersectionObserver\" in window)) {\n            return;\n        }\n\n        const cards = section.querySelectorAll(\n            \".dx-process-card\"\n        );\n\n        cards.forEach(function (card, index) {\n            card.style.opacity = \"0\";\n            card.style.transform = \"translateY(25px)\";\n\n            card.style.transition =\n                \"opacity 0.58s ease \" +\n                index * 0.09 +\n                \"s, transform 0.58s ease \" +\n                index * 0.09 +\n                \"s, border-color 0.35s ease, box-shadow 0.35s ease\";\n        });\n\n        const observer = new IntersectionObserver(\n            function (entries, currentObserver) {\n                entries.forEach(function (entry) {\n                    if (!entry.isIntersecting) {\n                        return;\n                    }\n\n                    entry.target.style.opacity = \"1\";\n                    entry.target.style.transform = \"translateY(0)\";\n\n                    currentObserver.unobserve(\n                        entry.target\n                    );\n                });\n            },\n            {\n                threshold: 0.12\n            }\n        );\n\n        cards.forEach(function (card) {\n            observer.observe(card);\n        });\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxLmsProcess\n        );\n    } else {\n        initDxLmsProcess();\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-9ae44c4 e-con-full e-flex e-con e-parent\" data-id=\"9ae44c4\" 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-e4f6710 elementor-widget elementor-widget-html\" data-id=\"e4f6710\" 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     LMS SERVICE PAGE \u2014 FAQ 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-lms-faq),\n.elementor-widget-html:has(#dx-lms-faq) > .elementor-widget-container,\n.dx-lms-faq-widget-fullwidth,\n.dx-lms-faq-widget-fullwidth > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n}\n\n\/* =========================================================\n   RESET & VARIABLES\n========================================================= *\/\n\n#dx-lms-faq,\n#dx-lms-faq *,\n#dx-lms-faq *::before,\n#dx-lms-faq *::after {\n    box-sizing: border-box;\n}\n\n#dx-lms-faq {\n    --dx-faq-dark: #0b0223;\n    --dx-faq-dark-light: #18063d;\n    --dx-faq-white: #ffffff;\n    --dx-faq-text: rgba(255, 255, 255, 0.74);\n    --dx-faq-muted: rgba(255, 255, 255, 0.53);\n    --dx-faq-purple: #6942d8;\n    --dx-faq-purple-light: #9168ef;\n    --dx-faq-yellow: #ffc441;\n    --dx-faq-yellow-light: #ffd66e;\n    --dx-faq-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    direction: ltr;\n\n    color: var(--dx-faq-white);\n\n    background:\n        radial-gradient(\n            circle at 10% 15%,\n            rgba(145, 104, 239, 0.20),\n            transparent 30%\n        ),\n        radial-gradient(\n            circle at 90% 85%,\n            rgba(105, 66, 216, 0.22),\n            transparent 31%\n        ),\n        linear-gradient(\n            145deg,\n            var(--dx-faq-dark-light),\n            var(--dx-faq-dark)\n        );\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-lms-faq button {\n    font: inherit;\n}\n\n\/* =========================================================\n   BACKGROUND\n========================================================= *\/\n\n#dx-lms-faq .dx-faq-grid-bg {\n    position: absolute;\n    z-index: -5;\n\n    inset: 0;\n\n    opacity: 0.1;\n\n    background-image:\n        linear-gradient(\n            rgba(255, 255, 255, 0.045) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(255, 255, 255, 0.045) 1px,\n            transparent 1px\n        );\n\n    background-size: 72px 72px;\n\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 16%,\n            transparent 82%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 16%,\n            transparent 82%\n        );\n\n    pointer-events: none;\n}\n\n\/* =========================================================\n   LAYOUT\n========================================================= *\/\n\n#dx-lms-faq .dx-faq-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        92px\n        clamp(22px, 5vw, 90px)\n        98px;\n}\n\n#dx-lms-faq .dx-faq-container {\n    width: min(1320px, 100%);\n    margin: 0 auto;\n\n    display: grid;\n    grid-template-columns:\n        minmax(320px, 0.8fr)\n        minmax(0, 1.2fr);\n\n    align-items: start;\n\n    gap: clamp(45px, 6vw, 90px);\n}\n\n\/* =========================================================\n   INTRO\n========================================================= *\/\n\n#dx-lms-faq .dx-faq-intro {\n    position: sticky;\n    top: 110px;\n}\n\n#dx-lms-faq .dx-faq-eyebrow {\n    display: inline-flex;\n    align-items: center;\n\n    gap: 10px;\n\n    margin-bottom: 12px;\n\n    color: var(--dx-faq-yellow);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-lms-faq .dx-faq-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-faq-yellow),\n            var(--dx-faq-purple-light)\n        );\n}\n\n#dx-lms-faq .dx-faq-title {\n    margin: 0;\n\n    color: var(--dx-faq-white);\n\n    font-size: clamp(32px, 3.5vw, 48px);\n    font-weight: 900;\n    line-height: 1.55;\n    letter-spacing: -0.4px;\n\n    text-wrap: balance;\n}\n\n#dx-lms-faq .dx-faq-title span {\n    color: var(--dx-faq-yellow);\n}\n\n#dx-lms-faq .dx-faq-description {\n    max-width: 520px;\n\n    margin: 16px 0 0;\n\n    color: var(--dx-faq-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n\n    text-wrap: pretty;\n}\n\n#dx-lms-faq .dx-faq-contact-note {\n    margin-top: 28px;\n    padding-top: 23px;\n\n    border-top: 1px solid rgba(255, 255, 255, 0.12);\n}\n\n#dx-lms-faq .dx-faq-contact-title {\n    margin: 0;\n\n    color: var(--dx-faq-white);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.7;\n}\n\n#dx-lms-faq .dx-faq-contact-text {\n    margin: 5px 0 0;\n\n    color: var(--dx-faq-muted);\n\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1.8;\n}\n\n\/* =========================================================\n   FAQ LIST\n========================================================= *\/\n\n#dx-lms-faq .dx-faq-list {\n    display: grid;\n\n    gap: 12px;\n}\n\n\/* =========================================================\n   FAQ ITEM\n========================================================= *\/\n\n#dx-lms-faq .dx-faq-item {\n    overflow: hidden;\n\n    border: 1px solid var(--dx-faq-border);\n    border-radius: 17px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.09),\n            rgba(255, 255, 255, 0.04)\n        );\n\n    box-shadow:\n        0 16px 38px rgba(2, 0, 20, 0.20);\n\n    transition:\n        border-color 0.3s ease,\n        background 0.3s ease,\n        box-shadow 0.3s ease;\n}\n\n#dx-lms-faq .dx-faq-item.is-open {\n    border-color: rgba(145, 104, 239, 0.48);\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(145, 104, 239, 0.16),\n            rgba(255, 255, 255, 0.05)\n        );\n\n    box-shadow:\n        0 21px 46px rgba(2, 0, 20, 0.28);\n}\n\n\/* =========================================================\n   QUESTION\n========================================================= *\/\n\n#dx-lms-faq .dx-faq-question {\n    width: 100%;\n    min-height: 78px;\n\n    display: grid;\n    grid-template-columns:\n        auto\n        minmax(0, 1fr)\n        auto;\n\n    align-items: center;\n\n    gap: 16px;\n\n    padding:\n        17px\n        20px;\n\n    border: 0;\n\n    color: var(--dx-faq-white);\n\n    background: transparent;\n\n    text-align: left;\n    cursor: pointer;\n}\n\n#dx-lms-faq .dx-faq-number {\n    width: 35px;\n    height: 35px;\n    flex: 0 0 35px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 11px;\n\n    color: var(--dx-faq-yellow);\n\n    background: rgba(255, 196, 65, 0.09);\n\n    font-size: 14px;\n    font-weight: 900;\n}\n\n#dx-lms-faq .dx-faq-question-text {\n    color: var(--dx-faq-white);\n\n    font-size: 15px;\n    font-weight: 900;\n    line-height: 1.7;\n}\n\n#dx-lms-faq .dx-faq-toggle {\n    position: relative;\n\n    width: 35px;\n    height: 35px;\n    flex: 0 0 35px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid rgba(255, 255, 255, 0.13);\n    border-radius: 11px;\n\n    color: var(--dx-faq-white);\n\n    background: rgba(255, 255, 255, 0.055);\n\n    transition:\n        color 0.3s ease,\n        background 0.3s ease,\n        transform 0.3s ease;\n}\n\n#dx-lms-faq .dx-faq-toggle::before,\n#dx-lms-faq .dx-faq-toggle::after {\n    content: \"\";\n\n    position: absolute;\n\n    width: 14px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background: currentColor;\n\n    transition: transform 0.3s ease;\n}\n\n#dx-lms-faq .dx-faq-toggle::after {\n    transform: rotate(90deg);\n}\n\n#dx-lms-faq .dx-faq-item.is-open\n    .dx-faq-toggle {\n    color: #180b35;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-faq-yellow),\n            var(--dx-faq-yellow-light)\n        );\n}\n\n#dx-lms-faq .dx-faq-item.is-open\n    .dx-faq-toggle::after {\n    transform: rotate(0deg);\n}\n\n\/* =========================================================\n   ANSWER\n========================================================= *\/\n\n#dx-lms-faq .dx-faq-answer {\n    display: grid;\n    grid-template-rows: 0fr;\n\n    transition:\n        grid-template-rows 0.4s ease;\n}\n\n#dx-lms-faq .dx-faq-item.is-open\n    .dx-faq-answer {\n    grid-template-rows: 1fr;\n}\n\n#dx-lms-faq .dx-faq-answer-inner {\n    min-height: 0;\n    overflow: hidden;\n}\n\n#dx-lms-faq .dx-faq-answer-content {\n    margin:\n        0\n        20px\n        0\n        71px;\n\n    padding:\n        0\n        0\n        22px;\n\n    color: var(--dx-faq-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n\n    border-top: 1px solid rgba(255, 255, 255, 0.09);\n}\n\n#dx-lms-faq .dx-faq-answer-content p {\n    margin: 17px 0 0;\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 900px) {\n    #dx-lms-faq .dx-faq-main {\n        padding:\n            76px\n            28px\n            82px;\n    }\n\n    #dx-lms-faq .dx-faq-container {\n        grid-template-columns: 1fr;\n\n        gap: 40px;\n    }\n\n    #dx-lms-faq .dx-faq-intro {\n        position: static;\n\n        max-width: 780px;\n\n        margin: 0 auto;\n\n        text-align: center;\n    }\n\n    #dx-lms-faq .dx-faq-eyebrow {\n        justify-content: center;\n    }\n\n    #dx-lms-faq .dx-faq-eyebrow::after {\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-faq-yellow),\n                var(--dx-faq-purple-light)\n            );\n    }\n\n    #dx-lms-faq .dx-faq-description {\n        margin-right: auto;\n        margin-left: auto;\n    }\n\n    #dx-lms-faq .dx-faq-contact-note {\n        max-width: 640px;\n\n        margin-right: auto;\n        margin-left: auto;\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 600px) {\n    #dx-lms-faq .dx-faq-main {\n        padding:\n            59px\n            16px\n            65px;\n    }\n\n    #dx-lms-faq .dx-faq-container {\n        gap: 31px;\n    }\n\n    #dx-lms-faq .dx-faq-eyebrow {\n        margin-bottom: 10px;\n\n        font-size: 14px;\n    }\n\n    #dx-lms-faq .dx-faq-eyebrow::before,\n    #dx-lms-faq .dx-faq-eyebrow::after {\n        width: 22px;\n    }\n\n    #dx-lms-faq .dx-faq-title {\n        font-size: clamp(27px, 8.3vw, 36px);\n        line-height: 1.65;\n        letter-spacing: -0.2px;\n    }\n\n    #dx-lms-faq .dx-faq-description {\n        margin-top: 10px;\n\n        font-size: 14px;\n        line-height: 2;\n    }\n\n    #dx-lms-faq .dx-faq-contact-note {\n        margin-top: 21px;\n        padding-top: 18px;\n    }\n\n    #dx-lms-faq .dx-faq-contact-title,\n    #dx-lms-faq .dx-faq-contact-text {\n        font-size: 14px;\n    }\n\n    #dx-lms-faq .dx-faq-list {\n        gap: 10px;\n    }\n\n    #dx-lms-faq .dx-faq-item {\n        border-radius: 14px;\n    }\n\n    #dx-lms-faq .dx-faq-question {\n        min-height: 68px;\n\n        grid-template-columns:\n            minmax(0, 1fr)\n            auto;\n\n        gap: 12px;\n\n        padding:\n            14px\n            14px;\n    }\n\n    #dx-lms-faq .dx-faq-number {\n        display: none;\n    }\n\n    #dx-lms-faq .dx-faq-question-text {\n        font-size: 14px;\n        line-height: 1.8;\n    }\n\n    #dx-lms-faq .dx-faq-toggle {\n        width: 32px;\n        height: 32px;\n        flex-basis: 32px;\n\n        border-radius: 10px;\n    }\n\n    #dx-lms-faq .dx-faq-answer-content {\n        margin:\n            0\n            14px;\n\n        padding-bottom: 18px;\n\n        font-size: 14px;\n        line-height: 1.95;\n    }\n\n    #dx-lms-faq .dx-faq-answer-content p {\n        margin-top: 14px;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-lms-faq button:focus-visible {\n    outline: 3px solid var(--dx-faq-yellow);\n    outline-offset: 3px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    #dx-lms-faq *,\n    #dx-lms-faq *::before,\n    #dx-lms-faq *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-lms-faq\"\n    aria-labelledby=\"dx-lms-faq-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n    <div\n        class=\"dx-faq-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <div class=\"dx-faq-main\">\n\n        <div class=\"dx-faq-container\">\n\n            <div class=\"dx-faq-intro\">\n\n                <span class=\"dx-faq-eyebrow\">\n                    Clear Answers Before You Start\n                <\/span>\n\n                <h2\n                    id=\"dx-lms-faq-title\"\n                    class=\"dx-faq-title\"\n                >\n                    Frequently Asked\n                    <span>Questions<\/span>\n                <\/h2>\n\n                <p class=\"dx-faq-description\">\n                    Answers to common questions about developing,\n                    customizing, and operating a learning management\n                    system, helping you understand the process more\n                    clearly before implementation begins.\n                <\/p>\n\n                <div class=\"dx-faq-contact-note\">\n\n                    <h3 class=\"dx-faq-contact-title\">\n                        Didn\u2019t Find the Answer You Need?\n                    <\/h3>\n\n                    <p class=\"dx-faq-contact-text\">\n                        We can discuss your organization\u2019s requirements\n                        in detail and determine the most suitable solution\n                        based on your project.\n                    <\/p>\n\n                <\/div>\n\n            <\/div>\n\n            <div class=\"dx-faq-list\">\n\n                <!-- FAQ 01 -->\n\n                <article class=\"dx-faq-item is-open\">\n\n                    <h3>\n\n                        <button\n                            type=\"button\"\n                            class=\"dx-faq-question\"\n                            aria-expanded=\"true\"\n                            aria-controls=\"dx-faq-answer-1\"\n                        >\n                            <span class=\"dx-faq-number\">\n                                01\n                            <\/span>\n\n                            <span class=\"dx-faq-question-text\">\n                                Can the LMS be customized to match our organization\u2019s requirements?\n                            <\/span>\n\n                            <span\n                                class=\"dx-faq-toggle\"\n                                aria-hidden=\"true\"\n                            ><\/span>\n                        <\/button>\n\n                    <\/h3>\n\n                    <div\n                        id=\"dx-faq-answer-1\"\n                        class=\"dx-faq-answer\"\n                    >\n                        <div class=\"dx-faq-answer-inner\">\n\n                            <div class=\"dx-faq-answer-content\">\n                                <p>\n                                    Yes. The system design, branding,\n                                    permissions, dashboards, learning paths,\n                                    assessments, and reports can be customized\n                                    around your organization\u2019s workflow and\n                                    the different user groups that will use\n                                    the platform.\n                                <\/p>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n\n                <\/article>\n\n                <!-- FAQ 02 -->\n\n                <article class=\"dx-faq-item\">\n\n                    <h3>\n\n                        <button\n                            type=\"button\"\n                            class=\"dx-faq-question\"\n                            aria-expanded=\"false\"\n                            aria-controls=\"dx-faq-answer-2\"\n                        >\n                            <span class=\"dx-faq-number\">\n                                02\n                            <\/span>\n\n                            <span class=\"dx-faq-question-text\">\n                                Does the LMS support Arabic?\n                            <\/span>\n\n                            <span\n                                class=\"dx-faq-toggle\"\n                                aria-hidden=\"true\"\n                            ><\/span>\n                        <\/button>\n\n                    <\/h3>\n\n                    <div\n                        id=\"dx-faq-answer-2\"\n                        class=\"dx-faq-answer\"\n                    >\n                        <div class=\"dx-faq-answer-inner\">\n\n                            <div class=\"dx-faq-answer-content\">\n                                <p>\n                                    Yes. The system can be implemented fully\n                                    in Arabic with right-to-left support, and\n                                    English or additional languages can also\n                                    be added according to the requirements\n                                    of the project.\n                                <\/p>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n\n                <\/article>\n\n                <!-- FAQ 03 -->\n\n                <article class=\"dx-faq-item\">\n\n                    <h3>\n\n                        <button\n                            type=\"button\"\n                            class=\"dx-faq-question\"\n                            aria-expanded=\"false\"\n                            aria-controls=\"dx-faq-answer-3\"\n                        >\n                            <span class=\"dx-faq-number\">\n                                03\n                            <\/span>\n\n                            <span class=\"dx-faq-question-text\">\n                                Can the platform integrate with virtual classroom tools?\n                            <\/span>\n\n                            <span\n                                class=\"dx-faq-toggle\"\n                                aria-hidden=\"true\"\n                            ><\/span>\n                        <\/button>\n\n                    <\/h3>\n\n                    <div\n                        id=\"dx-faq-answer-3\"\n                        class=\"dx-faq-answer\"\n                    >\n                        <div class=\"dx-faq-answer-inner\">\n\n                            <div class=\"dx-faq-answer-content\">\n                                <p>\n                                    The platform can be integrated with\n                                    meeting and virtual classroom tools such\n                                    as Zoom, Microsoft Teams, and WebEx,\n                                    depending on the available integration\n                                    options and your organization\u2019s requirements.\n                                <\/p>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n\n                <\/article>\n\n                <!-- FAQ 04 -->\n\n                <article class=\"dx-faq-item\">\n\n                    <h3>\n\n                        <button\n                            type=\"button\"\n                            class=\"dx-faq-question\"\n                            aria-expanded=\"false\"\n                            aria-controls=\"dx-faq-answer-4\"\n                        >\n                            <span class=\"dx-faq-number\">\n                                04\n                            <\/span>\n\n                            <span class=\"dx-faq-question-text\">\n                                Can courses and users be migrated from an existing system?\n                            <\/span>\n\n                            <span\n                                class=\"dx-faq-toggle\"\n                                aria-hidden=\"true\"\n                            ><\/span>\n                        <\/button>\n\n                    <\/h3>\n\n                    <div\n                        id=\"dx-faq-answer-4\"\n                        class=\"dx-faq-answer\"\n                    >\n                        <div class=\"dx-faq-answer-inner\">\n\n                            <div class=\"dx-faq-answer-content\">\n                                <p>\n                                    We can review the current platform and\n                                    available data to determine whether users,\n                                    courses, files, and results can be migrated.\n                                    The migration approach depends on the data\n                                    format and export options available in the\n                                    existing system.\n                                <\/p>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n\n                <\/article>\n\n                <!-- FAQ 05 -->\n\n                <article class=\"dx-faq-item\">\n\n                    <h3>\n\n                        <button\n                            type=\"button\"\n                            class=\"dx-faq-question\"\n                            aria-expanded=\"false\"\n                            aria-controls=\"dx-faq-answer-5\"\n                        >\n                            <span class=\"dx-faq-number\">\n                                05\n                            <\/span>\n\n                            <span class=\"dx-faq-question-text\">\n                                Does the system work on mobile and tablet devices?\n                            <\/span>\n\n                            <span\n                                class=\"dx-faq-toggle\"\n                                aria-hidden=\"true\"\n                            ><\/span>\n                        <\/button>\n\n                    <\/h3>\n\n                    <div\n                        id=\"dx-faq-answer-5\"\n                        class=\"dx-faq-answer\"\n                    >\n                        <div class=\"dx-faq-answer-inner\">\n\n                            <div class=\"dx-faq-answer-content\">\n                                <p>\n                                    Yes. The system interfaces are developed\n                                    to be responsive across mobile, tablet,\n                                    and desktop devices, allowing learners\n                                    to access content and use essential\n                                    platform functions from different devices.\n                                <\/p>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n\n                <\/article>\n\n                <!-- FAQ 06 -->\n\n                <article class=\"dx-faq-item\">\n\n                    <h3>\n\n                        <button\n                            type=\"button\"\n                            class=\"dx-faq-question\"\n                            aria-expanded=\"false\"\n                            aria-controls=\"dx-faq-answer-6\"\n                        >\n                            <span class=\"dx-faq-number\">\n                                06\n                            <\/span>\n\n                            <span class=\"dx-faq-question-text\">\n                                Can we create assessments and issue certificates?\n                            <\/span>\n\n                            <span\n                                class=\"dx-faq-toggle\"\n                                aria-hidden=\"true\"\n                            ><\/span>\n                        <\/button>\n\n                    <\/h3>\n\n                    <div\n                        id=\"dx-faq-answer-6\"\n                        class=\"dx-faq-answer\"\n                    >\n                        <div class=\"dx-faq-answer-inner\">\n\n                            <div class=\"dx-faq-answer-content\">\n                                <p>\n                                    Yes. The system can support quizzes,\n                                    question banks, passing scores, multiple\n                                    attempts, and customized digital\n                                    certificates that are issued automatically\n                                    when the required course conditions are met.\n                                <\/p>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n\n                <\/article>\n\n                <!-- FAQ 07 -->\n\n                <article class=\"dx-faq-item\">\n\n                    <h3>\n\n                        <button\n                            type=\"button\"\n                            class=\"dx-faq-question\"\n                            aria-expanded=\"false\"\n                            aria-controls=\"dx-faq-answer-7\"\n                        >\n                            <span class=\"dx-faq-number\">\n                                07\n                            <\/span>\n\n                            <span class=\"dx-faq-question-text\">\n                                Is technical support available after launch?\n                            <\/span>\n\n                            <span\n                                class=\"dx-faq-toggle\"\n                                aria-hidden=\"true\"\n                            ><\/span>\n                        <\/button>\n\n                    <\/h3>\n\n                    <div\n                        id=\"dx-faq-answer-7\"\n                        class=\"dx-faq-answer\"\n                    >\n                        <div class=\"dx-faq-answer-inner\">\n\n                            <div class=\"dx-faq-answer-content\">\n                                <p>\n                                    Yes. Technical support and follow-up can\n                                    be provided after launch, along with\n                                    training for your organization\u2019s team on\n                                    managing the platform, content, users,\n                                    and reports according to the agreed\n                                    project scope.\n                                <\/p>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n\n                <\/article>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxLmsFaq() {\n        const section = document.getElementById(\n            \"dx-lms-faq\"\n        );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized = \"true\";\n\n        const widget = section.closest(\n            \".elementor-widget-html\"\n        );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-lms-faq-widget-fullwidth\"\n            );\n        }\n\n        const items = Array.from(\n            section.querySelectorAll(\n                \".dx-faq-item\"\n            )\n        );\n\n        items.forEach(function (item) {\n            const button = item.querySelector(\n                \".dx-faq-question\"\n            );\n\n            if (!button) {\n                return;\n            }\n\n            button.addEventListener(\n                \"click\",\n                function () {\n                    const isOpen =\n                        item.classList.contains(\n                            \"is-open\"\n                        );\n\n                    items.forEach(function (currentItem) {\n                        const currentButton =\n                            currentItem.querySelector(\n                                \".dx-faq-question\"\n                            );\n\n                        currentItem.classList.remove(\n                            \"is-open\"\n                        );\n\n                        if (currentButton) {\n                            currentButton.setAttribute(\n                                \"aria-expanded\",\n                                \"false\"\n                            );\n                        }\n                    });\n\n                    if (!isOpen) {\n                        item.classList.add(\n                            \"is-open\"\n                        );\n\n                        button.setAttribute(\n                            \"aria-expanded\",\n                            \"true\"\n                        );\n                    }\n                }\n            );\n        });\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDxLmsFaq\n        );\n    } else {\n        initDxLmsFaq();\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-0c63e78 e-con-full e-flex e-con e-parent\" data-id=\"0c63e78\" 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-f0e1542 elementor-widget elementor-widget-html\" data-id=\"f0e1542\" 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     LMS SERVICE PAGE \u2014 FINAL CTA SECTION\n     Author: Mohamed El-Sehemy\n     English LTR - Elementor Compatible\n========================================================== -->\n\n<style>\n\/* =========================================================\n   ELEMENTOR FULL WIDTH\n========================================================= *\/\n\n.elementor-widget-html:has(#dx-lms-final-cta),\n.elementor-widget-html:has(#dx-lms-final-cta) > .elementor-widget-container,\n.dx-lms-final-cta-widget-fullwidth,\n.dx-lms-final-cta-widget-fullwidth > .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n}\n\n\/* =========================================================\n   RESET & VARIABLES\n========================================================= *\/\n\n#dx-lms-final-cta,\n#dx-lms-final-cta *,\n#dx-lms-final-cta *::before,\n#dx-lms-final-cta *::after {\n    box-sizing: border-box;\n}\n\n#dx-lms-final-cta {\n    --dx-cta-bg: #f5f1fb;\n    --dx-cta-white: #ffffff;\n    --dx-cta-dark: #180b35;\n    --dx-cta-text: #6d6478;\n    --dx-cta-muted: #958d9f;\n    --dx-cta-purple: #6942d8;\n    --dx-cta-purple-light: #9168ef;\n    --dx-cta-yellow: #ffc441;\n    --dx-cta-yellow-light: #ffd66e;\n    --dx-cta-green: #54d696;\n    --dx-cta-border: rgba(105, 66, 216, 0.13);\n\n    position: relative;\n    isolation: isolate;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-right: calc(50% - 50vw);\n    margin-left: calc(50% - 50vw);\n\n    overflow: hidden;\n    direction: ltr;\n\n    color: var(--dx-cta-dark);\n\n    background:\n        radial-gradient(\n            circle at 12% 20%,\n            rgba(105, 66, 216, 0.09),\n            transparent 28%\n        ),\n        radial-gradient(\n            circle at 88% 82%,\n            rgba(145, 104, 239, 0.08),\n            transparent 26%\n        ),\n        var(--dx-cta-bg);\n\n    font-family:\n        \"Inter\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n#dx-lms-final-cta a {\n    color: inherit;\n    text-decoration: none;\n}\n\n\/* =========================================================\n   BACKGROUND\n========================================================= *\/\n\n#dx-lms-final-cta .dx-cta-grid-bg {\n    position: absolute;\n    z-index: -5;\n\n    inset: 0;\n\n    opacity: 0.16;\n\n    background-image:\n        linear-gradient(\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(105, 66, 216, 0.04) 1px,\n            transparent 1px\n        );\n\n    background-size: 72px 72px;\n\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 20%,\n            transparent 82%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 20%,\n            transparent 82%\n        );\n\n    pointer-events: none;\n}\n\n\/* =========================================================\n   MAIN\n========================================================= *\/\n\n#dx-lms-final-cta .dx-cta-main {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n\n    padding:\n        76px\n        clamp(22px, 5vw, 90px)\n        82px;\n}\n\n#dx-lms-final-cta .dx-cta-container {\n    width: min(1320px, 100%);\n    margin: 0 auto;\n}\n\n\/* =========================================================\n   CTA PANEL\n========================================================= *\/\n\n#dx-lms-final-cta .dx-cta-panel {\n    position: relative;\n    isolation: isolate;\n\n    min-height: 360px;\n\n    display: grid;\n    grid-template-columns:\n        minmax(0, 1.1fr)\n        minmax(330px, 0.9fr);\n\n    align-items: center;\n\n    gap: clamp(35px, 5vw, 70px);\n\n    overflow: hidden;\n\n    padding:\n        52px\n        clamp(30px, 5vw, 68px);\n\n    border: 1px solid rgba(105, 66, 216, 0.16);\n    border-radius: 30px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255, 255, 255, 0.97),\n            rgba(248, 245, 253, 0.96)\n        );\n\n    box-shadow:\n        0 28px 75px rgba(40, 18, 84, 0.12),\n        inset 0 1px 0 rgba(255, 255, 255, 0.98);\n}\n\n#dx-lms-final-cta .dx-cta-panel::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    top: -180px;\n    left: -120px;\n\n    width: 430px;\n    height: 430px;\n\n    border-radius: 50%;\n\n    background: rgba(105, 66, 216, 0.12);\n\n    filter: blur(95px);\n\n    pointer-events: none;\n}\n\n#dx-lms-final-cta .dx-cta-panel::after {\n    content: \"\";\n\n    position: absolute;\n    z-index: -2;\n\n    right: -150px;\n    bottom: -220px;\n\n    width: 460px;\n    height: 460px;\n\n    border-radius: 50%;\n\n    background: rgba(255, 196, 65, 0.11);\n\n    filter: blur(105px);\n\n    pointer-events: none;\n}\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n#dx-lms-final-cta .dx-cta-content {\n    position: relative;\n    z-index: 3;\n\n    min-width: 0;\n}\n\n#dx-lms-final-cta .dx-cta-eyebrow {\n    display: inline-flex;\n    align-items: center;\n\n    gap: 10px;\n\n    margin-bottom: 13px;\n\n    color: var(--dx-cta-purple);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-lms-final-cta .dx-cta-eyebrow::before {\n    content: \"\";\n\n    width: 38px;\n    height: 2px;\n\n    border-radius: 999px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--dx-cta-yellow),\n            var(--dx-cta-purple-light)\n        );\n}\n\n#dx-lms-final-cta .dx-cta-title {\n    max-width: 760px;\n\n    margin: 0;\n\n    color: var(--dx-cta-dark);\n\n    font-size: clamp(34px, 3.8vw, 53px);\n    font-weight: 900;\n    line-height: 1.5;\n    letter-spacing: -0.5px;\n\n    text-wrap: balance;\n}\n\n#dx-lms-final-cta .dx-cta-title span {\n    color: var(--dx-cta-purple);\n}\n\n#dx-lms-final-cta .dx-cta-description {\n    max-width: 690px;\n\n    margin:\n        15px\n        0\n        0;\n\n    color: var(--dx-cta-text);\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 2;\n\n    text-wrap: pretty;\n}\n\n\/* =========================================================\n   ACTIONS\n========================================================= *\/\n\n#dx-lms-final-cta .dx-cta-actions {\n    margin-top: 28px;\n\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    gap: 12px;\n}\n\n#dx-lms-final-cta .dx-cta-button {\n    min-width: 205px;\n    min-height: 54px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 9px;\n\n    padding:\n        0\n        24px;\n\n    border: 1px solid transparent;\n    border-radius: 12px;\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1;\n    white-space: nowrap;\n\n    transition:\n        transform 0.25s ease,\n        border-color 0.25s ease,\n        background 0.25s ease,\n        box-shadow 0.25s ease;\n}\n\n#dx-lms-final-cta .dx-cta-button-primary {\n    color: #ffffff;\n\n    border-color: rgba(105, 66, 216, 0.20);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-cta-purple),\n            var(--dx-cta-purple-light)\n        );\n\n    box-shadow:\n        0 17px 36px rgba(105, 66, 216, 0.24);\n}\n\n#dx-lms-final-cta .dx-cta-button-secondary {\n    color: var(--dx-cta-dark);\n\n    border-color: rgba(105, 66, 216, 0.15);\n\n    background: rgba(255, 255, 255, 0.78);\n\n    box-shadow:\n        0 12px 28px rgba(40, 18, 84, 0.07);\n}\n\n#dx-lms-final-cta .dx-cta-button:hover,\n#dx-lms-final-cta .dx-cta-button:focus-visible {\n    transform: translateY(-3px);\n}\n\n#dx-lms-final-cta .dx-cta-button-primary:hover,\n#dx-lms-final-cta .dx-cta-button-primary:focus-visible {\n    box-shadow:\n        0 23px 47px rgba(105, 66, 216, 0.32);\n}\n\n#dx-lms-final-cta .dx-cta-button-secondary:hover,\n#dx-lms-final-cta .dx-cta-button-secondary:focus-visible {\n    color: var(--dx-cta-purple);\n\n    border-color: rgba(105, 66, 216, 0.32);\n\n    background: #ffffff;\n\n    box-shadow:\n        0 18px 38px rgba(40, 18, 84, 0.11);\n}\n\n#dx-lms-final-cta .dx-cta-button svg {\n    width: 18px;\n    height: 18px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   TRUST POINTS\n========================================================= *\/\n\n#dx-lms-final-cta .dx-cta-points {\n    margin-top: 22px;\n\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    gap:\n        10px\n        22px;\n}\n\n#dx-lms-final-cta .dx-cta-point {\n    display: inline-flex;\n    align-items: center;\n\n    gap: 8px;\n\n    color: var(--dx-cta-muted);\n\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 1.6;\n}\n\n#dx-lms-final-cta .dx-cta-point-icon {\n    width: 20px;\n    height: 20px;\n    flex: 0 0 20px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 7px;\n\n    color: #16845a;\n\n    background: rgba(84, 214, 150, 0.14);\n}\n\n#dx-lms-final-cta .dx-cta-point-icon svg {\n    width: 11px;\n    height: 11px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2.3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   SUMMARY PANEL\n========================================================= *\/\n\n#dx-lms-final-cta .dx-cta-summary {\n    position: relative;\n    z-index: 3;\n\n    min-width: 0;\n\n    padding:\n        27px\n        25px;\n\n    border: 1px solid rgba(105, 66, 216, 0.14);\n    border-radius: 23px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(105, 66, 216, 0.08),\n            rgba(255, 255, 255, 0.74)\n        );\n\n    box-shadow:\n        0 20px 50px rgba(40, 18, 84, 0.09);\n}\n\n#dx-lms-final-cta .dx-cta-summary-head {\n    display: flex;\n    align-items: center;\n\n    gap: 13px;\n\n    padding-bottom: 19px;\n\n    border-bottom: 1px solid rgba(105, 66, 216, 0.11);\n}\n\n#dx-lms-final-cta .dx-cta-summary-icon {\n    width: 54px;\n    height: 54px;\n    flex: 0 0 54px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 17px;\n\n    color: #ffffff;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--dx-cta-purple),\n            var(--dx-cta-purple-light)\n        );\n\n    box-shadow:\n        0 15px 32px rgba(105, 66, 216, 0.23);\n}\n\n#dx-lms-final-cta .dx-cta-summary-icon svg {\n    width: 28px;\n    height: 28px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n#dx-lms-final-cta .dx-cta-summary-head-copy {\n    min-width: 0;\n}\n\n#dx-lms-final-cta .dx-cta-summary-title {\n    margin: 0;\n\n    color: var(--dx-cta-dark);\n\n    font-size: 16px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-lms-final-cta .dx-cta-summary-subtitle {\n    margin:\n        3px\n        0\n        0;\n\n    color: var(--dx-cta-text);\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.7;\n}\n\n\/* =========================================================\n   SUMMARY LIST\n========================================================= *\/\n\n#dx-lms-final-cta .dx-cta-summary-list {\n    margin-top: 20px;\n\n    display: grid;\n\n    gap: 12px;\n}\n\n#dx-lms-final-cta .dx-cta-summary-item {\n    display: grid;\n    grid-template-columns:\n        34px\n        minmax(0, 1fr);\n\n    align-items: center;\n\n    gap: 11px;\n}\n\n#dx-lms-final-cta .dx-cta-summary-number {\n    width: 34px;\n    height: 34px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 10px;\n\n    color: var(--dx-cta-purple);\n\n    background: rgba(105, 66, 216, 0.09);\n\n    font-size: 14px;\n    font-weight: 900;\n}\n\n#dx-lms-final-cta .dx-cta-summary-item:nth-child(2)\n    .dx-cta-summary-number {\n    color: #9b6c00;\n\n    background: rgba(255, 196, 65, 0.18);\n}\n\n#dx-lms-final-cta .dx-cta-summary-item:nth-child(3)\n    .dx-cta-summary-number {\n    color: #16845a;\n\n    background: rgba(84, 214, 150, 0.15);\n}\n\n#dx-lms-final-cta .dx-cta-summary-copy {\n    min-width: 0;\n}\n\n#dx-lms-final-cta .dx-cta-summary-item-title {\n    display: block;\n\n    color: var(--dx-cta-dark);\n\n    font-size: 14px;\n    font-weight: 900;\n    line-height: 1.6;\n}\n\n#dx-lms-final-cta .dx-cta-summary-item-text {\n    display: block;\n\n    margin-top: 2px;\n\n    color: var(--dx-cta-muted);\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.7;\n}\n\n\/* =========================================================\n   SUMMARY FOOTER\n========================================================= *\/\n\n#dx-lms-final-cta .dx-cta-summary-footer {\n    margin-top: 21px;\n    padding-top: 18px;\n\n    display: flex;\n    align-items: center;\n\n    gap: 10px;\n\n    border-top: 1px solid rgba(105, 66, 216, 0.11);\n\n    color: var(--dx-cta-text);\n\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 1.7;\n}\n\n#dx-lms-final-cta .dx-cta-summary-status {\n    width: 8px;\n    height: 8px;\n    flex: 0 0 8px;\n\n    border-radius: 50%;\n\n    background: var(--dx-cta-green);\n\n    box-shadow:\n        0 0 0 5px rgba(84, 214, 150, 0.12);\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 900px) {\n    #dx-lms-final-cta .dx-cta-main {\n        padding:\n            68px\n            28px\n            74px;\n    }\n\n    #dx-lms-final-cta .dx-cta-panel {\n        grid-template-columns: 1fr;\n\n        min-height: 0;\n\n        padding:\n            45px\n            40px;\n\n        text-align: center;\n    }\n\n    #dx-lms-final-cta .dx-cta-eyebrow,\n    #dx-lms-final-cta .dx-cta-actions,\n    #dx-lms-final-cta .dx-cta-points {\n        justify-content: center;\n    }\n\n    #dx-lms-final-cta .dx-cta-title,\n    #dx-lms-final-cta .dx-cta-description {\n        margin-right: auto;\n        margin-left: auto;\n    }\n\n    #dx-lms-final-cta .dx-cta-summary {\n        width: min(100%, 600px);\n\n        margin: 0 auto;\n\n        text-align: left;\n    }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 600px) {\n    #dx-lms-final-cta .dx-cta-main {\n        padding:\n            52px\n            16px\n            58px;\n    }\n\n    #dx-lms-final-cta .dx-cta-panel {\n        gap: 30px;\n\n        padding:\n            30px\n            18px;\n\n        border-radius: 21px;\n    }\n\n    #dx-lms-final-cta .dx-cta-eyebrow {\n        margin-bottom: 10px;\n\n        font-size: 14px;\n    }\n\n    #dx-lms-final-cta .dx-cta-eyebrow::before {\n        width: 27px;\n    }\n\n    #dx-lms-final-cta .dx-cta-title {\n        font-size: clamp(28px, 8.5vw, 37px);\n        line-height: 1.62;\n        letter-spacing: -0.2px;\n    }\n\n    #dx-lms-final-cta .dx-cta-description {\n        margin-top: 10px;\n\n        font-size: 14px;\n        line-height: 2;\n    }\n\n    #dx-lms-final-cta .dx-cta-actions {\n        margin-top: 23px;\n\n        display: grid;\n        grid-template-columns: 1fr;\n\n        gap: 9px;\n    }\n\n    #dx-lms-final-cta .dx-cta-button {\n        width: 100%;\n        min-width: 0;\n        min-height: 50px;\n\n        font-size: 14px;\n    }\n\n    #dx-lms-final-cta .dx-cta-points {\n        margin-top: 18px;\n\n        justify-content: flex-start;\n\n        gap:\n            8px\n            14px;\n    }\n\n    #dx-lms-final-cta .dx-cta-point {\n        font-size: 14px;\n    }\n\n    #dx-lms-final-cta .dx-cta-summary {\n        padding:\n            21px\n            17px;\n\n        border-radius: 18px;\n    }\n\n    #dx-lms-final-cta .dx-cta-summary-head {\n        padding-bottom: 15px;\n    }\n\n    #dx-lms-final-cta .dx-cta-summary-icon {\n        width: 47px;\n        height: 47px;\n        flex-basis: 47px;\n\n        border-radius: 14px;\n    }\n\n    #dx-lms-final-cta .dx-cta-summary-icon svg {\n        width: 24px;\n        height: 24px;\n    }\n\n    #dx-lms-final-cta .dx-cta-summary-title {\n        font-size: 14px;\n    }\n\n    #dx-lms-final-cta .dx-cta-summary-subtitle {\n        font-size: 14px;\n    }\n\n    #dx-lms-final-cta .dx-cta-summary-list {\n        margin-top: 16px;\n\n        gap: 10px;\n    }\n\n    #dx-lms-final-cta .dx-cta-summary-item {\n        grid-template-columns:\n            31px\n            minmax(0, 1fr);\n\n        gap: 9px;\n    }\n\n    #dx-lms-final-cta .dx-cta-summary-number {\n        width: 31px;\n        height: 31px;\n\n        border-radius: 9px;\n\n        font-size: 14px;\n    }\n\n    #dx-lms-final-cta .dx-cta-summary-item-title {\n        font-size: 14px;\n    }\n\n    #dx-lms-final-cta .dx-cta-summary-item-text {\n        font-size: 14px;\n    }\n\n    #dx-lms-final-cta .dx-cta-summary-footer {\n        margin-top: 17px;\n        padding-top: 15px;\n\n        font-size: 14px;\n    }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n#dx-lms-final-cta a:focus-visible {\n    outline: 3px solid var(--dx-cta-yellow);\n    outline-offset: 4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    #dx-lms-final-cta *,\n    #dx-lms-final-cta *::before,\n    #dx-lms-final-cta *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n}\n<\/style>\n\n<section\n    id=\"dx-lms-final-cta\"\n    aria-labelledby=\"dx-lms-final-cta-title\"\n    dir=\"ltr\"\n    lang=\"en\"\n>\n    <div\n        class=\"dx-cta-grid-bg\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n    <div class=\"dx-cta-main\">\n\n        <div class=\"dx-cta-container\">\n\n            <div class=\"dx-cta-panel\">\n\n                <div class=\"dx-cta-content\">\n\n                    <span class=\"dx-cta-eyebrow\">\n                        Start Building Your Learning Platform\n                    <\/span>\n\n                    <h2\n                        id=\"dx-lms-final-cta-title\"\n                        class=\"dx-cta-title\"\n                    >\n                        Turn Your Content and Expertise Into an\n                        <span>Integrated Learning Platform<\/span>\n                    <\/h2>\n\n                    <p class=\"dx-cta-description\">\n                        Share your organization\u2019s requirements with us,\n                        and we will help you define the right features,\n                        design, and integrations for a learning management\n                        system that is easy to use, scalable, and ready\n                        to grow with your needs.\n                    <\/p>\n\n                    <div class=\"dx-cta-actions\">\n\n                        <a\n                            href=\"https:\/\/dindex.net\/en\/contact\/\"\n                            class=\"dx-cta-button dx-cta-button-primary\"\n                        >\n                            <span>Get a Free Consultation<\/span>\n\n                            <svg\n                                viewBox=\"0 0 24 24\"\n                                aria-hidden=\"true\"\n                            >\n                                <path d=\"M5 12h14\"><\/path>\n                                <path d=\"m13 6 6 6-6 6\"><\/path>\n                            <\/svg>\n                        <\/a>\n\n                        <a\n                            href=\"#dx-lms-features\"\n                            class=\"dx-cta-button dx-cta-button-secondary\"\n                        >\n                            <span>Review LMS Features<\/span>\n\n                            <svg\n                                viewBox=\"0 0 24 24\"\n                                aria-hidden=\"true\"\n                            >\n                                <path d=\"M12 19V5\"><\/path>\n                                <path d=\"m6 11 6-6 6 6\"><\/path>\n                            <\/svg>\n                        <\/a>\n\n                    <\/div>\n\n                    <div\n                        class=\"dx-cta-points\"\n                        aria-label=\"Project consultation benefits\"\n                    >\n\n                        <span class=\"dx-cta-point\">\n\n                            <span\n                                class=\"dx-cta-point-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            Requirements Analysis\n\n                        <\/span>\n\n                        <span class=\"dx-cta-point\">\n\n                            <span\n                                class=\"dx-cta-point-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            Custom Design\n\n                        <\/span>\n\n                        <span class=\"dx-cta-point\">\n\n                            <span\n                                class=\"dx-cta-point-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <path d=\"m5 12 4 4L19 6\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            Post-Launch Support\n\n                        <\/span>\n\n                    <\/div>\n\n                <\/div>\n\n                <aside\n                    class=\"dx-cta-summary\"\n                    aria-label=\"Project start process summary\"\n                >\n\n                    <div class=\"dx-cta-summary-head\">\n\n                        <span\n                            class=\"dx-cta-summary-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"m3 9 9-5 9 5-9 5-9-5z\"><\/path>\n                                <path d=\"M7 12v5c3 2 7 2 10 0v-5\"><\/path>\n                                <path d=\"M21 9v6\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <div class=\"dx-cta-summary-head-copy\">\n\n                            <h3 class=\"dx-cta-summary-title\">\n                                Start With Clear Steps\n                            <\/h3>\n\n                            <p class=\"dx-cta-summary-subtitle\">\n                                From discussing your idea to defining the right solution\n                            <\/p>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <div class=\"dx-cta-summary-list\">\n\n                        <div class=\"dx-cta-summary-item\">\n\n                            <span class=\"dx-cta-summary-number\">\n                                01\n                            <\/span>\n\n                            <span class=\"dx-cta-summary-copy\">\n\n                                <strong class=\"dx-cta-summary-item-title\">\n                                    Share Your Requirements\n                                <\/strong>\n\n                                <span class=\"dx-cta-summary-item-text\">\n                                    Tell us about your organization, users, and learning content.\n                                <\/span>\n\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-cta-summary-item\">\n\n                            <span class=\"dx-cta-summary-number\">\n                                02\n                            <\/span>\n\n                            <span class=\"dx-cta-summary-copy\">\n\n                                <strong class=\"dx-cta-summary-item-title\">\n                                    We Define the Right Solution\n                                <\/strong>\n\n                                <span class=\"dx-cta-summary-item-text\">\n                                    We identify the required features, design, and integrations.\n                                <\/span>\n\n                            <\/span>\n\n                        <\/div>\n\n                        <div class=\"dx-cta-summary-item\">\n\n                            <span class=\"dx-cta-summary-number\">\n                                03\n                            <\/span>\n\n                            <span class=\"dx-cta-summary-copy\">\n\n                                <strong class=\"dx-cta-summary-item-title\">\n                                    We Build the Implementation Plan\n                                <\/strong>\n\n                                <span class=\"dx-cta-summary-item-text\">\n                                    Clear stages for design, development, testing, and launch.\n                                <\/span>\n\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                    <div class=\"dx-cta-summary-footer\">\n\n                        <span\n                            class=\"dx-cta-summary-status\"\n                            aria-hidden=\"true\"\n                        ><\/span>\n\n                        <span>\n                            The initial consultation helps define the project scope more clearly.\n                        <\/span>\n\n                    <\/div>\n\n                <\/aside>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    \"use strict\";\n\n    function initDxLmsFinalCta() {\n        const section = document.getElementById(\n            \"dx-lms-final-cta\"\n        );\n\n        if (\n            !section ||\n            section.dataset.dxInitialized === \"true\"\n        ) {\n            return;\n        }\n\n        section.dataset.dxInitialized = \"true\";\n\n        const widget = section.closest(\n            \".elementor-widget-html\"\n        );\n\n        if (widget) {\n            widget.classList.add(\n                \"dx-lms-final-cta-widget-fullwidth\"\n            );\n        }\n\n        const anchorLink = section.querySelector(\n            'a[href=\"#dx-lms-features\"]'\n        );\n\n        if (anchorLink) {\n            anchorLink.addEventListener(\n                \"click\",\n                function (event) {\n                    const target = document.getElementById(\n                        \"dx-lms-features\"\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            initDxLmsFinalCta\n        );\n    } else {\n        initDxLmsFinalCta();\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>Learning Management System An Integrated LMS That Turns Your Content Into an Effective Learning Experience Create and manage courses, learners, instructors, assessments, and certificates from one platform, with virtual classrooms and reporting tools that help you monitor performance and improve the learning experience. Centralized Management Reports &#038; Analytics Customizable &#038; Scalable Get a Free Consultation [&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-398","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>LMS - 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\/lms\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"LMS - D-INDEX - Your Partner in Digital Transformation\" \/>\n<meta property=\"og:description\" content=\"Learning Management System An Integrated LMS That Turns Your Content Into an Effective Learning Experience Create and manage courses, learners, instructors, assessments, and certificates from one platform, with virtual classrooms and reporting tools that help you monitor performance and improve the learning experience. Centralized Management Reports &#038; Analytics Customizable &#038; Scalable Get a Free Consultation [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dindex.net\/lms\/\" \/>\n<meta property=\"og:site_name\" content=\"D-INDEX - Your Partner in Digital Transformation\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-20T08:34:23+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=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/dindex.net\\\/lms\\\/\",\"url\":\"https:\\\/\\\/dindex.net\\\/lms\\\/\",\"name\":\"LMS - D-INDEX - Your Partner in Digital Transformation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/dindex.net\\\/#website\"},\"datePublished\":\"2025-04-06T08:21:30+00:00\",\"dateModified\":\"2026-08-20T08:34:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/dindex.net\\\/lms\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/dindex.net\\\/lms\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/dindex.net\\\/lms\\\/#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\":\"LMS\"}]},{\"@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":"LMS - 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\/lms\/","og_locale":"en_US","og_type":"article","og_title":"LMS - D-INDEX - Your Partner in Digital Transformation","og_description":"Learning Management System An Integrated LMS That Turns Your Content Into an Effective Learning Experience Create and manage courses, learners, instructors, assessments, and certificates from one platform, with virtual classrooms and reporting tools that help you monitor performance and improve the learning experience. Centralized Management Reports &#038; Analytics Customizable &#038; Scalable Get a Free Consultation [&hellip;]","og_url":"https:\/\/dindex.net\/lms\/","og_site_name":"D-INDEX - Your Partner in Digital Transformation","article_modified_time":"2026-08-20T08:34:23+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dindex.net\/lms\/","url":"https:\/\/dindex.net\/lms\/","name":"LMS - D-INDEX - Your Partner in Digital Transformation","isPartOf":{"@id":"https:\/\/dindex.net\/#website"},"datePublished":"2025-04-06T08:21:30+00:00","dateModified":"2026-08-20T08:34:23+00:00","breadcrumb":{"@id":"https:\/\/dindex.net\/lms\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dindex.net\/lms\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/dindex.net\/lms\/#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":"LMS"}]},{"@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\/398","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=398"}],"version-history":[{"count":21,"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/pages\/398\/revisions"}],"predecessor-version":[{"id":4051,"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/pages\/398\/revisions\/4051"}],"wp:attachment":[{"href":"https:\/\/dindex.net\/en\/wp-json\/wp\/v2\/media?parent=398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}