{"id":1261,"date":"2025-07-23T16:17:13","date_gmt":"2025-07-23T13:17:13","guid":{"rendered":"https:\/\/mira-web.com\/?page_id=1261"},"modified":"2026-03-12T14:57:58","modified_gmt":"2026-03-12T12:57:58","slug":"services","status":"publish","type":"page","link":"https:\/\/mira-web.com\/ar\/services\/","title":{"rendered":"\u0627\u0644\u062e\u062f\u0645\u0627\u062a"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1261\" class=\"elementor elementor-1261\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5e8903e e-flex e-con-boxed e-con e-parent\" data-id=\"5e8903e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-87785dc elementor-widget elementor-widget-shortcode\" data-id=\"87785dc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"> \n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     MIRA WEB NAVBAR  [mira_navbar]\n     Paste CSS once (in theme customizer \/\n     Additional CSS or enqueue via wp_head).\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n\n<style>\n:root{\n  --bg:#ffffff;--bg2:#fafaf8;--bg3:#f5f4ef;\n  --border:#e8e4d8;--border2:#d4c99a;\n  --gold:#c9a84c;--gold2:#e8c96a;--gold-dark:#9a7a2e;\n  --gold-glow:rgba(201,168,76,.15);\n  --text:#1a1a1a;--text2:#5a5550;--text3:#9a9088;\n  --nav-h:82px;--nav-top:0px;\n}\n*{margin:0;padding:0;box-sizing:border-box;}\nbody{font-family:'Inter',sans-serif;}\na{text-decoration:none;color:inherit;}\n\n\/* \u2500\u2500 Navbar \u2500\u2500 *\/\n.mira-navbar{\n  position:fixed;top:var(--nav-top);left:0;right:0;z-index:1000;\n  height:var(--nav-h);display:flex;align-items:center;padding:0 40px;\n  background:linear-gradient(160deg,rgba(255,255,255,.72) 0%,rgba(250,250,248,.72) 50%,rgba(245,244,239,.72) 100%);\n  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);\n  border-bottom:1px solid transparent;\n  transition:top .35s ease,background .35s ease,border-color .35s ease,box-shadow .35s ease;\n}\n.mira-navbar.scrolled{\n  top:0;\n  background:linear-gradient(160deg,rgba(255,255,255,.96) 0%,rgba(250,250,248,.96) 50%,rgba(245,244,239,.96) 100%);\n  border-color:var(--border);box-shadow:0 4px 30px rgba(0,0,0,.07);\n}\n.mira-nav-inner{max-width:1200px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;}\n\n\/* Logo *\/\n.mira-nav-logo img{height:120px;width:auto;object-fit:contain;display:block;transition:opacity .2s,transform .2s;}\n.mira-nav-logo:hover img{opacity:.82;transform:scale(.97);}\n\n\/* Nav Links *\/\n.mira-nav-links{display:flex;align-items:center;gap:2px;list-style:none;}\n.mira-nav-links li a{\n  display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;\n  font-size:.82rem;font-weight:600;color:var(--text2);border:1px solid transparent;transition:all .2s;white-space:nowrap;\n}\n.mira-nav-links li a i{font-size:.72rem;color:var(--text3);transition:color .2s;}\n.mira-nav-links li a:hover{background:rgba(245,244,239,.9);color:var(--text);}\n.mira-nav-links li a:hover i{color:var(--gold);}\n.mira-nav-links li a.active{background:var(--gold-glow);color:var(--gold-dark);border-color:var(--border2);}\n.mira-nav-links li a.active i{color:var(--gold);}\n\n\/* Right side *\/\n.mira-nav-right{display:flex;align-items:center;gap:8px;}\n.mira-nav-socials{display:flex;align-items:center;gap:5px;}\n.mira-nav-soc{\n  width:35px;height:35px;border-radius:9px;display:flex;align-items:center;justify-content:center;\n  border:1px solid var(--border);color:var(--text3);font-size:.8rem;background:rgba(255,255,255,.45);transition:all .22s;\n}\n.mira-nav-soc:hover{transform:translateY(-2px);box-shadow:0 5px 16px rgba(0,0,0,.09);}\n.mira-nav-soc.fb:hover{color:#1877f2;border-color:#1877f2;background:rgba(24,119,242,.09);}\n.mira-nav-soc.wa:hover{color:#25d366;border-color:#25d366;background:rgba(37,211,102,.09);}\n.mira-nav-soc.ig:hover{color:#e1306c;border-color:#e1306c;background:rgba(225,48,108,.09);}\n.mira-nav-sep{width:1px;height:22px;background:var(--border);margin:0 3px;flex-shrink:0;}\n.mira-nav-cta{\n  display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:9px;\n  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#fff;font-weight:700;font-size:.8rem;\n  border:none;cursor:pointer;box-shadow:0 4px 16px rgba(201,168,76,.42);transition:all .2s;white-space:nowrap;\n}\n.mira-nav-cta:hover{transform:translateY(-1px);box-shadow:0 7px 22px rgba(201,168,76,.58);}\n.mira-nav-cta i{font-size:.7rem;}\n\n\/* Burger *\/\n.mira-nav-burger{\n  display:none;width:40px;height:40px;border-radius:10px;background:rgba(245,244,239,.9);\n  border:1px solid var(--border);cursor:pointer;flex-shrink:0;align-items:center;justify-content:center;\n  position:relative;overflow:hidden;transition:background .2s,border-color .2s,box-shadow .2s;\n}\n.mira-nav-burger:hover{background:var(--gold-glow);border-color:var(--border2);box-shadow:0 4px 14px rgba(201,168,76,.22);}\n.mira-burger-box{display:flex;flex-direction:column;gap:5px;align-items:flex-end;}\n.mira-burger-box span{display:block;height:2px;border-radius:2px;background:var(--text2);transition:width .28s ease,transform .32s ease,opacity .28s ease,background .2s;transform-origin:right center;}\n.mira-burger-box span:nth-child(1){width:18px;}\n.mira-burger-box span:nth-child(2){width:12px;}\n.mira-nav-burger.open .mira-burger-box span:nth-child(1){width:18px;transform:translateY(3.5px) rotate(45deg);background:var(--gold-dark);}\n.mira-nav-burger.open .mira-burger-box span:nth-child(2){width:18px;transform:translateY(-3.5px) rotate(-45deg);background:var(--gold-dark);}\n.mira-nav-burger.open{background:var(--gold-glow);border-color:var(--border2);}\n\n\/* Mobile Drawer *\/\n.mira-nav-mobile{\n  position:fixed;top:calc(var(--nav-top) + var(--nav-h));left:0;right:0;\n  background:linear-gradient(160deg,rgba(255,255,255,.99) 0%,rgba(250,250,248,.99) 60%,rgba(245,244,239,.99) 100%);\n  backdrop-filter:blur(22px);border-bottom:1px solid var(--border);z-index:999;\n  padding:14px 20px 22px;transform:translateY(-14px);opacity:0;pointer-events:none;\n  transition:transform .28s ease,opacity .28s ease,top .35s ease;box-shadow:0 20px 50px rgba(0,0,0,.09);\n}\n.mira-nav-mobile.open{transform:translateY(0);opacity:1;pointer-events:all;}\n.mira-nav-mobile.scrolled-pos{top:72px;}\n.mira-mob-links{list-style:none;display:grid;gap:4px;padding-bottom:14px;border-bottom:1px solid var(--border);margin-bottom:14px;}\n.mira-mob-links li a{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:10px;font-size:.88rem;font-weight:600;color:var(--text2);border:1px solid transparent;transition:.2s;}\n.mira-mob-icon{width:34px;height:34px;border-radius:8px;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.76rem;color:var(--text3);flex-shrink:0;transition:.2s;}\n.mira-mob-links li a:hover,.mira-mob-links li a.active{background:var(--gold-glow);color:var(--gold-dark);border-color:var(--border2);}\n.mira-mob-links li a:hover .mira-mob-icon,.mira-mob-links li a.active .mira-mob-icon{background:var(--gold-glow);border-color:var(--border2);color:var(--gold);}\n.mira-mob-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;}\n.mira-mob-socials{display:flex;gap:8px;}\n.mira-mob-soc{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--bg3);border:1px solid var(--border);color:var(--text2);font-size:.9rem;transition:.2s;}\n.mira-mob-soc.fb:hover{background:rgba(24,119,242,.1);color:#1877f2;border-color:#1877f2;}\n.mira-mob-soc.wa:hover{background:rgba(37,211,102,.1);color:#25d366;border-color:#25d366;}\n.mira-mob-soc.ig:hover{background:rgba(225,48,108,.1);color:#e1306c;border-color:#e1306c;}\n.mira-mob-cta{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:10px;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#fff;font-weight:700;font-size:.84rem;box-shadow:0 4px 14px rgba(201,168,76,.4);transition:.2s;}\n.mira-mob-cta:hover{box-shadow:0 6px 20px rgba(201,168,76,.5);}\n.mira-mob-cta i{font-size:.72rem;}\n\n\/* Overlay *\/\n.mira-nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.15);z-index:997;}\n.mira-nav-overlay.open{display:block;}\n\n\/* Responsive *\/\n@media(max-width:900px){.mira-nav-links{display:none;}}\n@media(max-width:640px){\n  .mira-navbar{padding:0 18px;}\n  .mira-nav-socials,.mira-nav-sep{display:none;}\n  .mira-nav-cta{display:none;}\n  .mira-nav-burger{display:flex;}\n}\n@media(min-width:641px) and (max-width:900px){\n  .mira-navbar{padding:0 28px;}\n  .mira-nav-burger{display:flex;}\n  .mira-nav-cta{font-size:.76rem;padding:9px 15px;}\n}\n<\/style>\n\n<!-- Fonts & Icons (loaded once via wp_enqueue if preferred) -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\n\n<nav class=\"mira-navbar\" id=\"mira-navbar\">\n  <div class=\"mira-nav-inner\">\n\n    <a href=\"https:\/\/mira-web.com\/ar\/\" class=\"mira-nav-logo\">\n      <img decoding=\"async\" src=\"https:\/\/mira-web.com\/wp-content\/uploads\/2026\/03\/Wardiere-6.png\" alt=\"Mira web\">\n    <\/a>\n\n    <ul class=\"mira-nav-links\">\n      <li><a href=\"https:\/\/mira-web.com\/ar\/\" class=\"\"><i class=\"fas fa-house\"><\/i> Home<\/a><\/li>\n      <li><a href=\"https:\/\/mira-web.com\/ar\/about\/\" class=\"\"><i class=\"fas fa-circle-info\"><\/i> About<\/a><\/li>\n      <li><a href=\"https:\/\/mira-web.com\/ar\/services\/\" class=\"\"><i class=\"fas fa-layer-group\"><\/i> Services<\/a><\/li>\n      <li><a href=\"https:\/\/mira-web.com\/ar\/profile\/\" class=\"\"><i class=\"fas fa-folder\"><\/i> Profile<\/a><\/li>\n      <li><a href=\"https:\/\/mira-web.com\/ar\/prices\/\" class=\"\"><i class=\"fas fa-tag\"><\/i> Pricing<\/a><\/li>\n    <\/ul>\n\n    <div class=\"mira-nav-right\">\n      <div class=\"mira-nav-socials\">\n        <a href=\"https:\/\/www.facebook.com\/share\/1BBaUvQ6eZ\/\" target=\"_blank\" rel=\"noopener\" class=\"mira-nav-soc fb\" title=\"Facebook\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n        <a href=\"https:\/\/wa.me\/+201278397789\" target=\"_blank\" rel=\"noopener\" class=\"mira-nav-soc wa\" title=\"WhatsApp\"><i class=\"fab fa-whatsapp\"><\/i><\/a>\n        <a href=\"https:\/\/www.instagram.com\/mira_web_eg?igsh=MWpxcDBkbjJpcnRjOQ==\" target=\"_blank\" rel=\"noopener\" class=\"mira-nav-soc ig\" title=\"Instagram\"><i class=\"fab fa-instagram\"><\/i><\/a>\n      <\/div>\n      <div class=\"mira-nav-sep\"><\/div>\n      <a href=\"https:\/\/mira-web.com\/ar\/contact\/\" class=\"mira-nav-cta\">\n        <i class=\"fas fa-paper-plane\"><\/i> Request Now\n      <\/a>\n      <button class=\"mira-nav-burger\" id=\"mira-burger\" aria-label=\"Menu\">\n        <div class=\"mira-burger-box\">\n          <span><\/span><span><\/span>\n        <\/div>\n      <\/button>\n    <\/div>\n\n  <\/div>\n<\/nav>\n\n<div class=\"mira-nav-overlay\" id=\"mira-overlay\"><\/div>\n\n<div class=\"mira-nav-mobile\" id=\"mira-mobileMenu\">\n  <ul class=\"mira-mob-links\">\n    <li><a href=\"https:\/\/mira-web.com\/ar\/\" class=\"\" data-mira-close><span class=\"mira-mob-icon\"><i class=\"fas fa-house\"><\/i><\/span> Home<\/a><\/li>\n    <li><a href=\"https:\/\/mira-web.com\/ar\/about\/\" class=\"\" data-mira-close><span class=\"mira-mob-icon\"><i class=\"fas fa-circle-info\"><\/i><\/span> About<\/a><\/li>\n    <li><a href=\"https:\/\/mira-web.com\/ar\/services\/\" class=\"\" data-mira-close><span class=\"mira-mob-icon\"><i class=\"fas fa-layer-group\"><\/i><\/span> Services<\/a><\/li>\n\t\n\t <li><a href=\"https:\/\/mira-web.com\/ar\/profile\/\" class=\"\" data-mira-close><span class=\"mira-mob-icon\"><i class=\"fas fa-folder\"><\/i><\/span> Profile<\/a><\/li>\n\t\n\t\n    <li><a href=\"https:\/\/mira-web.com\/ar\/prices\/\" class=\"\" data-mira-close><span class=\"mira-mob-icon\"><i class=\"fas fa-tag\"><\/i><\/span> Pricing<\/a><\/li>\n  <\/ul>\n  <div class=\"mira-mob-footer\">\n    <div class=\"mira-mob-socials\">\n      <a href=\"https:\/\/www.facebook.com\/share\/1BBaUvQ6eZ\/\" target=\"_blank\" rel=\"noopener\" class=\"mira-mob-soc fb\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n      <a href=\"https:\/\/wa.me\/+201278397789\" target=\"_blank\" rel=\"noopener\" class=\"mira-mob-soc wa\"><i class=\"fab fa-whatsapp\"><\/i><\/a>\n      <a href=\"https:\/\/www.instagram.com\/mira_web_eg?igsh=MWpxcDBkbjJpcnRjOQ==\" target=\"_blank\" rel=\"noopener\" class=\"mira-mob-soc ig\"><i class=\"fab fa-instagram\"><\/i><\/a>\n    <\/div>\n    <a href=\"https:\/\/mira-web.com\/ar\/contact\/\" class=\"mira-mob-cta\" data-mira-close>\n      <i class=\"fas fa-paper-plane\"><\/i> Request Now\n    <\/a>\n  <\/div>\n<\/div>\n\n<script>\n(function(){\n  const burger  = document.getElementById('mira-burger');\n  const menu    = document.getElementById('mira-mobileMenu');\n  const overlay = document.getElementById('mira-overlay');\n  const navbar  = document.getElementById('mira-navbar');\n\n  function closeMenu(){\n    menu.classList.remove('open');\n    overlay.classList.remove('open');\n    burger.classList.remove('open');\n    document.body.style.overflow = '';\n  }\n\n  burger.addEventListener('click', function(){\n    const open = menu.classList.toggle('open');\n    overlay.classList.toggle('open', open);\n    burger.classList.toggle('open', open);\n    document.body.style.overflow = open ? 'hidden' : '';\n  });\n\n  overlay.addEventListener('click', closeMenu);\n  document.querySelectorAll('[data-mira-close]').forEach(function(el){\n    el.addEventListener('click', closeMenu);\n  });\n\n  window.addEventListener('scroll', function(){\n    const scrolled = window.scrollY > 10;\n    navbar.classList.toggle('scrolled', scrolled);\n    menu.classList.toggle('scrolled-pos', scrolled);\n  });\n})();\n<\/script>\n\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2c6b5bb elementor-widget elementor-widget-html\" data-id=\"2c6b5bb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Section \u2013 Services<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n<style>\r\n:root{\r\n  --bg:#ffffff;--bg2:#fafaf8;--bg3:#f5f4ef;--surface:#fffef9;--card:#ffffff;\r\n  --border:#e8e4d8;--border2:#d4c99a;--gold:#c9a84c;--gold2:#e8c96a;--gold3:#f0d98a;\r\n  --gold-dark:#9a7a2e;--gold-glow:rgba(201,168,76,.15);--text:#1a1a1a;--text2:#5a5550;\r\n  --text3:#9a9088;--shadow:0 2px 20px rgba(0,0,0,.06);--shadow2:0 8px 40px rgba(0,0,0,.1);--radius:14px;\r\n}\r\n*{margin:0;padding:0;box-sizing:border-box;}\r\nbody{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;}\r\na{text-decoration:none;color:inherit;}\r\n::selection{background:var(--gold3);color:var(--text);}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 SECTION FRAMEWORK \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.section{padding:90px 40px;}\r\n.container{max-width:1200px;margin:0 auto;}\r\n.section-label{display:flex;align-items:center;gap:12px;margin-bottom:12px;}\r\n.section-label .sl-line{width:32px;height:2px;background:var(--gold);border-radius:2px;}\r\n.section-label span{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-dark);}\r\n.section-title{font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:800;letter-spacing:-.03em;color:var(--text);margin-bottom:12px;}\r\n.section-sub{font-size:.93rem;color:var(--text2);max-width:500px;line-height:1.7;}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 SERVICE BLOCKS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.service-block{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:60px 0;border-bottom:1px solid var(--border);}\r\n.service-block:last-child{border-bottom:none;}\r\n.service-block.reverse{direction:rtl;}\r\n.service-block.reverse > *{direction:ltr;}\r\n@media(max-width:900px){.service-block{grid-template-columns:1fr;direction:ltr !important;gap:32px;}}\r\n\r\n.svc-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:14px;}\r\n.svc-num{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:600;color:var(--gold);letter-spacing:.12em;}\r\n.svc-tag{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dark);background:var(--gold-glow);padding:3px 10px;border-radius:999px;border:1px solid var(--border2);}\r\n.svc-icon-big{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--gold-glow),var(--bg3));border:1.5px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:18px;}\r\n.svc-title{font-size:1.9rem;font-weight:800;letter-spacing:-.03em;color:var(--text);margin-bottom:12px;}\r\n.svc-desc{font-size:.9rem;color:var(--text2);line-height:1.75;margin-bottom:24px;}\r\n.svc-feats{list-style:none;display:grid;gap:10px;margin-bottom:28px;}\r\n.svc-feats li{display:flex;align-items:flex-start;gap:12px;font-size:.88rem;color:var(--text2);line-height:1.5;}\r\n.svc-feats li .feat-icon{width:24px;height:24px;border-radius:6px;background:var(--gold-glow);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;flex-shrink:0;}\r\n.svc-feats li .feat-icon i{font-size:.65rem;color:var(--gold);}\r\n.svc-stats{display:flex;gap:28px;flex-wrap:wrap;padding:20px 0;border-top:1px solid var(--border);margin-bottom:24px;}\r\n.svc-stat .sv{font-size:1.3rem;font-weight:800;color:var(--gold-dark);letter-spacing:-.02em;}\r\n.svc-stat .sl{font-size:.72rem;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;}\r\n\r\n\/* code card *\/\r\n.svc-code-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow2);position:relative;}\r\n.svc-code-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold3),transparent);}\r\n.svc-topbar{background:var(--bg3);border-bottom:1px solid var(--border);padding:10px 16px;display:flex;align-items:center;gap:8px;}\r\n.svc-topbar .s-dots{display:flex;gap:5px;}\r\n.svc-topbar .s-dots span{width:9px;height:9px;border-radius:50%;}\r\n.s-dots .d1{background:#ff5f57;}.s-dots .d2{background:#febc2e;}.s-dots .d3{background:#28c840;}\r\n.svc-topbar .s-title{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--text3);margin-left:8px;flex:1;}\r\n.svc-topbar .s-kbd{display:flex;gap:3px;}\r\nkbd{background:var(--bg3);border:1px solid var(--border2);border-radius:4px;padding:1px 6px;font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--text2);}\r\n.code-body{padding:18px 20px;font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.85;overflow-x:auto;color:var(--text);background:var(--surface);}\r\n.copy-wrap{position:relative;}\r\n.copy-btn{position:absolute;top:10px;right:10px;background:var(--bg3);border:1px solid var(--border);color:var(--text3);font-family:'JetBrains Mono',monospace;font-size:9px;padding:3px 9px;border-radius:5px;cursor:pointer;transition:.2s;}\r\n.copy-btn:hover{background:var(--gold);color:#fff;border-color:var(--gold);}\r\n\r\n.ln{display:block;}\r\n.ck{color:#9b59b6;}.cfn{color:#2980b9;}.cs{color:#27ae60;}.cc{color:#bdc3c7;font-style:italic;}.cv{color:#e67e22;}.cp{color:#16a085;}\r\n\r\n.btn-gold{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:10px;background:linear-gradient(135deg,var(--gold) 0%,var(--gold2) 100%);color:#fff;font-weight:700;font-size:.92rem;box-shadow:0 6px 24px rgba(201,168,76,.4);transition:transform .2s,box-shadow .2s;cursor:pointer;border:none;}\r\n.btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(201,168,76,.5);}\r\n\r\n\/* fade *\/\r\n.fade-in{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease;}\r\n.fade-in.visible{opacity:1;transform:translateY(0);}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 SERVICES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"section\" id=\"services\">\r\n  <div class=\"container\">\r\n    <div class=\"fade-in\" style=\"margin-bottom:60px;\">\r\n      <div class=\"section-label\"><div class=\"sl-line\"><\/div><span>Our Services<\/span><\/div>\r\n      <h2 class=\"section-title\">High-Quality Web Development Services<\/h2>\r\n      <p class=\"section-sub\">Professional web solutions combining creativity with modern technology. Laravel, WordPress, Filament, Livewire and more.<\/p>\r\n    <\/div>\r\n\r\n    <!-- LARAVEL -->\r\n    <div class=\"service-block fade-in\">\r\n      <div class=\"svc-info\">\r\n        <div class=\"svc-eyebrow\"><span class=\"svc-num\">01 \/\/<\/span><span class=\"svc-tag\"><i class=\"fab fa-laravel\" style=\"margin-right:5px;\"><\/i>Backend<\/span><\/div>\r\n        <div class=\"svc-icon-big\"><i class=\"fab fa-laravel\" style=\"color:var(--gold);\"><\/i><\/div>\r\n        <h3 class=\"svc-title\">Laravel Framework<\/h3>\r\n        <p class=\"svc-desc\">The PHP framework for web artisans. Elegant syntax, powerful tools \u2014 Eloquent ORM, Artisan CLI, Queues, Events, Sanctum auth & REST API. Build enterprise-grade applications that scale.<\/p>\r\n        <ul class=\"svc-feats\">\r\n          <li><div class=\"feat-icon\"><i class=\"fas fa-check\"><\/i><\/div>Custom web applications designed around your exact business logic<\/li>\r\n          <li><div class=\"feat-icon\"><i class=\"fas fa-check\"><\/i><\/div>Secure REST API with Sanctum token authentication & role management<\/li>\r\n          <li><div class=\"feat-icon\"><i class=\"fas fa-check\"><\/i><\/div>Eloquent ORM with relationships, migrations, seeders & factories<\/li>\r\n          <li><div class=\"feat-icon\"><i class=\"fas fa-check\"><\/i><\/div>Background jobs, email queues & real-time event broadcasting<\/li>\r\n        <\/ul>\r\n        <div class=\"svc-stats\">\r\n          <div class=\"svc-stat\"><div class=\"sv\">74k+<\/div><div class=\"sl\">GitHub Stars<\/div><\/div>\r\n          <div class=\"svc-stat\"><div class=\"sv\">v11.x<\/div><div class=\"sl\">Current<\/div><\/div>\r\n          <div class=\"svc-stat\"><div class=\"sv\">&lt;2ms<\/div><div class=\"sl\">Avg Response<\/div><\/div>\r\n        <\/div>\r\n        <a class=\"btn-gold\" href=\"https:\/\/mira-web.com\/contact\/\" target=\"_blank\"><i class=\"fas fa-arrow-right\"><\/i> Start Laravel Project<\/a>\r\n      <\/div>\r\n      <div class=\"svc-code-card\">\r\n        <div class=\"svc-topbar\">\r\n          <div class=\"s-dots\"><span class=\"d1\"><\/span><span class=\"d2\"><\/span><span class=\"d3\"><\/span><\/div>\r\n          <span class=\"s-title\">laravel\/routes\/api.php<\/span>\r\n          <div class=\"s-kbd\"><kbd>\u2318<\/kbd><kbd>L<\/kbd><\/div>\r\n        <\/div>\r\n        <div class=\"copy-wrap\">\r\n          <button class=\"copy-btn\">copy<\/button>\r\n          <div class=\"code-body\">\r\n<span class=\"ln\"><span class=\"cc\">\/\/ Protected API routes<\/span><\/span>\r\n<span class=\"ln\"><span class=\"cv\">Route<\/span><span class=\"cp\">::<\/span><span class=\"cfn\">middleware<\/span><span class=\"cp\">([<\/span><span class=\"cs\">'auth:sanctum'<\/span><span class=\"cp\">])<\/span><\/span>\r\n<span class=\"ln\">  <span class=\"cp\">-><\/span><span class=\"cfn\">prefix<\/span><span class=\"cp\">(<\/span><span class=\"cs\">'v1'<\/span><span class=\"cp\">)-><\/span><span class=\"cfn\">group<\/span><span class=\"cp\">(<\/span><span class=\"ck\">function<\/span><span class=\"cp\">() {<\/span><\/span>\r\n<span class=\"ln\">    <span class=\"cv\">Route<\/span><span class=\"cp\">::<\/span><span class=\"cfn\">apiResource<\/span><span class=\"cp\">(<\/span><span class=\"cs\">'posts'<\/span><span class=\"cp\">,<\/span><span class=\"cv\">PostController<\/span><span class=\"cp\">::<\/span><span class=\"ck\">class<\/span><span class=\"cp\">);<\/span><\/span>\r\n<span class=\"ln\">    <span class=\"cv\">Route<\/span><span class=\"cp\">::<\/span><span class=\"cfn\">post<\/span><span class=\"cp\">(<\/span><span class=\"cs\">'upload'<\/span><span class=\"cp\">,[<\/span><span class=\"cv\">UploadController<\/span><span class=\"cp\">::<\/span><span class=\"ck\">class<\/span><span class=\"cp\">,<\/span><span class=\"cs\">'store'<\/span><span class=\"cp\">]);<\/span><\/span>\r\n<span class=\"ln\"><span class=\"cp\">});<\/span><\/span>\r\n<span class=\"ln\"> <\/span>\r\n<span class=\"ln\"><span class=\"cc\">\/\/ Eloquent Model<\/span><\/span>\r\n<span class=\"ln\"><span class=\"ck\">class<\/span> <span class=\"cfn\">Post<\/span> <span class=\"ck\">extends<\/span> <span class=\"cv\">Model<\/span> <span class=\"cp\">{<\/span><\/span>\r\n<span class=\"ln\">  <span class=\"ck\">protected<\/span> <span class=\"cv\">$fillable<\/span> <span class=\"cp\">=<\/span> <span class=\"cp\">[<\/span><span class=\"cs\">'title'<\/span><span class=\"cp\">,<\/span><span class=\"cs\">'body'<\/span><span class=\"cp\">,<\/span><span class=\"cs\">'slug'<\/span><span class=\"cp\">];<\/span><\/span>\r\n<span class=\"ln\">  <span class=\"ck\">public function<\/span> <span class=\"cfn\">user<\/span><span class=\"cp\">(){<\/span><\/span>\r\n<span class=\"ln\">    <span class=\"ck\">return<\/span> <span class=\"cv\">$this<\/span><span class=\"cp\">-><\/span><span class=\"cfn\">belongsTo<\/span><span class=\"cp\">(<\/span><span class=\"cv\">User<\/span><span class=\"cp\">::<\/span><span class=\"ck\">class<\/span><span class=\"cp\">);<\/span><\/span>\r\n<span class=\"ln\">  <span class=\"cp\">}<\/span><\/span>\r\n<span class=\"ln\"><span class=\"cp\">}<\/span><\/span>\r\n<span class=\"ln\"> <\/span>\r\n<span class=\"ln\"><span class=\"cc\">\/\/ Dispatch queue job<\/span><\/span>\r\n<span class=\"ln\"><span class=\"cv\">SendWelcomeEmail<\/span><span class=\"cp\">::<\/span><span class=\"cfn\">dispatch<\/span><span class=\"cp\">(<\/span><span class=\"cv\">$user<\/span><span class=\"cp\">)<\/span><\/span>\r\n<span class=\"ln\">  <span class=\"cp\">-><\/span><span class=\"cfn\">delay<\/span><span class=\"cp\">(<\/span><span class=\"cfn\">now<\/span><span class=\"cp\">()-><\/span><span class=\"cfn\">addMinutes<\/span><span class=\"cp\">(<\/span><span class=\"cs\">5<\/span><span class=\"cp\">));<\/span><\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- WORDPRESS -->\r\n    <div class=\"service-block reverse fade-in\">\r\n      <div class=\"svc-info\">\r\n        <div class=\"svc-eyebrow\"><span class=\"svc-num\">02 \/\/<\/span><span class=\"svc-tag\"><i class=\"fab fa-wordpress\" style=\"margin-right:5px;\"><\/i>CMS<\/span><\/div>\r\n        <div class=\"svc-icon-big\"><i class=\"fab fa-wordpress\" style=\"color:var(--gold);\"><\/i><\/div>\r\n        <h3 class=\"svc-title\">WordPress & WooCommerce<\/h3>\r\n        <p class=\"svc-desc\">Powers 43% of the web. Custom themes, Gutenberg blocks, WooCommerce stores, multisite networks & REST API. Fully managed and SEO-ready from day one.<\/p>\r\n        <ul class=\"svc-feats\">\r\n          <li><div class=\"feat-icon\"><i class=\"fas fa-check\"><\/i><\/div>Fully custom theme design reflecting your exact brand identity<\/li>\r\n          <li><div class=\"feat-icon\"><i class=\"fas fa-check\"><\/i><\/div>Easy admin dashboard \u2014 manage content with zero technical knowledge<\/li>\r\n          <li><div class=\"feat-icon\"><i class=\"fas fa-check\"><\/i><\/div>WooCommerce with Egyptian payment gateways (Fawry, Paymob)<\/li>\r\n          <li><div class=\"feat-icon\"><i class=\"fas fa-check\"><\/i><\/div>SEO-optimized structure \u2014 built to rank on Google from launch<\/li>\r\n        <\/ul>\r\n        <div class=\"svc-stats\">\r\n          <div class=\"svc-stat\"><div class=\"sv\">43%<\/div><div class=\"sl\">Web Share<\/div><\/div>\r\n          <div class=\"svc-stat\"><div class=\"sv\">59k+<\/div><div class=\"sl\">Plugins<\/div><\/div>\r\n          <div class=\"svc-stat\"><div class=\"sv\">WP 6.x<\/div><div class=\"sl\">Current<\/div><\/div>\r\n        <\/div>\r\n        <a class=\"btn-gold\" href=\"https:\/\/mira-web.com\/contact\/\" target=\"_blank\"><i class=\"fas fa-arrow-right\"><\/i> Start WordPress Project<\/a>\r\n      <\/div>\r\n      <div class=\"svc-code-card\">\r\n        <div class=\"svc-topbar\">\r\n          <div class=\"s-dots\"><span class=\"d1\"><\/span><span class=\"d2\"><\/span><span class=\"d3\"><\/span><\/div>\r\n          <span class=\"s-title\">wordpress\/functions.php<\/span>\r\n          <div class=\"s-kbd\"><kbd>\u2318<\/kbd><kbd>W<\/kbd><\/div>\r\n        <\/div>\r\n        <div class=\"copy-wrap\">\r\n          <button class=\"copy-btn\">copy<\/button>\r\n          <div class=\"code-body\">\r\n<span class=\"ln\"><span class=\"cc\">\/\/ Register Custom Post Type<\/span><\/span>\r\n<span class=\"ln\"><span class=\"cfn\">add_action<\/span><span class=\"cp\">(<\/span><span class=\"cs\">'init'<\/span><span class=\"cp\">,<\/span> <span class=\"ck\">function<\/span><span class=\"cp\">() {<\/span><\/span>\r\n<span class=\"ln\">  <span class=\"cfn\">register_post_type<\/span><span class=\"cp\">(<\/span><span class=\"cs\">'portfolio'<\/span><span class=\"cp\">, [<\/span><\/span>\r\n<span class=\"ln\">    <span class=\"cs\">'public'<\/span>  <span class=\"cp\">=><\/span> <span class=\"ck\">true<\/span><span class=\"cp\">,<\/span><\/span>\r\n<span class=\"ln\">    <span class=\"cs\">'label'<\/span>   <span class=\"cp\">=><\/span> <span class=\"cs\">'Portfolio'<\/span><span class=\"cp\">,<\/span><\/span>\r\n<span class=\"ln\">    <span class=\"cs\">'supports'<\/span> <span class=\"cp\">=><\/span> <span class=\"cp\">[<\/span><span class=\"cs\">'title'<\/span><span class=\"cp\">,<\/span><span class=\"cs\">'thumbnail'<\/span><span class=\"cp\">],<\/span><\/span>\r\n<span class=\"ln\">    <span class=\"cs\">'has_archive'<\/span> <span class=\"cp\">=><\/span> <span class=\"ck\">true<\/span><span class=\"cp\">,<\/span><\/span>\r\n<span class=\"ln\">  <span class=\"cp\">]);<\/span><\/span>\r\n<span class=\"ln\"><span class=\"cp\">});<\/span><\/span>\r\n<span class=\"ln\"> <\/span>\r\n<span class=\"ln\"><span class=\"cc\">\/\/ REST API endpoint<\/span><\/span>\r\n<span class=\"ln\"><span class=\"cfn\">add_action<\/span><span class=\"cp\">(<\/span><span class=\"cs\">'rest_api_init'<\/span><span class=\"cp\">,<\/span> <span class=\"ck\">function<\/span><span class=\"cp\">() {<\/span><\/span>\r\n<span class=\"ln\">  <span class=\"cfn\">register_rest_route<\/span><span class=\"cp\">(<\/span><span class=\"cs\">'mira\/v1'<\/span><span class=\"cp\">,<\/span><span class=\"cs\">'\/items'<\/span><span class=\"cp\">,[<\/span><\/span>\r\n<span class=\"ln\">    <span class=\"cs\">'methods'<\/span>  <span class=\"cp\">=><\/span> <span class=\"cs\">'GET'<\/span><span class=\"cp\">,<\/span><\/span>\r\n<span class=\"ln\">    <span class=\"cs\">'callback'<\/span> <span class=\"cp\">=><\/span> <span class=\"cs\">'mira_get_items'<\/span><span class=\"cp\">,<\/span><\/span>\r\n<span class=\"ln\">    <span class=\"cs\">'permission_callback'<\/span> <span class=\"cp\">=><\/span> <span class=\"cs\">'__return_true'<\/span><span class=\"cp\">,<\/span><\/span>\r\n<span class=\"ln\">  <span class=\"cp\">]);<\/span><\/span>\r\n<span class=\"ln\"><span class=\"cp\">});<\/span><\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- FILAMENT -->\r\n    <div class=\"service-block fade-in\">\r\n      <div class=\"svc-info\">\r\n        <div class=\"svc-eyebrow\"><span class=\"svc-num\">03 \/\/<\/span><span class=\"svc-tag\"><i class=\"fas fa-table-columns\" style=\"margin-right:5px;\"><\/i>Admin Panel<\/span><\/div>\r\n        <div class=\"svc-icon-big\"><i class=\"fas fa-table-columns\" style=\"color:var(--gold);\"><\/i><\/div>\r\n        <h3 class=\"svc-title\">Filament Admin Panel<\/h3>\r\n        <p class=\"svc-desc\">Laravel's most powerful admin panel. Build complete CRUD dashboards, custom forms, advanced tables & analytics widgets. Full admin system in hours, not weeks.<\/p>\r\n        <ul class=\"svc-feats\">\r\n          <li><div class=\"feat-icon\"><i class=\"fas fa-check\"><\/i><\/div>Complete admin dashboard setup in minutes \u2014 not weeks<\/li>\r\n          <li><div class=\"feat-icon\"><i class=\"fas fa-check\"><\/i><\/div>30+ form field types: rich editor, file upload, repeater, toggle<\/li>\r\n          <li><div class=\"feat-icon\"><i class=\"fas fa-check\"><\/i><\/div>Advanced table filtering, sorting & bulk actions built in<\/li>\r\n          <li><div class=\"feat-icon\"><i class=\"fas fa-check\"><\/i><\/div>Multi-tenancy support for SaaS platforms<\/li>\r\n        <\/ul>\r\n        <div class=\"svc-stats\">\r\n          <div class=\"svc-stat\"><div class=\"sv\">20k+<\/div><div class=\"sl\">Stars<\/div><\/div>\r\n          <div class=\"svc-stat\"><div class=\"sv\">5 min<\/div><div class=\"sl\">CRUD Setup<\/div><\/div>\r\n          <div class=\"svc-stat\"><div class=\"sv\">30+<\/div><div class=\"sl\">Field Types<\/div><\/div>\r\n        <\/div>\r\n        <a class=\"btn-gold\" href=\"https:\/\/mira-web.com\/contact\/\" target=\"_blank\"><i class=\"fas fa-arrow-right\"><\/i> Build Admin Panel<\/a>\r\n      <\/div>\r\n      <div class=\"svc-code-card\">\r\n        <div class=\"svc-topbar\">\r\n          <div class=\"s-dots\"><span class=\"d1\"><\/span><span class=\"d2\"><\/span><span class=\"d3\"><\/span><\/div>\r\n          <span class=\"s-title\">filament\/PostResource.php<\/span>\r\n          <div class=\"s-kbd\"><kbd>\u2318<\/kbd><kbd>F<\/kbd><\/div>\r\n        <\/div>\r\n        <div class=\"copy-wrap\">\r\n          <button class=\"copy-btn\">copy<\/button>\r\n          <div class=\"code-body\">\r\n<span class=\"ln\"><span class=\"ck\">public static function<\/span> <span class=\"cfn\">form<\/span><span class=\"cp\">(<\/span><span class=\"cv\">Form<\/span> <span class=\"cv\">$form<\/span><span class=\"cp\">):<\/span> <span class=\"cv\">Form<\/span><\/span>\r\n<span class=\"ln\"><span class=\"cp\">{<\/span><\/span>\r\n<span class=\"ln\">  <span class=\"ck\">return<\/span> <span class=\"cv\">$form<\/span><span class=\"cp\">-><\/span><span class=\"cfn\">schema<\/span><span class=\"cp\">([<\/span><\/span>\r\n<span class=\"ln\">    <span class=\"cv\">TextInput<\/span><span class=\"cp\">::<\/span><span class=\"cfn\">make<\/span><span class=\"cp\">(<\/span><span class=\"cs\">'title'<\/span><span class=\"cp\">)-><\/span><span class=\"cfn\">required<\/span><span class=\"cp\">(),<\/span><\/span>\r\n<span class=\"ln\">    <span class=\"cv\">Slug<\/span><span class=\"cp\">::<\/span><span class=\"cfn\">make<\/span><span class=\"cp\">(<\/span><span class=\"cs\">'slug'<\/span><span class=\"cp\">)-><\/span><span class=\"cfn\">from<\/span><span class=\"cp\">(<\/span><span class=\"cs\">'title'<\/span><span class=\"cp\">),<\/span><\/span>\r\n<span class=\"ln\">    <span class=\"cv\">RichEditor<\/span><span class=\"cp\">::<\/span><span class=\"cfn\">make<\/span><span class=\"cp\">(<\/span><span class=\"cs\">'body'<\/span><span class=\"cp\">),<\/span><\/span>\r\n<span class=\"ln\">    <span class=\"cv\">FileUpload<\/span><span class=\"cp\">::<\/span><span class=\"cfn\">make<\/span><span class=\"cp\">(<\/span><span class=\"cs\">'image'<\/span><span class=\"cp\">)-><\/span><span class=\"cfn\">image<\/span><span class=\"cp\">(),<\/span><\/span>\r\n<span class=\"ln\">    <span class=\"cv\">Toggle<\/span><span class=\"cp\">::<\/span><span class=\"cfn\">make<\/span><span class=\"cp\">(<\/span><span class=\"cs\">'published'<\/span><span class=\"cp\">),<\/span><\/span>\r\n<span class=\"ln\">  <span class=\"cp\">]);<\/span><\/span>\r\n<span class=\"ln\"><span class=\"cp\">}<\/span><\/span>\r\n<span class=\"ln\"> <\/span>\r\n<span class=\"ln\"><span class=\"ck\">public static function<\/span> <span class=\"cfn\">table<\/span><span class=\"cp\">(<\/span><span class=\"cv\">Table<\/span> <span class=\"cv\">$t<\/span><span class=\"cp\">):<\/span> <span class=\"cv\">Table<\/span><\/span>\r\n<span class=\"ln\"><span class=\"cp\">{<\/span><\/span>\r\n<span class=\"ln\">  <span class=\"ck\">return<\/span> <span class=\"cv\">$t<\/span><span class=\"cp\">-><\/span><span class=\"cfn\">columns<\/span><span class=\"cp\">([<\/span><\/span>\r\n<span class=\"ln\">    <span class=\"cv\">TextColumn<\/span><span class=\"cp\">::<\/span><span class=\"cfn\">make<\/span><span class=\"cp\">(<\/span><span class=\"cs\">'title'<\/span><span class=\"cp\">)-><\/span><span class=\"cfn\">searchable<\/span><span class=\"cp\">(),<\/span><\/span>\r\n<span class=\"ln\">    <span class=\"cv\">BooleanColumn<\/span><span class=\"cp\">::<\/span><span class=\"cfn\">make<\/span><span class=\"cp\">(<\/span><span class=\"cs\">'published'<\/span><span class=\"cp\">),<\/span><\/span>\r\n<span class=\"ln\">  <span class=\"cp\">])-><\/span><span class=\"cfn\">filters<\/span><span class=\"cp\">([<\/span><span class=\"cv\">TrashedFilter<\/span><span class=\"cp\">::<\/span><span class=\"cfn\">make<\/span><span class=\"cp\">()]);<\/span><\/span>\r\n<span class=\"ln\"><span class=\"cp\">}<\/span><\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- LIVEWIRE -->\r\n    <div class=\"service-block reverse fade-in\">\r\n      <div class=\"svc-info\">\r\n        <div class=\"svc-eyebrow\"><span class=\"svc-num\">04 \/\/<\/span><span class=\"svc-tag\"><i class=\"fas fa-bolt\" style=\"margin-right:5px;\"><\/i>Reactive<\/span><\/div>\r\n        <div class=\"svc-icon-big\"><i class=\"fas fa-bolt\" style=\"color:var(--gold);\"><\/i><\/div>\r\n        <h3 class=\"svc-title\">Livewire<\/h3>\r\n        <p class=\"svc-desc\">Full-stack reactive components for Laravel. Build SPA-like interfaces with pure PHP + Blade \u2014 real-time search, live forms and instant updates. Zero separate JS framework.<\/p>\r\n        <ul class=\"svc-feats\">\r\n          <li><div class=\"feat-icon\"><i class=\"fas fa-check\"><\/i><\/div>Real-time search, filters & validation \u2014 zero page reloads<\/li>\r\n          <li><div class=\"feat-icon\"><i class=\"fas fa-check\"><\/i><\/div>No separate API layer \u2014 PHP talks directly to the DOM<\/li>\r\n          <li><div class=\"feat-icon\"><i class=\"fas fa-check\"><\/i><\/div>Seamless integration with Filament admin panels<\/li>\r\n          <li><div class=\"feat-icon\"><i class=\"fas fa-check\"><\/i><\/div>Live file uploads, pagination & infinite scroll built in<\/li>\r\n        <\/ul>\r\n        <div class=\"svc-stats\">\r\n          <div class=\"svc-stat\"><div class=\"sv\">22k+<\/div><div class=\"sl\">Stars<\/div><\/div>\r\n          <div class=\"svc-stat\"><div class=\"sv\">0<\/div><div class=\"sl\">JS Required<\/div><\/div>\r\n          <div class=\"svc-stat\"><div class=\"sv\">Live<\/div><div class=\"sl\">DOM Updates<\/div><\/div>\r\n        <\/div>\r\n        <a class=\"btn-gold\" href=\"https:\/\/mira-web.com\/contact\/\" target=\"_blank\"><i class=\"fas fa-arrow-right\"><\/i> Build Reactive App<\/a>\r\n      <\/div>\r\n      <div class=\"svc-code-card\">\r\n        <div class=\"svc-topbar\">\r\n          <div class=\"s-dots\"><span class=\"d1\"><\/span><span class=\"d2\"><\/span><span class=\"d3\"><\/span><\/div>\r\n          <span class=\"s-title\">livewire\/SearchPosts.php<\/span>\r\n          <div class=\"s-kbd\"><kbd>\u2318<\/kbd><kbd>K<\/kbd><\/div>\r\n        <\/div>\r\n        <div class=\"copy-wrap\">\r\n          <button class=\"copy-btn\">copy<\/button>\r\n          <div class=\"code-body\">\r\n<span class=\"ln\"><span class=\"ck\">class<\/span> <span class=\"cfn\">SearchPosts<\/span> <span class=\"ck\">extends<\/span> <span class=\"cv\">Component<\/span><\/span>\r\n<span class=\"ln\"><span class=\"cp\">{<\/span><\/span>\r\n<span class=\"ln\">  <span class=\"ck\">public<\/span> <span class=\"cv\">string<\/span> <span class=\"cv\">$search<\/span> <span class=\"cp\">=<\/span> <span class=\"cs\">''<\/span><span class=\"cp\">;<\/span><\/span>\r\n<span class=\"ln\">  <span class=\"ck\">public<\/span> <span class=\"cv\">string<\/span> <span class=\"cv\">$category<\/span> <span class=\"cp\">=<\/span> <span class=\"cs\">'all'<\/span><span class=\"cp\">;<\/span><\/span>\r\n<span class=\"ln\"> <\/span>\r\n<span class=\"ln\">  <span class=\"ck\">public function<\/span> <span class=\"cfn\">render<\/span><span class=\"cp\">() {<\/span><\/span>\r\n<span class=\"ln\">    <span class=\"ck\">return<\/span> <span class=\"cfn\">view<\/span><span class=\"cp\">(<\/span><span class=\"cs\">'livewire.search'<\/span><span class=\"cp\">,[<\/span><\/span>\r\n<span class=\"ln\">      <span class=\"cs\">'posts'<\/span> <span class=\"cp\">=><\/span> <span class=\"cv\">Post<\/span><span class=\"cp\">::<\/span><span class=\"cfn\">search<\/span><span class=\"cp\">(<\/span><span class=\"cv\">$this<\/span><span class=\"cp\">-><\/span><span class=\"cv\">search<\/span><span class=\"cp\">)<\/span><\/span>\r\n<span class=\"ln\">        <span class=\"cp\">-><\/span><span class=\"cfn\">paginate<\/span><span class=\"cp\">(<\/span><span class=\"cs\">10<\/span><span class=\"cp\">),<\/span><\/span>\r\n<span class=\"ln\">    <span class=\"cp\">]);<\/span><\/span>\r\n<span class=\"ln\">  <span class=\"cp\">}<\/span><\/span>\r\n<span class=\"ln\"><span class=\"cp\">}<\/span><\/span>\r\n<span class=\"ln\"> <\/span>\r\n<span class=\"ln\"><span class=\"cc\">{{-- Blade --}}<\/span><\/span>\r\n<span class=\"ln\"><span class=\"cp\">&lt;<\/span><span class=\"ck\">input<\/span> <span class=\"cfn\">wire:model.live<\/span><span class=\"cp\">=<\/span><span class=\"cs\">\"search\"<\/span> <span class=\"cp\">\/&gt;<\/span><\/span>\r\n<span class=\"ln\"><span class=\"ck\">@foreach<\/span><span class=\"cp\">(<\/span><span class=\"cv\">$posts<\/span> <span class=\"ck\">as<\/span> <span class=\"cv\">$p<\/span><span class=\"cp\">)<\/span><\/span>\r\n<span class=\"ln\">  <span class=\"cp\">&lt;<\/span><span class=\"ck\">p<\/span><span class=\"cp\">&gt;{{ <\/span><span class=\"cv\">$p<\/span><span class=\"cp\">-><\/span><span class=\"cv\">title<\/span> <span class=\"cp\">}}&lt;\/<\/span><span class=\"ck\">p<\/span><span class=\"cp\">&gt;<\/span><\/span>\r\n<span class=\"ln\"><span class=\"ck\">@endforeach<\/span><\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- PHP + MOBILE -->\r\n    <div class=\"service-block fade-in\" style=\"border-bottom:none;\">\r\n      <div class=\"svc-info\">\r\n        <div class=\"svc-eyebrow\"><span class=\"svc-num\">05 \/\/<\/span><span class=\"svc-tag\"><i class=\"fab fa-php\" style=\"margin-right:5px;\"><\/i>Native PHP<\/span><\/div>\r\n        <div class=\"svc-icon-big\"><i class=\"fab fa-php\" style=\"color:var(--gold);\"><\/i><\/div>\r\n        <h3 class=\"svc-title\">Native PHP Development<\/h3>\r\n        <p class=\"svc-desc\">Custom MVC architecture. Zero framework overhead. Maximum control over every byte \u2014 ideal for legacy modernization and high-load performance-critical systems.<\/p>\r\n        <ul class=\"svc-feats\">\r\n          <li><div class=\"feat-icon\"><i class=\"fas fa-check\"><\/i><\/div>Framework-free architecture for maximum performance<\/li>\r\n          <li><div class=\"feat-icon\"><i class=\"fas fa-check\"><\/i><\/div>Legacy system integration & codebase modernization<\/li>\r\n          <li><div class=\"feat-icon\"><i class=\"fas fa-check\"><\/i><\/div>High-load apps with fine-tuned query optimization<\/li>\r\n          <li><div class=\"feat-icon\"><i class=\"fas fa-check\"><\/i><\/div>PSR-4 standards, Composer packages, clean OOP design<\/li>\r\n        <\/ul>\r\n        <a class=\"btn-gold\" href=\"https:\/\/mira-web.com\/contact\/\" target=\"_blank\"><i class=\"fas fa-arrow-right\"><\/i> Native PHP Project<\/a>\r\n      <\/div>\r\n      <div class=\"svc-info\">\r\n        <div class=\"svc-eyebrow\"><span class=\"svc-num\">06 \/\/<\/span><span class=\"svc-tag\"><i class=\"fas fa-mobile-alt\" style=\"margin-right:5px;\"><\/i>Mobile<\/span><\/div>\r\n        <div class=\"svc-icon-big\"><i class=\"fas fa-mobile-alt\" style=\"color:var(--gold);\"><\/i><\/div>\r\n        <h3 class=\"svc-title\">Mobile App Development<\/h3>\r\n        <p class=\"svc-desc\">iOS & Android from a single codebase. Flutter + React Native. Powered by Laravel backend. Full App Store & Google Play deployment with ongoing support.<\/p>\r\n        <ul class=\"svc-feats\">\r\n          <li><div class=\"feat-icon\"><i class=\"fas fa-check\"><\/i><\/div>Cross-platform iOS + Android from one codebase<\/li>\r\n          <li><div class=\"feat-icon\"><i class=\"fas fa-check\"><\/i><\/div>Integrated with Laravel REST API backend<\/li>\r\n          <li><div class=\"feat-icon\"><i class=\"fas fa-check\"><\/i><\/div>Push notifications, payments & social login<\/li>\r\n          <li><div class=\"feat-icon\"><i class=\"fas fa-check\"><\/i><\/div>App Store & Google Play deployment included<\/li>\r\n        <\/ul>\r\n        <a class=\"btn-gold\" href=\"https:\/\/mira-web.com\/contact\/\" target=\"_blank\"><i class=\"fas fa-arrow-right\"><\/i> Start Mobile App<\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\nconst observer = new IntersectionObserver((entries) => {\r\n  entries.forEach(e => { if(e.isIntersecting) e.target.classList.add('visible'); });\r\n}, { threshold: 0.12 });\r\ndocument.querySelectorAll('.fade-in').forEach(el => observer.observe(el));\r\n\r\n\/\/ Copy buttons\r\ndocument.querySelectorAll('.copy-btn').forEach(btn => {\r\n  btn.addEventListener('click', function() {\r\n    const code = this.nextElementSibling.textContent;\r\n    navigator.clipboard.writeText(code.trim()).then(() => {\r\n      this.textContent = 'copied!';\r\n      this.style.background = 'var(--gold)';\r\n      this.style.color = '#fff';\r\n      setTimeout(() => { this.textContent = 'copy'; this.style.background = ''; this.style.color = ''; }, 2000);\r\n    });\r\n  });\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ca53e30 e-flex e-con-boxed e-con e-parent\" data-id=\"ca53e30\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-df40424 elementor-widget elementor-widget-html\" data-id=\"df40424\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Section \u2013 Footer<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n<style>\r\n:root{\r\n  --bg:#ffffff;--bg2:#fafaf8;--bg3:#f5f4ef;--card:#ffffff;\r\n  --border:#e8e4d8;--border2:#d4c99a;--gold:#c9a84c;--gold2:#e8c96a;\r\n  --gold-dark:#9a7a2e;--gold-glow:rgba(201,168,76,.15);--text:#1a1a1a;--text2:#5a5550;--text3:#9a9088;\r\n}\r\n*{margin:0;padding:0;box-sizing:border-box;}\r\nbody{font-family:'Inter',sans-serif;background:var(--bg2);overflow-x:hidden;}\r\na{text-decoration:none;color:inherit;}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 FOOTER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfooter{background:var(--bg2);border-top:1px solid var(--border);padding:60px 40px 30px;}\r\n.footer-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px;}\r\n@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}\r\n@media(max-width:600px){.footer-grid{grid-template-columns:1fr;}}\r\n\r\n.f-brand .f-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px;}\r\n.f-brand .f-logo span{font-weight:800;font-size:1.1rem;color:var(--text);}\r\n.f-brand p{font-size:.82rem;color:var(--text2);line-height:1.7;}\r\n\r\n.logo-gem{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--gold) 0%,var(--gold2) 100%);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;color:#fff;box-shadow:0 4px 12px rgba(201,168,76,.4);}\r\n\r\n.f-col h4{font-size:.85rem;font-weight:700;color:var(--text);margin-bottom:14px;}\r\n.f-col ul{list-style:none;display:grid;gap:9px;}\r\n.f-col ul li a{font-size:.82rem;color:var(--text2);transition:color .2s;}\r\n.f-col ul li a:hover{color:var(--gold);}\r\n\r\n.footer-bottom{border-top:1px solid var(--border);padding-top:24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;max-width:1200px;margin:0 auto;font-size:.78rem;color:var(--text3);}\r\n.footer-bottom a{color:var(--gold-dark);}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 FOOTER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<footer>\r\n  <div class=\"footer-grid\">\r\n    <div class=\"f-brand\">\r\n      <div class=\"f-logo\"><div class=\"logo-gem\">M<\/div><span>Mira Web<\/span><\/div>\r\n      <p>Your key to excellence in web design and digital presence. Building scalable, production-ready web applications for businesses across Egypt and the Arab world.<\/p>\r\n    <\/div>\r\n    <div class=\"f-col\">\r\n      <h4>Services<\/h4>\r\n      <ul>\r\n        <li><a href=\"#\">Laravel Development<\/a><\/li>\r\n        <li><a href=\"#\">WordPress & WooCommerce<\/a><\/li>\r\n        <li><a href=\"#\">Filament Admin Panel<\/a><\/li>\r\n        <li><a href=\"#\">Livewire Apps<\/a><\/li>\r\n        <li><a href=\"#\">Mobile Apps<\/a><\/li>\r\n        <li><a href=\"#\">UI\/UX Design<\/a><\/li>\r\n        <li><a href=\"#\">SEO Optimization<\/a><\/li>\r\n      <\/ul>\r\n    <\/div>\r\n    <div class=\"f-col\">\r\n      <h4>Company<\/h4>\r\n      <ul>\r\n        <li><a href=\"https:\/\/mira-web.com\/\" target=\"_blank\">Home<\/a><\/li>\r\n        <li><a href=\"https:\/\/mira-web.com\/services\/\" target=\"_blank\">Services<\/a><\/li>\r\n        <li><a href=\"https:\/\/mira-web.com\/prices\/\" target=\"_blank\">Pricing<\/a><\/li>\r\n        <li><a href=\"https:\/\/mira-web.com\/about\/\" target=\"_blank\">About Us<\/a><\/li>\r\n        <li><a href=\"https:\/\/mira-web.com\/contact\/\" target=\"_blank\">Contact<\/a><\/li>\r\n      <\/ul>\r\n    <\/div>\r\n    <div class=\"f-col\">\r\n      <h4>Technologies<\/h4>\r\n      <ul>\r\n        <li><a href=\"#\">Laravel Framework<\/a><\/li>\r\n        <li><a href=\"#\">WordPress CMS<\/a><\/li>\r\n        <li><a href=\"#\">Filament <\/a><\/li>\r\n        <li><a href=\"#\">Livewire <\/a><\/li>\r\n        <li><a href=\"#\">Flutter & React Native<\/a><\/li>\r\n      <\/ul>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"footer-bottom\">\r\n    <span>\u00a9 2025 <a href=\"https:\/\/mira-web.com\" target=\"_blank\">Mira Web<\/a> \u2014 All rights reserved.<\/span>\r\n    <span>Laravel \u00b7 WordPress \u00b7 Filament \u00b7 Livewire \u00b7 PHP \u00b7 Mobile<\/span>\r\n  <\/div>\r\n<\/footer>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Section \u2013 Services Our Services High-Quality Web Development Services Professional web solutions combining creativity with modern technology. Laravel, WordPress, Filament, Livewire and more. 01 \/\/Backend Laravel Framework The PHP framework for web artisans. Elegant syntax, powerful tools \u2014 Eloquent ORM, Artisan CLI, Queues, Events, Sanctum auth &#038; REST API. Build enterprise-grade applications that scale. Custom [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1261","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/mira-web.com\/ar\/wp-json\/wp\/v2\/pages\/1261","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mira-web.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mira-web.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mira-web.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mira-web.com\/ar\/wp-json\/wp\/v2\/comments?post=1261"}],"version-history":[{"count":36,"href":"https:\/\/mira-web.com\/ar\/wp-json\/wp\/v2\/pages\/1261\/revisions"}],"predecessor-version":[{"id":2533,"href":"https:\/\/mira-web.com\/ar\/wp-json\/wp\/v2\/pages\/1261\/revisions\/2533"}],"wp:attachment":[{"href":"https:\/\/mira-web.com\/ar\/wp-json\/wp\/v2\/media?parent=1261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}