{"id":502,"date":"2025-03-12T14:39:36","date_gmt":"2025-03-12T14:39:36","guid":{"rendered":"https:\/\/webangon.com\/sites\/educash\/tutor\/?page_id=502"},"modified":"2025-12-06T04:47:31","modified_gmt":"2025-12-06T01:47:31","slug":"home-2","status":"publish","type":"page","link":"https:\/\/dat-center.com\/en\/","title":{"rendered":"Home 2"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"502\" class=\"elementor elementor-502\">\n\t\t\t\t<div class=\"elementor-element elementor-element-33d2b04 e-con-full e-flex e-con e-parent\" data-id=\"33d2b04\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4b8c874 elementor-widget elementor-widget-shortcode\" data-id=\"4b8c874\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    \n    <!-- \u0627\u0633\u062a\u062f\u0639\u0627\u0621 \u062e\u0637 Tajawal -->\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;500;700;800&display=swap\" rel=\"stylesheet\">\n\n    <!-- === HERO SECTION === -->\n    <!-- \u062a\u0645 \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u062a\u063a\u064a\u0631 \u0627\u0644\u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a \u0644\u0644\u0627\u062a\u062c\u0627\u0647 -->\n    <section class=\"dat-hero-wrap\" dir=\"ltr\">\n        \n        <!-- \u0639\u0646\u0627\u0635\u0631 \u062f\u064a\u0643\u0648\u0631 \u062e\u0644\u0641\u064a\u0629 -->\n        <div class=\"dat-blob-bg\"><\/div>\n\n        <div class=\"dat-container\">\n            <div class=\"dat-hero-grid\">\n                \n                <!-- 1. \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0646\u0635\u064a -->\n                <div class=\"dat-hero-content\">\n                    <span class=\"dat-badge\">Start Towards Success<\/span>\n                    \n                    <h1 class=\"dat-hero-title\">\n                        Boost Your Future with <br>\n                        <span class=\"highlight\">Online Learning<\/span>\n                    <\/h1>\n                    \n                    <p class=\"dat-hero-desc\">\n                        Discover a wide range of courses from top instructors and leading institutions. Learn at your own pace, gain practical skills, and achieve your goals - anytime, anywhere.                    <\/p>\n\n                    <!-- \u0634\u0631\u064a\u0637 \u0627\u0644\u0628\u062d\u062b \u0627\u0644\u0630\u0643\u064a -->\n                    <form role=\"search\" method=\"get\" class=\"dat-hero-search\" action=\"https:\/\/dat-center.com\/en\/\" data-trp-original-action=\"https:\/\/dat-center.com\/en\/\">\n                        <input type=\"hidden\" name=\"post_type\" value=\"courses\"> \n                        <div class=\"dat-input-group\">\n                            <i class=\"fa-solid fa-magnifying-glass search-icon\"><\/i>\n                            <input type=\"search\" name=\"s\" placeholder=\"What do you want to learn?\" required>\n                            <button type=\"submit\">Search<\/button>\n                        <\/div>\n                    <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n\n                    <!-- \u0625\u062d\u0635\u0627\u0626\u064a\u0627\u062a \u0633\u0631\u064a\u0639\u0629 -->\n                    <div class=\"dat-mini-stats\">\n                        <div class=\"d-stat\"><i class=\"fa-regular fa-circle-check\"><\/i> <span>Certified Certificates<\/span><\/div>\n                        <div class=\"d-stat\"><i class=\"fa-regular fa-user\"><\/i> <span>Expert Instructors<\/span><\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- 2. \u0627\u0644\u0635\u0648\u0631\u0629 -->\n                <div class=\"dat-hero-visual\">\n                    <div class=\"img-wrapper\">\n                        <img decoding=\"async\" src=\"http:\/\/dat-center.com\/wp-content\/uploads\/2025\/12\/image-1.png\" alt=\"Learning Platform\" class=\"floating-img\">\n                        <div class=\"float-element icon-1\"><i class=\"fa-solid fa-lightbulb\"><\/i><\/div>\n                        <div class=\"float-element icon-2\"><i class=\"fa-solid fa-graduation-cap\"><\/i><\/div>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- === STYLES === -->\n    <style>\n        :root {\n            --d-purple: #66498F;\n            --d-orange: #F79F53;\n            --d-dark: #2d2d2d;\n            --d-text: #666;\n            --cont-w: 1240px;\n        }\n\n        \/* \u062d\u0627\u0648\u064a\u0629 \u0627\u0644\u0642\u0633\u0645 *\/\n        .dat-hero-wrap {\n            position: relative;\n            padding: 80px 0 60px 0;\n            background: #fff;\n            overflow: hidden;\n            font-family: 'Tajawal', sans-serif;\n            text-align: left; \/* \u0645\u062d\u0627\u0630\u0627\u0629 \u0627\u0644\u0646\u0635 \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\u0629 *\/\n        }\n\n        \/* \u0627\u0644\u062d\u0627\u0648\u064a\u0629 \u0627\u0644\u0639\u0627\u0645\u0629 *\/\n        .dat-container {\n            max-width: var(--cont-w);\n            width: 92%;\n            margin: 0 auto;\n            position: relative;\n            z-index: 2;\n        }\n\n        \/* \u0627\u0644\u0634\u0628\u0643\u0629 (Grid) - \u062a\u062f\u0639\u0645 \u0627\u0644\u0627\u062a\u062c\u0627\u0647 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b *\/\n        .dat-hero-grid {\n            display: grid;\n            grid-template-columns: 1.1fr 0.9fr;\n            gap: 50px;\n            align-items: center;\n        }\n\n        \/* --- \u0627\u0644\u062c\u0627\u0646\u0628 \u0627\u0644\u0646\u0635\u064a --- *\/\n        .dat-badge {\n            display: inline-block;\n            background: rgba(102, 73, 143, 0.1);\n            color: var(--d-purple);\n            padding: 8px 20px;\n            border-radius: 30px;\n            font-weight: 700;\n            font-size: 14px;\n            margin-bottom: 20px;\n        }\n\n        .dat-hero-title {\n            font-size: 52px;\n            line-height: 1.3;\n            color: var(--d-dark);\n            margin: 0 0 25px 0;\n            font-weight: 800;\n        }\n\n        .dat-hero-title .highlight {\n            color: var(--d-purple);\n            position: relative;\n            display: inline-block;\n        }\n        \n        \/* \u062e\u0637 \u0632\u062e\u0631\u0641\u064a - \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a \u0627\u0644\u0627\u062a\u062c\u0627\u0647 *\/\n        .dat-hero-title .highlight::after {\n            content: '';\n            position: absolute;\n            bottom: 5px;\n            \/* \u0627\u0633\u062a\u0628\u062f\u0627\u0644 right:0 \u0628\u0640 \u0627\u0644\u0645\u062a\u063a\u064a\u0631 \u0627\u0644\u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a \u0644\u0639\u0643\u0633 \u0627\u0644\u0645\u0643\u0627\u0646 \u0641\u064a \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 *\/\n            left: 0; \n            width: 100%;\n            height: 8px;\n            background: var(--d-orange);\n            opacity: 0.3;\n            z-index: -1;\n            border-radius: 4px;\n        }\n\n        .dat-hero-desc {\n            font-size: 18px;\n            line-height: 1.8;\n            color: var(--d-text);\n            margin-bottom: 40px;\n            max-width: 550px;\n        }\n\n        \/* \u0634\u0631\u064a\u0637 \u0627\u0644\u0628\u062d\u062b *\/\n        .dat-hero-search {\n            max-width: 550px;\n            position: relative;\n            margin-bottom: 30px;\n            box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n            border-radius: 12px;\n            background: #fff;\n        }\n\n        .dat-input-group {\n            display: flex;\n            align-items: center;\n            padding: 8px;\n            border: 1px solid #eee;\n            border-radius: 12px;\n            transition: 0.3s;\n        }\n        .dat-input-group:focus-within {\n            border-color: var(--d-purple);\n            box-shadow: 0 0 0 4px rgba(102, 73, 143, 0.1);\n        }\n\n        .search-icon {\n            padding: 0 15px;\n            color: #aaa;\n            font-size: 18px;\n        }\n\n        .dat-input-group input {\n            flex: 1;\n            border: none;\n            outline: none;\n            padding: 12px;\n            font-family: 'Tajawal';\n            font-size: 16px;\n            color: #333;\n        }\n        \n        .dat-input-group button {\n            background: var(--d-purple);\n            color: #fff;\n            border: none;\n            padding: 12px 30px;\n            border-radius: 8px;\n            font-weight: 700;\n            font-family: 'Tajawal';\n            cursor: pointer;\n            transition: 0.3s;\n        }\n        .dat-input-group button:hover {\n            background: #503775;\n            transform: translateY(-2px);\n        }\n\n        \/* \u0627\u062d\u0635\u0627\u0626\u064a\u0627\u062a \u0635\u063a\u064a\u0631\u0629 *\/\n        .dat-mini-stats {\n            display: flex;\n            gap: 25px;\n        }\n        .d-stat {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            font-size: 15px;\n            font-weight: 700;\n            color: #555;\n        }\n        .d-stat i { color: var(--d-orange); }\n\n        \/* --- \u062c\u0627\u0646\u0628 \u0627\u0644\u0635\u0648\u0631\u0629 --- *\/\n        .dat-hero-visual {\n            position: relative;\n            text-align: center;\n        }\n\n        .img-wrapper {\n            position: relative;\n            display: inline-block;\n            width: 100%;\n        }\n\n        .floating-img {\n            max-width: 100%;\n            height: auto;\n            animation: floatUpDown 4s ease-in-out infinite;\n            filter: drop-shadow(0 20px 40px rgba(0,0,0,0.1));\n        }\n\n        \/* \u062a\u0623\u062b\u064a\u0631\u0627\u062a \u0632\u062e\u0631\u0641\u064a\u0629 \u0639\u0627\u0626\u0645\u0629 - \u062a\u0645 \u0639\u0643\u0633 \u0627\u0644\u0627\u062a\u062c\u0627\u0647\u0627\u062a *\/\n        .float-element {\n            position: absolute;\n            width: 50px;\n            height: 50px;\n            background: #fff;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            box-shadow: 0 10px 20px rgba(0,0,0,0.1);\n            font-size: 20px;\n            z-index: 2;\n        }\n        \n        \/* \n           icon-1: \u0641\u064a \u0627\u0644\u0639\u0631\u0628\u064a (top-right). \u0641\u064a \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a \u064a\u062c\u0628 \u0623\u0646 \u062a\u0643\u0648\u0646 (top-left).\n           \u0644\u0630\u0644\u0643 \u0646\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0645\u062a\u063a\u064a\u0631 $align \u0627\u0644\u0630\u064a \u064a\u0639\u0648\u062f \u0628\u0640 right \u0644\u0644\u0639\u0631\u0628\u064a \u0648 left \u0644\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a.\n        *\/\n        .icon-1 { \n            top: 10%; \n            left: 10%; \n            color: var(--d-orange); \n            animation: floatUpDown 5s ease-in-out infinite reverse; \n        }\n        \n        \/* \n           icon-2: \u0641\u064a \u0627\u0644\u0639\u0631\u0628\u064a (bottom-left). \u0641\u064a \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a \u064a\u062c\u0628 \u0623\u0646 \u062a\u0643\u0648\u0646 (bottom-right).\n           \u0644\u0630\u0644\u0643 \u0646\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0645\u062a\u063a\u064a\u0631 $reverse_align \u0627\u0644\u0630\u064a \u064a\u0639\u0648\u062f \u0628\u0640 left \u0644\u0644\u0639\u0631\u0628\u064a \u0648 right \u0644\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a.\n        *\/\n        .icon-2 { \n            bottom: 15%; \n            right: 5%; \n            color: var(--d-purple); \n            animation: floatUpDown 6s ease-in-out infinite 1s; \n        }\n\n        \/* \u062e\u0644\u0641\u064a\u0629 \u0636\u0628\u0627\u0628\u064a\u0629 (Blob) *\/\n        .dat-blob-bg {\n            position: absolute;\n            top: -50px;\n            \/* \u0639\u0643\u0633 \u0645\u0643\u0627\u0646 \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0627\u0644\u0644\u063a\u0629 *\/\n            right: -100px;\n            width: 600px;\n            height: 600px;\n            background: radial-gradient(circle, rgba(102, 73, 143, 0.05) 0%, rgba(255,255,255,0) 70%);\n            z-index: 0;\n            pointer-events: none;\n        }\n\n        \/* --- Animations --- *\/\n        @keyframes floatUpDown {\n            0%, 100% { transform: translateY(0); }\n            50% { transform: translateY(-20px); }\n        }\n\n        \/* --- Responsive Mobile --- *\/\n        @media (max-width: 992px) {\n            .dat-hero-wrap { padding: 40px 0; }\n            .dat-hero-grid { grid-template-columns: 1fr; text-align: center; gap: 40px; }\n            \/* \u0641\u064a \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 \u0646\u0641\u0631\u0636 \u0627\u0644\u0633\u0646\u062a\u0631 \u0628\u063a\u0636 \u0627\u0644\u0646\u0638\u0631 \u0639\u0646 \u0627\u0644\u0644\u063a\u0629 *\/\n            .dat-hero-wrap { text-align: center; } \n            \n            .dat-hero-title { font-size: 36px; }\n            .dat-badge { margin: 0 auto 20px; }\n            .dat-hero-desc { margin: 0 auto 30px; font-size: 16px; }\n            .dat-hero-search { margin: 0 auto 30px; }\n            .dat-mini-stats { justify-content: center; }\n            \n            .dat-hero-content { order: 1; }\n            .dat-hero-visual { order: 2; }\n            \n            .icon-1, .icon-2 { width: 40px; height: 40px; font-size: 16px; }\n        }\n    <\/style>\n    <\/div>\n\t\t\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-e4578be e-con-full e-flex e-con e-parent\" data-id=\"e4578be\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ca60326 elementor-widget elementor-widget-shortcode\" data-id=\"ca60326\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    \n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.css\" \/>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.js\"><\/script>\n\n    <!-- \u062a\u0645 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 style inline \u0644\u0644\u062d\u0627\u0648\u064a\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 \u0644\u0643\u0633\u0631 \u0623\u064a \u062a\u0646\u0633\u064a\u0642 flex \u0645\u0646 \u0627\u0644\u0642\u0627\u0644\u0628 -->\n    <section class=\"dat-cat-v7-section\" dir=\"ltr\" style=\"display: block !important; width: 100% !important;\">\n        <div class=\"dat-container-v7\">\n            \n            <!-- 1. \u0627\u0644\u0639\u0646\u0648\u0627\u0646 (\u0645\u062d\u0627\u0630\u0627\u0629 \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\u0629) -->\n            <div class=\"dat-v7-header\">\n                <h2 class=\"dat-v7-title\">\n                    Categories <span class=\"highlight-text\">Most Popular<\/span>\n                <\/h2>\n                <div class=\"dat-title-line\"><\/div>\n            <\/div>\n\n            <!-- 2. \u0627\u0644\u0633\u0644\u0627\u064a\u062f\u0631 \u0648\u0627\u0644\u0623\u0633\u0647\u0645 -->\n            <div class=\"dat-slider-area\">\n                \n                <!-- \u0632\u0631 \u0627\u0644\u0633\u0627\u0628\u0642: \u0645\u0643\u0627\u0646\u0647 \u064a\u062a\u063a\u064a\u0631 \u062d\u0633\u0628 \u0627\u0644\u0644\u063a\u0629 \u0639\u0628\u0631 CSS -->\n                <div class=\"dat-nav-arrow prev-btn-v7\">\n                    <i class=\"fa-solid fa-chevron-left\"><\/i>\n                <\/div>\n\n                <!-- \u062c\u0633\u0645 \u0627\u0644\u0633\u0644\u0627\u064a\u062f\u0631 -->\n                <div class=\"swiper dat-cat-slider-v7\">\n                    <div class=\"swiper-wrapper\">\n                                                    <div class=\"swiper-slide\">\n                                <a href=\"https:\/\/dat-center.com\/en\/course-category\/ai\/?tutor-course-filter-category=12\" class=\"dat-card-v7\">\n                                    <div class=\"dat-card-media\">\n                                        <img decoding=\"async\" src=\"https:\/\/dat-center.com\/wp-content\/uploads\/2025\/12\/ebccc2d48d73b0ad9423b3ab2a375273d7cb9cf9-1024x683.jpg\" loading=\"lazy\" alt=\"AI\">\n                                        <div class=\"dat-media-overlay\"><\/div>\n                                    <\/div>\n                                    <div class=\"dat-card-body\">\n                                        <h3>AI<\/h3>\n                                        <span class=\"dat-pill\">6 Courses<\/span>\n                                    <\/div>\n                                <\/a>\n                            <\/div>\n                                                    <div class=\"swiper-slide\">\n                                <a href=\"https:\/\/dat-center.com\/en\/course-category\/math\/?tutor-course-filter-category=23\" class=\"dat-card-v7\">\n                                    <div class=\"dat-card-media\">\n                                        <img decoding=\"async\" src=\"https:\/\/dat-center.com\/wp-content\/uploads\/2025\/03\/13659-1-1024x683.jpg\" loading=\"lazy\" alt=\"Math\">\n                                        <div class=\"dat-media-overlay\"><\/div>\n                                    <\/div>\n                                    <div class=\"dat-card-body\">\n                                        <h3>Math<\/h3>\n                                        <span class=\"dat-pill\">4 Courses<\/span>\n                                    <\/div>\n                                <\/a>\n                            <\/div>\n                                                    <div class=\"swiper-slide\">\n                                <a href=\"https:\/\/dat-center.com\/en\/course-category\/editing\/?tutor-course-filter-category=18\" class=\"dat-card-v7\">\n                                    <div class=\"dat-card-media\">\n                                        <img decoding=\"async\" src=\"https:\/\/dat-center.com\/wp-content\/uploads\/2025\/12\/767dcdee07fbf37012e1f0ca0861c27256cfc2dc-1024x576.jpg\" loading=\"lazy\" alt=\"Editing\">\n                                        <div class=\"dat-media-overlay\"><\/div>\n                                    <\/div>\n                                    <div class=\"dat-card-body\">\n                                        <h3>Editing<\/h3>\n                                        <span class=\"dat-pill\">3 Courses<\/span>\n                                    <\/div>\n                                <\/a>\n                            <\/div>\n                                                    <div class=\"swiper-slide\">\n                                <a href=\"https:\/\/dat-center.com\/en\/course-category\/marketing\/?tutor-course-filter-category=22\" class=\"dat-card-v7\">\n                                    <div class=\"dat-card-media\">\n                                        <img decoding=\"async\" src=\"https:\/\/dat-center.com\/wp-content\/uploads\/2025\/12\/1030c4d3876aa469f0511c30fc30fda1125a5b67-1024x683.jpg\" loading=\"lazy\" alt=\"Marketing\">\n                                        <div class=\"dat-media-overlay\"><\/div>\n                                    <\/div>\n                                    <div class=\"dat-card-body\">\n                                        <h3>Marketing<\/h3>\n                                        <span class=\"dat-pill\">3 Courses<\/span>\n                                    <\/div>\n                                <\/a>\n                            <\/div>\n                                                    <div class=\"swiper-slide\">\n                                <a href=\"https:\/\/dat-center.com\/en\/course-category\/graphic\/?tutor-course-filter-category=13\" class=\"dat-card-v7\">\n                                    <div class=\"dat-card-media\">\n                                        <img decoding=\"async\" src=\"https:\/\/dat-center.com\/wp-content\/uploads\/2025\/12\/2dda4f9c9e3fd4359a28912893ada79ee33147e0-1024x717.jpg\" loading=\"lazy\" alt=\"Graphic\">\n                                        <div class=\"dat-media-overlay\"><\/div>\n                                    <\/div>\n                                    <div class=\"dat-card-body\">\n                                        <h3>Graphic<\/h3>\n                                        <span class=\"dat-pill\">2 Courses<\/span>\n                                    <\/div>\n                                <\/a>\n                            <\/div>\n                                                    <div class=\"swiper-slide\">\n                                <a href=\"https:\/\/dat-center.com\/en\/course-category\/programming\/?tutor-course-filter-category=14\" class=\"dat-card-v7\">\n                                    <div class=\"dat-card-media\">\n                                        <img decoding=\"async\" src=\"https:\/\/dat-center.com\/wp-content\/uploads\/2025\/12\/cd18ebc7c0034189daa95d7855edeac09f426a59-1024x684.jpg\" loading=\"lazy\" alt=\"Programming\">\n                                        <div class=\"dat-media-overlay\"><\/div>\n                                    <\/div>\n                                    <div class=\"dat-card-body\">\n                                        <h3>Programming<\/h3>\n                                        <span class=\"dat-pill\">2 Courses<\/span>\n                                    <\/div>\n                                <\/a>\n                            <\/div>\n                                                    <div class=\"swiper-slide\">\n                                <a href=\"https:\/\/dat-center.com\/en\/course-category\/photography\/?tutor-course-filter-category=25\" class=\"dat-card-v7\">\n                                    <div class=\"dat-card-media\">\n                                        <img decoding=\"async\" src=\"https:\/\/dat-center.com\/wp-content\/uploads\/2024\/02\/pexels-andrea-piacquadio-3799832-1-1024x682.jpg\" loading=\"lazy\" alt=\"Photography\">\n                                        <div class=\"dat-media-overlay\"><\/div>\n                                    <\/div>\n                                    <div class=\"dat-card-body\">\n                                        <h3>Photography<\/h3>\n                                        <span class=\"dat-pill\">1 Courses<\/span>\n                                    <\/div>\n                                <\/a>\n                            <\/div>\n                                                    <div class=\"swiper-slide\">\n                                <a href=\"https:\/\/dat-center.com\/en\/course-category\/cyber-security\/?tutor-course-filter-category=46\" class=\"dat-card-v7\">\n                                    <div class=\"dat-card-media\">\n                                        <img decoding=\"async\" src=\"https:\/\/dat-center.com\/wp-content\/uploads\/2025\/12\/efcda94c213d8111a806c3c44469b39aeb079608-1024x819.jpg\" loading=\"lazy\" alt=\"Cyber Security\">\n                                        <div class=\"dat-media-overlay\"><\/div>\n                                    <\/div>\n                                    <div class=\"dat-card-body\">\n                                        <h3>Cyber Security<\/h3>\n                                        <span class=\"dat-pill\">1 Courses<\/span>\n                                    <\/div>\n                                <\/a>\n                            <\/div>\n                                            <\/div>\n                <\/div>\n\n                <!-- \u0632\u0631 \u0627\u0644\u062a\u0627\u0644\u064a: \u0645\u0643\u0627\u0646\u0647 \u064a\u062a\u063a\u064a\u0631 \u062d\u0633\u0628 \u0627\u0644\u0644\u063a\u0629 \u0639\u0628\u0631 CSS -->\n                <div class=\"dat-nav-arrow next-btn-v7\">\n                    <i class=\"fa-solid fa-chevron-right\"><\/i>\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n    <\/section>\n\n    <style>\n        \/* === Fix Layout Issues === *\/\n        .dat-cat-v7-section {\n            padding: 70px 0;\n            background: #fff;\n            position: relative;\n            overflow: hidden;\n            font-family: 'Tajawal', sans-serif;\n            text-align: left; \/* \u0645\u062d\u0627\u0630\u0627\u0629 \u0627\u0644\u0646\u0635 \u0627\u0644\u0639\u0627\u0645\u0629 \u0644\u0644\u0642\u0633\u0645 *\/\n        }\n\n        .dat-container-v7 {\n            max-width: 1240px;\n            width: 90%;\n            margin: 0 auto;\n            display: block !important;\n        }\n\n        \/* === 1. Header Styles === *\/\n        .dat-v7-header {\n            text-align: left;\n            margin-bottom: 50px;\n            width: 100%;\n            display: flex;\n            flex-direction: column;\n            \/* Flex start \u064a\u062a\u0643\u064a\u0641 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b \u0645\u0639 RTL\/LTR *\/\n            align-items: flex-start; \n        }\n\n        .dat-v7-title {\n            font-size: 36px;\n            font-weight: 800;\n            color: #000000;\n            margin: 0 0 15px 0;\n        }\n\n        .highlight-text {\n            color: #66498F;\n        }\n\n        .dat-title-line {\n            width: 60px;\n            height: 4px;\n            background: #66498F;\n            border-radius: 10px;\n        }\n\n        \/* === 2. Slider & Arrows Layout === *\/\n        .dat-slider-area {\n            position: relative;\n            width: 100%;\n        }\n\n        .dat-cat-slider-v7 {\n            padding: 20px 10px 40px 10px !important;\n            width: 100%;\n        }\n\n        \/* --- \u0627\u0644\u0623\u0633\u0647\u0645 (\u0627\u0644\u0623\u0632\u0631\u0627\u0631) --- *\/\n        .dat-nav-arrow {\n            position: absolute;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 50px;\n            height: 50px;\n            background: #fff;\n            box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 18px;\n            color: #66498F;\n            cursor: pointer;\n            z-index: 20;\n            transition: all 0.3s ease;\n            border: 1px solid #f0f0f0;\n        }\n\n        \/* \n           \u0623\u0645\u0627\u0643\u0646 \u0627\u0644\u0623\u0633\u0647\u0645 \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\u0629:\n           \u0632\u0631 \"\u0627\u0644\u0633\u0627\u0628\u0642\" (.prev-btn-v7):\n             - \u0639\u0631\u0628\u064a (RTL): \u064a\u0645\u064a\u0646 \u0627\u0644\u0634\u0627\u0634\u0629 (right: -60px)\n             - \u0625\u0646\u062c\u0644\u064a\u0632\u064a (LTR): \u064a\u0633\u0627\u0631 \u0627\u0644\u0634\u0627\u0634\u0629 (left: -60px)\n           \u0644\u0630\u0644\u0643 \u0646\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0645\u062a\u063a\u064a\u0631 $align \u0627\u0644\u0630\u064a \u064a\u062d\u0645\u0644 (right \u0644\u0644\u0639\u0631\u0628\u064a \/ left \u0644\u0644\u0627\u0646\u062c\u0644\u064a\u0632\u064a)\n        *\/\n        .prev-btn-v7 {\n            left: -60px;\n            right: auto; \/* \u0644\u0625\u0644\u063a\u0627\u0621 \u0627\u0644\u0642\u064a\u0645\u0629 \u0627\u0644\u0645\u0639\u0627\u0643\u0633\u0629 *\/\n        }\n\n        \/* \n           \u0632\u0631 \"\u0627\u0644\u062a\u0627\u0644\u064a\" (.next-btn-v7):\n             - \u0639\u0631\u0628\u064a (RTL): \u064a\u0633\u0627\u0631 \u0627\u0644\u0634\u0627\u0634\u0629 (left: -60px)\n             - \u0625\u0646\u062c\u0644\u064a\u0632\u064a (LTR): \u064a\u0645\u064a\u0646 \u0627\u0644\u0634\u0627\u0634\u0629 (right: -60px)\n           \u0644\u0630\u0644\u0643 \u0646\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0645\u062a\u063a\u064a\u0631 $reverse_align\n        *\/\n        .next-btn-v7 {\n            right: -60px;\n            left: auto;\n        }\n\n        .dat-nav-arrow:hover {\n            background: #66498F;\n            color: #fff;\n            transform: translateY(-50%) scale(1.1);\n        }\n\n        \/* Media Query: \u0625\u0644\u0635\u0627\u0642 \u0627\u0644\u0623\u0633\u0647\u0645 \u0628\u0627\u0644\u062d\u0627\u0641\u0629 \u0639\u0646\u062f \u062a\u0635\u063a\u064a\u0631 \u0627\u0644\u0634\u0627\u0634\u0629 *\/\n        @media (max-width: 1300px) {\n            .prev-btn-v7 { left: 0; }\n            .next-btn-v7 { right: 0; }\n        }\n\n        \/* === 3. Card Design === *\/\n        .dat-card-v7 {\n            display: block;\n            background: #fff;\n            border-radius: 16px;\n            overflow: hidden;\n            text-decoration: none;\n            box-shadow: 0 10px 30px rgba(0,0,0,0.05);\n            transition: 0.3s;\n            height: 320px;\n            position: relative;\n            border: 1px solid #f9f9f9;\n        }\n\n        .dat-card-v7:hover {\n            transform: translateY(-10px);\n            box-shadow: 0 20px 40px rgba(102, 73, 143, 0.15);\n        }\n\n        .dat-card-media {\n            width: 100%;\n            height: 100%;\n            position: relative;\n        }\n        .dat-card-media img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            transition: 0.5s;\n        }\n        .dat-card-v7:hover .dat-card-media img {\n            transform: scale(1.05);\n        }\n\n        .dat-media-overlay {\n            position: absolute;\n            inset: 0;\n            background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);\n        }\n\n        .dat-card-body {\n            position: absolute;\n            bottom: 0;\n            \/* \u0627\u0644\u0646\u0635 \u062f\u0627\u062e\u0644 \u0627\u0644\u0643\u0627\u0631\u062a \u064a\u062a\u0628\u0639 \u0627\u0644\u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0639\u0627\u0645\u060c \u0623\u0648 \u064a\u0645\u0643\u0646 \u062a\u062b\u0628\u064a\u062a\u0647 \u0625\u0630\u0627 \u0623\u0631\u062f\u062a *\/\n            left: 0; \n            width: 100%;\n            padding: 20px;\n            z-index: 2;\n            text-align: center; \/* \u0627\u0644\u0646\u0635\u0648\u0635 \u062f\u0627\u062e\u0644 \u0627\u0644\u0643\u0627\u0631\u062a \u0639\u0627\u062f\u0629 \u0641\u064a \u0627\u0644\u0645\u0646\u062a\u0635\u0641 *\/\n        }\n\n        .dat-card-body h3 {\n            color: #fff;\n            font-size: 20px;\n            margin: 0 0 10px 0;\n            font-weight: 700;\n        }\n\n        .dat-pill {\n            background: rgba(255,255,255,0.2);\n            backdrop-filter: blur(5px);\n            padding: 5px 15px;\n            border-radius: 20px;\n            color: #fff;\n            font-size: 13px;\n        }\n\n    <\/style>\n\n    <script>\n    document.addEventListener('DOMContentLoaded', function() {\n        \/\/ Swiper \u064a\u062f\u0639\u0645 \u0627\u0644\u0640 RTL \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b \u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0640 dir=\"rtl\" \u0641\u064a \u0627\u0644\u062d\u0627\u0648\u064a\u0629\n        var swiperV7 = new Swiper(\".dat-cat-slider-v7\", {\n            slidesPerView: 1.2,\n            spaceBetween: 15,\n            loop: true,\n            centeredSlides: false,\n            navigation: {\n                nextEl: \".next-btn-v7\",\n                prevEl: \".prev-btn-v7\",\n            },\n            autoplay: {\n                delay: 4500,\n                disableOnInteraction: false,\n            },\n            breakpoints: {\n                576: { slidesPerView: 2, spaceBetween: 20 },\n                768: { slidesPerView: 3, spaceBetween: 25 },\n                1024: { slidesPerView: 4, spaceBetween: 30 },\n                1280: { slidesPerView: 5, spaceBetween: 30 }\n            }\n        });\n    });\n    <\/script>\n    \n    <\/div>\n\t\t\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-e47b403 e-con-full e-flex e-con e-parent\" data-id=\"e47b403\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-31b8bc4 elementor-widget elementor-widget-shortcode\" data-id=\"31b8bc4\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    \n    <!-- \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0627\u062a\u062c\u0627\u0647 \u0644\u0644\u062f\u064a\u0641 \u0627\u0644\u0631\u0626\u064a\u0633\u064a -->\n    <section class=\"dat-features-section-v2\" dir=\"ltr\">\n        <div class=\"dat-container-v2\">\n            \n            <!-- \u0627\u0644\u0631\u0623\u0633 -->\n            <div class=\"dat-features-header\">\n                <h2 class=\"dat-feat-title\">Why Choose <span class=\"dat-brand\">DAT Center<\/span><\/h2>\n                <p class=\"dat-feat-desc\">\n                    At DAT Center, we combine expert guidance, flexible learning, and recognized certifications to help you achieve your goals faster.                <\/p>\n            <\/div>\n\n            <!-- \u0627\u0644\u0634\u0628\u0643\u0629 -->\n            <div class=\"dat-features-row\">\n                \n                <!-- \u0639\u0646\u0635\u0631 1: \u0627\u0644\u0634\u0647\u0627\u062f\u0627\u062a -->\n                <!-- \u0641\u064a \u0627\u0644\u0639\u0631\u0628\u064a (RTL) \u0633\u064a\u0638\u0647\u0631 \u0623\u0648\u0644 \u0639\u0646\u0635\u0631 \u064a\u0645\u064a\u0646. \u0641\u064a \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a (LTR) \u0633\u064a\u0638\u0647\u0631 \u0623\u0648\u0644 \u0639\u0646\u0635\u0631 \u064a\u0633\u0627\u0631. -->\n                <div class=\"dat-feat-box\">\n                    <div class=\"dat-svg-icon\">\n                        \n    <svg viewbox=\"0 0 64 64\" fill=\"#66498F\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        <path d=\"M52 12H12C9.79 12 8 13.79 8 16V44H12V16H52V40H56V16C56 13.79 54.21 12 52 12Z\"\/>\n        <path d=\"M12 20H48V24H12V20Z\" opacity=\"0.6\"\/>\n        <path d=\"M12 28H40V32H12V28Z\" opacity=\"0.6\"\/>\n        <path d=\"M12 36H36V40H12V36Z\" opacity=\"0.6\"\/>\n        <path d=\"M48 32C43.58 32 40 35.58 40 40C40 44.42 43.58 48 48 48C52.42 48 56 44.42 56 40C56 35.58 52.42 32 48 32ZM48 44C45.79 44 44 42.21 44 40C44 37.79 45.79 36 48 36C50.21 36 52 37.79 52 40C52 42.21 50.21 44 48 44Z\"\/>\n        <path d=\"M48 48L44 56L48 54L52 56L48 48Z\"\/>\n    <\/svg>                    <\/div>\n                    <h3>Certificates<\/h3>\n                    <p>Earn recognized certificates from top employers and institutions worldwide<\/p>\n                <\/div>\n\n                <!-- \u0639\u0646\u0635\u0631 2: \u0627\u0644\u062f\u0639\u0645 -->\n                <div class=\"dat-feat-box\">\n                    <div class=\"dat-svg-icon\">\n                        \n    <svg viewbox=\"0 0 64 64\" fill=\"#66498F\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        <path d=\"M32 8C20.95 8 12 16.95 12 28V44C12 48.42 15.58 52 20 52H22V28H16V27.5C16 19.1 23.1 12 32 12C40.9 12 48 19.1 48 27.5V28H42V52H44C48.42 52 52 48.42 52 44V28C52 16.95 43.05 8 32 8Z\" opacity=\"0.8\"\/>\n        <path d=\"M32 20C34.76 20 37 22.24 37 25H41C41 20.03 36.97 16 32 16C27.03 16 23 20.03 23 25H27C27 22.24 29.24 20 32 20Z\"\/>\n        <path d=\"M32 28C30.9 28 30 28.9 30 30V34H34V30C34 28.9 33.1 28 32 28Z\"\/>\n        <circle cx=\"32\" cy=\"40\" r=\"2.5\"\/>\n    <\/svg>                    <\/div>\n                    <h3>Support<\/h3>\n                    <p>Get dedicated support whenever you need it, ensuring a smooth and engaging learning journey<\/p>\n                <\/div>\n\n                <!-- \u0639\u0646\u0635\u0631 3: \u0645\u062f\u0631\u0633\u064a\u0646 \u062e\u0628\u0631\u0627\u0621 -->\n                <div class=\"dat-feat-box\">\n                    <div class=\"dat-svg-icon\">\n                        \n    <svg viewbox=\"0 0 64 64\" fill=\"#66498F\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        <path d=\"M56 12H24C21.79 12 20 13.79 20 16V40H56C58.21 40 60 38.21 60 36V16C60 13.79 58.21 12 56 12ZM56 36H24V16H56V36Z\" opacity=\"0.8\"\/>\n        <path d=\"M18 36C18 31.58 21.58 28 26 28C30.42 28 34 31.58 34 36C34 40.42 30.42 44 26 44C21.58 44 18 40.42 18 36Z\"\/>\n        <path d=\"M38 56V54C38 48.48 33.52 44 28 44H24C18.48 44 14 48.48 14 54V56H38Z\"\/>\n        <rect x=\"28\" y=\"40\" width=\"12\" height=\"4\" rx=\"2\" fill=\"#66498F\"\/>\n    <\/svg>                    <\/div>\n                    <h3>Expert Instructors<\/h3>\n                    <p>Learn from leading industry instructors with practical experience and proven teaching methods<\/p>\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n    <\/section>\n\n    <style>\n        \/* === \u0625\u062c\u0628\u0627\u0631\u064a\u0629 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 (Reset) === *\/\n        .dat-features-section-v2 {\n            padding: 80px 0 100px 0;\n            background: #fff;\n            width: 100% !important;\n            display: block !important;\n            font-family: 'Tajawal', sans-serif;\n            text-align: center; \/* \u0633\u0646\u062a\u0631 \u0644\u0644\u0646\u0635\u0648\u0635 \u0641\u064a \u0627\u0644\u0639\u0646\u0648\u0627\u0646 \u0648\u0627\u0644\u0628\u0648\u0643\u0633\u0627\u062a *\/\n        }\n\n        .dat-container-v2 {\n            max-width: 1240px;\n            width: 90%;\n            margin: 0 auto;\n            display: block;\n        }\n\n        \/* === 1. \u0627\u0644\u0639\u0646\u0648\u0627\u0646 === *\/\n        .dat-features-header {\n            margin-bottom: 70px;\n            max-width: 900px;\n            margin-left: auto;\n            margin-right: auto;\n        }\n\n        .dat-feat-title {\n            font-size: 40px;\n            font-weight: 800;\n            color: #000;\n            margin-bottom: 20px;\n        }\n\n        .dat-brand {\n            color: #66498F;\n        }\n\n        .dat-feat-desc {\n            font-size: 19px;\n            color: #666;\n            line-height: 1.6;\n            font-weight: 500;\n        }\n\n        \/* === 2. \u0627\u0644\u0634\u0628\u0643\u0629 (Grid Layout) === *\/\n        .dat-features-row {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 40px;\n            align-items: flex-start;\n            \/* \u0627\u0644\u0627\u062a\u062c\u0627\u0647 \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a \u0627\u0644\u0622\u0646 \u0639\u0628\u0631 \u0627\u0644\u0640 HTML (dir attribute)\n               \u0645\u0645\u0627 \u064a\u062c\u0639\u0644 \u0627\u0644\u0640 Grid \u064a\u0639\u0643\u0633 \u0646\u0641\u0633\u0647 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b *\/\n        }\n\n        \/* === 3. \u0627\u0644\u0639\u0646\u0635\u0631 (Box) === *\/\n        .dat-feat-box {\n            background: transparent;\n            padding: 0 20px;\n            transition: transform 0.3s;\n        }\n\n        .dat-feat-box:hover {\n            transform: translateY(-5px);\n        }\n\n        \/* \u0627\u0644\u0623\u064a\u0642\u0648\u0646\u0627\u062a SVG *\/\n        .dat-svg-icon {\n            width: 100px;\n            height: 100px;\n            margin: 0 auto 25px auto;\n        }\n        \n        .dat-svg-icon svg {\n            width: 100%;\n            height: 100%;\n            display: block;\n            fill: #66498F;\n        }\n\n        \/* \u0627\u0644\u0646\u0635\u0648\u0635 *\/\n        .dat-feat-box h3 {\n            font-size: 28px;\n            font-weight: 800;\n            color: #000;\n            margin-bottom: 15px;\n        }\n\n        .dat-feat-box p {\n            font-size: 16px;\n            color: #666;\n            line-height: 1.7;\n            margin: 0;\n        }\n\n        \/* === Responsive === *\/\n        @media (max-width: 992px) {\n            .dat-features-row {\n                grid-template-columns: 1fr;\n                gap: 60px;\n            }\n            .dat-feat-title { font-size: 30px; }\n            .dat-feat-desc { font-size: 16px; }\n            .dat-feat-box { padding: 0; }\n        }\n    <\/style>\n\n    <\/div>\n\t\t\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-a4db7b2 e-con-full e-flex e-con e-parent\" data-id=\"a4db7b2\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9ccb653 elementor-widget elementor-widget-shortcode\" data-id=\"9ccb653\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    \n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.css\" \/>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.js\"><\/script>\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n    <section class=\"dat-testi-v2\" dir=\"ltr\">\n        <div class=\"dat-container-v2\">\n            \n            <!-- 1. \u0627\u0644\u0639\u0646\u0648\u0627\u0646 (\u0645\u062d\u0627\u0630\u0627\u0629 \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\u0629) -->\n            <div class=\"dat-head-block\">\n                <h2 class=\"dat-main-head\">Student <span class=\"highlight-text\">Reviews<\/span><\/h2>\n                <div class=\"dat-sep-line\"><\/div>\n                <p class=\"dat-sub-head\">We have evolved over the years, and these are our partners in success.<\/p>\n            <\/div>\n\n            <!-- 2. \u0627\u0644\u0633\u0644\u0627\u064a\u062f\u0631 -->\n            <div class=\"swiper dat-testi-slider-v2\">\n                <div class=\"swiper-wrapper\">\n                                            <div class=\"swiper-slide\">\n                            <div class=\"dat-review-box\">\n                                <div class=\"dat-box-header\">\n                                    <div class=\"dat-user-details\">\n                                        <div class=\"dat-char-avatar\" style=\"background-color: #66498F;\">\n                                            A                                        <\/div>\n                                        <div>\n                                            <h4>Ahmed Al-Otaibi<\/h4>\n                                            <span>Frontend Dev<\/span>\n                                        <\/div>\n                                    <\/div>\n                                    <i class=\"fa-solid fa-quote-left dat-quote-mark\"><\/i>\n                                <\/div>\n                                <div class=\"dat-box-body\">\n                                    <p>An exceptional learning experience. The courses are structured precisely, and the practical application helped me build a strong portfolio.<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"swiper-slide\">\n                            <div class=\"dat-review-box\">\n                                <div class=\"dat-box-header\">\n                                    <div class=\"dat-user-details\">\n                                        <div class=\"dat-char-avatar\" style=\"background-color: #F79F53;\">\n                                            S                                        <\/div>\n                                        <div>\n                                            <h4>Sara Al-Shammari<\/h4>\n                                            <span>UX\/UI Designer<\/span>\n                                        <\/div>\n                                    <\/div>\n                                    <i class=\"fa-solid fa-quote-left dat-quote-mark\"><\/i>\n                                <\/div>\n                                <div class=\"dat-box-body\">\n                                    <p>I didn&#039;t expect this level of professionalism. Technical support is always available, and the accredited certificates helped me get hired.<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"swiper-slide\">\n                            <div class=\"dat-review-box\">\n                                <div class=\"dat-box-header\">\n                                    <div class=\"dat-user-details\">\n                                        <div class=\"dat-char-avatar\" style=\"background-color: #2d2d2d;\">\n                                            O                                        <\/div>\n                                        <div>\n                                            <h4>Omar Farouk<\/h4>\n                                            <span>Digital Marketer<\/span>\n                                        <\/div>\n                                    <\/div>\n                                    <i class=\"fa-solid fa-quote-left dat-quote-mark\"><\/i>\n                                <\/div>\n                                <div class=\"dat-box-body\">\n                                    <p>DAT Center provided everything I needed. The content is always updated to keep up with the latest market changes.<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"swiper-slide\">\n                            <div class=\"dat-review-box\">\n                                <div class=\"dat-box-header\">\n                                    <div class=\"dat-user-details\">\n                                        <div class=\"dat-char-avatar\" style=\"background-color: #e74c3c;\">\n                                            M                                        <\/div>\n                                        <div>\n                                            <h4>Mona Kareem<\/h4>\n                                            <span>Data Student<\/span>\n                                        <\/div>\n                                    <\/div>\n                                    <i class=\"fa-solid fa-quote-left dat-quote-mark\"><\/i>\n                                <\/div>\n                                <div class=\"dat-box-body\">\n                                    <p>The teaching style is simple yet deep. The platform is easy to use and provides an excellent interactive environment between students and instructors.<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n            <\/div>\n\n            <!-- 3. \u0623\u062f\u0648\u0627\u062a \u0627\u0644\u062a\u062d\u0643\u0645 (\u0648\u0633\u0637) -->\n            <div class=\"dat-slider-controls\">\n                <!-- \u0632\u0631 \u0627\u0644\u0633\u0627\u0628\u0642 -->\n                <div class=\"dat-arrow-btn prev-testi\">\n                    <i class=\"fa-solid fa-arrow-left\"><\/i>\n                <\/div>\n                \n                <!-- \u0646\u0642\u0627\u0637 -->\n                <div class=\"dat-dots-container\"><\/div>\n                \n                <!-- \u0632\u0631 \u0627\u0644\u062a\u0627\u0644\u064a -->\n                <div class=\"dat-arrow-btn next-testi\">\n                    <i class=\"fa-solid fa-arrow-right\"><\/i>\n                <\/div>\n            <\/div>\n\n        <\/div>\n    <\/section>\n\n    <style>\n        \/* === \u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u0635\u0641\u062d\u0629 === *\/\n        .dat-testi-v2 {\n            padding: 80px 0;\n            background: #f9f9fc;\n            font-family: 'Tajawal', sans-serif;\n            text-align: left; \/* \u0645\u062d\u0627\u0630\u0627\u0629 \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\u0629 *\/\n        }\n\n        .dat-container-v2 {\n            max-width: 1200px;\n            width: 90%;\n            margin: 0 auto;\n            display: block; \n        }\n\n        \/* === 1. \u0627\u0644\u0639\u0646\u0648\u0627\u0646 === *\/\n        .dat-head-block {\n            margin-bottom: 50px;\n            width: 100%;\n        }\n\n        .dat-main-head {\n            font-size: 36px;\n            font-weight: 800;\n            color: #2d2d2d;\n            margin: 0 0 15px 0;\n        }\n\n        .highlight-text {\n            color: #66498F;\n        }\n\n        .dat-sep-line {\n            width: 50px;\n            height: 4px;\n            background: #66498F;\n            \/* \u0627\u0644\u0647\u0627\u0645\u0634 \u064a\u062a\u0643\u064a\u0641 \u0645\u0639 \u0627\u0644\u0645\u062d\u0627\u0630\u0627\u0629 *\/\n            margin: 0 0 20px 0; \n            border-radius: 2px;\n        }\n\n        .dat-sub-head {\n            font-size: 16px;\n            color: #777;\n            max-width: 600px;\n            margin: 0 0 15px 0; \n        }\n\n        \/* === 2. \u0627\u0644\u0643\u0631\u0648\u062a (Slider) === *\/\n        .dat-testi-slider-v2 {\n            padding: 10px 10px 30px 10px !important;\n        }\n\n        .dat-review-box {\n            background: #fff;\n            padding: 35px;\n            border-radius: 20px;\n            box-shadow: 0 5px 20px rgba(0,0,0,0.03);\n            text-align: left; \/* \u0645\u062d\u0627\u0630\u0627\u0629 \u0627\u0644\u0646\u0635 \u062f\u0627\u062e\u0644 \u0627\u0644\u0643\u0627\u0631\u062a *\/\n            transition: transform 0.3s;\n            height: auto;\n            min-height: 240px;\n            border: 1px solid #f0f0f0;\n        }\n\n        .dat-review-box:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n            border-color: #66498F;\n        }\n\n        \/* \u0627\u0644\u0647\u064a\u062f\u0631 \u062f\u0627\u062e\u0644 \u0627\u0644\u0628\u0648\u0643\u0633 (\u0641\u0644\u064a\u0643\u0633) *\/\n        .dat-box-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 20px;\n            \/* Flex \u064a\u0639\u0645\u0644 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b \u0645\u0639 RTL\/LTR *\/\n        }\n\n        .dat-user-details {\n            display: flex;\n            align-items: center;\n            gap: 15px;\n        }\n\n        .dat-char-avatar {\n            width: 55px;\n            height: 55px;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            color: #fff;\n            font-size: 22px;\n            font-weight: 700;\n        }\n\n        .dat-user-details h4 { margin: 0; font-size: 18px; color: #333; font-weight: 700; }\n        .dat-user-details span { font-size: 13px; color: #888; }\n\n        .dat-quote-mark { font-size: 30px; color: #eee; }\n        .dat-review-box:hover .dat-quote-mark { color: #66498F; }\n\n        .dat-box-body p { font-size: 15px; line-height: 1.8; color: #555; margin: 0; }\n\n        \/* === 3. \u0627\u0644\u062a\u062d\u0643\u0645 (Bottom Center) === *\/\n        .dat-slider-controls {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 20px;\n            margin-top: 20px;\n        }\n\n        .dat-arrow-btn {\n            width: 50px;\n            height: 50px;\n            border-radius: 50%;\n            background: #fff;\n            color: #66498F;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 18px;\n            cursor: pointer;\n            box-shadow: 0 4px 10px rgba(0,0,0,0.05);\n            transition: 0.3s;\n            border: 1px solid #eee;\n        }\n\n        .dat-arrow-btn:hover {\n            background: #66498F;\n            color: #fff;\n            transform: scale(1.1);\n        }\n\n        .dat-dots-container {\n            width: auto !important;\n            display: flex;\n            gap: 5px;\n        }\n        .swiper-pagination-bullet { width: 10px; height: 10px; background: #ddd; opacity: 1; margin: 0 !important; }\n        .swiper-pagination-bullet-active { background: #66498F; width: 25px; border-radius: 5px; }\n\n    <\/style>\n\n    <script>\n    document.addEventListener('DOMContentLoaded', function() {\n        \/\/ \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0627\u062a\u062c\u0627\u0647 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u062e\u0627\u0635\u064a\u0629 dir \u0641\u064a HTML (\u064a\u062a\u0645 \u0627\u0644\u062a\u0639\u0627\u0645\u0644 \u0645\u0639\u0647 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b)\n        new Swiper(\".dat-testi-slider-v2\", {\n            slidesPerView: 1,\n            spaceBetween: 25,\n            loop: true,\n            autoplay: { delay: 5000 },\n            navigation: {\n                nextEl: \".next-testi\", \n                prevEl: \".prev-testi\", \n            },\n            pagination: {\n                el: \".dat-dots-container\",\n                clickable: true,\n            },\n            breakpoints: {\n                768: { slidesPerView: 2 }\n            }\n        });\n    });\n    <\/script>\n    \n    <\/div>\n\t\t\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-ec97d96 e-flex e-con-boxed e-con e-parent\" data-id=\"ec97d96\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-da3e6c6 elementor-widget elementor-widget-shortcode\" data-id=\"da3e6c6\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    \n    <!-- Libraries -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;500;700;800&display=swap\" rel=\"stylesheet\">\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;600;700;800&display=swap\" rel=\"stylesheet\">\n\n    <!-- === SECTION === -->\n    <section class=\"dat-achieve-fixed\" dir=\"ltr\">\n        <div class=\"dat-wrapper\">\n            <div class=\"dat-grid-layout\">\n                \n                <!-- Text Side -->\n                <div class=\"dat-text-side\">\n                    <h2 class=\"dat-main-title\">Our Achievements<\/h2>\n                    <p class=\"dat-sub-text\">We have evolved through various versions over the years to provide the best.<\/p>\n\n                    <div class=\"dat-stats-container\">\n                                                <div class=\"dat-stat-row\">\n                            <div class=\"dat-stat-info\">\n                                <strong>300<\/strong>\n                                <span>Expert Instructors<\/span>\n                            <\/div>\n                            <div class=\"dat-stat-icon\" style=\"color:#1abc9c; background:#eafaf1;\">\n                                <i class=\"fa-solid fa-chalkboard-user\"><\/i>\n                            <\/div>\n                        <\/div>\n                                                <div class=\"dat-stat-row\">\n                            <div class=\"dat-stat-info\">\n                                <strong>10k+<\/strong>\n                                <span>Educational Videos<\/span>\n                            <\/div>\n                            <div class=\"dat-stat-icon\" style=\"color:#f39c12; background:#fef5e7;\">\n                                <i class=\"fa-solid fa-video\"><\/i>\n                            <\/div>\n                        <\/div>\n                                                <div class=\"dat-stat-row\">\n                            <div class=\"dat-stat-info\">\n                                <strong>20k+<\/strong>\n                                <span>Active Students<\/span>\n                            <\/div>\n                            <div class=\"dat-stat-icon\" style=\"color:#e74c3c; background:#fdedec;\">\n                                <i class=\"fa-solid fa-graduation-cap\"><\/i>\n                            <\/div>\n                        <\/div>\n                                                <div class=\"dat-stat-row\">\n                            <div class=\"dat-stat-info\">\n                                <strong>100k+<\/strong>\n                                <span>Registered Members<\/span>\n                            <\/div>\n                            <div class=\"dat-stat-icon\" style=\"color:#3498db; background:#eaf2f8;\">\n                                <i class=\"fa-solid fa-users\"><\/i>\n                            <\/div>\n                        <\/div>\n                                            <\/div>\n\n                    <!-- DYNAMIC BUTTON AREA (AJAX Target) -->\n                    <div class=\"dat-action-wrap\" id=\"dat-achievements-btn-area\">\n                        <!-- Default: Guest View -->\n                        <div class=\"dat-guest-block\">\n                            <button onclick=\"datOpenModal('dat-register-modal')\" class=\"dat-cta-btn guest\">\n                                Join Now \n                                <i class=\"fa-solid fa-arrow-right\"><\/i>\n                            <\/button>\n                            <div class=\"dat-login-prompt\">\n                                <span>Already have an account?<\/span>\n                                <a href=\"#\" onclick=\"datOpenModal('dat-login-modal'); return false;\">Login<\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Image Side -->\n                <div class=\"dat-img-side\">\n                    <img decoding=\"async\" src=\"http:\/\/dat-center.com\/wp-content\/uploads\/2025\/12\/image-2.png\" alt=\"Achievements\" class=\"dat-animate-img\">\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- === CSS === -->\n    <style>\n        .dat-achieve-fixed { padding: 80px 0; background: #fff; font-family: 'Cairo', 'Tajawal', sans-serif; }\n        .dat-wrapper { max-width: 1200px; width: 90%; margin: 0 auto; }\n        .dat-grid-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }\n        .dat-text-side { text-align: left; }\n        .dat-main-title { font-size: 42px; font-weight: 800; color: #1d3b38; margin: 0 0 10px 0; line-height: 1.3; }\n        .dat-sub-text { font-size: 16px; color: #777; margin-bottom: 40px; line-height: 1.6; }\n        .dat-stats-container { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 40px; }\n        .dat-stat-row { display: flex; align-items: center; justify-content: flex-start; gap: 15px; flex-direction: row-reverse; }\n        .dat-stat-info { text-align: left; }\n        .dat-stat-info strong { display: block; font-size: 24px; color: #000; font-weight: 700; }\n        .dat-stat-info span { font-size: 14px; color: #666; }\n        .dat-stat-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }\n        .dat-cta-btn { display: inline-flex; align-items: center; gap: 10px; background: #66498F; color: #fff; padding: 14px 45px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 18px; border: none; cursor: pointer; font-family: 'Cairo'; transition: 0.3s; box-shadow: 0 4px 15px rgba(102, 73, 143, 0.2); }\n        .dat-cta-btn:hover { background: #503775; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(102, 73, 143, 0.3); }\n        .dat-login-prompt { margin-top: 15px; font-size: 15px; color: #666; font-weight: 600; }\n        .dat-login-prompt a { color: #66498F; text-decoration: none; margin-left: 5px; margin-right: 5px; position: relative; }\n        .dat-login-prompt a::after { content: ''; position: absolute; width: 0; height: 1px; bottom: 0; left: 0; background: #66498F; transition: 0.3s; }\n        .dat-login-prompt a:hover::after { width: 100%; }\n        .dat-img-side { text-align: center; }\n        .dat-img-side img { max-width: 100%; height: auto; }\n        .dat-animate-img { animation: datFloat 4s ease-in-out infinite; }\n        @keyframes datFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }\n        @media (max-width: 992px) {\n            .dat-grid-layout { grid-template-columns: 1fr; text-align: center; }\n            .dat-text-side { text-align: center; }\n            .dat-img-side { order: -1; margin-bottom: 40px; }\n            .dat-stat-row { justify-content: center; flex-direction: row-reverse; }\n            .dat-stat-info { text-align: center; }\n        }\n    <\/style>\n\n    <!-- === SMART SYNC JS === -->\n    <script>\n    document.addEventListener('DOMContentLoaded', function() {\n        const ajaxUrl = 'https:\/\/dat-center.com\/wp-admin\/admin-ajax.php';\n        const currentLang = 'en';\n        const btnArea = document.getElementById('dat-achievements-btn-area');\n        \n        \/\/ 1. Function to fetch button state\n        function datUpdateAchieveBtn() {\n            const fd = new FormData();\n            fd.append('action', 'dat_get_achievements_btn_v8');\n            fd.append('lang', currentLang);\n            \n            fetch(ajaxUrl, { method: 'POST', body: fd })\n            .then(r => r.json())\n            .then(data => {\n                if(data.success && data.data.html) {\n                    btnArea.innerHTML = data.data.html;\n                }\n            });\n        }\n\n        \/\/ 2. Initial Check (Cache Proof)\n        datUpdateAchieveBtn();\n\n        \/\/ 3. LIVE OBSERVER (The Magic)\n        \/\/ This watches the Header for changes. If Header logs in, this button updates too.\n        const headerTarget = document.getElementById('dat-desktop-auth-area');\n        if(headerTarget) {\n            const observer = new MutationObserver(function(mutations) {\n                \/\/ If Header HTML changes, it means user logged in\/out -> Update Achievement Btn\n                datUpdateAchieveBtn();\n            });\n            observer.observe(headerTarget, { childList: true, subtree: true, characterData: true });\n        }\n    });\n    <\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<a class=\"read-more\" href=\"https:\/\/dat-center.com\/en\/\">Read More<\/a>","protected":false},"author":1,"featured_media":815,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-502","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/dat-center.com\/en\/wp-json\/wp\/v2\/pages\/502","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dat-center.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dat-center.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dat-center.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dat-center.com\/en\/wp-json\/wp\/v2\/comments?post=502"}],"version-history":[{"count":15,"href":"https:\/\/dat-center.com\/en\/wp-json\/wp\/v2\/pages\/502\/revisions"}],"predecessor-version":[{"id":1211,"href":"https:\/\/dat-center.com\/en\/wp-json\/wp\/v2\/pages\/502\/revisions\/1211"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dat-center.com\/en\/wp-json\/wp\/v2\/media\/815"}],"wp:attachment":[{"href":"https:\/\/dat-center.com\/en\/wp-json\/wp\/v2\/media?parent=502"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}