Programming Courses & Software Services<\/title>\n\n <meta\n name=\"description\"\n content=\"Learn real programming with professional coding courses and software services.\"\n \/>\n\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n\n <link\n rel=\"preconnect\"\n href=\"https:\/\/fonts.gstatic.com\"\n crossorigin\n \/>\n\n <link\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap\"\n rel=\"stylesheet\"\n \/>\n\n <style>\n\n \/*\n ==========================================\n RESET\n ==========================================\n *\/\n\n *{\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html{\n scroll-behavior: smooth;\n }\n\n body{\n font-family: \"Poppins\", sans-serif;\n overflow-x: hidden;\n }\n\n a{\n text-decoration: none;\n }\n\n \/*\n ==========================================\n HERO SECTION\n ==========================================\n *\/\n\n .hero{\n position: relative;\n width: 100%;\n min-height: 60vh;\n\n background:\n linear-gradient(\n rgba(5, 8, 22, 0.75),\n rgba(5, 8, 22, 0.82)\n ),\n\n url(\"https:\/\/devrootacademy.com\/wp-content\/uploads\/2026\/05\/hero-image.png\");\n\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n text-align: center;\n overflow: hidden;\n padding: 20px;\n\n isolation: isolate;\n}\n\n \/*\n ==========================================\n BACKGROUND IMAGE\n ==========================================\n *\/\n\n \n\n \/*\n ==========================================\n OVERLAY GLOW\n ==========================================\n *\/\n\n .hero::after{\n content: \"\";\n\n position: absolute;\n inset: 0;\n\n background:\n radial-gradient(\n circle at top left,\n rgba(0,255,170,0.15),\n transparent 30%\n ),\n\n radial-gradient(\n circle at bottom right,\n rgba(0,140,255,0.18),\n transparent 35%\n );\n\n z-index: -1;\n }\n\n \/*\n ==========================================\n CONTENT\n ==========================================\n *\/\n\n .hero-content{\n max-width: 950px;\n animation: fadeUp 1.2s ease;\n }\n\n .hero-badge{\n display: inline-flex;\n align-items: center;\n gap: 10px;\n\n padding: 12px 22px;\n\n border-radius: 999px;\n\n background: rgba(255,255,255,0.08);\n\n border: 1px solid rgba(255,255,255,0.1);\n\n backdrop-filter: blur(10px);\n\n color: #d9d9d9;\n\n font-size: 14px;\n\n margin-bottom: 28px;\n }\n\n .hero-badge span{\n width: 10px;\n height: 10px;\n border-radius: 50%;\n\n background: #00ffaa;\n\n box-shadow: 0 0 15px #00ffaa;\n }\n\n .hero-title{\n color: #fff;\n\n font-size: clamp(3rem, 8vw, 6.5rem);\n\n font-weight: 800;\n\n line-height: 1.05;\n\n margin-bottom: 25px;\n\n letter-spacing: -3px;\n }\n\n .gradient{\n background: linear-gradient(\n 90deg,\n #00ffaa,\n #00d4ff,\n #7d5fff\n );\n\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n .hero-description{\n max-width: 760px;\n\n margin-inline: auto;\n\n color: #c2c7d6;\n\n font-size: 1.15rem;\n\n line-height: 1.9;\n\n margin-bottom: 45px;\n }\n\n \/*\n ==========================================\n BUTTONS\n ==========================================\n *\/\n\n .hero-buttons{\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 20px;\n flex-wrap: wrap;\n }\n\n .btn{\n position: relative;\n\n overflow: hidden;\n\n padding: 17px 38px;\n\n border-radius: 18px;\n\n font-weight: 600;\n\n font-size: 16px;\n\n transition: 0.4s ease;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n backdrop-filter: blur(12px);\n\n will-change: transform;\n }\n\n .btn-primary{\n background: linear-gradient(\n 135deg,\n #00ffaa,\n #00d4ff\n );\n\n color: #050816;\n\n box-shadow:\n 0 15px 35px rgba(0,255,170,0.35);\n }\n\n .btn-secondary{\n background: rgba(255,255,255,0.08);\n\n border: 1px solid rgba(255,255,255,0.15);\n\n color: #fff;\n }\n\n .btn:hover{\n transform:\n translateY(-7px)\n scale(1.04);\n }\n\n .btn-primary:hover{\n box-shadow:\n 0 20px 50px rgba(0,255,170,0.45);\n }\n\n .btn-secondary:hover{\n background: rgba(255,255,255,0.12);\n border-color: rgba(255,255,255,0.3);\n }\n\n \/*\n ==========================================\n BUTTON SHINE EFFECT\n ==========================================\n *\/\n\n .btn::before{\n content: \"\";\n\n position: absolute;\n\n top: 0;\n left: -120%;\n\n width: 100%;\n height: 100%;\n\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(255,255,255,0.35),\n transparent\n );\n\n transition: 0.7s;\n }\n\n .btn:hover::before{\n left: 120%;\n }\n\n \/*\n ==========================================\n ANIMATIONS\n ==========================================\n *\/\n\n @keyframes fadeUp{\n\n from{\n opacity: 0;\n transform: translateY(50px);\n }\n\n to{\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n\n\n \/*\n ==========================================\n RESPONSIVE\n ==========================================\n *\/\n\n @media (max-width: 768px){\n\n .hero-title{\n letter-spacing: -1px;\n }\n\n .hero-description{\n font-size: 1rem;\n }\n\n .btn{\n width: 100%;\n }\n\n .hero-buttons{\n flex-direction: column;\n }\n }\n\n <\/style>\n<\/head>\n\n<body>\n\n \n <section class=\"hero\">\n\n <div class=\"hero-content\">\n\n \n <div class=\"hero-badge\">\n <span><\/span>\n \u062a\u0639\u0644\u0651\u0645 \u2022 \u0623\u0637\u0645\u062d\u2022 \u0627\u0646\u0645\u0648\n <\/div>\n\n \n <h1 class=\"hero-title\">\n \u0627\u0644\u062a\u0639\u0644\u0645 \u0627\u0644\u062d\u0642\u064a\u0642\u064a. <br>\n \u0627\u0644\u0643\u0648\u062f \u0627\u0644\u062d\u0642\u064a\u0642\u064a. <br>\n\n <span class=\"gradient\">\n \u0627\u0644\u0645\u0643\u0627\u0646 \u0627\u0644\u0645\u0646\u0627\u0633\u0628.\n <\/span>\n <\/h1>\n\n \n <p class=\"hero-description\">\n\n \u0646\u062d\u0646 \u0634\u0631\u0643\u0629 \u0628\u0631\u0645\u062c\u0629 \u062a\u0642\u062f\u0645\n\n\u062f\u0648\u0631\u0627\u062a \u0628\u0631\u0645\u062c\u0629 \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629\u060c \u0648\u062e\u062f\u0645\u0627\u062a \u0628\u0631\u0645\u062c\u064a\u0629\u060c\n\n\u0648\u062d\u0644\u0648\u0644 \u062a\u0637\u0648\u064a\u0631 \u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0648\u064a\u0628\u060c\n\n\u0648\u062a\u062c\u0627\u0631\u0628 \u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u0639\u0645\u0644\u064a\u0629\n\n\u0644\u0644\u0645\u0637\u0648\u0631\u064a\u0646 \u0648\u0627\u0644\u0634\u0631\u0643\u0627\u062a.\n\n <\/p>\n\n \n <div class=\"hero-buttons\">\n\n <a\n href=\"\/ar\/courses\/\"\n class=\"btn btn-primary\"\n aria-label=\"Go to our courses\"\n >\n \u062f\u0648\u0631\u0627\u062a\u0646\u0627\n <\/a>\n\n <a\n href=\"\/ar\/services\/\"\n class=\"btn btn-secondary\"\n aria-label=\"Go to our services\"\n >\n \u062e\u062f\u0645\u0627\u062a\u0646\u0627\n <\/a>\n\n <\/div>\n\n <\/div>\n\n <\/section>\n\n<\/body>\n<\/html>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<style>\n.who{\n padding: 120px 7%;\n color: #fff;\n}\n\n.who-container{\n display: grid;\n grid-template-columns: 1.2fr 1fr;\n gap: 60px;\n align-items: center;\n max-width: 1200px;\n margin: auto;\n}\n\n\/* LEFT CONTENT *\/\n.who-content{\n max-width: 600px;\n}\n\n\/* TITLE *\/\n.title{\n font-size: 3rem;\n font-weight: 800;\n margin-bottom: 30px;\n position: relative;\n\n opacity: 0;\n transform: translateY(30px);\n animation: fadeUp 0.8s ease forwards;\n}\n\n\/* UNDERLINE *\/\n.title::after{\n content: \"\";\n width: 100px;\n height: 4px;\n background: linear-gradient(90deg,#00ffaa,#00d4ff);\n position: absolute;\n left: 0;\n bottom: -10px;\n border-radius: 10px;\n}\n\n\/* TEXT *\/\n.line{\n font-size: 1.15rem;\n line-height: 1.9;\n color: #b8bccb;\n margin-bottom: 18px;\n background: #050816;\n\n padding: 12px 15px;\n border-radius: 12px;\n\n transition: 0.4s ease;\n\n opacity: 0;\n transform: translateY(30px);\n animation: fadeUp 0.8s ease forwards;\n}\n\n\/* stagger *\/\n.line:nth-of-type(1){ animation-delay: 0.2s; }\n.line:nth-of-type(2){ animation-delay: 0.4s; }\n.line:nth-of-type(3){ animation-delay: 0.6s; }\n\n\/* hover *\/\n.line:hover{\n background: rgba(255,255,255,0.05);\n transform: translateX(10px);\n color: #fff;\n border-left: 3px solid #00ffaa;\n}\n\n\/* RIGHT IMAGE *\/\n.who-image{\n position: relative;\n}\n\n.who-image img{\n width: 100%;\n border-radius: 20px;\n object-fit: cover;\n\n box-shadow: 0 25px 60px rgba(0,0,0,0.5);\n\n transition: 0.5s ease;\n\n opacity: 0;\n transform: translateX(40px);\n animation: fadeRight 1s ease forwards;\n}\n\n.who-image img:hover{\n transform: scale(1.03) rotate(-1deg);\n}\n\n\/* ANIMATIONS *\/\n@keyframes fadeUp{\n from{\n opacity: 0;\n transform: translateY(30px);\n }\n to{\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes fadeRight{\n from{\n opacity: 0;\n transform: translateX(40px);\n }\n to{\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n\/* RESPONSIVE *\/\n@media (max-width: 900px){\n .who-container{\n grid-template-columns: 1fr;\n text-align: center;\n }\n\n .who-image img{\n margin-top: 40px;\n }\n\n .title::after{\n left: 50%;\n transform: translateX(-50%);\n }\n}\n.last{\nposition: relative;\n max-width: 600px;\n text-align: center;\n margin: auto;\n}\n.last::after{\n content: \"\";\n width: 300px;\n height: 4px;\n background: linear-gradient(90deg,#00ffaa,#00d4ff);\n position: absolute;\n left: 0;\n bottom: -10px;\n border-radius: 10px;\nleft: 50%;\n transform: translateX(-50%);\n}\n<\/style>\n\n<section class=\"who\">\n\n <div class=\"who-container\">\n\n \n <div class=\"who-content\">\n\n <h2 class=\"title\">\u0645\u0646 \u0646\u062d\u0646<\/h2>\n\n <p class=\"line\">\n \u0646\u062d\u0646 \u0634\u0631\u0643\u0629 \u0628\u0631\u0645\u062c\u0629 \u062a\u0631\u0643\u0632 \u0639\u0644\u0649 \u0628\u0646\u0627\u0621 \u0645\u0637\u0648\u0631\u064a\u0646 \u062d\u0642\u064a\u0642\u064a\u064a\u0646\u060c \u0648\u0644\u064a\u0633 \u0645\u062c\u0631\u062f \u062a\u062f\u0631\u064a\u0633 \u0627\u0644\u0646\u0638\u0631\u064a\u0627\u062a.\n <\/p>\n\n <p class=\"line\">\n \u0646\u0642\u062f\u0645 \u062f\u0648\u0631\u0627\u062a \u0628\u0631\u0645\u062c\u0629 \u062d\u062f\u064a\u062b\u0629\u060c \u0648\u0645\u0634\u0627\u0631\u064a\u0639 \u0639\u0645\u0644\u064a\u0629\u060c \u0648\u062e\u0628\u0631\u0629 \u062d\u0642\u064a\u0642\u064a\u0629 \u0641\u064a \u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0628\u0631\u0645\u062c\u064a\u0627\u062a.\n <\/p>\n\n <p class=\"line\">\n \u0647\u062f\u0641\u0646\u0627 \u0647\u0648 \u0645\u0633\u0627\u0639\u062f\u062a\u0643 \u0639\u0644\u0649 \u0628\u062f\u0621 \u0645\u0633\u064a\u0631\u062a\u0643 \u0627\u0644\u0645\u0647\u0646\u064a\u0629 \u0641\u064a \u062a\u0637\u0648\u064a\u0631 \u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0648\u064a\u0628 \u0628\u0645\u0647\u0627\u0631\u0627\u062a \u0639\u0645\u0644\u064a\u0629 \u0642\u0648\u064a\u0629.\n <\/p>\n\n <\/div>\n\n \n <div class=\"who-image\">\n\n <img decoding=\"async\"\n src=\"https:\/\/images.unsplash.com\/photo-1522071820081-009f0129c71c?q=80&w=1600&auto=format&fit=crop\"\n alt=\"Programming team working together\"\n loading=\"lazy\"\n \/>\n\n <\/div>\n\n <\/div>\n<p class=\"last\"> <\/p>\n<\/section>\n<\/div>\n<\/div>\n\n\n\n<style> \n.about-us{\n padding: 45px 7%;\n color: #fff;\n}\n\n.about-container{\n display: grid;\n grid-template-columns: 1.2fr 1fr;\n gap: 60px;\n align-items: center;\n}\n\n\/* LEFT TEXT *\/\n.about-text h2{\n font-size: 3rem;\n font-weight: 800;\n margin-bottom: 25px;\n position: relative;\n}\n\n.about-text h2::after{\n content: \"\";\n width: 90px;\n height: 4px;\n background: linear-gradient(90deg,#00ffaa,#00d4ff);\n position: absolute;\n left: 0;\n bottom: -10px;\n border-radius: 10px;\n}\n\n.about-text p{\n color: #b8bccb;\n font-size: 1.1rem;\n line-height: 1.9;\n margin-bottom: 15px;\n}\n\n\/* RIGHT GRID *\/\n.about-cards{\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 20px;\n}\n\n\/* CARD *\/\n.card{\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: 18px;\n padding: 25px;\n backdrop-filter: blur(10px);\n background: #050816;\n\n\n transition: 0.4s ease;\n cursor: pointer;\n\n opacity: 0;\n transform: translateY(20px);\n animation: fadeUp 0.8s ease forwards;\n}\n\n\/* stagger *\/\n.card:nth-child(1){ animation-delay: 0.1s; }\n.card:nth-child(2){ animation-delay: 0.2s; }\n.card:nth-child(3){ animation-delay: 0.3s; }\n.card:nth-child(4){ animation-delay: 0.4s; }\n\n.card h3{\n font-size: 1.6rem;\n color: #00ffaa;\n margin-bottom: 10px;\n}\n\n.card p{\n color: #b8bccb;\n font-size: 0.95rem;\n line-height: 1.6;\n}\n\n\/* HOVER EFFECT *\/\n.card:hover{\n transform: translateY(-10px) scale(1.03);\n border-color: rgba(0,255,170,0.4);\n box-shadow: 0 20px 50px rgba(0, 255, 170, 0.392);\n}\n\n\/* ANIMATION *\/\n@keyframes fadeUp{\n from{\n opacity: 0;\n transform: translateY(30px);\n }\n to{\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n\/* RESPONSIVE *\/\n@media (max-width: 900px){\n .about-container{\n grid-template-columns: 1fr;\n }\n\n .about-cards{\n grid-template-columns: 1fr;\n }\n\n .about-text{\n text-align: center;\n }\n\n .about-text h2::after{\n left: 50%;\n transform: translateX(-50%);\n }\n}\n\n.last{\nposition: relative;\n max-width: 600px;\n text-align: center;\n margin: auto;\n}\n.last::after{\n content: \"\";\n width: 300px;\n height: 4px;\n background: linear-gradient(90deg,#00ffaa,#00d4ff);\n position: absolute;\n left: 0;\n bottom: -10px;\ntop:25px;\n border-radius: 10px;\nleft: 50%;\n transform: translateX(-50%);\n}\n\n<\/style>\n<section class=\"about-us\" id=\"about\">\n\n <div class=\"about-container\">\n\n \n <div class=\"about-text\">\n\n <h2>\u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0639\u0646\u0627<\/h2>\n\n <p>\n \u0646\u062d\u0646 \u0634\u0631\u0643\u0629 \u0628\u0631\u0645\u062c\u0629 \u0645\u062d\u062a\u0631\u0641\u0629 \u0645\u062a\u062e\u0635\u0635\u0629 \u0641\u064a \u062a\u0642\u062f\u064a\u0645 \u062f\u0648\u0631\u0627\u062a \u0627\u0644\u0628\u0631\u0645\u062c\u0629\u060c\n\u0648\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0628\u0631\u0645\u062c\u064a\u0627\u062a\u060c \u0648\u0627\u0644\u062a\u062f\u0631\u064a\u0628 \u0627\u0644\u0639\u0645\u0644\u064a \u0639\u0644\u0649 \u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0628\u0631\u0645\u062c\u064a\u0627\u062a.\n <\/p>\n\n <p>\n \u0646\u0631\u0643\u0632 \u0639\u0644\u0649 \u0628\u0646\u0627\u0621 \u0645\u0637\u0648\u0631\u064a\u0646 \u0623\u0643\u0641\u0627\u0621 \u0645\u0646 \u062e\u0644\u0627\u0644 \u0627\u0644\u062a\u0639\u0644\u0645 \u0627\u0644\u0639\u0645\u0644\u064a\u060c \u0648\u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u062d\u0642\u064a\u0642\u064a\u0629\u060c\n\n\u0648\u0627\u0644\u062e\u0628\u0631\u0629 \u0641\u064a \u0645\u062c\u0627\u0644 \u0627\u0644\u0635\u0646\u0627\u0639\u0629.\n <\/p>\n\n <p>\n \u0645\u0647\u0645\u062a\u0646\u0627 \u0647\u064a \u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0637\u0644\u0627\u0628 \u0644\u0633\u0648\u0642 \u0627\u0644\u0639\u0645\u0644 \u0628\u0645\u0647\u0627\u0631\u0627\u062a \u062d\u0642\u064a\u0642\u064a\u0629\u060c \u0648\u0644\u064a\u0633 \u0645\u062c\u0631\u062f \u0646\u0638\u0631\u064a\u0627\u062a.\n <\/p>\n\n <\/div>\n\n \n <div class=\"about-cards\">\n\n <div class=\"card\">\n <h3>\u0623\u0643\u062b\u0631 \u0645\u0646 5 \u0633\u0646\u0648\u0627\u062a<\/h3>\n <p>\u062e\u0628\u0631\u0629 \u0641\u064a \u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0628\u0631\u0645\u062c\u064a\u0627\u062a \u0648\u062a\u0637\u0648\u064a\u0631 \u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0648\u064a\u0628<\/p>\n <\/div>\n\n <div class=\"card\">\n <h3>\u0623\u0643\u062b\u0631 \u0645\u0646 20 \u0645\u0634\u0631\u0648\u0639\u064b\u0627<\/h3>\n <p>\u0645\u0634\u0627\u0631\u064a\u0639 \u0645\u0633\u062a\u0642\u0644\u0629 \u0648\u0645\u0634\u0627\u0631\u064a\u0639 \u0634\u0631\u0643\u0627\u062a \u0645\u0643\u062a\u0645\u0644\u0629<\/p>\n <\/div>\n\n <div class=\"card\">\n <h3>\u0623\u0643\u062b\u0631 \u0645\u0646 50 \u0637\u0627\u0644\u0628\u064b\u0627<\/h3>\n <p>\u062a\u062e\u0631\u062c \u0641\u064a \u062f\u0648\u0631\u0627\u062a \u0627\u0644\u0628\u0631\u0645\u062c\u0629<\/p>\n <\/div>\n\n <div class=\"card\">\n <h3>\u0641\u064a \u0627\u0644\u0645\u0648\u0642\u0639 \u0648\u0639\u0628\u0631 \u0627\u0644\u0625\u0646\u062a\u0631\u0646\u062a<\/h3>\n <p>\u0627\u0644\u0641\u0631\u0648\u0639 + \u0646\u0638\u0627\u0645 \u0627\u0644\u062a\u0639\u0644\u0645 \u0639\u0628\u0631 \u0627\u0644\u0625\u0646\u062a\u0631\u0646\u062a<\/p>\n <\/div>\n\n <\/div>\n\n <\/div>\n<p class=\"last\"> <\/p>\n\n<\/section>\n\n\n\n\n\n<head>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/7.0.1\/css\/all.min.css\">\n<\/head>\n<style>\n\n\/* ==========================================\n COURSES SECTION\n========================================== *\/\n\n.courses{\n padding: 120px 7%;\n color: #fff;\n}\n\n.courses-grid a{\n background: #050816;\n\n}\n.courses-header{\n text-align: center;\n margin-bottom: 70px;\n}\n\n.courses-header h2{\n font-size: 3rem;\n font-weight: 800;\n margin-bottom: 20px;\n color:#050816;\n}\n\n\n\n\/* ==========================================\n GRID\n========================================== *\/\n\n.courses-grid{\n display: grid;\n grid-template-columns: repeat(auto-fit,minmax(250px,1fr));\n gap: 25px;\n}\n\n\/* ==========================================\n CARD\n========================================== *\/\n\n.course-card{\n position: relative;\n\n padding: 35px 30px;\n\n border-radius: 24px;\n\n background:\n linear-gradient(\n 145deg,\n rgba(255,255,255,0.06),\n rgba(255,255,255,0.03)\n );\n\n border: 1px solid rgba(255,255,255,0.08);\n\n overflow: hidden;\n\n transition: 0.45s ease;\n\n backdrop-filter: blur(12px);\n\n text-decoration: none;\n\n opacity: 0;\n transform: translateY(40px);\n\n animation: fadeUp 0.8s ease forwards;\n}\n\n\/* stagger animation *\/\n.course-card:nth-child(1){ animation-delay: 0.1s; }\n.course-card:nth-child(2){ animation-delay: 0.2s; }\n.course-card:nth-child(3){ animation-delay: 0.3s; }\n.course-card:nth-child(4){ animation-delay: 0.4s; }\n.course-card:nth-child(5){ animation-delay: 0.5s; }\n.course-card:nth-child(6){ animation-delay: 0.6s; }\n.course-card:nth-child(7){ animation-delay: 0.7s; }\n.course-card:nth-child(8){ animation-delay: 0.8s; }\n.course-card:nth-child(9){ animation-delay: 0.9s; }\n.course-card:nth-child(10){ animation-delay: 1s; }\n\n\/* glowing background *\/\n.course-card::before{\n content: \"\";\n\n position: absolute;\n inset: 0;\n\n background:\n radial-gradient(\n circle at top left,\n rgba(0,255,170,0.15),\n transparent 35%\n );\n\n opacity: 0;\n\n transition: 0.5s ease;\n}\n\n\/* hover *\/\n.course-card:hover{\n transform:\n translateY(-12px)\n scale(1.03);\n\n border-color: rgba(0,255,170,0.35);\n\n box-shadow:\n 0 25px 60px rgba(0,255,170,0.12);\n}\n\n.course-card:hover::before{\n opacity: 1;\n}\n\n\/* ==========================================\n CONTENT\n========================================== *\/\n\n.course-icon{\n width: 70px;\n height: 70px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n border-radius: 18px;\n\n background:\n linear-gradient(\n 135deg,\n #00ffaa,\n #00d4ff\n );\n\n margin-bottom: 25px;\n\n font-size: 1.8rem;\n font-weight: 700;\n color: #050816;\n\n transition: 0.4s ease;\n}\n\n.course-card:hover .course-icon{\n transform: rotate(8deg) scale(1.1);\n}\n\n.course-card h3{\n font-size: 1.5rem;\n margin-bottom: 12px;\n color: #fff;\n}\n\n.course-card p{\n color: #b8bccb;\n line-height: 1.8;\n font-size: 0.98rem;\n}\n\n.last{\nposition: relative;\n max-width: 600px;\n text-align: center;\n margin: auto;\n}\n.last::after{\n content: \"\";\n width: 300px;\n height: 4px;\n background: linear-gradient(90deg,#00ffaa,#00d4ff);\n position: absolute;\n left: 0;\n bottom: -10px;\n border-radius: 10px;\nleft: 50%;\n transform: translateX(-50%);\n}\n\n\n\/* ==========================================\n ANIMATION\n========================================== *\/\n\n@keyframes fadeUp{\n\n from{\n opacity: 0;\n transform: translateY(40px);\n }\n\n to{\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n\/* ==========================================\n RESPONSIVE\n========================================== *\/\n\n@media (max-width: 768px){\n\n .courses-header h2{\n font-size: 2.4rem;\n }\n\n}\n\n\n<\/style>\n\n<section class=\"courses\" id=\"courses\">\n\n \n <div class=\"courses-header\">\n\n <h2>\u062f\u0648\u0631\u0627\u062a\u0646\u0627<\/h2>\n\n <\/div>\n\n \n <div class=\"courses-grid\">\n\n \n <a href=\"\/ar\/courses-details\/\" class=\"course-card\">\n\n <div class=\"course-icon\"><i class=\"fa-solid fa-code\"><\/i><\/div>\n\n <h3>Fundamental Programming<\/h3>\n\n <\/a>\n\n \n <a href=\"\/ar\/courses-details\/\" class=\"course-card\">\n\n <div class=\"course-icon\"><i class=\"fa-solid fa-globe\"><\/i><\/div>\n\n <h3>Frontend<\/h3>\n\n <\/a>\n\n \n <a href=\"\/ar\/courses-details\/\" class=\"course-card\">\n\n <div class=\"course-icon\"><i class=\"fa-solid fa-server\"><\/i><\/div>\n\n <h3>Backend<\/h3>\n\n <\/a>\n\n \n <a href=\"\/ar\/courses-details\/\" class=\"course-card\">\n\n <div class=\"course-icon\"><i class=\"fa-solid fa-mobile\"><\/i><\/div>\n\n <h3>Mobile Development<\/h3>\n\n\n <\/a>\n\n \n <a href=\"\/ar\/courses-details\/\" class=\"course-card\">\n\n <div class=\"course-icon\"><i class=\"fa-brands fa-chrome\"><\/i><\/div>\n\n <h3>Full Stack<\/h3>\n\n\n <\/a>\n\n \n \n <a href=\"\/ar\/courses-details\/\" class=\"course-card\">\n\n <div class=\"course-icon\"><i class=\"fa-solid fa-robot\"><\/i><\/div>\n\n <h3>Artificial Intelligence<\/h3>\n\n\n <\/a>\n\n \n <a href=\"\/ar\/courses-details\/\" class=\"course-card\">\n\n <div class=\"course-icon\"><i class=\"fa-solid fa-building-shield\"><\/i><\/div>\n\n <h3>Cyber Security<\/h3>\n\n\n <\/a>\n\n \n <a href=\"\/ar\/courses-details\/\" class=\"course-card\">\n\n <div class=\"course-icon\"><i class=\"fa-brands fa-figma\"><\/i><\/div>\n\n <h3>UI \/ UX Design<\/h3>\n\n <\/a>\n\n\n\n \n <a href=\"\/ar\/courses-details\/\" class=\"course-card\">\n\n <div class=\"course-icon\"><i class=\"fa-brands fa-gitlab\"><\/i><\/div>\n\n <h3>DevOps<\/h3>\n\n <\/a>\n\n \n <a href=\"\/ar\/courses-details\/\" class=\"course-card\">\n\n <div class=\"course-icon\"><i class=\"fa-solid fa-square-poll-vertical\"><\/i><\/div>\n\n <h3>Data Analysis<\/h3>\n\n\n <\/a>\n\n\n \n <a href=\"\/ar\/courses-details\/\" class=\"course-card\">\n\n <div class=\"course-icon\"><i class=\"fa-solid fa-file-lines\"><\/i><\/div>\n\n <h3>Testing<\/h3>\n\n\n <\/a>\n\n\n\n\n <\/div>\n<p class=\"last\"> <\/p>\n\n<\/section>\n\n\n\n<head>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/7.0.1\/css\/all.min.css\">\n<\/head>\n\n<style>\n\n\/* ==========================================\n SERVICES SECTION\n========================================== *\/\n\n.services{\n padding: 120px 7%;\n color: #fff;\n}\n\n.services-grid a{\n background: #050816;\n}\n\n.services-header{\n text-align: center;\n margin-bottom: 70px;\n}\n\n.services-header h2{\n font-size: 3rem;\n font-weight: 800;\n margin-bottom: 20px;\n color:#050816;\n}\n\n\/* ==========================================\n GRID\n========================================== *\/\n\n.services-grid{\n display: grid;\n grid-template-columns: repeat(auto-fit,minmax(250px,1fr));\n gap: 25px;\n}\n\n\/* ==========================================\n CARD\n========================================== *\/\n\n.service-card{\n position: relative;\n\n padding: 35px 30px;\n\n border-radius: 24px;\n\n background:\n linear-gradient(\n 145deg,\n rgba(255,255,255,0.06),\n rgba(255,255,255,0.03)\n );\n\n border: 1px solid rgba(255,255,255,0.08);\n\n overflow: hidden;\n\n transition: 0.45s ease;\n\n backdrop-filter: blur(12px);\n\n text-decoration: none;\n\n opacity: 0;\n transform: translateY(40px);\n\n animation: fadeUp 0.8s ease forwards;\n}\n\n\/* stagger animation *\/\n.service-card:nth-child(1){ animation-delay: 0.1s; }\n.service-card:nth-child(2){ animation-delay: 0.2s; }\n.service-card:nth-child(3){ animation-delay: 0.3s; }\n.service-card:nth-child(4){ animation-delay: 0.4s; }\n.service-card:nth-child(5){ animation-delay: 0.5s; }\n.service-card:nth-child(6){ animation-delay: 0.6s; }\n.service-card:nth-child(7){ animation-delay: 0.7s; }\n.service-card:nth-child(8){ animation-delay: 0.8s; }\n\n\/* glowing background *\/\n.service-card::before{\n content: \"\";\n\n position: absolute;\n inset: 0;\n\n background:\n radial-gradient(\n circle at top left,\n rgba(0,255,170,0.15),\n transparent 35%\n );\n\n opacity: 0;\n\n transition: 0.5s ease;\n}\n\n\/* hover *\/\n.service-card:hover{\n transform:\n translateY(-12px)\n scale(1.03);\n\n border-color: rgba(0,255,170,0.35);\n\n box-shadow:\n 0 25px 60px rgba(0,255,170,0.12);\n}\n\n.service-card:hover::before{\n opacity: 1;\n}\n\n\/* ==========================================\n CONTENT\n========================================== *\/\n\n.service-icon{\n width: 70px;\n height: 70px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n border-radius: 18px;\n\n background:\n linear-gradient(\n 135deg,\n #00ffaa,\n #00d4ff\n );\n\n margin-bottom: 25px;\n\n font-size: 1.8rem;\n font-weight: 700;\n color: #050816;\n\n transition: 0.4s ease;\n}\n\n.service-card:hover .service-icon{\n transform: rotate(8deg) scale(1.1);\n}\n\n.service-card h3{\n font-size: 1.5rem;\n margin-bottom: 12px;\n color: #fff;\n}\n\n\/* line under section *\/\n.last{\n position: relative;\n max-width: 600px;\n text-align: center;\n margin: auto;\n}\n\n.last::after{\n content: \"\";\n width: 300px;\n height: 4px;\n background: linear-gradient(90deg,#00ffaa,#00d4ff);\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n bottom: -10px;\n border-radius: 10px;\n}\n\n\/* ==========================================\n ANIMATION\n========================================== *\/\n\n@keyframes fadeUp{\n\n from{\n opacity: 0;\n transform: translateY(40px);\n }\n\n to{\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n\/* ==========================================\n RESPONSIVE\n========================================== *\/\n\n@media (max-width: 768px){\n\n .services-header h2{\n font-size: 2.4rem;\n }\n\n}\n\n<\/style>\n\n<section class=\"services\" id=\"services\">\n\n \n <div class=\"services-header\">\n\n <h2>\u062e\u062f\u0645\u0627\u062a\u0646\u0627<\/h2>\n\n <\/div>\n\n \n <div class=\"services-grid\">\n\n \n <a href=\"\/ar\/services\/\" class=\"service-card\">\n\n <div class=\"service-icon\">\n <i class=\"fa-solid fa-globe\"><\/i>\n <\/div>\n\n <h3>Website Development<\/h3>\n\n <\/a>\n\n\n\n\n\n \n <a href=\"\/ar\/services\/\" class=\"service-card\">\n\n <div class=\"service-icon\">\n <i class=\"fa-solid fa-mobile-screen\"><\/i>\n <\/div>\n\n <h3>Mobile Applications<\/h3>\n\n <\/a>\n\n \n <a href=\"\/ar\/services\/\" class=\"service-card\">\n\n <div class=\"service-icon\">\n <i class=\"fa-solid fa-server\"><\/i>\n <\/div>\n\n <h3>Systems Development<\/h3>\n\n <\/a>\n\n \n <a href=\"\/ar\/services\/\" class=\"service-card\">\n\n <div class=\"service-icon\">\n <i class=\"fa-solid fa-building\"><\/i>\n <\/div>\n\n <h3>Company Systems<\/h3>\n\n <\/a>\n\n \n <a href=\"\/ar\/services\/\" class=\"service-card\">\n\n <div class=\"service-icon\">\n <i class=\"fa-solid fa-shield-halved\"><\/i>\n <\/div>\n\n <h3>Security Solutions<\/h3>\n\n <\/a>\n\n \n <a href=\"\/ar\/services\/\" class=\"service-card\">\n\n <div class=\"service-icon\">\n <i class=\"fa-solid fa-robot\"><\/i>\n <\/div>\n\n <h3>AI Agents<\/h3>\n\n <\/a>\n\n \n <a href=\"\/ar\/services\/\" class=\"service-card\">\n\n <div class=\"service-icon\">\n <i class=\"fa-solid fa-vial-circle-check\"><\/i>\n <\/div>\n\n <h3>Software Testing<\/h3>\n\n <\/a>\n\n \n <a href=\"\/ar\/services\/\" class=\"service-card\">\n\n <div class=\"service-icon\">\n <i class=\"fa-solid fa-database\"><\/i>\n <\/div>\n\n <h3>Database Solutions<\/h3>\n\n <\/a>\n\n <\/div>\n\n <p class=\"last\"><\/p>\n\n<\/section>\n\n\n\n\n<link\n rel=\"stylesheet\"\n href=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.css\"\n\/>\n\n\n<link\n rel=\"stylesheet\"\n href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/7.0.1\/css\/all.min.css\"\n\/>\n\n<style>\n\n\/* ==========================================\n LIGHT MODE\n========================================== *\/\n\nbody{\n background: #f5f5f5;\n color: #111 !important;\n font-family: Arial, sans-serif;\n}\n\n.last{\n position: relative;\n max-width: 600px;\n text-align: center;\n margin: auto;\n}\n\n.last::after{\n content: \"\";\n width: 300px;\n height: 4px;\n\n background: linear-gradient(90deg,#222,#555);\n\n position: absolute;\n left: 50%;\n bottom: -10px;\n\n transform: translateX(-50%);\n border-radius: 10px;\n}\n\n\/* ==========================================\n REVIEWS SECTION\n========================================== *\/\n\n.reviews{\n padding: 120px 7%;\n color: #111;\n overflow: hidden;\n background: #f5f5f5;\n}\n\n.reviews-header{\n text-align: center;\n margin-bottom: 70px;\n}\n\n.reviews-header h2{\n font-size: 3rem;\n font-weight: 800;\n color: #111;\n}\n\n\/* ==========================================\n SWIPER\n========================================== *\/\n\n.swiper{\n padding-bottom: 60px !important;\n}\n\n.swiper-slide{\n height: auto;\n}\n\n\/* ==========================================\n CARD\n========================================== *\/\n\n.review-card{\n position: relative;\n\n padding: 35px 30px;\n\n border-radius: 24px;\n\n background: #ffffff;\n\n border: 1px solid #dcdcdc;\n\n overflow: hidden;\n\n transition: 0.45s ease;\n\n box-shadow:\n 0 10px 25px rgba(0,0,0,0.06);\n\n height: 100%;\n}\n\n\/* subtle hover glow *\/\n.review-card::before{\n content: \"\";\n\n position: absolute;\n inset: 0;\n\n background:\n radial-gradient(\n circle at top left,\n rgba(0,0,0,0.06),\n transparent 35%\n );\n\n opacity: 0;\n\n transition: 0.5s ease;\n}\n\n.review-card:hover{\n transform:\n translateY(-10px)\n scale(1.02);\n\n border-color: #777;\n\n box-shadow:\n 0 20px 40px rgba(0,0,0,0.12);\n}\n\n.review-card:hover::before{\n opacity: 1;\n}\n\n\/* ==========================================\n CONTENT\n========================================== *\/\n\n.review-icon{\n width: 65px;\n height: 65px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n border-radius: 18px;\n\n background:\n linear-gradient(\n 135deg,\n #222,\n #555\n );\n\n color: #fff;\n\n font-size: 1.4rem;\n\n margin-bottom: 25px;\n}\n\n.review-stars{\n margin-bottom: 20px;\n color: #444;\n font-size: 1.1rem;\n}\n\n.review-text{\n color: #555;\n line-height: 1.9;\n font-size: 1rem;\n margin-bottom: 25px;\n}\n\n.review-name{\n color: #111;\n font-size: 1.1rem;\n font-weight: 600;\n margin-bottom: 5px;\n}\n\n.review-role{\n color: #777;\n font-size: 0.95rem;\n}\n\n\/* ==========================================\n PAGINATION\n========================================== *\/\n\n.swiper-pagination-bullet{\n background: #333 !important;\n opacity: 0.4;\n}\n\n.swiper-pagination-bullet-active{\n opacity: 1;\n}\n\n\/* ==========================================\n RESPONSIVE\n========================================== *\/\n\n@media (max-width:768px){\n\n .reviews-header h2{\n font-size: 2.3rem;\n }\n\n}\n\n<\/style>\n\n<section class=\"reviews\" id=\"reviews\">\n\n \n <div class=\"reviews-header\">\n\n <h2>\u062a\u0642\u064a\u064a\u0645\u0627\u062a \u0627\u0644\u0637\u0644\u0627\u0628<\/h2>\n\n <\/div>\n\n \n <div class=\"swiper reviewSwiper\">\n\n <div class=\"swiper-wrapper\">\n\n \n <div class=\"swiper-slide\">\n <div class=\"review-card\">\n\n <div class=\"review-icon\">\n <i class=\"fa-solid fa-quote-left\"><\/i>\n <\/div>\n\n <div class=\"review-stars\">\n \u2605\u2605\u2605\u2605\u2605\n <\/div>\n\n <p class=\"review-text\">\n Amazing experience and very professional instructors.\n <\/p>\n\n <h3 class=\"review-name\">Ahmed Hassan<\/h3>\n <p class=\"review-role\">Frontend Student<\/p>\n\n <\/div>\n <\/div>\n\n \n <div class=\"swiper-slide\">\n <div class=\"review-card\">\n\n <div class=\"review-icon\">\n <i class=\"fa-solid fa-code\"><\/i>\n <\/div>\n\n <div class=\"review-stars\">\n \u2605\u2605\u2605\u2605\u2605\n <\/div>\n\n <p class=\"review-text\">\n I learned real development skills through practical projects.\n <\/p>\n\n <h3 class=\"review-name\">Mohamed Ali<\/h3>\n <p class=\"review-role\">Full Stack Student<\/p>\n\n <\/div>\n <\/div>\n\n \n <div class=\"swiper-slide\">\n <div class=\"review-card\">\n\n <div class=\"review-icon\">\n <i class=\"fa-solid fa-laptop-code\"><\/i>\n <\/div>\n\n <div class=\"review-stars\">\n \u2605\u2605\u2605\u2605\u2605\n <\/div>\n\n <p class=\"review-text\">\n One of the best programming courses I have ever joined.\n <\/p>\n\n <h3 class=\"review-name\">Sarah Mostafa<\/h3>\n <p class=\"review-role\">UI\/UX Student<\/p>\n\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"swiper-pagination\"><\/div>\n\n <\/div>\n\n <p class=\"last\"><\/p>\n\n<\/section>\n\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.js\"><\/script>\n\n<script>\n\nconst swiper = new Swiper(\".reviewSwiper\", {\n\n loop: true,\n\n spaceBetween: 25,\n\n autoplay: {\n delay: 3000,\n disableOnInteraction: false,\n },\n\n pagination: {\n el: \".swiper-pagination\",\n clickable: true,\n },\n\n breakpoints: {\n\n 0: {\n slidesPerView: 1,\n },\n\n 768: {\n slidesPerView: 2,\n },\n\n 1200: {\n slidesPerView: 3,\n }\n\n }\n\n});\n\n<\/script>\n\n\n\n<link\n rel=\"stylesheet\"\n href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/7.0.1\/css\/all.min.css\"\n\/>\n\n<style>\n\n\/* ==========================================\n LIGHT MODE CTA SECTION\n========================================== *\/\n\nbody{\n background: #f5f5f5;\n color: #111;\n font-family: Arial, sans-serif;\n}\n\n.cta{\n padding: 120px 7%;\n background: #f5f5f5;\n}\n\n.cta-box{\n position: relative;\n\n overflow: hidden;\n\n padding: 80px 50px;\n\n border-radius: 35px;\n\n text-align: center;\n\n background: #ffffff;\n\n border: 1px solid #dcdcdc;\n\n box-shadow:\n 0 20px 50px rgba(0,0,0,0.08);\n}\n\n\/* ==========================================\n BACKGROUND GLOW\n========================================== *\/\n\n.cta-box::before{\n content: \"\";\n\n position: absolute;\n width: 400px;\n height: 400px;\n\n background:\n radial-gradient(\n circle,\n rgba(0,0,0,0.05),\n transparent 70%\n );\n\n top: -150px;\n left: -100px;\n\n animation: floatGlow 7s ease-in-out infinite;\n}\n\n.cta-box::after{\n content: \"\";\n\n position: absolute;\n width: 350px;\n height: 350px;\n\n background:\n radial-gradient(\n circle,\n rgba(80,80,80,0.08),\n transparent 70%\n );\n\n bottom: -150px;\n right: -120px;\n\n animation: floatGlow 8s ease-in-out infinite alternate;\n}\n\n\/* ==========================================\n CONTENT\n========================================== *\/\n\n.cta-content{\n position: relative;\n z-index: 2;\n}\n\n.cta-icon{\n width: 90px;\n height: 90px;\n\n margin: auto auto 30px;\n\n border-radius: 25px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n background:\n linear-gradient(\n 135deg,\n #222,\n #555\n );\n\n color: #fff;\n\n font-size: 2rem;\n\n box-shadow:\n 0 15px 35px rgba(0,0,0,0.15);\n\n animation: pulse 3s infinite;\n}\n\n.cta h2{\n font-size: clamp(2.5rem,5vw,4.5rem);\n\n font-weight: 800;\n\n line-height: 1.2;\n\n margin-bottom: 25px;\n\n color: #111;\n}\n\n.cta p{\n max-width: 850px;\n\n margin: auto;\n\n color: #555;\n\n font-size: 1.1rem;\n\n line-height: 1.9;\n\n margin-bottom: 45px;\n}\n\n\/* ==========================================\n BUTTONS\n========================================== *\/\n\n.cta-buttons{\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 20px;\n flex-wrap: wrap;\n}\n\n.cta-btn{\n position: relative;\n\n overflow: hidden;\n\n padding: 18px 40px;\n\n border-radius: 18px;\n\n font-size: 1rem;\n font-weight: 600;\n\n transition: 0.45s ease;\n\n text-decoration: none;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n}\n\n\/* PRIMARY BUTTON *\/\n.cta-primary{\n background:\n linear-gradient(\n 135deg,\n #222,\n #555\n );\n\n color: #fff !important;\n\n box-shadow:\n 0 15px 35px rgba(0,0,0,0.15);\n}\n\n\/* SECONDARY BUTTON *\/\n.cta-secondary{\n background: #f1f1f1;\n\n border: 1px solid #d0d0d0;\n\n color: #222 !important;\n}\n\n\/* HOVER *\/\n.cta-btn:hover{\n transform:\n translateY(-7px)\n scale(1.04);\n}\n\n.cta-primary:hover{\n box-shadow:\n 0 20px 45px rgba(0,0,0,0.22);\n}\n\n.cta-secondary:hover{\n background: #e7e7e7;\n\n border-color: #999;\n}\n\n\/* SHINE EFFECT *\/\n.cta-btn::before{\n content: \"\";\n\n position: absolute;\n\n top: 0;\n left: -120%;\n\n width: 100%;\n height: 100%;\n\n background:\n linear-gradient(\n 90deg,\n transparent,\n rgba(255,255,255,0.4),\n transparent\n );\n\n transition: 0.7s;\n}\n\n.cta-btn:hover::before{\n left: 120%;\n}\n\n\/* ==========================================\n ANIMATIONS\n========================================== *\/\n\n@keyframes floatGlow{\n\n 0%{\n transform: translateY(0);\n }\n\n 50%{\n transform: translateY(-20px);\n }\n\n 100%{\n transform: translateY(0);\n }\n\n}\n\n@keyframes pulse{\n\n 0%{\n transform: scale(1);\n }\n\n 50%{\n transform: scale(1.08);\n }\n\n 100%{\n transform: scale(1);\n }\n\n}\n\n\/* ==========================================\n RESPONSIVE\n========================================== *\/\n\n@media (max-width:768px){\n\n .cta-box{\n padding: 60px 25px;\n }\n\n .cta-btn{\n width: 100%;\n }\n\n .cta-buttons{\n flex-direction: column;\n }\n\n}\n\n<\/style>\n\n<section class=\"cta\">\n\n <div class=\"cta-box\">\n\n <div class=\"cta-content\">\n\n \n <div class=\"cta-icon\">\n <i class=\"fa-solid fa-code\"><\/i>\n <\/div>\n\n \n <h2>\n \u0627\u0628\u062f\u0623 \u0631\u062d\u0644\u062a\u0643 \u0641\u064a \u0627\u0644\u0628\u0631\u0645\u062c\u0629 \u0627\u0644\u064a\u0648\u0645\n <\/h2>\n\n \n <p>\n \u0627\u0646\u0636\u0645 \u0625\u0644\u0649 \u062f\u0648\u0631\u0627\u062a\u0646\u0627 \u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u0641\u064a \u0627\u0644\u0628\u0631\u0645\u062c\u0629 \u0648\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0628\u0631\u0645\u062c\u064a\u0627\u062a.\n\n\u0627\u0643\u062a\u0633\u0628 \u0645\u0647\u0627\u0631\u0627\u062a \u0639\u0645\u0644\u064a\u0629\u060c \u0623\u0646\u0634\u0626 \u0645\u0634\u0627\u0631\u064a\u0639 \u062d\u0642\u064a\u0642\u064a\u0629\u060c \u0648\u0627\u0633\u062a\u0639\u062f \u0644\u0644\u0639\u0645\u0644 \u0627\u0644\u062d\u0631 \u0648\u0642\u0637\u0627\u0639 \u0627\u0644\u062a\u0643\u0646\u0648\u0644\u0648\u062c\u064a\u0627 \u0645\u0639 \u0645\u0631\u0634\u062f\u064a\u0646 \u062e\u0628\u0631\u0627\u0621.\n <\/p>\n\n \n <div class=\"cta-buttons\">\n\n <a href=\"\/ar\/courses\/\" class=\"cta-btn cta-primary\">\n <i class=\"fa-solid fa-graduation-cap\"><\/i>\n \u0627\u0643\u062a\u0634\u0641 \u0643\u0648\u0631\u0633\u0627\u062a\u0646\u0627\n <\/a>\n\n <a href=\"\/ar\/contact\/\" class=\"cta-btn cta-secondary\">\n <i class=\"fa-solid fa-paper-plane\"><\/i>\n \u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627\n <\/a>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n\n<\/section>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>","protected":false},"excerpt":{"rendered":"<p>Programming Courses & Software Services Learn \u2022 Build \u2022 Grow Real Learning. Real Code. Right Place. We are a programming company that provides professional coding courses, software services, web development solutions, and real-world learning experiences for developers and businesses. Our Courses Our Services Who We Are We are a programming company focused on building real […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-74","page","type-page","status-publish","hentry"],"blocksy_meta":[],"yoast_head":"\n<title>Home – Dev Root Academy Dev Root Academy<\/title>\n<meta name=\"description\" content=\"Dev Root Academy offers professional programming courses and software development services to help students and businesses grow in the digital world.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"ar_AR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Home\" \/>\n<meta property=\"og:description\" content=\"DevRootAcademy offers professional programming courses and software development services to help students and businesses grow in the digital world.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devrootacademy.com\/ar\/\" \/>\n<meta property=\"og:site_name\" content=\"Dev Root Academy\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-13T05:28:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/devrootacademy.com\/wp-content\/uploads\/2026\/05\/logo-.png\" \/>\n\t<meta property=\"og:image:width\" content=\"430\" \/>\n\t<meta property=\"og:image:height\" content=\"185\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u062f\u0642\u064a\u0642\u0629 \u0648\u0627\u062d\u062f\u0629\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/devrootacademy.com\/\",\"url\":\"https:\/\/devrootacademy.com\/\",\"name\":\"Home – Dev Root Academy Dev Root Academy\",\"isPartOf\":{\"@id\":\"https:\/\/devrootacademy.com\/#website\"},\"datePublished\":\"2026-05-12T21:54:05+00:00\",\"dateModified\":\"2026-05-13T05:28:19+00:00\",\"description\":\"Dev Root Academy offers professional programming courses and software development services to help students and businesses grow in the digital world.\",\"breadcrumb\":{\"@id\":\"https:\/\/devrootacademy.com\/#breadcrumb\"},\"inLanguage\":\"ar\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/devrootacademy.com\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/devrootacademy.com\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/devrootacademy.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/devrootacademy.com\/#website\",\"url\":\"https:\/\/devrootacademy.com\/\",\"name\":\"Dev Root Academy\",\"description\":\"Code Your Future with Dev Root Academy\",\"publisher\":{\"@id\":\"https:\/\/devrootacademy.com\/#organization\"},\"alternateName\":\"Dev Root Academy\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/devrootacademy.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ar\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/devrootacademy.com\/#organization\",\"name\":\"Dev Root Academy\",\"url\":\"https:\/\/devrootacademy.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\/\/devrootacademy.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/devrootacademy.com\/wp-content\/uploads\/2026\/05\/logo-.png\",\"contentUrl\":\"https:\/\/devrootacademy.com\/wp-content\/uploads\/2026\/05\/logo-.png\",\"width\":430,\"height\":185,\"caption\":\"Dev Root Academy\"},\"image\":{\"@id\":\"https:\/\/devrootacademy.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/\",\"https:\/\/www.instgram.com\",\"https:\/\/www.tiktok.com\"],\"description\":\"Dev Root Academy offers professional programming courses and software development services to help students and businesses grow in the digital world.\",\"email\":\"hazemashraf.programming@gmail.com\",\"telephone\":\"01013974594\",\"legalName\":\"Dev Root Academy\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"1\",\"maxValue\":\"10\"},\"publishingPrinciples\":\"https:\/\/devrootacademy.com\/privacy-policy\/\",\"ownershipFundingInfo\":\"https:\/\/devrootacademy.com\/terms-conditions\/\",\"actionableFeedbackPolicy\":\"https:\/\/devrootacademy.com\/our-student\/\",\"correctionsPolicy\":\"https:\/\/devrootacademy.com\/privacy-policy\/\",\"ethicsPolicy\":\"https:\/\/devrootacademy.com\/privacy-policy\/\",\"diversityPolicy\":\"https:\/\/devrootacademy.com\/privacy-policy\/\",\"diversityStaffingReport\":\"https:\/\/devrootacademy.com\/contact-us\/\"}]}<\/script>\n","yoast_head_json":{"title":"Home – Dev Root Academy Dev Root Academy","description":"Dev Root Academy offers professional programming courses and software development services to help students and businesses grow in the digital world.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"ar_AR","og_type":"article","og_title":"Home","og_description":"DevRootAcademy offers professional programming courses and software development services to help students and businesses grow in the digital world.","og_url":"https:\/\/devrootacademy.com\/ar\/","og_site_name":"Dev Root Academy","article_publisher":"https:\/\/www.facebook.com\/","article_modified_time":"2026-05-13T05:28:19+00:00","og_image":[{"width":430,"height":185,"url":"https:\/\/devrootacademy.com\/wp-content\/uploads\/2026\/05\/logo-.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631":"\u062f\u0642\u064a\u0642\u0629 \u0648\u0627\u062d\u062f\u0629"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/devrootacademy.com\/","url":"https:\/\/devrootacademy.com\/","name":"Home – Dev Root Academy Dev Root Academy","isPartOf":{"@id":"https:\/\/devrootacademy.com\/#website"},"datePublished":"2026-05-12T21:54:05+00:00","dateModified":"2026-05-13T05:28:19+00:00","description":"Dev Root Academy offers professional programming courses and software development services to help students and businesses grow in the digital world.","breadcrumb":{"@id":"https:\/\/devrootacademy.com\/#breadcrumb"},"inLanguage":"ar","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devrootacademy.com\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/devrootacademy.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/devrootacademy.com\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/devrootacademy.com\/#website","url":"https:\/\/devrootacademy.com\/","name":"Dev Root Academy","description":"Code Your Future with Dev Root Academy","publisher":{"@id":"https:\/\/devrootacademy.com\/#organization"},"alternateName":"Dev Root Academy","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/devrootacademy.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ar"},{"@type":"Organization","@id":"https:\/\/devrootacademy.com\/#organization","name":"Dev Root Academy","url":"https:\/\/devrootacademy.com\/","logo":{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/devrootacademy.com\/#\/schema\/logo\/image\/","url":"https:\/\/devrootacademy.com\/wp-content\/uploads\/2026\/05\/logo-.png","contentUrl":"https:\/\/devrootacademy.com\/wp-content\/uploads\/2026\/05\/logo-.png","width":430,"height":185,"caption":"Dev Root Academy"},"image":{"@id":"https:\/\/devrootacademy.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/","https:\/\/www.instgram.com","https:\/\/www.tiktok.com"],"description":"Dev Root Academy offers professional programming courses and software development services to help students and businesses grow in the digital world.","email":"hazemashraf.programming@gmail.com","telephone":"01013974594","legalName":"Dev Root Academy","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"1","maxValue":"10"},"publishingPrinciples":"https:\/\/devrootacademy.com\/privacy-policy\/","ownershipFundingInfo":"https:\/\/devrootacademy.com\/terms-conditions\/","actionableFeedbackPolicy":"https:\/\/devrootacademy.com\/our-student\/","correctionsPolicy":"https:\/\/devrootacademy.com\/privacy-policy\/","ethicsPolicy":"https:\/\/devrootacademy.com\/privacy-policy\/","diversityPolicy":"https:\/\/devrootacademy.com\/privacy-policy\/","diversityStaffingReport":"https:\/\/devrootacademy.com\/contact-us\/"}]}},"_links":{"self":[{"href":"https:\/\/devrootacademy.com\/ar\/wp-json\/wp\/v2\/pages\/74","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devrootacademy.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/devrootacademy.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/devrootacademy.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devrootacademy.com\/ar\/wp-json\/wp\/v2\/comments?post=74"}],"version-history":[{"count":80,"href":"https:\/\/devrootacademy.com\/ar\/wp-json\/wp\/v2\/pages\/74\/revisions"}],"predecessor-version":[{"id":267,"href":"https:\/\/devrootacademy.com\/ar\/wp-json\/wp\/v2\/pages\/74\/revisions\/267"}],"wp:attachment":[{"href":"https:\/\/devrootacademy.com\/ar\/wp-json\/wp\/v2\/media?parent=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":74,"date":"2026-05-12T21:54:05","date_gmt":"2026-05-12T21:54:05","guid":{"rendered":"https:\/\/devrootacademy.com\/?page_id=74"},"modified":"2026-05-13T05:28:19","modified_gmt":"2026-05-13T05:28:19","slug":"home-2","status":"publish","type":"page","link":"https:\/\/devrootacademy.com\/ar\/","title":{"rendered":"\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629"},"content":{"rendered":"\n\n\n \n\n \n\n \n Programming Courses & Software Services<\/title>\n\n <meta\n name=\"description\"\n content=\"Learn real programming with professional coding courses and software services.\"\n \/>\n\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n\n <link\n rel=\"preconnect\"\n href=\"https:\/\/fonts.gstatic.com\"\n crossorigin\n \/>\n\n <link\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap\"\n rel=\"stylesheet\"\n \/>\n\n <style>\n\n \/*\n ==========================================\n RESET\n ==========================================\n *\/\n\n *{\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html{\n scroll-behavior: smooth;\n }\n\n body{\n font-family: \"Poppins\", sans-serif;\n overflow-x: hidden;\n }\n\n a{\n text-decoration: none;\n }\n\n \/*\n ==========================================\n HERO SECTION\n ==========================================\n *\/\n\n .hero{\n position: relative;\n width: 100%;\n min-height: 60vh;\n\n background:\n linear-gradient(\n rgba(5, 8, 22, 0.75),\n rgba(5, 8, 22, 0.82)\n ),\n\n url(\"https:\/\/devrootacademy.com\/wp-content\/uploads\/2026\/05\/hero-image.png\");\n\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n text-align: center;\n overflow: hidden;\n padding: 20px;\n\n isolation: isolate;\n}\n\n \/*\n ==========================================\n BACKGROUND IMAGE\n ==========================================\n *\/\n\n \n\n \/*\n ==========================================\n OVERLAY GLOW\n ==========================================\n *\/\n\n .hero::after{\n content: \"\";\n\n position: absolute;\n inset: 0;\n\n background:\n radial-gradient(\n circle at top left,\n rgba(0,255,170,0.15),\n transparent 30%\n ),\n\n radial-gradient(\n circle at bottom right,\n rgba(0,140,255,0.18),\n transparent 35%\n );\n\n z-index: -1;\n }\n\n \/*\n ==========================================\n CONTENT\n ==========================================\n *\/\n\n .hero-content{\n max-width: 950px;\n animation: fadeUp 1.2s ease;\n }\n\n .hero-badge{\n display: inline-flex;\n align-items: center;\n gap: 10px;\n\n padding: 12px 22px;\n\n border-radius: 999px;\n\n background: rgba(255,255,255,0.08);\n\n border: 1px solid rgba(255,255,255,0.1);\n\n backdrop-filter: blur(10px);\n\n color: #d9d9d9;\n\n font-size: 14px;\n\n margin-bottom: 28px;\n }\n\n .hero-badge span{\n width: 10px;\n height: 10px;\n border-radius: 50%;\n\n background: #00ffaa;\n\n box-shadow: 0 0 15px #00ffaa;\n }\n\n .hero-title{\n color: #fff;\n\n font-size: clamp(3rem, 8vw, 6.5rem);\n\n font-weight: 800;\n\n line-height: 1.05;\n\n margin-bottom: 25px;\n\n letter-spacing: -3px;\n }\n\n .gradient{\n background: linear-gradient(\n 90deg,\n #00ffaa,\n #00d4ff,\n #7d5fff\n );\n\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n .hero-description{\n max-width: 760px;\n\n margin-inline: auto;\n\n color: #c2c7d6;\n\n font-size: 1.15rem;\n\n line-height: 1.9;\n\n margin-bottom: 45px;\n }\n\n \/*\n ==========================================\n BUTTONS\n ==========================================\n *\/\n\n .hero-buttons{\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 20px;\n flex-wrap: wrap;\n }\n\n .btn{\n position: relative;\n\n overflow: hidden;\n\n padding: 17px 38px;\n\n border-radius: 18px;\n\n font-weight: 600;\n\n font-size: 16px;\n\n transition: 0.4s ease;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n backdrop-filter: blur(12px);\n\n will-change: transform;\n }\n\n .btn-primary{\n background: linear-gradient(\n 135deg,\n #00ffaa,\n #00d4ff\n );\n\n color: #050816;\n\n box-shadow:\n 0 15px 35px rgba(0,255,170,0.35);\n }\n\n .btn-secondary{\n background: rgba(255,255,255,0.08);\n\n border: 1px solid rgba(255,255,255,0.15);\n\n color: #fff;\n }\n\n .btn:hover{\n transform:\n translateY(-7px)\n scale(1.04);\n }\n\n .btn-primary:hover{\n box-shadow:\n 0 20px 50px rgba(0,255,170,0.45);\n }\n\n .btn-secondary:hover{\n background: rgba(255,255,255,0.12);\n border-color: rgba(255,255,255,0.3);\n }\n\n \/*\n ==========================================\n BUTTON SHINE EFFECT\n ==========================================\n *\/\n\n .btn::before{\n content: \"\";\n\n position: absolute;\n\n top: 0;\n left: -120%;\n\n width: 100%;\n height: 100%;\n\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(255,255,255,0.35),\n transparent\n );\n\n transition: 0.7s;\n }\n\n .btn:hover::before{\n left: 120%;\n }\n\n \/*\n ==========================================\n ANIMATIONS\n ==========================================\n *\/\n\n @keyframes fadeUp{\n\n from{\n opacity: 0;\n transform: translateY(50px);\n }\n\n to{\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n\n\n \/*\n ==========================================\n RESPONSIVE\n ==========================================\n *\/\n\n @media (max-width: 768px){\n\n .hero-title{\n letter-spacing: -1px;\n }\n\n .hero-description{\n font-size: 1rem;\n }\n\n .btn{\n width: 100%;\n }\n\n .hero-buttons{\n flex-direction: column;\n }\n }\n\n <\/style>\n<\/head>\n\n<body>\n\n \n <section class=\"hero\">\n\n <div class=\"hero-content\">\n\n \n <div class=\"hero-badge\">\n <span><\/span>\n \u062a\u0639\u0644\u0651\u0645 \u2022 \u0623\u0637\u0645\u062d\u2022 \u0627\u0646\u0645\u0648\n <\/div>\n\n \n <h1 class=\"hero-title\">\n \u0627\u0644\u062a\u0639\u0644\u0645 \u0627\u0644\u062d\u0642\u064a\u0642\u064a. <br>\n \u0627\u0644\u0643\u0648\u062f \u0627\u0644\u062d\u0642\u064a\u0642\u064a. <br>\n\n <span class=\"gradient\">\n \u0627\u0644\u0645\u0643\u0627\u0646 \u0627\u0644\u0645\u0646\u0627\u0633\u0628.\n <\/span>\n <\/h1>\n\n \n <p class=\"hero-description\">\n\n \u0646\u062d\u0646 \u0634\u0631\u0643\u0629 \u0628\u0631\u0645\u062c\u0629 \u062a\u0642\u062f\u0645\n\n\u062f\u0648\u0631\u0627\u062a \u0628\u0631\u0645\u062c\u0629 \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629\u060c \u0648\u062e\u062f\u0645\u0627\u062a \u0628\u0631\u0645\u062c\u064a\u0629\u060c\n\n\u0648\u062d\u0644\u0648\u0644 \u062a\u0637\u0648\u064a\u0631 \u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0648\u064a\u0628\u060c\n\n\u0648\u062a\u062c\u0627\u0631\u0628 \u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u0639\u0645\u0644\u064a\u0629\n\n\u0644\u0644\u0645\u0637\u0648\u0631\u064a\u0646 \u0648\u0627\u0644\u0634\u0631\u0643\u0627\u062a.\n\n <\/p>\n\n \n <div class=\"hero-buttons\">\n\n <a\n href=\"\/ar\/courses\/\"\n class=\"btn btn-primary\"\n aria-label=\"Go to our courses\"\n >\n \u062f\u0648\u0631\u0627\u062a\u0646\u0627\n <\/a>\n\n <a\n href=\"\/ar\/services\/\"\n class=\"btn btn-secondary\"\n aria-label=\"Go to our services\"\n >\n \u062e\u062f\u0645\u0627\u062a\u0646\u0627\n <\/a>\n\n <\/div>\n\n <\/div>\n\n <\/section>\n\n<\/body>\n<\/html>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<style>\n.who{\n padding: 120px 7%;\n color: #fff;\n}\n\n.who-container{\n display: grid;\n grid-template-columns: 1.2fr 1fr;\n gap: 60px;\n align-items: center;\n max-width: 1200px;\n margin: auto;\n}\n\n\/* LEFT CONTENT *\/\n.who-content{\n max-width: 600px;\n}\n\n\/* TITLE *\/\n.title{\n font-size: 3rem;\n font-weight: 800;\n margin-bottom: 30px;\n position: relative;\n\n opacity: 0;\n transform: translateY(30px);\n animation: fadeUp 0.8s ease forwards;\n}\n\n\/* UNDERLINE *\/\n.title::after{\n content: \"\";\n width: 100px;\n height: 4px;\n background: linear-gradient(90deg,#00ffaa,#00d4ff);\n position: absolute;\n left: 0;\n bottom: -10px;\n border-radius: 10px;\n}\n\n\/* TEXT *\/\n.line{\n font-size: 1.15rem;\n line-height: 1.9;\n color: #b8bccb;\n margin-bottom: 18px;\n background: #050816;\n\n padding: 12px 15px;\n border-radius: 12px;\n\n transition: 0.4s ease;\n\n opacity: 0;\n transform: translateY(30px);\n animation: fadeUp 0.8s ease forwards;\n}\n\n\/* stagger *\/\n.line:nth-of-type(1){ animation-delay: 0.2s; }\n.line:nth-of-type(2){ animation-delay: 0.4s; }\n.line:nth-of-type(3){ animation-delay: 0.6s; }\n\n\/* hover *\/\n.line:hover{\n background: rgba(255,255,255,0.05);\n transform: translateX(10px);\n color: #fff;\n border-left: 3px solid #00ffaa;\n}\n\n\/* RIGHT IMAGE *\/\n.who-image{\n position: relative;\n}\n\n.who-image img{\n width: 100%;\n border-radius: 20px;\n object-fit: cover;\n\n box-shadow: 0 25px 60px rgba(0,0,0,0.5);\n\n transition: 0.5s ease;\n\n opacity: 0;\n transform: translateX(40px);\n animation: fadeRight 1s ease forwards;\n}\n\n.who-image img:hover{\n transform: scale(1.03) rotate(-1deg);\n}\n\n\/* ANIMATIONS *\/\n@keyframes fadeUp{\n from{\n opacity: 0;\n transform: translateY(30px);\n }\n to{\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes fadeRight{\n from{\n opacity: 0;\n transform: translateX(40px);\n }\n to{\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n\/* RESPONSIVE *\/\n@media (max-width: 900px){\n .who-container{\n grid-template-columns: 1fr;\n text-align: center;\n }\n\n .who-image img{\n margin-top: 40px;\n }\n\n .title::after{\n left: 50%;\n transform: translateX(-50%);\n }\n}\n.last{\nposition: relative;\n max-width: 600px;\n text-align: center;\n margin: auto;\n}\n.last::after{\n content: \"\";\n width: 300px;\n height: 4px;\n background: linear-gradient(90deg,#00ffaa,#00d4ff);\n position: absolute;\n left: 0;\n bottom: -10px;\n border-radius: 10px;\nleft: 50%;\n transform: translateX(-50%);\n}\n<\/style>\n\n<section class=\"who\">\n\n <div class=\"who-container\">\n\n \n <div class=\"who-content\">\n\n <h2 class=\"title\">\u0645\u0646 \u0646\u062d\u0646<\/h2>\n\n <p class=\"line\">\n \u0646\u062d\u0646 \u0634\u0631\u0643\u0629 \u0628\u0631\u0645\u062c\u0629 \u062a\u0631\u0643\u0632 \u0639\u0644\u0649 \u0628\u0646\u0627\u0621 \u0645\u0637\u0648\u0631\u064a\u0646 \u062d\u0642\u064a\u0642\u064a\u064a\u0646\u060c \u0648\u0644\u064a\u0633 \u0645\u062c\u0631\u062f \u062a\u062f\u0631\u064a\u0633 \u0627\u0644\u0646\u0638\u0631\u064a\u0627\u062a.\n <\/p>\n\n <p class=\"line\">\n \u0646\u0642\u062f\u0645 \u062f\u0648\u0631\u0627\u062a \u0628\u0631\u0645\u062c\u0629 \u062d\u062f\u064a\u062b\u0629\u060c \u0648\u0645\u0634\u0627\u0631\u064a\u0639 \u0639\u0645\u0644\u064a\u0629\u060c \u0648\u062e\u0628\u0631\u0629 \u062d\u0642\u064a\u0642\u064a\u0629 \u0641\u064a \u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0628\u0631\u0645\u062c\u064a\u0627\u062a.\n <\/p>\n\n <p class=\"line\">\n \u0647\u062f\u0641\u0646\u0627 \u0647\u0648 \u0645\u0633\u0627\u0639\u062f\u062a\u0643 \u0639\u0644\u0649 \u0628\u062f\u0621 \u0645\u0633\u064a\u0631\u062a\u0643 \u0627\u0644\u0645\u0647\u0646\u064a\u0629 \u0641\u064a \u062a\u0637\u0648\u064a\u0631 \u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0648\u064a\u0628 \u0628\u0645\u0647\u0627\u0631\u0627\u062a \u0639\u0645\u0644\u064a\u0629 \u0642\u0648\u064a\u0629.\n <\/p>\n\n <\/div>\n\n \n <div class=\"who-image\">\n\n <img decoding=\"async\"\n src=\"https:\/\/images.unsplash.com\/photo-1522071820081-009f0129c71c?q=80&w=1600&auto=format&fit=crop\"\n alt=\"Programming team working together\"\n loading=\"lazy\"\n \/>\n\n <\/div>\n\n <\/div>\n<p class=\"last\"> <\/p>\n<\/section>\n<\/div>\n<\/div>\n\n\n\n<style> \n.about-us{\n padding: 45px 7%;\n color: #fff;\n}\n\n.about-container{\n display: grid;\n grid-template-columns: 1.2fr 1fr;\n gap: 60px;\n align-items: center;\n}\n\n\/* LEFT TEXT *\/\n.about-text h2{\n font-size: 3rem;\n font-weight: 800;\n margin-bottom: 25px;\n position: relative;\n}\n\n.about-text h2::after{\n content: \"\";\n width: 90px;\n height: 4px;\n background: linear-gradient(90deg,#00ffaa,#00d4ff);\n position: absolute;\n left: 0;\n bottom: -10px;\n border-radius: 10px;\n}\n\n.about-text p{\n color: #b8bccb;\n font-size: 1.1rem;\n line-height: 1.9;\n margin-bottom: 15px;\n}\n\n\/* RIGHT GRID *\/\n.about-cards{\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 20px;\n}\n\n\/* CARD *\/\n.card{\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: 18px;\n padding: 25px;\n backdrop-filter: blur(10px);\n background: #050816;\n\n\n transition: 0.4s ease;\n cursor: pointer;\n\n opacity: 0;\n transform: translateY(20px);\n animation: fadeUp 0.8s ease forwards;\n}\n\n\/* stagger *\/\n.card:nth-child(1){ animation-delay: 0.1s; }\n.card:nth-child(2){ animation-delay: 0.2s; }\n.card:nth-child(3){ animation-delay: 0.3s; }\n.card:nth-child(4){ animation-delay: 0.4s; }\n\n.card h3{\n font-size: 1.6rem;\n color: #00ffaa;\n margin-bottom: 10px;\n}\n\n.card p{\n color: #b8bccb;\n font-size: 0.95rem;\n line-height: 1.6;\n}\n\n\/* HOVER EFFECT *\/\n.card:hover{\n transform: translateY(-10px) scale(1.03);\n border-color: rgba(0,255,170,0.4);\n box-shadow: 0 20px 50px rgba(0, 255, 170, 0.392);\n}\n\n\/* ANIMATION *\/\n@keyframes fadeUp{\n from{\n opacity: 0;\n transform: translateY(30px);\n }\n to{\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n\/* RESPONSIVE *\/\n@media (max-width: 900px){\n .about-container{\n grid-template-columns: 1fr;\n }\n\n .about-cards{\n grid-template-columns: 1fr;\n }\n\n .about-text{\n text-align: center;\n }\n\n .about-text h2::after{\n left: 50%;\n transform: translateX(-50%);\n }\n}\n\n.last{\nposition: relative;\n max-width: 600px;\n text-align: center;\n margin: auto;\n}\n.last::after{\n content: \"\";\n width: 300px;\n height: 4px;\n background: linear-gradient(90deg,#00ffaa,#00d4ff);\n position: absolute;\n left: 0;\n bottom: -10px;\ntop:25px;\n border-radius: 10px;\nleft: 50%;\n transform: translateX(-50%);\n}\n\n<\/style>\n<section class=\"about-us\" id=\"about\">\n\n <div class=\"about-container\">\n\n \n <div class=\"about-text\">\n\n <h2>\u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0639\u0646\u0627<\/h2>\n\n <p>\n \u0646\u062d\u0646 \u0634\u0631\u0643\u0629 \u0628\u0631\u0645\u062c\u0629 \u0645\u062d\u062a\u0631\u0641\u0629 \u0645\u062a\u062e\u0635\u0635\u0629 \u0641\u064a \u062a\u0642\u062f\u064a\u0645 \u062f\u0648\u0631\u0627\u062a \u0627\u0644\u0628\u0631\u0645\u062c\u0629\u060c\n\u0648\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0628\u0631\u0645\u062c\u064a\u0627\u062a\u060c \u0648\u0627\u0644\u062a\u062f\u0631\u064a\u0628 \u0627\u0644\u0639\u0645\u0644\u064a \u0639\u0644\u0649 \u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0628\u0631\u0645\u062c\u064a\u0627\u062a.\n <\/p>\n\n <p>\n \u0646\u0631\u0643\u0632 \u0639\u0644\u0649 \u0628\u0646\u0627\u0621 \u0645\u0637\u0648\u0631\u064a\u0646 \u0623\u0643\u0641\u0627\u0621 \u0645\u0646 \u062e\u0644\u0627\u0644 \u0627\u0644\u062a\u0639\u0644\u0645 \u0627\u0644\u0639\u0645\u0644\u064a\u060c \u0648\u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u062d\u0642\u064a\u0642\u064a\u0629\u060c\n\n\u0648\u0627\u0644\u062e\u0628\u0631\u0629 \u0641\u064a \u0645\u062c\u0627\u0644 \u0627\u0644\u0635\u0646\u0627\u0639\u0629.\n <\/p>\n\n <p>\n \u0645\u0647\u0645\u062a\u0646\u0627 \u0647\u064a \u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0637\u0644\u0627\u0628 \u0644\u0633\u0648\u0642 \u0627\u0644\u0639\u0645\u0644 \u0628\u0645\u0647\u0627\u0631\u0627\u062a \u062d\u0642\u064a\u0642\u064a\u0629\u060c \u0648\u0644\u064a\u0633 \u0645\u062c\u0631\u062f \u0646\u0638\u0631\u064a\u0627\u062a.\n <\/p>\n\n <\/div>\n\n \n <div class=\"about-cards\">\n\n <div class=\"card\">\n <h3>\u0623\u0643\u062b\u0631 \u0645\u0646 5 \u0633\u0646\u0648\u0627\u062a<\/h3>\n <p>\u062e\u0628\u0631\u0629 \u0641\u064a \u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0628\u0631\u0645\u062c\u064a\u0627\u062a \u0648\u062a\u0637\u0648\u064a\u0631 \u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0648\u064a\u0628<\/p>\n <\/div>\n\n <div class=\"card\">\n <h3>\u0623\u0643\u062b\u0631 \u0645\u0646 20 \u0645\u0634\u0631\u0648\u0639\u064b\u0627<\/h3>\n <p>\u0645\u0634\u0627\u0631\u064a\u0639 \u0645\u0633\u062a\u0642\u0644\u0629 \u0648\u0645\u0634\u0627\u0631\u064a\u0639 \u0634\u0631\u0643\u0627\u062a \u0645\u0643\u062a\u0645\u0644\u0629<\/p>\n <\/div>\n\n <div class=\"card\">\n <h3>\u0623\u0643\u062b\u0631 \u0645\u0646 50 \u0637\u0627\u0644\u0628\u064b\u0627<\/h3>\n <p>\u062a\u062e\u0631\u062c \u0641\u064a \u062f\u0648\u0631\u0627\u062a \u0627\u0644\u0628\u0631\u0645\u062c\u0629<\/p>\n <\/div>\n\n <div class=\"card\">\n <h3>\u0641\u064a \u0627\u0644\u0645\u0648\u0642\u0639 \u0648\u0639\u0628\u0631 \u0627\u0644\u0625\u0646\u062a\u0631\u0646\u062a<\/h3>\n <p>\u0627\u0644\u0641\u0631\u0648\u0639 + \u0646\u0638\u0627\u0645 \u0627\u0644\u062a\u0639\u0644\u0645 \u0639\u0628\u0631 \u0627\u0644\u0625\u0646\u062a\u0631\u0646\u062a<\/p>\n <\/div>\n\n <\/div>\n\n <\/div>\n<p class=\"last\"> <\/p>\n\n<\/section>\n\n\n\n\n\n<head>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/7.0.1\/css\/all.min.css\">\n<\/head>\n<style>\n\n\/* ==========================================\n COURSES SECTION\n========================================== *\/\n\n.courses{\n padding: 120px 7%;\n color: #fff;\n}\n\n.courses-grid a{\n background: #050816;\n\n}\n.courses-header{\n text-align: center;\n margin-bottom: 70px;\n}\n\n.courses-header h2{\n font-size: 3rem;\n font-weight: 800;\n margin-bottom: 20px;\n color:#050816;\n}\n\n\n\n\/* ==========================================\n GRID\n========================================== *\/\n\n.courses-grid{\n display: grid;\n grid-template-columns: repeat(auto-fit,minmax(250px,1fr));\n gap: 25px;\n}\n\n\/* ==========================================\n CARD\n========================================== *\/\n\n.course-card{\n position: relative;\n\n padding: 35px 30px;\n\n border-radius: 24px;\n\n background:\n linear-gradient(\n 145deg,\n rgba(255,255,255,0.06),\n rgba(255,255,255,0.03)\n );\n\n border: 1px solid rgba(255,255,255,0.08);\n\n overflow: hidden;\n\n transition: 0.45s ease;\n\n backdrop-filter: blur(12px);\n\n text-decoration: none;\n\n opacity: 0;\n transform: translateY(40px);\n\n animation: fadeUp 0.8s ease forwards;\n}\n\n\/* stagger animation *\/\n.course-card:nth-child(1){ animation-delay: 0.1s; }\n.course-card:nth-child(2){ animation-delay: 0.2s; }\n.course-card:nth-child(3){ animation-delay: 0.3s; }\n.course-card:nth-child(4){ animation-delay: 0.4s; }\n.course-card:nth-child(5){ animation-delay: 0.5s; }\n.course-card:nth-child(6){ animation-delay: 0.6s; }\n.course-card:nth-child(7){ animation-delay: 0.7s; }\n.course-card:nth-child(8){ animation-delay: 0.8s; }\n.course-card:nth-child(9){ animation-delay: 0.9s; }\n.course-card:nth-child(10){ animation-delay: 1s; }\n\n\/* glowing background *\/\n.course-card::before{\n content: \"\";\n\n position: absolute;\n inset: 0;\n\n background:\n radial-gradient(\n circle at top left,\n rgba(0,255,170,0.15),\n transparent 35%\n );\n\n opacity: 0;\n\n transition: 0.5s ease;\n}\n\n\/* hover *\/\n.course-card:hover{\n transform:\n translateY(-12px)\n scale(1.03);\n\n border-color: rgba(0,255,170,0.35);\n\n box-shadow:\n 0 25px 60px rgba(0,255,170,0.12);\n}\n\n.course-card:hover::before{\n opacity: 1;\n}\n\n\/* ==========================================\n CONTENT\n========================================== *\/\n\n.course-icon{\n width: 70px;\n height: 70px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n border-radius: 18px;\n\n background:\n linear-gradient(\n 135deg,\n #00ffaa,\n #00d4ff\n );\n\n margin-bottom: 25px;\n\n font-size: 1.8rem;\n font-weight: 700;\n color: #050816;\n\n transition: 0.4s ease;\n}\n\n.course-card:hover .course-icon{\n transform: rotate(8deg) scale(1.1);\n}\n\n.course-card h3{\n font-size: 1.5rem;\n margin-bottom: 12px;\n color: #fff;\n}\n\n.course-card p{\n color: #b8bccb;\n line-height: 1.8;\n font-size: 0.98rem;\n}\n\n.last{\nposition: relative;\n max-width: 600px;\n text-align: center;\n margin: auto;\n}\n.last::after{\n content: \"\";\n width: 300px;\n height: 4px;\n background: linear-gradient(90deg,#00ffaa,#00d4ff);\n position: absolute;\n left: 0;\n bottom: -10px;\n border-radius: 10px;\nleft: 50%;\n transform: translateX(-50%);\n}\n\n\n\/* ==========================================\n ANIMATION\n========================================== *\/\n\n@keyframes fadeUp{\n\n from{\n opacity: 0;\n transform: translateY(40px);\n }\n\n to{\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n\/* ==========================================\n RESPONSIVE\n========================================== *\/\n\n@media (max-width: 768px){\n\n .courses-header h2{\n font-size: 2.4rem;\n }\n\n}\n\n\n<\/style>\n\n<section class=\"courses\" id=\"courses\">\n\n \n <div class=\"courses-header\">\n\n <h2>\u062f\u0648\u0631\u0627\u062a\u0646\u0627<\/h2>\n\n <\/div>\n\n \n <div class=\"courses-grid\">\n\n \n <a href=\"\/ar\/courses-details\/\" class=\"course-card\">\n\n <div class=\"course-icon\"><i class=\"fa-solid fa-code\"><\/i><\/div>\n\n <h3>Fundamental Programming<\/h3>\n\n <\/a>\n\n \n <a href=\"\/ar\/courses-details\/\" class=\"course-card\">\n\n <div class=\"course-icon\"><i class=\"fa-solid fa-globe\"><\/i><\/div>\n\n <h3>Frontend<\/h3>\n\n <\/a>\n\n \n <a href=\"\/ar\/courses-details\/\" class=\"course-card\">\n\n <div class=\"course-icon\"><i class=\"fa-solid fa-server\"><\/i><\/div>\n\n <h3>Backend<\/h3>\n\n <\/a>\n\n \n <a href=\"\/ar\/courses-details\/\" class=\"course-card\">\n\n <div class=\"course-icon\"><i class=\"fa-solid fa-mobile\"><\/i><\/div>\n\n <h3>Mobile Development<\/h3>\n\n\n <\/a>\n\n \n <a href=\"\/ar\/courses-details\/\" class=\"course-card\">\n\n <div class=\"course-icon\"><i class=\"fa-brands fa-chrome\"><\/i><\/div>\n\n <h3>Full Stack<\/h3>\n\n\n <\/a>\n\n \n \n <a href=\"\/ar\/courses-details\/\" class=\"course-card\">\n\n <div class=\"course-icon\"><i class=\"fa-solid fa-robot\"><\/i><\/div>\n\n <h3>Artificial Intelligence<\/h3>\n\n\n <\/a>\n\n \n <a href=\"\/ar\/courses-details\/\" class=\"course-card\">\n\n <div class=\"course-icon\"><i class=\"fa-solid fa-building-shield\"><\/i><\/div>\n\n <h3>Cyber Security<\/h3>\n\n\n <\/a>\n\n \n <a href=\"\/ar\/courses-details\/\" class=\"course-card\">\n\n <div class=\"course-icon\"><i class=\"fa-brands fa-figma\"><\/i><\/div>\n\n <h3>UI \/ UX Design<\/h3>\n\n <\/a>\n\n\n\n \n <a href=\"\/ar\/courses-details\/\" class=\"course-card\">\n\n <div class=\"course-icon\"><i class=\"fa-brands fa-gitlab\"><\/i><\/div>\n\n <h3>DevOps<\/h3>\n\n <\/a>\n\n \n <a href=\"\/ar\/courses-details\/\" class=\"course-card\">\n\n <div class=\"course-icon\"><i class=\"fa-solid fa-square-poll-vertical\"><\/i><\/div>\n\n <h3>Data Analysis<\/h3>\n\n\n <\/a>\n\n\n \n <a href=\"\/ar\/courses-details\/\" class=\"course-card\">\n\n <div class=\"course-icon\"><i class=\"fa-solid fa-file-lines\"><\/i><\/div>\n\n <h3>Testing<\/h3>\n\n\n <\/a>\n\n\n\n\n <\/div>\n<p class=\"last\"> <\/p>\n\n<\/section>\n\n\n\n<head>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/7.0.1\/css\/all.min.css\">\n<\/head>\n\n<style>\n\n\/* ==========================================\n SERVICES SECTION\n========================================== *\/\n\n.services{\n padding: 120px 7%;\n color: #fff;\n}\n\n.services-grid a{\n background: #050816;\n}\n\n.services-header{\n text-align: center;\n margin-bottom: 70px;\n}\n\n.services-header h2{\n font-size: 3rem;\n font-weight: 800;\n margin-bottom: 20px;\n color:#050816;\n}\n\n\/* ==========================================\n GRID\n========================================== *\/\n\n.services-grid{\n display: grid;\n grid-template-columns: repeat(auto-fit,minmax(250px,1fr));\n gap: 25px;\n}\n\n\/* ==========================================\n CARD\n========================================== *\/\n\n.service-card{\n position: relative;\n\n padding: 35px 30px;\n\n border-radius: 24px;\n\n background:\n linear-gradient(\n 145deg,\n rgba(255,255,255,0.06),\n rgba(255,255,255,0.03)\n );\n\n border: 1px solid rgba(255,255,255,0.08);\n\n overflow: hidden;\n\n transition: 0.45s ease;\n\n backdrop-filter: blur(12px);\n\n text-decoration: none;\n\n opacity: 0;\n transform: translateY(40px);\n\n animation: fadeUp 0.8s ease forwards;\n}\n\n\/* stagger animation *\/\n.service-card:nth-child(1){ animation-delay: 0.1s; }\n.service-card:nth-child(2){ animation-delay: 0.2s; }\n.service-card:nth-child(3){ animation-delay: 0.3s; }\n.service-card:nth-child(4){ animation-delay: 0.4s; }\n.service-card:nth-child(5){ animation-delay: 0.5s; }\n.service-card:nth-child(6){ animation-delay: 0.6s; }\n.service-card:nth-child(7){ animation-delay: 0.7s; }\n.service-card:nth-child(8){ animation-delay: 0.8s; }\n\n\/* glowing background *\/\n.service-card::before{\n content: \"\";\n\n position: absolute;\n inset: 0;\n\n background:\n radial-gradient(\n circle at top left,\n rgba(0,255,170,0.15),\n transparent 35%\n );\n\n opacity: 0;\n\n transition: 0.5s ease;\n}\n\n\/* hover *\/\n.service-card:hover{\n transform:\n translateY(-12px)\n scale(1.03);\n\n border-color: rgba(0,255,170,0.35);\n\n box-shadow:\n 0 25px 60px rgba(0,255,170,0.12);\n}\n\n.service-card:hover::before{\n opacity: 1;\n}\n\n\/* ==========================================\n CONTENT\n========================================== *\/\n\n.service-icon{\n width: 70px;\n height: 70px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n border-radius: 18px;\n\n background:\n linear-gradient(\n 135deg,\n #00ffaa,\n #00d4ff\n );\n\n margin-bottom: 25px;\n\n font-size: 1.8rem;\n font-weight: 700;\n color: #050816;\n\n transition: 0.4s ease;\n}\n\n.service-card:hover .service-icon{\n transform: rotate(8deg) scale(1.1);\n}\n\n.service-card h3{\n font-size: 1.5rem;\n margin-bottom: 12px;\n color: #fff;\n}\n\n\/* line under section *\/\n.last{\n position: relative;\n max-width: 600px;\n text-align: center;\n margin: auto;\n}\n\n.last::after{\n content: \"\";\n width: 300px;\n height: 4px;\n background: linear-gradient(90deg,#00ffaa,#00d4ff);\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n bottom: -10px;\n border-radius: 10px;\n}\n\n\/* ==========================================\n ANIMATION\n========================================== *\/\n\n@keyframes fadeUp{\n\n from{\n opacity: 0;\n transform: translateY(40px);\n }\n\n to{\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n\/* ==========================================\n RESPONSIVE\n========================================== *\/\n\n@media (max-width: 768px){\n\n .services-header h2{\n font-size: 2.4rem;\n }\n\n}\n\n<\/style>\n\n<section class=\"services\" id=\"services\">\n\n \n <div class=\"services-header\">\n\n <h2>\u062e\u062f\u0645\u0627\u062a\u0646\u0627<\/h2>\n\n <\/div>\n\n \n <div class=\"services-grid\">\n\n \n <a href=\"\/ar\/services\/\" class=\"service-card\">\n\n <div class=\"service-icon\">\n <i class=\"fa-solid fa-globe\"><\/i>\n <\/div>\n\n <h3>Website Development<\/h3>\n\n <\/a>\n\n\n\n\n\n \n <a href=\"\/ar\/services\/\" class=\"service-card\">\n\n <div class=\"service-icon\">\n <i class=\"fa-solid fa-mobile-screen\"><\/i>\n <\/div>\n\n <h3>Mobile Applications<\/h3>\n\n <\/a>\n\n \n <a href=\"\/ar\/services\/\" class=\"service-card\">\n\n <div class=\"service-icon\">\n <i class=\"fa-solid fa-server\"><\/i>\n <\/div>\n\n <h3>Systems Development<\/h3>\n\n <\/a>\n\n \n <a href=\"\/ar\/services\/\" class=\"service-card\">\n\n <div class=\"service-icon\">\n <i class=\"fa-solid fa-building\"><\/i>\n <\/div>\n\n <h3>Company Systems<\/h3>\n\n <\/a>\n\n \n <a href=\"\/ar\/services\/\" class=\"service-card\">\n\n <div class=\"service-icon\">\n <i class=\"fa-solid fa-shield-halved\"><\/i>\n <\/div>\n\n <h3>Security Solutions<\/h3>\n\n <\/a>\n\n \n <a href=\"\/ar\/services\/\" class=\"service-card\">\n\n <div class=\"service-icon\">\n <i class=\"fa-solid fa-robot\"><\/i>\n <\/div>\n\n <h3>AI Agents<\/h3>\n\n <\/a>\n\n \n <a href=\"\/ar\/services\/\" class=\"service-card\">\n\n <div class=\"service-icon\">\n <i class=\"fa-solid fa-vial-circle-check\"><\/i>\n <\/div>\n\n <h3>Software Testing<\/h3>\n\n <\/a>\n\n \n <a href=\"\/ar\/services\/\" class=\"service-card\">\n\n <div class=\"service-icon\">\n <i class=\"fa-solid fa-database\"><\/i>\n <\/div>\n\n <h3>Database Solutions<\/h3>\n\n <\/a>\n\n <\/div>\n\n <p class=\"last\"><\/p>\n\n<\/section>\n\n\n\n\n<link\n rel=\"stylesheet\"\n href=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.css\"\n\/>\n\n\n<link\n rel=\"stylesheet\"\n href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/7.0.1\/css\/all.min.css\"\n\/>\n\n<style>\n\n\/* ==========================================\n LIGHT MODE\n========================================== *\/\n\nbody{\n background: #f5f5f5;\n color: #111 !important;\n font-family: Arial, sans-serif;\n}\n\n.last{\n position: relative;\n max-width: 600px;\n text-align: center;\n margin: auto;\n}\n\n.last::after{\n content: \"\";\n width: 300px;\n height: 4px;\n\n background: linear-gradient(90deg,#222,#555);\n\n position: absolute;\n left: 50%;\n bottom: -10px;\n\n transform: translateX(-50%);\n border-radius: 10px;\n}\n\n\/* ==========================================\n REVIEWS SECTION\n========================================== *\/\n\n.reviews{\n padding: 120px 7%;\n color: #111;\n overflow: hidden;\n background: #f5f5f5;\n}\n\n.reviews-header{\n text-align: center;\n margin-bottom: 70px;\n}\n\n.reviews-header h2{\n font-size: 3rem;\n font-weight: 800;\n color: #111;\n}\n\n\/* ==========================================\n SWIPER\n========================================== *\/\n\n.swiper{\n padding-bottom: 60px !important;\n}\n\n.swiper-slide{\n height: auto;\n}\n\n\/* ==========================================\n CARD\n========================================== *\/\n\n.review-card{\n position: relative;\n\n padding: 35px 30px;\n\n border-radius: 24px;\n\n background: #ffffff;\n\n border: 1px solid #dcdcdc;\n\n overflow: hidden;\n\n transition: 0.45s ease;\n\n box-shadow:\n 0 10px 25px rgba(0,0,0,0.06);\n\n height: 100%;\n}\n\n\/* subtle hover glow *\/\n.review-card::before{\n content: \"\";\n\n position: absolute;\n inset: 0;\n\n background:\n radial-gradient(\n circle at top left,\n rgba(0,0,0,0.06),\n transparent 35%\n );\n\n opacity: 0;\n\n transition: 0.5s ease;\n}\n\n.review-card:hover{\n transform:\n translateY(-10px)\n scale(1.02);\n\n border-color: #777;\n\n box-shadow:\n 0 20px 40px rgba(0,0,0,0.12);\n}\n\n.review-card:hover::before{\n opacity: 1;\n}\n\n\/* ==========================================\n CONTENT\n========================================== *\/\n\n.review-icon{\n width: 65px;\n height: 65px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n border-radius: 18px;\n\n background:\n linear-gradient(\n 135deg,\n #222,\n #555\n );\n\n color: #fff;\n\n font-size: 1.4rem;\n\n margin-bottom: 25px;\n}\n\n.review-stars{\n margin-bottom: 20px;\n color: #444;\n font-size: 1.1rem;\n}\n\n.review-text{\n color: #555;\n line-height: 1.9;\n font-size: 1rem;\n margin-bottom: 25px;\n}\n\n.review-name{\n color: #111;\n font-size: 1.1rem;\n font-weight: 600;\n margin-bottom: 5px;\n}\n\n.review-role{\n color: #777;\n font-size: 0.95rem;\n}\n\n\/* ==========================================\n PAGINATION\n========================================== *\/\n\n.swiper-pagination-bullet{\n background: #333 !important;\n opacity: 0.4;\n}\n\n.swiper-pagination-bullet-active{\n opacity: 1;\n}\n\n\/* ==========================================\n RESPONSIVE\n========================================== *\/\n\n@media (max-width:768px){\n\n .reviews-header h2{\n font-size: 2.3rem;\n }\n\n}\n\n<\/style>\n\n<section class=\"reviews\" id=\"reviews\">\n\n \n <div class=\"reviews-header\">\n\n <h2>\u062a\u0642\u064a\u064a\u0645\u0627\u062a \u0627\u0644\u0637\u0644\u0627\u0628<\/h2>\n\n <\/div>\n\n \n <div class=\"swiper reviewSwiper\">\n\n <div class=\"swiper-wrapper\">\n\n \n <div class=\"swiper-slide\">\n <div class=\"review-card\">\n\n <div class=\"review-icon\">\n <i class=\"fa-solid fa-quote-left\"><\/i>\n <\/div>\n\n <div class=\"review-stars\">\n \u2605\u2605\u2605\u2605\u2605\n <\/div>\n\n <p class=\"review-text\">\n Amazing experience and very professional instructors.\n <\/p>\n\n <h3 class=\"review-name\">Ahmed Hassan<\/h3>\n <p class=\"review-role\">Frontend Student<\/p>\n\n <\/div>\n <\/div>\n\n \n <div class=\"swiper-slide\">\n <div class=\"review-card\">\n\n <div class=\"review-icon\">\n <i class=\"fa-solid fa-code\"><\/i>\n <\/div>\n\n <div class=\"review-stars\">\n \u2605\u2605\u2605\u2605\u2605\n <\/div>\n\n <p class=\"review-text\">\n I learned real development skills through practical projects.\n <\/p>\n\n <h3 class=\"review-name\">Mohamed Ali<\/h3>\n <p class=\"review-role\">Full Stack Student<\/p>\n\n <\/div>\n <\/div>\n\n \n <div class=\"swiper-slide\">\n <div class=\"review-card\">\n\n <div class=\"review-icon\">\n <i class=\"fa-solid fa-laptop-code\"><\/i>\n <\/div>\n\n <div class=\"review-stars\">\n \u2605\u2605\u2605\u2605\u2605\n <\/div>\n\n <p class=\"review-text\">\n One of the best programming courses I have ever joined.\n <\/p>\n\n <h3 class=\"review-name\">Sarah Mostafa<\/h3>\n <p class=\"review-role\">UI\/UX Student<\/p>\n\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"swiper-pagination\"><\/div>\n\n <\/div>\n\n <p class=\"last\"><\/p>\n\n<\/section>\n\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.js\"><\/script>\n\n<script>\n\nconst swiper = new Swiper(\".reviewSwiper\", {\n\n loop: true,\n\n spaceBetween: 25,\n\n autoplay: {\n delay: 3000,\n disableOnInteraction: false,\n },\n\n pagination: {\n el: \".swiper-pagination\",\n clickable: true,\n },\n\n breakpoints: {\n\n 0: {\n slidesPerView: 1,\n },\n\n 768: {\n slidesPerView: 2,\n },\n\n 1200: {\n slidesPerView: 3,\n }\n\n }\n\n});\n\n<\/script>\n\n\n\n<link\n rel=\"stylesheet\"\n href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/7.0.1\/css\/all.min.css\"\n\/>\n\n<style>\n\n\/* ==========================================\n LIGHT MODE CTA SECTION\n========================================== *\/\n\nbody{\n background: #f5f5f5;\n color: #111;\n font-family: Arial, sans-serif;\n}\n\n.cta{\n padding: 120px 7%;\n background: #f5f5f5;\n}\n\n.cta-box{\n position: relative;\n\n overflow: hidden;\n\n padding: 80px 50px;\n\n border-radius: 35px;\n\n text-align: center;\n\n background: #ffffff;\n\n border: 1px solid #dcdcdc;\n\n box-shadow:\n 0 20px 50px rgba(0,0,0,0.08);\n}\n\n\/* ==========================================\n BACKGROUND GLOW\n========================================== *\/\n\n.cta-box::before{\n content: \"\";\n\n position: absolute;\n width: 400px;\n height: 400px;\n\n background:\n radial-gradient(\n circle,\n rgba(0,0,0,0.05),\n transparent 70%\n );\n\n top: -150px;\n left: -100px;\n\n animation: floatGlow 7s ease-in-out infinite;\n}\n\n.cta-box::after{\n content: \"\";\n\n position: absolute;\n width: 350px;\n height: 350px;\n\n background:\n radial-gradient(\n circle,\n rgba(80,80,80,0.08),\n transparent 70%\n );\n\n bottom: -150px;\n right: -120px;\n\n animation: floatGlow 8s ease-in-out infinite alternate;\n}\n\n\/* ==========================================\n CONTENT\n========================================== *\/\n\n.cta-content{\n position: relative;\n z-index: 2;\n}\n\n.cta-icon{\n width: 90px;\n height: 90px;\n\n margin: auto auto 30px;\n\n border-radius: 25px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n background:\n linear-gradient(\n 135deg,\n #222,\n #555\n );\n\n color: #fff;\n\n font-size: 2rem;\n\n box-shadow:\n 0 15px 35px rgba(0,0,0,0.15);\n\n animation: pulse 3s infinite;\n}\n\n.cta h2{\n font-size: clamp(2.5rem,5vw,4.5rem);\n\n font-weight: 800;\n\n line-height: 1.2;\n\n margin-bottom: 25px;\n\n color: #111;\n}\n\n.cta p{\n max-width: 850px;\n\n margin: auto;\n\n color: #555;\n\n font-size: 1.1rem;\n\n line-height: 1.9;\n\n margin-bottom: 45px;\n}\n\n\/* ==========================================\n BUTTONS\n========================================== *\/\n\n.cta-buttons{\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 20px;\n flex-wrap: wrap;\n}\n\n.cta-btn{\n position: relative;\n\n overflow: hidden;\n\n padding: 18px 40px;\n\n border-radius: 18px;\n\n font-size: 1rem;\n font-weight: 600;\n\n transition: 0.45s ease;\n\n text-decoration: none;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n}\n\n\/* PRIMARY BUTTON *\/\n.cta-primary{\n background:\n linear-gradient(\n 135deg,\n #222,\n #555\n );\n\n color: #fff !important;\n\n box-shadow:\n 0 15px 35px rgba(0,0,0,0.15);\n}\n\n\/* SECONDARY BUTTON *\/\n.cta-secondary{\n background: #f1f1f1;\n\n border: 1px solid #d0d0d0;\n\n color: #222 !important;\n}\n\n\/* HOVER *\/\n.cta-btn:hover{\n transform:\n translateY(-7px)\n scale(1.04);\n}\n\n.cta-primary:hover{\n box-shadow:\n 0 20px 45px rgba(0,0,0,0.22);\n}\n\n.cta-secondary:hover{\n background: #e7e7e7;\n\n border-color: #999;\n}\n\n\/* SHINE EFFECT *\/\n.cta-btn::before{\n content: \"\";\n\n position: absolute;\n\n top: 0;\n left: -120%;\n\n width: 100%;\n height: 100%;\n\n background:\n linear-gradient(\n 90deg,\n transparent,\n rgba(255,255,255,0.4),\n transparent\n );\n\n transition: 0.7s;\n}\n\n.cta-btn:hover::before{\n left: 120%;\n}\n\n\/* ==========================================\n ANIMATIONS\n========================================== *\/\n\n@keyframes floatGlow{\n\n 0%{\n transform: translateY(0);\n }\n\n 50%{\n transform: translateY(-20px);\n }\n\n 100%{\n transform: translateY(0);\n }\n\n}\n\n@keyframes pulse{\n\n 0%{\n transform: scale(1);\n }\n\n 50%{\n transform: scale(1.08);\n }\n\n 100%{\n transform: scale(1);\n }\n\n}\n\n\/* ==========================================\n RESPONSIVE\n========================================== *\/\n\n@media (max-width:768px){\n\n .cta-box{\n padding: 60px 25px;\n }\n\n .cta-btn{\n width: 100%;\n }\n\n .cta-buttons{\n flex-direction: column;\n }\n\n}\n\n<\/style>\n\n<section class=\"cta\">\n\n <div class=\"cta-box\">\n\n <div class=\"cta-content\">\n\n \n <div class=\"cta-icon\">\n <i class=\"fa-solid fa-code\"><\/i>\n <\/div>\n\n \n <h2>\n \u0627\u0628\u062f\u0623 \u0631\u062d\u0644\u062a\u0643 \u0641\u064a \u0627\u0644\u0628\u0631\u0645\u062c\u0629 \u0627\u0644\u064a\u0648\u0645\n <\/h2>\n\n \n <p>\n \u0627\u0646\u0636\u0645 \u0625\u0644\u0649 \u062f\u0648\u0631\u0627\u062a\u0646\u0627 \u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u0641\u064a \u0627\u0644\u0628\u0631\u0645\u062c\u0629 \u0648\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0628\u0631\u0645\u062c\u064a\u0627\u062a.\n\n\u0627\u0643\u062a\u0633\u0628 \u0645\u0647\u0627\u0631\u0627\u062a \u0639\u0645\u0644\u064a\u0629\u060c \u0623\u0646\u0634\u0626 \u0645\u0634\u0627\u0631\u064a\u0639 \u062d\u0642\u064a\u0642\u064a\u0629\u060c \u0648\u0627\u0633\u062a\u0639\u062f \u0644\u0644\u0639\u0645\u0644 \u0627\u0644\u062d\u0631 \u0648\u0642\u0637\u0627\u0639 \u0627\u0644\u062a\u0643\u0646\u0648\u0644\u0648\u062c\u064a\u0627 \u0645\u0639 \u0645\u0631\u0634\u062f\u064a\u0646 \u062e\u0628\u0631\u0627\u0621.\n <\/p>\n\n \n <div class=\"cta-buttons\">\n\n <a href=\"\/ar\/courses\/\" class=\"cta-btn cta-primary\">\n <i class=\"fa-solid fa-graduation-cap\"><\/i>\n \u0627\u0643\u062a\u0634\u0641 \u0643\u0648\u0631\u0633\u0627\u062a\u0646\u0627\n <\/a>\n\n <a href=\"\/ar\/contact\/\" class=\"cta-btn cta-secondary\">\n <i class=\"fa-solid fa-paper-plane\"><\/i>\n \u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627\n <\/a>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n\n<\/section>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>","protected":false},"excerpt":{"rendered":"<p>Programming Courses & Software Services Learn \u2022 Build \u2022 Grow Real Learning. Real Code. Right Place. We are a programming company that provides professional coding courses, software services, web development solutions, and real-world learning experiences for developers and businesses. Our Courses Our Services Who We Are We are a programming company focused on building real […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-74","page","type-page","status-publish","hentry"],"blocksy_meta":[],"yoast_head":"\n<title>Home – Dev Root Academy Dev Root Academy<\/title>\n<meta name=\"description\" content=\"Dev Root Academy offers professional programming courses and software development services to help students and businesses grow in the digital world.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"ar_AR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Home\" \/>\n<meta property=\"og:description\" content=\"DevRootAcademy offers professional programming courses and software development services to help students and businesses grow in the digital world.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devrootacademy.com\/ar\/\" \/>\n<meta property=\"og:site_name\" content=\"Dev Root Academy\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-13T05:28:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/devrootacademy.com\/wp-content\/uploads\/2026\/05\/logo-.png\" \/>\n\t<meta property=\"og:image:width\" content=\"430\" \/>\n\t<meta property=\"og:image:height\" content=\"185\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u062f\u0642\u064a\u0642\u0629 \u0648\u0627\u062d\u062f\u0629\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/devrootacademy.com\/\",\"url\":\"https:\/\/devrootacademy.com\/\",\"name\":\"Home – Dev Root Academy Dev Root Academy\",\"isPartOf\":{\"@id\":\"https:\/\/devrootacademy.com\/#website\"},\"datePublished\":\"2026-05-12T21:54:05+00:00\",\"dateModified\":\"2026-05-13T05:28:19+00:00\",\"description\":\"Dev Root Academy offers professional programming courses and software development services to help students and businesses grow in the digital world.\",\"breadcrumb\":{\"@id\":\"https:\/\/devrootacademy.com\/#breadcrumb\"},\"inLanguage\":\"ar\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/devrootacademy.com\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/devrootacademy.com\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/devrootacademy.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/devrootacademy.com\/#website\",\"url\":\"https:\/\/devrootacademy.com\/\",\"name\":\"Dev Root Academy\",\"description\":\"Code Your Future with Dev Root Academy\",\"publisher\":{\"@id\":\"https:\/\/devrootacademy.com\/#organization\"},\"alternateName\":\"Dev Root Academy\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/devrootacademy.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ar\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/devrootacademy.com\/#organization\",\"name\":\"Dev Root Academy\",\"url\":\"https:\/\/devrootacademy.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\/\/devrootacademy.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/devrootacademy.com\/wp-content\/uploads\/2026\/05\/logo-.png\",\"contentUrl\":\"https:\/\/devrootacademy.com\/wp-content\/uploads\/2026\/05\/logo-.png\",\"width\":430,\"height\":185,\"caption\":\"Dev Root Academy\"},\"image\":{\"@id\":\"https:\/\/devrootacademy.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/\",\"https:\/\/www.instgram.com\",\"https:\/\/www.tiktok.com\"],\"description\":\"Dev Root Academy offers professional programming courses and software development services to help students and businesses grow in the digital world.\",\"email\":\"hazemashraf.programming@gmail.com\",\"telephone\":\"01013974594\",\"legalName\":\"Dev Root Academy\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"1\",\"maxValue\":\"10\"},\"publishingPrinciples\":\"https:\/\/devrootacademy.com\/privacy-policy\/\",\"ownershipFundingInfo\":\"https:\/\/devrootacademy.com\/terms-conditions\/\",\"actionableFeedbackPolicy\":\"https:\/\/devrootacademy.com\/our-student\/\",\"correctionsPolicy\":\"https:\/\/devrootacademy.com\/privacy-policy\/\",\"ethicsPolicy\":\"https:\/\/devrootacademy.com\/privacy-policy\/\",\"diversityPolicy\":\"https:\/\/devrootacademy.com\/privacy-policy\/\",\"diversityStaffingReport\":\"https:\/\/devrootacademy.com\/contact-us\/\"}]}<\/script>\n","yoast_head_json":{"title":"Home – Dev Root Academy Dev Root Academy","description":"Dev Root Academy offers professional programming courses and software development services to help students and businesses grow in the digital world.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"ar_AR","og_type":"article","og_title":"Home","og_description":"DevRootAcademy offers professional programming courses and software development services to help students and businesses grow in the digital world.","og_url":"https:\/\/devrootacademy.com\/ar\/","og_site_name":"Dev Root Academy","article_publisher":"https:\/\/www.facebook.com\/","article_modified_time":"2026-05-13T05:28:19+00:00","og_image":[{"width":430,"height":185,"url":"https:\/\/devrootacademy.com\/wp-content\/uploads\/2026\/05\/logo-.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631":"\u062f\u0642\u064a\u0642\u0629 \u0648\u0627\u062d\u062f\u0629"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/devrootacademy.com\/","url":"https:\/\/devrootacademy.com\/","name":"Home – Dev Root Academy Dev Root Academy","isPartOf":{"@id":"https:\/\/devrootacademy.com\/#website"},"datePublished":"2026-05-12T21:54:05+00:00","dateModified":"2026-05-13T05:28:19+00:00","description":"Dev Root Academy offers professional programming courses and software development services to help students and businesses grow in the digital world.","breadcrumb":{"@id":"https:\/\/devrootacademy.com\/#breadcrumb"},"inLanguage":"ar","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devrootacademy.com\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/devrootacademy.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/devrootacademy.com\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/devrootacademy.com\/#website","url":"https:\/\/devrootacademy.com\/","name":"Dev Root Academy","description":"Code Your Future with Dev Root Academy","publisher":{"@id":"https:\/\/devrootacademy.com\/#organization"},"alternateName":"Dev Root Academy","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/devrootacademy.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ar"},{"@type":"Organization","@id":"https:\/\/devrootacademy.com\/#organization","name":"Dev Root Academy","url":"https:\/\/devrootacademy.com\/","logo":{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/devrootacademy.com\/#\/schema\/logo\/image\/","url":"https:\/\/devrootacademy.com\/wp-content\/uploads\/2026\/05\/logo-.png","contentUrl":"https:\/\/devrootacademy.com\/wp-content\/uploads\/2026\/05\/logo-.png","width":430,"height":185,"caption":"Dev Root Academy"},"image":{"@id":"https:\/\/devrootacademy.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/","https:\/\/www.instgram.com","https:\/\/www.tiktok.com"],"description":"Dev Root Academy offers professional programming courses and software development services to help students and businesses grow in the digital world.","email":"hazemashraf.programming@gmail.com","telephone":"01013974594","legalName":"Dev Root Academy","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"1","maxValue":"10"},"publishingPrinciples":"https:\/\/devrootacademy.com\/privacy-policy\/","ownershipFundingInfo":"https:\/\/devrootacademy.com\/terms-conditions\/","actionableFeedbackPolicy":"https:\/\/devrootacademy.com\/our-student\/","correctionsPolicy":"https:\/\/devrootacademy.com\/privacy-policy\/","ethicsPolicy":"https:\/\/devrootacademy.com\/privacy-policy\/","diversityPolicy":"https:\/\/devrootacademy.com\/privacy-policy\/","diversityStaffingReport":"https:\/\/devrootacademy.com\/contact-us\/"}]}},"_links":{"self":[{"href":"https:\/\/devrootacademy.com\/ar\/wp-json\/wp\/v2\/pages\/74","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devrootacademy.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/devrootacademy.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/devrootacademy.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devrootacademy.com\/ar\/wp-json\/wp\/v2\/comments?post=74"}],"version-history":[{"count":80,"href":"https:\/\/devrootacademy.com\/ar\/wp-json\/wp\/v2\/pages\/74\/revisions"}],"predecessor-version":[{"id":267,"href":"https:\/\/devrootacademy.com\/ar\/wp-json\/wp\/v2\/pages\/74\/revisions\/267"}],"wp:attachment":[{"href":"https:\/\/devrootacademy.com\/ar\/wp-json\/wp\/v2\/media?parent=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}