{"id":942,"date":"2026-10-26T17:33:03","date_gmt":"2026-10-26T17:33:03","guid":{"rendered":"https:\/\/tarekseliman.com\/my-services\/"},"modified":"2026-10-29T23:59:07","modified_gmt":"2026-10-29T23:59:07","slug":"my-services","status":"publish","type":"page","link":"https:\/\/tarekseliman.com\/ar\/my-services\/","title":{"rendered":"\u062e\u062f\u0645\u0627\u062a\u064a"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"942\" class=\"elementor elementor-942 elementor-433\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5af0177 e-flex e-con-boxed e-con e-parent\" data-id=\"5af0177\" 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-fb19c5a elementor-widget elementor-widget-html\" data-id=\"fb19c5a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"ts-services-interactive\" id=\"my-services\" aria-labelledby=\"ts-srv-title\" dir=\"rtl\">\r\n<style>\r\n\/* ==========================================================================\r\n   TS Services - Ultra-Interactive 3D Bento Grid & Dynamic Counters (Arabic Version)\r\n   ========================================================================== *\/\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');\r\n\r\n.ts-services-interactive {\r\n    --srv-ink: var(--ts-ink, #14111F);\r\n    --srv-muted: #555555;\r\n    --srv-line: #eaeaea;\r\n    --srv-accent: #5B45C2;\r\n    --srv-accent-light: rgba(91, 69, 194, 0.08);\r\n    --srv-spotlight: rgba(155, 136, 237, 0.14);\r\n    --srv-gradient: linear-gradient(135deg, #9b88ed 20%, #c084fc 50%, #9b88ed 80%);\r\n\r\n    --srv-font-display: 'IBM Plex Sans Arabic', sans-serif;\r\n    --srv-font-body: 'IBM Plex Sans Arabic', sans-serif;\r\n    --srv-font-mono: 'IBM Plex Sans Arabic', sans-serif;\r\n\r\n    position: relative;\r\n    width: 100% !important;\r\n    background: transparent !important;\r\n    color: var(--srv-ink);\r\n    font-family: var(--srv-font-body);\r\n    box-sizing: border-box;\r\n    padding: clamp(70px, 9vw, 130px) 0;\r\n    perspective: 1200px;\r\n}\r\n\r\n.ts-services-interactive * { box-sizing: border-box; margin: 0; padding: 0; }\r\n.ts-services-interactive a { color: inherit; text-decoration: none; }\r\n\r\n.ts-services-interactive .srv-container {\r\n    width: min(1200px, 100% - 40px);\r\n    margin: 0 auto;\r\n    position: relative;\r\n    z-index: 1;\r\n}\r\n\r\n\/* 1. Header *\/\r\n.ts-services-interactive .srv-header {\r\n    border-bottom: 2px solid var(--srv-ink);\r\n    padding-bottom: 36px;\r\n    margin-bottom: 50px;\r\n}\r\n\r\n.ts-services-interactive .srv-subtitle {\r\n    font-family: var(--srv-font-mono);\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.05em;\r\n    color: #4A4663;\r\n    background: rgba(255, 255, 255, 0.65);\r\n    border: 1px solid rgba(255, 255, 255, 0.9);\r\n    padding: 6px 16px;\r\n    border-radius: 99px;\r\n    display: inline-block;\r\n    margin-bottom: 16px;\r\n    box-shadow: 0 4px 15px rgba(91, 69, 194, 0.04);\r\n}\r\n\r\n.ts-services-interactive .srv-title {\r\n    font-family: var(--srv-font-display);\r\n    font-size: clamp(2.5rem, 5.2vw, 4.4rem);\r\n    font-weight: 700;\r\n    line-height: 1.25;\r\n    margin-bottom: 12px;\r\n    color: var(--srv-ink);\r\n}\r\n\r\n.ts-services-interactive .srv-title em {\r\n    font-style: normal;\r\n    background: var(--srv-gradient);\r\n    background-size: 200% auto;\r\n    color: transparent;\r\n    -webkit-background-clip: text;\r\n    background-clip: text;\r\n    display: inline-block;\r\n    animation: srv-shine 5s linear infinite;\r\n}\r\n\r\n@keyframes srv-shine {\r\n    to { background-position: -200% center; }\r\n}\r\n\r\n.ts-services-interactive .srv-lead-p {\r\n    font-size: 1.15rem;\r\n    color: var(--srv-muted);\r\n    line-height: 1.7;\r\n    max-width: 640px;\r\n}\r\n\r\n\/* 2. Interactive Counter Boxes *\/\r\n.ts-services-interactive .srv-stats-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: 24px;\r\n    margin-bottom: 50px;\r\n}\r\n\r\n.ts-services-interactive .srv-stat-box {\r\n    position: relative;\r\n    background: #ffffff;\r\n    border: 1px solid var(--srv-line);\r\n    border-radius: 28px;\r\n    padding: clamp(32px, 4.5vw, 48px);\r\n    overflow: hidden;\r\n    box-shadow: 0 10px 30px rgba(20, 17, 31, 0.02);\r\n    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.1, 1), border-color 0.4s ease, box-shadow 0.4s ease;\r\n    cursor: default;\r\n}\r\n\r\n.ts-services-interactive .srv-stat-box:hover {\r\n    border-color: #9b88ed;\r\n    transform: translateY(-6px);\r\n    box-shadow: 0 20px 45px rgba(91, 69, 194, 0.1);\r\n}\r\n\r\n\/* Ambient Pulse Circle *\/\r\n.ts-services-interactive .srv-stat-box::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: -40px;\r\n    left: -40px;\r\n    width: 140px;\r\n    height: 140px;\r\n    background: radial-gradient(circle, rgba(155, 136, 237, 0.2) 0%, transparent 70%);\r\n    border-radius: 50%;\r\n    pointer-events: none;\r\n    transition: transform 0.5s ease;\r\n}\r\n.ts-services-interactive .srv-stat-box:hover::after {\r\n    transform: scale(1.4);\r\n}\r\n\r\n.ts-services-interactive .srv-stat-number {\r\n    font-family: var(--srv-font-display);\r\n    font-size: clamp(3.2rem, 5.5vw, 4.8rem);\r\n    font-weight: 700;\r\n    color: var(--srv-ink);\r\n    line-height: 1;\r\n    margin-bottom: 12px;\r\n    display: flex;\r\n    align-items: baseline;\r\n    gap: 2px;\r\n    direction: ltr; \r\n    justify-content: flex-end; \r\n}\r\n\r\n.ts-services-interactive .srv-stat-number .srv-plus {\r\n    color: var(--srv-accent);\r\n    font-family: var(--srv-font-mono);\r\n    font-size: 0.75em;\r\n}\r\n\r\n.ts-services-interactive .srv-stat-label {\r\n    font-size: 1.05rem;\r\n    color: var(--srv-muted);\r\n    line-height: 1.6;\r\n    font-weight: 500;\r\n}\r\n\r\n\/* 3. Bento Grid of Services (Interactive Cards) *\/\r\n.ts-services-interactive .srv-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: 24px;\r\n}\r\n\r\n.ts-services-interactive .srv-card {\r\n    position: relative;\r\n    background: #ffffff;\r\n    border: 1px solid var(--srv-line);\r\n    border-radius: 28px;\r\n    padding: clamp(32px, 4vw, 46px);\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    overflow: hidden;\r\n    box-shadow: 0 10px 30px rgba(20, 17, 31, 0.02);\r\n    transition: border-color 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.1, 1), box-shadow 0.4s ease;\r\n    transform-style: preserve-3d;\r\n}\r\n\r\n\/* Dynamic Spotlight Glow Tracked via Mouse *\/\r\n.ts-services-interactive .srv-card::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background: radial-gradient(550px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--srv-spotlight), transparent 50%);\r\n    opacity: 0;\r\n    transition: opacity 0.4s ease;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n}\r\n.ts-services-interactive .srv-card:hover::before {\r\n    opacity: 1;\r\n}\r\n\r\n.ts-services-interactive .srv-card:hover {\r\n    border-color: #9b88ed;\r\n    transform: translateY(-6px);\r\n    box-shadow: 0 22px 50px rgba(91, 69, 194, 0.11);\r\n}\r\n\r\n.ts-services-interactive .srv-card-top {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 32px;\r\n    position: relative;\r\n    z-index: 2;\r\n}\r\n\r\n.ts-services-interactive .srv-card-icon {\r\n    width: 52px;\r\n    height: 52px;\r\n    border-radius: 16px;\r\n    background: var(--srv-accent-light);\r\n    border: 1px solid rgba(91, 69, 194, 0.2);\r\n    display: grid;\r\n    place-items: center;\r\n    color: var(--srv-accent);\r\n    transition: transform 0.4s ease, background-color 0.4s ease, color 0.4s ease;\r\n}\r\n\r\n.ts-services-interactive .srv-card:hover .srv-card-icon {\r\n    transform: scale(1.1) rotate(4deg);\r\n    background: var(--srv-accent);\r\n    color: #ffffff;\r\n}\r\n\r\n.ts-services-interactive .srv-card-icon svg {\r\n    width: 24px;\r\n    height: 24px;\r\n}\r\n\r\n.ts-services-interactive .srv-num-pill {\r\n    font-family: var(--srv-font-mono);\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n    color: var(--srv-accent);\r\n    background: var(--srv-accent-light);\r\n    border: 1px solid rgba(91, 69, 194, 0.2);\r\n    padding: 6px 14px;\r\n    border-radius: 99px;\r\n    transition: background 0.3s ease;\r\n    direction: ltr; \/* \u0644\u0644\u062d\u0641\u0627\u0638 \u0639\u0644\u0649 \u062a\u0631\u062a\u064a\u0628 \u0627\u0644\u0623\u0631\u0642\u0627\u0645 (01 \/ \u0643\u0630\u0627) *\/\r\n}\r\n\r\n.ts-services-interactive .srv-card:hover .srv-num-pill {\r\n    background: rgba(155, 136, 237, 0.2);\r\n}\r\n\r\n.ts-services-interactive .srv-card-body {\r\n    position: relative;\r\n    z-index: 2;\r\n}\r\n\r\n.ts-services-interactive .srv-card-title {\r\n    font-family: var(--srv-font-display);\r\n    font-size: clamp(1.65rem, 2.4vw, 2.1rem);\r\n    font-weight: 700;\r\n    color: var(--srv-ink);\r\n    margin-bottom: 16px;\r\n}\r\n\r\n.ts-services-interactive .srv-card-desc {\r\n    font-size: 1.05rem;\r\n    line-height: 1.8;\r\n    color: var(--srv-muted);\r\n}\r\n\r\n\/* Responsive *\/\r\n@media (max-width: 860px) {\r\n    .ts-services-interactive .srv-stats-grid,\r\n    .ts-services-interactive .srv-grid {\r\n        grid-template-columns: 1fr;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<div class=\"srv-container\">\r\n\r\n    <!-- Header -->\r\n    <header class=\"srv-header\">\r\n        <span class=\"srv-subtitle\">\u062e\u062f\u0645\u0627\u062a\u064a<\/span>\r\n        <h2 class=\"srv-title\">\u0645\u0639\u0627\u064a\u064a\u0631 \u062c\u062f\u064a\u062f\u0629 \u0641\u064a <em>\u0627\u0644\u062a\u0645\u064a\u0632 \u0627\u0644\u0631\u0642\u0645\u064a<\/em><\/h2>\r\n        <p class=\"srv-lead-p\">\u0628\u0628\u0646\u064a \u0645\u0646\u0635\u0627\u062a \u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u062a\u0648\u0633\u0639\u060c \u0645\u062a\u0627\u062c\u0631 \u0631\u0642\u0645\u064a\u0629 \u0628\u062a\u0632\u0648\u062f \u0645\u0628\u064a\u0639\u0627\u062a\u0643\u060c \u0648\u0628\u064a\u0626\u0627\u062a \u0627\u0633\u062a\u0636\u0627\u0641\u0629 \u0642\u0648\u064a\u0629 \u0648\u0645\u0633\u062a\u0642\u0631\u0629.<\/p>\r\n    <\/header>\r\n\r\n    <!-- Metrics Showcase (Animated Counter Cards) -->\r\n    <div class=\"srv-stats-grid\">\r\n        \r\n        <!-- Metric 1: +11 Years Experience -->\r\n        <div class=\"srv-stat-box\">\r\n            <div class=\"srv-stat-number\">\r\n                <span class=\"srv-plus\">+<\/span><span class=\"ts-counter\" data-target=\"11\">0<\/span>\r\n            <\/div>\r\n            <p class=\"srv-stat-label\">\u0633\u0646\u064a\u0646 \u0645\u0646 \u0627\u0644\u062e\u0628\u0631\u0629 \u0627\u0644\u0639\u0645\u0644\u064a\u0629 \u0641\u064a \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0648\u0627\u0644\u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u0631\u0642\u0645\u064a\u0629.<\/p>\r\n        <\/div>\r\n\r\n        <!-- Metric 2: +250 Projects Completed -->\r\n        <div class=\"srv-stat-box\">\r\n            <div class=\"srv-stat-number\">\r\n                <span class=\"srv-plus\">+<\/span><span class=\"ts-counter\" data-target=\"250\">0<\/span>\r\n            <\/div>\r\n            <p class=\"srv-stat-label\">\u0645\u0634\u0631\u0648\u0639 \u0646\u0627\u062c\u062d \u0627\u062a\u0646\u0641\u0630 \u0644\u0644\u0634\u0631\u0643\u0627\u062a \u0648\u0645\u0646\u0635\u0627\u062a \u0627\u0644\u062a\u062c\u0627\u0631\u0629 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629.<\/p>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- 4 Core Pillars with Interactive Glow & 3D Tilt -->\r\n    <div class=\"srv-grid\">\r\n        \r\n        <!-- Pillar 01: WordPress -->\r\n        <article class=\"srv-card\">\r\n            <div class=\"srv-card-top\">\r\n                <div class=\"srv-card-icon\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 7l-5 5 5 5M16 7l5 5-5 5M14 4l-4 16\"\/><\/svg>\r\n                <\/div>\r\n                <span class=\"srv-num-pill\">01 \/ \u0648\u0648\u0631\u062f\u0628\u0631\u064a\u0633<\/span>\r\n            <\/div>\r\n            <div class=\"srv-card-body\">\r\n                <h3 class=\"srv-card-title\">\u062a\u0637\u0648\u064a\u0631 \u0648\u0648\u0631\u062f\u0628\u0631\u064a\u0633<\/h3>\r\n                <p class=\"srv-card-desc\">\r\n                    \u0628\u0628\u0646\u064a \u062d\u0644\u0648\u0644 \u0648\u0648\u0631\u062f\u0628\u0631\u064a\u0633 \u0642\u0648\u064a\u0629 \u0645\u062a\u0641\u0635\u0644\u0629 \u0639\u0644\u0649 \u0645\u0642\u0627\u0633 \u0634\u063a\u0644\u0643\u060c \u0628\u062a\u062c\u0645\u0639 \u0628\u064a\u0646 \u0627\u0644\u0643\u0648\u062f \u0627\u0644\u0646\u0636\u064a\u0641\u060c \u0627\u0644\u0648\u0638\u0627\u064a\u0641 \u0627\u0644\u0645\u062e\u0635\u0635\u0629\u060c \u0627\u0644\u0623\u062f\u0627\u0621 \u0627\u0644\u0633\u0631\u064a\u0639\u060c \u0648\u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u0644\u064a \u062a\u0643\u0628\u0631 \u0645\u0639\u0627\u0643.\r\n                <\/p>\r\n            <\/div>\r\n        <\/article>\r\n\r\n        <!-- Pillar 02: Shopify -->\r\n        <article class=\"srv-card\">\r\n            <div class=\"srv-card-top\">\r\n                <div class=\"srv-card-icon\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 8h12l-1 12H7L6 8zM9 8V6a3 3 0 016 0v2\"\/><\/svg>\r\n                <\/div>\r\n                <span class=\"srv-num-pill\">02 \/ \u0634\u0648\u0628\u064a\u0641\u0627\u064a<\/span>\r\n            <\/div>\r\n            <div class=\"srv-card-body\">\r\n                <h3 class=\"srv-card-title\">\u062a\u0637\u0648\u064a\u0631 \u0634\u0648\u0628\u064a\u0641\u0627\u064a<\/h3>\r\n                <p class=\"srv-card-desc\">\r\n                    \u0628\u0628\u0646\u064a \u0645\u062a\u0627\u062c\u0631 \u0634\u0648\u0628\u064a\u0641\u0627\u064a \u0628\u062a\u0632\u0648\u062f \u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a \u0648\u0645\u0646\u0627\u0633\u0628\u0629 \u0644\u0639\u0645\u0644\u0643\u060c \u0645\u0639 \u0648\u0638\u0627\u064a\u0641 \u0645\u062e\u0635\u0635\u0629\u060c \u0631\u0628\u0637 \u0633\u0644\u0633 \u0645\u0639 \u0627\u0644\u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u062a\u0627\u0646\u064a\u0629\u060c \u0623\u062f\u0627\u0621 \u0645\u0645\u062a\u0627\u0632\u060c \u0648\u062a\u062c\u0631\u0628\u0629 \u0634\u0631\u0627\u0621 \u0633\u0647\u0644\u0629 \u0644\u0644\u0639\u0645\u064a\u0644.\r\n                <\/p>\r\n            <\/div>\r\n        <\/article>\r\n\r\n        <!-- Pillar 03: Server & Hosting -->\r\n        <article class=\"srv-card\">\r\n            <div class=\"srv-card-top\">\r\n                <div class=\"srv-card-icon\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"6\" rx=\"2\"\/><rect x=\"4\" y=\"14\" width=\"16\" height=\"6\" rx=\"2\"\/><path d=\"M8 7h.01M8 17h.01\"\/><\/svg>\r\n                <\/div>\r\n                <span class=\"srv-num-pill\">03 \/ \u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u062a\u062d\u062a\u064a\u0629<\/span>\r\n            <\/div>\r\n            <div class=\"srv-card-body\">\r\n                <h3 class=\"srv-card-title\">\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0633\u064a\u0631\u0641\u0631\u0627\u062a \u0648\u0627\u0644\u0627\u0633\u062a\u0636\u0627\u0641\u0629<\/h3>\r\n                <p class=\"srv-card-desc\">\r\n                    \u0628\u062f\u064a\u0631 \u0628\u064a\u0626\u0627\u062a \u0627\u0633\u062a\u0636\u0627\u0641\u0629 \u0648\u0633\u064a\u0631\u0641\u0631\u0627\u062a \u062a\u0639\u062a\u0645\u062f \u0639\u0644\u064a\u0647\u0627\u060c \u0648\u0628\u0638\u0628\u0637 \u0627\u0644\u0625\u0639\u062f\u0627\u062f\u0627\u062a\u060c \u0627\u0644\u062d\u0645\u0627\u064a\u0629\u060c \u0627\u0644\u062f\u0648\u0645\u064a\u0646\u0627\u062a\u060c \u0627\u0644\u0646\u0633\u062e \u0627\u0644\u0627\u062d\u062a\u064a\u0627\u0637\u064a\u060c \u0648\u0627\u0644\u0623\u062f\u0627\u0621 \u0639\u0634\u0627\u0646 \u0645\u0648\u0642\u0639\u0643 \u064a\u0641\u0636\u0644 \u0633\u0631\u064a\u0639 \u0648\u0645\u0633\u062a\u0642\u0631.\r\n                <\/p>\r\n            <\/div>\r\n        <\/article>\r\n\r\n        <!-- Pillar 04: Custom Web Apps -->\r\n        <article class=\"srv-card\">\r\n            <div class=\"srv-card-top\">\r\n                <div class=\"srv-card-icon\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"2\"\/><path d=\"M3 9h18M9 9v11\"\/><\/svg>\r\n                <\/div>\r\n                <span class=\"srv-num-pill\">04 \/ \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0627\u0644\u0648\u064a\u0628<\/span>\r\n            <\/div>\r\n            <div class=\"srv-card-body\">\r\n                <h3 class=\"srv-card-title\">\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0648\u064a\u0628 \u0645\u062e\u0635\u0635\u0629<\/h3>\r\n                <p class=\"srv-card-desc\">\r\n                    \u0628\u0628\u0646\u064a \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0648\u064a\u0628 \u0645\u062a\u0641\u0635\u0644\u0629 \u0645\u062e\u0635\u0648\u0635 \u0639\u0634\u0627\u0646 \u062a\u0646\u0627\u0633\u0628 \u0637\u0631\u064a\u0642\u0629 \u0634\u063a\u0644\u0643\u060c \u0628\u062a\u062c\u0645\u0639 \u0628\u064a\u0646 \u0627\u0644\u0648\u0638\u0627\u064a\u0641 \u0627\u0644\u0645\u062e\u0635\u0635\u0629\u060c \u0627\u0644\u0648\u0627\u062c\u0647\u0627\u062a \u0627\u0644\u0633\u0647\u0644\u0629\u060c \u0627\u0644\u0631\u0628\u0637 \u0627\u0644\u0642\u0648\u064a\u060c \u0648\u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u062a\u0648\u0633\u0639.\r\n                <\/p>\r\n            <\/div>\r\n        <\/article>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n    \/\/ 1. Mouse Spotlight Tracker on Cards\r\n    const cards = document.querySelectorAll('.ts-services-interactive .srv-card');\r\n    cards.forEach(card => {\r\n        card.addEventListener('mousemove', e => {\r\n            const rect = card.getBoundingClientRect();\r\n            const x = e.clientX - rect.left;\r\n            const y = e.clientY - rect.top;\r\n            card.style.setProperty('--mouse-x', `${x}px`);\r\n            card.style.setProperty('--mouse-y', `${y}px`);\r\n        });\r\n    });\r\n\r\n    \/\/ 2. Smooth InView Dynamic Number Counters\r\n    const counters = document.querySelectorAll('.ts-services-interactive .ts-counter');\r\n    let animated = false;\r\n\r\n    const runCounters = () => {\r\n        counters.forEach(counter => {\r\n            const target = +counter.getAttribute('data-target');\r\n            const duration = 2000; \/\/ 2 seconds\r\n            const stepTime = 20;\r\n            const totalSteps = duration \/ stepTime;\r\n            const increment = target \/ totalSteps;\r\n            let current = 0;\r\n\r\n            const timer = setInterval(() => {\r\n                current += increment;\r\n                if (current >= target) {\r\n                    counter.innerText = target;\r\n                    clearInterval(timer);\r\n                } else {\r\n                    counter.innerText = Math.ceil(current);\r\n                }\r\n            }, stepTime);\r\n        });\r\n    };\r\n\r\n    const observer = new IntersectionObserver((entries) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting && !animated) {\r\n                runCounters();\r\n                animated = true;\r\n            }\r\n        });\r\n    }, { threshold: 0.3 });\r\n\r\n    const statsSection = document.querySelector('.ts-services-interactive .srv-stats-grid');\r\n    if (statsSection) {\r\n        observer.observe(statsSection);\r\n    }\r\n})();\r\n<\/script>\r\n<\/section>\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>\u062e\u062f\u0645\u0627\u062a\u064a \u0645\u0639\u0627\u064a\u064a\u0631 \u062c\u062f\u064a\u062f\u0629 \u0641\u064a \u0627\u0644\u062a\u0645\u064a\u0632 \u0627\u0644\u0631\u0642\u0645\u064a \u0628\u0628\u0646\u064a \u0645\u0646\u0635\u0627\u062a \u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u062a\u0648\u0633\u0639\u060c \u0645\u062a\u0627\u062c\u0631 \u0631\u0642\u0645\u064a\u0629 \u0628\u062a\u0632\u0648\u062f \u0645\u0628\u064a\u0639\u0627\u062a\u0643\u060c \u0648\u0628\u064a\u0626\u0627\u062a \u0627\u0633\u062a\u0636\u0627\u0641\u0629 \u0642\u0648\u064a\u0629 \u0648\u0645\u0633\u062a\u0642\u0631\u0629. +0 \u0633\u0646\u064a\u0646 \u0645\u0646 \u0627\u0644\u062e\u0628\u0631\u0629 \u0627\u0644\u0639\u0645\u0644\u064a\u0629 \u0641\u064a \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0648\u0627\u0644\u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u0631\u0642\u0645\u064a\u0629. +0 \u0645\u0634\u0631\u0648\u0639 \u0646\u0627\u062c\u062d \u0627\u062a\u0646\u0641\u0630 \u0644\u0644\u0634\u0631\u0643\u0627\u062a \u0648\u0645\u0646\u0635\u0627\u062a \u0627\u0644\u062a\u062c\u0627\u0631\u0629 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629. 01 \/ \u0648\u0648\u0631\u062f\u0628\u0631\u064a\u0633 \u062a\u0637\u0648\u064a\u0631 \u0648\u0648\u0631\u062f\u0628\u0631\u064a\u0633 \u0628\u0628\u0646\u064a \u062d\u0644\u0648\u0644 \u0648\u0648\u0631\u062f\u0628\u0631\u064a\u0633 \u0642\u0648\u064a\u0629 \u0645\u062a\u0641\u0635\u0644\u0629 \u0639\u0644\u0649 \u0645\u0642\u0627\u0633 \u0634\u063a\u0644\u0643\u060c \u0628\u062a\u062c\u0645\u0639 \u0628\u064a\u0646 \u0627\u0644\u0643\u0648\u062f \u0627\u0644\u0646\u0636\u064a\u0641\u060c [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-942","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tarekseliman.com\/ar\/wp-json\/wp\/v2\/pages\/942","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tarekseliman.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tarekseliman.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tarekseliman.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tarekseliman.com\/ar\/wp-json\/wp\/v2\/comments?post=942"}],"version-history":[{"count":4,"href":"https:\/\/tarekseliman.com\/ar\/wp-json\/wp\/v2\/pages\/942\/revisions"}],"predecessor-version":[{"id":947,"href":"https:\/\/tarekseliman.com\/ar\/wp-json\/wp\/v2\/pages\/942\/revisions\/947"}],"wp:attachment":[{"href":"https:\/\/tarekseliman.com\/ar\/wp-json\/wp\/v2\/media?parent=942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}